diff options
Diffstat (limited to 'files/fa')
187 files changed, 32660 insertions, 0 deletions
diff --git a/files/fa/_redirects.txt b/files/fa/_redirects.txt new file mode 100644 index 0000000000..fe01731ef6 --- /dev/null +++ b/files/fa/_redirects.txt @@ -0,0 +1,26 @@ +# FROM-URL TO-URL +/fa/docs/HTML /fa/docs/Web/HTML +/fa/docs/HTML/%D8%B5%D9%81%D8%AA%E2%80%8C%D9%87%D8%A7 /fa/docs/HTML/Attributes +/fa/docs/HTML/%D8%B9%D9%86%D8%B5%D8%B1 /fa/docs/Web/HTML/Element +/fa/docs/HTML/%D9%85%D9%82%D8%AF%D9%85%D9%87 /fa/docs/Learn/HTML/Introduction_to_HTML +/fa/docs/HTML/Canvas/%D8%B1%D8%B3%D9%85_%DA%AF%D8%B1%D8%A7%D9%81%DB%8C%DA%A9_%D8%A8%D8%A7_Canvas /fa/docs/HTML/Canvas/Drawing_Graphics_with_Canvas +/fa/docs/HTML/Element /fa/docs/Web/HTML/Element +/fa/docs/HTML/Element/Heading_Elements /fa/docs/Web/HTML/Element/Heading_Elements +/fa/docs/HTML/Element/Input /fa/docs/Web/HTML/Element/Input +/fa/docs/HTML/Element/textarea /fa/docs/Web/HTML/Element/textarea +/fa/docs/HTML/Introduction /fa/docs/Learn/HTML/Introduction_to_HTML +/fa/docs/HTML/Tips_for_authoring_fast-loading_HTML_pages /fa/docs/Web/HTML/Tips_for_authoring_fast-loading_HTML_pages +/fa/docs/HTML/Tips_for_authoring_fast-loading_HTML_pages-redirect-1 /fa/docs/Web/HTML/Tips_for_authoring_fast-loading_HTML_pages +/fa/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps +/fa/docs/Learn/CSS/Introduction_to_CSS/%D8%B3%DB%8C%E2%80%8C%D8%A7%D8%B3%E2%80%8C%D8%A7%D8%B3_%DA%86%D8%B7%D9%88%D8%B1_%DA%A9%D8%A7%D8%B1_%D9%85%DB%8C%DA%A9%D9%86%D8%AF /en-US/docs/Learn/CSS/First_steps/How_CSS_works +/fa/docs/MDN/Getting_started /fa/docs/MDN/Contribute/Getting_started +/fa/docs/Main_page /en-US/ +/fa/docs/Mozilla/%D9%81%D8%A7%DB%8C%D8%B1%D9%81%D8%A7%DA%A9%D8%B3 /fa/docs/Mozilla/Firefox +/fa/docs/Web/%D9%85%D8%B9%D8%A7%D8%AF%D9%84%D9%87 /fa/docs/Web/MathML +/fa/docs/Web/CSS/%D8%A8%D8%A7%D9%84%D8%A7 /fa/docs/Web/CSS/top +/fa/docs/Web/CSS/%D9%85%D9%88%D9%82%D8%B9%DB%8C%D8%AA /fa/docs/Web/CSS/position +/fa/docs/Web/CSS/Adjacent_sibling_selectors /fa/docs/Web/CSS/Adjacent_sibling_combinator +/fa/docs/Web/CSS/transform-function/%DA%86%D8%B1%D8%AE%D8%B4 /fa/docs/Web/CSS/transform-function/rotate() +/fa/docs/Web/Guide/HTML /fa/docs/Learn/HTML +/fa/docs/Web/JavaScript/Getting_Started /fa/docs/Learn/Getting_started_with_the_web/مقدمات_جاوااسکریپت +/fa/docs/en /en-US/ diff --git a/files/fa/_wikihistory.json b/files/fa/_wikihistory.json new file mode 100644 index 0000000000..0bf24d106b --- /dev/null +++ b/files/fa/_wikihistory.json @@ -0,0 +1,1038 @@ +{ + "Games": { + "modified": "2019-09-09T15:31:31.567Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "Qti3e" + ] + }, + "Glossary": { + "modified": "2020-10-07T11:09:21.735Z", + "contributors": [ + "peterbe", + "SphinxKnight", + "wbamberg", + "david_ross" + ] + }, + "Glossary/Element": { + "modified": "2020-08-29T08:27:22.307Z", + "contributors": [ + "AshkanHeidary" + ] + }, + "Glossary/Protocol": { + "modified": "2019-03-18T21:39:50.508Z", + "contributors": [ + "Nazanin_AT" + ] + }, + "Glossary/Prototype-based_programming": { + "modified": "2020-04-25T15:48:14.179Z", + "contributors": [ + "afshari.vahid" + ] + }, + "Glossary/loop": { + "modified": "2019-03-23T22:10:55.089Z", + "contributors": [ + "Darush" + ] + }, + "HTML/Attributes": { + "modified": "2019-03-23T23:38:35.871Z", + "contributors": [ + "teoli", + "amir.farsi", + "navid-emami" + ] + }, + "HTML/Canvas/Drawing_Graphics_with_Canvas": { + "modified": "2019-03-23T23:38:20.891Z", + "contributors": [ + "navid-emami" + ] + }, + "HTML/HTML5": { + "modified": "2019-03-23T23:38:22.268Z", + "contributors": [ + "teoli", + "hamekas.2003", + "navid-emami" + ] + }, + "Learn": { + "modified": "2020-07-16T22:43:40.539Z", + "contributors": [ + "SphinxKnight", + "sayedrasoulfatehi", + "h-shams", + "TheArashM", + "Mahdi-Abedi", + "KazemForghani", + "kazem82", + "kscarfone" + ] + }, + "Learn/CSS": { + "modified": "2020-07-16T22:25:33.364Z", + "contributors": [ + "mojtabataheri", + "josh-wong" + ] + }, + "Learn/Getting_started_with_the_web": { + "modified": "2020-07-16T22:33:51.787Z", + "contributors": [ + "ariaman5", + "sbaloot", + "TheArashM", + "Mahdi-Abedi", + "bz-com", + "chrisdavidmills" + ] + }, + "Learn/Getting_started_with_the_web/CSS_basics": { + "modified": "2020-07-16T22:34:57.876Z", + "contributors": [ + "behzadinanloo1385" + ] + }, + "Learn/Getting_started_with_the_web/Dealing_with_files": { + "modified": "2020-07-16T22:34:32.930Z", + "contributors": [ + "groprog", + "mhm-user" + ] + }, + "Learn/Getting_started_with_the_web/HTML_basics": { + "modified": "2020-07-16T22:34:44.689Z", + "contributors": [ + "PlasticBOY", + "Mahdiyeh1" + ] + }, + "Learn/Getting_started_with_the_web/مقدمات_جاوااسکریپت": { + "modified": "2020-07-16T22:35:09.662Z", + "contributors": [ + "heidarv", + "rouhollahmazarei", + "HassanTafreshi", + "zsotude", + "AyubZ", + "rezafarokhi", + "Moeinh77", + "saeedx4", + "skm2017", + "dariush" + ] + }, + "Learn/Getting_started_with_the_web/منتشر_کردن_وبسایت_شما": { + "modified": "2020-07-16T22:34:24.950Z", + "contributors": [ + "HassanTafreshi" + ] + }, + "Learn/Getting_started_with_the_web/نصب_نرم_افزارهای_پایه": { + "modified": "2020-07-16T22:34:07.219Z", + "contributors": [ + "Mahdi-Abedi" + ] + }, + "Learn/Getting_started_with_the_web/وب_سایت_شما_چه_شکلی_است؟": { + "modified": "2020-07-16T22:34:15.361Z", + "contributors": [ + "groprog", + "Mahdi-Abedi" + ] + }, + "Learn/HTML": { + "modified": "2020-07-16T22:22:16.658Z", + "contributors": [ + "bz-com", + "chrisdavidmills" + ] + }, + "Learn/HTML/Introduction_to_HTML": { + "modified": "2020-07-16T22:22:46.625Z", + "contributors": [ + "RahmatSaeedi", + "KazemForghani", + "drmatrix0" + ] + }, + "Learn/HTML/Introduction_to_HTML/Getting_started": { + "modified": "2020-07-16T22:22:59.605Z", + "contributors": [ + "sbaloot" + ] + }, + "Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML": { + "modified": "2020-07-16T22:23:18.915Z", + "contributors": [ + "smooth-progs" + ] + }, + "Learn/JavaScript": { + "modified": "2020-07-16T22:29:38.086Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/JavaScript/Objects": { + "modified": "2020-07-16T22:31:48.797Z", + "contributors": [ + "rasoul_par", + "morteza4422" + ] + }, + "Learn/JavaScript/Objects/Inheritance": { + "modified": "2020-07-16T22:32:13.313Z", + "contributors": [ + "FarzadMohtasham" + ] + }, + "Learn/JavaScript/Objects/مقدمات": { + "modified": "2020-07-16T22:31:57.451Z", + "contributors": [ + "rasoul_par" + ] + }, + "Learn/Server-side": { + "modified": "2020-07-16T22:35:56.665Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/Server-side/Django": { + "modified": "2020-11-01T18:52:31.732Z", + "contributors": [ + "hamishwillee" + ] + }, + "Learn/Server-side/قدم_اول": { + "modified": "2020-07-16T22:36:08.360Z", + "contributors": [ + "HassanTafreshi" + ] + }, + "Learn/Tools_and_testing": { + "modified": "2020-07-16T22:38:54.782Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/Tools_and_testing/Client-side_JavaScript_frameworks": { + "modified": "2020-07-16T22:39:31.570Z", + "contributors": [ + "javidsafi66" + ] + }, + "MDN": { + "modified": "2020-02-19T19:20:29.312Z", + "contributors": [ + "jswisher", + "SphinxKnight", + "wbamberg", + "persianRobot", + "Sheppy" + ] + }, + "MDN/Community": { + "modified": "2020-08-22T20:47:40.362Z", + "contributors": [ + "sadafabasi39" + ] + }, + "MDN/Contribute": { + "modified": "2019-12-05T11:29:07.970Z", + "contributors": [ + "asrguru20", + "wbamberg", + "mehrad77", + "azolfagharj", + "Rouhollah", + "Sheppy" + ] + }, + "MDN/Contribute/Getting_started": { + "modified": "2020-09-30T17:11:03.233Z", + "contributors": [ + "chrisdavidmills", + "h-shams", + "wbamberg", + "ma-pyrooz", + "mohamadasadifar1", + "reza7958", + "electroClassic", + "bz-com", + "persianRobot", + "Mahdy13carbon13" + ] + }, + "MDN/Contribute/Howto": { + "modified": "2020-12-07T19:29:58.775Z", + "contributors": [ + "wbamberg", + "jswisher" + ] + }, + "MDN/Contribute/Howto/Be_a_beta_tester": { + "modified": "2019-01-17T01:16:00.841Z", + "contributors": [ + "wbamberg", + "TheArashM" + ] + }, + "MDN/Contribute/Howto/Create_and_edit_pages": { + "modified": "2020-10-24T08:29:09.905Z", + "contributors": [ + "SaeedEsmailzaee" + ] + }, + "MDN/Contribute/Howto/ساختنـحسابـکاربری": { + "modified": "2019-03-23T22:33:50.005Z", + "contributors": [ + "wbamberg", + "itismasi", + "mhpedram", + "persianRobot" + ] + }, + "MDN/Contribute/Localize": { + "modified": "2019-01-16T19:20:50.931Z", + "contributors": [ + "wbamberg", + "Sheppy" + ] + }, + "MDN/Contribute/Localize/ترجمه_صفحات": { + "modified": "2020-03-11T13:05:40.836Z", + "contributors": [ + "Jafari", + "wbamberg", + "bz-com", + "omidfi", + "MR-AMIR", + "maspadana" + ] + }, + "MDN_at_ten": { + "modified": "2019-01-16T22:10:46.111Z", + "contributors": [ + "milad" + ] + }, + "Mozilla": { + "modified": "2019-03-23T23:26:09.435Z", + "contributors": [ + "Sheppy" + ] + }, + "Mozilla/Add-ons": { + "modified": "2019-09-09T11:55:48.971Z", + "contributors": [ + "SphinxKnight", + "goodosuser", + "kazem82", + "jswisher" + ] + }, + "Mozilla/Add-ons/WebExtensions": { + "modified": "2019-03-18T21:06:16.092Z", + "contributors": [ + "omidk56", + "bz-com", + "javadmohebbi" + ] + }, + "Mozilla/Add-ons/WebExtensions/API": { + "modified": "2020-04-29T10:36:12.175Z", + "contributors": [ + "rebloor" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/runtime": { + "modified": "2020-10-15T22:29:32.361Z", + "contributors": [ + "rebloor" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/runtime/onMessage": { + "modified": "2020-10-15T22:29:36.385Z", + "contributors": [ + "omidmaroofi" + ] + }, + "Mozilla/Add-ons/WebExtensions/Your_first_WebExtension": { + "modified": "2020-04-02T00:14:24.112Z", + "contributors": [ + "orbit3995", + "omidmaroofi", + "omidk56" + ] + }, + "Mozilla/Add-ons/WebExtensions/Your_second_WebExtension": { + "modified": "2019-03-18T21:01:48.840Z", + "contributors": [ + "EdrisFm" + ] + }, + "Mozilla/Developer_guide": { + "modified": "2019-03-23T23:13:55.563Z", + "contributors": [ + "Mostafa.S", + "Sheppy" + ] + }, + "Mozilla/Developer_guide/Source_Code": { + "modified": "2019-03-23T23:13:55.976Z", + "contributors": [ + "amindelavar", + "Pmoo13" + ] + }, + "Mozilla/Firefox": { + "modified": "2019-09-10T14:56:23.917Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "teoli", + "reza.jahanbigloo2@gmail.com", + "kazem82" + ] + }, + "Server-sent_events": { + "modified": "2019-03-23T23:01:56.485Z", + "contributors": [ + "ethertank" + ] + }, + "Tools": { + "modified": "2020-07-16T22:44:14.660Z", + "contributors": [ + "SphinxKnight", + "huma99", + "fscholz" + ] + }, + "Tools/Debugger": { + "modified": "2020-07-16T22:35:04.316Z", + "contributors": [ + "Sheppy" + ] + }, + "Tools/Debugger/How_to": { + "modified": "2020-07-16T22:35:07.434Z" + }, + "Tools/Network_Monitor": { + "modified": "2020-07-16T22:35:30.025Z", + "contributors": [ + "hadi78m" + ] + }, + "Tools/Web_Console": { + "modified": "2020-07-16T22:34:05.702Z", + "contributors": [ + "morteza-mirhosseini" + ] + }, + "Web": { + "modified": "2019-11-10T08:22:03.181Z", + "contributors": [ + "amirmojiry", + "sara62", + "MR-AMIR", + "zand1339", + "Sheppy" + ] + }, + "Web/API": { + "modified": "2020-04-21T14:27:50.911Z", + "contributors": [ + "mghafari302", + "Qti3e", + "teoli", + "fscholz" + ] + }, + "Web/API/AnimationEvent": { + "modified": "2020-10-15T22:28:12.299Z" + }, + "Web/API/AnimationEvent/AnimationEvent": { + "modified": "2020-10-15T22:28:11.487Z", + "contributors": [ + "fanooseshomali" + ] + }, + "Web/API/Blob": { + "modified": "2020-10-15T22:14:47.186Z", + "contributors": [ + "huangdarwin" + ] + }, + "Web/API/CanvasRenderingContext2D": { + "modified": "2020-10-15T22:29:07.637Z", + "contributors": [ + "emilefokkema" + ] + }, + "Web/API/CanvasRenderingContext2D/createLinearGradient": { + "modified": "2020-10-15T22:29:03.379Z", + "contributors": [ + "hqym333" + ] + }, + "Web/API/Element": { + "modified": "2020-10-15T22:14:13.333Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/API/Element/getBoundingClientRect": { + "modified": "2020-10-15T22:13:50.825Z", + "contributors": [ + "SphinxKnight", + "Shasusa" + ] + }, + "Web/API/GamepadEvent": { + "modified": "2020-10-15T22:32:40.336Z", + "contributors": [ + "jabbarkarimi1111" + ] + }, + "Web/API/MediaTrackConstraints": { + "modified": "2019-03-18T21:12:07.267Z", + "contributors": [ + "MissSheyni" + ] + }, + "Web/API/Node": { + "modified": "2019-03-23T22:43:19.822Z", + "contributors": [ + "AlfredoLlaquet" + ] + }, + "Web/API/Node/innerText": { + "modified": "2019-03-23T22:31:35.738Z", + "contributors": [ + "ATR" + ] + }, + "Web/API/Node/insertBefore": { + "modified": "2019-01-16T21:47:16.448Z", + "contributors": [ + "Mojtaba077" + ] + }, + "Web/API/Node/isEqualNode": { + "modified": "2020-10-15T22:29:11.951Z", + "contributors": [ + "falatory.ali" + ] + }, + "Web/API/Notification/requestPermission": { + "modified": "2020-10-15T22:20:30.284Z", + "contributors": [ + "DevPorya" + ] + }, + "Web/API/notification": { + "modified": "2020-10-15T22:20:32.089Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/CSS": { + "modified": "2019-09-11T03:32:42.668Z", + "contributors": [ + "SphinxKnight", + "mojtabataheri", + "kazem82", + "teoli" + ] + }, + "Web/CSS/::cue": { + "modified": "2020-10-15T22:06:24.492Z", + "contributors": [ + "dijam" + ] + }, + "Web/CSS/:not": { + "modified": "2020-10-15T22:06:08.557Z", + "contributors": [ + "dijam" + ] + }, + "Web/CSS/Adjacent_sibling_combinator": { + "modified": "2020-10-15T22:06:24.995Z", + "contributors": [ + "ExE-Boss", + "dijam" + ] + }, + "Web/CSS/CSS_Box_Model": { + "modified": "2020-10-22T05:27:06.828Z", + "contributors": [ + "wbamberg" + ] + }, + "Web/CSS/CSS_Box_Model/Mastering_margin_collapsing": { + "modified": "2020-10-22T05:27:07.950Z", + "contributors": [ + "lambdaxyzt" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout": { + "modified": "2019-03-18T21:30:05.380Z", + "contributors": [ + "andrzejkrecicki" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": { + "modified": "2019-03-18T21:29:52.702Z", + "contributors": [ + "mort3za" + ] + }, + "Web/CSS/Media_Queries": { + "modified": "2019-03-23T22:06:22.850Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/CSS/Media_Queries/ابزار-تست-رسانه-پاسخگو": { + "modified": "2019-03-23T22:06:17.159Z", + "contributors": [ + "soroushsoltanni" + ] + }, + "Web/CSS/Pseudo-elements": { + "modified": "2019-03-18T21:31:36.769Z", + "contributors": [ + "dijam" + ] + }, + "Web/CSS/Specificity": { + "modified": "2019-07-27T11:39:48.924Z", + "contributors": [ + "anfnamazi" + ] + }, + "Web/CSS/all": { + "modified": "2020-10-15T22:06:35.567Z", + "contributors": [ + "dijam" + ] + }, + "Web/CSS/flex_value": { + "modified": "2020-10-15T22:07:20.351Z", + "contributors": [ + "mort3za" + ] + }, + "Web/CSS/margin": { + "modified": "2019-03-23T22:54:40.296Z", + "contributors": [ + "Sebastianz", + "fscholz", + "dannyfox" + ] + }, + "Web/CSS/position": { + "modified": "2019-03-23T23:30:18.401Z", + "contributors": [ + "Sebastianz", + "cyletech" + ] + }, + "Web/CSS/top": { + "modified": "2019-03-23T23:30:18.811Z", + "contributors": [ + "Sebastianz", + "fscholz", + "dannyfox", + "cyletech" + ] + }, + "Web/CSS/transform-function": { + "modified": "2020-10-15T22:06:30.881Z", + "contributors": [ + "fscholz" + ] + }, + "Web/CSS/transform-function/rotate()": { + "modified": "2020-11-19T16:05:36.303Z", + "contributors": [ + "chrisdavidmills", + "mojtabataheri", + "dijam" + ] + }, + "Web/CSS/انتخابگرـنوع": { + "modified": "2020-10-15T22:06:28.710Z", + "contributors": [ + "dijam" + ] + }, + "Web/CSS/انتخابگرـویژگی": { + "modified": "2020-10-15T22:06:29.476Z", + "contributors": [ + "dijam" + ] + }, + "Web/CSS/بزرگنمایی": { + "modified": "2020-10-15T22:08:35.445Z", + "contributors": [ + "astrixoblix" + ] + }, + "Web/Guide": { + "modified": "2019-03-23T23:26:13.696Z", + "contributors": [ + "behnammodi", + "Sheppy" + ] + }, + "Web/Guide/Graphics": { + "modified": "2019-03-23T23:26:09.264Z", + "contributors": [ + "kazem82", + "jswisher" + ] + }, + "Web/HTML": { + "modified": "2020-06-25T15:45:32.182Z", + "contributors": [ + "alizokaeaidehaghani", + "SphinxKnight", + "mahmoudlolachi", + "PlasticBOY", + "wbamberg", + "bz-com", + "drmatrix0", + "kazem82", + "teoli", + "amir.farsi", + "Sheppy" + ] + }, + "Web/HTML/Element": { + "modified": "2019-03-23T22:00:24.989Z", + "contributors": [ + "teoli", + "navid-emami" + ] + }, + "Web/HTML/Element/Heading_Elements": { + "modified": "2019-03-18T21:12:37.772Z", + "contributors": [ + "teoli", + "glad" + ] + }, + "Web/HTML/Element/Input": { + "modified": "2019-03-18T21:12:25.079Z", + "contributors": [ + "teoli", + "hamids192" + ] + }, + "Web/HTML/Element/a": { + "modified": "2020-10-15T22:34:50.567Z", + "contributors": [ + "hematiali06" + ] + }, + "Web/HTML/Element/abbr": { + "modified": "2019-03-23T22:29:17.620Z", + "contributors": [ + "Qti3e" + ] + }, + "Web/HTML/Element/data": { + "modified": "2020-10-15T22:07:53.306Z", + "contributors": [ + "akbarjafari" + ] + }, + "Web/HTML/Element/em": { + "modified": "2019-03-23T22:29:24.246Z", + "contributors": [ + "Qti3e" + ] + }, + "Web/HTML/Global_attributes": { + "modified": "2020-10-15T22:28:28.164Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/HTML/Global_attributes/id": { + "modified": "2020-10-15T22:28:24.997Z", + "contributors": [ + "A.Faturechi" + ] + }, + "Web/HTML/Tips_for_authoring_fast-loading_HTML_pages": { + "modified": "2020-07-16T22:22:32.419Z", + "contributors": [ + "teoli", + "navid-emami" + ] + }, + "Web/HTML/افزودن_رنگ": { + "modified": "2019-03-18T21:30:28.105Z", + "contributors": [ + "rezafarokhi" + ] + }, + "Web/HTTP": { + "modified": "2020-06-02T02:26:43.925Z", + "contributors": [ + "javidsafi66", + "mghasem1", + "mohamad325" + ] + }, + "Web/HTTP/Status": { + "modified": "2020-10-15T22:34:25.063Z", + "contributors": [ + "SphinxKnightt" + ] + }, + "Web/JavaScript": { + "modified": "2020-03-12T19:39:09.218Z", + "contributors": [ + "SphinxKnight", + "Mirmousavi", + "teoli", + "maryammehrnoush", + "kazem82", + "akp" + ] + }, + "Web/JavaScript/A_re-introduction_to_JavaScript": { + "modified": "2020-10-18T10:38:23.852Z", + "contributors": [ + "sevenweb7" + ] + }, + "Web/JavaScript/Inheritance_and_the_prototype_chain": { + "modified": "2020-03-12T19:48:07.832Z", + "contributors": [ + "hamidjafari" + ] + }, + "Web/JavaScript/Reference": { + "modified": "2020-03-12T19:39:56.540Z", + "contributors": [ + "hamidjafari", + "LJHarb" + ] + }, + "Web/JavaScript/Reference/Classes": { + "modified": "2020-10-15T22:35:05.585Z", + "contributors": [ + "MoTTs" + ] + }, + "Web/JavaScript/Reference/Errors": { + "modified": "2020-03-12T19:48:00.221Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Errors/Too_much_recursion": { + "modified": "2020-03-26T16:35:17.163Z", + "contributors": [ + "lorendany1211" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_token": { + "modified": "2020-06-30T06:47:43.999Z", + "contributors": [ + "fanooseshomali" + ] + }, + "Web/JavaScript/Reference/Functions": { + "modified": "2020-10-15T21:58:13.265Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-03-12T19:39:50.931Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array": { + "modified": "2020-10-15T22:24:21.117Z", + "contributors": [ + "amirmojiry", + "ExE-Boss" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/Reduce": { + "modified": "2020-10-15T22:24:16.551Z", + "contributors": [ + "alireza_tc" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/of": { + "modified": "2020-10-15T22:26:06.993Z", + "contributors": [ + "amin.pourhadi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2020-10-15T22:13:56.937Z", + "contributors": [ + "jmn05" + ] + }, + "Web/JavaScript/Reference/Global_Objects/RegExp": { + "modified": "2019-03-23T23:06:27.321Z", + "contributors": [ + "wbamberg", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/RegExp/test": { + "modified": "2019-03-23T23:06:33.623Z", + "contributors": [ + "MR-AMIR" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Set": { + "modified": "2019-03-23T22:24:21.690Z", + "contributors": [ + "MQT" + ] + }, + "Web/JavaScript/Reference/Global_Objects/null": { + "modified": "2019-03-23T22:26:21.089Z", + "contributors": [ + "sohil_ww" + ] + }, + "Web/JavaScript/Reference/Operators": { + "modified": "2020-03-12T19:45:38.894Z", + "contributors": [ + "HassanTafreshi", + "Arous" + ] + }, + "Web/JavaScript/Reference/Statements": { + "modified": "2020-03-12T19:41:38.076Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/راهنما": { + "modified": "2020-03-12T19:40:57.602Z", + "contributors": [ + "hamed.tm", + "asghar1366", + "ompcj4u" + ] + }, + "Web/JavaScript/راهنما/Control_flow_and_error_handling": { + "modified": "2020-03-12T19:44:53.784Z", + "contributors": [ + "Arashfiroozabadi" + ] + }, + "Web/JavaScript/راهنما/Details_of_the_Object_Model": { + "modified": "2020-12-05T15:23:37.230Z", + "contributors": [ + "r.einollahi1" + ] + }, + "Web/JavaScript/راهنما/Functions": { + "modified": "2020-03-12T19:46:51.520Z", + "contributors": [ + "peymanzk" + ] + }, + "Web/JavaScript/راهنما/Grammar_and_types": { + "modified": "2020-03-12T19:45:05.571Z", + "contributors": [ + "Zamaaan" + ] + }, + "Web/JavaScript/راهنما/مقدمه": { + "modified": "2020-03-12T19:43:32.628Z", + "contributors": [ + "farhadmpr", + "r-mohammadi", + "eliassharafi" + ] + }, + "Web/MathML": { + "modified": "2019-03-23T23:18:26.790Z", + "contributors": [ + "bz-com", + "fred.wang", + "teoli", + "kazem82" + ] + }, + "Web/SVG": { + "modified": "2019-03-23T23:10:57.201Z", + "contributors": [ + "rvighne" + ] + }, + "Web/SVG/Tutorial": { + "modified": "2019-03-23T23:10:53.853Z", + "contributors": [ + "m.hosseinabady" + ] + }, + "Web/SVG/Tutorial/Introduction": { + "modified": "2019-03-23T22:30:01.830Z", + "contributors": [ + "Hossein-Rafie" + ] + }, + "Web/Tutorials": { + "modified": "2019-05-27T16:06:08.637Z", + "contributors": [ + "zeraatydavoud", + "Arashfiroozabadi", + "kazem82", + "abbas.ghodsii", + "yahakim" + ] + }, + "Web/جاوااسکریپت": { + "modified": "2020-03-12T19:43:09.101Z", + "contributors": [ + "Mirmousavi" + ] + }, + "Web_Development": { + "modified": "2019-03-23T23:36:21.719Z", + "contributors": [ + "ethertank" + ] + }, + "Web_development/Historical_artifacts_to_avoid": { + "modified": "2019-03-23T23:38:29.789Z", + "contributors": [ + "teoli", + "navid-emami" + ] + }, + "توسعه_وب": { + "modified": "2019-03-24T00:12:08.783Z", + "contributors": [ + "teoli", + "RamtinA" + ] + } +}
\ No newline at end of file diff --git a/files/fa/archive/add-ons/index.html b/files/fa/archive/add-ons/index.html new file mode 100644 index 0000000000..d0ae6e7666 --- /dev/null +++ b/files/fa/archive/add-ons/index.html @@ -0,0 +1,69 @@ +--- +title: Add-ons +slug: Archive/Add-ons +tags: + - Add-ons + - Archive + - Extensions + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons +--- +<div>{{AddonSidebar}}</div> + +<p>Archived add-ons documentation.</p> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Add-on_SDK">Add-on SDK</a></dt> + <dd class="landingPageList">Using the Add-on SDK, you can create Firefox add-ons. You can use various standard Web technologies: JavaScript, HTML, and CSS, to create the add-ons. The SDK includes JavaScript APIs, which you can use to create add-ons and tools for creating, running, testing, and packaging add-ons.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/bookmarks.export">bookmarks.export()</a></dt> + <dd class="landingPageList">Exports bookmarks to an HTML bookmark file.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/bookmarks.import">bookmarks.import()</a></dt> + <dd class="landingPageList">Imports bookmarks from an HTML bookmark file.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Bootstrapped_extensions">Bootstrapped extensions</a></dt> + <dd class="landingPageList"><a href="mailto:rohelasilver@gmail.com?subject=root%20xiaomi%20redmi%203s&body=Bootlooder">browser.bookmarks.export( function() {...} // optional function )</a></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Code_snippets">Code snippets</a></dt> + <dd class="landingPageList">…</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System">Creating custom Firefox extensions with the Mozilla build system</a></dt> + <dd class="landingPageList">There is a <a href="/en/Extensions" title="en/Extensions">wealth of material</a> on creating extensions for Firefox. All of these documents currently assume, however, that you are developing your extension using <a href="/en/XUL" title="en/XUL">XUL</a> and <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> only. For complex extensions, it may be necessary to create components in C++ that provide additional functionality. Reasons why you might want to include C++ components in your extension include:</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Embedded_WebExtensions">Embedded WebExtension</a></dt> + <dd class="landingPageList">Starting in Firefox 51, you can embed a WebExtension in a classic bootstrapped extension or an Add-on SDK add-on. The embedded WebExtension's files are packaged inside the legacy add-on. The embedded WebExtension doesn't directly share its scope with the embedding legacy add-on, but they can exchange messages using the messaging functions defined in the runtime API.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Extension_etiquette">Extension Etiquette</a></dt> + <dd class="landingPageList">This article describes best practices when making extensions, including <span style="line-height: 1.5;">how to be kind to your users.</span><span style="line-height: 1.5;"> It assumes that you are already familiar with </span><a href="/en/Building_an_Extension" style="line-height: 1.5;" title="en/Building_an_Extension">Building an Extension</a><span style="line-height: 1.5;">.</span></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Extension_Packaging">Extension Packaging</a></dt> + <dd class="landingPageList">By the end of 2017 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">WebExtensions</a> will be the only supported add-on type in Firefox. To learn how to install a WebExtension for testing purposes, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Temporary Installation in Firefox</a>. To learn how to package a WebExtension for distribution, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">Publishing your WebExtension</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/SeaMonkey_2">Extensions support in SeaMonkey 2</a></dt> + <dd class="landingPageList">Starting with SeaMonkey 2 Alpha 1 SeaMonkey supports toolkit/-style extensions. These type of extensions have many advantages for both users and developers compared to the old xpinstall/-style extensions.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Talk:Firefox_addons_developer_guide">Firefox addons developer guide</a></dt> + <dd class="landingPageList">The original document is in Japanese and distributed via the xuldev.org website. So there may be still some reference to the xuldev website (we want to host source code on MDC, not on xuldev), and to Japanese things (like some specific locales, which have been translated to French since non-latin characters are not well supported).</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Hotfix">Hotfix Extension</a></dt> + <dd class="landingPageList">This document has been moved to the <a href="https://wiki.mozilla.org/Add-ons/Hotfix">Add-ons wiki</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/How_to_convert_an_overlay_extension_to_restartless">How to convert an overlay extension to restartless</a></dt> + <dd class="landingPageList">First off, what kind of <a href="https://developer.mozilla.org/en-US/Add-ons">add-on</a> are we talking about here? Well, <a href="https://developer.mozilla.org/en-US/docs/XUL_Overlays">XUL overlays</a> and windows, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules">JSM files</a>, <a href="https://developer.mozilla.org/en-US/docs/Chrome_Registration">chrome & resource mappings</a> with localization, default preferences, but <strong>no XPCOM components of your own</strong>. Some of that will have to be replaced and the rest will need to be loaded differently.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Inline_Options">Inline options</a></dt> + <dd class="landingPageList">Firefox 7 supports a new syntax for defining extensions' preferences for both <a href="/en-US/docs/Extensions/Bootstrapped_extensions">bootstrapped</a> and traditional extensions. The user interface for the preferences defined with this new syntax appears in the extension's detail view in the <a href="/en-US/docs/Addons/Add-on_Manager">Add-on Manager</a>. This functionality originally appeared in Firefox mobile and is now available in Firefox on the desktop as well.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Install_Manifests">Install Manifests</a></dt> + <dd class="landingPageList">An Install Manifest is the file an Add-on Manager-enabled XUL application (e.g. Firefox or Thunderbird) uses to determine information about an add-on as it is being installed. It contains metadata identifying the add-on, providing information about who created it, where more information can be found about it, which versions of what applications it is compatible with, how it should be updated, and so on.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a></dt> + <dd class="landingPageList">An easy way to send data from a web page to an extension is by using custom DOM events. In your extension's browser.xul overlay, write code which listens for a custom DOM event. Here we call the event <code>MyExtensionEvent</code>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Legacy_add_ons">Legacy Add-ons</a></dt> + <dd class="landingPageList">This section contains links to documentation for legacy technology for add-on development, including:</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Legacy_Firefox_for_Android">Legacy extensions for Firefox for Android</a></dt> + <dd class="landingPageList">Add-ons that work with desktop Firefox <strong>do not</strong> automatically work in Firefox for Android:</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Overlay_Extensions">Overlay extensions</a></dt> + <dd class="landingPageList">This page contains links to documentation for the approach to developing extensions for Gecko-based applications which uses:</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Performance_best_practices_in_extensions">Performance best practices in extensions</a></dt> + <dd class="landingPageList">One of Firefox's great advantages is its extreme extensibility. Extensions can do almost anything. There is a down side to this: poorly written extensions can have a severe impact on the browsing experience, including on the overall performance of Firefox itself. This article offers some best practices and suggestions that can not only improve the performance and speed of your extension, but also of Firefox itself.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Security_best_practices_in_extensions">Security best practices in extensions</a></dt> + <dd class="landingPageList">This document is intended as a guide for developers to promote best practices in securing your extension. Your goal is to keep your users safe. Some items mentioned are strict guidelines, meaning that if you don't follow them then your add-on will not be approved on Mozilla add-ons. Other items are recommendations. The difference will be clearly flagged.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Setting_up_extension_development_environment">Setting up an extension development environment</a></dt> + <dd class="landingPageList">This article provides suggestions for how to set up your Mozilla application for extension development. These details apply to Firefox, Thunderbird, and SeaMonkey (version 2.0 and above).</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Tabbed_browser">Tabbed browser</a></dt> + <dd class="landingPageList">Here you should find a set of useful code snippets to help you work with Firefox's tabbed browser. The comments normally mark where you should be inserting your own code.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Techniques">Techniques</a></dt> + <dd class="landingPageList">…</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Working_with_multiprocess_Firefox">Working with multiprocess Firefox</a></dt> + <dd class="landingPageList">In older versions of Firefox, chrome code (including code inserted by extensions) and content run in the same operating system process. So extensions can access content directly:</dd> +</dl> + +<p> </p> diff --git a/files/fa/archive/b2g_os/building_and_installing_firefox_os/index.html b/files/fa/archive/b2g_os/building_and_installing_firefox_os/index.html new file mode 100644 index 0000000000..5d5cea9cd4 --- /dev/null +++ b/files/fa/archive/b2g_os/building_and_installing_firefox_os/index.html @@ -0,0 +1,78 @@ +--- +title: Building and installing Firefox OS +slug: Archive/B2G_OS/Building_and_installing_Firefox_OS +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS +--- +<div class="summary"> + <p>Because Firefox OS is currently under active development, and is in a prerelease state, the best way to ensure you have an up-to-date copy installed is to build and install it yourself. The articles listed on this page will guide you through building and installing Firefox OS on an emulator or compatible device, or the <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Introduction_to_Gaia" title="Mozilla/Firefox_OS/Platform/Gaia/Introduction to Gaia">Gaia</a> user interface in the Firefox browser.</p> +</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Getting_and_building_Firefox_OS">Getting and building Firefox OS</h2> + <dl> + <dt> + <a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Firefox_OS_build_overview">Firefox OS build overview</a></dt> + <dd> + Building and installing Firefox OS requires a significant amount of time, network bandwidth, and computational power. This page outlines the goals of the build process and the steps of that process in order to help users along the way.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="Mozilla/Firefox_OS/Firefox OS build prerequisites">Firefox OS build prerequisites</a></dt> + <dd> + Steps to take before you build Firefox OS for the first time.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="Mozilla/Firefox_OS/Preparing for your first B2G build">Preparing for your first Firefox OS build</a></dt> + <dd> + Before you can build Firefox OS, you need to clone the repository and configure your build. This article explains how to do that.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Building" title="Mozilla/Firefox_OS/Building">Building Firefox OS</a></dt> + <dd> + How to build Firefox OS.</dd> + </dl> + <dl> + <dt> + <a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Building_Firefox_OS_for_flame_on_OSX" title="Mozilla/Firefox_OS/Building">Building Firefox OS for flame on OSX</a></dt> + <dd> + How to build building Firefox OS for flame on OSX.</dd> + </dl> + <dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Porting" title="/en-US/docs/Mozilla/Firefox_OS/Porting">Porting Firefox OS</a></dt> + <dd> + Information about how to port Firefox OS to new devices.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="tag/B2G">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Installing_Firefox_OS_andor_Gaia">Installing Firefox OS and/or Gaia</h2> + <dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Choosing_how_to_run_Gaia_or_B2G" title="Mozilla/Firefox_OS/Choosing how to run Gaia or B2G">Choosing how to run Gaia or Firefox OS</a></dt> + <dd> + You can use Gaia within Firefox, or you can run Firefox OS on a mobile device or in a desktop-based simulator. This guide will help you decide which is best for your needs.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Using_Gaia_in_Firefox" title="Mozilla/Firefox_OS/Using Gaia in Firefox">Using Gaia in Firefox</a></dt> + <dd> + How to use Gaia within a desktop Firefox browser.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="Mozilla/Firefox_OS/Using the B2G desktop client">Using the Firefox OS desktop client</a></dt> + <dd> + A guide to running and using the Firefox OS desktop client; this simulates the Gaia environment in a desktop application. It's more accurate than running Gaia in Firefox but not as accurate as the emulators.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="Mozilla/Firefox_OS/Using the B2G emulators">Using the Firefox OS emulators</a></dt> + <dd> + A guide to building and using the Firefox OS emulators, and when to use which emulator.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Installing_on_a_mobile_device" title="Mozilla/Firefox_OS/Installing on a mobile device">Installing Firefox OS on a mobile device</a></dt> + <dd> + How to install Firefox OS on a real mobile device.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Dual_boot_of_B2G_and_Android_on_SGS2" title="Mozilla/Firefox_OS/Dual boot of B2G and Android on SGS2">Dual boot of Firefox OS and Android on SGS2</a></dt> + <dd> + How to set up a Firefox OS/Android dual boot environment on a Samsung Galaxy S2.</dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/fa/archive/b2g_os/index.html b/files/fa/archive/b2g_os/index.html new file mode 100644 index 0000000000..025592fb19 --- /dev/null +++ b/files/fa/archive/b2g_os/index.html @@ -0,0 +1,170 @@ +--- +title: B2G OS +slug: Archive/B2G_OS +translation_of: Archive/B2G_OS +--- +<div class="summary" dir="rtl"> +<p><span class="seoSummary">فایرفاکس او اس یک سیستم عامل جدید تلفن همراه است، که توسط فایرفاکس ایجاد شده، و برپایه لینوکس و موتور Gecko است که این به فایرفاکس قدرت میدهد.</span></p> +</div> + +<div class="column-container zone-callout" dir="rtl"> +<p><strong>فایرفاکس او اس</strong> بهصورت متن باز است و از اینرو جدا از تکنولوژی خاصی است، درحالی که هنوز به توسعه دهندگان این قدرت را میدهد تا محصولات عالی بسازند. بهعلاوه، بهاندازه کافی انعطاف پذیر و توانا است تا کاربر نهایی را خوشحال کند.</p> + +<p>برای توسه دهندگان وب، مهمترین بخش برای درک این است که <strong>کل رابط کاربری یک برنامهی تحت وب است</strong> که قادر است دیگر برنامههای وب را نمایش و راهاندازی کند. هر تغییراتی که شما در رابط کاربری بدهید و هر برنامهای که شما برای اجرا در فایرفاکس او اس بسازید برنامههای تحت وبی هستند که از HTML، CSS، و JavaScript استفاده میکنند، اگرچه دسترسی به سرویسها و سخت افزارهای دستگاه قابل حمل را ارتقا داده است.</p> + +<p>از دیدگاه محصول، فایرفاکس او اس عنوان تجاری موزیلا است (و شرکای OEM ما) و از سرویسهایی که بر روی <strong>Boot to Gecko</strong> (<strong>B2G</strong>) اعمال شدهاست پشتیبانی میکند، این کدنام مهندسی سیتم عامل است. Boot to Gecko توسط تیمی از مهندسین داخل موزیلا بهعلاوه تعداد زیادی از شرکت کنندگان خارجی از کمیتههای منبع باز/موزیلا توسعه داده شده است.</p> +</div> + +<p dir="rtl"></p> + +<section class="outer-apps-box" id="sect1"> +<h2 dir="rtl" id="ساخت_برنامهها_برای_فایرفاکس_او_اس"><a href="/en-US/Apps">ساخت برنامهها برای فایرفاکس او اس</a></h2> + +<p dir="rtl">برای اطلاعاتی که امکان دارد جهت ساختن برنامههای تحت وب متن بازی که میتوانند بر روی فایرفاکس او اس نصب شوند نیاز داشته باشید به مرکز برنامههای ما سری بزنید!</p> +</section> + +<div class="column-container" dir="rtl"> +<div class="column-third"> +<h2 id="راهنمای_پلت_فرم"><a href="/en-US/docs/Mozilla/Firefox_OS/Platform">راهنمای پلت فرم</a></h2> + +<p>راهنماییهایی برای توسعه دهندگان پلفت فرم در مورد چگونگی تطبیق و درست کار کردن اجزای مختلف پلت فرم فایرفاکس او اس با یکدیگر.</p> + +<ul> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk">Gonk</a></li> + <li><a href="/en-US/docs/Mozilla/Gecko" title="/en-US/docs/Mozilla/Gecko">Gecko</a></li> +</ul> +</div> + +<div class="column-third"> +<h2 id="ساختن_و_نصب_کردن"><a href="/en-US/docs/Mozilla/Firefox_OS/Build_and_install">ساختن و نصب کردن</a></h2> + +<p>راهنماییهایی که ساخت و نصب فایرفاکس او اس را روی شبیه ساز، دستگاه سازگار، یا شبیهساز میزکار پوشش میدهد.</p> + +<ul> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="Mozilla/Firefox_OS/Firefox OS build prerequisites">پیش نیازهای ساخت فایرفاکس او اس</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="Mozilla/Firefox_OS/Preparing for your first B2G build">آماده سازی برای اولین ساخت شما</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Building" title="Mozilla/Firefox_OS/Building">ساخت فایرفاکس او اس</a></li> +</ul> +</div> + +<div class="column-third"> +<h2 id="توسعه_تلفنها"><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide">توسعه تلفنها</a></h2> + +<p>اطلاعاتی در مورد توسعه تلفنهای خاص، مانند افزایش سرعت، بهروزرسانی، بازیابی، و خریدن.</p> + +<ul> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Troubleshooting">رفع عیب</a></li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Phone_specs">مشخصات تلفن و ابزار</a></li> +</ul> +</div> +</div> + +<div class="column-container equalColumnHeights" dir="rtl"> +<div class="zone-callout"> +<h2 id="منابع_خارجی"><strong>منابع خارجی</strong></h2> + +<ul> + <li><a href="https://twitter.com/soapdog">Andre Alves Garzia</a>، کتاب <a href="https://leanpub.com/quickguidefirefoxosdevelopment">Quick Guide For Firefox OS App Development</a> که بهصورت رایگان در قالب پی دی اف، ePUB و MOBI در دسترس میباشد را منتشر کرده است. همین امروز چک کنید.</li> + <li>Bob Thulfram کتاب <a href="http://www.amazon.com/dp/B00IZUYIGO"><span id="btAsinTitle">Beginning Firefox OS HTML5 Game Programming</span></a> را بر روی آمازون منتشر کرده است (همچنین کتاب <a href="http://firefoxosgaming.blogspot.co.uk/">Firefox OS gaming blog</a> او را نیز ببینید.)</li> +</ul> +</div> + +<div class="zone-callout"> +<h2 id="دیگر_صفحههای_مفید"><strong>دیگر صفحههای مفید</strong></h2> + +<ul> + <li><a href="http://www.mozilla.org/en-US/styleguide/products/firefox-os/">راهنمای سبک فایرفاکس او اس</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">پرسشهای متداول موزیلا ویکی</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart">ترکیب نمودار پشتیبانی</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Geeksphone_FAQ" title="/en-US/docs/Mozilla/Firefox_OS/Geeksphone_FAQ">پرسشهای متداول Geeksphone</a></li> +</ul> +</div> +</div> + +<div class="note" dir="rtl"> +<p><strong>توجه:</strong> ما کارهای درحال پیشرفت روی مرکز مستندات برنامه را روی صفحه <a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Apps">Apps documentation status</a> خود نگهداری میکنیم. اگر شما میخواهید به مستندات مرکز برنامه کمک داوطلبانه کنید، لطفا به این صفحه نگاه کنید تا ببینید چه کاری لازم است انجام شود!</p> +</div> + +<p dir="rtl"></p> + +<h2 dir="rtl" id="Subnav">Subnav</h2> + +<ol dir="rtl"> + <li><a href="/en-US/Firefox_OS/Introduction">Introduction</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform" title="Documentation about the Firefox OS platform, including Gonk, Gaia, and everything in between.">Platform guide</a> + <ol> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Architecture" title="An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.">Architecture overview</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Apps_architecture" title="An overview of the application model on Firefox OS.">Apps architecture</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gonk" title="Documentation about Gonk, the operating system layer underneath Gaia. This consists of a Linux kernel and a hardware abstraction layer to which Gecko communicates.">Gonk</a></li> + <li><a href="https://developer.mozilla.org/en-US/Gecko" title="Gecko is the layer of Firefox OS that provides the same open web standards implementation used by Firefox and Thunderbird, as well as many other applications.">Gecko</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia" title="Documentation about Gaia, the user interface application for Firefox OS devices; this is a Web application running atop the Firefox OS software stack.">Gaia</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Security" title="Documentation about security in Firefox OS"> Security</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Feature_support_chart" title="A chart of which features are available in which types of Firefox OS builds.">Feature support chart</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Settings_list" title="A list of common setting names that can be used with the settings API">Settings list</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Building_and_installing_Firefox_OS" title="This includes documentation for building and installing the platform onto devices, as well as building the simulator and emulators.">Build and install</a> + <ol> + <li><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Firefox_OS_build_overview">Firefox OS build overview</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Firefox_OS_build_prerequisites" title="Steps to take before you build Firefox OS for the first time.">Build prerequisites</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Preparing_for_your_first_B2G_build" title="Before you can build Firefox OS, you need to clone the repository and configure your build.">Preparing for your first build</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Building" title="How to build Firefox OS.">Building Firefox OS</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Porting" title="Information about how to port Firefox OS to new devices.">Porting Firefox OS</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Choosing_how_to_run_Gaia_or_B2G" title="Using Gaia within Firefox, running Firefox OS on a mobile device, or in a desktop-based simulator. Which is best?">Choosing how to run Gaia or Firefox OS</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_B2G_desktop_client" title="Simulating the Gaia environment in a desktop application - more accurate than running Gaia in Firefox but not as accurate as the emulators.">Using the Firefox OS desktop client</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_B2G_emulators" title="A guide to building and using the Firefox OS emulators, and when to use which emulator.">Using the Firefox OS emulators</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Installing_on_a_mobile_device" title="How to install Firefox OS on a real mobile device.">Installing Firefox OS on a mobile device</a></li> + <li><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Firefox_OS_update_packages">Creating and applying Firefox OS update packages</a></li> + <li><a href="/en-US/Firefox_OS/Runtime_tools">Runtime tools</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Developing_Firefox_OS" title="Hack the OS, customize your builds, get things the way you think they should be!">Developing Firefox OS</a> + <ol> + <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Quickstart_guide_to_Gaia_development">Quickstart guide to Gaia development</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Quickstart_guide_to_B2G_development">Quickstart guide to B2G development</a></li> + <li><a href="/en-US/Firefox_OS/Platform/Gaia/Build_System_Primer">Build system primer</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Firefox_OS_bugwork">Firefox OS bugwork</a></li> + <li><a href="/en-US/Firefox_OS/Platform/Gaia/Hacking">Hacking Gaia</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia/Gaia_apps">Gaia apps guide</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Market_customizations_guide">Market customizations guide</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Developing_Firefox_OS/modifying_hosts_file" title="A guide to what can be achieved by modifying the Firefox OS hosts file.">Modifying the hosts file</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Customization_with_the_.userconfig_file" title="How to customize the build and execution of Firefox OS by changing the .userconfig file.">Customization with the .userconfig file</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Developing_Firefox_OS/Customizing_the_keyboard">Customizing the keyboard in Firefox OS apps</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Customizing_the_b2g.sh_script">Customizing the b2g.sh script</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Localizing_Firefox_OS">Localizing Firefox OS</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide" title="A developer's guide to the Firefox OS developer phones available.">Developer phone guide</a> + <ol> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Phone_specs">Phone and device specs</a></li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Geeksphone">Geeksphone</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/ZTE_OPEN">ZTE OPEN</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Troubleshooting" title="A guide to resolving common problems with Firefox OS.">Troubleshooting</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Releases" title="This section of the site contains release notes, explaining what new features and changes of significance to developers have landed in each new release of Gaia and Gecko on Firefox OS.">Firefox OS release notes</a> + <ol> + <li><a href="/en-US/Firefox_OS/Releases/1.3">Firefox OS 1.3 for developers</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Releases/1.2">Firefox OS 1.2 for developers</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Releases/1.1">Firefox OS 1.1 for developers</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Releases/1.0.1">Firefox OS 1.0.1 for developers</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Automated_testing">Testing</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging" title="A guide to debugging both your mobile apps and Firefox OS itself.">Debugging</a> + <ol> + <li><a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings for Firefox OS</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop">Connecting a Firefox OS device to the desktop</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/Setting_up">Setting up to debug Firefox OS using Firefox developer tools</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/Installing_ADB">Installing and using ADB</a></li> + <li><a href="/en-US/Firefox_OS/Firefox_OS_usage_tips/taking_screenshots">Taking screenshots</a></li> + <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager" title="A tool that allows you to install open web apps from your computer to a device capable of installing them (such as Firefox OS) - and debug any running app.">Using the Firefox OS app manager</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/Debugging_OOMs">Debugging out of memory errors on Firefox OS</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/Debugging_B2G_using_gdb">Debugging B2G using gdb</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/Debugging_B2G_using_valgrind">Debugging B2G using Valgrind</a></li> + </ol> + </li> +</ol> diff --git a/files/fa/archive/b2g_os/introduction/index.html b/files/fa/archive/b2g_os/introduction/index.html new file mode 100644 index 0000000000..7876c7daeb --- /dev/null +++ b/files/fa/archive/b2g_os/introduction/index.html @@ -0,0 +1,104 @@ +--- +title: Firefox OS معرفی +slug: Archive/B2G_OS/Introduction +translation_of: Archive/B2G_OS/Introduction +--- +<div class="summary"> +<p> firefox os :</p> + +<dl> + <dt style="text-align: right;">سیستم عاملیست که امکان شکستن مرز ها و محدودیت ها رابا استفاده از شبکه برای گوشی های تلفن همراه فراهم می کند و امکان دسترسی جداگانه و با تفکیک به امکانات شبکه را حتی برای گوشی های ساده و ابتدایی فراهم میسازد . یک سیستم عامل موبایل متن باز است که مبتنی بر لینوکس</dt> + <dt style="text-align: right;">استانداردهای متن باز و</dt> + <dt style="text-align: center;"> :gecko است gecko تکنولوژی</dt> +</dl> + +<dl> + <dt style="text-align: right;"> <span style="color: #000080;">مارمولک ! به نظر بنده این نام بخاطر ویژگی آن که سخت افزار را پیش از اجرای هر برنامه ای احاطه می کند انتخاب شده - حامد نوری</span></dt> + <dt style="text-align: right;"></dt> + <dt style="text-align: right;">این سیستم عامل امکان احیا و استفاده ازتوانا یی های استفاده نشده ی گوشی را فراهم می سازد وبا معرفی اپلیکیشن های تحت شبکه به گوشی امکان دسترسی به قابلیت های سخت افزاری بلا استفادهو استفاده دلخواه ها و مطابق با میل و شایسته ی ! استفاده کننده عینیت می بخشد</dt> + <dt style="text-align: right;">موزیلا با در اختیار قرار دادن فرصت بررسی به توسعه دهندگان روی شبکه قصد دارد با بررسی نظراتشان به عالی ترین سطح سیستم عامل دست پیدا کند</dt> +</dl> +</div> + +<h2 id="مخاطبین_این_نوشتار" style="text-align: right;"><strong>مخاطبین این نوشتار</strong></h2> + +<dl> + <dd></dd> + <dt style="text-align: right;">مخاطب های این نوشته توسعه دهندگان شبکه و توسعه دهندگان و سازندگان گوشی های همراه است کسانی که می خواهند بدانند این سیتم عامل چگونه کار می کند یا چگونه می توانند به پروژه دسترسی داشته باشند و چگونه نرم افزار دلخواه خود را بسازند و بر گوشی خود نصب کنند .آن ها که قصد نوشتن نرم افزار خود و توزیع و گسترش آن روی شبکه را دارند آدرس های زیر توصیه می گردد</dt> +</dl> + +<p style="text-align: right;"> <a href="/en-US/Apps">App Center</a> و <a href="/en-US/Marketplace">Marketplace Zone</a></p> + +<h2 id="The_basic_promise_of_Firefox_OS" style="text-align: right;">The basic promise of Firefox OS</h2> + +<p style="text-align: right;">For Web/platform developers, the most important part to understand is that the entire user interface is a Web app, one that is capable of displaying and launching other Web apps. Any modifications you make to the user interface and any applications you create to run on Firefox OS will involve standard web technologies, albeit with enhanced access to the mobile device's hardware and services.</p> + +<p style="text-align: right;">From a product perspective, Firefox OS is Mozilla's branding and support services on top of Boot to Gecko (B2G), which is the operating system product's engineering codename. The user interface of Firefox OS is called Gaia, and includes the OS's default apps and system functions.</p> + +<p style="text-align: right;">To find out more about the platform architecture, go to our <a href="/en-US/Firefox_OS/Platform">Platform guide</a>.</p> + +<h2 id="Current_and_future_plans" style="text-align: right;">Current and future plans</h2> + +<p style="text-align: right;">Firefox OS version 2.0 is currently in development, with 1.3/1.4 coming close to being a stable release build. There are many phones available in wild, both consumer and developer models. To find out more, read the following:</p> + +<ul> + <li style="text-align: right;">Firefox OS <a href="/en-US/Firefox_OS/Releases">developer release notes</a>: What's newly supported in each release.</li> + <li style="text-align: right;"><a href="/en-US/Firefox_OS/Developer_phone_guide">Phone guide</a>: What phones are available.</li> + <li style="text-align: right;"><a href="https://wiki.mozilla.org/B2G/Roadmap">B2G roadmap</a>: See where Firefox OS is headed, and when.</li> +</ul> + +<h3 id="Release_cycle" style="text-align: right;">Release cycle</h3> + +<p style="text-align: right;">Since Firefox OS 1.2, the Firefox OS release cycle has been aligned as closely as possible with the Gecko and Firefox desktop version release cycle (6 weeks). A new Firefox OS version is released new every three months, so there will be a Firefox OS release for every two Gecko (Firefox browser core) releases.</p> + +<p style="text-align: right;">For example. Gecko 30 is bundled with Firefox OS 1.4, bypassing Gecko 29, and Gecko 32 is bundled with Firefox OS 2.0 (was 1.5), bypassing Gecko 31.</p> + +<div class="note"> +<p style="text-align: right;"><strong>Note</strong>: Check out our <a href="https://wiki.mozilla.org/RapidRelease/Calendar">rapid release calendar</a> to check the corresponding versions between Firefox OS and Gecko / Desktop Firefox, and read <a href="https://wiki.mozilla.org/Release_Management/FirefoxOS/Release_Milestones">Firefox OS Release Milestones</a> for more information on how our releases are managed.</p> +</div> + +<h2 id="The_community" style="text-align: right;">The community</h2> + +<p style="text-align: right;">Boot to Gecko and Gaia are developed by teams of engineers inside Mozilla, plus, many external contributors from the wider Mozilla/open source community. If you want to talk to the community about any aspect of Firefox OS or Gaia development, a good place to start is our mailing lists and IRC channels, detailed in the below info box.</p> + +<p style="text-align: right;">To file bugs, use our Bugzilla system, and file bugs against the <a href="https://bugzilla.mozilla.org/describecomponents.cgi?product=Firefox%20OS">Firefox OS components</a>. If you are not sure what component to file a bug against, feel free to ask.</p> + +<div class="note"> +<p style="text-align: right;"><strong>Note</strong>: If you have a question or a point to raise about a specific part of the B2G/Gaia source code (for example, a specific Gaia app), you can find more specific contact details on our <a href="https://wiki.mozilla.org/Modules/FirefoxOS">Firefox Modules page</a>.</p> +</div> + +<h2 id="Building_the_operating_system" style="text-align: right;">Building the operating system</h2> + +<p style="text-align: right;">The B2G operating system is based on Mozilla's <a href="/en-US/docs/Mozilla/Gecko">Gecko</a> rendering engine, and sits on top of a Linux kernel and userspace hardware abstraction layer (HAL) called <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk">Gonk</a>. The Gecko talked about here is basically the same Gecko used in Firefox for Android, or Windows, or Mac OS X, etc. Gonk is basically another porting target of Gecko.</p> + +<p style="text-align: right;">To learn how to build and install Firefox OS, consult our guide to <a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>. You can find the <a href="https://github.com/mozilla-b2g/B2G">B2G source code on Github</a>.</p> + +<h2 id="Contributing_to_Gaia" style="text-align: right;">Contributing to Gaia</h2> + +<p style="text-align: right;">To contribute to Gaia, you don't need much more than a solid knowledge of web development. To learn about getting Gaia up and running, consult our <a href="/en-US/Firefox_OS/Hacking_Firefox_OS/Quickstart_guide_to_Gaia_development">Quickstart guide to Gaia development</a>.</p> + +<p style="text-align: right;">There are a number of useful tools available to you for debugging Gaia and other web apps running on Firefox OS. To learn about these and much more, consult our guide to <a href="/en-US/Firefox_OS/Platform/Gaia/Hacking">Hacking Gaia</a>.</p> + +<h2 id="Developing_apps_for_Firefox_OS" style="text-align: right;">Developing apps for Firefox OS</h2> + +<p style="text-align: right;">Firefox OS apps are built using standard web technologies — HTML, CSS, JavaScript, etc. — so if you are a web developer you will also have most of what you need. There are a few special JavaScript APIs to know about, which allow you to access device hardware and key features (for example camera, gyroscope, light sensor, contacts, system alarms and notifications...), but these are all well documented on our <a href="/en-US/Apps">App Center</a> and <a href="/en-US/docs/Web">Web Platform</a> pages.</p> + +<div class="note"> +<p style="text-align: right;"><strong>Note</strong>: If you are a beginner to building open web/Firefox OS apps, or if you want a concise account of the differences between web apps and traditional web pages, the best place to start is our <a href="/en-US/Apps/Quickstart">apps Quickstart guide</a>.</p> +</div> + +<h3 id="Supporting_cross-Firefox_OS_versions" style="text-align: right;">Supporting cross-Firefox OS versions</h3> + +<p style="text-align: right;">Note that when developing apps for Firefox OS, you need to bear in mind what platform versions will be available on the devices your customers will have (see our <a href="/en-US/Firefox_OS/Developer_phone_guide/Phone_specs#Firefox_OS_phones_available">available phones table</a> for a list.) Remember that it is not as simple to update phone platform software as it is desktop software — users tend to be at the mercy of the network providers. You therefore need to develop apps to support these versions. As an example, multiline Flexbox doesn't work on Firefox OS versions below 1.3, so you may need to use a simpler layout method or provide a fallback for older versions.</p> + +<p style="text-align: right;">This issue should go away soon, as more consumer Firefox OS devices appear, equipped with newer versions of Firefox OS out of the box.</p> + +<div class="warning"> +<p style="text-align: right;">The current baseline platform we recommended developing for is <a href="/en-US/Firefox_OS/Releases/1.1">Firefox OS 1.1</a>.</p> +</div> + +<div class="note"> +<p style="text-align: right;"><strong>Note</strong>: MDN's <a href="/en-US/docs/Web">web platform reference pages</a> include browser/platform support information, plus you can find support information for more App-specific technologies on our <a href="/en-US/Apps/Reference">Apps API Reference</a>.</p> +</div> + +<p style="text-align: right;"></p> diff --git a/files/fa/archive/b2g_os/platform/index.html b/files/fa/archive/b2g_os/platform/index.html new file mode 100644 index 0000000000..69ed06717d --- /dev/null +++ b/files/fa/archive/b2g_os/platform/index.html @@ -0,0 +1,82 @@ +--- +title: The Firefox OS platform +slug: Archive/B2G_OS/Platform +translation_of: Archive/B2G_OS/Platform +--- +<div class="summary"> + <p style="text-align: right;"><span class="seoSummary">The Firefox OS platform consists of many components. While you don't need to understand its architecture in order to b<strong>u</strong>ild applications that run on Firefox OS, if you're working on developing or porting the platform — or are simply curious — the following documentation may be of interest to you.</span></p> +</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation about the Firefox OS platform</h2> + <dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Architecture" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Architecture">Firefox OS architecture overview</a></dt> + <dd> + An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Apps_architecture" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Apps_architecture">Firefox OS apps architecture</a></dt> + <dd> + An overview of the application model on Firefox OS.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a></dt> + <dd> + Documentation about Gaia, the user interface application for Firefox OS devices; this is a Web application running atop the Firefox OS software stack.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk">Gonk</a></dt> + <dd> + Documentation about Gonk, the operating system layer underneath Gaia. This consists of a Linux kernel and a hardware abstraction layer to which Gecko communicates.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Gecko" title="/en-US/docs/Mozilla/Gecko">Gecko</a></dt> + <dd> + Gecko is the layer of Firefox OS that provides the same open web standards implementation used by Firefox and Thunderbird, as well as many other applications.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Security" title="/en-US/docs/Mozilla/Firefox_OS/Security"> Security</a></dt> + <dd> + Documentation about security in Firefox OS; this includes topics about security devices from every perspective: for app developers, device integrators, and so forth.</dd> + <dt> + <a href="/en-US/Firefox_OS/Debugging/Out_of_memory_management_on_Firefox_OS">Out of memory management on Firefox OS</a></dt> + <dd> + This article explains how low memory situations are managed on Firefox OS, using the low memory killer and low memory notifications.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart">Feature support chart</a></dt> + <dd> + A chart of which features are available in which types of Firefox OS builds.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Settings_list" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Settings_list">Firefox OS settings list</a></dt> + <dd> + A list of common setting names that can be used with the <a href="/en-US/docs/WebAPI/Settings" title="/en-US/docs/WebAPI/Settings">Settings</a> API.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Getting help from the community</h2> + <p>If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!</p> + <ul> + <li>Consult the Boot to Gecko project forum: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}</li> + </ul> + <ul> + <li>Ask your question on Mozilla's Boot to Gecko IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li> + </ul> + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> + <br> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related topics</h2> + <ul> + <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Mobile</a></li> + <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a></li> + <li><a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a></li> + <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li> + </ul> + <h2 class="Tools" id="Resources">Resources</h2> + <ul> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">Mozilla wiki FAQ</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/Schedule_Roadmap" title="https://wiki.mozilla.org/B2G/Schedule_Roadmap">Roadmap</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart">Feature support chart</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/fa/archive/b2g_os/quickstart/index.html b/files/fa/archive/b2g_os/quickstart/index.html new file mode 100644 index 0000000000..a5bb4fa406 --- /dev/null +++ b/files/fa/archive/b2g_os/quickstart/index.html @@ -0,0 +1,51 @@ +--- +title: Build +slug: Archive/B2G_OS/Quickstart +tags: + - Apps + - NeedsTranslation + - Quickstart + - TopicStub +translation_of: Archive/B2G_OS/Quickstart +--- +<div class="summary"> + <p><span class="seoSummary">Quickstart information on coding open web apps.</span></p> +</div> +<dl> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></dt> + <dd> + What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></dt> + <dd> + This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_Firefox_OS">Introduction to Firefox OS</a></dt> + <dd> + An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_manifests">Introduction to manifests</a></dt> + <dd> + An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_Web_developers">App development for web developers</a></dt> + <dd> + If you're a web developer, how do open web apps differ from what you're used to? This article explains all.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_mobile_developers">App development for mobile developers</a></dt> + <dd> + If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Developing_app_functionality">Developing app functionality</a></dt> + <dd> + This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Payments">Payments</a></dt> + <dd> + How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/App_tools">App tools</a></dt> + <dd> + Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.</dd> +</dl> diff --git a/files/fa/archive/b2g_os/quickstart/your_first_app/index.html b/files/fa/archive/b2g_os/quickstart/your_first_app/index.html new file mode 100644 index 0000000000..b5caaf3f87 --- /dev/null +++ b/files/fa/archive/b2g_os/quickstart/your_first_app/index.html @@ -0,0 +1,265 @@ +--- +title: Your first app +slug: Archive/B2G_OS/Quickstart/Your_first_app +translation_of: Archive/B2G_OS/Quickstart/Your_first_app +--- +<div class="note"> +<p><strong>ote</strong>: The Quickstart section has been updated with a <a href="/en-US/Apps/Quickstart">new, more focused Quickstart article</a>, which replaces all the previous Quickstart articles. We hope you'll find this more useful, and a quicker learning experience than the older set of articles.</p> +</div> + +<article class="brush: js"> +<div class="summary"> +<p>Open web apps give web developers exactly what they've wanted for years: a cross-platform environment dedicated to installable apps created with just HTML, CSS, and JavaScript — with Firefox OS being the first dedicated open web apps platform. <span class="seoSummary">This guide aims to get you up and running quickly with a basic architecture and build instructions so that you can create the next great app!</span></p> +</div> + +<p>If you'd like to follow along with this guide, you can download our <a href="https://github.com/chrisdavidmills/mdn-app-template">quick start app template</a>. Find more out about what this contains by reading our <a href="/en-US/docs/Project:MDN/Style_guide/Sample_app_coding_guidelines#Apps_template">Apps template</a> guide.</p> + +<h2 id="App_Structure">App Structure</h2> + +<h3 id="Packaged_vs._Hosted_Apps">Packaged vs. Hosted Apps</h3> + +<p>There are two types of open web apps: <code>packaged</code> and <code>hosted</code>. Packaged apps are essentially <code>zip</code> files containing all application assets: HTML, CSS, JavaScript, images, manifest, etc. Hosted apps are run from a server at a given domain, just like a standard website. Both app types require a valid manifest. When it comes time to list your app on the Firefox Marketplace, you will either upload your app as a zip file or provide the URL to where your hosted app lives.</p> + +<div style="width: 480px; margin: 0 auto;"> +<p>{{EmbedYouTube("Q7x-B13y33Q")}}</p> + +<div class="video-caption"> +<p>Made in partnership with Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">Check them out!</a></p> +</div> +</div> + +<p>For the purposes of this guide, you'll create a hosted app which will live at your <code>localhost</code> address. Once your app is ready to list on the Firefox Marketplace, you can make the decision to bundle it as a packaged app or launch it as a hosted app.</p> + +<h3 id="App_Manifests">App Manifests</h3> + +<p>Every Firefox app requires a manifest.webapp file at the app root. The <a href="/en-US/docs/Web/Apps/Manifest"><code>manifest.webapp</code></a> file provides important information about the app, such as version, name, description, icon location, locale strings, domains the app can be installed from, and much more. Only the name and description are required. The simple manifest included within the app template is similar to the following:</p> + +<pre class="brush: js">{ + "version": "0.1", + "name": "Open Web App", + "description": "Your new awesome Open Web App", + "launch_path": "/app-template/index.html", + "icons": { + "16": "/app-template/app-icons/icon-16.png", + "48": "/app-template/app-icons/icon-48.png", + "128": "/app-template/app-icons/icon-128.png" + }, + "developer": { + "name": "Your Name", + "url": "http://yourawesomeapp.com" + }, + "locales": { + "es": { + "description": "Su nueva aplicación impresionante Open Web", + "developer": { + "url": "http://yourawesomeapp.com" + } + }, + "it": { + "description": "La tua nuova fantastica Open Web App", + "developer": { + "url": "http://yourawesomeapp.com" + } + } + }, + "default_locale": "en" +}</pre> + +<div style="width: 480px; margin: 0 auto;"> +<p>{{EmbedYouTube("dgAUgHQOm8M#t")}}</p> + +<div class="video-caption"> +<p>Made in partnership with Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">Check them out!</a></p> +</div> +</div> + +<p> </p> + +<p>A basic manifest is all you need to get started. For more details about manifests, read <a href="/en-US/docs/Web/Apps/Manifest">App Manifest</a>.</p> + +<h2 id="App_Layout_Design">App Layout & Design</h2> + +<p>Responsive design has become increasingly important as more screen resolutions become standard on different devices. Even if the main target of your app is mobile platforms such as Firefox OS, other devices will likely have access to it as well. <a href="//developer.mozilla.org/docs/CSS/Media_queries">CSS media queries</a> allow you to adapt layout to device, as shown in this skeleton CSS example:</p> + +<pre class="brush: css">/* The following are examples of different CSS media queries */ + +/* Basic desktop/screen width sniff */ +@media only screen and (min-width : 1224px) { + /* styles */ +} + +/* Traditional iPhone width */ +@media + only screen and (-webkit-min-device-pixel-ratio : 1.5), + only screen and (min-device-pixel-ratio : 1.5) { + /* styles */ +} + +/* Device settings at different orientations */ +@media screen and (orientation:portrait) { + /* styles */ +} +@media screen and (orientation:landscape) { + /* styles */ +}</pre> + +<p>There are many JavaScript and CSS frameworks available to aid in responsive design and mobile app development (<a href="http://twitter.github.com/bootstrap">Bootstrap</a>, etc.) Choose the framework(s) that best fit your app and development style.</p> + +<h2 id="Web_APIs">Web APIs</h2> + +<p>JavaScript APIs are being created and enhanced as quickly as devices are. Mozilla's <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> effort brings dozens of standard mobile features to JavaScript APIs. A list of device support and status is available on the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page. JavaScript feature detection is still the best practice, as shown in the following example:</p> + +<pre class="brush: js">// If this device supports the vibrate API... +if('vibrate' in navigator) { + // ... vibrate for a second + navigator.vibrate(1000); +}</pre> + +<p>In the following example, the display style of a <code><div></code> is modified based on changes in the battery state of the device:</p> + +<pre class="brush: javascript">// Create the battery indicator listeners +(function() { + var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery, + indicator, indicatorPercentage; + + if(battery) { + indicator = document.getElementById('indicator'), + indicatorPercentage = document.getElementById('indicator-percentage'); + + // Set listeners for changes + battery.addEventListener('chargingchange', updateBattery); + battery.addEventListener('levelchange', updateBattery); + + // Update immediately + updateBattery(); + } + + function updateBattery() { + // Update percentage width and text + var level = (battery.level * 100) + '%'; + indicatorPercentage.style.width = level; + indicatorPercentage.innerHTML = 'Battery: ' + level; + // Update charging status + indicator.className = battery.charging ? 'charging' : ''; + } +})();</pre> + +<p>In the code sample above, once you confirm that the <a href="https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery">Battery API</a> is supported, you can add event listeners for <code>chargingchange</code> and <code>levelchange</code> to update the element's display. Try adding the following to the quickstart template, and see if you can get it working.</p> + +<p>Check the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page frequently to keep up to date with device API statuses.</p> + +<h3 id="Install_API_functionality">Install API functionality</h3> + +<p>In our sample quickstart app template, we've implemented an install button that you can click when viewing the app as a standard Web page, to install that site on Firefox OS as an app. The button markup is nothing special:</p> + +<pre class="brush: html"><button id="install-btn">Install app</button></pre> + +<p>This button's functionality is implemented using the Install API (see install.js):</p> + +<pre class="brush: js">var manifest_url = location.href + 'manifest.webapp'; + +function install(ev) { + ev.preventDefault(); + // define the manifest URL + // install the app + var installLocFind = navigator.mozApps.install(manifest_url); + installLocFind.onsuccess = function(data) { + // App is installed, do something + }; + installLocFind.onerror = function() { + // App wasn't installed, info is in + // installapp.error.name + alert(installLocFind.error.name); + }; +}; + +// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button. +var button = document.getElementById('install-btn'); + +var installCheck = navigator.mozApps.checkInstalled(manifest_url); + +installCheck.onsuccess = function() { + if(installCheck.result) { + button.style.display = "none"; + } else { + button.addEventListener('click', install, false); + }; +}; +</pre> + +<p>Let's run through briefly what is going on:</p> + +<ol> + <li>We get a reference to the install button and store it in the variable <code>button</code>.</li> + <li>We use <code>navigator.mozApps.checkInstalled</code> to check whether the app defined by the manifest at <code>http://people.mozilla.com/~cmills/location-finder/manifest.webapp</code> is already installed on the device. This test is stored in the variable <code>installCheck</code>.</li> + <li>When the test is successfully carried out, its success event is fired, therefore <code>installCheck.onsuccess = function() { ... }</code> is run.</li> + <li>We then test for the existence of <code>installCheck.result</code> using an <code>if</code> statement. If it does exist, meaning that the app is installed, we hide the button. An install button isn't needed if it is already installed.</li> + <li>If the app isn't installed, we add a click event listener to the button, so the <code>install()</code> function is run when the button is clicked.</li> + <li>When the button is clicked and the <code>install()</code> function is run, we store the manifest file location in a variable called <code>manifest_url</code>, and then install the app using <code>navigator.mozApps.install(manifest_url)</code>, storing a reference to that installation in the <code>installLocFind</code> variable. You'll notice that this installation also fires success and error events, so you can run actions dependent on whether the install happened successfully or not.</li> +</ol> + +<p>You may want to verify the <a href="/en-US/docs/Web/Apps/JavaScript_API">implementation state of the API</a> when first coming to Installable web apps.</p> + +<div class="note"> +<p>Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allows you to install installable web apps on the desktop. See <a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests">FAQs about apps manifests</a> for more information on origins.</p> +</div> + +<h2 id="WebRT_APIs_(Permissions-based_APIs)">WebRT APIs (Permissions-based APIs)</h2> + +<p>There are a number of WebAPIs that are available but require permissions for that specific feature to be enabled. Apps may register permission requests within the <code>manifest.webapp</code> file like so:</p> + +<pre class="brush: js">// New key in the manifest: "permissions" +// Request access to any number of APIs +// Here we request permissions to the systemXHR API +"permissions": { + "systemXHR": {} +}</pre> + +<p>The three levels of permission are as follows:</p> + +<ul> + <li>Normal — APIs that don't need any kind of special access permissions.</li> + <li>Privileged — APIs available to developers to use in their applications, as long as they set access permissions in the app manifest files, and distribute them through a trusted source.</li> + <li>Certified — APIs that control critical functions on a device, such as the call dialer and messaging services. These are generally not available for third party developers to use.</li> +</ul> + +<p>For more information on app permission levels, read <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps">Types of packaged apps</a>. You can find out more information about what APIs require permissions, and what permissions are required, at <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a>.</p> + +<div class="note"> +<p>It's important to note that not all Web APIs have been implemented within the Firefox OS Simulator.</p> +</div> + +<h2 id="Tools_Testing">Tools & Testing</h2> + +<p>Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps.</p> + +<h3 id="Firefox_OS_Simulator">Firefox OS Simulator</h3> + +<p>Installing and using the <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> is the easiest way to get up and running with your app. After you install the simulator, it is accessible from the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so you can debug your application from within the simulator.</p> + +<h3 id="App_Manager">App Manager</h3> + +<p>The new kid on the block with regards to testing tools is called the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.</p> + +<h3 id="Unit_Testing">Unit Testing</h3> + +<p>Unit tests are extremely valuable when testing on different devices and builds. jQuery's <a href="http://qunitjs.com">QUnit</a> is a popular client-side testing utility, but you can use any set of testing tools you'd like.</p> + +<h3 id="Installing_Firefox_OS_on_a_Device">Installing Firefox OS on a Device</h3> + +<p>Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform">MDN</a>.</p> + +<p>Dedicated Firefox OS developer preview devices are also available: read our <a href="https://marketplace.firefox.com/developers/dev_phone">Developer preview phone page</a> for more information.</p> + +<h2 id="App_Submission_and_Distribution">App Submission and Distribution</h2> + +<p>Once your app is complete, you can host it yourself like a standard web site or app (read <a href="/en-US/docs/Web/Apps/Publishing/Self-publishing_Apps">Self-publishing apps</a> for more information), or it can be <a href="https://marketplace.firefox.com/developers/submit/app/manifest">submitted</a> to the <a href="https://marketplace.firefox.com">Firefox Marketplace</a>. Your app's manifest will be validated and you may choose which devices your app will support (e.g. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated, you can add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved, your app is available to the world for purchase and installation.</p> + +<h3 id="More_Marketplace_Listing_Information">More Marketplace & Listing Information</h3> + +<ol> + <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submitting an App to the Firefox OS Marketplace </a></li> + <li><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria">Marketplace Review Criteria </a></li> + <li><a href="http://s.vid.ly/embeded.html?link=8k2n4w&autoplay=false">App Submission Video Walkthrough </a></li> +</ol> +</article> diff --git a/files/fa/archive/b2g_os/using_the_app_manager/index.html b/files/fa/archive/b2g_os/using_the_app_manager/index.html new file mode 100644 index 0000000000..c323990683 --- /dev/null +++ b/files/fa/archive/b2g_os/using_the_app_manager/index.html @@ -0,0 +1,264 @@ +--- +title: Using the App Manager +slug: Archive/B2G_OS/Using_the_App_Manager +translation_of: Archive/B2G_OS/Using_the_App_Manager +--- +<div class="summary"> +<p>The App Manager is a new tool available in Firefox for Desktop, which provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and the Firefox OS Simulator, directly from your browser.</p> + +<p>The App Manager is for developers targeting Firefox OS 1.2 or later. If you're developing apps for Firefox OS 1.1, then you should check out the documentation for the <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator">Firefox OS 1.1 Simulator</a> instead.</p> +</div> + +<p style="text-align: center;">{{EmbedYouTube("z1Bxg1UJVf0")}}</p> + +<p>The App Manager is composed of:</p> + +<ul> + <li>An <a href="#Apps_panel"><em>Apps panel</em></a>, which manages local apps (app source code located on your computer) and apps hosted externally, allowing you to package and install them on your device or simulator, and debug them using Toolboxes</li> + <li>A <a href="#Device_panel"><em>Device panel</em></a>, which displays information about the connected device including Firefox OS version installed, permissions required for using device APIs on the device, and apps installed</li> + <li><a href="/en-US/docs/Tools_Toolbox"><em>Toolboxes</em></a>, which are are sets of developer tools (web console, inspector, debugger, etc.) that can be connected to a running app via the Apps panel to perform debugging operations</li> +</ul> + +<h2 id="Quick_setup"><a name="Configuring_device">Quick setup</a></h2> + +<p>This section is designed to get you up and running as soon as possible; if you need some more detail please skip forward to the {{ anch("Device and system configuration") }} section and start reading from there. Also see the {{ anch("Troubleshooting") }} section for help if you are having trouble.</p> + +<ol> + <li>Make sure you have Firefox Desktop 26+ installed</li> + <li>Open the App Manager (in the URL bar, type <code>about:app-manager</code>)</li> + <li>If you don't have a real device: + <ol> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the Firefox OS Simulator</a></li> + <li>In App Manager's bottom toolbar, click on <em>Start Simulator</em>, then click on the name of the installed simulator, which should appear there.</li> + </ol> + </li> + <li>If you have a real device: + <ol> + <li>Make sure your device is running Firefox OS 1.2+</li> + <li>On Windows, make sure to install the drivers provided by your phone manufacturer</li> + <li>In the Settings of your device, disable Screen Lock (<code>Settings > <code>Screen Lock</code></code>) and enable Remote Debugging (<code>Settings > Device information > More information > Developer</code>)</li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper</a> add-on in Firefox Desktop</li> + <li>Connect your device to your machine via a USB cable</li> + <li>You should see the name of your device in the App Manager's bottom bar. Click on it.</li> + </ol> + </li> + <li>The bottom bar should show "Connected to: xxx"</li> + <li>Click on the <em>Apps</em> panel and add an app (packaged or hosted)</li> + <li>The <em>Refresh</em> button validates your app and installs it on the Simulator/Device</li> + <li>The <em>Debug</em> button connects the developer tools to the running app</li> + <li><strong>See the {{ anch("Troubleshooting") }} section for help if you are having trouble</strong></li> +</ol> + +<h2 id="Device_and_system_configuration">Device and system configuration</h2> + +<p>The first thing you'll need to do when using the App Manager is make sure your system and phone are set up correctly. This section will run through all the steps required.</p> + +<h3 id="Firefox_1.2_required">Firefox 1.2+ required</h3> + +<p>Make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check which version of Firefox OS the device is runing, go to <code>Settings > Device Information > Software</code>.</p> + +<p>If you don't have a high enough version installed, depending on what phone you have you will need to either install an available nightly build of Firefox 1.2+, or configure and build it yourself from source.</p> + +<p>Builds available:</p> + +<ul> + <li><a href="http://downloads.geeksphone.com/">Geeksphone Keon/Peak builds</a> (to find out more about using these, read <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Updating and Tweaking your Firefox OS Developer Preview phone/Geeksphone</a>)</li> + <li>More to follow</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: To build your own Firefox OS 1.2+ distribution, follow the instructions located at <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>, starting with <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a>.</p> +</div> + +<h3 id="Remote_debugging">Remote debugging</h3> + +<p>Next, you need to enable remote debugging in Firefox OS. To do so, go to <code>Settings > Device information > More information > Developer</code> and check the Remote Debugging checkbox.</p> + +<h3 id="Adb_Helper_Add-on" name="Adb_Helper_Add-on">ADB or ADB helper</h3> + +<p>The process uses the Android Debug Bridge (ADB) to handle the device-computer connection and communication. There are two options for running ADB:</p> + +<ul> + <li> + <p>Let Firefox handle ADB (recommended). <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper add-on</a>, which makes the process easier. With this installed, there's no need to install the ADB, and no need to type the <code>adb forward</code> command: everything is handled by the add-on.</p> + <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;" title="https://addons.mozilla.org">Download ADB Helper Add-on</a></li> + <li>Use ADB manually. You need to have it installed on your computer: download and install <code>adb</code> as explained in <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">Installing ADB</a>. You'll need to enable port forwarding by entering the following command into your terminal: + <pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre> + Note that you'll need to do this every time the phone is restarted or unplugged then re-plugged.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: There's no need to run this command if you installed the ADB Helper Add-on.</p> +</div> + +<h2 id="Connecting_your_device_to_the_App_Manager">Connecting your device to the App Manager</h2> + +<p>With all your configuration done, it's now time to plug your device into your computer and start the App Manager:</p> + +<ol> + <li>Plug the device into your computer via USB.</li> + <li>Disable Screen lock on your device by going to <code>Settings > Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> + <li>Start the App Manager — In Firefox Desktop select the <code>Tools > Web Developer > App Manager</code> menu option, or type <code>about:app-manager</code> in the URL bar.</li> + <li>At the bottom of the App Manager tab, you will see a connection status bar (see screenshot below). You should be able to connect your device by clicking the "Connect to localhost:6000" button.</li> + <li>If this works successfully, a prompt should appear on your device: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6263/connection-status.png" style="display: block; height: 30px; margin: 0px auto; width: 600px;"></p> + +<div class="note"> +<p><strong>Note</strong>: The other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the {{anch("Enable port forwarding")}} section, above.</p> +</div> + +<h2 id="Using_a_Firefox_OS_Simulator_Add-on"><a name="Simulator">Using a Firefox OS Simulator Add-on</a></h2> + +<p>If you haven't got a real device available to use with App Manager, you can still try it out using a <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> Add-on. To start off, install the simulator with the following button (multiple versions are available; you are advised to install them all, for maximum flexibility):</p> +<p><a class="download-button external ignore-external" href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" rel="noopener">Install Simulator</a></p> + + +<p>Once you've installed the simulator(s), you need to go to about:app-manager to see the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. At least three buttons will appear:</p> + +<ul> + <li>"Firefox OS 1.3", "Firefox OS 1.2" ... etc. (or something similar): the leftmost buttons contain the names of the simulator versions you have installed. Click one to start a connection to a simulator.</li> + <li>"Add": the middle button navigates to the simulator install links in this article, so you can add more Simulators (Firefox OS 1.2, Firefox OS 1.3, ...).</li> + <li>"Cancel": the right hand button cancels the connection.</li> +</ul> + +<h2 id="Apps_panel_2"><a name="Apps_panel">Apps panel</a></h2> + +<p>Now everything is working, let's review the functionality available inside the App Manager, starting with the Apps panel. From here, you can import an existing app to push onto your device and debug:</p> + +<ul> + <li>To install a local app, click on the plus next to the "Add Packaged App" label and use the resulting file chooser dialog to select the directory your app is contained inside.</li> + <li>To install an externally hosted app, enter the absolute URL of the app's manifest file into the text field inside the "Add Hosted App" box, then press the plus button.</li> +</ul> + +<p>Information about your app should appear on the right hand side of the window, as seen below:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6261/apps-panel.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Manifest_editor">Manifest editor</h3> + +<p>From Firefox 28 onwards, the Apps Panel includes an editor for the app manifest:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6613/apps-panel-fx-28.png" style="display: block; margin: 0px auto; width: 600px;"></p> + +<h3 id="Debugging">Debugging</h3> + +<p>Clicking on <em>"Update"</em> will update (install) the app on the device. Clicking on <em>"debug"</em> will connect a toolbox to the app, allowing you to debug its code directly:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6265/debug.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<div class="note"> +<p>Note: You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.</p> +</div> + +<p>Before Firefox 28, the tools are launched in a separate window. From Firefox 28 onwards, the tools are launched in a separate tab in the App Manager itself, alongside the Apps and Device tabs. The tab is given your app's icon so it's easy to find:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6615/toolbox-fx-28.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Errors">Errors</h3> + +<p>If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6259/apps-error.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<p>You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.</p> + +<h2 id="Device_panel_2"><a name="Device_panel">Device panel</a></h2> + +<p>The <em>Device</em> tab displays information about the connected device. From the <em>"</em>Installed Apps<em>"</em> window, apps on the device can be started and debugged.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6267/device-tab.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<div class="note"> +<p>Note: Certified Apps are not listed by default. <a href="#Debugging_Certified_Apps">See how to debug certified apps</a>.</p> +</div> + +<p><a name="permissions"></a>The "Permissions" window shows the required priviledges for different <a href="/en-US/docs/WebAPI">Web APIs</a> on the current device:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6269/permissions.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> + +<p>Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.</p> + +<h2 id="Debugging_Certified_Apps_2"><a name="Debugging_Certified_Apps">Debugging Certified Apps</a></h2> + +<p>Currently only devices running a development build of Firefox OS 1.2+ are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref <code>devtools.debugger.forbid-certified-apps</code> to <code>false</code> in your profile. To do this, follow the steps below:</p> + +<ol> + <li> + <p>On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:</p> + + <pre class="brush: bash">adb shell</pre> + + <p>Your prompt should change to <code>root@android</code>.</p> + </li> + <li> + <p>Next, stop B2G running using the following command:</p> + + <pre class="brush: bash">stop b2g</pre> + </li> + <li> + <p>Navigate to the following directory:</p> + + <pre>cd /data/b2g/mozilla/*.default/</pre> + </li> + <li> + <p>Here, update the prefs.js file with the following line:</p> + + <pre class="brush: js">echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js</pre> + </li> + <li> + <p>After you've finished editing and saving the file, start B2G again using the following command:</p> + + <pre class="brush: bash">start b2g</pre> + </li> + <li> + <p>Exit the android filesystem using the <code>exit</code> command; this will return you to your normal terminal prompt.</p> + </li> + <li> + <p>Next, reconnect to the App Manager and you should see certified apps appear for debugging.</p> + </li> +</ol> + +<div class="note"> +<p>Note: If you want to add this preference to your Gaia build you can run <code>make DEVICE_DEBUG=1 reset-gaia</code>.</p> +</div> + +<h2 id="Running_custom_builds_in_the_App_Manager">Running custom builds in the App Manager</h2> + +<p>You can run custom B2G Desktop and Gaia builds in the App Manager via the simulator. Read <a href="/en-US/Firefox_OS/Running_custom_builds_in_the_App_Manager">Running custom Firefox OS/Gaia builds in the App Manager</a> for more details.</p> + +<h2 id="Troubleshooting_2"><a name="Troubleshooting">Troubleshooting</a></h2> + +<p id="My_device_is_not_recognized">If the device is not recognized:</p> + +<ul> + <li>Read the <a href="#Configuring_device">Device and system configuration</a> section thoroughly, and make sure all the steps are followed:</li> + <li>Is your device running at least Firefox OS 1.2?</li> + <li>Don't see all the apps? Do you need to enable <a href="#Debugging_Certified_Apps">Certified Apps debugging</a>?</li> + <li>Did you enable "Remote Debugging" in the settings of your phone?</li> + <li>If you are not using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a>: + <ul> + <li>Did you successfully run the <code>adb forward</code> command?</li> + </ul> + </li> + <li>If you are using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a> and your device is not listed in the bottom toolbar: + <ul> + <li>If you use Linux, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to setup udev correctly</a></li> + <li>If you use Windows, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to install the appropriate drivers</a></li> + <li>You can also enable verbose logging to gather diagnostics: + <ul> + <li>Use about:config to set the pref "<span class="message"><span class="content"><span class="email">extensions.adbhelper@mozilla.org.sdk</span>.console.logLevel"</span></span> to the string value "all"</li> + <li>Disable and re-enable the ADB Helper add-on from the add-ons manager, or restart Firefox</li> + <li>Open the App Manager again</li> + <li>In the <a href="/docs/Tools/Browser_Console">Browser Console</a>, you should now see additional output lines that mention "adbhelper"</li> + <li>If you see them but aren't sure what they mean, stop by the <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools room on IRC</a> or <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&attach_text=&blocked=&bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_blocking_b2g=---&cf_crash_signature=&cf_status_b2g18=---&cf_status_b2g_1_1_hd=---&cf_status_b2g_1_2=---&cf_status_firefox24=---&cf_status_firefox25=---&cf_status_firefox26=---&cf_status_firefox27=---&cf_status_firefox_esr17=---&cf_status_firefox_esr24=---&cf_tracking_b2g18=---&cf_tracking_firefox24=---&cf_tracking_firefox25=---&cf_tracking_firefox26=---&cf_tracking_firefox27=---&cf_tracking_firefox_esr17=---&cf_tracking_firefox_esr24=---&cf_tracking_firefox_relnote=---&cf_tracking_relnote_b2g=---&comment=&component=Developer%20Tools%3A%20App%20Manager&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-203=X&flag_type-37=X&flag_type-41=X&flag_type-5=X&flag_type-607=X&flag_type-720=X&flag_type-721=X&flag_type-737=X&flag_type-748=X&flag_type-781=X&flag_type-787=X&flag_type-791=X&flag_type-799=X&flag_type-800=X&flag_type-802=X&flag_type-803=X&flag_type-809=X&flag_type-825=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Firefox&qa_contact=developer.tools%40firefox.bugs&rep_platform=x86&requestee_type-203=&requestee_type-41=&requestee_type-5=&requestee_type-607=&requestee_type-748=&requestee_type-781=&requestee_type-787=&requestee_type-791=&requestee_type-800=&short_desc=&status_whiteboard=&target_milestone=---&version=Trunk">file a bug</a> with the log output</li> + </ul> + </li> + </ul> + </li> + <li>See <strong>"???????"</strong> instead of the device name on Linux? You have permissions issues. <a href="http://developer.android.com/tools/device.html#setting-up">Make sure to setup udev correctly</a>.</li> + <li>Is your phone screen unlocked?</li> +</ul> + +<p>Can't connect your device to the App Manager or start the simulator? <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">Let us know</a> or <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&attach_text=&blocked=&bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_blocking_b2g=---&cf_crash_signature=&cf_status_b2g18=---&cf_status_b2g_1_1_hd=---&cf_status_b2g_1_2=---&cf_status_firefox24=---&cf_status_firefox25=---&cf_status_firefox26=---&cf_status_firefox27=---&cf_status_firefox_esr17=---&cf_status_firefox_esr24=---&cf_tracking_b2g18=---&cf_tracking_firefox24=---&cf_tracking_firefox25=---&cf_tracking_firefox26=---&cf_tracking_firefox27=---&cf_tracking_firefox_esr17=---&cf_tracking_firefox_esr24=---&cf_tracking_firefox_relnote=---&cf_tracking_relnote_b2g=---&comment=&component=Developer%20Tools%3A%20App%20Manager&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-203=X&flag_type-37=X&flag_type-41=X&flag_type-5=X&flag_type-607=X&flag_type-720=X&flag_type-721=X&flag_type-737=X&flag_type-748=X&flag_type-781=X&flag_type-787=X&flag_type-791=X&flag_type-799=X&flag_type-800=X&flag_type-802=X&flag_type-803=X&flag_type-809=X&flag_type-825=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Firefox&qa_contact=developer.tools%40firefox.bugs&rep_platform=x86&requestee_type-203=&requestee_type-41=&requestee_type-5=&requestee_type-607=&requestee_type-748=&requestee_type-781=&requestee_type-787=&requestee_type-791=&requestee_type-800=&short_desc=&status_whiteboard=&target_milestone=---&version=Trunk">file a bug</a>.</p> diff --git a/files/fa/archive/index.html b/files/fa/archive/index.html new file mode 100644 index 0000000000..08498cb2c9 --- /dev/null +++ b/files/fa/archive/index.html @@ -0,0 +1,18 @@ +--- +title: Archive of obsolete content +slug: Archive +translation_of: Archive +--- +<p>Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.</p> + +<p>There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should <strong>not</strong> be used for building new Web sites or apps for modern browsers. It's here for historical reference only.</p> + +<div class="note"> +<p><strong>Note to writers:</strong> We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are <strong>extremely</strong> obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a> before moving content here.</p> +</div> + +<p>{{SubpagesWithSummaries}}</p> + +<h2 id="Subnav">Subnav</h2> + +<p>{{ListSubpages("/fa/docs/Archive", 2, 0, 1)}}</p> diff --git a/files/fa/archive/mozilla/index.html b/files/fa/archive/mozilla/index.html new file mode 100644 index 0000000000..4fd902cdfe --- /dev/null +++ b/files/fa/archive/mozilla/index.html @@ -0,0 +1,10 @@ +--- +title: Archived Mozilla and build documentation +slug: Archive/Mozilla +tags: + - Archive +translation_of: Archive/Mozilla +--- +<p>These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.</p> + +<p>{{SubpagesWithSummaries}}</p> diff --git a/files/fa/archive/mozilla/persona/index.html b/files/fa/archive/mozilla/persona/index.html new file mode 100644 index 0000000000..6c0c152f34 --- /dev/null +++ b/files/fa/archive/mozilla/persona/index.html @@ -0,0 +1,176 @@ +--- +title: Persona +slug: Archive/Mozilla/Persona +translation_of: Archive/Mozilla/Persona +--- +<div class="summary" dir="rtl">ساده، ثبت نام منفرد در حریم خصوصی: اجازه دهید کاربران وب سایت شما با استفاده از آدرس ایمل خود در سایت شما ثبت نام کنند، و خودرا از مدیریت کلمههای رمز آزاد سازید.</div> + +<div class="column-container" dir="rtl"> +<p><span class="seoSummary"><a href="https://login.persona.org/">موزیلا شخصی</a> یک سیستم ورود مستقل از مرورگر برای وب است، که برای پیاده سازی و توسعه راحت است. برروی تمامی <a href="/en-US/docs/persona/Browser_compatibility">مرورگرهای اصلی</a> کار میکند، و همین امروز <a href="/en-US/docs/Persona/Quick_Setup">می توانید شروع کنید</a>.</span></p> + +<p>چرا باید از موزیلا شخصی در وب سایت خود استفاده کنید؟</p> + +<ol> + <li><strong>موزیلا شخصی بهطور کامل کلمههای رمز مخصوص سایت را حذف میکند،</strong> کاربرها و وب سایتها را از بار سنگین ساخت، مدیریت، و ذخیره امن کلمههای رمز آزاد میسازد.</li> + <li><strong>موزیلا شخصی برای استفاده آسان است.</strong> فقط با دو کلیک یک کاربر شخصی میتواند در سایت مثل <a href="http://voo.st">Voost</a> ثبت نام کند، سختی ایجاد حساب کاربری را دور میزند.</li> + <li><strong>موزیلا شخصی برای پیاده سازی ساده است</strong><strong>. </strong>توسعه دهندگان در یک بعدازظهر می توانندموزیلا شخصی را به یک سایت اضافه کنند.</li> + <li><strong>هیچ قفلی وجود ندارد</strong>. توسعه دهندگان یک ایمیل تایید از همه کاربرانشان دریافت میکنند، و کاربران از هر آدرس پست الکترونیکی میتوانند استفاده کنند.</li> +</ol> + +<p>بهعلاوه، موزیلا شخصی بهتر میشود: آن برپایه <strong>پروتکل باز، غیرمتمرکز،</strong> که طراحی شده تا به آن اجازه بدهد <strong>با مرورگرها بهصورت مستقیم یکپارچه شود</strong> و <strong>بهصورت محلی از فراهم کنندگان پست الکترونیک پشتیبانی کنند</strong><strong>. </strong>سایتهایی که امروزه موزیلا شخصی را پیاده سازی میکنند بهصورت خودکار این تجربه را کسب میکنند، بدون نیاز به تغیر هیچ کدی.</p> +</div> + +<hr> +<div class="column-container" dir="rtl"> +<h2 id="استفاده_از_موزیلا_شخصی_در_سایت_خودتان">استفاده از موزیلا شخصی در سایت خودتان</h2> + + + +<div class="column-third"> +<h3 id="شروع_بهکار">شروع بهکار</h3> + +<dl> + <dt><a href="/en-US/docs/Persona/Why_Persona">چرا شخصی؟</a></dt> + <dd>نکات خاص در مورد موزیلا شخصی که با دیگر سیستمهای شناسایی و تشخیص هویت مقایشه شده است.</dd> + <dt><a href="/en-US/docs/Persona/Quick_Setup">راهاندازی سریع</a></dt> + <dd>نمایش سریع چگونه موزیلا شخصی را به سایت خودتان اضافه کنید.</dd> +</dl> + +<h3 id="مرجع_API">مرجع API</h3> + +<dl> + <dt><a href="/en-US/Persona/The_navigator.id_API">The navigator.id API</a></dt> + <dd>API مرورگر.</dd> + <dt><a href="/en-US/docs/Persona/Remote_Verification_API">مرجع API تصدیق</a></dt> + <dd>API تصدیق راه دور.</dd> +</dl> +</div> + +<div class="column-third"> +<h3 id="راهنماییها">راهنماییها</h3> + +<dl> + <dt><a href="/en-US/docs/Persona/Security_Considerations">ملاحظههای امنیتی</a></dt> + <dd>تمرینها و تکنیکهایی برای اطمینان از اینکه موزیلا شخصی امن است.</dd> + <dt><a href="/en-US/docs/Persona/Browser_compatibility">سازگاری مرورگر</a></dt> + <dd>یادبگیرید دقیقا کدام مرورگر از موزیلا شخصی پشتیبانی میکند.</dd> + <dt><a href="/en-US/docs/Persona/Internationalization">بینالمللی کردن</a></dt> + <dd>یادبگیرید چطور موزیلا شخصی با ربانهای مختلف رفتار میکند.</dd> + <dt><a href="/en-US/docs/Persona/The_implementor_s_guide">راهنمای مجریها</a></dt> + <dd>نکاتی از سایتهایی که پشتیبانی از موزیلا شخصی را اضافه کردهاند.</dd> +</dl> +</div> + +<div class="column-third"> +<h3 id="منابع">منابع</h3> + +<dl> + <dt><a href="/en-US/docs/Persona/Libraries_and_plugins">کتابخانهها و متّصل شوندهها</a></dt> + <dd>پیدا کردن یک کتابخانه برای زبان برنامه نویسی محبوب، محیط کاری وب، بلاگ، یا سیستم مدیریت محتوی شما.</dd> + <dt><a class="link-https" href="https://github.com/mozilla/browserid-cookbook">کتاب آشپزی موزیلا شخصی</a></dt> + <dd>نمونه کدهای منبع برای سایتهای موزیلا شخصی. شامل قطعه کدهای کوچک در C# (MVC3)، PHP، Node.JS، و نمونههای بیشتر.</dd> + <dt><a href="/en-US/Persona/User_interface_guidelines">راهنماهای رابط کاربر</a></dt> + <dd>چطور ثبت نام در موزیلا شخصی را به کاربران خود نمایش دهید.</dd> +</dl> +</div> +</div> + +<hr> +<h2 dir="rtl" id="تبدیل_شدن_به_یک_ارایه_دهنده_هویت">تبدیل شدن به یک ارایه دهنده هویت</h2> + +<p dir="rtl">اگر شما یک ارایه دهنده سرویس پست الکترونیک یا هویت هستید، لینکهای زیر را برای تبدیل شدن به یک ارایه دهنده هویت دنبال کنید.</p> + +<div class="column-container" dir="rtl"> +<div class="column-third"> +<dl> + <dt><a href="/en-US/docs/Persona/Identity_Provider_Overview">مرور IdP</a></dt> + <dd>یک مرور سطح بالا از ارایه دهنده هویت موزیلا شخصی.</dd> +</dl> +</div> + +<div class="column-third"> +<dl> + <dt><a href="/en-US/docs/Persona/Implementing_a_Persona_IdP">پیاده سازی یک IdP</a></dt> + <dd>یک راهنمای مفصل برای جزییات تکنیکی تبدیل شدن به یک IdP.</dd> +</dl> +</div> + +<div class="column-third"> +<dl> + <dt><a href="/en-US/docs/Persona/.well-known-browserid">.well-known/browserid</a></dt> + <dd>مرور فایل <code>.well-known/browserid</code> ، که IdP ها برای اعلان پشتیبانی از پروتکل استفاده میکنند.</dd> +</dl> +</div> +</div> + +<hr> +<h2 dir="rtl" id="پروژه_موزیلا_شخصی">پروژه موزیلا شخصی</h2> + +<div class="column-container" dir="rtl"> +<div class="column-third"> +<dl> + <dt><a href="/en-US/docs/Persona/Glossary">واژه نامه</a></dt> + <dd>اصطلاحات تعریف شده موزیلا شخصی و BrowserID.</dd> + <dt><a href="/en-US/docs/Persona/FAQ">پرسشهای متداول</a></dt> + <dd>پاسخ به سوالات متداول.</dd> + <dt><a href="/en-US/docs/Persona/Protocol_Overview">مرور پروتکل</a></dt> + <dd>مرور تکنیکی سطح متوسط از زیر ساخت پروتکل BrowserID.</dd> +</dl> +</div> + +<div class="column-third"> +<dl> + <dt><a href="/en-US/docs/persona/Crypto">رمزنگاری</a></dt> + <dd>نگاهی به مفهوم رمز نویسی پشت پرده موزیلا شخصی و BrowserID.</dd> + <dt><a class="link-https" href="https://github.com/mozilla/id-specs/blob/prod/browserid/index.md">تنظیمات</a></dt> + <dd>جزییات فنی بیشتر در اینجا وحود دارند.</dd> +</dl> +</div> + +<div class="column-third"> +<dl> + <dt><a href="/en-US/docs/Persona/Bootstrapping_Persona">وب سایت موزیلا شخصی</a></dt> + <dd>برای بدست آوردن موزیلا شخصی، ما سه سرویس را در <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a> میزبانی میکنیم: ارایه دهنده هویت مجدد، پیاده سازی APIهای {{domxref("navigator.id")}} ، و سرویس تصدیق هویت.</dd> + <dt><a href="https://github.com/mozilla/browserid">کد منبع موزیلا شخصی</a></dt> + <dd>کد موزیلا شخصی بر روی GitHub. خوش آمدید!</dd> +</dl> +</div> +</div> + +<p dir="rtl"></p> + +<h2 dir="rtl" id="Subnav">Subnav</h2> + +<ol dir="rtl"> + <li><a href="#">استفاده از موزیلا شخصی در یک وب سایت</a> + + <ol> + <li><a href="/en-US/Persona/Why_Persona" title="Why Persona?">چرا باید از موزیلا شخصی استفاده کنیم؟</a></li> + <li><a href="/en-US/Persona/Quick_setup" title="Quick Start">شروع کنید</a></li> + <li><a href="/en-US/Persona/The_implementor_s_guide" title="Implementor's Guide">Tips for implementing Persona</a></li> + <li><a href="/en-US/Persona/Security_Considerations" title="Security Considerations">Security considerations</a></li> + <li><a href="/en-US/Persona/Browser_compatibility" title="Browser compatibility">Browser compatibility</a></li> + <li><a href="/en-US/Persona/Internationalization" title="Internationalization">Internationalization</a></li> + <li><a href="/en-US/Persona/The_navigator.id_API" title="The navigator.id API">The navigator.id API</a></li> + <li><a href="/en-US/Persona/Remote_Verification_API" title="Remote Verification API">The remote verification API</a></li> + <li><a href="/en-US/Persona/Libraries_and_plugins" title="Libraries and plugins">کتابخانه ها و افزونه ها</a></li> + <li><a href="/en-US/Persona/User_interface_guidelines" title="User interface guidelines">User interface guidelines</a></li> + </ol> + </li> + <li><a href="#">Becoming an Identity Provider</a> + <ol> + <li><a href="/en-US/Persona/Identity_Provider_Overview" title="IdP Overview">IdP Overview</a></li> + <li><a href="/en-US/Persona/Implementing_a_Persona_IdP" title="Implementing an IdP">Implementing an IdP</a></li> + <li><a href="/en-US/Persona/.well-known-browserid" title=".well-known-browserid format">.well-known-browserid format</a></li> + </ol> + </li> + <li><a href="#">پروژه موزیلا شخصی</a> + <ol> + <li><a href="/en-US/Persona/Glossary" title="Glossary">Glossary</a></li> + <li><a href="/en-US/Persona/FAQ" title="FAQ">سوالات متداول</a></li> + <li><a href="/en-US/Persona/Bootstrapping_Persona" title="Persona hosted services">خدمات هاست موزیلا شخصی</a></li> + <li><a href="/en-US/Persona/Protocol_Overview" title="Protocol overview">Protocol overview</a></li> + <li><a href="/en-US/Persona/Crypto" title="Crypto">Cryptography</a></li> + </ol> + </li> +</ol> diff --git a/files/fa/archive/mozilla/persona/nooshin/index.html b/files/fa/archive/mozilla/persona/nooshin/index.html new file mode 100644 index 0000000000..81afb73107 --- /dev/null +++ b/files/fa/archive/mozilla/persona/nooshin/index.html @@ -0,0 +1,59 @@ +--- +title: Why Persona for Mozilla? +slug: Archive/Mozilla/Persona/nooshin +translation_of: Archive/Mozilla/Persona/Why_Persona +--- +<div dir="ltr" style="margin-left: 40px;"> + Persona is an openly distributed, cross-browser identity system providing a solution to the traditional password model. It addresses the usability deficiencies that plague other privacy-related systems such as OpenID, without resorting to a centralized infrastructure such as Facebook Connect.<span id="result_box" lang="en"><span class="hps"> </span></span></div> +<div dir="ltr" style="margin-left: 40px;"> + </div> +<div dir="ltr" style="margin-left: 40px;"> + <span lang="en"><span class="hps">The current approach for establishing and managing </span><span class="hps">user names</span> <span class="hps">and passwords is tedious, inefficient, and unsecure. </span>U<span class="hps">sers must create and remember complex passwords for each site and service. Sites then must securely encrypt and store passwords to prevent the leaking of sensitive information. The prevention and negation of security leaks is the primary reason for the use of Persona, but the flexibility of its systems outclasses most standard identity security systems.</span></span></div> +<div dir="ltr" style="margin-left: 40px;"> + </div> +<div class="summary"> + <div dir="ltr" style="margin-left: 40px;"> + <strong>Note:</strong> For more detailed information about Persona a<strong>nd its functions </strong>see <a href="https://support.mozilla.org/en-US/kb/what-is-persona-and-how-does-it-work">What is Persona and how does it work?</a></div> +</div> +<h2 id="Persona_eliminates_the_need_for_per-site_passwords">Persona eliminates the need for per-site passwords</h2> +<p style="margin-left: 40px;">Persona utilizes a safe, two-click system built on top of public-key cryptography for logging in to websites. The user's browser generates a cryptographic affirmation of identity that expires after a few minutes and is only valid on one site. By avoiding passwords, users do not need to worry about remembering several distinct passwords and need no longer be concerned with unsecure access to their password.<span id="result_box" lang="en"><span class="hps"> This quick and easy sign-in process eliminates the current inefficiencies of traditional account registration and allows users to quickly establish accounts on websites.</span></span></p> +<h2 id="Persona_uses_email_addresses_as_identities">Persona uses email addresses as identities</h2> +<div id="gt-src-tools"> + <div id="gt-src-tools-l"> + <div id="gt-input-tool" style="display: inline-block;"> + <div id="itamenu" style="margin-left: 40px;"> + Persona's system relies on email addresses as their key component because of email's inherent versatile and private nature. The pre-existing infrastructure works very well from not only a design perspective but an ideal perspective of openly maintained and safe transfer of identity across the Internet.</div> + </div> + </div> +</div> +<h3 id="sect1"> </h3> +<h3 id="Benefits_for_the_user"><span class="short_text" id="result_box" lang="en"><span class="hps">Benefits for</span> <span class="hps">the user</span></span></h3> +<ul style="margin-left: 40px;"> + <li>Users already know their email addresses. They don't have to learn a new and potentially confusing system, like OpenID.</li> + <li><span id="result_box" lang="en"><span class="hps">The</span> <span class="hps">email addresses</span> <span class="hps">carefully</span> <span class="hps">capture the</span> <span class="hps">idea of</span> <span id="result_box" lang="es"><span class="hps"><code>someone@some-context</code></span></span>. This <span class="hps">makes it easier for</span> <span class="hps">users to keep their</span> <span class="hps">identities</span> <span id="result_box" lang="es"><code>@work</code>, <code>@home</code>, or <code>@school </code></span><span>separate.</span> <span class="hps">This differs from</span> <span class="hps">the trend of</span> linking together many accounts <span class="hps">through real</span> <span class="hps">identity,</span> single-account <span class="hps">policies</span> <span class="hps">on social networks like Google+ and Facebook.</span></span></li> + <li><span id="result_box" lang="en"><span class="hps">Email can</span> <span class="hps atn">be self-</span><span>organized</span> <span class="hps">or delegated to</span> <span class="hps">other providers</span><span>,</span> <span class="hps">giving users</span> <span class="hps">control of their</span> <span class="hps">identity.</span></span> This ability is greatly diminished when one must consolidate many accounts into one identity. </li> +</ul> +<div class="almost_half_cell" id="gt-res-content"> + <h3 dir="ltr" id="Advantages_for_developers" style="zoom: 1;"><span class="short_text" id="result_box" lang="en"><span class="hps">Advantages</span> <span class="hps">for developers</span></span></h3> +</div> +<ul style="margin-left: 40px;"> + <li><span id="result_box" lang="en"><span class="hps">Email addresses</span> let <span class="hps">developers </span><span class="hps">communicate directly with </span><span class="hps">users.</span> </span></li> + <li> + <div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"> + <span id="result_box" lang="es"><span id="result_box" lang="en"><span class="hps">Persona provides email addresses to websites</span><span class="hps"> automatically</span> <span class="hps">when a user</span> <span class="hps">logs in, </span><span class="hps">eliminating the need for</span> <span class="hps">additional</span> <span class="hps atn">post-</span><span>signup</span> <span class="hps">forms.</span> </span></span></div> + </div> + </li> + <li> + <div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"> + <span id="result_box" lang="es"><span id="result_box" lang="en"><span class="hps">Many login systems</span> <span class="hps">treat</span> <span class="hps">email</span> <span class="hps">addresses</span> <span class="hps">as</span> <span class="hps">unique keys, </span><span class="hps">so there is no</span> <span class="hps">lock-in</span> <span class="hps">to</span> <span class="hps">Persona and</span> it <span class="hps">can be integrated</span> <span class="hps">with</span> <span class="hps">existing access</span> <span class="hps">systems</span><span>.</span></span></span><span lang="es"><span lang="en"><span class="hps"> Any user who has an</span></span></span><span lang="es"><span lang="en"><span class="hps"> email address can access content almost immediately</span></span></span><span id="result_box" lang="es"><span id="result_box" lang="en">.</span></span></div> + </div> + </li> +</ul> +<div class="almost_half_cell" id="gt-res-content"> + <h2 dir="ltr" id="How_Persona_is_different_from_other_providers_of_single_sign-on" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps"><span id="result_box" lang="en"><span class="hps">How</span> <span class="hps">Persona</span> <span class="hps">is different</span> <span class="hps">from other providers of</span> <span class="hps">single sign</span><span>-on</span></span></span></span></h2> +</div> +<p style="margin-left: 40px;"><span id="result_box" lang="es"><span id="result_box" lang="en">Persona<span class="hps"> protects</span> <span class="hps">privacy, provides the user with</span><span class="hps"> control,</span> <span class="hps">and embellishes</span><span class="hps"> choice</span> <span class="hps">in a way that</span> <span class="hps">other security providers can't. Many</span> <span class="hps">social networks like</span> <span class="hps">Facebook</span> <span class="hps">and</span> <span class="hps">Google+</span> <span class="hps">require users to</span> <span class="hps">use their</span> <span class="hps">real names, accept their policies,</span> <span class="hps">and</span> <span class="hps">limit users to only</span> <span class="hps">one account.</span> P<span class="hps">ersona</span> <span class="hps">allows users to</span> <span class="hps">keep their work</span><span>, school, and social identities separate b</span></span></span><span style="line-height: 1.5;">y using email addresses as a unique identifier rather than real names.</span> Because of this anonymity you are guaranteed an extra layer of identity and network protection that most social networks do not have.</p> +<p style="margin-left: 40px;"><span lang="en"><span class="hps">Persona</span> <span class="hps">also takes</span> <span class="hps">a new approach</span> <span class="hps">to protecting</span> <span class="hps">user privacy</span> <span class="hps">by placing </span><span class="hps">the user's browser</span> <span class="hps">in the center</span> <span class="hps">of the authentication process. T</span><span>he browser</span> <span class="hps">obtains</span> <span class="hps">credentials</span> <span class="hps">provided by the</span> <span class="hps">user's email</span><span>,</span> <span class="hps">then presents these credentials to a website</span><span class="hps">.</span> <span class="hps">The</span> <span class="hps">email provider</span> <span class="hps">cannot</span> <span class="hps">track the</span> <span class="hps">user,</span> <span class="hps">but sites</span> <span class="hps">can still have</span> <span class="hps">confidence in the identity</span> <span class="hps">of the user by</span> <span class="hps">cryptographically</span> <span class="hps">verifying the</span> <span class="hps">credentials.</span> <span class="hps">Most</span> <span class="hps">other systems,</span> <span class="hps">even</span> <span class="hps">distributed</span> systems <span class="hps">like</span> <span class="hps">OpenID</span><span>,</span> <span class="hps">require</span> <span class="hps">sites</span> <span class="hps">to connect to central networks</span> <span class="hps">before allowing</span> <span class="hps">a user to</span> <span class="hps">log in.</span></span></p> +<p style="margin-left: 40px;">The efficiency of Persona allows an advanced relationship between developers and users. Mozilla is leading the way in open and free web development, and Persona supports Mozilla's design philosophy through its easy-to-use interface and user protection features.</p> diff --git a/files/fa/archive/mozilla/persona/quick_setup/index.html b/files/fa/archive/mozilla/persona/quick_setup/index.html new file mode 100644 index 0000000000..c88e90c73c --- /dev/null +++ b/files/fa/archive/mozilla/persona/quick_setup/index.html @@ -0,0 +1,56 @@ +--- +title: Quick Setup +slug: Archive/Mozilla/Persona/Quick_Setup +translation_of: Archive/Mozilla/Persona/Quick_Setup +--- +<p dir="RTL"><br> + ١- پهیوهندییهكانی بزوتنهوهی كوردو بزوتنهوهی گشتی ئێرانو ئۆپۆزسیۆنی ئێران لهچ ئاستێكدا دهبینی؟</p> +<p dir="RTL">وڵام = لە ئێران بە هۆی دوخی تایبەت و هەر سەردەمە و بە شیوازێک خەبات و بەربەرەکانێ لە گەڵ دەسەڵات لە ئارادا بووە و بەڕێوە چووە و زۆر جاریش ئەو دەربڕینی نارەزایەتیانە و خۆ پێشاندانەکان بە دوور لە کاریگەریی لایەنە سیاسی و رێکخراوەییەکان، یان بە واتایەکیتر "خۆرسک"بووە. بەڵام لە کوردستان جیا کردنەوەی جەماوەر و لایەنە سیاسیەکان کارێکی ئاستەمە. بزووتنەوەی کوردستان هەڵقوڵاوی بەستێنێکی رزگاریخوازی، عەداڵەتخوازی، مافخوازی و کۆمەڵایەتیی پێویستە. بەم پێێە بزووتنەوەی کوردستان نەک تەنیا ویست و ئێرادەی کۆمەڵێک رووناکبیرو خوێندەوار لە زانکۆکان، بەڵکۆ پێویستەیەکی کۆمەڵایەتی و مێژوویی بوو کە لە تووتنەوان، جووتیار، قوتابی، خوێندکار و کیژو کوڕ و پیر و لاوی شارو گوندی کوردستان پێک هاتووە و بنچی کوتاوە. بۆیە ئەو بزووتنەوەیە پێکهاتەیەکە لە کۆمەڵێک رێکخراوی کۆمەڵایەتی و داخوازی روون و ئاشکرا و دەربڕێنی روون و راشکاوی ئەوداخۆازانەو بانگەشەکردن بۆیان. بەڵام بزووتنەوە جەماوەریەکان لە ئێران بە داخەوە خاوەنی داخوازێکی کونکرێت، دیار و شەفاف نین. دیارە هەرکامە و هەڵگری کۆمەڵێک داخوازن، بەڵام هەتا ئێستاشی لە گەڵ بێت نەیان توانیوە لە سەر لانیکەم داخوازە هاوبەشەکانیان هاودەنگ و هاوڕا بن. بەو مانایە کاتێک بزووتنەوی نەتەوە بن دەستەکان هەیە، تەنیا دەمێنێتەوە، هەروەک بینیمان لە ئاخری حەفتاکاندا بزووتنەوەی بەرینی خوێندکاری بە تەنیا مایەوە هەر وەک بزووتنەوە کرێکاریەکان، بزووتنەوەی ژنان، بزووتنەوە پێشەییەکان و . . . هتد بەو دەردەوە ئەناڵێنن.</p> +<p dir="RTL"> ئەو بزووتنەوانە بڕێک جار لە لایەن رێکخراوە حیزبیەکانەوە بە مەبەستێکی تایبەتەوە بە کار هێنراون و مافی سەربەخۆییان لێ زەوت کراوە و بە پێی هەل و مەرج و سیگناڵە سینووسیەکان لە نێو خۆی دەسەڵاتی زاڵ(نەک کۆمەڵگا)، بۆ چوونی ئەوبزووتنەوانەش ئاڵ و گۆڕی نەک تاکتیکی بەڵکۆ زۆرجار بنەڕەتیی تێدا پێک هاتووە تا رادەیەک کە بڕیک جار ریزبەندیی دۆست و دوژمنی شێواندووە.</p> +<p dir="RTL">بەداخەوە سەرەڕای تێپەڕینی سی و چوارساڵ بە سەر دەسەڵاتی ئیسلامی لە ئێران، شپرزەیی، بێ بەرنامەیی، بێ ئاسۆیی، ناتەبایی و بە وتەیەکی راشکاوتر، جیا لە شەڕە دەندووک و کەڵک وەرگرتنی هەلپەرستانە، بەرژەوەندیخۆازانە و بە لاڕێدا و لە بار بردنی پوتانسیەلی بەهێزی جەماوەر، دەسکەوتێکی ئەوتۆمان لە بەردەستدا نیە. لە راستیدا ئەو پەتایەی کە لایەنە ئوپۆزیسیونەکان تووشین، لە بزووتنەوە جەماوەریەکانیشدا تەشەنەی سەندووە. هەرچەندە زۆر جاریش دەسەڵات ناچار کەوتووە لە بەرانبەر خەبات و تێکۆشانی ئەو بزووتنەوانەدا پاشەکشە بکات، بەڵام لە لایەک بە هۆی هەر ئەو شپرزەیی و بێ بەرنامەیی و ناتەباییەی کە ئاماژەی پێکرا نەتواندرا خاوەندارێتی لەو دەسکەوتانە بکرێت و بپارێزرێن و لە لایەکی ترەو کۆماری ئیسلامی بە شیوازێکی تر لە بوارگەلی تردا دیسانەوە ئەو دەسکەوتانەی زەوت کردۆتەوە.</p> +<p dir="RTL">لە کۆتاییدا، هەروەک لانیکەم لە ماوەی ئەم سی و چوار ساڵەدا ئێمە بە گشتی شاهیدی زۆرێک بزووتنە، خەبات و بەربەرەکانێی جەماوەری و پیشەیی لە ئێران بووین و لە ئەگەری هاوئاهەنگی و هاوخەباتی پوتانسیلی بەدەست هێنانی زۆر دەسکەوت و بەرەو پێشچوون و بەرینتر بوونەوەیان هەبووە بەڵام نەیان توانیوە مەبەستەکانی خۆیان بە باشی بپێکن. بۆیە پێویستە بە دوور لە قەتیس مانەوە لە چوارچێوەی لایەنە حیزبیەکان و بەڕێوە بردنی رۆڵی ئامرازانە، سەربەخۆییان بپارێزرێت، پەرەیان پێ بدرێت، رێک بخرێن، هاوئاهەنگ بکرێن، بناسێندرێن و بە گشتی لە بەر ئەوەی کە هەرکامە نوێنەرایەتیی بە شێکی دیاریکراوی کۆمەڵگا دەکەن و ئاوێنەی باڵانمای کۆمەڵگان، لایەنە رێکخراوییەکان پێویستە خۆیان لە گەڵ ئەوان رێک بخەن و هاوئاهەنگ بن نەک هەلپەرستانە و ئامرازانە لە خزمەت بەرژەوەندیی بەرتەسکی حیزبی بەکاریان بێنن.</p> +<p dir="RTL"> </p> +<p dir="RTL"> </p> +<p dir="RTL"><br> + ٢- پێتوایه پهیوهندی حیزبهكوردیهكان لهگهڵ ئۆپۆزسیۆنی ئێرانی لهچ ئاستێكو لهسهر چ بنهمایهكدا بێت؟</p> +<p dir="RTL">وڵام= ئێمە کاتێک باس لە ئوپۆزیسیون دەکەین بەداخەو لە بەر کۆمەڵێک فاکتۆری دیار و ئاشکرا، لایەن یان بابەتێکی جیدی بە ناو ئوپۆزیسیونمان بەرچاو ناکەوێت. لە باتی ئەوە کۆمەڵێک خەڵک ئەبینین زۆرتر خەریکی شەڕە دەندووک و بە یەکدا هەڵگوتن و لەم دواییانەشدا کێبەرکێی رەنگامەین کە بە هۆی دوور کەوتنەوە لە جەماوەر و بڕێک جار خۆ بەستنەوە و خۆ هەڵواسین لە بیروکەیەکی ئیدئۆلۆژیی تایبەتیدا، مەودایەکی زۆریان لە گەڵ کۆمەڵگا و داخۆازە کۆمەڵایەتی، پێشەیی، سیاسی و ئابووریەکانیدا لە نێواندایە. </p> +<p dir="RTL">بە بڕوای من چاوەڕوانی، بێ گەڵالەیی و شپرزەییەکی بەرین بە سەر ئوپۆزیسیونی ئێرانیدا زاڵە و ئەو دۆخە هەڵ ئەگەڕێتەوە بۆ بێ هیوای و نە بوونی متمانە بە خۆ و هەروەها چەشنێک"توهم" لە ئاست دەسەڵاتی ئیسلامی لە نێو ئوپۆزیسیونی ئێرانی بە گشتی. جا ئەو نەبوونی متمانە بە خۆ و تەوەهومە، تا ئەو جێگایە پەرەسەندووە کە لە بچووکترین بابەت لەئاڵ و گۆڕە نێو خۆییەکانی رژیمی ئیسلامی دا خۆ دەردەخات ولایەنهایەک لە ئوپۆزیسیونی ئێران تووشی راڕایی، دوودڵی و تەنانەت قەیران دەکات. لەمبارەوە وێنا زۆرن و بە درێژایی تەمەنی کۆماری ئیسلامی بوونیان هەبووەو هەیە، بۆ وێنە:</p> +<p dir="RTL">هەڵبەز دابەزەکانی رێکخراوی موجاهدین، دۆخی تایبەتیی لایەنە میللی – مەزهەبیەکان، قەیرانە نێو خۆییەکانی رێکخراوی چریکە فیداییەکانی خەڵکی ئێران، قەیران، چارەنووس و ئاکامی حیزبی توودەی ئێران و لەم شازدەساڵەی دواییشدا بە هاتنەئارای باسی ئیسڵاحخوازیی حکومەتی، خولێکی نوێ دیسانەوە دەستی پێکردەوە کە لووتکەکەی پاش هەڵبژاردنی خولی دەیەمی سەرۆک کۆماری و دەرەنجامەکانی، بە زەقی خۆی نیشاندا تا ئەو جێگایەی کە بڕێک لە ئوپۆزیسیون بە شایی لۆغان بەرەو پیریی دەسەڵاتدارانی دوێنی و بێدەسەڵاتکراوانی ئەمڕۆ کە برابەشی تاوانە سامناکەکانی کۆماری ئیسلامین، چوون و چەپڵەیان بۆ لێدان.</p> +<p dir="RTL">لانیکەم لە جۆزەردانی ١٣٨٨ی هەتاوی بەم لاوە، ریزی ئوپۆزیسیونی ئێرانی بە گشتی ئاڵ و گۆڕی گرینگی بە سەردا هات. واتە ئوپۆزیسیون دابەش بوو بە دوو لایەنی: رێفۆرمیست و ئەوانەی هیوایان بە ئاڵ و گۆڕ لە نێو خودی کۆماری ئیسلامیدا بەست و تەنانەت لە گەڵ نێردراوانی کۆماری ئیسلامی لە ژوورە داخراوەکاندا دانیشتن یان لە گەڵ کۆمەڵێک لە ئوپۆزیسیونی دەست نیشان کراو دانیشتن کە هیچ بڕوایەکیان بە مافە ئاسایی، یاسایی و بنەڕەتیەکانی هیچ لایەنێکیتر نیە تەنانەت ئەگەر بە رواڵەتیش بووبێت.</p> +<p dir="RTL">لە ماوەی تەمەنی سی و چوارساڵە و هەموو هەڵس و کەوتەکانی ئەو رژیمە، ئەو راستیەی دەرکەوتووە و سەلمێندراوە کە بە بێ رووخانی کۆماری ئیسلامی بە تەواوەتیی هەبوونیەوە، نە هیج نەتەوە و کەمایەتی یان گروپ و دەستەیەک، بەڵکۆ تەنانەت تاکێکی کۆماڵگای فەرەچەشنیی ئێران ناتوانن بە داخواز و مافە سەرەتاییەکان خۆیان بگەن.</p> +<p dir="RTL">هەر بۆیە لە سەر ئەو بنەما و لێکدانەوەیە، زیندووترین،چالاکترین و ئاکتیڤترین بزووتنەوەو ئوپۆزیسیون لە کوردستان بوونی هەبووە. لە باری تەمەنیشەوە هەر وەک ئوپۆزیسیونی بێ بەرنامە و راڕایی ئێرانی هاوتەمەنی ئەو رژیمەیە، بزوتنەوەی کوردستانیش هاوتەمەنیەتی و بە دڵنیاییەوە ئەتوانین بڵێین خاوەنی درێژترین تەمەنە،. جیا لە بڕێک بابەتی لاوەکی، پەیگیرترین بزووتنەوەو ئوپۆزیسیون لە ئێران بووە. </p> +<p dir="RTL">هەر وەک زۆرێک ئاگادارن، لە رۆژە سەرەتاییەکانی بە دەسەڵات گەیشتنی کۆماری ئیسلامی و زەخت خستنە سەر بیرجیاوازان و زیندانی و ئێعدام کردنی بە کۆمەڵ لە دادگا چەند خولەکی و نیزامیەکاندا، تەنیا سەنگەرێک کە سەرەڕای بێ ئیمکاناتی، هەژاری و نەداری خەڵک و ئابڵۆقە و گەمارۆە بەربڵاوەکانی دەسەڵاتی تاران لە کوردستان، گەلی کورد و وڵاتەکەیان بوونە سەنگەر، بنکە، مەقەڕ و ماوای ئازادیخوازان و بیر جیاوازان لە سەرتاسەری پانتایی ئێران.</p> +<p dir="RTL">لایەنە جۆربەجۆرە سیاسی و خەباتکارەکان لە لایەک بۆ درێژەی خەبات دژی ئەو رژیمەو لە لایەکی ترەو بۆ پاراستنی خۆیان، روویان کردە کوردستان و خەڵکی کوردستانیش بە دڵئاوەڵاییەوە پێشوازییان لێ کردن. هەرچەندە کوردستان و لایەنە کوردیەکان بە ئەو پەڕی دڵپاکی و رووڕاست، سەرەڕای هەموو تەنگ چەڵەمەکان و هەل و مەرجی کوردستان، چوونە پێشوازی ئەو بابەتەوە. بەڵام لایەنی بەرانبەر بڕێکیان بە هۆی هەر ئەو "توهم"ەی کە پێشتر ئاماژەمان پێی کرد، بڕێکیش بە هۆی گێرەو کێشە ناوخۆییەکانیان و لە کۆتاییدا بڕێکیان کە بە مەبەستی کاسبکارانەو و سەوداگەرانەوە هاتبوونە کوردستان، هەرکامەو بە شێوەیەک چوونە پەراوێزەوە.</p> +<p dir="RTL">دواتریش هەر یەکەو بە شێوازێک یان خەڵکی کورد و بزووتنەوەی کوردستانیان لە بیر خۆیان بردەوە یا بە شیوەیەکی نەشیاو هێرشیان کردە سەر بزووتنەوەی کوردستان و رێکخراوە کوردستانیەکان و خەباتی رەوا و خۆڕاگریی خەڵکی کوردستان بە "خێڵەکی"، "قەومپەرست" ،"ناسیونالیست" و" جودایی خواز" و کۆمەڵێک لەو بابەتانە ناو لێناوە و باسکرد.</p> +<p dir="RTL">لە ئەگەری هەر پێشڕەویەکی بزووتنەوەی کوردستان و هەست بە مەترسی کردن لە لایەن لایەنە جۆربەجۆرەکانی ئێران، هەر لە چەپی چەپەوە تا راستی راست و دەسەڵاتدار تا بێدەسەڵاتی پەراوێزخراو، سەرەڕای جێاوازیی بۆچوون و تەنانەت ئیدئۆلۆژیک، بە بێ وەستان لە بەرانبەر بزووتنەوەی کوردستاندا یەکیان گردۆتەوە</p> +<p dir="RTL"> </p> +<p dir="RTL">بۆیە حیزبە کوردیەکان یان لانیکەم ئەو لایەنانە لە رێکخراوە کوردستانیەکان کە بڕوای راستەقینەیان بە وەدەستهێنانی مافەکانی خەڵکی کوردستان هەیە، لەم دووفاق بوونەوەی ئوپۆزیسیونی ئێرانیەدا بە راشکاوی بۆچوون و هەڵوێستی خۆیان بە سات و سەودا ،سازان و پرژاندنی تووی دوودڵی، راڕایی و گومان و کڕێنەوە متمانە بۆ ئەو دەسەڵاتە یان دەست و پێوەندە پەراوێز خراوەکانی لە نێو بەشیک لە کۆمەڵگای کوردی درێژە دەدەن ، یان بە پێداگری لە سەر داخوازەکانی کۆمەڵگای کوردستان و دۆزینەوەی هاوپەیمانی راستەقینە تا دوا قۆناخەکان و سەلماندن و دەستەبەر کردن مافە رەواکانی خەڵکی کوردستان خۆ لە هەر سازان و سات و سەودایەک ئەبوێرن.</p> +<p dir="RTL"> ئێمە زۆر بە راشکاوی ئەو داخوازەمان وەکۆ پرەنسیب بۆخۆمان دیاری کردووە کە: <strong><em>ناچینە هیچ هاوپەیمانی و هاوکاری لە گەڵ هیچ لایەنێکەوە کە بڕوای راستەقینەی بە مافی گەلی کورد تا دامەرزانی دەوڵەتی سەربەخۆی کوردی نەبێت و دانی پێدا نەنێت.</em></strong></p> +<p dir="RTL"><br> + ٣- سهبارهت بهمافهكانی گهلی كورد ئایا ئۆپۆزسیۆنی ئێرانی لهبهرهیهكدا دهبینی یان جیاوازییهكی بهدی دهكرێت، پێتوایه هێڵه سوورهكان بۆ حیزبی كوردی لهو پهیوهندییانهدا چین؟</p> +<p dir="RTL">وڵام= ئەگەر چی بۆ خۆیان دوور و لێک جیاوازن و هەرکامە لە روانگەی ئیدئۆلۆژی و جیهانبینیی خۆیانەوە بۆ بابەت و پرسە جۆراوجۆرەکان ئەڕوانن، بەڵام تا ئەمڕۆ بە کردەوە نیشانیان داوە کە لە ئاست پرسە دیموکراتیک، پیشەیی،کۆمەڵایەتی و مرۆییەکان، بە تایبەت لە سەر ماف و داخوازی نەتەوە بندەستەکانی ئێران، مافی ژنان، بابەتە مرۆییەکان، بە هیچ شیوەیەک جیاوازییان نیەو یەکڕان. بۆیە هەرکامە لە جانتای وشەنامەکانیاندا بە پێی بنەما فیکریەکانیان، کۆمەڵێک وشەی دیاری کراو ریز ئەکەن.</p> +<p dir="RTL">بڕێکیان هەر نکۆڵی لە کورد و نەتەوەی کورد ئەکەن و زۆرتر ئەچنە دوو قاڵبی تایبەتەوە کە بریتین لە لایەنی پان ئێرانیست و مەزنیخۆازیی ئێرانی و ئەڵێن: <strong><em>ئێمە هەموو ئێرانین کورد و فارس و تورک و ئەوانەمان نیە ئەو جیا کردنەوانە مەبەست و خواستی دوژمنانی ئێرانی مەزنە</em></strong>. واتە لە راستیدا ئەو بابەت و پرسە گرینگە ئەشارنەوەو نکۆڵی لێ ئەکەن وهەموو شتێک ئەخەنە خانەی عەزەمەتی ناسیونالیزمی کوێر و بەرتەسکی ئێرانیچیەتیەوە. لایەنی تریش بە چاویلکەیەکی هاوشێوە واتە"امت اسلامی" لە بابەتەکە دەدوێن و ئەڵێن: <strong><em>ئێمە هەموو موسەڵمانین و جیاوازیمان نیە، لێدوان لەو بابەتە و تەنانەت بیرلێکردنەوەشی کفرە و لە خزمەت دوژمنانی ئیسلام دایە.</em></strong></p> +<p dir="RTL">واتە بە دەربڕینی چەند وشەی خۆخڵەتێنی بێ ناوەڕۆک بە نیازی دەرباز کردنی خۆیان لەو قەیرانە ناوچەییەن.</p> +<p dir="RTL">ئەوەی لەو دێڕانەی سەرەوە باسیان لێوە کرا بە درێژایی مێژوو تاقی کراونەتەوە، واتە هەرکامەو ماوەیەکی دوور و درێژ لە ئێران دەسەڵاتیان بە دەستەوە بووە یان هێشتا بە دەستیانەوەیە و تەنیا ئەوکاتانەی کە پێویستیان بووە یان بە پێی بەرژەوندیی مەبەستدار ناوێکیان لە کورد هێناوە.</p> +<p dir="RTL">لە ئوپۆزیسیونی ئێرانی لایەنهایەکیتریش هەن کە لە قەبارەی دروشمدا باس لە کۆمەڵە بابەتێکی "کلیشەیی"و"رواڵەتی" ئەکەن بەڵام دەسەڵتیان بە دەستەوە نەبووەو تاقینەکراونەتەوە تا برایەتیەکەیان بسەلمێندرێت. جا ئاساییە ئێمە پرسەکە نابێت بە یەکجاری بە رەش و سپی بیبینین. داخوازەکانی خەڵکی کوردستان بە راشکاوی باس دەکەین، جاڕی دەدەین، هێزو پشتیوانی بۆ کۆدەکەینەوە و پێداگریی لە سەر ئەکەین.</p> +<p dir="RTL">بە بێ گەڵاڵەی کونکرێت و پێشمەرجی روون و ئاشکرا لە سەر پرسی کورد و بزووتنەوەی خەڵکی کوردستان لە بەرانبەر ئوپۆزیسیونی ئێرانی بە گشتی، چوونە هەر دانیشتن لە پشت دەرکی داخراو، رێکەوتن و بلووک بەندیەکەوە(ئەو بابەتەی کە لەم رۆژانەدا بانگەشەی بۆ دەکرێت) دیسانەوە رادەست کردنەوە و پردەباز کردنی بەرژەوەندی و بزووتنەوەی کوردستانە ئەویش لە بەرانبەر لایەنهایەکی بێ بەڵێنی پاوانخوازی هەلپەرست. جا دیارە ئەوەش نە لە قازانجی بزووتنەوەی رەوای خەڵکی کوردستان بەڵکۆ لە پێناو سات و سەودا بە مەبەستی بەرتەسکی تایبەتدایە.</p> +<p dir="RTL">زۆر بە بێ پەردە و خۆماڵیانە بیڵێم، لە روانگەی منەوە زۆربەی ئەو لایەنانەی کە بە ناوی ئوپۆزیسیونی ئێرانیەوە بوونیان هەیە چ ئەوانەی لە ژێر دروشمی خەڵک فریودەری " ئێران هی هەموو ئێرانیەکانە" خەڵکی کورد رەسەن ترین (قوم)ی!؟ ئێرانین"،" ئێمە هەموو یەک نەتەوەین و ئێرانین"،"کورد و تورک و فارس و ئەوانەمان نیە، ئێمە هەموو(امت اسلام)ین!؟"و" پاراستنی چوارچێوەی ئەرزیی ئێران ئەرکی بێ ئەم لا و ئەولای هەمووانە" هیچ بایەخ و نرخێکیان نیە. نە خاک، نە ئاڵا، نە دروشمی قەبەی دینداری و دیانەت تا ئەو کاتەی مافە سروشتی و ئاساییەکانی منی کورد بە فەرمی نەناسێت و مل کەچی نەبێت، نە ئەوی کە بایەخدار و پیرۆز نیە، بەڵکۆ بۆ تێکشاندنیشی حەول ئەدەم.</p> +<p dir="RTL">7</p> +<p dir="RTL"><br> + ٤- بهبڕوای ئێوە كۆنگرهی 13ی كۆمهڵه دهبێت چ گۆڕانكاری لهسیاسهتو ستراتیژهكانی بكات سهبارهت به پهیوهندیو هاوكارییهكانی لهگهڵ ئۆپۆزسیۆنی ئێرانی؟</p> +<p dir="RTL">دۆخی ئەمڕۆی جیهان، ناوچە، ئێران و کوردستان بە گشتی دۆخێکی تایبەتە و ئاڵ و گۆڕی پەیتا پەیتا و خێرا بە خۆیەوە دەبینێت، بۆیە ئەرکی سەرەکیی هەر لایەن و پێکهاتەیەکی رێکخراوەیی، سیاسی و جەماوەری کە مۆدێڕن و ئەمڕۆیی بێت، لێکدانەی واقێعبینانەی ئەو دۆخەو دۆزینەو بە کار بردنی هەڵوێستی گونجاو لەو بارەوەیە. بەڵام بە داخەوە دەردێکی کۆنی گورچک بڕ داوێنی هەموو لایەنەکانی تەنیوەتەوە کە ئەویش نامۆدێڕن بوون و نائەمڕۆیی بوونە.</p> +<p dir="RTL">هەموو لایەنە سیاسی و رێکخراوەییەکان چ کوردستانی و چ ئەوانەی ئێرانی، لەسەردەمانێکدا بە گشتی خاوەنی پێگەیەکی رێکخراوەیی، سیاسی و کۆمەڵایەتی بوون کە بۆ هەموو لایەک خاڵێکی وەرچەرخان بوو، بەڵام بە هۆکاری روون و ئاشکرا کە بۆ کەس شاراوە نین، یان پێگەکەیان لاواز بوو یان هەر بە تەواوەتی رووخا. هەرچەندە سەرەڕای ئەو تراژدیە ئەسەفبارە لە ئێران بە گشتی، لە کوردستان دۆخەکە بە شیوازێکی ترەو هێشتا رێکخراوە کوردیەکان لە چاو ئێران لە ئاستێکی باشتردان. لەم نێوەدا جەماوەری خەڵکی کوردستان بە هێچ شیوەیەک تاوانبار نین چونکۆ بە درێژایی تەمەنی دەسەڵات و هێزی داگیرکاری رژیمی تاران، راوەستاون، خەباتیان کردووە، قوربانییان داوە و شەرافەتمەندانە ژیاون. لە هەر ئان و ساتدا کە بە پێویستیان زانیبێت بە بێ راڕایی و گۆمان پێشوازییان لە داخوازی حیزبەکوردیەکانەوە کردووە و بە هانایانەوە هاتوون.</p> +<p dir="RTL"> بۆیە ئەوە لایەنە رێکخراوەییەکانن کە پێویستە وڵامدەرەوەی ئەو دۆخە بن، سەرەڕای هەبوونی بەستێنی سیاسی، فەرهەنگی و کۆمەڵایەتیی شیاو و لە بار، نەیانتوانیوە کۆمەڵگا رێکبخەن و وڵامی داخوازە خەباتکارانەکانی جەماوەر بدەنەوە. لە بەر ئەوەی یان خەریکی کۆمەڵێک بابەتی لاوەکین یان سەرقاڵی کێشەی ناوەکی و بە یەکدا هەڵگوتنن.</p> +<p dir="RTL">لە هەر کومەڵگایەک بە پێی دۆخی گشتیی کۆمەڵگا و هەل و مەرجی تایبەت بە ئەو کومەڵگایە، لایەنە رێکخراوەیی و سیاسیەکان لە بەر ئەوەی هێزە ئینسانیەکەیان هەر لە ئەو شوێنە وەر ئەگرن، ئەو حیزب و لایەن یان رێکخراوەیە لە هەموو ئاستەکاندا هەڵگری کولتوورو خۆ و خسڵەتەکانی جەرماوەری پێکهێنەری ئەو کۆمەڵگایەیە، لە کوردستانیش کە بەشێک لەو کۆمەڵگایانەیە، ئاشکرایە کە هەڵگری ئەو خۆ و خسڵەتانەیە و رەنگدانەوەشی لە نێو حیزبەکان یان هەر پێکهاتەیەکی جەماوەری و کۆمەڵایەتی دیار و حاشا هەڵنەگرە.</p> +<p dir="RTL">بۆیە هەڵس وکەوتی نێو لایەن و رێکخراوە کوردیەکانێش بە گشتی لە ژێر کاریگەریی ئەو پرسەدایە. (هەر چەندە لە ئێران بە گشتی لایەنی رووناکبیریی کەمەڵگا چاوی لە دەرەوەی سنوورەکانی خۆی بڕیوە و نە بە نیازی ئەزموون وەرگرتن بەڵکۆ زۆرجار بۆ چاولێگەری و (تقلید) بۆ بابەتەکەی رووانیوە هەر بۆیە تا ئیستا نەیتوانیوە پێوەندیی نێوان کاری سیاسیی پڕۆفشناڵ و کۆمەڵگا قایم و پتەو بکاتەوە. هۆیەکەشی ئەوە بووە کە نەیان تووانیوە جەماوەری کۆمەڵگای خۆیان بناسن و هەڵسەنگاندن و لێکدانەوەیەکی واقێعبیبانەیان لێی هەبێت.)</p> +<p dir="RTL">لە کوردستان ئەو بابەتە بە شیوازێکیتر خۆ دەنوێنێت، ئەویش ئەوەیە کە هێشتا پێوەندیی نێوان جەماوەر و لایەنە رێکخراوەیی، پیشەیی، جەماوەری و سیاسیەکان لە ئاستێکی شیاودا نیە، شیوازی حیزبایەتی لە کوردستان نەیتوانیوە خۆی پێ بگەێنێت، مۆدێڕنەوە بێت و بە پێی پێشەوە چوونەکانی کۆمەڵگای کوردستان گەشە بکات. بۆ وێنە شێوازی حیزبایەتی لە کوردستان تێکڵاوێکە لە داب و نەریتی پاشماوەی شیوازی بەرهەمهێنانی زاڵی سێ چارەکە سەدە لەمەو پێشی کوردستان، حەولدان بۆ خۆ تێوەگلاندن لە تەوژمی هەرس هێناوی نیو سەدەی پێشترو ئێستاش بانگەشەی حیزبایەتیی مۆدێڕن کە بە داخەوە لە نێوان هەرسێکدا ماونەتەوە.</p> +<p dir="RTL">لە مێژووی ژیانی کۆمەڵگای مرۆڤایەتیدا هەر سەردەمەو و ناوچەی جوغرافیایی، کەرەسەو ئامرازی خەبات گۆڕدراوە. لە ئەمڕۆشدا کە خولی سەرهەڵدانی بزووتنەوە پیشەیی، رەگەزی، کۆمەڵایەتی و تایبەتیەکانە، ئەرکی سەرەکیی حیزبێکی مۆدێڕن و ئەوڕٶیی ناسینی ئەو راستیەو خۆ رێکخستن و خۆتەیار کردن بۆ هاو ئاهەنگی لە گەڵ وەها بزووتنەوەگەلێکدایە و لە هەمان کاتدا بە فەرمی ناسینی سەربەخۆیی و مەموو مافەکانی ئەو لایەنانەیە نەک حەول دان بۆ بە حیزبی کردنیان و کەڵک وەرگرتن لەوانە لە پێناو بەرژەوەندیی کورت ماوەو بەرتەسکی حیزبی و بەستنەوەیان لە قاڵب و چوارچێوەی حیزبایەتیدا.</p> +<p dir="RTL">بۆیە بە قەناعەت هێنان و بڕوا بەو راستیە کە شێوازی حیزبایەتی و بەڕێوە بردنی حیزب بەو چلۆنایەتیەی کە هەیە، وڵامدەرەوە نیە، ئەرکی سەرشانی ئەندامانی بەشداری کۆنگرەی سێزدەی کۆمەڵە ئەوەیە کە پێداگری بکەن لە سەر:</p> +<ol> + <li dir="RTL">حیزبیەت کردن و دانانی دەستگاو دامەرزاوەی حیزبی و خۆ دەرباز کردن لە شێوە حیزبایەتیی کلاسیک. ئەویش بە کردەوە و بە عەمەل نە سەردانی کۆمەڵێک دروشمی بریقەداری باو.</li> + <li dir="RTL">جارێک و بۆ هەمێشە سەلماندنی مل کەچ بوون بە هەڵوێست و بڕیاری پەسەندکراوی گشتی، نەک تەسلیم بوون بە خواست و ئیرادەی تاک.</li> + <li dir="RTL">پەسەند کردن و پێداگری لە سەر جێ بە جێ کردنی مێکانیزمێک لە پێناو ئاشت کردنەوی جەماوەر و لایەنە سیاسی و رێکخراوەییەکان و بەخشینەوەی متمانانەی تەم گرتووی کۆمەڵگا بە رێکخراوەکان، کە هۆە سەرەکیەکەی شێوەی هەڵس و کەوتی حیزبەکان خۆیانن.</li> + <li dir="RTL">پێداگری لە سەر سەلماندنەوە و کردنە بڕوای پراکتیکیی ئەو راستیە کە حیزب، رێکخراوە و هەر بابەتێکی لەو چەشنە، ئامرازو کەرەسەیەکن لە خزمت بەرژەوەندیی گشتیی کۆمەڵگادا.</li> + <li dir="RTL">بایەخدان بە ویست و داخوازی جەماوەر و خستنەگەڕی هێزو توانای حیزب لە پێناو وڵامدانەوە بە داخوازە رەواکانی خەڵکی کوردستان لەم قۆناخە هەستیارە لە مێژووی خەباتکارانەی جەماوەری خەڵکی کوردستان.</li> + <li dir="RTL">حەولدان بۆ رێکخستن و سازماندانی کۆڕ و کۆمەڵە مەدەنی و غەیرە حیزبیەکان و هاوکاری و یارمەتی دانی ئەو کۆڕ و کۆمەڵانە.</li> +</ol> diff --git a/files/fa/archive/mozilla/xul/index.html b/files/fa/archive/mozilla/xul/index.html new file mode 100644 index 0000000000..5380037ae5 --- /dev/null +++ b/files/fa/archive/mozilla/xul/index.html @@ -0,0 +1,94 @@ +--- +title: XUL +slug: Archive/Mozilla/XUL +tags: + - NeedsTranslation + - TopicStub + - XUL +translation_of: Archive/Mozilla/XUL +--- +<div class="callout-box"> + <strong><a href="/en-US/docs/XUL_Tutorial" title="en-US/docs/XUL_Tutorial">XUL Tutorial</a></strong><br> + A guided tutorial that will help you get started with XUL, originally from XULPlanet.</div> +<div> + <p><span class="seoSummary"><strong>XUL</strong> (XML User Interface Language) is Mozilla's <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>-based language for building user interfaces of applications like Firefox.</span> The term XUL is sometimes used to refer to the whole <a href="/en-US/docs/The_Mozilla_platform" title="/en-US/docs/The_Mozilla_platform">Mozilla platform</a> (e.g. XUL applications are applications using XUL and other components of the platform).</p> + <p><a href="/en-US/docs/XUL_controls" title="en-US/docs/XUL_controls">XUL Controls</a> lists some of the common controls provided by XUL.</p> +</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation">Documentation</h2> + <dl> + <dt> + <strong><a href="/en-US/docs/XUL_Tutorial" title="en-US/docs/XUL_Tutorial">XUL Tutorial</a></strong></dt> + <dd> + A guided tutorial that will help you get started with XUL, originally from XULPlanet.</dd> + <dt> + <a href="/en-US/docs/XUL_Reference" title="en-US/docs/XUL_Reference">XUL Reference</a></dt> + <dd> + XUL elements, attributes, properties, methods, and event handlers.</dd> + <dt> + <a href="/en-US/docs/XUL_controls" title="en-US/docs/XUL_controls">XUL Controls</a></dt> + <dd> + A quick list of all of the available XUL controls.</dd> + <dt> + <a href="/en-US/docs/The_Joy_of_XUL" title="en-US/docs/The_Joy_of_XUL">The Joy of XUL</a></dt> + <dd> + Describes the key features and components of XUL.</dd> + <dt> + <a href="/en-US/docs/XUL/PopupGuide" title="en-US/docs/XUL/PopupGuide">Menus and Popups Guide</a></dt> + <dd> + A guide on using menus and popup panels.</dd> + <dt> + <a href="/en-US/docs/XUL/Template_Guide" title="en-US/docs/XUL/Template_Guide">Template Guide</a></dt> + <dd> + A detailed guide on XUL templates, which is a means of generating content from a datasource.</dd> + <dt> + <a href="/en-US/docs/DragDrop/Drag_and_Drop" title="Drag and Drop">Drag and Drop</a></dt> + <dd> + How to perform drag and drop operations.</dd> + <dt> + <a href="/en-US/docs/XUL_Overlays" title="en-US/docs/XUL_Overlays">Overlays</a></dt> + <dd> + Overlays are used to describe extra content for the UI. They provide a powerful mechanism for extending and customizing existing XUL applications.</dd> + </dl> + <dl> + <dt> + XUL Periodic Table</dt> + <dd> + This collection of XUL demos used to be available as a web page, but can no longer be viewed in Firefox since support for <a href="/en-US/docs/Remote_XUL" title="/en-US/docs/Remote_XUL">Remote XUL</a> was disabled. There is a XULRunner application containing the XUL Periodic Table which can be opened with Gecko based browsers. <a href="https://github.com/matthewkastor/XULRunner-Examples" title="https://github.com/matthewkastor/XULRunner-Examples">You can get it here</a>. See: <a href="/en-US/docs/XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications" title="/en-US/docs/XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications">XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications</a> for instructions on running XULRunner apps in Firefox.</dd> + <dt> + Changes to XUL</dt> + <dd> + New XUL features and changes to existing features are included in the <a href="/en-US/docs/Mozilla/Firefox/Releases" title="/en-US/docs/Mozilla/Firefox/Releases">Firefox developer release notes</a>.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/XUL" title="tag/XUL">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community">Community</h2> + <ul> + <li>View Mozilla forums...{{ DiscussionList("dev-tech-xul", "mozilla.dev.tech.xul") }}</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/xul">#xul on irc.mozilla.org</a></li> + </ul> + <h2 class="Tools" id="Tools">Tools</h2> + <ul> + <li><a class="external" href="/en-US/docs/XUL_Explorer" title="en-US/docs/XUL_Explorer">XUL Explorer</a> (a lightweight XUL IDE)</li> + <li><a href="https://github.com/matthewkastor/XULExplorer" title="https://github.com/matthewkastor/XULExplorer">XULExplorer</a> (Patched version of XUL explorer)</li> + <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension developer's extension</a> (featuring a Live XUL Editor)</li> + <li><a class="external" href="http://forum.addonsmirror.net/index.php?showtopic=751" title="http://forum.addonsmirror.net/index.php?showtopic=751">XULRef sidebar</a></li> + <li><a class="external" href="http://www.getfirebug.com/">Firebug</a></li> + <li><a href="/en-US/docs/DOM_Inspector" title="en-US/docs/DOM_Inspector">DOM Inspector</a></li> + <li><a class="external" href="http://www.spket.com/">Spket IDE</a>, IDE for XUL/XBL</li> + <li><a class="external" href="http://www.amplesdk.com" title="http://www.amplesdk.com/">Ample SDK</a>, (Cross-browser XUL renderer in JavaScript/HTML)</li> + </ul> + <p><span class="alllinks"><a href="/en-US/docs/tag/tools" title="tag/tools">View All...</a></span></p> + <h2 class="Related_Topics" id="Related_Topics">Related Topics</h2> + <ul> + <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/XBL" title="en-US/docs/XBL">XBL</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/RDF" title="en-US/docs/RDF">RDF</a>, <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">Extensions</a>, <a href="/en-US/docs/XULRunner" title="en-US/docs/XULRunner">XULRunner</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/fa/archive/mozilla/xul/مرجع_زبان_طراحی_واسط_کاربری_مبتنی_بر_ایکس_ام_ال/index.html b/files/fa/archive/mozilla/xul/مرجع_زبان_طراحی_واسط_کاربری_مبتنی_بر_ایکس_ام_ال/index.html new file mode 100644 index 0000000000..efddf1246c --- /dev/null +++ b/files/fa/archive/mozilla/xul/مرجع_زبان_طراحی_واسط_کاربری_مبتنی_بر_ایکس_ام_ال/index.html @@ -0,0 +1,365 @@ +--- +title: مرجع زبان طراحی واسط کاربری مبتنی بر ایکس ام ال +slug: Archive/Mozilla/XUL/مرجع_زبان_طراحی_واسط_کاربری_مبتنی_بر_ایکس_ام_ال +translation_of: Archive/Mozilla/XUL/XUL_Reference +--- +<div dir="rtl"> + « <a href="/en-US/docs/XUL" title="en-US/XUL">XUL Reference</a> «</div> +<h2 dir="rtl" id="فهرست_الفبایی_عناصر_XUL">فهرست الفبایی عناصر XUL</h2> +<div class="cols-3"> + <ul> + <li><code><a href="/en-US/docs/XUL/action" title="XUL/action">action</a></code></li> + <li><code><a href="/en-US/docs/XUL/arrowscrollbox" title="XUL/arrowscrollbox">arrowscrollbox</a></code></li> + <li><code><a href="/en-US/docs/XUL/assign" title="XUL/assign">assign</a></code></li> + <li><code><a href="/en-US/docs/XUL/bbox" title="XUL/bbox">bbox</a></code></li> + <li><code><a href="/en-US/docs/XUL/binding" title="XUL/binding">binding</a></code></li> + <li><code><a href="/en-US/docs/XUL/bindings" title="XUL/bindings">bindings</a></code></li> + <li><code><a href="/en-US/docs/XUL/box" title="XUL/box">box</a></code></li> + <li><code><a href="/en-US/docs/XUL/broadcaster" title="XUL/broadcaster">broadcaster</a></code></li> + <li><code><a href="/en-US/docs/XUL/broadcasterset" title="XUL/broadcasterset">broadcasterset</a></code></li> + <li><code><a href="/en-US/docs/XUL/button" title="XUL/button">button</a></code></li> + <li><code><a href="/en-US/docs/XUL/browser" title="XUL/browser">browser</a></code></li> + <li><code><a href="/en-US/docs/XUL/checkbox" title="XUL/checkbox">checkbox</a></code></li> + <li><code><a href="/en-US/docs/XUL/caption" title="XUL/caption">caption</a></code></li> + <li><code><a href="/en-US/docs/XUL/colorpicker" title="XUL/colorpicker">colorpicker</a></code></li> + <li><code><a href="/en-US/docs/XUL/column" title="XUL/column">column</a></code></li> + <li><code><a href="/en-US/docs/XUL/columns" title="XUL/columns">columns</a></code></li> + <li><code><a href="/en-US/docs/XUL/commandset" title="XUL/commandset">commandset</a></code></li> + <li><code><a href="/en-US/docs/XUL/command" title="XUL/command">command</a></code></li> + <li><code><a href="/en-US/docs/XUL/conditions" title="XUL/conditions">conditions</a></code></li> + <li><code><a href="/en-US/docs/XUL/content" title="XUL/content">content</a></code></li> + <li><code><a href="/en-US/docs/XUL/datepicker" title="XUL/datepicker">datepicker</a></code></li> + <li><code><a href="/en-US/docs/XUL/deck" title="XUL/deck">deck</a></code></li> + <li><code><a href="/en-US/docs/XUL/description" title="XUL/description">description</a></code></li> + <li><code><a href="/en-US/docs/XUL/dialog" title="XUL/dialog">dialog</a></code></li> + <li><code><a href="/en-US/docs/XUL/dialogheader" title="XUL/dialogheader">dialogheader</a></code></li> + <li><code><a href="/en-US/docs/XUL/dropmarker" title="XUL/dropmarker">dropmarker</a></code></li> + <li><code><a href="/en-US/docs/XUL/editor" title="XUL/editor">editor</a></code></li> + <li><code><a href="/en-US/docs/XUL/grid" title="XUL/grid">grid</a></code></li> + <li><code><a href="/en-US/docs/XUL/grippy" title="XUL/grippy">grippy</a></code></li> + <li><code><a href="/en-US/docs/XUL/groupbox" title="XUL/groupbox">groupbox</a></code></li> + <li><code><a href="/en-US/docs/XUL/hbox" title="XUL/hbox">hbox</a></code></li> + <li><code><a href="/en-US/docs/XUL/iframe" title="XUL/iframe">iframe</a></code></li> + <li><code><a href="/en-US/docs/XUL/image" title="XUL/image">image</a></code></li> + <li><code><a href="/en-US/docs/XUL/key" title="XUL/key">key</a></code></li> + <li><code><a href="/en-US/docs/XUL/keyset" title="XUL/keyset">keyset</a></code></li> + <li><code><a href="/en-US/docs/XUL/label" title="XUL/label">label</a></code></li> + <li><code><a href="/en-US/docs/XUL/listbox" title="XUL/listbox">listbox</a></code></li> + <li><code><a href="/en-US/docs/XUL/listcell" title="XUL/listcell">listcell</a></code></li> + <li><code><a href="/en-US/docs/XUL/listcol" title="XUL/listcol">listcol</a></code></li> + <li><code><a href="/en-US/docs/XUL/listcols" title="XUL/listcols">listcols</a></code></li> + <li><code><a href="/en-US/docs/XUL/listhead" title="XUL/listhead">listhead</a></code></li> + <li><code><a href="/en-US/docs/XUL/listheader" title="XUL/listheader">listheader</a></code></li> + <li><code><a href="/en-US/docs/XUL/listitem" title="XUL/listitem">listitem</a></code></li> + <li><code><a href="/en-US/docs/XUL/member" title="XUL/member">member</a></code></li> + <li><code><a href="/en-US/docs/XUL/menu" title="XUL/menu">menu</a></code></li> + <li><code><a href="/en-US/docs/XUL/menubar" title="XUL/menubar">menubar</a></code></li> + <li><code><a href="/en-US/docs/XUL/menuitem" title="XUL/menuitem">menuitem</a></code></li> + <li><code><a href="/en-US/docs/XUL/menulist" title="XUL/menulist">menulist</a></code></li> + <li><code><a href="/en-US/docs/XUL/menupopup" title="XUL/menupopup">menupopup</a></code></li> + <li><code><a href="/en-US/docs/XUL/menuseparator" title="XUL/menuseparator">menuseparator</a></code></li> + <li><code><a href="/en-US/docs/XUL/notification" title="XUL/notification">notification</a></code></li> + <li><code><a href="/en-US/docs/XUL/notificationbox" title="XUL/notificationbox">notificationbox</a></code></li> + <li><code><a href="/en-US/docs/XUL/observes" title="XUL/observes">observes</a></code></li> + <li><code><a href="/en-US/docs/XUL/overlay" title="XUL/overlay">overlay</a></code></li> + <li><code><a href="/en-US/docs/XUL/page" title="XUL/page">page</a></code></li> + <li><code><a href="/en-US/docs/XUL/panel" title="XUL/panel">panel</a></code></li> + <li><code><a href="/en-US/docs/XUL/param" title="XUL/param">param</a></code></li> + <li><code><a href="/en-US/docs/XUL/popupset" title="XUL/popupset">popupset</a></code></li> + <li><code><a href="/en-US/docs/XUL/preference" title="XUL/preference">preference</a></code></li> + <li><code><a href="/en-US/docs/XUL/preferences" title="XUL/preferences">preferences</a></code></li> + <li><code><a href="/en-US/docs/XUL/prefpane" title="XUL/prefpane">prefpane</a></code></li> + <li><code><a href="/en-US/docs/XUL/prefwindow" title="XUL/prefwindow">prefwindow</a></code></li> + <li><code><a href="/en-US/docs/XUL/progressmeter" title="XUL/progressmeter">progressmeter</a></code></li> + <li><code><a href="/en-US/docs/XUL/query" title="XUL/query">query</a></code></li> + <li><code><a href="/en-US/docs/XUL/queryset" title="XUL/queryset">queryset</a></code></li> + <li><code><a href="/en-US/docs/XUL/radio" title="XUL/radio">radio</a></code></li> + <li><code><a href="/en-US/docs/XUL/radiogroup" title="XUL/radiogroup">radiogroup</a></code></li> + <li><code><a href="/en-US/docs/XUL/resizer" title="XUL/resizer">resizer</a></code></li> + <li><code><a href="/en-US/docs/XUL/richlistbox" title="XUL/richlistbox">richlistbox</a></code></li> + <li><code><a href="/en-US/docs/XUL/richlistitem" title="XUL/richlistitem">richlistitem</a></code></li> + <li><code><a href="/en-US/docs/XUL/row" title="XUL/row">row</a></code></li> + <li><code><a href="/en-US/docs/XUL/rows" title="XUL/rows">rows</a></code></li> + <li><code><a href="/en-US/docs/XUL/rule" title="XUL/rule">rule</a></code></li> + <li><code><a href="/en-US/docs/XUL/scale" title="XUL/scale">scale</a></code></li> + <li><code><a href="/en-US/docs/XUL/script" title="XUL/script">script</a></code></li> + <li><code><a href="/en-US/docs/XUL/scrollbar" title="XUL/scrollbar">scrollbar</a></code></li> + <li><code><a href="/en-US/docs/XUL/scrollbox" title="XUL/scrollbox">scrollbox</a></code></li> + <li><code><a href="/en-US/docs/XUL/scrollcorner" title="XUL/scrollcorner">scrollcorner</a></code></li> + <li><code><a href="/en-US/docs/XUL/separator" title="XUL/separator">separator</a></code></li> + <li><code><a href="/en-US/docs/XUL/spacer" title="XUL/spacer">spacer</a></code></li> + <li><code><a href="/en-US/docs/XUL/spinbuttons" title="XUL/spinbuttons">spinbuttons</a></code></li> + <li><code><a href="/en-US/docs/XUL/splitter" title="XUL/splitter">splitter</a></code></li> + <li><code><a href="/en-US/docs/XUL/stack" title="XUL/stack">stack</a></code></li> + <li><code><a href="/en-US/docs/XUL/statusbar" title="XUL/statusbar">statusbar</a></code></li> + <li><code><a href="/en-US/docs/XUL/statusbarpanel" title="XUL/statusbarpanel">statusbarpanel</a></code></li> + <li><code><a href="/en-US/docs/XUL/stringbundle" title="XUL/stringbundle">stringbundle</a></code></li> + <li><code><a href="/en-US/docs/XUL/stringbundleset" title="XUL/stringbundleset">stringbundleset</a></code></li> + <li><code><a href="/en-US/docs/XUL/tab" title="XUL/tab">tab</a></code></li> + <li><code><a href="/en-US/docs/XUL/tabbrowser" title="XUL/tabbrowser">tabbrowser</a> (Firefox-only starting with Firefox 3/Gecko 1.9)</code></li> + <li><code><a href="/en-US/docs/XUL/tabbox" title="XUL/tabbox">tabbox</a></code></li> + <li><code><a href="/en-US/docs/XUL/tabpanel" title="XUL/tabpanel">tabpanel</a></code></li> + <li><code><a href="/en-US/docs/XUL/tabpanels" title="XUL/tabpanels">tabpanels</a></code></li> + <li><code><a href="/en-US/docs/XUL/tabs" title="XUL/tabs">tabs</a></code></li> + <li><code><a href="/en-US/docs/XUL/template" title="XUL/template">template</a></code></li> + <li><code><a href="/en-US/docs/XUL/textnode" title="XUL/textnode">textnode</a></code></li> + <li><code><a href="/en-US/docs/XUL/textbox" title="XUL/textbox">textbox</a></code></li> + <li><code><a href="/en-US/docs/XUL/Textbox_(Toolkit_autocomplete)" title="XUL/textbox_(Firefox_autocomplete)">textbox (Firefox autocomplete)</a></code></li> + <li><code><a href="/en-US/docs/XUL/Textbox_(XPFE_autocomplete)" title="XUL/textbox_(Mozilla_autocomplete)">textbox (Mozilla autocomplete)</a></code></li> + <li><code><a href="/en-US/docs/XUL/timepicker" title="XUL/timepicker">timepicker</a></code></li> + <li><code><a href="/en-US/docs/XUL/titlebar" title="XUL/titlebar">titlebar</a></code></li> + <li><code><a href="/en-US/docs/XUL/toolbar" title="XUL/toolbar">toolbar</a></code></li> + <li><code><a href="/en-US/docs/XUL/toolbarbutton" title="XUL/toolbarbutton">toolbarbutton</a></code></li> + <li><code><a href="/en-US/docs/XUL/toolbargrippy" title="XUL/toolbargrippy">toolbargrippy</a></code></li> + <li><code><a href="/en-US/docs/XUL/toolbaritem" title="XUL/toolbaritem">toolbaritem</a></code></li> + <li><code><a href="/en-US/docs/XUL/toolbarpalette" title="XUL/toolbarpalette">toolbarpalette</a></code></li> + <li><code><a href="/en-US/docs/XUL/toolbarseparator" title="XUL/toolbarseparator">toolbarseparator</a></code></li> + <li><code><a href="/en-US/docs/XUL/toolbarset" title="XUL/toolbarset">toolbarset</a></code></li> + <li><code><a href="/en-US/docs/XUL/toolbarspacer" title="XUL/toolbarspacer">toolbarspacer</a></code></li> + <li><code><a href="/en-US/docs/XUL/toolbarspring" title="XUL/toolbarspring">toolbarspring</a></code></li> + <li><code><a href="/en-US/docs/XUL/toolbox" title="XUL/toolbox">toolbox</a></code></li> + <li><code><a href="/en-US/docs/XUL/tooltip" title="XUL/tooltip">tooltip</a></code></li> + <li><code><a href="/en-US/docs/XUL/tree" title="XUL/tree">tree</a></code></li> + <li><code><a href="/en-US/docs/XUL/treecell" title="XUL/treecell">treecell</a></code></li> + <li><code><a href="/en-US/docs/XUL/treechildren" title="XUL/treechildren">treechildren</a></code></li> + <li><code><a href="/en-US/docs/XUL/treecol" title="XUL/treecol">treecol</a></code></li> + <li><code><a href="/en-US/docs/XUL/treecols" title="XUL/treecols">treecols</a></code></li> + <li><code><a href="/en-US/docs/XUL/treeitem" title="XUL/treeitem">treeitem</a></code></li> + <li><code><a href="/en-US/docs/XUL/treerow" title="XUL/treerow">treerow</a></code></li> + <li><code><a href="/en-US/docs/XUL/treeseparator" title="XUL/treeseparator">treeseparator</a></code></li> + <li><code><a href="/en-US/docs/XUL/triple" title="XUL/triple">triple</a></code></li> + <li><code><a href="/en-US/docs/XUL/vbox" title="XUL/vbox">vbox</a></code></li> + <li><code><a href="/en-US/docs/XUL/where" title="XUL/where">where</a></code></li> + <li><code><a href="/en-US/docs/XUL/window" title="XUL/window">window</a></code></li> + <li><code><a href="/en-US/docs/XUL/wizard" title="XUL/wizard">wizard</a></code></li> + <li><code><a href="/en-US/docs/XUL/wizardpage" title="XUL/wizardpage">wizardpage</a></code></li> + </ul> +</div> +<h2 dir="rtl" id="فهرست_عناصر_طبقه_بندی_شده_XUL">فهرست عناصر طبقه بندی شده XUL</h2> +<div dir="rtl"> + « <a href="/en-US/docs/XUL" title="en-US/XUL">XUL Reference</a> «</div> +<h3 dir="rtl" id="پنجره_(ویندوز)">پنجره (ویندوز)</h3> +<div class="cols-3" dir="rtl"> + <ul> + <li><a href="/en-US/docs/XUL/window" title="XUL/window">window</a></li> + <li><a href="/en-US/docs/XUL/wizard" title="XUL/wizard">wizard</a></li> + <li><a href="/en-US/docs/XUL/wizardpage" title="XUL/wizardpage">wizardpage</a></li> + <li>titlebar</li> + </ul> +</div> +<h3 dir="rtl" id="ساختار_پنجره">ساختار پنجره</h3> +<div class="cols-3" dir="rtl"> + <ul> + <li>---</li> + </ul> +</div> +<h3 dir="rtl" id="منوها_و_پنجره_های_خودبازشو">منوها و پنجره های خودبازشو</h3> +<div class="cols-3" dir="rtl"> + <ul> + <li>---</li> + </ul> +</div> +<h3 dir="rtl" id="نوار_ابزار">نوار ابزار</h3> +<div class="cols-3" dir="rtl"> + <ul> + <li>toolbar</li> + <li>toolbarbutton</li> + <li>toolbargrippy</li> + <li>toolbaritem</li> + <li>toolbarpallete</li> + <li>toolbarseperator</li> + <li>toolbarspring</li> + </ul> +</div> +<h3 dir="rtl" id="سربرگ_ها_و_ابزارهای_گروه_بندی">سربرگ ها و ابزارهای گروه بندی</h3> +<div class="cols-3" dir="rtl"> + <ul> + <li>tab</li> + <li>tabbox</li> + <li>tabpanel</li> + <li>tabpanels</li> + <li>tabs</li> + </ul> +</div> +<h3 dir="rtl" id="کنترل_ها">کنترل ها</h3> +<div class="cols-3" dir="rtl"> + <ul> + <li>---</li> + </ul> +</div> +<h3 dir="rtl" id="متن_و_تصویر">متن و تصویر</h3> +<div class="cols-3" dir="rtl"> + <ul> + <li>label</li> + <li>caption</li> + <li>image</li> + </ul> +</div> +<h3 dir="rtl" id="فهرست_ها">فهرست ها</h3> +<div class="cols-3" dir="rtl"> + <ul> + <li>---</li> + </ul> +</div> +<h3 dir="rtl" id="ساختارهای_درختی">ساختارهای درختی</h3> +<div class="cols-3" dir="rtl"> + <ul> + <li>---</li> + </ul> +</div> +<h3 dir="rtl" id="آرایش">آرایش</h3> +<div class="cols-3" dir="rtl"> + <ul> + <li>---</li> + </ul> +</div> +<h3 dir="rtl" id="قالب_ها">قالب ها</h3> +<div class="cols-3" dir="rtl"> + <ul> + <li>---</li> + </ul> +</div> +<h3 dir="rtl" id="اسکریپت_ها">اسکریپت ها</h3> +<div class="cols-3" dir="rtl"> + <ul> + <li>---</li> + </ul> +</div> +<h3 dir="rtl" id="عناصر_کمکی">عناصر کمکی</h3> +<h2 dir="rtl" id="Other_XUL_lists" name="Other_XUL_lists">دیگر عناصر XUL</h2> +<div class="cols-3"> + <ul> + <li><a href="/en-US/docs/XUL/dialog" title="XUL/dialog">dialog</a></li> + <li><a href="/en-US/docs/XUL/overlay" title="XUL/overlay">overlay</a></li> + <li><a href="/en-US/docs/XUL/page" title="XUL/page">page</a></li> + <li><a href="/en-US/docs/XUL/window" title="XUL/window">window</a></li> + <li><a href="/en-US/docs/XUL/wizard" title="XUL/wizard">wizard</a></li> + <li><a href="/en-US/docs/XUL/wizardpage" title="XUL/wizardpage">wizardpage</a></li> + <li><a href="/en-US/docs/XUL/preference" title="XUL/preference">preference</a></li> + <li><a href="/en-US/docs/XUL/preferences" title="XUL/preferences">preferences</a></li> + <li><a href="/en-US/docs/XUL/prefpane" title="XUL/prefpane">prefpane</a></li> + <li><a href="/en-US/docs/XUL/prefwindow" title="XUL/prefwindow">prefwindow</a></li> + <li><a href="/en-US/docs/XUL/browser" title="XUL/browser">browser</a></li> + <li><a href="/en-US/docs/XUL/tabbrowser" title="XUL/tabbrowser">tabbrowser</a></li> + <li><a href="/en-US/docs/XUL/editor" title="XUL/editor">editor</a></li> + <li><a href="/en-US/docs/XUL/iframe" title="XUL/iframe">iframe</a></li> + <li><a href="/en-US/docs/XUL/titlebar" title="XUL/titlebar">titlebar</a></li> + <li><a href="/en-US/docs/XUL/resizer" title="XUL/resizer">resizer</a></li> + <li><a href="/en-US/docs/XUL/statusbar" title="XUL/statusbar">statusbar</a></li> + <li><a href="/en-US/docs/XUL/statusbarpanel" title="XUL/statusbarpanel">statusbarpanel</a></li> + <li><a href="/en-US/docs/XUL/dialogheader" title="XUL/dialogheader">dialogheader</a></li> + <li><a href="/en-US/docs/XUL/notification" title="XUL/notification">notification</a></li> + <li><a href="/en-US/docs/XUL/notificationbox" title="XUL/notificationbox">notificationbox</a></li> + <li><a href="/en-US/docs/XUL/menubar" title="XUL/menubar">menubar</a></li> + <li><a href="/en-US/docs/XUL/menu" title="XUL/menu">menu</a></li> + <li><a href="/en-US/docs/XUL/menuitem" title="XUL/menuitem">menuitem</a></li> + <li><a href="/en-US/docs/XUL/menuseparator" title="XUL/menuseparator">menuseparator</a></li> + <li><a href="/en-US/docs/XUL/menupopup" title="XUL/menupopup">menupopup</a></li> + <li><a href="/en-US/docs/XUL/panel" title="XUL/panel">panel</a></li> + <li><a href="/en-US/docs/XUL/tooltip" title="XUL/tooltip">tooltip</a></li> + <li><a href="/en-US/docs/XUL/popupset" title="XUL/popupset">popupset</a></li> + <li><a href="/en-US/docs/XUL/toolbar" title="XUL/toolbar">toolbar</a></li> + <li><a href="/en-US/docs/XUL/toolbarbutton" title="XUL/toolbarbutton">toolbarbutton</a></li> + <li><a href="/en-US/docs/XUL/toolbargrippy" title="XUL/toolbargrippy">toolbargrippy</a></li> + <li><a href="/en-US/docs/XUL/toolbaritem" title="XUL/toolbaritem">toolbaritem</a></li> + <li><a href="/en-US/docs/XUL/toolbarpalette" title="XUL/toolbarpalette">toolbarpalette</a></li> + <li><a href="/en-US/docs/XUL/toolbarseparator" title="XUL/toolbarseparator">toolbarseparator</a></li> + <li><a href="/en-US/docs/XUL/toolbarset" title="XUL/toolbarset">toolbarset</a></li> + <li><a href="/en-US/docs/XUL/toolbarspacer" title="XUL/toolbarspacer">toolbarspacer</a></li> + <li><a href="/en-US/docs/XUL/toolbarspring" title="XUL/toolbarspring">toolbarspring</a></li> + <li><a href="/en-US/docs/XUL/toolbox" title="XUL/toolbox">toolbox</a></li> + <li><a href="/en-US/docs/XUL/tabbox" title="XUL/tabbox">tabbox</a></li> + <li><a href="/en-US/docs/XUL/tabs" title="XUL/tabs">tabs</a></li> + <li><a href="/en-US/docs/XUL/tab" title="XUL/tab">tab</a></li> + <li><a href="/en-US/docs/XUL/tabpanels" title="XUL/tabpanels">tabpanels</a></li> + <li><a href="/en-US/docs/XUL/tabpanel" title="XUL/tabpanel">tabpanel</a></li> + <li><a href="/en-US/docs/XUL/groupbox" title="XUL/groupbox">groupbox</a></li> + <li><a href="/en-US/docs/XUL/caption" title="XUL/caption">caption</a></li> + <li><a href="/en-US/docs/XUL/separator" title="XUL/separator">separator</a></li> + <li><a href="/en-US/docs/XUL/spacer" title="XUL/spacer">spacer</a></li> + <li><a href="/en-US/docs/XUL/button" title="XUL/button">button</a></li> + <li><a href="/en-US/docs/XUL/checkbox" title="XUL/checkbox">checkbox</a></li> + <li><a href="/en-US/docs/XUL/colorpicker" title="XUL/colorpicker">colorpicker</a></li> + <li><a href="/en-US/docs/XUL/datepicker" title="XUL/datepicker">datepicker</a></li> + <li><a href="/en-US/docs/XUL/menulist" title="XUL/menulist">menulist</a></li> + <li><a href="/en-US/docs/XUL/progressmeter" title="XUL/progressmeter">progressmeter</a></li> + <li><a href="/en-US/docs/XUL/radio" title="XUL/radio">radio</a></li> + <li><a href="/en-US/docs/XUL/radiogroup" title="XUL/radiogroup">radiogroup</a></li> + <li><a href="/en-US/docs/XUL/scale" title="XUL/scale">scale</a></li> + <li><a href="/en-US/docs/XUL/splitter" title="XUL/splitter">splitter</a></li> + <li><a href="/en-US/docs/XUL/textbox" title="XUL/textbox">textbox</a></li> + <li><a href="/en-US/docs/XUL/Textbox_(Toolkit_autocomplete)" title="XUL/textbox_(Firefox_autocomplete)">textbox (Firefox autocomplete)</a></li> + <li><a href="/en-US/docs/XUL/Textbox_(XPFE_autocomplete)" title="XUL/textbox_(Mozilla_autocomplete)">textbox (Mozilla autocomplete)</a></li> + <li><a href="/en-US/docs/XUL/timepicker" title="XUL/timepicker">timepicker</a></li> + <li><a href="/en-US/docs/XUL/description" title="XUL/description">description</a></li> + <li><a href="/en-US/docs/XUL/label" title="XUL/label">label</a></li> + <li><a href="/en-US/docs/XUL/image" title="XUL/image">image</a></li> + <li><a href="/en-US/docs/XUL/listbox" title="XUL/listbox">listbox</a></li> + <li><a href="/en-US/docs/XUL/listitem" title="XUL/listitem">listitem</a></li> + <li><a href="/en-US/docs/XUL/listcell" title="XUL/listcell">listcell</a></li> + <li><a href="/en-US/docs/XUL/listcol" title="XUL/listcol">listcol</a></li> + <li><a href="/en-US/docs/XUL/listcols" title="XUL/listcols">listcols</a></li> + <li><a href="/en-US/docs/XUL/listhead" title="XUL/listhead">listhead</a></li> + <li><a href="/en-US/docs/XUL/listheader" title="XUL/listheader">listheader</a></li> + <li><a href="/en-US/docs/XUL/richlistbox" title="XUL/richlistbox">richlistbox</a></li> + <li><a href="/en-US/docs/XUL/richlistitem" title="XUL/richlistitem">richlistitem</a></li> + <li><a href="/en-US/docs/XUL/tree" title="XUL/tree">tree</a></li> + <li><a href="/en-US/docs/XUL/treecell" title="XUL/treecell">treecell</a></li> + <li><a href="/en-US/docs/XUL/treechildren" title="XUL/treechildren">treechildren</a></li> + <li><a href="/en-US/docs/XUL/treecol" title="XUL/treecol">treecol</a></li> + <li><a href="/en-US/docs/XUL/treecols" title="XUL/treecols">treecols</a></li> + <li><a href="/en-US/docs/XUL/treeitem" title="XUL/treeitem">treeitem</a></li> + <li><a href="/en-US/docs/XUL/treerow" title="XUL/treerow">treerow</a></li> + <li><a href="/en-US/docs/XUL/treeseparator" title="XUL/treeseparator">treeseparator</a></li> + <li><a href="/en-US/docs/XUL/box" title="XUL/box">box</a></li> + <li><a href="/en-US/docs/XUL/hbox" title="XUL/hbox">hbox</a></li> + <li><a href="/en-US/docs/XUL/vbox" title="XUL/vbox">vbox</a></li> + <li><a href="/en-US/docs/XUL/bbox" title="XUL/bbox">bbox</a></li> + <li><a href="/en-US/docs/XUL/deck" title="XUL/deck">deck</a></li> + <li><a href="/en-US/docs/XUL/stack" title="XUL/stack">stack</a></li> + <li><a href="/en-US/docs/XUL/grid" title="XUL/grid">grid</a></li> + <li><a href="/en-US/docs/XUL/columns" title="XUL/columns">columns</a></li> + <li><a href="/en-US/docs/XUL/column" title="XUL/column">column</a></li> + <li><a href="/en-US/docs/XUL/rows" title="XUL/rows">rows</a></li> + <li><a href="/en-US/docs/XUL/row" title="XUL/row">row</a></li> + <li><a href="/en-US/docs/XUL/scrollbox" title="XUL/scrollbox">scrollbox</a></li> + <li><a href="/en-US/docs/XUL/action" title="XUL/action">action</a></li> + <li><a href="/en-US/docs/XUL/assign" title="XUL/assign">assign</a></li> + <li><a href="/en-US/docs/XUL/binding" title="XUL/binding">binding</a></li> + <li><a href="/en-US/docs/XUL/bindings" title="XUL/bindings">bindings</a></li> + <li><a href="/en-US/docs/XUL/conditions" title="XUL/conditions">conditions</a></li> + <li><a href="/en-US/docs/XUL/content" title="XUL/content">content</a></li> + <li><a href="/en-US/docs/XUL/member" title="XUL/member">member</a></li> + <li><a href="/en-US/docs/XUL/param" title="XUL/param">param</a></li> + <li><a href="/en-US/docs/XUL/query" title="XUL/query">query</a></li> + <li><a href="/en-US/docs/XUL/queryset" title="XUL/queryset">queryset</a></li> + <li><a href="/en-US/docs/XUL/rule" title="XUL/rule">rule</a></li> + <li><a href="/en-US/docs/XUL/template" title="XUL/template">template</a></li> + <li><a href="/en-US/docs/XUL/textnode" title="XUL/textnode">textnode</a></li> + <li><a href="/en-US/docs/XUL/triple" title="XUL/triple">triple</a></li> + <li><a href="/en-US/docs/XUL/where" title="XUL/where">where</a></li> + <li><a href="/en-US/docs/XUL/script" title="XUL/script">script</a></li> + <li><a href="/en-US/docs/XUL/commandset" title="XUL/commandset">commandset</a></li> + <li><a href="/en-US/docs/XUL/command" title="XUL/command">command</a></li> + <li><a href="/en-US/docs/XUL/broadcaster" title="XUL/broadcaster">broadcaster</a></li> + <li><a href="/en-US/docs/XUL/broadcasterset" title="XUL/broadcasterset">broadcasterset</a></li> + <li><a href="/en-US/docs/XUL/observes" title="XUL/observes">observes</a></li> + <li><a href="/en-US/docs/XUL/key" title="XUL/key">key</a></li> + <li><a href="/en-US/docs/XUL/keyset" title="XUL/keyset">keyset</a></li> + <li><a href="/en-US/docs/XUL/stringbundle" title="XUL/stringbundle">stringbundle</a></li> + <li><a href="/en-US/docs/XUL/stringbundleset" title="XUL/stringbundleset">stringbundleset</a></li> + <li><a href="/en-US/docs/XUL/scrollbar" title="XUL/scrollbar">arrowscrollbox</a></li> + <li><a href="/en-US/docs/XUL/dropmarker" title="XUL/dropmarker">dropmarker</a></li> + <li><a href="/en-US/docs/XUL/grippy" title="XUL/grippy">grippy</a></li> + <li><a href="/en-US/docs/XUL/scrollbar" title="XUL/scrollbar">scrollbar</a></li> + <li><a href="/en-US/docs/XUL/scrollcorner" title="XUL/scrollcorner">scrollcorner</a></li> + <li><a href="/en-US/docs/XUL/spinbuttons" title="XUL/spinbuttons">spinbuttons</a></li> + <li><a href="/en-US/docs/XUL/Attribute" title="XUL/Attribute">All attributes</a></li> + <li><a href="/en-US/docs/XUL/Property" title="XUL/Property">All properties</a></li> + <li><a href="/en-US/docs/XUL/Method" title="XUL/Method">All methods</a></li> + <li><a href="/en-US/docs/XUL_element_attributes" title="XUL_element_attributes">Attributes defined for all XUL elements</a></li> + <li><a href="/en-US/docs/XUL/Style" title="XUL/Style">Style classes</a></li> + <li><a href="/en-US/docs/XUL/Events" title="XUL/Events">Event handlers</a></li> + <li><a href="/en-US/docs/XUL/Deprecated_and_defunct_markup" title="XUL/Deprecated//Defunct_Markup">Deprecated/Defunct Markup</a></li> + </ul> +</div> diff --git a/files/fa/archive/web/index.html b/files/fa/archive/web/index.html new file mode 100644 index 0000000000..ce3481b9ae --- /dev/null +++ b/files/fa/archive/web/index.html @@ -0,0 +1,81 @@ +--- +title: Archived open Web documentation +slug: Archive/Web +tags: + - Archive + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Archive/Web +--- +<div class="hidden">{{IncludeSubnav("/en-US/docs/Archive")}}</div> + +<div>{{Obsolete_Header}}</div> + +<p class="summary">The documentation listed below is archived, obsolete material about open Web topics.</p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Talk:CSS_background-size">Talk:background-size</a></dt> + <dd class="landingPageList">Should not the "Browser compatibility" table also list Google Chrome and Konqueror? Chome is not mentioned at all, but is becoming increasingly popular. Konqueror is listed <em>below</em> the table, which seems inconsistent. <a href="/User:Znerd" rel="custom nofollow">Znerd</a> 04 August 2009</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Browser_Detection_and_Cross_Browser_Support">Browser Detection and Cross Browser Support</a></dt> + <dd class="landingPageList">Improper browser detection can lead to web maintenance nightmares. Rethinking the basics of when and how to detect user agents is crucial to creating maintainable, cross browser web content. This article reviews several approaches to browser detection, their usefulness in specific circumstances to arrive at a common sense approach to browser detection.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Browser_feature_detection">Browser Feature Detection</a></dt> + <dd class="landingPageList">An experimental approach to discovering degree of support for Standards</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/CSS">CSS</a></dt> + <dd class="landingPageList">Obsolete CSS features</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Displaying_notifications_(deprecated)">Displaying notifications (deprecated)</a></dt> + <dd class="landingPageList">Firefox offers support for "desktop notifications"; these are notifications that are displayed to the user outside the context of the web content, using the standard notification system provided by the operating system.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/E4X">E4X</a></dt> + <dd class="landingPageList"><strong>ECMAScript for XML</strong> (<strong>E4X</strong>) is a programming language extension that adds native XML support to <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. It does this by providing access to the XML document in a form that feels natural for ECMAScript programmers. The goal is to provide an alternative, simpler syntax for accessing XML documents than via <a href="/en-US/docs/DOM" title="DOM">DOM</a> interfaces. A valid alternative to E4X is a non-native <a href="/en-US/docs/JXON" title="JXON">JXON algorithm</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/E4X_tutorial">E4X Tutorial</a></dt> + <dd class="landingPageList">This tutorial walks you through the basic syntax of <strong>E4X (ECMAScript for XML)</strong>. With E4X, programmers can manipulate an <a href="/en-US/docs/XML" title="XML">XML</a> document with a syntax more familiar to <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> programming.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Talk:JavaScript_Reference_Global_Objects_Array_forEach">Talk:Array.forEach()</a></dt> + <dd class="landingPageList">Ok, in the end I didn't remove the old code as it isn't hosted anywhere (I thought the github reference contained the code) but inserted a faster implementation above while retaining the rest of the document.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Iterator">Iterator</a></dt> + <dd class="landingPageList">The <code><strong>Iterator</strong></code> function returns an object which implements legacy iterator protocol and iterates over enumerable properties of an object.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/LiveConnect">LiveConnect</a></dt> + <dd class="landingPageList">(Please update or remove as needed.)</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/MSX_Emulator_(jsMSX)">MSX Emulator (jsMSX)</a></dt> + <dd class="landingPageList"> </dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Old_Proxy_API">Old Proxy API</a></dt> + <dd class="landingPageList">Proxies are objects for which the programmer has to define the semantics in JavaScript. The default object semantics are implemented in the JavaScript engine, often written in lower-level languages like C++. Proxies let the programmer define most of the behavior of an object in JavaScript. They are said to provide a <strong>meta-programming API</strong>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/ParallelArray">ParallelArray</a></dt> + <dd class="landingPageList">The goal of <strong><code>ParallelArray</code></strong> was to enable data-parallelism in web applications. The higher-order functions available on <code>ParallelArray</code> attempted to execute in parallel, though they may fall back to sequential execution if necessary. To ensure that your code executes in parallel, it is suggested that the functions should be limited to the <a href="http://smallcultfollowing.com/babysteps/blog/2013/04/30/parallelizable-javascript-subset/">parallelizable subset of JS that Firefox supports</a>.</dd> +</dl> + +<dl> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents_">Properly Using CSS and JavaScript in XHTML Documents</a></dt> + <dd class="landingPageList"><a class="external" href="http://www.w3.org/TR/xhtml1">XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)</a> defines XHTML to be a reformulation of HTML 4 as an XML 1.0 application.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Talk:JavaScript_Reference">Talk:JavaScript Reference</a></dt> + <dd class="landingPageList">The guide section links to an interesting document discussing how to create and use private variables in objects, which is great if you want to protect the various properties within an object from being poked at accidentally. I also just read a document on proper inheritance using apply(). Well if you combine the two, you can have inherited private variables:</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Scope_Cheatsheet">Scope Cheatsheet</a></dt> + <dd class="landingPageList">JavaScript with Mozilla extensions has both function-scoped <strong><code>var</code></strong>s and block-scoped <strong><code>let</code></strong>s. Along with hoisting and dynamic behavior, scope in JavaScript is sometimes surprising.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Server-Side_JavaScript">Server-Side JavaScript</a></dt> + <dd class="landingPageList">Here's a radical idea: Use one language to write entire Web apps -- the same language which billions of web pages already use, every day.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Sharp_variables_in_JavaScript">Sharp variables in JavaScript</a></dt> + <dd class="landingPageList">A sharp variable is a syntax in object initializers that allows serialization of objects that have cyclic references or multiple references to the same object.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Standards-Compliant_Authoring_Tools">Standards-Compliant Authoring Tools</a></dt> + <dd class="landingPageList">Creating cross-browser code upfront will save you lots of time quality testing your web content. The following authoring tools adhere to the W3 standards. If you're using older versions of tools that rely on old browser bugs or generate browser-specific code, it may be time to upgrade:</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/StopIteration">StopIteration</a></dt> + <dd class="landingPageList">The <code><strong>StopIteration</strong></code> object was used to tell the end of the iteration in the legacy iterator protocol. Do not use this ancient feature.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Styling_the_Amazing_Netscape_Fish_Cam_Page">Styling the Amazing Netscape Fish Cam Page</a></dt> + <dd class="landingPageList"> </dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/IndexedDB_API_Using_JavaScript_Generators_in_Firefox">Using JavaScript Generators in Firefox</a></dt> + <dd class="landingPageList">Generators can be used to simplify asynchronous code in Firefox by opting in to using JavaScript version 1.7 or later. You can opt in in HTML as follows:</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Window.importDialog">Window.importDialog()</a></dt> + <dd class="landingPageList">Because opening windows on mobile isn't necessarily appropriate, the Firefox Mobile team designed the <code>importDialog()</code> method to replace <a href="/en-US/docs/Web/API/Window/openDialog" title="window.openDialog() is an extension to window.open(). It behaves the same, except that it can optionally take one or more parameters past windowFeatures, and windowFeatures itself is treated a little differently."><code>window.openDialog()</code></a>. Instead of opening a new window, it merges the specified XUL dialog into the main window.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">Writing JavaScript for XHTML</a></dt> + <dd class="landingPageList">Technical review completed. Editorial review completed.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/XForms">XForms</a></dt> + <dd class="landingPageList"><strong>XForms</strong> were envisioned as the future of online forms as envisioned by the W3C. Drawing on other W3C standards like <a href="/en/XML_Schema" title="en/XML_Schema">XML Schema</a>, <a href="/en/XPath" title="en/XPath">XPath</a>, and <a href="/en/XML_Events" title="en/XML_Events">XML Events</a>, XForms tried to address some of the limitations of the current <a href="/en/HTML" title="en/HTML">HTML</a> forms model. However, XForms never gained traction and is now considered obsolete.</dd> +</dl> +</div> +</div> diff --git a/files/fa/archive/web/server-side_javascript/index.html b/files/fa/archive/web/server-side_javascript/index.html new file mode 100644 index 0000000000..5969623300 --- /dev/null +++ b/files/fa/archive/web/server-side_javascript/index.html @@ -0,0 +1,17 @@ +--- +title: Server-Side JavaScript +slug: Archive/Web/Server-Side_JavaScript +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Web/Server-Side_JavaScript +--- +<p>Here's a radical idea: Use one language to write entire Web apps -- the same language which billions of web pages already use, every day.</p> + +<p>Sounds obvious, but for at least the first twelve years of the Web's evolution, developers have pretty much had to use different languages on the server from those available in the browser, leading to segregated teams, disparate and inconsistent know-how, and plenty of server-side <span style="line-height: 1.572;">string manipulation</span><span style="line-height: 1.572;"> gymnastics to generate HTML or Ajax pages. </span></p> + +<p><span style="line-height: 1.572;">The simplicity of using JavaScript on the server was part of Netscape's original vision back in the day with Netscape LiveWire. But back then, 350 MHz servers were the best you could buy, and Mozilla was yet to emerge from the Netscape organization to continue to advance the state of Web technologies. Today with computing cycles having increased more than 10-fold and Mozilla's work on </span><a class="internal" href="/en/Rhino" style="line-height: 1.572;" title="En/Rhino">Rhino </a><span style="line-height: 1.572;">(JavaScript interpreter in Java) and </span><a class="internal" href="/en/SpiderMonkey" style="line-height: 1.572;" title="En/SpiderMonkey">SpiderMonkey </a><span style="line-height: 1.572;">(JavaScript interpreter in C) and </span><a class="internal" href="/en/JavaScript" style="line-height: 1.572;" title="En/JavaScript">JavaScript </a><span style="line-height: 1.572;">itself, we have very solid foundations for JavaScript to be extraordinarily useful and applicable on the server-side again -- with </span><a class="external" href="http://www.aptana.com/jaxer/benchmarks" style="line-height: 1.572;" title="http://www.aptana.com/jaxer/benchmarks">performance in the same range</a><span style="line-height: 1.572;"> as popular server-side environments like PHP and Ruby on Rails. </span></p> + +<p><span style="line-height: 1.572;">Now, with </span><a class="external" href="https://brendaneich.com/2008/08/tracemonkey-javascript-lightspeed/" style="line-height: 1.572;" title="http://weblogs.mozillazine.org/roadmap/archives/2008/08/tracemonkey_javascript_lightsp.html">TraceMonkey</a><span style="line-height: 1.572;"> available, JavaScript (both client side and server-side) can see 20x to 40x speed improvements according to Brendan Eich, Mozilla CTO and creator of JavaScript. Server-Side JavaScript is another way in which, as </span><a class="external" href="http://arstechnica.com/news.ars/post/20080822-firefox-to-get-massive-javascript-performance-boost.html" style="line-height: 1.572;" title="http://arstechnica.com/news.ars/post/20080822-firefox-to-get-massive-javascript-performance-boost.html">this article quotes</a><span style="line-height: 1.572;"> Eich, "Mozilla wants to 'get people thinking about JavaScript as a more general-purpose language' and show them that 'it really is a platform for writing full applications.'"</span></p> + +<p><a class="external" href="http://en.wikipedia.org/wiki/SSJS" title="http://en.wikipedia.org/wiki/SSJS">Many vendors</a> today are embedding Mozilla Rhino or Mozilla SpiderMonkey into Web server environments. Some, like Aptana with the open source <a class="external" href="http://www.aptana.com/jaxer" title="http://www.aptana.com/jaxer">Jaxer server</a> actually embed the entire Mozilla Firefox browser engine (including SpiderMonkey) within a Web server to enable server-side Ajax and server-side DOM access in addition to server-side execution of JavaScript.</p> diff --git a/files/fa/archive/web/server-side_javascript/راهنما/index.html b/files/fa/archive/web/server-side_javascript/راهنما/index.html new file mode 100644 index 0000000000..ddd898c081 --- /dev/null +++ b/files/fa/archive/web/server-side_javascript/راهنما/index.html @@ -0,0 +1,557 @@ +--- +title: 'بازگشت به سرور: اوج گیری جاوا اسکریپت سمت سرور' +slug: Archive/Web/Server-Side_JavaScript/راهنما +translation_of: Archive/Web/Server-Side_JavaScript/Walkthrough +--- +<p dir="rtl"><em><font color="#000000"><font face="Times New Roman, serif"><font size="3">نوشته ی: دیوی واترسن، معمار جاوا اسکریپت، آپتانا</font></font></font></em></p> + +<p dir="rtl"><font color="#000000" face="Times New Roman, serif" size="3"><em>شکی نیست که جاوا اسکریپت پرکاربردترین زبان سمت کاربر در وب است. فارغ از این که بک اند برنامه تحت وب شما چگونه پیاده سازی شده، در سمت کاربر برای انجام (تقریبا) هر کاری از جاوا اسکریپت استفاده می کنید: از اعتبارسنجی فرم تا یک برنامه سراسر Ajax. حالا تصور کنید که می توانید با جاوا اسکریپت سمت سروربرنامه های وب خود را نیز توسعه دهید. آیا امکان استفاده از یک زبان برای سمت سرور و کاربر زندگی را برای ما توسعه دهندگان آسان تر نمی کند؟</em></font></p> + +<p dir="rtl"><strong>چرخه ی کامل</strong></p> + +<p dir="rtl">اگر شما بخشی از انفجار بزرگ وب در اواسط دههی 1990 بودهاید شاید به یاد داشته باشید که (ایدهی) استفاده از جاوا اسکریپت در هر دو سمت سرور و کاربر، هستهی اصلی نگرش نتاسکیپ برای برنامههای وب بود. «نت اسکیپ لایو وایر» نخستین موتور جاوا اسکریپت سمت سرور بود. اکنون با گذشت بیش از 10 سال و تبدیل گروه تکنولوژی نت اسکیپ به بنیاد موزیلا، جاوا اسکریپت سمت سرور با توجه به افزایش بیش از 10 برابری قدرت پردازندههای امروزی به نسبت پردازنده های اواسط دهه ی 90 در پردازش جاوااسکریپت، کار توسعه دهندگان وب را آسانتر کرده و به همین دلیل شاهد تجدید حیاتی بزرگ است. همانند گذشته این تیم موزیلا است که در مرکز این سیر تکاملی وب قرار دارد. بنا بر گفته ی <a href="http://en.wikipedia.org/wiki/Brendan_Eich">Brendan Erich</a> مدیر فنی موزیلا و خالق جاوا اسکریپت، موتور بعدی جاوا اسکریپت موزیلا با نام <a href="https://wiki.mozilla.org/JavaScript:TraceMonkey">TraceMonkey</a> می تواند کارآیی جاوا اسکریپت را 20 تا 40 برابر بیشتر کند. در پیشرفت های اخیر شاهد ظهور موتورهای دیگری مانند <a href="http://code.google.com/p/v8/">V8 از گوگل</a> و <a href="http://trac.webkit.org/wiki/SquirrelFish">squirrelfish</a> از webKit برای جاوا اسکریپت بوده ایم. این موتورها استانداردهای کارآیی را ارتقاء داده و به حفظ فضای رقابتی کمک میکنند و باعث هدایت رقابت به سمت بخشهای مرتبط با کارآیی تمام استفادههای اصلی جاوا اسکریپت می شود.</p> + +<p dir="rtl">در حال حاضر دو موتور اصلی جاوا اسکریپت در سمت سرور استفاده می شوند و هر دو برآمده از موزیلا هستند: «موزیلا راینو» و «موزیلا اسپایدر مانکی». «راینو» یک مفسر جاوا اسکریپت است که با جاوا نوشته شده و می تواند پلی میان جاوا اسکریپت و جاوای سمت سرور باشد. «استیو یگ» از گوگل کارهای جالبی با این موتور انجام داده. از سوی دیگر «اسپایدر مانکی» موتور جاوا اسکریپت است (که با C نوشته شده) و در مرورگر محبوب فایرفاکس استفاده شده. «اسپایدر مانکی» پس از تکامل تبدیل به «تریس مانکی» خواهد شد. همچنین Jaxer «سرور Ajax» (پروژهای که در آپتانا کار کردهام) نمونه ای از SSJS است که نه تنها از «اسپایدر مانکی» استفاده میکند بلکه </p> + +<p lang="en-US" style="margin-bottom: 0in; font-style: normal;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><span style="background: transparent none repeat scroll 0% 0%;"><span style="font-style: normal;"><span lang="en-US"><font size="3"><font color="#000000">but also embeds the entire Firefox browser engine in the application server such that you can do server-side DOM manipulation and other Ajaxy things server-side that Rhino was not built to do.</font></font></span></span></span></font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in; font-style: normal;"> </p> + +<p lang="en-US" style="margin-bottom: 0in; font-style: normal;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><span style="background: transparent none repeat scroll 0% 0%;">Let's take a look at various SSJS implementations and some examples of putting them to use.</span></font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in; font-style: normal;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="4"><strong>Server-Side JavaScript (SSJS) via Embedded JavaScript Engines</strong></font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">The extension of JavaScript to the server is made possible via embedded JavaScript engines. The two most well established engines are SpiderMonkey and Rhino, both currently maintained by the Mozilla Foundation. SpiderMonkey is the code name for the first ever JavaScript engine, an open source C implementation which can be found embedded in leading software products such as Mozilla Firefox, Adobe Acrobat, and Aptana Jaxer. Rhino is a Java implementation of JavaScript which is commonly embedded in Java applications to expose scripting capability. The Helma web application framework is an example of Rhino in use. The Dojo Toolkit also has capabilities that run in Rhino. Let’s take a closer look at Rhino and its importance to the JavaScript developer.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Rhino offers a unique opportunity for the JavaScript developer to tap into the power of Java classes using JavaScript. Armed with some basic Java knowledge, you can extend JavaScript to include some of the most desired capability such as database access, remote web requests, and XML processing. We’ll start by taking a look at querying a SQL database. </font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">This first example we’ll demonstrate is querying a mySQL database for some employee contact information. It is assumed that you have already downloaded, extracted, and consumed the necessary documentation to get up and running with some basic Rhino scripts. If you don’t already have it, you’ll need to also download the <font color="#000080"><u><a class="external" href="http://dev.mysql.com/downloads/connector/j/5.0.html">JDBC driver for mySQL</a></u></font>, extract the class files, and include the path in your CLASSPATH environment variable. The code in Listing 1 is a sample JavaScript script which incorporates Java classes to handle the database query.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Listing 1 - Querying a mySQL database from Rhino</font></font></font></p> + +<pre class="eval">// import the java sql packages +importPackage( java.sql ); + +// load the mySQL driver +java.lang.Class.forName( "com.mysql.jdbc.Driver" ); + +// create connection to the database +var conn = DriverManager.getConnection( "jdbc:<a class="external" rel="freelink">mysql://localhost/rhino</a>", "uRhino", "pRhino" ); + +// create a statement handle +var stmt = conn.createStatement(); + +// get a resultset +var rs = stmt.executeQuery( "select * from employee" ); + +// get the metadata from the resultset +var meta = rs.getMetaData(); + +// loop over the records, dump out column names and values +while( rs.next() ) { + for( var i = 1; i <= meta.getColumnCount(); i++ ) { + print( meta.getColumnName( i ) + ": " + rs.getObject( i ) + "\n" ); + } + print( "----------\n" ); +} + +// cleanup +rs.close(); +stmt.close(); +conn.close();</pre> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">This code starts off by using a Rhino function named <em>importPackage</em> which is just like using the <em>import</em> statement in Java. Here, we’re including all the classes in the <em>java.sql</em> namespace in the script. The appropriate database driver for mySQL is loaded and the connection string to a database named <em>rhino</em> on my local machine is configured using the user account <em>uRhino</em> with the password of <em>pRhino</em>. The SQL statement is prepared, executed, and printed with the help of the metadata obtained from the resultset. Sample output is shown in Listing 2.</font></font></font></p> + +<pre class="eval">id: 1 +first_name: Sammy +last_name: Hamm +department: IT +title: Network Administrator +---------- +id: 2 +first_name: Nigel +last_name: Bitters +department: Finance +title: Accounting Manager +... +</pre> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">It’s clear to see that with just a few lines of code, we can easily take advantage of SQL data stores in JavaScript. The sample script in Listing 1 could be factored out to it’s own function to retrieve the set of employee information, or abstracted further into a more generic data handler class. Next we’ll take a look at another powerful feature in Rhino, E4X processing.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">E4X (ECMAScript for XML) is an extension of JavaScript which provides direct support for XML, greatly simplifying the process of consuming XML via JavaScript. Rhino’s support of this important standard eliminates the pain of using DOM or SAX based parsers in Java. Listing 3 below details a script used to process an RSS feed from the Mozilla website.</font></font></font></p> + +<pre class="eval">importPackage( java.net ); + +// connect to the remote resource +var u = new URL( "<a class="external" href="http://www.mozilla.org/news.rdf" rel="freelink">http://www.mozilla.org/news.rdf</a>" ); +var c = u.openConnection(); +c.connect(); + +// read in the raw data +var s = new java.io.InputStreamReader( c.getInputStream() ); +var b = new java.io.BufferedReader( s ); +var l, str = ""; + +while( ( l = b.readLine() ) != null ) { + // skip + if( l != "" ) { + str = str + l + "\n"; + } +} +// define the namespaces, first the default, +// then additional namespaces +default xml namespace = "<a class="external" href="http://purl.org/rss/1.0/" rel="freelink">http://purl.org/rss/1.0/</a>"; +var dc = new Namespace( "<a class="external" href="http://purl.org/dc/elements/1.1/" rel="freelink">http://purl.org/dc/elements/1.1/</a>" ); +var rdf = new Namespace( "<a class="external" href="http://www.w3.org/1999/02/22-rdf-syntax-ns#" rel="freelink">http://www.w3.org/1999/02/22-rdf-syntax-ns#</a>" ); + +// use e4x to process the feed +var x = new XML( str ); +for each( var i in x..item ) { + print( "Title: " + i.title + "\n" ); + print( "About: " + i.@rdf::about + "\n" ); + print( "Link: " + i.link + "\n" ); + print( "Date: " + i.dc::date + "\n" ); +} +</pre> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">The first half of this script is standard Java code used to retrieve the feed data. After the asset is retrieved and stored in a string, the proper namespaces are defined for this particular resource. The default namespace is defined along with two others, in particular <strong>dc</strong> and <strong>rdf</strong>. Defining these namespaces becomes important if we want to be able to access any data elements in the feed defined in these namespaces. </font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">The act of creating an E4X object is quite simple, in the case of Listing 3, we do this through the line</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Courier New, monospace"><font size="2">var x = new XML( str );</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">From here, the XML is accessible via dot notation. Notice during the processing of the <em>item</em> element where we use the <em>rdf</em> and <em>dc</em> namespace to access the <em>about</em> attribute of the <em>item</em> element, and the <em>date</em> element respectively. The syntax for accessing E4X objects is actually quite natural and certainly easier than most methods.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">JavaScript engines such as Rhino and SpiderMonkey on their own have proven to be a useful and powerful tool to the developer. However, taking advantage of frameworks such as Aptana Jaxer (SpiderMonkey) and Helma (Rhino) can reveal even greater rewards as a great deal of work has already been done for you. All you need to do is implement the JavaScript. Let’s take a closer look on the SpiderMonkey side with Jaxer.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">As stated earlier, Aptana Jaxer is built using the Mozilla Browser Engine engine that powers Mozilla Firefox, which includes SpiderMonkey as its JavaScript interpreter, but lots more features beyond SSJS alone such as DOM, DB, File IO, CSS, server sessions, E4X, etc...] This is a great advantage to the developer as it presents a consistent server-side and client-side development environment for both browser and server contexts that is centered on open source and Web standards. Also since you know which engine you're targeting, you're free to confidently use advanced built in controls such as XML processing via E4X, XPath, and XSLT. Let's take a tour through some of the top features of Jaxer through code examples.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><strong><font size="4">Jaxer – Server-Side Ajax via the Firefox Browser Engine on the server</font></strong></font></font></font> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Although server-side JavaScript is not a new concept, Jaxer implements it in a unique fashion. By taking advantage of current ScriptMonkey and Ajax capabilities not to mention the loads of other features packed into the Mozilla Firefox Browser Engine, Aptana Jaxer fuses the client-side with the server-side, creating a unified “same language” development platform. Where once you would need to master not only JavaScript for the client-side but also some flavor of a server-side Web language, Jaxer puts all the rich capability of a server-side language into JavaScript. This accounts for added simplicity and promotes rapid development methodologies.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><strong>Managing Context</strong></font></font></font> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">To take advantage of all the operating contexts of Jaxer, you'll need to specify how your scripts should behave using the runat attribute of the script tag (or by setting a runat property on a JavaScript function object). The common values for this attribute are explained below, though there are more than just these.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<ul> + <li> + <p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><strong>runat=”client”</strong> – Code contained in this block is restricted to execution client-side, which is also what happens if no <font face="Courier New">runat</font> attribute is specified.</font></font></font></p> + </li> + <li> + <p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><strong>runat=”server”</strong> – Code contained in this block is restricted to execution server-side.</font></font></font></p> + </li> + <li> + <p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><strong>runat=”both”</strong> – Code may be invoked on the client or server side.</font></font></font></p> + </li> + <li> + <p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><strong>runat=”server-proxy”</strong> – Allows for the exposure of server-side JavaScript functions to the browser. Jaxer manages Ajax calls behind the scenes to accomplish this.</font></font></font></p> + </li> +</ul> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">While most of the <font size="2"><font face="Courier New, monospace">runat</font></font> attribute values above are self explanatory, the <font size="2"><font face="Courier New">server-proxy</font></font> concept is best explained through example. Consider the code in Listing 4.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in; font-style: normal;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Listing 4 - Demonstration of server and client context</font></font></font></p> + +<pre class="eval"><script runat="server"> +function exposed() { + return "exposed to the browser"; +} + +function notExposed() { + return "can't see me!"; +} +</script> + + +<script runat="client"> +alert( exposed() ); +alert( notExposed() ); +</script> +</pre> + +<p><span style="font-family: courier new;">There are two blocks of scripts defined, one with runat set to server and the other set to client. This creates a strict separation of the two environments. As it stands, the code in the client block would throw an error since the server-side JavaScript is not within scope. If you intend to allow the execution of server-side JavaScript from the client-side, you can correct the code in listing 1 by doing one of three things.</span></p> + +<ol> + <li> + <p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Change the <font size="2"><font face="Courier New">runat</font></font> attribute value of <font face="Courier New">server</font> to <font face="Courier New">server-proxy</font>.</font></font></font></p> + </li> + <li> + <p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Add a statement inside the server-side script block to expose a particular server-side function to the browser. This statement is of the form<em> <strong><functionName></strong></em><strong>.proxy = true</strong>.</font></font></font></p> + </li> + <li> + <p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Ensure the server-side function name is contained within the <strong>Jaxer.proxies </strong>array.</font></font></font></p> + </li> +</ol> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Generally it's a best practice to use either the second or third strategy since in this case you are exposing only what's needed to the client. See Listing 5 for an update to Listing 1 to reflect this.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Listing 5 - Demonstration of server-proxy</font></font></font></p> + +<pre class="eval"><script runat="server"> +function notExposed() { + // runs on the server, hidden from the browser + return "can't see me!"; +} + +function exposed() { + // runs on the server, callable from the browser + return "exposed to the browser"; +} +exposed.proxy = true; // tell Jaxer this function is ok to be called from the browser +</script> + +<script runat="client" type="text/javascript"> +alert( exposed() ); //works like a charm +alert( notExposed() ); //produces an object not found error since it server-side only +</script> +</pre> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Understanding the concept of operating context in Jaxer is central to moving forward with the example application which is what we'll examine next.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="4"><strong>Jaxer – Example Application</strong></font></font></font> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">The example application consists of a simple form used to accept comments from public users and was built to cover some of the most useful Jaxer features. The example application is running under Jaxer build 0.9.7.2472 and also incorporates the ExtJS version 2.1 JavaScript framework for user interface controls. For more information how to obtain and install these products, refer to the resources section.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><strong>Single Page Applications</strong></font></font></font> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">The first feature the application demonstrates is the concept of a single page application. Since Jaxer allows you to define which code is reserved for the server-side, which code stays on the client-side, and which code is shared between the two, it's very possible to produce a single page application which could also include any number of external assets such as a popular third party framework. Listing 6 shows the beginning of our application which takes advantage of some of these concepts.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Listing 6 - Creating the User Interface</font></font></font></p> + +<pre><link href="/jaxer_examples/js/ext-2.1/resources/css/ext-all.css" type="text/css" rel="stylesheet"/> +<script src="/jaxer_examples/js/ext-2.1/adapter/ext/ext-base.js"/> +<script src="/jaxer_examples/js/ext-2.1/ext-all.js"/> + +<link href="/jaxer_examples/css/main.css" type="text/css" rel="stylesheet"/> + +<script runat="both" src="/jaxer_examples/js/validateComments.js"/> + +<script> +var txt_name; +var txt_email; +var txt_message; +var btn_comments; +var form_comments; + +Ext.onReady( function() { + // create the name text field + txt_name = new Ext.form.TextField({ + name: "name", + fieldLabel: "Name", + width: 200 + }); + + // create the e-mail text field + txt_email = new Ext.form.TextField({ + name: "email", + fieldLabel: "E-mail", + width: 200 + }); + + // create the message text field + txt_message = new Ext.form.TextArea({ + name: "message", + fieldLabel: "Message", + width: 200 + }); + + // create a button used to send the form details. + btn_comments = new Ext.Button({ + text: "Submit", + fieldLabel: "", + handler: formHandler + }); + +// create the form panel, attach the inputs +form_comments = new Ext.form.FormPanel({ + labelAlign: "right", + width: 400, + title: "Comments", + items: [ + txt_name, + txt_email, + txt_message, + btn_comments + ], + renderTo: "form-comments" + }); + +}); +</script> + + + +</pre> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">The code in Listing 6 starts by hooking in the Ext JS library which is used to produce the UI elements of the form. Next a script named <em>validateComments.js</em> is hooked in with the <font face="Courier New">runat</font> attribute set to <font face="Courier New">both</font>. The function defined within this file checks the form to make sure it is complete, returning a boolean. The <font face="Courier New">both</font> context it operates within is a very powerful concept as we are able to use this code to check values entered in the form on both the client and server side. No custom validation libraries for each environment makes for rapid development with less risk for error. </font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Towards the bottom of the code are two div tags with ids <strong>form-comments</strong> and <strong>out-logger</strong>. The <strong>form-comments</strong> div is used to render the form and the <strong>out-logger</strong> will be used as a log display as each comment is added. The completed user interface is shown in Figure 1.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Figure 1 – The user interface</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> <img alt="ui.png" class="default internal" src="/@api/deki/files/2878/=ui.png" style="height: 482px; width: 619px;"></p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><strong>Server-Side DOM Processing</strong></font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Another powerful concept of Jaxer is the ability to access the DOM server-side with JavaScript. This gives you added control to interrogate and manage the document structure before it's pushed to the client. Listing 7 contains the code which demonstrates this concept.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Listing 7 - Manipulating the DOM server-side</font></font></font></p> + +<pre class="eval"><script runat="server"> + window.onserverload = function() { + document.getElementById( "out-logger" ).innerHTML = Jaxer.File.read( "dump.txt" ); + } +</script></pre> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">The code in listing 7 is executed server-side and takes advantage of the <font face="Courier New">onserverload</font> event which ensures that we have a complete DOM before trying to access it. This code is simple in that it updates the <font face="Courier New">innerHTML</font> of the logging div with the contents of a text file. The contents of this file are obtained through the file I/O capabilities exposed by Jaxer which is what we'll examine next.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><strong>File I/O</strong></font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Jaxer ships with a comprehensive filesystem I/O capability that is very useful. There are numerous methods in this namespace which allow for a simple, yet powerful approach to file management. The example application uses this capability to log comments submitted by the form to a plain text file named <em>dump.txt</em>. Listing 8 shows the two functions used to handle the comment submission process. </font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Listing 8 - Submitting Comment Data</font></font></font></p> + +<pre class="eval"><script> +function formHandler() { + +// get the form values + var name = txt_name.getValue(); + var email = txt_email.getValue(); + var message = txt_message.getValue(); + + // if the form passes validation client-side, submit results to the processor + if( validateComments( name, email, message ) ) { + formProcessor( name, email, message ); + // update the logger with the most recent entry + document.getElementById( "out-logger" ).innerHTML += "name: " + name + "<br/>email: " + email + "<br/>message: " + message + "<br/><br/>"; + } else { + Ext.Msg.alert( "Error", "Please enter the required fields" ); + } +} +</script> + +<!-- processes the form contents --> +<script runat="server"> +function formProcessor( name, email, message ) { + // perform the same validation of the data server-side + if( !validateComments( name, email, message ) ) { + throw "Incomplete data was submitted."; + } + // assemble the string + var s = "name: " + name + "<br/>" + + "email: " + email + "<br/>" + + "message: " + message + "<br/><br/>"; + // append the entry to the log file + Jaxer.File.append( "dump.txt", s ); +} +formProcessor.proxy = true; +</script> + +</pre> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">The first function, <strong>formHandler</strong>, performs some first-level validation using the <strong>validateComments</strong> function. If it passes validation, the <strong>formProcessor</strong> server-side function is invoked which does the same validation check using the shared <strong>validateComments</strong> function. Finally, the comment information is assembled into a string and appended to the dump file. </font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><strong>Database Access</strong></font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">For more robust data management, Jaxer comes with the ability to manage data in either a SQLite database which is included in Jaxer, or a mySQL database, and is extensible to others. Much like the file I/O namespace, database access in Jaxer can be as simple or complicated as you want or need it to be. For debugging, Jaxer will also send database errors to the client if you want.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Upgrading the example application to include database access requires just a few lines of code added to the <strong>formProcessor</strong> method. Listing 9 demonstrates these changes.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Listing 9 - Jaxer database access</font></font></font></p> + +<pre class="eval"><script runat="server"> +function formProcessor( name, email, message ) { + + // perform the same validation of the data server-side + if( !validateComments( name, email, message ) ) { + throw "Incomplete data was submitted."; + } + + // assemble the string + var s = "name: " + name + "<br/>" + + "email: " + email + "<br/>" + + "message: " + message + "<br/><br/>"; + + // append the entry to the log file + Jaxer.File.append( "dump.txt", s ); + + // add support for management via database + Jaxer.DB.execute( "create table if not exists comments ( id integer primary key auto_increment, " + + "name varchar(50) not null, " + + "email varchar(255) not null, " + + "message varchar(300) not null )" ); + + Jaxer.DB.execute( "insert into comments ( name, email, message ) values ( ?, ?, ? )", [ name, email, message ] ); + +} + +formProcessor.proxy = true; +</script></pre> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">The first statement which uses the <strong>Jaxer.DB</strong> namespace creates a new database table in the default SQLite database if it doesn't already exist. You can see the field names and data types which make sense for the type of data that's been added. The second statement is just a simple insert statement using the data obtained from the form. Placeholders in the form of '?' are used to match up the argument values with their proper position in the insert statement.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><strong>XML Processing</strong></font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">The final feature we'll explore is XML processing with a particular emphasis first on the capability to create a simple XML service on the server-side, then use the E4X capabilities to processes it.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Listing 10 demonstrates the configuration of a simple service we're able to advertise through Jaxer using the data from the database we captured from prior form submissions.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Listing 10 - Creating a simple XML service</font></font></font></p> + +<pre class="eval"> +<script runat="server"> +var rs_comments = Jaxer.DB.execute("SELECT * FROM Comments"); +var doc = document.implementation.createDocument('', 'comments', null); +var root = doc.documentElement; +rs_comments.rows.forEach(function(row, index) +{ +if (true || index < 10) +{ +var node = doc.createElement('comment'); +node.setAttribute('id', row.id); +node.setAttribute('name', row.name); +node.setAttribute('message', row.message); +root.appendChild(node); +} +}); +Jaxer.response.exit(200, doc); +</script> </pre> + +<p>The data from the database is represented in XML format as follows:</p> + +<pre><comments> <comment message="”Jaxer" name="”Nigel" id="”1”"></comment> ... more comments ... </comments> +</pre> + +<p>Now that we've created this simple XML feed, we can now also consume it using the code from Listing 11.</p> + +<p>Listing 11 - Consuming the XML feed</p> + +<pre class="eval"><script runat="server"> +var r = Jaxer.Web.get("service.html", {as: 'e4x'}); +for (var i=0, len = r.comment.length(); i<len; i++) { + var comment = r.comment[i]; + document.write('id: ' + comment.@id + '<br/>'); + document.write('name: ' + comment.@name + '<br/>'); + document.write('message: ' + comment.@message + '<br/>'); + document.write('<hr/>'); +} +</script></pre> + +<p> <font color="#000000"><font face="Times New Roman, serif"><font size="3">The code in Listing 11 is very simple. First a call to get the XML feed is made using the <strong>get</strong> method from the <strong>Jaxer.Web</strong> namespace, using the option that requests the response as a new E4X object. The comment nodes are looped over with data output using the simplified E4X syntax. </font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">Out of all the features we looked at, this one has to be my favorite. To be able to use Jaxer to essentially create an XML based RESTful service in JavaScript is useful and shifts a great deal of power to the JavaScript developer.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="4"><strong>Conclusion</strong></font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3">JavaScript can be successfully used for full <span lang="en-US"><font size="3"><font color="#000000">application</font></font></span> development on both the client <span lang="en-US"><font size="3"><font color="#000000">and</font></font></span> server, fulfilling Netscape's original vision for a single, unified language for the Web that makes apps easier to develop and maintain. Advances such as Ajax and running Ajax on the server side with the Jaxer server boosted by today's faster JavaScript engines and radically faster ones like TraceMonkey to come from Mozilla, sets the stage for significant use of server-side JavaScript now.</font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="4"><strong>Resources</strong></font></font></font></p> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<ul> + <li> + <p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><font color="#000080"><u><a href="/../../../../En/SpiderMonkey" title="../../../../En/SpiderMonkey">Mozilla SpiderMonkey</a></u></font></font></font></font></p> + </li> + <li> + <p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><font color="#000080"><u><a class="external" href="http://www.mozilla.org/rhino">Mozilla Rhino</a></u></font></font></font></font></p> + </li> + <li> + <p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><font color="#000080"><u><a href="/ServerJS" title="https://developer.mozilla.org/ServerJS">ServerJS discussion on proposed Common API for SSJS</a></u></font></font></font></font></p> + </li> + <li> + <p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><font color="#000080"><u><a class="external" href="http://en.wikipedia.org/wiki/SSJS">SSJS (Server Side JavaScript) at Wikipedia.com</a></u></font></font></font></font></p> + </li> + <li> + <p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><font color="#000080"><u><a class="external" href="http://www.aptana.com/jaxer">Aptana Jaxer</a></u></font></font></font></font></p> + </li> + <li> + <p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><font color="#000080"><u><a class="external" href="http://www.aptana.com/jaxer/book">Aptana Jaxer Documentation</a></u></font></font></font></font></p> + </li> + <li> + <p lang="en-US" style="margin-bottom: 0in;"><font color="#000000"><font face="Times New Roman, serif"><font size="3"><font color="#000080"><u>Ext JS</u></font></font></font></font></p> + </li> +</ul> + +<p lang="en-US" style="margin-bottom: 0in;"> </p> + +<p> </p> diff --git a/files/fa/games/index.html b/files/fa/games/index.html new file mode 100644 index 0000000000..a9e2cf2853 --- /dev/null +++ b/files/fa/games/index.html @@ -0,0 +1,93 @@ +--- +title: توسعه بازی ها +slug: Games +translation_of: Games +--- +<div>{{GamesSidebar}}</div> + +<div class="summary"> +<p dir="rtl"><span class="seoSummary">بازی کردن یکی از پرطرفدارترین فعالیت های رایانه ای می باشد، به طور مداوم فناوری های جدیدی در حال ایجاد هستند تا امکان توسعه بازی های بهتر و قوی تری را فراهم آورند که میتوانند در هر مرورگر استاندارد و سازگاری اجرا شوند.</span><span style="display: none;"> </span></p> +</div> + +<div class="column-container"> +<div class="column-half"> +<h2 dir="rtl" id="توسعه_بازی_های_وب">توسعه بازی های وب</h2> + +<p dir="rtl">به مرکز توسعه بازی MDN خوش آمدید! در این ناحیه از سایت ما منابعی را برای برنامه نویسان وبی که قصد بازی سازی دارند فراهم آورده ایم. شما آموزش ها و مقالات تکنیکی را در منوی سمت اصلی در سمت چپ خواهید دید. پس با آزادی و راحتی شروع کنید به مرور کردن.</p> + +<p dir="rtl">همچنین ما بخشی برای منابع قرار داده ایم پس شما میتوانید به راحتی اطلاعاتی را درباره پرکاربرد ترین API هایی که در توسعه بازی استفاده میشود را پیدا کنید ، به علاوه لیست <a href="/en-US/docs/Games/Tools/Engines_and_tools">موتور ها و ابزار ها</a> و <a href="/en-US/docs/Games/Examples">بازی های نمونه</a>.</p> + +<div class="note"> +<p dir="rtl"><strong>توجه</strong>: قبل از اقدام برای ایجاد بازی های تحت وب شما باید حداقل در پایه تکنولوژي های وب مهارت داشته باشید،( از قبیل HTML, CSS و JavaScript). اگر شما مبتدی هستید میتوانید به <a href="/en-US/docs/Learn">بخش آموزش</a> مراجعه نمایید.</p> +</div> + +<dl> +</dl> +</div> + +<div class="column-half"> +<h2 dir="rtl" id="انتقال_بازی_ها_به_وب">انتقال بازی ها به وب</h2> + +<p dir="rtl">اگر شما یک بازی ساز هستید (یه عنوان نمونه نوشتن بازی در ++C) و علاقه مند به این هستید که بدانید چگونه میتوانید بازی های خود را به وب منتقل کنید، شما باید بیشتر درباره ابزار <a href="http://kripken.github.io/emscripten-site/index.html">Emscripten</a> یادبگرید. - این یک LLVM برای زبان JavaScript میباشدکه بایت کد های LLVM (که برای نمونه در ++C/C بوسیله Clang ایجاد شده اند، یا هر زبان دیگری) را گرفته و آن ها را به کد ها <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a> تبدیل مینماید که میتوانند در وب ایجاد شوند.</p> + +<p dir="rtl">برای شروع، مطالب زیر را مشاهده نمایید:</p> + +<ul dir="rtl"> + <li><a href="http://kripken.github.io/emscripten-site/docs/introducing_emscripten/about_emscripten.html">درباره Emscripten </a>برای معرفی و اطلاعات سطح بالاتر.</li> + <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html">دریافت و نصب</a> برای نصب زنجیره ابزار.</li> + <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/Tutorial.html">آموزش Emscripten</a> برای آموزش نحوه شروع کار با ابزار.</li> +</ul> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h2 dir="rtl" id="بازی_های_نمونه">بازی های نمونه</h2> + +<p dir="rtl">برای لیست بازی های نمونه، <a href="/en-US/docs/Games/Examples">صفحه مثال</a> های ما را ببینید. همچنین <a href="http://www.openwebgames.com/">openwebgames.com</a> را برای منابع بیشتر و مثال های مختلف بررسی نمایید.</p> +</div> +</div> + +<p><a href="http://www.openwebgames.com"><img alt="" src="https://mdn.mozillademos.org/files/12790/owg-logo-dark.svg" style="display: block; margin: 0px auto; width: 400px;"></a></p> + +<h2 dir="rtl" id="همچنین_ببینید">همچنین ببینید</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="http://buildnewgames.com/">Build New Games</a></dt> + <dd>A collaborative site featuring a large number of open web game development tutorials. Hasn't been very active recently, but still holds some nice resources.</dd> + <dt><a href="http://creativejs.com/">Creative JS</a></dt> + <dd>A collection of impressive JavaScript techniques and experiments, not specific to games, but helpful nonetheless. Hasn't been very active recently, but still holds some nice resources.</dd> + <dt><a href="http://gameprogrammingpatterns.com/">Game programming patterns</a></dt> + <dd>An online book, written by Bob Nystrom, which discusses programming patterns in the context of game development with the aim of helping game developers produce more effective, efficient code.</dd> + <dt><a href="http://blog.artillery.com/">Artillery blog</a></dt> + <dd>HTML5 games company Artillery have some useful articles on their blog.</dd> + <dt><a href="https://leanpub.com/buildinggamesforfirefoxos/">Building games for Firefox OS</a></dt> + <dd>A quick guide to creating 2D games with HTML5, for distribution on Firefox OS and other mobile platforms.</dd> + <dt><a href="http://gamedevjsweekly.com/">Gamedev.js Weekly</a></dt> + <dd>Weekly newsletter about HTML5 game development, sent every Friday. Contains the latest articles, tutorials, tools, and resources.</dd> + <dt><a href="http://www.html5gamedevs.com/">HTML5 Game Devs Forum</a></dt> + <dd>Forums for developers, framework creators and publishers. Ask questions, get feedback, help others.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="http://html5gameengine.com/">HTML5 Game Engine</a></dt> + <dd>List of the most popular HTML5 game frameworks along with their rating, features and samples.</dd> + <dt><a href="http://www.jsbreakouts.org/">JSBreakouts</a></dt> + <dd>Compare JavaScript Breakout clones in different frameworks to help you choose the right one for you.</dd> + <dt><a href="http://gamedevelopment.tutsplus.com/">Tuts+ Game Development</a></dt> + <dd>Tutorials and articles about game development in general.</dd> + <dt><a href="http://webchat.freenode.net/?channels=bbg">#BBG IRC chat</a></dt> + <dd>Talk with the developers directly in real time.</dd> + <dt><a href="http://html5devstarter.enclavegames.com/">HTML5 Gamedev Starter</a></dt> + <dd>Starter for the new game developers, a curated list of links to various, useful resources around the web.</dd> + <dt><a href="http://js13kgames.com/">js13kGames</a></dt> + <dd>JavaScript coding competition for HTML5 game developers with the file size limit set to 13 kilobytes. All the submitted games are available in a readable form on GitHub.</dd> + <dt><a href="https://hacks.mozilla.org/category/games/">Mozilla Hacks blog</a></dt> + <dd>Games category on the Mozilla Hacks blog containing interesting gamedev related articles.</dd> +</dl> +</div> +</div> diff --git a/files/fa/glossary/element/index.html b/files/fa/glossary/element/index.html new file mode 100644 index 0000000000..ac3e104ed2 --- /dev/null +++ b/files/fa/glossary/element/index.html @@ -0,0 +1,18 @@ +--- +title: Element +slug: Glossary/Element +translation_of: Glossary/Element +--- +<p dir="rtl">هر اِلِمِنت(<strong>element</strong>) بخشی از یک صفحهی وب است. در <a class="glossaryLink" href="/en-US/docs/Glossary/XML" title="XML: eXtensible Markup Language (XML) is a generic markup language specified by the W3C. The information technology (IT) industry uses many languages based on XML as data-description languages.">XML</a> و <a class="glossaryLink" href="/en-US/docs/Glossary/HTML" title="HTML: HTML (HyperText Markup Language) is a descriptive language that specifies webpage structure.">HTML</a> هر المنت میتواند حاوی نوعی data، یا چند خط متن، یا یک تصویر، یا حتی خالی باشد. یک المنت در حالت عادی با یک تگ آغازین(opening tag) و چند صفت(<a class="glossaryLink" href="/en-US/docs/Glossary/attribute" title="attributes: An attribute extends a tag, changing its behavior or providing metadata.">attribute</a>) شروع میشود، متنی را در خود جای داده و سپس با تگ پایانی بسته(closing tag) میشود.</p> + +<p dir="rtl"><img alt="مثال: در <p class="nice">Hello world!</p>، '<p class="nice">' همان تگ آغازین میباشد. 'class="nice"' یک صفت به همراه مقدار مخصوص به خود است. 'Hello world!' محتوای متنی این المنت است که داخل تگ آغازین و پایانی محصور شده. '</p>' تگ پایانی میباشد." src="https://media.prod.mdn.mozit.cloud/attachments/2020/08/29/17378/9f32289c970c81ca84ca4104b9a3e258/anatomy-of-an-html-element-fa.png" style="height: 181px; width: 609px;"></p> + +<p dir="rtl">المنت و تگ(<a class="glossaryLink" href="/en-US/docs/Glossary/tag" title="tags: In HTML a tag is used for creating an element. The name of an HTML element is the name used in angle brackets such as <p> for paragraph. Note that the end tag's name is preceded by a slash character, "</p>", and that in empty elements the end tag is neither required nor allowed. If attributes are not mentioned, default values are used in each case.">tag</a>) به دو مفهوم مجزا اشاره میکنند و کاملاً با هم متفاوتند. تگها، شروع و پایان هر المنت را نشان میدهند، در حالی که هر المنت بخشی از <a class="glossaryLink" href="/en-US/docs/Glossary/DOM" title="DOM: The DOM (Document Object Model) is an API that represents and interacts with any HTML or XML document. The DOM is a document model loaded in the browser and representing the document as a node tree, where each node represents part of the document (e.g. an element, text string, or comment).">DOM</a> (مجموعهای از تمام المنتها که <a class="glossaryLink" href="/en-US/docs/Glossary/browser" title="browser: A Web browser or browser is a program that retrieves and displays pages from the Web, and lets users access further pages through hyperlinks. A browser is the most familiar type of user agent.">browser</a>ها برای نمایش سایت از آن استفاده میکنند) میباشد.</p> + +<h2 dir="rtl" id="مطالب_مرتبط">مطالب مرتبط</h2> + +<ul dir="rtl"> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">شروع کار با HTML</a></li> + <li><a href="/en-US/docs/Web/Web_Components/Using_custom_elements">تعریف المنت دلخواه</a></li> + <li>کلاس المنت({{domxref("Element")}})، نمایندهی المنتهای داخل DOM.</li> +</ul> diff --git a/files/fa/glossary/index.html b/files/fa/glossary/index.html new file mode 100644 index 0000000000..8e1c81312d --- /dev/null +++ b/files/fa/glossary/index.html @@ -0,0 +1,45 @@ +--- +title: Glossary +slug: Glossary +tags: + - Beginner + - Glossary + - Index + - Landing + - NeedsTranslation + - TopicStub +translation_of: Glossary +--- +<div style="width: 44%; float: right; margin: 4px 0 .5em 1em; line-height: 1.4;">{{LearnBox({"title":"Learn a new term:"})}}</div> + +<p class="summary" style="padding-top: 0; border-top-width: 0;"><span class="seoSummary">Web technologies contain long lists of jargon and abbreviations that are used in documentation and coding. This glossary provides definitions of words and abbreviations you need to know to successfully understand and build for the web.</span></p> + +<h2 id="Glossary_of_Terms"><strong>Glossary of Terms</strong></h2> + +<p>{{GlossaryList({"split": "h3", "css": "multiColumnList"})}}</p> + +<h2 id="Contribute_to_the_glossary">Contribute to the glossary</h2> + +<p>This glossary is a never ending work in progress. You can help improving it by <a href="/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">writing new entries</a> or by making the existing ones better. The easiest way to start is to hit the following link or to pick one of the suggested terms below.</p> + +<p><strong><a href="/en-US/docs/new?parent=4391">Add a new entry to the glossary</a></strong></p> + +<p>{{GlossaryList({"terms":["at-rule", "ALPN", "Attack", "Byte-Order Mark", "client", "Character set", "cryptosystem", "debug", "digital signature", "execution", "flex-direction", "GLSL", "Interface", "Library", "Memory management", "routers", "Self-Executing Anonymous Function", "Stylesheet", "Vector image"], "filter": "notdefined", "css": "multiColumnList"})}}</p> + +<p>If you want to know more on how to contribute to the glossary, check out <a href="/en-US/docs/MDN/Doc_status/Glossary">the glossary documentation status page</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/MDN/Community">Join the MDN community</a></li> +</ul> + +<div class="hidden"> +<h2 id="Subnav">Subnav</h2> + +<section id="Quick_Links"> +<ol> + <li><strong><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a></strong>{{ListSubpagesForSidebar("/en-us/docs/Glossary", 1)}}</li> +</ol> +</section> +</div> diff --git a/files/fa/glossary/loop/index.html b/files/fa/glossary/loop/index.html new file mode 100644 index 0000000000..5dd5de8f9a --- /dev/null +++ b/files/fa/glossary/loop/index.html @@ -0,0 +1,18 @@ +--- +title: حلقه +slug: Glossary/loop +tags: + - حلقه +translation_of: Glossary/loop +--- +<p dir="rtl">حلقه در اصطلاح {{Glossary("برنامه نویسی کامپیوتر")}}، عبارت از سلسله دستوراتی است که به طور مداوم تکرار شده تا به یک قید یا شرط مشخص برسد. به طور مثال، مراحل گرفتن مقداری از داده ها و تغییر دادن آن، و سپس مطمئن شدن از اینکه قید یا {{Glossary("شرط")}} مشخص شده بررسی شده باشد، برای نمونه، وقتی یک شمارشگر به شماره تعیین شده برسد. </p> + +<h2 id="بیشتر_بدانید">بیشتر بدانید</h2> + +<h3 id="معلومات_عمومی">معلومات عمومی</h3> + +<ul> + <li>{{interwiki("wikipedia", "Control_flow#Loops","Control flow")}} on Wikipedia</li> +</ul> + +<h3 id="sect1"> </h3> diff --git a/files/fa/glossary/protocol/index.html b/files/fa/glossary/protocol/index.html new file mode 100644 index 0000000000..d3e1723ac9 --- /dev/null +++ b/files/fa/glossary/protocol/index.html @@ -0,0 +1,25 @@ +--- +title: پروتکل +slug: Glossary/Protocol +translation_of: Glossary/Protocol +--- +<p id="Summary">پروتکل</p> + +<p> </p> + +<p>.مجموعه ای از قوانینی که چگونگی ارتباط بین داده ها با کامپیوترها را تعریف میکند.</p> + +<p> ارتباط میان دستگاه های ارتباطی زمانی صورت میگیرد که فرمت داده ها ی منتقل شده برای هر یک از این دستگاه ها قابل قبول باشد و مجموعه ی این قوانین پروتکل نام دارد</p> + +<p> </p> + +<p>Learn more</p> + +<h3 id="General_Knowledge">General Knowledge</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Communications protocol")}} on Wikipedia</li> + <li><a href="http://www.rfc-editor.org/search/standards.php">RFC Official Internet Protocol Standards</a></li> +</ul> + +<p> </p> diff --git a/files/fa/glossary/prototype-based_programming/index.html b/files/fa/glossary/prototype-based_programming/index.html new file mode 100644 index 0000000000..49c5a5a5b0 --- /dev/null +++ b/files/fa/glossary/prototype-based_programming/index.html @@ -0,0 +1,16 @@ +--- +title: Prototype-based programming +slug: Glossary/Prototype-based_programming +translation_of: Glossary/Prototype-based_programming +--- +<p><strong>Prototype-based programming</strong> نوعی از {{Glossary("OOP", "برنامه نویسی شی گرایی")}} که در آن {{Glossary('Class', 'کلاسها')}} به صراحت تعریف نشده اند, <span class="tlid-translation translation" lang="fa"><span title=""> بلکه با افزودن ویژگی ها و روش ها به نمونه ای از کلاس دیگر یا ، حتی با اضافه کردن آنها به یک شیء خالی مشتق می شوند.</span></span><br> + <br> + به زبان ساده تر: این نوع از سبک اجازه میدهد {{Glossary('object', 'شی')}} ایجاد شود، بدون تعریف {{Glossary('Class', 'کلاس')}}.</p> + +<h2 id="Learn_More">Learn More</h2> + +<h3 id="General_knowledge">General knowledge</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Prototype-based programming", "Prototype-based programming")}} on Wikipedia</li> +</ul> diff --git a/files/fa/html/attributes/index.html b/files/fa/html/attributes/index.html new file mode 100644 index 0000000000..70c73bc06b --- /dev/null +++ b/files/fa/html/attributes/index.html @@ -0,0 +1,607 @@ +--- +title: مرجع صفتهای HTML +slug: HTML/Attributes +translation_of: Web/HTML/Attributes +--- +<p dir="rtl">عنصرها در HTM <strong>صفتها</strong>یی دارند؛ اینها مقادیر اضافهای هستند که عنصرها را پیکربندی میکنند یا رفتار آنها را در راههای گستردهای بهصورت مناسب با شرایطی که کاربران میخواهند تطبیق میدهند.</p> +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th style="text-align: center;">نام صفت</th> + <th style="text-align: center;">عنصرها</th> + <th style="text-align: center;">توضیح</th> + </tr> + </thead> + <tbody> + <tr> + <td style="text-align: center;">accept</td> + <td style="text-align: center;">{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td style="text-align: right;">فهرست انواعی که سرور قبول میکند، معمولا از نوع فایل.</td> + </tr> + <tr> + <td style="text-align: center;">accept-charset</td> + <td style="text-align: center;">{{ HTMLElement("form") }}</td> + <td style="text-align: right;">فهرستی از مجموعه کاراکترهای پشتیبانی شده.</td> + </tr> + <tr> + <td style="text-align: center;">accesskey</td> + <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td style="text-align: right;">تعیین کلید میانبری از صفحهکلید جهت فعالسازی یا افزودن focus به عنصر مورد نظر.</td> + </tr> + <tr> + <td style="text-align: center;">action</td> + <td style="text-align: center;">{{ HTMLElement("form") }}</td> + <td style="text-align: right;">نشانی فایلی که قرار است اطلاعات ارسالی از فرم را پردازش کند.</td> + </tr> + <tr> + <td style="text-align: center;">align</td> + <td style="text-align: center;">{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td> + <td style="text-align: right;">تنظیمات مربوط به چینش عنصر را تعیین میکند.</td> + </tr> + <tr> + <td style="text-align: center;">alt</td> + <td> + <p style="text-align: center;">{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</p> + </td> + <td style="text-align: right;">متن جایگزین تصویر، زمانی که تصویر قابل نمایش نباشد.</td> + </tr> + <tr> + <td style="text-align: center;">async</td> + <td style="text-align: center;">{{ HTMLElement("script") }}</td> + <td style="text-align: right;">نشاندهندهی این است که اسکریپت باید به صورت نامتقارن اجرا شود.</td> + </tr> + <tr> + <td style="text-align: center;">autocomplete</td> + <td style="text-align: center;">{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td style="text-align: right;">نشاندهندهی این است که آیا کنترلهای موجود در این فرم قابلیت اختیار مقادیر پیشفرض مرورگر را دارند یا خیر.</td> + </tr> + <tr> + <td style="text-align: center;">autofocus</td> + <td style="text-align: center;">{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td style="text-align: right;">بعد از بارگذاری صفحه، عنصر مورد نظر focus را به خود میگیرد.</td> + </tr> + <tr> + <td style="text-align: center;">autoplay</td> + <td style="text-align: center;">{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td style="text-align: right;">پخش صوت یا تصویر به محض آماده شدن.</td> + </tr> + <tr> + <td style="text-align: center;">bgcolor</td> + <td style="text-align: center;">{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td> + <td style="text-align: right;"> + <p>رنگ پیشزمینهی عنصر.</p> + <p>یادداشت: این یک صفت قدیمی است که باید از ویژگی {{ Cssxref("background-color") }} در CSS به جای آن استفاده کرد.</p> + </td> + </tr> + </tbody> + <tbody> + <tr> + <td style="text-align: center;">border</td> + <td style="text-align: center;">{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td> + <td> + <p style="text-align: right;">نشاندهندهی حاشیهی عنصر مورد نظر.</p> + <p style="text-align: right;">یادداشت: این یک صفت قدیمی است که باید از ویژگی {{ Cssxref("border") }} در CSS به جای آن استفاده کرد.</p> + </td> + </tr> + <tr> + <td style="text-align: center;">buffered</td> + <td style="text-align: center;">{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td style="text-align: right;">شامل بازهی زمانی است که محتوای مورد نظر در آن بازه بافر شده است.</td> + </tr> + <tr> + <td style="text-align: center;">challenge</td> + <td style="text-align: center;">{{ HTMLElement("keygen") }}</td> + <td style="text-align: right;">رشتهای از حروف که به همراه کلید عمومی ارسال میشود.</td> + </tr> + <tr> + <td style="text-align: center;">charset</td> + <td style="text-align: center;">{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td> + <td style="text-align: right;">نوع کدگذاری کاراکترهای موجود در صفحه یا اسکریپت را تعیین میکند.</td> + </tr> + <tr> + <td style="text-align: center;">checked</td> + <td style="text-align: center;">{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td> + <td style="text-align: right;">نشاندهندهی این است که آیا عنصر مورد نظر در زمان بارگذاری صفحه باید انتخاب شود یا خیر.</td> + </tr> + <tr> + <td style="text-align: center;">cite</td> + <td style="text-align: center;">{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td> + <td style="text-align: right;">به نشانی منبع نقل قول اشاره میکند.</td> + </tr> + <tr> + <td style="text-align: center;">class</td> + <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td style="text-align: right;">اغلب به همراه CSS به کار میرود تا عنصرهایی با ویژگیهای مشترک را سبکدهی کند.</td> + </tr> + <tr> + <td style="text-align: center;">code</td> + <td style="text-align: center;">{{ HTMLElement("applet") }}</td> + <td style="text-align: right;">نشانی فایل با پیشوند class که اپلت برای بارگذاری و اجراشدن به آن نیاز دارد را، شامل میشود.</td> + </tr> + <tr> + <td style="text-align: center;">codebase</td> + <td style="text-align: center;">{{ HTMLElement("applet") }}</td> + <td style="text-align: right;">این صفت نشانی مطلق یا نسبی دایرکتوری که فایلهای با پیشوند class مورد نیاز اپلت هستند، را شامل میشود.</td> + </tr> + <tr> + <td style="text-align: center;">color</td> + <td style="text-align: center;">{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td> + <td> + <p style="text-align: right;">این صفت رنگ متن را با توجه به دو الگوی "نام رنگ" یا "مقدار هگزادسیمال رنگ" مشخص میکند.</p> + <p style="text-align: right;">یادداشت: این یک صفت قدیمی است که باید از ویژگی {{ Cssxref("color") }} در CSS به جای آن استفاده کرد.</p> + </td> + </tr> + <tr> + <td style="text-align: center;">cols</td> + <td style="text-align: center;">{{ HTMLElement("textarea") }}</td> + <td style="text-align: right;">تعداد ستونهای ناحیهی متنی را مشخص میکند.</td> + </tr> + <tr> + <td style="text-align: center;">colspan</td> + <td style="text-align: center;">{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td style="text-align: right;">تعداد ستونهای یک سلول (خانه) از جدول را مشخص میکند.</td> + </tr> + <tr> + <td style="text-align: center;">content</td> + <td style="text-align: center;">{{ HTMLElement("meta") }}</td> + <td style="text-align: right;">مقداری که منطبق با <code>http-equiv</code> یا <code>name</code> است.</td> + </tr> + <tr> + <td style="text-align: center;">contenteditable</td> + <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td style="text-align: right;">نشاندهندهی این است که آیا محتوای عنصر قابل ویرایش هستنند یا خیر.</td> + </tr> + <tr> + <td style="text-align: center;">contextmenu</td> + <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td style="text-align: right;">ID یک {{ HTMLElement("menu") }} را به عنوان منو تعیین میکند.</td> + </tr> + <tr> + <td style="text-align: center;">controls</td> + <td style="text-align: center;">{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td style="text-align: right;">نشاندهندهی این است که آیا مرورگر دکمههای کنترل فایل صوتی یا تصویری را باید نشان بدهد یا خیر.</td> + </tr> + <tr> + <td style="text-align: center;">coords</td> + <td style="text-align: center;">{{ HTMLElement("area") }}</td> + <td style="text-align: right;">مجموعهای از مقادیر که نشاندهندهی مختصات ناحیهی مورد نظر هستند.</td> + </tr> + <tr> + <td style="text-align: center;">data</td> + <td style="text-align: center;">{{ HTMLElement("object") }}</td> + <td style="text-align: right;">نشانی منبع مورد نیاز را تعیین میکند.</td> + </tr> + <tr> + <td style="text-align: center;">datetime</td> + <td style="text-align: center;">{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td> + <td style="text-align: right;">نشاندهندهی تاریخ و زمان به کار رفته در عنصر مورد نظر است.</td> + </tr> + <tr> + <td style="text-align: center;">default</td> + <td style="text-align: center;">{{ HTMLElement("track") }}</td> + <td style="text-align: right;">نشاندهندهی این است که track قبل از اینکه تنظیمات کاربر تغییر کند، باید فعال شود.</td> + </tr> + <tr> + <td style="text-align: center;">defer</td> + <td style="text-align: center;">{{ HTMLElement("script") }}</td> + <td style="text-align: right;">نشاندهندهی این است که اسکریپت بلافاصله بعد از بارگذاری و تفسیر صفحه باید اجرا شود.</td> + </tr> + <tr> + <td style="text-align: center;">dir</td> + <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td style="text-align: right;">جهت نوشتهشدن متن را مشخص میکند. مقادیر قابل قبول عبارتند از ltr (چپ به راست)و rtl (راست به چپ)</td> + </tr> + <tr> + <td style="text-align: center;">dirname</td> + <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">disabled</td> + <td style="text-align: center;">{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td style="text-align: right;">نشاندهندهی این است که آیا کاربر امکان تعامل با عنصر مورد نظر را دارد یا خیر.</td> + </tr> + <tr> + <td style="text-align: center;">draggable</td> + <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td style="text-align: right;">قابلیت کشیدهشدن عنصر (کلیک بر روی آن و حرکت دادنش) را تعیین میکند.</td> + </tr> + <tr> + <td style="text-align: center;">dropzone</td> + <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td style="text-align: right;">ناحیهای که عنصر کشیدهشده را میتوان در آن رها (drop) کرد.</td> + </tr> + <tr> + <td style="text-align: center;">enctype</td> + <td style="text-align: center;">{{ HTMLElement("form") }}</td> + <td style="text-align: right;">وقتی از <code>method</code> ای مانند POST برای ارسال مقادیر فرم استفاده میشود، این صفت نوع محتوای دادهای را در فرم تعیین میکند.</td> + </tr> + <tr> + <td style="text-align: center;">for</td> + <td style="text-align: center;">{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td style="text-align: right;">تعیین عنصرهایی که به عنصر مورد نظر تعلق دارند.</td> + </tr> + <tr> + <td style="text-align: center;">form</td> + <td style="text-align: center;">{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td style="text-align: right;">نشاندهندهی فرمی است که مالک (پدر) عنصر مورد نظر است.</td> + </tr> + <tr> + <td style="text-align: center;">headers</td> + <td style="text-align: center;">{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td style="text-align: right;">IDهای عنصر(های) <th> که به این عنصر مربوط میشوند.</td> + </tr> + <tr> + <td style="text-align: center;">height</td> + <td style="text-align: center;">{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td dir="ltr" style="text-align: center;"> + <p style="text-align: left;">در برخی کاربردها مانند {{ HTMLElement("div") }}، این یک صفت قدیمی است که باید از ویژگی {{ Cssxref("height") }} در CSS به جای آن استفاده کرد. در سایر موارد مانند {{ HTMLElement("canvas") }} استفاده از این صفت ضروری است.</p> + </td> + </tr> + </tbody> + <tbody> + <tr> + <td style="text-align: center;">hidden</td> + <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td style="text-align: right;">ارتباط یک عنصر را نشان میدهد.</td> + </tr> + <tr> + <td style="text-align: center;">high</td> + <td style="text-align: center;">{{ HTMLElement("meter") }}</td> + <td style="text-align: right;">پایینترین مرز از بالاترین محدوده را نشان میدهد.</td> + </tr> + <tr> + <td style="text-align: center;">href</td> + <td style="text-align: center;">{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td> + <td style="text-align: right;">نشانی منبعی که پیوند (لینک) به آن اشاره دارد.</td> + </tr> + <tr> + <td style="text-align: center;">hreflang</td> + <td style="text-align: center;">{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td style="text-align: right;">زبان منبعی که پیوند (لینک) به آن اشاره دارد.</td> + </tr> + <tr> + <td style="text-align: center;">http-equiv</td> + <td style="text-align: center;">{{ HTMLElement("meta") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">icon</td> + <td style="text-align: center;">{{ HTMLElement("command") }}</td> + <td style="text-align: right;">تصویری که نشاندهندهی command باشد را تعیین میکند.</td> + </tr> + <tr> + <td style="text-align: center;">id</td> + <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td style="text-align: right;">اغلب با CSS به کار میرود تا عنصر مورد نظر را سبک دهی کند. مقدار این صفت باید منحصر به فرد (یکتا) باشد.</td> + </tr> + <tr> + <td style="text-align: center;">ismap</td> + <td style="text-align: center;">{{ HTMLElement("img") }}</td> + <td style="text-align: right;">نشاندهندهی این است که آیا تصویر بخشی از یک image map سمت سرور میباشد یا خیر.</td> + </tr> + <tr> + <td style="text-align: center;">itemprop</td> + <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">keytype</td> + <td style="text-align: center;">{{ HTMLElement("keygen") }}</td> + <td style="text-align: right;">نوع کلید تولید شده را مشخص میکند.</td> + </tr> + <tr> + <td style="text-align: center;">kind</td> + <td style="text-align: center;">{{ HTMLElement("track") }}</td> + <td style="text-align: right;">گونهی متنی track را مشخص میکند.</td> + </tr> + <tr> + <td style="text-align: center;">label</td> + <td style="text-align: center;">{{ HTMLElement("track") }}</td> + <td style="text-align: right;">متنی خوانا برای track مشخص میکند.</td> + </tr> + <tr> + <td style="text-align: center;">lang</td> + <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td style="text-align: right;">زبانی که در عنصر مورد نظر به کار رفته است را مشخص میکند.</td> + </tr> + <tr> + <td style="text-align: center;">language</td> + <td style="text-align: center;">{{ HTMLElement("script") }}</td> + <td style="text-align: right;">زبان اسکریپت را در عنصر مورد نظر تعیین میکند.</td> + </tr> + <tr> + <td style="text-align: center;">list</td> + <td style="text-align: center;">{{ HTMLElement("input") }}</td> + <td style="text-align: right;">فهرستی از گزینههای از پیش تعریف شده را برای کاربر مشخص میکند.</td> + </tr> + <tr> + <td style="text-align: center;">loop</td> + <td style="text-align: center;">{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td> + <td style="text-align: right;">نشاندهندهی این است که آیا محتوای مورد نظر (متن، صوت یا تصویر) پس از تمام شدن، دوباره باید اجرا شود یا به نمایش دربیاید یا خیر.</td> + </tr> + <tr> + <td style="text-align: center;">low</td> + <td style="text-align: center;">{{ HTMLElement("meter") }}</td> + <td style="text-align: right;">بالاترین مرز از پایینترین محدوده را نشان میدهد.</td> + </tr> + <tr> + <td style="text-align: center;">manifest</td> + <td style="text-align: center;">{{ HTMLElement("html") }}</td> + <td style="text-align: right;">نشانی فایل cache manifest (جهت مرور آفلاین صفحات) را در سند مشخص میکند.</td> + </tr> + <tr> + <td style="text-align: center;">max</td> + <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td style="text-align: right;">نشاندهندهی بیشترین مقدار مجاز است.</td> + </tr> + <tr> + <td style="text-align: center;">maxlength</td> + <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td style="text-align: right;">بیشترین تعداد کاراکترها را در عنصر مورد نظر تعیین میکند.</td> + </tr> + <tr> + <td style="text-align: center;">media</td> + <td style="text-align: center;">{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td> + <td style="text-align: right;">بخش کوچکی از رسانه که منبع پیوند داده شده برای آن طراحی شده است، را مشخص میکند.</td> + </tr> + <tr> + <td style="text-align: center;">method</td> + <td style="text-align: center;">{{ HTMLElement("form") }}</td> + <td style="text-align: right;">مشخص میکند که از کدام متد HTTP برای ارسال دادههای فرم استفاده شود، که میتواند GET (پیشفرض) یا POST باشد.</td> + </tr> + <tr> + <td style="text-align: center;">min</td> + <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td style="text-align: right;">نشاندهندهی کمترین مقدار مجاز است.</td> + </tr> + <tr> + <td style="text-align: center;">multiple</td> + <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td style="text-align: right;"> + <p>نشاندهندهی این است که آیا مقدارهای چندتایی میتوانند در ورودیهای <code>email</code> یا <code>file</code> وارد شوند یا خیر.</p> + </td> + </tr> + <tr> + <td style="text-align: center;">name</td> + <td style="text-align: center;">{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td> + <td dir="ltr" style="text-align: center;"> + <p style="text-align: right;">نام عنصر. برای نمونه از این صفت برای شناسایی فیلدهای مورد نظر که به سمت سرور ارسال شدهاند استفاده میشود.</p> + </td> + </tr> + <tr> + <td style="text-align: center;">novalidate</td> + <td style="text-align: center;">{{ HTMLElement("form") }}</td> + <td dir="ltr" style="text-align: center;"> + <p style="text-align: right;">این صفت نشاندهندهی این است که هنگام ارسال فرم، دادههای آن نباید مورد سنجش و ارزیابی قرار بگیرند.</p> + </td> + </tr> + <tr> + <td style="text-align: center;">open</td> + <td style="text-align: center;">{{ HTMLElement("details") }}</td> + <td dir="ltr" style="text-align: center;"> + <p style="text-align: right;">نشاندهندهی این است که آیا جزییات زمان بارگذاری صفحه نمایش داده میشوند یا خیر.</p> + </td> + </tr> + <tr> + <td style="text-align: center;">optimum</td> + <td style="text-align: center;">{{ HTMLElement("meter") }}</td> + <td dir="ltr" style="text-align: center;"> + <p style="text-align: right;">نشاندهندهی مقدار عددی بهینه است.</p> + </td> + </tr> + <tr> + <td style="text-align: center;">pattern</td> + <td style="text-align: center;">{{ HTMLElement("input") }}</td> + <td dir="ltr" style="text-align: center;"> + <p style="text-align: right;">عبارتی منظم را تعریف میکند که مقدار عنصر مورد نظر برابر آن مورد سنجش و ارزیابی قرار میگیرد.</p> + </td> + </tr> + <tr> + <td style="text-align: center;">ping</td> + <td style="text-align: center;">{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">placeholder</td> + <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td dir="ltr" style="text-align: center;"> + <p style="text-align: right;">با نمایش کادری کوچک به کاربر اطلاع میدهد که چه چیزی در فیلد قابل نوشتن است.</p> + </td> + </tr> + <tr> + <td style="text-align: center;">poster</td> + <td style="text-align: center;">{{ HTMLElement("video") }}</td> + <td dir="ltr" style="text-align: center;"> + <p style="text-align: right;">نشانی که به یک فریم از فیلم اشاره دارد تا زمانی که کاربر هنوز اقدام به پخش فیلم نکرده است به وی نمایش داده شود.</p> + </td> + </tr> + <tr> + <td style="text-align: center;">preload</td> + <td style="text-align: center;">{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td style="text-align: right;">نشاندهندهی این است که آیا تمام منبع، بخشی از آن یا هیچ چیز باید از قبل از اقدام کاربر برای پخش محتوا، بارگذاری شود.</td> + </tr> + <tr> + <td style="text-align: center;">pubdate</td> + <td style="text-align: center;">{{ HTMLElement("time") }}</td> + <td dir="ltr" style="text-align: center;"> + <p dir="rtl" style="text-align: right;">نشاندهندهی این است که آیا این تاریخ و زمان مطابق با تاریخ نزدیکترین عنصر {{ HTMLElement("article") }} والد خود است یا خیر.</p> + </td> + </tr> + <tr> + <td style="text-align: center;">radiogroup</td> + <td style="text-align: center;">{{ HTMLElement("command") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">readonly</td> + <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td dir="ltr" style="text-align: center;"> + <p dir="rtl" style="text-align: right;">نشاندهندهی این است که آیا این عنصر قابل ویرایش است یا خیر.</p> + </td> + </tr> + <tr> + <td style="text-align: center;">rel</td> + <td style="text-align: center;">{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td style="text-align: right;">ارتباط بین شی هدف و شی پینوندی را مشخص میکند.</td> + </tr> + <tr> + <td style="text-align: center;">required</td> + <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td style="text-align: right;">نشاندهندهی این است که آیا این عنصر (از فرم) نیاز به تکمیل شدن از طرف کاربر دارد یا خیر.</td> + </tr> + <tr> + <td style="text-align: center;">reversed</td> + <td style="text-align: center;">{{ HTMLElement("ol") }}</td> + <td style="text-align: right;">نشاندهندهی این است که آیا فهرست باید به ترتیب نزولی نمایش داده شود، بر خلاف ترتیب صعودی.</td> + </tr> + <tr> + <td style="text-align: center;">rows</td> + <td style="text-align: center;">{{ HTMLElement("textarea") }}</td> + <td style="text-align: right;">تعداد سطرهای ناحیهی متنی را مشخص میکند.</td> + </tr> + <tr> + <td style="text-align: center;">rowspan</td> + <td style="text-align: center;">{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td style="text-align: right;">تعداد سطرهایی که سلول (خانه) جدول باید بر اساس آن ایجاد شود را مشخص میکند.</td> + </tr> + <tr> + <td style="text-align: center;">sandbox</td> + <td style="text-align: center;">{{ HTMLElement("iframe") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">spellcheck</td> + <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td style="text-align: right;">نشاندهندهی این است که آیا عملیات بررسی واژهها برای این عنصر مجاز است یا خیر.</td> + </tr> + <tr> + <td style="text-align: center;">scope</td> + <td style="text-align: center;">{{ HTMLElement("th") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">scoped</td> + <td style="text-align: center;">{{ HTMLElement("style") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">seamless</td> + <td style="text-align: center;">{{ HTMLElement("iframe") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">selected</td> + <td style="text-align: center;">{{ HTMLElement("option") }}</td> + <td style="text-align: right;">مقداری را تعیین میکند که در زمان بارگذاری صفحه، در فهرست انتخاب شده است.</td> + </tr> + <tr> + <td style="text-align: center;">shape</td> + <td style="text-align: center;">{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">size</td> + <td style="text-align: center;">{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td style="text-align: right;">عرض عنصر را (بر اساس پیکسل) تعیین میکند. اگر عنصر مورد نظر از نوع <code>text</code> یا <code>password</code> باشد این صفت تعداد کاراکترهای عنصر را تعیین میکند.</td> + </tr> + <tr> + <td style="text-align: center;">sizes</td> + <td style="text-align: center;">{{ HTMLElement("link") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">span</td> + <td style="text-align: center;">{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">src</td> + <td style="text-align: center;">{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td> + <td style="text-align: right;">نشانی فایلی که عنصر مورد نظر از آن به عنوان منبع استفاده میکند.</td> + </tr> + <tr> + <td style="text-align: center;">srcdoc</td> + <td style="text-align: center;">{{ HTMLElement("iframe") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">srclang</td> + <td style="text-align: center;">{{ HTMLElement("track") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">start</td> + <td style="text-align: center;">{{ HTMLElement("ol") }}</td> + <td style="text-align: right;">اولین عدد در فهرست را تعیین میکند، اگر غیر از ۱ باشد.</td> + </tr> + <tr> + <td style="text-align: center;">step</td> + <td style="text-align: center;">{{ HTMLElement("input") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">style</td> + <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td style="text-align: right;">سبکهای CSS را تعریف میکند که در صورت وجود فایلهای قدیمی بر روی آنها نوشته میشوند.</td> + </tr> + <tr> + <td style="text-align: center;">summary</td> + <td style="text-align: center;">{{ HTMLElement("table") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">tabindex</td> + <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td style="text-align: right;">با ویرایش این صفت، ترتیب انتخاب شدن عنصرهای صفحه در مرورگر به حالتی که برایش تعیین شود تغییر مییابد.</td> + </tr> + <tr> + <td style="text-align: center;">target</td> + <td style="text-align: center;">{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">title</td> + <td style="text-align: center;"><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td style="text-align: right;">متنی که در یک کادر کوچک با قرار دادن mouse روی عنصر مورد نظر نمایش مییابد.</td> + </tr> + <tr> + <td style="text-align: center;">type</td> + <td style="text-align: center;">{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td> + <td style="text-align: right;">نوع عنصر را تعریف میکند.</td> + </tr> + <tr> + <td style="text-align: center;">usemap</td> + <td style="text-align: center;">{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">value</td> + <td style="text-align: center;">{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td> + <td style="text-align: right;">مقدار پیشفرضی که در زمان بارگذاری صفحه برای عنصر انتخاب میشود را تعیین میکند.</td> + </tr> + <tr> + <td style="text-align: center;">width</td> + <td style="text-align: center;">{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td dir="ltr" style="text-align: center;"> + <p style="text-align: left;">در برخی موارد مانند {{ HTMLElement("div") }} این یک صفت قدیمی به حساب میآید که باید از ویژگی {{ Cssxref("width") }} در CSS به جای آن استفاده کرد. در سایر موارد مانند {{ HTMLElement("canvas") }} این یک صفت ضروری است که باید ذکر شود.</p> + </td> + </tr> + <tr> + <td style="text-align: center;">wrap</td> + <td style="text-align: center;">{{ HTMLElement("textarea") }}</td> + <td style="text-align: right;">نشاندهندهی این است که آیا متن باید کوتاه شود یا خیر.</td> + </tr> + </tbody> +</table> +<h2 dir="ltr" id="Content_versus_IDL_attributes" style="margin-bottom: 20px; font-size: 28px; line-height: 28px; color: rgb(77, 78, 83); text-align: left;">Content versus IDL attributes</h2> +<p dir="ltr" style="line-height: 1.5em; color: rgb(77, 78, 83);">In HTML, most attributes have two faces: the <strong>content attribute</strong> and the <strong>IDL attribute</strong>.</p> +<p dir="ltr" style="line-height: 1.5em; color: rgb(77, 78, 83);">The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via {{domxref("element.setAttribute()")}} or {{domxref("element.getAttribute()")}}. The content attribute is always a string even when the expected value should be an integer. For example, to set an {{HTMLElement("input")}} element's <code style="font-size: 14px;">maxlength</code> to 42 using the content attribute, you have to call<code style="font-size: 14px;">setAttribute("maxlength", "42")</code> on that element.</p> +<p dir="ltr" style="line-height: 1.5em; color: rgb(77, 78, 83);">The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like <code class="moz-txt-verticalline" style="font-size: 14px;">element.foo</code>. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.</p> +<p dir="rtl" style="line-height: 1.5em; color: rgb(77, 78, 83);">Most of the time, IDL attributes will return their valules as they are really used. For example, the default <code style="font-size: 14px;">type</code> for {{HTMLElement("input")}} elements is "text", so if you set<code style="font-size: 14px;">input.type="foobar"</code>, the <code style="font-size: 14px;"><input></code> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the<code style="font-size: 14px;">type</code> IDL attribute will return the string "text".</p> +<p dir="ltr" style="line-height: 1.5em; color: rgb(77, 78, 83);">IDL attributes are not always strings; for example, <code style="font-size: 14px;">input.maxlength</code> is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so<code style="font-size: 14px;">input.maxlength</code> is always going to return a number and when you set<code style="font-size: 14px;">input.maxlength</code> ,it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.</p> +<p dir="ltr" style="line-height: 1.5em; color: rgb(77, 78, 83);">IDL attributes can <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">reflect other types</a> such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">the rules laid out in the specification</a>, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (<code style="font-size: 14px;">select.size</code>, for example) and you should read the specifications to understand how exactly they behave.</p> +<h2 dir="ltr" id="See_also" style="margin-bottom: 20px; font-size: 28px; line-height: 28px; color: rgb(77, 78, 83);">See also</h2> +<ul dir="ltr" style="margin-bottom: 1.286em; padding-left: 0px; list-style-type: none; color: rgb(77, 78, 83);"> + <li style="padding-bottom: 0px;"><a href="https://developer.mozilla.org/en-US/docs/HTML/Element" title="/en-US/docs/HTML/Element">HTML elements</a></li> +</ul> diff --git a/files/fa/html/canvas/drawing_graphics_with_canvas/index.html b/files/fa/html/canvas/drawing_graphics_with_canvas/index.html new file mode 100644 index 0000000000..9cacec88bf --- /dev/null +++ b/files/fa/html/canvas/drawing_graphics_with_canvas/index.html @@ -0,0 +1,179 @@ +--- +title: رسم گرافیک با Canvas +slug: HTML/Canvas/Drawing_Graphics_with_Canvas +translation_of: Web/API/Canvas_API/Tutorial +--- +<div class="note"> + <p dir="rtl">بخش عمدهای از این مطلب (به جز مستندات drawWindow) به صفحهی اصلی <a href="/en/Canvas_tutorial" title="/en/Canvas_tutorial">آموزش Canvas</a> منتقل شده است، بنابراین این صفحه نیز به احتمال زیاد به آن قسمت منتقل میشود تا از ایجاد محتوای تکراری جلوگیری شود.</p> +</div> +<h3 dir="rtl" id="Introduction" name="Introduction">مقدمه</h3> +<p dir="rtl">با انتشار <a href="/en/Firefox_1.5_for_developers" title="/en/Firefox_1.5_for_developers">فایرفاکس ۱.۵</a>، عنصر جدیدی از HTML برای برنامهنویسی حالت گرافیکی در فایرفاکس به وجود آمد. <code><canvas></code> بر اساس <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas" title="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">مستندات WHATWG برای Canvas</a> پیادهسازی شده است که خود این مستندات نیز بر پایهی عنصر <code><canvas></code> در مرورگر سافاری از اپل ایجاد شده است. از آن میتوان برای ترسیم نمودار، عنصرهای واسط کاربری و سایر عنصرهای گرافیکی در مرورگر استفاده کرد.</p> +<p dir="rtl"><code><canvas></code> با ایجاد یک سطح ترسیمی با اندازهی ثابت سبب میشود که یک یا چند <em>فضای گرافیکی</em> به وجود بیایند. در این مقاله ما بر روی فضای گرافیکی ۲ بعدی تمرکز میکنیم. برای گرافیک ۳ بعدی، شما باید از <a href="/en/WebGL" title="/en/WebGL">فضای گرافیکی WebGL</a> استفاده کنید.</p> +<h3 dir="rtl" id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">فضای گرافیکی ۲ بعدی</h3> +<h4 dir="rtl" id="یک_نمونهی_ساده">یک نمونهی ساده</h4> +<p dir="rtl">برای شروع، با نمونهای ساده که دو مستطیل با فضای مشترک شفاف مشخص شدهاند، آغاز میکنیم:</p> +<p><img align="right" alt="Example 1." class="internal" src="/@api/deki/files/602/=Canvas_ex1.png"></p> +<pre class="brush: js"><html> + <head> + <script type="application/javascript"> +function draw() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + ctx.fillStyle = "rgb(200,0,0)"; + ctx.fillRect (10, 10, 55, 50); + + ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; + ctx.fillRect (30, 30, 55, 50); +} + </script> + </head> + <body onload="draw()"> + <canvas id="canvas" width="300" height="300"></canvas> + </body> +</html> +</pre> +<p dir="rtl">تابع <code>draw</code> با دریافت عنصر <code>canvas</code> فضای ۲ بعدی آن را مشخص میکند. شی <code>ctx</code> میتواند برای رسم گرافیک روی بوم استفاده شود. در این کد، دو مستطیل با تنظیمات <code>fillStyle</code> و <code>fiilRect</code> با فضای مشترک شفاف رسم میشوند. <code>fillStyle</code> دوم از <code>rgba</code> برای مشخص کردن شفافیت با رنگ مورد نظر، استفاده میکند.</p> +<p dir="rtl"><code>fillRect</code> برای رسم مستطیل، <code>strokeRect</code> برای رسم حاشیههای مستطیل و <code>clearRect</code> برای پاککردن مستطیل استفاده میشوند. برای ایجاد شکلهای پیچیدهتر، از مسیرها استفاده میشود.</p> +<h4 dir="rtl" id="Using_Paths" name="Using_Paths">استفاده از مسیرها</h4> +<p dir="rtl">تابع <code>beginPath</code> یک مسیر جدید را آغاز میکند و متدهای <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc</code> و از این قبیل، بخشهای مختلفی را به مسیر تعریفشده اضافه میکنند. مسیر ایجاد شده توسط تابع <code>closePath</code> بسته میشود. زمانی که یک مسیر ایجاد شود، شما میتوانید با <code>fill</code> یا <code>stroke</code> فضای داخل یا حاشیهی مسیر را روی بوم رسم کنید.</p> +<p><img align="right" alt="Example 2." class="internal" src="/@api/deki/files/603/=Canvas_ex2.png"></p> +<pre class="brush: js"><html> + <head> + <script type="application/javascript"> +function draw() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + ctx.fillStyle = "red"; + + ctx.beginPath(); + ctx.moveTo(30, 30); + ctx.lineTo(150, 150); + // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong. + ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right -> + ctx.lineTo(30, 30); + ctx.fill(); +} + </script> + </head> + <body onload="draw()"> + <canvas id="canvas" width="300" height="300"></canvas> + </body> +</html> +</pre> +<p dir="rtl">فراخوانی هر یک از توابع <code>fill</code> یا <code>stroke</code>، روی مسیر فعلی تاثیر میگذارد. اگر دوباره قصد رنگآمیزی یا ایجاد حاشیه در مسیر را داشته باشیم باید مجدد آن را تعریف کنیم.</p> +<h4 dir="rtl" id="Graphics_State" name="Graphics_State">حالت گرافیکی</h4> +<p dir="rtl">صفتهای یک فضای گرافیکی مانند <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth</code> و <code>lineJoin</code> قسمتی از حالت گرافیکی فعلی هستند. فضای گرافیکی شامل دو متد <code>save</code> و <code>restore</code> است که میتوانند برای انتقال حالت کنونی به مجموعهی حالتها یا از مجموعهی حالتها استفاده شوند.</p> +<h4 dir="rtl" id="A_More_Complicated_Example" name="A_More_Complicated_Example">یک نمونهی پیچیدهتر</h4> +<p dir="rtl">در ادامه به نمونهای پیچیدهتر میپردازیم که شامل مسیرها، حالت، و همچنین ماتریس انتقال است. متدهای این فضا یعنی <code>translate</code>, <code>scale</code> و <code>rotate</code> برای انتقال ماتریس به کار میروند که تمامی نقطههای ایجاد شده ابتدا توسط این ماتریس منتقل میشوند.</p> +<p><img align="right" alt="Example 3." class="internal" src="/@api/deki/files/604/=Canvas_ex3.png"></p> +<pre class="brush: js"> <html> + <head> + <script type="application/javascript"> + function drawBowtie(ctx, fillStyle) { + + ctx.fillStyle = "rgba(200,200,200,0.3)"; + ctx.fillRect(-30, -30, 60, 60); + + ctx.fillStyle = fillStyle; + ctx.globalAlpha = 1.0; + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(-25, -25); + ctx.lineTo(25, -25); + ctx.lineTo(-25, 25); + ctx.closePath(); + ctx.fill(); + } + + function dot(ctx) { + ctx.save(); + ctx.fillStyle = "black"; + ctx.fillRect(-2, -2, 4, 4); + ctx.restore(); + } + + function draw() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // note that all other translates are relative to this + // one + ctx.translate(45, 45); + + ctx.save(); + //ctx.translate(0, 0); // unnecessary + drawBowtie(ctx, "red"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(85, 0); + ctx.rotate(45 * Math.PI / 180); + drawBowtie(ctx, "green"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(0, 85); + ctx.rotate(135 * Math.PI / 180); + drawBowtie(ctx, "blue"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(85, 85); + ctx.rotate(90 * Math.PI / 180); + drawBowtie(ctx, "yellow"); + dot(ctx); + ctx.restore(); + } + </script> + </head> + <body onload="draw()"> + <canvas id="canvas" width="300" height="300"></canvas> + </body> + </html> +</pre> +<p dir="rtl">قطعه کد بالا دو متد <code>drawBowtie</code> و <code>dot</code> را که هر کدام ۴ مرتبه فراخوانی شدهاند، دربرمیگیرد. قبل از هر فراخوانی، از متدهای <code>translate</code> و <code>rotate</code> برای ایجاد ماتریس انتقال استفاده میشود که به ترتیب نقطه و پاپیون را مکاندهی میکنند. <code>dot</code> یک مستطیل کوچک به مرکز (0, 0) و <code>drawBowtie</code> یک پاپیون کوچک را با استفاده از مسیرها و رنگ مورد نظر به وجود میآورد.</p> +<p dir="rtl">هر چه عملیات ماتریس انباشتهتر میشوند، متدهای <code>save</code> و <code>restore</code> برای ذخیرهسازی و بازگرداندن حالت گرافیکی استفاده میشوند. چیزی که باید به یاد داشت این است که چرخش همیشه در مسیر فعلی شکل میگیرد یعنی ترتیب<code> translate() rotate() translate()</code> به یک شکل و ترتیب <code>translate() translate() rotate()</code> به شکلی دیگر منجر میشوند.</p> +<h3 dir="rtl" id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">سازگاری با عنصر <canvas> اپل</h3> +<p dir="rtl">در اکثر موارد، <code><canvas></code> با نمونهی پیادهسازی شدهی اپل سازگاری دارد. اگرچه چند مورد هستند که باید به آنها توجه کرد.</p> +<h4 dir="rtl" id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">برچسب پایانی مورد نیاز است</h4> +<p dir="rtl">در پیادهسازی سافاری از اپل، <code><canvas></code> عنصری است که مشابه <code><img></code> پیادهسازی شده است، یعنی به برچسب پایانی نیازی ندارد. اگرچه، برای اینکه <code><canvas></code> به صورت گسترده در وب استفاده شود، برخی امکانات برای محتوای بازگشتی بایستی فراهم شوند. از این رو، پیادهسازی موزیلا از این عنصر، نیازمند استفاده از برچسب پایانی است.</p> +<p dir="rtl">اگر به محتوای بازگشتی نیازی نباشد، یک نمونهی ساده مانند <code><canvas id="foo" ...></canvas></code> با هر دو پیادهسازی سافاری و موزیلا سازگاری دارد، با این تفاوت که سافاری برچسب پایانی را در نظر نمیگیرد.</p> +<p dir="rtl">اگر محتوای بازگشتی مورد استفاده قرار گیرد، بایستی از برخی تکنیکهای CSS برای ایجاد آن در سافاری استفاده کرد و همچنین از برخی تکنیکها برای فهماندن این مطلب به IE!</p> +<h3 dir="rtl" id="Additional_Features" name="Additional_Features">ویژگیهای دیگر</h3> +<h4 dir="rtl" id="فراهمکردن_محتوای_وب_در_داخل_Canvas">فراهمکردن محتوای وب در داخل Canvas</h4> +<div class="note" dir="rtl"> + این ویژگی تنها با مجوزهای مرورگر Chrome قابل اعمال است و در صفحههای HTML معمولی استفاده نمیشود. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">علت آن را بدانید</a>.</div> +<p dir="rtl">پیادهسازی موزیلا از <code>canvas</code> با استفاده از متد <a href="/en/DOM/CanvasRenderingContext2D#drawWindow()" title="/en/DOM/CanvasRenderingContext2D#drawWindow()"><code>drawWindow</code></a> گسترش یافته است. این متد تصویری از یک <code>صفحهی</code> DOM را در داخل canvas رسم میکند. برای نمونه:</p> +<p>Mozilla's <code>canvas</code> is extended with the <a href="/en/DOM/CanvasRenderingContext2D#drawWindow()" title="en/DOM/CanvasRenderingContext2D#drawWindow()"><code>drawWindow()</code></a> method. This method draws a snapshot of the contents of a DOM <code>window</code> into the canvas. For example,</p> +<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); +</pre> +<p dir="rtl">قطعهکد بالا محتوای پنجرهی فعلی را در مستطیلی با ابعاد ذکر شده به پیکسل نسبت به گوشهی بالا و چپ پنچره در یک پیشزمینهی سفید از بوم، رسم میکند. با مشخص کردن "rgba(255,255,255,0)" به عنوان رنگ، محتوا با پیشزمینهی شفاف رسم میشود.</p> +<p dir="rtl">معمولا استفاده از رنگ پیشزمینهای به جز سفید "rgb(255,255,255)" یا شفاف کار درستی نیست چرا که تمامی مرورگرها از این استاندارد برای نمایش صفحات وب استفاده میکنند.</p> +<p dir="rtl">با این روش، ممکن است بتوان یک IFRAME پنهان با محتوای دلخواه (برای نمونه متنی که با CSS سبکدهی شده باشد یا SVG) را در یک بوم رسم کرد، که به این صورت میتوان آن را مقیاسدهی کرد یا چرخاند یا هر عمل دیگری که با انتقالهای فعلی میتوان انجام داد.</p> +<p dir="rtl">Ted Mielczarek با افزونهی <a href="http://ted.mielczarek.org/code/mozilla/tabpreview/" title="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> خود در chrome این امکان را فراهم میکند تا بتوان تصویرهای کوچک از وبسایتها را مشاهده کرد، و کد آن نیز در دسترس است.</p> +<div class="note" dir="rtl"> + <strong>یادداشت</strong>: استفاده از <code>canvas.drawWindow()</code> در داخل رخداد <code>onload</code> سند عمل نمیکند. در فایرفاکس ۳.۵ به بعد، میتوان با استفاده از رخداد <a href="/en/Gecko-Specific_DOM_Events#MozAfterPaint" title="/en/Gecko-Specific_DOM_Events#MozAfterPaint">MozAfterPaint</a> این حالت را در زمان بارگذاری صفحه پیادهسازی کرد.</div> +<h3 id="See_also" name="See_also">See also</h3> +<ul> + <li><a href="/en/HTML/Canvas" title="en/HTML/Canvas">Canvas topic page</a></li> + <li><a href="/en/Canvas_tutorial" title="en/Canvas_tutorial">Canvas tutorial</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li> + <li><a class="external" href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li> + <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li> + <li>Some <a href="/Special:Tags" title="Site Tags">examples</a>: + <ul> + <li><a class="external" href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li> + <li><a class="external" href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li> + <li><a href="/en/A_Basic_RayCaster" title="en/A_Basic_RayCaster">A Basic RayCaster</a></li> + <li><a class="external" href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li> + <li><a class="external" href="http://caimansys.com/painter/">Canvas Painter</a></li> + </ul> + </li> + <li><a href="/Special:Tags" title="Site Tags">And more...</a></li> +</ul> +<p>{{ languages( { "fr": "fr/Dessiner_avec_canvas", "ja": "ja/Drawing_Graphics_with_Canvas", "pl": "pl/Rysowanie_grafik_za_pomoc\u0105_Canvas", "ko": "ko/Drawing_Graphics_with_Canvas" } ) }}</p> diff --git a/files/fa/html/html5/index.html b/files/fa/html/html5/index.html new file mode 100644 index 0000000000..f2ae6b581b --- /dev/null +++ b/files/fa/html/html5/index.html @@ -0,0 +1,155 @@ +--- +title: HTML5 +slug: HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +--- +<p dir="rtl"><span class="seoSummary">HTML5 آخرین نسخه از مجموعه استانداردهای <a href="/fa/docs/HTML" title="/fa/docs/HTML">HTML</a> است</span>، که نشاندهندهی دو مفهوم متفاوت است:</p> + +<ul dir="rtl"> + <li>نسخهای جدید از <em>زبان</em> HTML، با عنصرهای جدید، صفتها و رفتار آنها.</li> + <li>مجموعهای بزرگتر از فناوریها که منجر به تولید وبسایتها و برنامههای قدرتمند و گوناگونی میشوند: که به این مجموعه <em>HTML5 و دوستان</em> یا به اختصار HTML5 گفته میشود.</li> +</ul> + +<p dir="rtl"><span class="seoSummary">این صفحه به منابع متفاوتی از فناوریهای HTML5 پیوند خورده است، دستهبندی شده در گروههای مختلف</span>، که هر گروه دربرگیرندهی فعالیتی متفاوت است: <em>semantics (عنصرهای معناگرا)</em>، که در توضیح هر چه بیشتر و دقیقتر محتوا نقش دارند، <em>connectivity (اتصال)</em>، که روشهای جدیدی برای برقراری ارتباط با سرور معرفی میکند، <em>offline & storage (ذخیرهسازی آفلاین)</em>، که وبسایت را برای ذخیرهی دادههای آفلاین و عملکرد بهتر زمانی که مرورگر کاربر در حالت آفلاین قرار دارد بهینه میکند، <em>multimedia (محتوای چندرسانهای)</em>، که صوت و تصویر را به عنوان شهروند درجه یک وب معرفی میکند، <em>3D، Graphics & Effects (سهبعدی، گرافیک و جلوههای تصویری)</em>، که به ارایهی جلوههای تصویری پیچیدهتر منجر میشود، <em>performance & integration (عملکرد و جامعیت)</em>، که وبسایتی سریعتر و در عین حال منطبقتر با رایانهی کاربر میسازد، <em>device access (دسترسی از طریق سایر دستگاهها)</em>، که اجازهی استفادهی دستگاههای ورودی/خروجی بیشتری را میدهد، و <em>styling (سبکدهی)</em>، که دست توسعهدهندگان در ایجاد قالبهای پیچیدهتر را باز میکند.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 dir="rtl" id="Semantics_(عنصرهای_معناگرا)" style="margin: 0px 0px 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Semantics (عنصرهای معناگرا)</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">بخشهای مختلف صفحه در HTML5</a></dt> + <dd dir="rtl">نگاهی به عنصرهای بخشبندی صفحه در HTML5:</dd> + <dd>{{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} و {{ HTMLElement("hgroup") }}.</dd> + <dt dir="rtl"><a href="/en-US/docs/Using_HTML5_audio_and_video" title="/en-US/docs/Using_HTML5_audio_and_video">استفاده از audio و vedio در HTML5</a></dt> + <dd dir="rtl">عنصرهای {{ HTMLElement("audio") }} و {{ HTMLElement("video") }} با قرارگرفتن در صفحه، اجازهی تغییراتی جدید در نحوهی اجرای محتوای چندرسانهای را میدهند.</dd> + <dt dir="rtl"><a href="/en-US/docs/HTML/Forms_in_HTML" title="/en-US/docs/HTML/Forms_in_HTML">فرمها در HTML5</a></dt> + <dd dir="rtl">نگاهی به بهبودهای ایجادشده در فرمهای وب، constraint validation API، چند صفت جدید، مقدارهای جدیدی برای {{ HTMLElement("input") }} صفت {{ htmlattrxref("type", "input") }} و عنصر جدید {{ HTMLElement("output") }}.</dd> + <dt dir="rtl">عنصرهای معناگرای جدید</dt> + <dd dir="rtl">علاوه بر عنصرهای بخشبندی، رسانه و فرم، عنصرهای متعددی مانند {{ HTMLElement("mark") }}، {{ HTMLElement("figure") }}، {{ HTMLElement("figcaption") }}، {{ HTMLElement("data") }}، {{ HTMLElement("time") }}، {{ HTMLElement("output") }}، {{ HTMLElement("progress") }}، یا {{ HTMLElement("meter") }} تعداد <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="/en-US/docs/HTML/HTML5/HTML5_element_list">عنصرهای مجاز HTML5</a> را افرایش میدهند.</dd> + <dt dir="rtl">بهبودهای ایجادشده در {{HTMLElement("iframe")}}</dt> + <dd dir="rtl">با استفاده از صفتهای{{htmlattrxref("sandbox", "iframe")}}، {{htmlattrxref("seamless", "iframe")}} و {{htmlattrxref("srcdoc", "iframe") }} توسعهدهندگان میتوانند میزان امنیت و کارکرد یک عنصر {{HTMLElement("iframe")}} را به دقت بررسی کنند.</dd> + <dt dir="rtl"><a href="/en-US/docs/MathML" title="/en-US/docs/MathML">MathML</a></dt> + <dd dir="rtl">استفاده از فرمولهای ریاضی را به صورت مستقیم در کد، ممکن میسازد.</dd> + <dt dir="rtl"><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="/en-US/docs/HTML/HTML5/Introduction_to_HTML5">مقدمهای بر HTML5</a></dt> + <dd dir="rtl">این مقاله به معرفی مشکلات موجود HTML5 که در طراحی وب یا برنامهی وب ممکن است وجود داشته باشند، میپردازد.</dd> + <dt dir="rtl"><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="/en-US/docs/HTML/HTML5/HTML5_Parser">مفسر منطبق بر HTML5</a></dt> + <dd dir="rtl">مفسر، که بایت به بایت از یک سند HTML را به درخت DOM تبدیل میکند، گسترش یافتهاست و به دقت رفتاری که در تمامی حالتها پیش میآید بررسی کرده، حتی کد نامعتبر HTML را، که منجر به بهینهتر شدن و قابلپیشبینیتر شدن مرورگرهای منطبق با HTML5 میشود.</dd> +</dl> + +<h2 dir="rtl" id="Connectivity_(اتصال)" style="margin: 0px 0px 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connectivity (اتصال)</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> + <dd dir="rtl">اجازهی برقراری یک ارتباط پایدار بین صفحه و سرور را میدهد که از طریق آن میتوان به مبادلهی دادههایی غیر از سند HTML پرداخت.</dd> + <dt dir="rtl"><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">رخدادهای سمت سرور</a></dt> + <dd dir="rtl">سابق بر این سرور تنها با دریافت درخواست از مرورگر (کاربر) میتوانست به آن پاسخ دهد اما الان میتواند این کار را بدون درخواست مرورگر نیز انجام دهد.</dd> + <dt dir="rtl"><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a></dt> + <dd dir="rtl">این فناوری، که مخفف Real-Time Communication یا ارتباط بلادرنگ است، اجازهی برقراری ارتباط با سایر افراد و کنترل ویدیوکنفرانس به طور مستقیم از مرورگر را میهد بدون آنکه به افزونهای خاص یا برنامهای خارجی نیاز باشد.</dd> +</dl> + +<h2 dir="rtl" id="Offline_storage_(ذخیرهسازی_آفلاین)" style="margin: 0px 0px 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline & storage (ذخیرهسازی آفلاین)</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">منابع آفلاین: حافظهی نهان برنامه</a></dt> + <dd dir="rtl">Firefox به طور کامل منابع آفلاین در HTML5 را پشتیبانی میکند. سایر مرورگرها نیز این ویژگی را کمابیش پشتیبانی میکنند.</dd> + <dt dir="rtl"><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">رخدادهای آنلاین و آفلاین</a></dt> + <dd dir="rtl">Firefox 3 مستندات WHATWG دربارهی رخدادهای آنلاین و آفلاین را پشتیبانی میکند، که به برنامهها اجازه میدهد تشخیص بدهند آیا یک اتصال اینترنت فعال موجود است یا خیر، یا اینکه آیا یک اتصال قطع و وصل میشود یا خیر.</dd> + <dt dir="rtl"><a href="/en-US/docs/DOM/Storage" title="/en-US/docs/DOM/Storage">نشست سمت-مرورگر WHATWG و ذخیرهسازی پایدار (در برابر ذخیرهسازی DOM)</a></dt> + <dd dir="rtl">نشست سمت-مرورگر و ذخیرهسازی پایدار به برنامههای وب اجازه میدهند که ساختاردادههای مورد نیاز خود را در مرورگر کاربر ذخیرهسازی کنند.</dd> + <dt dir="rtl"><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt> + <dd dir="rtl">یک استاندارد وب است که برای ذخیرهسازی دادهها با حجم بالا در مرورگر کاربر به کار میرود و برای جستجوهای با سرعت بالا بر این دادهها با استفاده از اندیسها، صورت میپذیرد.</dd> + <dt dir="rtl"><a href="/en-US/docs/Using_files_from_web_applications" title="/en-US/docs/Using_files_from_web_applications">استفاده از فایلها توسط برنامههای وب</a></dt> + <dd dir="rtl">پشتیبانی از API جدید فایل در HTML5 به Gecko اضافهشده است تا برنامههای وب بتوانند به فایلهایی که کاربر انتخاب میکنند دسترسی داشته باشند، که این امر شامل پشتیبانی از فایلهای چندگانه با استفاده از عنصر <span style="font-family: monospace;">{{ HTMLElement("input") }}</span> که از <a href="/en-US/docs/HTML/Element/Input#attr-type" title="/en-US/docs/HTML/Element/Input#attr-type">نوع</a> فایل میباشد، میشود یا صفت جدید <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a>. همچنین <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a> نیز وجود دارد.</dd> +</dl> + +<h2 dir="rtl" id="Multimedia_(چندرسانهای)" style="margin: 0px 0px 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia (چندرسانهای)</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Using_HTML5_audio_and_video" title="/en-US/docs/Using_HTML5_audio_and_video">استفاده از audio و vedio در HTML5</a></dt> + <dd dir="rtl">عنصرهای {{ HTMLElement("audio") }} و {{ HTMLElement("video") }} با قرارگرفتن در صفحه، اجازهی تغییراتی جدید در نحوهی اجرای محتوای چندرسانهای را میدهند.</dd> + <dt dir="rtl"><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a></dt> + <dd dir="rtl">این فناوری، که مخفف Real-Time Communication یا ارتباط بلادرنگ است، اجازهی برقراری ارتباط با سایر افراد و کنترل ویدیوکنفرانس به طور مستقیم از مرورگر را میهد بدون آنکه به افزونهای خاص یا برنامهای خارجی نیاز باشد.</dd> + <dt dir="rtl"><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">استفاده از API دوربین</a></dt> + <dd dir="rtl">اجازهی استفاده، تغییر و ذخیرهسازی یک تصویر (عکس) را از دوربین رایانهی کاربر میدهد.</dd> +</dl> + +<h2 dir="rtl" id="3D_graphics_effects_(سهبعدی،_گرافیک_و_جلوههای_تصویری)" style="margin: 0px 0px 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, graphics & effects (سهبعدی، گرافیک و جلوههای تصویری)</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Canvas_tutorial" title="/en-US/docs/Canvas_tutorial">خودآموز Canvas</a></dt> + <dd dir="rtl">دربارهی عنصر جدید <code>{{ HTMLElement("canvas") }}</code> و چگونگی رسم نمودارها و سایر اشیا در Firefox بیاموزید.</dd> + <dt dir="rtl">API متن HTML5 برای عنصرهای <a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas"><code><canvas></code></a><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas"> </a></dt> + <dd dir="rtl">API متن در HTML5 توسط عنصرهای {{ HTMLElement("canvas") }} پشتیبانی میشوند.</dd> + <dt dir="rtl"><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd dir="rtl">WebGL گرافیک سهبعدی را با معرفی APIای که بسیار نزدیک به OpenGL ES 2.0 عمل میکند، به صفحات وب میآورد که میتواند در عنصرهای {{ HTMLElement("canvas") }} در HTML5 به کار رود.</dd> + <dt dir="rtl"><a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a></dt> + <dd dir="rtl">فرمتی مبتنی بر XML از تصاویر برداری که به صورت مستقیم میتواند در سند HTML به کار رود.</dd> +</dl> + +<dl> +</dl> +</div> + +<div class="section"> +<h2 dir="rtl" id="Performance_integration_(عملکرد_و_جامعیت)" style="margin: 0px 0px 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Performance & integration (عملکرد و جامعیت)</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> + <dd dir="rtl">به فایلهای JavaScript اجازه میدهد که در پسزمینه و بدون اینکه رخدادهای فعال را درگیر خود سازند، اجرا شوند.</dd> + <dt dir="rtl"><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> سطح ۲</dt> + <dd dir="rtl">اجازهی برقراری ارتباط بخشی از صفحه با سرور را میدهد، تا محتوای پویا را بر اساس فعالیت کاربران یا زمان تغییر دهد. این فناوری پایه و اساس <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">Ajax</a> است.</dd> + <dt dir="rtl">JIT - کامپایلکردن موتورهای JavaScript</dt> + <dd dir="rtl">نسل جدید موتورهای JavaScript بسیار قدرتمندتر از نسل قبلی هستند که در اجرا و عملکرد برنامههای JavaScript بسیار تاثیرگذار هستند.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history">History API</a></dt> + <dd dir="rtl">اجازهی دستکاری تاریخچه (history) مرورگر را میدهد که این کار برای صفحاتی که شامل اطلاعات جدید هستند، مفید میباشد.</dd> + <dt dir="rtl"><a href="/en-US/docs/HTML/Content_Editable" title="/en-US/docs/HTML/Content_Editable">صفت contentEditable: وبسایت خود را به یک wiki تبدیل کنید!</a></dt> + <dd dir="rtl">HTML5 صفت contentEditable را استاندارد کرده است. دربارهی این ویژگی بیشتر بدانید.</dd> + <dt dir="rtl"><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="/en-US/docs/DragDrop/Drag_and_Drop">کشیدن و رهاکردن</a></dt> + <dd dir="rtl">API کشیدن و رهاکردن در HTML5 پشتیبانی از این عملیات را در وبسایتها و بین وبسایتها میسر میکند. همچنین یک API سادهتر را جهت استفاده در extensionها و برنامههای مبتنی بر Mozilla شامل میشود.</dd> + <dt dir="rtl"><a href="/en-US/docs/Focus_management_in_HTML" title="/en-US/docs/Focus_management_in_HTML">مدیریت Focus در HTML</a></dt> + <dd dir="rtl">صفتهای جدید <code>activeElement</code> و <code>hasFocus</code> در HTML5 پشتیبانی میشوند.</dd> + <dt dir="rtl"><a href="/en-US/docs/Web-based_protocol_handlers" title="/en-US/docs/Web-based_protocol_handlers">protocol handlerهای مبتنی بر وب</a></dt> + <dd dir="rtl">شما اکنون میتوانید برنامههای وب را با استفاده از متد <code>navigator.registerProtocolHandler()</code> به عنوان protocol handler ثبت کنید.</dd> + <dt dir="rtl"><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> + <dd dir="rtl">اجازهی کنترل رندرشدن انیمیشنها را برای دستیابی به عملکردی بهینه، میدهد.</dd> + <dt dir="rtl"><a href="/en-US/docs/DOM/Using_full-screen_mode" title="/en-US/docs/DOM/Using_full-screen_mode">Fullscreen API</a></dt> + <dd dir="rtl">چگونگی استفاده از حالت تمامصفحه را کنترل میکند، بدون اینکه واسط کاربری (پیشفرض) مرورگر نمایش داده شود.</dd> + <dt dir="rtl"><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd dir="rtl">اجازهی قفل شدن اشارهگر (ماوس) روی محتوا را میدهد، تا بازیها و برنامههای مشابه دیگر مشکل از دسترفتن focus را نداشته باشند.</dd> + <dt dir="rtl"><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">رخدادهای آنلاین و آفلاین</a></dt> + <dd dir="rtl">برای ایجاد یک برنامهی وب با قابلیت اجرای آفلاین، شما باید بدانید چه زمانی برنامهی شما واقعا در حالت آفلاین قرار میگیرد. همینطور باید بدانید چه زمانی برنامهی شما در حالت آفلاین باز میگردد.</dd> +</dl> + +<h2 dir="rtl" id="Device_access_(دسترسی_از_طریق_سایر_دستگاهها)" style="margin: 0px 0px 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Device access (دسترسی از طریق سایر دستگاهها)</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">استفاده از API دوربین</a></dt> + <dd dir="rtl">اجازهی استفاده، تغییر و ذخیرهسازی یک تصویر (عکس) را از دوربین رایانهی کاربر میدهد.</dd> + <dt dir="rtl"><a href="/en-US/docs/DOM/Touch_events" title="/en-US/docs/DOM/Touch_events">رخدادهای Touch</a></dt> + <dd dir="rtl">handlerهایی که به رخدادهای ایجادشده توسط کاربری که با صفحهی لمسی کار میکند، پاسخ میدهد.</dd> + <dt dir="rtl"><a href="/en-US/docs/Using_geolocation" title="/en-US/docs/Using_geolocation">استفاده از geolocation</a></dt> + <dd dir="rtl">این اجاره را به مرورگر میدهد تا موقعیت جغرافیایی کاربر را شناسایی کند.</dd> + <dt dir="rtl"><a href="/en-US/docs/Detecting_device_orientation" title="/en-US/docs/Detecting_device_orientation">شناسایی جهت دستگاه</a></dt> + <dd dir="rtl">این اجازه را به مرورگر میدهد تا هرگاه جهت دستگاهی که مرورگر روی آن کار میکند تغییر یافت، اطلاعات آن را دریافت کند. از این ویژگی میتوان به عنوان یک دستگاه ورودی استفاده کرد برای نمونه (ساخت بازیهایی که به تغییر جهت دستگاه واکنش نشان میدهند یا منطبق ساختن ظاهر یک صفحه با جهت نمایش دستگاه - افقی یا عمودی).</dd> + <dt dir="rtl"><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd dir="rtl">اجازهی قفل شدن اشارهگر (ماوس) روی محتوا را میدهد، تا بازیها و برنامههای مشابه دیگر مشکل از دسترفتن focus را نداشته باشند.</dd> +</dl> + +<h2 dir="rtl" id="Styling_(سبکدهی)" style="margin: 0px 0px 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Styling (سبکدهی)</h2> + +<p dir="rtl"><a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a> گسترش یافته است تا سبکدهی به عنصرها را به حالتی پیشرفتهتر منتقل کند. از این ویژگیها اغلب به عنوان <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a> یاد میشود، از این رو CSS دیگر یک استاندارد یکپارچه نیست و ماژولهای مختلف آن در سطح ۳ نیستند، بعضی در سطح ۱ و بعضی در سطح ۴، با تمام سطحهای میانی که وجود دارند.</p> + +<dl> + <dt dir="rtl">ویژگیهای جدید در سبکدهی تصویر پسزمینه</dt> + <dd dir="rtl">اکنون ایجاد سایه در یک عنصر (جعبه) با استفاده از {{ cssxref("box-shadow") }} میسر است و <a href="/en-US/docs/CSS/Multiple_backgrounds" title="/en-US/docs/CSS/Multiple_backgrounds">تصویرهای پسزمینهی چندگانه</a> قابل استفاده هستند.</dd> + <dt dir="rtl">حاشیههایی جذابتر</dt> + <dd dir="rtl">اکنون نه تنها میتوان با استفاده از تصویرها و به کارگیری {{ cssxref("border-image") }} ،حاشیهی عنصرها را ایجاد کرد بلکه کنارههای گرد (rounded-borders) نیز با استفاده از ویژگی {{ cssxref("border-radius") }} قابل پیادهسازی هستند.</dd> + <dt dir="rtl">پویانمایی</dt> + <dd dir="rtl">با استفاده از <a href="/en-US/docs/CSS/Using_CSS_transitions" title="/en-US/docs/CSS/Using_CSS_transitions">تبدیلات در CSS</a> برای پویانمایی بین حالتهای مختلف یا از <a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">پویانمایی در CSS</a> جهت پویانمایی بخشی از صفحه بدون نیاز به رخدادهای جاوااسکریپت، شما میتوانید عنصرهای متحرک در صفحهی خود را کنترل کنید.</dd> + <dt dir="rtl">بهبودهای ایجاد شده در Typography</dt> + <dd dir="rtl">توسعهدهندگان برای دسترسی به Typography بهتر اکنون کنترل بیشتری دارند. آنها میتوانند {{ cssxref("text-overflow") }} و <a href="/en-US/docs/CSS/hyphens" title="/en-US/docs/CSS/hyphens">فاصلهگذاری</a> را کنترل کنند، همچنین <a href="/en-US/docs/CSS/text-shadow" title="/en-US/docs/CSS/text-shadow">سایهای</a> که به متن اعمال میشود یا <a href="/en-US/docs/CSS/text-decoration" title="/en-US/docs/CSS/text-decoration">جزییاتمتن</a> را به دقت کنترل کنند. به لطف ویژگی {{ cssxref("@font-face") }} فونتهای مختلفی را میتوان به صفحهی خود پیوست کرد.</dd> + <dt dir="rtl">لایههای نمایشی جدید</dt> + <dd dir="rtl">در راستای ارتقای انعطافپذیری در طراحی، دو لایهی جدید افزوده شدهاند: <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="/en-US/docs/CSS/Using_CSS_multi-column_layouts">CSS multi-column layout</a> و <a href="/en-US/docs/CSS/Flexbox" title="/en-US/docs/CSS/Flexbox">CSS flexible box layout</a>.</dd> +</dl> +</div> +</div> diff --git a/files/fa/learn/css/index.html b/files/fa/learn/css/index.html new file mode 100644 index 0000000000..8dcf1c6dde --- /dev/null +++ b/files/fa/learn/css/index.html @@ -0,0 +1,67 @@ +--- +title: آموزش استایلدهی به HTML با استفاده از CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - Debugging + - Landing + - NeedsContent + - NeedsTranslation + - Style + - Topic + - TopicStub + - length + - specificity +translation_of: Learn/CSS +--- +<div style="direction: rtl;">{{LearnSidebar}}</div> + +<div style="direction: rtl;">شیوهنامههای آبشاری — یا {{glossary("CSS")}} — اولین فناوری است که شما پس از {{glossary("HTML")}} باید بیاموزید. HTML برای تعریف ساختار و معناشناسی محتوای شما به کار میرود و CSS برای تعیین سبک نمایش و چینش محتوای شما استفاده میشود. برای مثال، شما میتوانید به کمک CSS، فونت، رنگ، اندازهو فاصلهگذاری متن خود را تغییر دهید، آن را به چند ستون تقسیم کنید، یا به آن پویانمایی و امکانات نمایشی دیگر اضافه کنید.</div> + +<h2 id="مسیر_یادگیری" style="direction: rtl;">مسیر یادگیری</h2> + +<p style="direction: rtl;">شما پیش از هر گونه تلاش در CSS، ابتدا باید مقدمات HTML را بیاموزید. توصیه میکنیم ابتدا ماژول <a href="fa/docs/Learn/HTML/Introduction_to_HTML">معرفی HTML</a> را ببینید. در آن ماژول شما در مورد موارد زیر خواهید آموخت:</p> + +<ul> + <li>CSS, starting with the <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> module</li> + <li>More advanced <a href="/en-US/docs/Learn/HTML#Modules">HTML modules</a></li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages</li> +</ul> + +<p>Once you understand the fundamentals of HTML, we recommend that you learn HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting and much more fun to learn when you apply CSS, and you can't really learn CSS without knowing HTML.</p> + +<p>Before starting this topic, you should also be familiar with using computers and using the web passively (i.e., just looking at it, consuming the content). You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a> and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both of which are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> + +<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> before proceeding with this topic. However, doing so isn't absolutely necessary as much of what is covered in the CSS basics article is also covered in our <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> module, albeit in a lot more detail.</p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt> + <dd>This module gets you started with the basics of how CSS works, including using selectors and properties; writing CSS rules; applying CSS to HTML; specifying length, color, and other units in CSS; controlling cascade and inheritance; understanding box model basics; and debugging CSS.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt> + <dd>Here, we look at text-styling fundamentals, including setting font, boldness, and italics; line and letter spacing; and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page and styling lists and links.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> + <dd>Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module, we recap the box model, then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images, and fancy features such as drop shadows and filters on boxes.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> + <dd>At this point, we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now, it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.</dd> + <dt>Responsive design (TBD)</dt> + <dd>With so many different types of devices able to browse the web these days, <a href="/en-US/docs/Web/Guide/Responsive_design">responsive web design</a> (RWD) has become a core web development skill. This module will cover the basic principles and tools of RWD; explain how to apply different CSS to a document depending on device features like screen width, orientation, and resolution; and explore the technologies available for serving different videos and images depending on such features.</dd> +</dl> + +<h2 id="Solving_common_CSS_problems">Solving common CSS problems</h2> + +<p><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> provides links to sections of content explaining how to use CSS to solve very common problems when creating a web page.</p> + +<p>From the beginning, you'll primarily apply colors to HTML elements and their backgrounds; change the size, shape, and position of elements; and add and define borders on elements. But there's not much you can't do once you have a solid understanding of even the basics of CSS. One of the best things about learning CSS is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't actually know how to do it yet!</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt> + <dd>The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.</dd> +</dl> diff --git a/files/fa/learn/getting_started_with_the_web/css_basics/index.html b/files/fa/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..476aa382b9 --- /dev/null +++ b/files/fa/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,285 @@ +--- +title: CSS basics +slug: Learn/Getting_started_with_the_web/CSS_basics +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>CSS (Cascading Style Sheets) is the code you use to style your webpage. <em>CSS basics</em> takes you through what you need to get started. We'll answer questions like: How do I make my text black or red? How do I make my content show up in such-and-such a place on the screen? How do I decorate my webpage with background images and colors?</p> +</div> + +<h2 id="So_what_is_CSS_really">So what is CSS, really?</h2> + +<p>Like HTML, CSS is not really a programming language. It is not a <em>markup language</em> either — it is a <em>style sheet language</em>. This means that it lets you apply styles selectively to elements in HTML documents. For example, to select <strong>all</strong> the paragraph elements on an HTML page and turn the text within them red, you'd write this CSS:</p> + +<pre class="brush: css">p { + color: red; +}</pre> + +<p>Let's try it out: paste those three lines of CSS into a new file in your text editor, and then save the file as <code>style.css</code> in your <code>styles</code> directory.</p> + +<p>But we still need to apply the CSS to your HTML document. Otherwise, the CSS styling won't affect how your browser displays the HTML document. (If you haven't been following on with our project, read <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> and <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> to find out what you need to do first.)</p> + +<ol> + <li>Open your <code>index.html</code> file and paste the following line somewhere in the head (that is, between the {{HTMLElement("head")}} and <code></head></code> tags): + + <pre class="brush: html"><link href="styles/style.css" rel="stylesheet"></pre> + </li> + <li>Save <code>index.html</code> and load it in your browser. You should see something like this:</li> +</ol> + +<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">If your paragraph text is now red, congratulations! You've just written your first successful CSS.</p> + +<h3 id="Anatomy_of_a_CSS_ruleset">Anatomy of a CSS ruleset</h3> + +<p>Let's look at the above CSS in a bit more detail:</p> + +<p><img alt="CSS p declaration color red" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p> + +<p>The whole structure is called a <strong>rule set </strong>(but often "rule" for short). Note the names of the individual parts:</p> + +<dl> + <dt>Selector</dt> + <dd>The HTML element name at the start of the rule set. It selects the element(s) to be styled (in this case, {{HTMLElement("p")}} elements). To style a different element, just change the selector.</dd> + <dt>Declaration</dt> + <dd>A single rule like <code>color: red;</code> specifying which of the element's <strong>properties</strong><strong> </strong>you want to style.</dd> + <dt>Properties</dt> + <dd>Ways in which you can style a given HTML element. (In this case, <code>color</code> is a property of the {{htmlelement("p")}} elements.) In CSS, you choose which properties you want to affect in your rule.</dd> + <dt>Property value</dt> + <dd>To the right of the property, after the colon, we have the <strong>property value</strong>, which chooses one out of many possible appearances for a given property (there are many <code>color</code> values besides <code>red</code>).</dd> +</dl> + +<p>Note the other important parts of the syntax:</p> + +<ul> + <li>Each rule set (apart from the selector) must be wrapped in curly braces (<code>{}</code>).</li> + <li>Within each declaration, you must use a colon (<code>:</code>) to separate the property from its values.</li> + <li>Within each rule set, you must use a semicolon (<code>;</code>) to separate each declaration from the next one.</li> +</ul> + +<p>So to modify multiple property values at once, you just need to write them separated by semicolons, like this:</p> + +<pre class="brush: css">p { + color: red; + width: 500px; + border: 1px solid black; +}</pre> + +<h3 id="Selecting_multiple_elements">Selecting multiple elements</h3> + +<p>You can also select multiple types of elements and apply a single rule set to all of them. Multiple selectors are separated by commas. For example:</p> + +<pre class="brush: css">p, li, h1 { + color: red; +}</pre> + +<h3 id="Different_types_of_selectors">Different types of selectors</h3> + +<p>There are many different types of selectors. Above, we only looked at <strong>element selectors</strong>, which select all elements of a given type in the given HTML documents. But we can make more specific selections than that. Here are some of the more common types of selectors:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector name</th> + <th scope="col">What does it select</th> + <th scope="col">Example</th> + </tr> + </thead> + <tbody> + <tr> + <td>Element selector (sometimes called a tag or type selector)</td> + <td>All HTML element(s) of the specified type.</td> + <td><code>p</code><br> + Selects <code><p></code></td> + </tr> + <tr> + <td>ID selector</td> + <td>The element on the page with the specified ID. On a given HTML page, it's best practice to use one element per ID (and of course one ID per element) even though you are allowed to use same ID for multiple elements.</td> + <td><code>#my-id</code><br> + Selects <code><p id="my-id"></code> and <code><a id="my-id"></code></td> + </tr> + <tr> + <td>Class selector</td> + <td>The element(s) on the page with the specified class (multiple class instances can appear on a page).</td> + <td><code>.my-class</code><br> + Selects <code><p class="my-class"></code> and <code><a class="my-class"></code></td> + </tr> + <tr> + <td>Attribute selector</td> + <td>The element(s) on the page with the specified attribute.</td> + <td><code>img[src]</code><br> + Selects <code><img src="myimage.png"></code> but not <code><img></code></td> + </tr> + <tr> + <td>Pseudo-class selector</td> + <td>The specified element(s), but only when in the specified state (e.g. being hovered over).</td> + <td><code>a:hover</code><br> + Selects <code><a></code>, but only when the mouse pointer is hovering over the link.</td> + </tr> + </tbody> +</table> + +<p>There are many more selectors to explore, and you can find a more detailed list in our <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Selectors guide</a>.</p> + +<h2 id="Fonts_and_text">Fonts and text</h2> + +<p>Now that we've explored some CSS basics, let's start adding some more rules and information to our <code>style.css</code> file to make our example look nice. Let's start by getting our fonts and text to look a little better.</p> + +<ol> + <li>First of all, go back and find the <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">output from Google Fonts</a> that you stored somewhere safe. Add the {{htmlelement("link")}} element somewhere inside your <code>index.html</code>'s head (again, anywhere between the {{HTMLElement("head")}} and <code></head></code> tags). It'll look something like this: + + <pre class="brush: html"><link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></pre> + This code links your page to a stylesheet that downloads the Open Sans font family along with your web page and enables you to set it on your HTML elements using your own style sheet.</li> + <li>Next, delete the existing rule you have in your <code>style.css</code> file. It was a good test, but red text doesn't actually look very good.</li> + <li>Add the following lines in its place, replacing the placeholder line with the actual <code>font-family</code> line you got from Google Fonts. (<code>font-family</code> just means the font(s) you want to use for your text.) This rule first sets a global base font and font size for the whole page (since {{HTMLElement("html")}} is the parent element of the whole page, and all elements inside it inherit the same <code>font-size</code> and <code>font-family</code>): + <pre class="brush: css">html { + font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high */ + font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google fonts */ +}</pre> + + <div class="note"> + <p><strong>Note</strong>: Anything in a CSS document between <code>/*</code> and <code>*/</code> is a <strong>CSS comment</strong>, which the browser ignores when it renders the code. This is a place for you to write helpful notes on what you are doing.</p> + </div> + </li> + <li>Now we'll set font sizes for text-containing elements inside the HTML body ({{htmlelement("h1")}}, {{htmlelement("li")}}, and {{htmlelement("p")}}). We'll also center the text of our heading and set some line height and letter spacing on the body content to make it a bit more readable: + <pre class="brush: css">h1 { + font-size: 60px; + text-align: center; +} + +p, li { + font-size: 16px; + line-height: 2; + letter-spacing: 1px; +}</pre> + </li> +</ol> + +<p>You can adjust these <code>px</code> values to whatever you like to get your design looking how you want, but in general your design should look like this:</p> + +<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p> + +<h2 id="Boxes_boxes_its_all_about_boxes">Boxes, boxes, it's all about boxes</h2> + +<p>One thing you'll notice about writing CSS is that a lot of it is about boxes — setting their size, color, position, etc. Most of the HTML elements on your page can be thought of as boxes sitting on top of each other.</p> + +<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p> + +<p>Not surprisingly, CSS layout is based principally on the <em>box model. </em>Each of the blocks taking up space on your page has properties like this:</p> + +<ul> + <li><code>padding</code>, the space just around the content (e.g., around paragraph text).</li> + <li><code>border</code>, the solid line that sits just outside the padding.</li> + <li><code>margin</code>, the space around the outside of the element.</li> +</ul> + +<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p> + +<p>In this section we also use:</p> + +<ul> + <li><code>width</code> (of an element).</li> + <li><code>background-color</code>, the color behind an element's content and padding.</li> + <li><code>color</code>, the color of an element's content (usually text).</li> + <li><code>text-shadow</code>: sets a drop shadow on the text inside an element.</li> + <li><code>display</code>: sets the display mode of an element (don't worry about this yet).</li> +</ul> + +<p>So, let's get started and add some more CSS to our page! Keep adding these new rules to the bottom of the page, and don't be afraid to experiment with changing values to see how it turns out.</p> + +<h3 id="Changing_the_page_color">Changing the page color</h3> + +<pre class="brush: css">html { + background-color: #00539F; +}</pre> + +<p>This rule sets a background color for the whole page. Change the color code above to whatever color <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color">you chose when planning your site</a>.</p> + +<h3 id="Sorting_the_body_out">Sorting the body out</h3> + +<pre class="brush: css">body { + width: 600px; + margin: 0 auto; + background-color: #FF9500; + padding: 0 20px 20px 20px; + border: 5px solid black; +}</pre> + +<p>Now for the {{htmlelement("body")}} element. There are quite a few declarations here, so let's go through them all one by one:</p> + +<ul> + <li><code>width: 600px;</code> — this forces the body to always be 600 pixels wide.</li> + <li><code>margin: 0 auto;</code> — When you set two values on a property like <code>margin</code> or <code>padding</code>, the first value affects the element's top <strong>and</strong> bottom side (make it <code>0</code> in this case), and the second value the left <strong>and</strong> right side (here, <code>auto</code> is a special value that divides the available horizontal space evenly between left and right). You can also use one, three, or four values, as documented <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Syntax">here</a>.</li> + <li><code>background-color: #FF9500;</code> — as before, this sets the element's background color. We've used a sort of reddish orange for the body as opposed to dark blue for the {{htmlelement("html")}} element, but feel free to go ahead and experiment.</li> + <li><code>padding: 0 20px 20px 20px;</code> — we have four values set on the padding, to make a bit of space around our content. This time we are setting no padding on the top of the body, and 20 pixels on the left, bottom and right. The values set top, right, bottom, left, in that order. As with <code>margin</code>, you can also use one, two or three values, as documented on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding#Syntax">padding syntax</a>.</li> + <li><code>border: 5px solid black;</code> — this takes values for the width, style and color of the border, in our case simply setting a 5-pixel–wide, solid black border on all sides of the body.</li> +</ul> + +<h3 id="Positioning_and_styling_our_main_page_title">Positioning and styling our main page title</h3> + +<pre class="brush: css">h1 { + margin: 0; + padding: 20px 0; + color: #00539F; + text-shadow: 3px 3px 1px black; +}</pre> + +<p>You may have noticed there's a horrible gap at the top of the body. That happens because browsers apply some <strong>default styling</strong> to the {{htmlelement("h1")}} element (among others), even when you haven't applied any CSS at all! That might sound like a bad idea, but we want even an unstyled webpage to have basic readability. To get rid of the gap we overrode the default styling by setting <code>margin: 0;</code>.</p> + +<p>Next up, we've set the heading's top and bottom padding to 20 pixels, and made the heading text the same color as the HTML background color.</p> + +<p>One rather interesting property we've used here is <code>text-shadow</code>, which applies a text shadow to the text content of the element. Its four values are as follows:</p> + +<ul> + <li>The first pixel value sets the <strong>horizontal offset</strong> of the shadow from the text — how far it moves across: a negative value should move it to the left.</li> + <li>The second pixel value sets the <strong>vertical offset</strong> of the shadow from the text — how far it moves down, in this example; a negative value should move it up.</li> + <li>The third pixel value sets the <strong>blur radius</strong> of the shadow — a bigger value will mean a more blurry shadow.</li> + <li>The fourth value sets the base color of the shadow.</li> +</ul> + +<p>Again, try experimenting with different values to see what you can come up with!</p> + +<h3 id="Centering_the_image">Centering the image</h3> + +<pre class="brush: css">img { + display: block; + margin: 0 auto; +}</pre> + +<p>Finally, we'll center the image to make it look better. We could use the <code>margin: 0 auto</code> trick again as we did earlier for the body, but we also need to do something else. The {{htmlelement("body")}} element is <strong>block level</strong>, meaning it takes up space on the page and can have margin and other spacing values applied to it. Images, on the other hand, are <strong>inline</strong> elements, meaning they can't. So to apply margins to the image, we have to give the image block-level behavior using <code>display: block;</code>.</p> + +<div class="note"> +<p><strong>Note</strong>: The instructions above assume that you're using an image smaller than the width set on the body (600 pixels). If your image is larger, then it will overflow the body and spill out to the rest of the page. To rectify this, you can either 1) reduce the image's width using a <a href="https://en.wikipedia.org/wiki/Raster_graphics_editor">graphics editor</a>, or 2) size the image using CSS by setting the {{cssxref("width")}} property on the <code><img></code> element with a smaller value (e.g., <code>400 px;</code>).</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Don't worry if you don't yet understand <code>display: block;</code> and the block-level/inline distinction. You will as you study CSS in more depth. You can find out more about the different available display values at our <a href="/en-US/docs/Web/CSS/display">display reference page</a>.</p> +</div> + +<h2 id="Conclusion">Conclusion</h2> + +<p>If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also <a href="http://mdn.github.io/beginner-html-site-styled/">view our version here</a>):</p> + +<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p> + +<p>If you get stuck, you can always compare your work with our <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">finished example code on GitHub</a>.</p> + +<p>Here, we have only really scratched the surface of CSS. To find out more, go to our <a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS Learning topic</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li> + <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li> + <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li> + <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li> + <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li> + <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li> + <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li> + <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> +</ul> diff --git a/files/fa/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/fa/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..909367a03f --- /dev/null +++ b/files/fa/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,100 @@ +--- +title: سر و کله زدن با فایل ها +slug: Learn/Getting_started_with_the_web/Dealing_with_files +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary" dir="rtl"> +<p> یک وب سایت شامل فایل های زیادی است : مانند محتوای متنی,کد ها,صفحه بندی ها ,محتوای رسانه ای و موارد دیگر .<br> + وقتی شما در حال ساختن یک وب سایت هستید,شما باید تمام این فایل ها و محتوا را در یک ساختار درست و منطقی در رایانه خودتان بکار ببرید و مطمئن شوید که با یک دیگر ارتباط برقرار می کنند و تمام محتوا درست به نظر می رسند , قبل از اینکه به آن ها را به سرور اصلی آپلود کنید. <br> + سر و کله زدن با فایل ها ممکن است مشکلاتی به وجود بیاورد بنابرین شما باید آگاهانه یک ساختار محتاطانه برای خود درست کنید که مشکلات کمتری ظاهر شوند.</p> +</div> + +<h2 dir="rtl" id="وب_سایت_شما_باید_در_کجای_رایانه_قرار_بگیرد؟">وب سایت شما باید در کجای رایانه قرار بگیرد؟</h2> + +<p dir="rtl"> وقتی شما به صورت محلی(در رایانه خودتان) مشغول کار بر روی سایتی هستید,شما باید تمام فایل های مرتبط با سایت شما باید در یک پوشه جمع آوری و نگهداری شوند که ساختار فایل سایت شما را در سرور شامل میشود.<br> + این پوشه می تواند در هر جایی قرار بگیرد ولی توصیه می شود که در مکانی که به راحتی قابل دسترس باشد قرار بگیرد مثل دسکتاپ و ....</p> + +<ol dir="rtl"> + <li>یک مکان برای ذخیره سازی پروژه سایت خود انتخاب کنید.در آنجا یک پوشه جدید به نام پروژه-وب یا چیزی شبیه آن انتخاب کنید. این جایی است که پروژه وب سایت شما ساخته می شود.</li> + <li>در پوشه اول (پروژه-وب) یک پوشه دیگر برای ذخیره سازی اولین سایت خود ایجاد کنید به نام سایت-آزمایشی یا چیزی شبیه آن.</li> +</ol> + +<h2 dir="rtl" id="قرار_دادن_جای_خالی_را_کنار_بگذارید">قرار دادن جای خالی را کنار بگذارید</h2> + +<p dir="rtl">شما در حین مطالعه این مقاله متوجه می شوید که در انتخاب نام پوشه و فایل هایتان باید از حروف کوچک و بدون فاصله (space) و جای خالی استفاده کنید.</p> + +<ol dir="rtl"> + <li>بسیاری از رایانه ها بخصوص رایانه های سرور به حروف حساس اند . برای مثال اگر شما عکسی را در سایتتان قرار دهید test-site/MyImage.jpg و بعدا در در فایل دیگری بخواهید از ان استفاده کنید مثل test-site/myimage.jpg ممکن است که کار نکند.</li> + <li>مرورگرها,وب سرور ها, زبان های برنامه نویسی نمی توانند جای خالی (space) را پردازش کنند. برای مثال اگر شما از جای خالی در نامگذاری فایل هایتان استفاده کرده باشد بعضی از سیستم ها ان را به عنوان دو فایل جدا گانه در نظر می گیرند. بعضی از سرور ها ان را با %20 (کد کاراکتر space در url) جایگزین می کنند که باعث خرابی می شود .بهتر است از - به جای space استفاده کنید مثل <code>my-file.html </code>یا <code>my_file.html (خط تیره از اندر لاین بهتر است)</code></li> +</ol> + + + +<p dir="rtl">کوتاه ترین جواب این است که از خط تیره برای اسم فایل های خود استفاده کنید . موتور جست و جوی گوگل خط تیره را به عنوان جدا کننده کلمه به حساب می آورد ولی با آندرلاین اینگونه برخورد نمی کند . برای همین دلایل بهتر است عادت کنیم که نام فایل ها و فولدر ها را با حروف کوچک و بدون فاصله و با جداکننده خط تیره بنویسیم . حداقل حالا که می دونید چه کار می کنید . این راه شما را در آینده در این مسیر با مشکلات کمتری مواجه خواهد کرد .</p> + +<h2 dir="rtl" id="ساختار_وب_سایت_شما_چگونه_باید_باشد؟">ساختار وب سایت شما چگونه باید باشد؟</h2> + +<p dir="rtl"></p> + +<ol> + <li><code><strong>index.html</strong></code>: This file will generally contain your homepage content, that is, the text and images that people see when they first go to your site. Using your text editor, create a new file called <code>index.html</code> and save it just inside your <code>test-site</code> folder.</li> + <li><strong><code>images</code> folder</strong>: This folder will contain all the images that you use on your site. Create a folder called <code>images</code>, inside your <code>test-site</code> folder.</li> + <li><strong><code>styles</code> folder</strong>: This folder will contain the CSS code used to style your content (for example, setting text and background colors). Create a folder called <code>styles</code>, inside your <code>test-site</code> folder.</li> + <li><strong><code>scripts</code> folder</strong>: This folder will contain all the JavaScript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). Create a folder called <code>scripts</code>, inside your <code>test-site</code> folder.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: On Windows computers, you might have trouble seeing the file names, because Windows has an annoying option called <strong>Hide extensions for known file types</strong> turned on by default. Generally you can turn this off by going to Windows Explorer, selecting the <strong>Folder options...</strong> option, unchecking the <strong>Hide extensions for known file types</strong> checkbox, then clicking <strong>OK</strong>. For more specific information covering your version of Windows, do a Yahoo search!</p> +</div> + +<h2 id="File_paths">File paths</h2> + +<p>To make files talk to one another, you have to provide a file path between them — basically a route so one file knows where another one is. To demonstrate this, we will insert a little bit of HTML into our <code>index.html</code> file, and make it display the image you chose in the article <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"What will your website look like?"</a></p> + +<ol> + <li>Copy the image you chose earlier into your <code>images</code> folder.</li> + <li>Open up your <code>index.html</code> file, and insert the following code into the file exactly as shown. Don't worry about what it all means for now — we'll look at the structures in more detail later in the series. + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <img src="" alt="My test image"> + </body> +</html> </pre> + </li> + <li>The line <code><img src="" alt="My test image"></code> is the HTML code that inserts an image into the page. We need to tell the HTML where the image is. The image is inside the <em>images</em> directory, which is in the same directory as <code>index.html</code>. To walk down the file structure from <code>index.html</code> to our image, the file path we'd need is <code>images/your-image-filename</code>. For example, our image is called <code>firefox-icon.png</code>, so the file path is <code>images/firefox-icon.png</code>.</li> + <li>Insert the file path into your HTML code between the double quote marks of the <code>src=""</code> code.</li> + <li>Save your HTML file, then load it in your web browser (double-click the file). You should see your new webpage displaying your image!</li> +</ol> + +<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p> + +<p>Some general rules for file paths:</p> + +<ul> + <li>To link to a target file in the same directory as the invoking HTML file, just use the filename, e.g. <code>my-image.jpg</code>.</li> + <li>To reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g. <code>subdirectory/my-image.jpg</code>.</li> + <li>To link to a target file in the directory <strong>above</strong> the invoking HTML file, write two dots. So for example, if <code>index.html</code> was inside a subfolder of <code>test-site</code> and <code>my-image.jpg</code> was inside <code>test-site</code>, you could reference <code>my-image.jpg</code> from <code>index.html</code> using <code>../my-image.jpg</code>.</li> + <li>You can combine these as much as you like, for example <code>../subdirectory/another-subdirectory/my-image.jpg</code>.</li> +</ul> + +<p>For now, this is about all you need to know.</p> + +<div class="note"> +<p><strong>Note</strong>: The Windows file system tends to use backslashes, not forward slashes, e.g. <code>C:\windows</code>. This doesn't matter in HTML — even if you are developing your web site on Windows, you should still use forward slashes in your code.</p> +</div> + +<h2 id="What_else_should_be_done">What else should be done?</h2> + +<p>That is about it for now. Your folder structure should look something like this:</p> + +<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/fa/learn/getting_started_with_the_web/html_basics/index.html b/files/fa/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..7369897a74 --- /dev/null +++ b/files/fa/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,228 @@ +--- +title: HTML basics +slug: Learn/Getting_started_with_the_web/HTML_basics +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p dir="rtl">اچ تی ام ال (زبان نشانه گذاری ابرمتن) کدی است که از آن برای ساختن یک صفحه وب و محتوای آن استفاده میشود. به طور مثال، محتوا را میتوان در مجموعه ای از پاراگرافها، لیست ها یا با استفاده از تصاویر و جداول داده ساختاربندی کرد. همانطور که عنوان نشان میدهد، این مقاله به شما یک درک اولیه از HTML و عملکرد آن خواهد داد.</p> +</div> + +<h2 id="So_what_is_HTML_really">So what is HTML, really?</h2> + +<p>HTML is not a programming language; it is a <em>markup language</em> that defines the structure of your content. HTML consists of a series of <strong>{{Glossary("element", "elements")}}</strong>, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing {{Glossary("tag", "tags")}} can make a word or image hyperlink to somewhere else, can italicize words, and can make font bigger or smaller, and so on. For example, take the following line of content:</p> + +<pre>My cat is very grumpy</pre> + +<p>If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:</p> + +<pre class="brush: html"><p>My cat is very grumpy</p></pre> + +<h3 id="Anatomy_of_an_HTML_element">Anatomy of an HTML element</h3> + +<p>Let's explore this paragraph element a bit further.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>The main parts of our element are:</p> + +<ol> + <li><strong>The opening tag:</strong> This consists of the name of the element (in this case, p), wrapped in opening and closing <strong>angle brackets</strong>. This states where the element begins, or starts to take effect — in this case where the paragraph begins.</li> + <li><strong>The closing tag:</strong> This is the same as the opening tag, except that it includes a <em>forward slash</em> before the element name. This states where the element ends — in this case where the end of the paragraph is. Failing to include a closing tag is one of the common beginner errors and can lead to strange results.</li> + <li><strong>The content:</strong> This is the content of the element, which in this case is just text.</li> + <li><strong>The element:</strong> The opening tag, the closing tag, and the content together comprise the element.</li> +</ol> + +<p>Elements can also have attributes, which look like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Attributes contain extra information about the element that you don't want to appear in the actual content. Here, <code>class</code> is the attribute <em>name</em>, and <code>editor-note</code> is the attribute <em>value</em>. The <code>class</code> attribute allows you to give the element an identifier that can be later used to target the element with style information and other things.</p> + +<p>An attribute should always have:</p> + +<ol> + <li>A space between it and the element name (or the previous attribute, if the element already has one or more attributes).</li> + <li>The attribute name, followed by an equals sign.</li> + <li>Opening and closing quote marks wrapped around the attribute value. </li> +</ol> + +<h3 id="Nesting_elements">Nesting elements</h3> + +<p>You can put elements inside other elements too — this is called <strong>nesting</strong>. If we wanted to state that our cat is <strong>very</strong> grumpy, we could wrap the word "very" in a {{htmlelement("strong")}} element, which means that the word is to be strongly emphasized:</p> + +<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> + +<p>You do however need to make sure that your elements are properly nested: in the example above we opened the {{htmlelement("p")}} element first, then the {{htmlelement("strong")}} element, therefore we have to close the {{htmlelement("strong")}} element first, then the {{htmlelement("p")}}. The following is incorrect:</p> + +<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> + +<p>The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap like above, then your web browser will try to make a best guess at what you were trying to say, which can lead to unexpected results. So don't do it!</p> + +<h3 id="Empty_elements">Empty elements</h3> + +<p>Some elements have no content, and are called <strong>empty elements</strong>. Take the {{htmlelement("img")}} element we already have in our HTML:</p> + +<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p>This contains two attributes, but there is no closing <code></img></code> tag, and no inner content. This is because an image element doesn't wrap content to have an effect on it. Its purpose is to embed an image in the HTML page in the place it appears.</p> + +<h3 id="Anatomy_of_an_HTML_document">Anatomy of an HTML document</h3> + +<p>That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's revisit the code we put into our <code>index.html</code> example (which we first met in the <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> article):</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <img src="images/firefox-icon.png" alt="My test image"> + </body> +</html></pre> + +<p>Here we have:</p> + +<ul> + <li><code><!DOCTYPE html></code> — the doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days no one really cares about them, and they are really just a historical artefact that needs to be included for everything to work right. For now, that's all you need to know.</li> + <li><code><html></html></code> — the {{htmlelement("html")}} element. This element wraps all the content on the entire page, and is sometimes known as the root element.</li> + <li><code><head></head></code> — the {{htmlelement("head")}} element. This element acts as a container for all the stuff you want to include on the HTML page that <em>isn't</em> the content you are showing to your page's viewers. This includes things like {{Glossary("keyword", "keywords")}} and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.</li> + <li><code><body></body></code> — the {{htmlelement("body")}} element. This contains <em>all</em> the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.</li> + <li><code><meta charset="utf-8"></code> — this element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of human written languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.</li> + <li><code><title></title></code> — the {{htmlelement("title")}} element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favourite it.</li> +</ul> + +<h2 id="Images">Images</h2> + +<p>Let's turn our attention to the {{htmlelement("img")}} element again:</p> + +<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p>As we said before, it embeds an image into our page in the position it appears. It does this via the <code>src</code> (source) attribute, which contains the path to our image file.</p> + +<p>We have also included an <code>alt</code> (alternative) attribute. In this attribute, you specify descriptive text for users who cannot see the image, possibly because:</p> + +<ol> + <li>They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.</li> + <li>Something has gone wrong causing the image to not display. For example, try deliberately changing the path inside your <code>src</code> attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p> + +<p>The key words about alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth."</p> + +<p>Try coming up with some better alt text for your image now.</p> + +<div class="note"> +<p><strong>Note</strong>: Find out more about accessibility at <a href="/en-US/docs/Web/Accessibility">MDN's Accessibility landing page</a>.</p> +</div> + +<h2 id="Marking_up_text">Marking up text</h2> + +<p>This section will cover some of the basic HTML elements you'll use for marking up text.</p> + +<h3 id="Headings">Headings</h3> + +<p>Heading elements allow you to specify that certain parts of your content are headings — or subheadings — of your content. In the same way that a book has a main title, chapter titles and subtitles, an HTML document can too. HTML contains six heading levels, {{htmlelement("h1")}}–{{htmlelement("h6")}} although you'll commonly only use 3–4 at most:</p> + +<pre class="brush: html"><h1>My main title</h1> +<h2>My top level heading</h2> +<h3>My subheading</h3> +<h4>My sub-subheading</h4></pre> + +<p>Now try adding a suitable title to your HTML page just above your {{htmlelement("img")}} element.</p> + +<h3 id="Paragraphs">Paragraphs</h3> + +<p>As explained above, {{htmlelement("p")}} elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content:</p> + +<pre class="brush: html"><p>This is a single paragraph</p></pre> + +<p>Add your sample text (you should have it from <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>What should your website look like?</em></a>) into one or a few paragraphs, placed directly below your {{htmlelement("img")}} element.</p> + +<h3 id="Lists">Lists</h3> + +<p>A lot of the web's content is lists, and HTML has special elements for these. Marking up lists always consist of at least two elements. The most common list types are ordered and unordered lists:</p> + +<ol> + <li><strong>Unordered lists</strong> are for lists where the order of the items doesn't matter, like a shopping list. These are wrapped in a {{htmlelement("ul")}} element.</li> + <li><strong>Ordered lists</strong> are for lists where the order of the items does matter, like a recipe. These are wrapped in an {{htmlelement("ol")}} element.</li> +</ol> + +<p>Each item inside the lists is put inside an {{htmlelement("li")}} (list item) element.</p> + +<p>For example, if we wanted to turn the part of the following paragraph fragment into a list:</p> + +<pre class="brush: html"><p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p></pre> + +<p>We could modify the markup to this:</p> + +<pre class="brush: html"><p>At Mozilla, we’re a global community of</p> + +<ul> + <li>technologists</li> + <li>thinkers</li> + <li>builders</li> +</ul> + +<p>working together ... </p></pre> + +<p>Try adding an ordered or unordered list to your example page.</p> + +<h2 id="Links">Links</h2> + +<p>Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — {{htmlelement("a")}} — the "a" being short for "anchor". To make text within your paragraph into a link, follow these steps:</p> + +<ol> + <li>Choose some text. We chose the text "Mozilla Manifesto".</li> + <li>Wrap the text in an {{htmlelement("a")}} element, like so: + <pre class="brush: html"><a>Mozilla Manifesto</a></pre> + </li> + <li>Give the {{htmlelement("a")}} element an <code>href</code> attribute, like so: + <pre class="brush: html"><a href="">Mozilla Manifesto</a></pre> + </li> + <li>Fill in the value of this attribute with the web address that you want the link to link to: + <pre class="brush: html"><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a></pre> + </li> +</ol> + +<p>You might get unexpected results if you omit the <code>https://</code> or <code>http://</code> part, called the <em>protocol</em>, at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.</p> + +<div class="note"> +<p><code>href</code> might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for <em><strong>h</strong>ypertext <strong>ref</strong>erence</em>.</p> +</div> + +<p>Add a link to your page now, if you haven't already done so.</p> + +<h2 id="Conclusion">Conclusion</h2> + +<p>If you have followed all the instructions in this article, you should end up with a page that looks like the one below (you can also <a href="http://mdn.github.io/beginner-html-site/">view it here</a>):<br> + <br> + <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p> + +<p>If you get stuck, you can always compare your work with our <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">finished example code</a> on GitHub.</p> + +<p>Here, we have only really scratched the surface of HTML. To find out more, go to our <a href="/en-US/Learn/HTML">HTML Learning topic</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p> + +<p> </p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li> + <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li> + <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li> + <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li> + <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li> + <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li> + <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li> + <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> +</ul> + +<p> </p> diff --git a/files/fa/learn/getting_started_with_the_web/index.html b/files/fa/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..963acd5a17 --- /dev/null +++ b/files/fa/learn/getting_started_with_the_web/index.html @@ -0,0 +1,64 @@ +--- +title: شروع برنامه نویسی وب +slug: Learn/Getting_started_with_the_web +tags: + - Beginner + - CSS + - Design + - Guide + - HTML + - Index + - NeedsTranslation + - TopicStub + - publishing + - theory + - انتشار + - ترجمه + - راهنما + - طراحی + - مقدماتی +translation_of: Learn/Getting_started_with_the_web +--- +<p dir="rtl">{{LearnSidebar}}</p> + +<p class="summary" dir="rtl">در این سری از مقالات، به طور مختصر و کوتاه به معرفی برنامه نویسی وب می پردازیم. سپس شیوه ی نصب ابزارهای مورد نیاز برای ساخت یک وب سایت ساده را می آموزیم و کدهای ساده و اولیه ی نوشته شده را اجرا می کنیم. </p> + +<h2 dir="rtl" id="مقدمه_ای_در_مورد_ساخت_اولین_سایت_توسط_شما">مقدمه ای در مورد ساخت اولین سایت توسط شما</h2> + +<p dir="rtl">برای ساختن یک وب سایت حرفه ای، کارهای بسیاری باید انجام دهید؛ بنابراین اگر شما در حرفه ی طراحی سایت تازه کار هستید، توصیه می کنیم که ذره ذره آن را بیاموزید و ناامید نشوید. <br> + ساختن سایتی مثل فیسبوک کار دشواری است و تجربه میخواهد، اما ساختن وبسایت ساده خودتان سخت نیست ، بنابراین خودتان را برای انجام این کار آماده کنید. </p> + +<p dir="rtl">با تمرین و مطالعه مقالاتی که در لیست زیر به ترتیب آمده، شما بدون هیچ پیش زمینه ای قادر به ساخت اولین صفحه وبتان خواهید بود.بزن بریم!</p> + +<h3 dir="rtl" id="آموزش_نصب_نرم_افزارهای_مورد_نیاز"><a href="/fa/docs/Learn/Getting_started_with_the_web/نصب_نرم_افزارهای_پایه">آموزش نصب نرم افزارهای مورد نیاز</a></h3> + +<p dir="rtl">نرم افزارهای بسیار زیادی برای طراحی وب وجود دارد. از این رو اگر شما تازه شروع به برنامه نویسی وب کرده باشید، ممکن است این ویرایشگرها، فریمورکها و ابزارهای تست موجب سردرگمی شما شده باشند. <br> + در بخش <a href="/fa/docs/Learn/Getting_started_with_the_web">آموزش نصب نرم افزارهای مورد نیاز</a>، به صورت گام به گام به نصب نرم افزارهای مورد نیاز جهت طراحی وب برای مبتدیان می پردازیم. </p> + +<h3 dir="rtl" id="می_خواهید_ظاهر_سایت_شما_چگونه_باشد؟"><a href="/fa/docs/Learn/Getting_started_with_the_web/وب_سایت_شما_چه_شکلی_است؟">می خواهید ظاهر سایت شما چگونه باشد؟</a></h3> + +<p dir="rtl">قبل از اینکه شروع به کدنویسی برای سایت خود کنید، خوب است که طرح آن را در ذهن خود مجسم کنید.چه اطلاعاتی را قراراست نمایش دهید؟ چه فونتها و رنگهایی را استفاده می کنید؟ و اینکه <a href="/fa/docs/Learn/Getting_started_with_the_web">می خواهید ظاهر سایت شما چگونه باشد</a>. در ادامه ی این مقاله، روش ساده ای را به شما توضیح میدهیم تا بتوانید نقشه محتوا و طرح سایت خود را دنبال کنید.</p> + +<h3 dir="rtl" id="کار_با_فایل_ها"><a href="/fa/docs/Learn/Getting_started_with_the_web/Dealing_with_files">کار با فایل ها</a></h3> + +<p dir="rtl">یک وبسایت از فایلهای زیادی تشکیل شده است: محتوای متنی، کد، شیوه نامه ها(stylesheets)، محتوای رسانه و ... . شما نیاز دارید این فایلها را با ساختاری معقول گرد هم بیاورید وازاینکه با هم ارتباط برقرار میکنند اطمینان حاصل کنید.بخش <a href="/fa/docs/Learn/Getting_started_with_the_web/Dealing_with_files">کار با فایل ها</a> روش ساخت یک ساختار فایل منطقی برای وبسایتتان و مشکلاتی که از آنها بهتراست مطلع باشید را توضیح می دهد.<a href="/fa/docs/Learn/Getting_started_with_the_web/Dealing_with_files"> </a></p> + +<h3 dir="rtl" id="مقدمات_HTML"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics">مقدمات HTML</a></h3> + +<p dir="rtl">Hypertext Markup Language یا به اختصار HTML، کدی است که برای ساخت محتوای وب سایت خود از آن استفاده می کنید و به آن معنا و روح می بخشد. مثلاً تعیین می کند که محتوای اینجا مجموعه ای از پاراگراف ها است یا لیستی از بولت پوینت(bullet point)؟ آیا در صفحه ام تصویری الحاق شده است؟ آیا جدول داده دارم؟ بطور خلاصه <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics">مقدمات HTML</a> شما را به صورت کلی با HTML آشنا می کند.</p> + +<h3 dir="rtl" id="مقدمات_CSS"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics">مقدمات CSS</a></h3> + +<p dir="rtl">Cascading Stylesheets یا بصورت خلاصه CSS کدی است که برای ساخت ظاهر وب سایتتان از آن استفاده می کنید. مثلاً می خواهید متن سیاه باشد یا قرمز؟ محتوا در کجای صفحه نمایش قرار بگیرد؟ چه تصاویر پس زمینه یا رنگ هایی برای <span dir="ltr" lang="fa">تزئین</span> وب سایتتان استفاده شود؟ <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics">مقدمات CSS</a> دقیقا می گوید که برای شروع چه کار باید انجام دهید.</p> + +<h3 dir="rtl" id="مقدمات_JavaScript"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">مقدمات JavaScript</a></h3> + +<p dir="rtl">JavaScript زبان برنامه نویسی است که از آن برای افزودن قابلیت های تعاملی به وب سایتتان استفاده می کنید. مثلاً در بازی ها، بعد از زدن یک کلید یا وارد کردن اطلاعات در فرم ها، چیزی اتفاق می افتد، قسمتی تغییر ظاهر می دهد، انیمیشنی صورت می گیرد، و خیلی چیز های دیگر. <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">مقدمات JavaScript</a> ایده اولیه که با این زبان مهیج چه کارهایی را می توانید انجام دهید و چطور کار با آن را شروع کنید را در اختیارتان قرار می دهد.</p> + +<h3 dir="rtl" id="انتشار_وب_سایت"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">انتشار وب سایت</a></h3> + +<p dir="rtl">بعد از پایان نوشتن کدها و سازماندهی فایل های سازنده وب سایت، لازم است که وب سایت خود را بصورت آنلاین قرار دهید تا بقیه هم بتوانند آن را ببینند. در قسمت <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">انتشار کد نمونه خودتان</a> نحوه آنلاین کردن کدهای ساده خود با کمترین زحمت را یاد می گیرید.</p> + +<h3 dir="rtl" id="وب_چطور_کار_می_کند"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">وب چطور کار می کند</a></h3> + +<p dir="rtl">وقتی که به وب سایت مورد علاقه خود سر می زنید، چیزهای پیچیده زیادی درزمینه رخ می دهد که ممکن است از آن بی خبر باشید. در قسمت <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">وب چطور کار می کند</a> توضیح می دهیم زمانی که صفحه وبی را در کامپیوتر خود مشاهده می کنید چه اتفاقاتی می افتد.</p> diff --git a/files/fa/learn/getting_started_with_the_web/مقدمات_جاوااسکریپت/index.html b/files/fa/learn/getting_started_with_the_web/مقدمات_جاوااسکریپت/index.html new file mode 100644 index 0000000000..85c20598af --- /dev/null +++ b/files/fa/learn/getting_started_with_the_web/مقدمات_جاوااسکریپت/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 +--- +<p>{{PreviousNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}</p> + +<div class="summary" dir="rtl"> +<p>جاوااسکریپت یک زبان برنامه نویسی است که تعاملات را به وبسایت شما می آورد (مانند بازی ها، پاسخ به کلیک شدن یک دکمه یا پر شدن فرم ها، طرح های پویا و پویانمایی). این مقاله به شما کمک میکند، کار با این زبان هیجان انگیز را شروع کنید و درکی از کارهای ممکن توسط آن را به شما میدهد.</p> +</div> + +<h2 dir="rtl" id="جاوااسکریپت_واقعا_چیست؟">جاوااسکریپت واقعا چیست؟ </h2> + +<p dir="rtl">{{Glossary("جاوااسکریپت")}} یک زبان برنامه نویسی کاملا داینامیک است که زمانیکه به اسناد {{Glossary("HTML")}} اعمال میشود، تعامل پویا با وبسایت را ممکن میکند. جاوااسکریپت توسط برندان ایخ یکی از موسسین پروژه موزیلا، بنیاد موزیلا و شرکت موزیلا، ساخته شد.</p> + +<p dir="rtl">با جاوااسکریپت انجام هر چیزی امکان پذیر است. ابتدا شما با خصوصیات ساده و کاربردی این زبان مانند کار با حلقه ها، گالری تصاویر، تغییر قالب بندی و واکنش به کلیک دکمه ها شروع خواهید نمود. به مرور زمان و با کسب مهارت در جاوااسکریپت شما قادر به ساخت بازی ها، انیمشن های دو بعدی و سه بعدی، برنامه ها و... خواهید شد.</p> + +<p dir="rtl">جاوااسکریپت ذاتا خیلی فشرده اما در عین حال انعطاف پذیر است و توسعه دهندگان با استفاده از همین خصوصیت انعطاف پذیری جاوااسکریپت ابزارهای بسیاری را نوشته اند که برروی هسته زبان جاوااسکریپت قرار می گیرند و به کمک آنها می توان با تلاش کم به قابلیت های بیشتر دست یافت. این قابلیت ها شامل موارد زیر می گردد:</p> + +<p dir="rtl">واسط های برنامه نویسی کاربردی ({{Glossary("API","APIs")}}) — APIs ، در داخل مرورگر تعبیه شده اند تا کارهایی مانند ایجاد پویایه HTML و تنظیم استایل های CSS ، یا گرفتن و دستکاری یک استریم ویدئو از وب کم کاربر، یا ایجاد گرافیک های سه بعدی و نمونه های صوتی را فراهم کنند.</p> + +<ul> + <li dir="rtl">API های مختلف به توسعه دهندگان اجازه میدهند که کارایی های مختلف را به نرم افزار هایشان با اضافه کردن قابلیت سایت های دیگر مانند توییتر یا فیسبوک بیفزاییند.</li> + <li dir="rtl">فریمورک های مختلف و کتابخانه ها را می توانید به html تان اضافه کنید تا به شما اجازه ساخت سریع سایت و اپلیکیشنتان را بدهد.</li> +</ul> + +<h2 dir="rtl" id="یک_مثال_ساده">یک مثال ساده</h2> + +<p dir="rtl">قسمت بالا واقعا هیجان انگیز به نظر میرسد و باید هم اینطور باشد -جاوا اسکریپت یکی از مهیجترین تکنولوژی های شبکه اینترنت است وقتی شما شروع به پیدا کردن مهارت در آن میکنید وب سایت شما وارد یک بعد جدید از قدرت و خلاقیت میگردد.</p> + +<p dir="rtl">اما راحت بودن با جاوا اسکریپت از راحت بودن با HTML و CSS مقداری سخت تر است. شاید شما مجبور باشید که با قدم های استوار از کارهای کوچک شروع کنید. برای شروع، ما به شما نشان میدهیم چطور کدهای جاوا اسکریپت ساده و ابتدایی به صفحه تان اضافه کنید. ساختن مثال "hello world!"(<a href="http://en.wikipedia.org/wiki/%22Hello,_world!%22_program">the standard in basic programming examples</a>.)</p> + +<div class="warning" dir="rtl"> +<p><strong>نکته مهم : اگر تازه به مجموعه آموزش ما پیوسته اید برای شروع<a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip"> کدهای مثال را از اینجا دانلود</a> کنید</strong></p> +</div> + +<ol> + <li dir="rtl">ابتدا, به صفحه وب آزمایشی خود بروید و یک فایل جدید با نام main.js بسازید و آن را در فولدر scripts خود ذخیره کنید.</li> + <li dir="rtl">سپس به فایل index.htm رفته و عناصر زیر را در یک خط جدید و پیش از <code></body></code> بنویسید.</li> +</ol> + +<pre class="brush: html"><script src="scripts/main.js"></script></pre> + +<p dir="rtl">3. این دقیقا همان کاری است که با عنصر {{htmlelement("link")}} برای وارد کردن CSS میکنیم.— با این کار دستوزات جاوااسکریپت را به سند HTML خود اضافه می کنید بنابراین روی HTML,CSS و سایر عناصر صفحه تاثیر خواهد گذاشت.</p> + +<p dir="rtl">4. اکنون کد زیر را به فایل main.js اضافه کنید: </p> + +<pre class="brush: js">var myHeading = document.querySelector('h1'); +myHeading.innerHTML = 'Hello world!';</pre> + +<p dir="rtl">5. حالا مطمئن شوید فایل های HTML و Javadcript ذخیره شده اند. سپس index.html را در مرورگر باز کنید. باید چیزی مشابه تصویر زیر مشاهده کنید. 7</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></p> + +<div class="note" dir="rtl"> +<p><strong>توجه </strong>: دلیل اینکه ما از تگ {{htmlelement("script")}} در پایان محتوا فایل HTML استفاده می کنیم این است که کد جاوااسکریپت مستقیم از درون فایل HTML توسط مرورگر لود شود . اگر کد جاوااسکریپت را در بالای محتوای موجود در فایل HTML قرار دهیم در اینصورت محتوای زیرین HTML تحت تاثیر عملکرد کد جاوااسکریپت خواهند بود و به همین دلیل کد جاوااسکریپت را در پایینترین بخش محتوا صفحه HTML می گذاریم .</p> +</div> + +<h3 dir="rtl" id="قدم_بعدی_چیست_؟">قدم بعدی چیست ؟</h3> + +<p dir="rtl">خوب همانطور که امتحان کردید شما با کمک جاوااسکریپت متن موجود در سرتیتر (تگ H1) را به متن "Hello World" تغییر دادید. این عمل را با صدا زدن تابع {{domxref("Document.querySelector", "querySelector()")}} بمنظور ارجاع دادن به سرتیتر H1 و ذخیره آن در متغییر <code>myHeading</code> انجام داده اید. این عمل بسیار به شبیه کاری است که ما selectors در CSS انجام می دهیم. زمانی که می خواهید روی یک تگ یا المان عملی را انجام دهید احتیاج است اول آن را انتخاب کنید.</p> + +<p dir="rtl">بعد از آن متن یا محتوا مورد نظر را به متغییر <code>myHeading</code> که توسط تابع {{domxref("Element.innerHTML", "innerHTML")}} تعریف شده است ٫ به ویژگی محتوای متن تگ H1 محتوای "Hello World" مقدار دهی می شود.</p> + +<h2 dir="rtl" id="توضیح_پایه_ای_زبان">توضیح پایه ای زبان</h2> + +<p dir="rtl">برویم سراغ اصول و ویژگی پایه ای و اصلی زبان برنامه نویسی جاوااسکریپت, بررسی ویژگی های عمومی در تمام زبان های برنامه نویسی بويژه این ویژگی ها در زبان جاوا اسکریپت باعث درک بهتر از روش کار کرد آن خواهد شد. اگر شما اصول پایه را بدانید می توانید برنامه نویسی را شروع کنید</p> + +<div class="warning" dir="rtl"> +<p><strong>نکته مهم</strong>: سعی کنید در زمان مطالعهی این مقاله کدهای مثال را در کنسول مرورگر خود اجرا کنید تا نتیجهی کار را بهتر درک کنید . برای جزئیات بیشتر برای کار کردن با کنسول مرورگر اینجا <a href="https://developer.mozilla.org/en-US/Learn/Discover_browser_developer_tools"><< بررسی ابزارهای توسعه مرورگر>> کلیک کنید</a> .</p> +</div> + +<h3 dir="rtl" id="متغییرها">متغییرها</h3> + +<p dir="rtl">{{Glossary("Variable", "Variables")}} نگهدارنده هایی هستند که شما میتوانید مقادیر را درون آن ها نگهداری کنید. با تعریف یک متغیر با استفاده از کلمه کلیدی <code>var</code> شروع کنید، سپس با یک نام دلخواه کار را ادامه دهید:</p> + +<pre class="brush: js">var myVariable;</pre> + +<div class="note" dir="rtl"> +<p><strong>توجه</strong>: نقطه ویرگول ( ; ) در پایان هر خط نشاندهندهی پایان عبارت است و تنها در صورتی لزوما باید استفاده شود که بخواهید عبارتهای مختلف در یک سطر را از هم جدا کنید. هرچند برخی اعتقاد دارند که گذاشتن آن در پایان هر سطر، شیوهی مناسبی است. قوانین دیگری برای لزوم استفاده و لزوم عدم استفادهی آن وجود دارد (برای جزییات بیشتر <a href="https://news.codecademy.com/your-guide-to-semicolons-in-javascript/">راهنمای نقطهویرگول در جاوااسکریپت</a> را مشاهده کنید).</p> +</div> + +<div class="note"> +<p dir="rtl"><strong>توجه</strong>: شما می توانید تقریبا هر نامی به یک متغییر بدهید اما محدودیت هایی برای تعریف نام وجود دارد (<a href="http://www.codelifter.com/main/tips/tip_020.shtml">برای آشنای بیشتر با قوانین نام گذاری متغیرها اینجا را کلیک کنید </a>)</p> +</div> + +<div class="note"> +<p dir="rtl"><strong>نکته</strong>: جاوااسکریپت به حروف کوچک و بزرگ حساس است و نام متغییر<code>myVariable</code> با نام <code>myvariable</code> از نظر جاوااسکریپت متفاوت است. اگر مشکلی در فراخوانی و بدست آوردن مقدار از یک متغییر تعریف شده دارید بزرگ یا کوچک بودن حروف نام متغییر را چک کنید !</p> +</div> + +<p dir="rtl">پس از تعریف یک متغیر شما می توانید به آن یک مقدار بدهید:</p> + +<pre class="brush: js">myVariable = 'Bob';</pre> + +<p dir="rtl">شما میتوانید مقداررا تنها با فراخوانی نام متغیر بدست آورید:</p> + +<pre class="brush: js">myVariable;</pre> + +<p dir="rtl">شما میتوانید اگر بخواهید هر دوی این عملیات ها را روی یک خط انجام دهید:</p> + +<pre class="brush: js">var myVariable = 'Bob';</pre> + +<p dir="rtl">پس از دادن یک مقدار به متغیر شما میتوانید آن را تغییر دهید:</p> + +<pre>var myVariable = 'Bob'; +myVariable = 'Steve';</pre> + +<p dir="rtl">دقت کنید که متغیرها<a href="/en-US/docs/Web/JavaScript/Data_structures"> انواع مختلفی از داده ها را </a> میتوانند داشته باشند:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">متغییر</th> + <th scope="col">توضیح</th> + <th scope="col">مثال</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">{{Glossary("String")}}</th> + <td> + <p dir="rtl">متغییر رشته ای برای نگهداری مقدار متن استفاده می شود. حتمی برای مقدار دهی به متغییر متنی باید متن یا محتوا در کوتیشن قرار دهید.</p> + </td> + <td><code>var myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Number")}}</th> + <td> + <p dir="rtl">متغییر عددی . برای مقدار دهی به متغییر عددی احتیاج به استفاده از کوتیشن نیست.</p> + </td> + <td><code>var myVariable = 10;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Boolean")}}</th> + <td> + <p dir="rtl">متغییر درست یا غلط . کلمات <code>true</code>/<code>false</code> بعنوان کلیداصلی در JS تعریف شده اند و در زمان مقدار دهی نیاز به استفاده از کوتیشن ندارند</p> + </td> + <td><code>var myVariable = true;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Array")}}</th> + <td> + <p dir="rtl">این ساختار(آرایه) اجازه می دهد چندین مقدار را با یک نام ذخیره کنید.</p> + </td> + <td> + <p><code>var myVariable = [1,'Bob','Steve',10];</code><br> + هر عضو از متغییر(آرایه) مانند زیر می توان صدا زد:</p> + + <p><code>myVariable[0]</code>, <code>myVariable[1]</code>, ... .</p> + </td> + </tr> + <tr> + <th scope="row">{{Glossary("Object")}}</th> + <td> + <p dir="rtl">اساسا در جاوا اسکریپت همه چیز یک آبجکت است و شما می توانید آن را دریک متغییر ذخیره کنید. این نکته را در ذهن داشته باشید تا در آینده با آن بیشتر آشنا خواهید شد.</p> + + <p>n.</p> + </td> + <td><code>var myVariable = document.querySelector('h1');</code><br> + مثال های بالای در این مقاله.</td> + </tr> + </tbody> +</table> + +<p dir="rtl">اگر شما تازه برنامه نویسی را شروع کرده باشید حتمی از خودتان می پرسید چرا به متغییرها نیاز داریم ؟ خوب٫ ما به متغییرها نیاز داریم تا همه کارهای جالب را انجام بدیم. اگر نتوانیم مقدار را تغییر دهیم پس نمی توانیم هیچ چیز داینامیک یا پویایی را بسازیم مانند یک پیام تبریک خصوصی یا نمایش یک عکس از مجموعه گالری عکس ها . در هر عمل پویایی نیاز به متغییر داریم.</p> + +<h3 dir="rtl" id="نظر_ها_یادداشت_ها">نظر ها (یادداشت ها)</h3> + +<p dir="rtl">در کد جاوااسکریپت مانند سی اس اس می توانید نظر (یادداشت) بگذارید :</p> + +<pre class="brush: js">/* +Everything in between is a comment. +*/</pre> + +<p dir="rtl">اگر نظر یا یادداشت شما فقط یک خط است می توانید از ساختار دو اسلش مانند مثال زیر استفاده کنید:</p> + +<pre class="brush: js" style="font-size: 14px;">// This is a comment +</pre> + +<h3 dir="rtl" id="عملیات_ها">عملیات ها</h3> + +<p dir="rtl">{{Glossary("operator")}} نماد یک عمل ریاضی است که نتیجه را بر اساس دو مقدار (یا متغییر) تولید می کند. در جدول زیر بعضی از عملیات های ساده لیست شده اسند که می توانید در کنسول مرورگر آنها را امتحان کنید.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">عمل</th> + <th scope="col">توضیح</th> + <th scope="col">نماد(ها)</th> + <th scope="col">مثال</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">بعلاوه / جمع</th> + <td> + <p dir="rtl">زمان جمع دو مقدار عددی و یا برای بعلاوه ( پیوست دادن) دو رشته استفاده می شود.</p> + </td> + <td><code>+</code></td> + <td><code>6 + 9;<br> + "Hello " + "world!";</code></td> + </tr> + <tr> + <th scope="row">تفریق, ضرب, تقسیم</th> + <td> + <p dir="rtl">عمل های پایه ریاضی را انجام می دهند و فقط روی مقدار عدد قابل استفاده هستند.</p> + </td> + <td><code>-</code>, <code>*</code>, <code>/</code></td> + <td><code>9 - 3;<br> + 8 * 2; // multiply in JS is an asterisk<br> + 9 / 3;</code></td> + </tr> + <tr> + <th scope="row">مقدار دهی</th> + <td dir="rtl">در مثال می بینید با کمک مساوی مقدار به متغییر داده شده است.</td> + <td><code>=</code></td> + <td><code>var myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">عمل تطابق</th> + <td> + <p dir="rtl">در یک آزمایش خواهید دید وقتی دو مقدار باهم برابر نباشند مقدار بازگشت داده شده از عمل مقایسه مقدار صحیح یا غلط (<code>true</code>/<code>false</code>) خواهد بود. </p> + </td> + <td><code>===</code></td> + <td><code>var myVariable = 3;<br> + myVariable === 4;</code></td> + </tr> + <tr> + <th scope="row">عدم تساوی / نه منطقی</th> + <td> + <p dir="rtl"> (<code>true</code> )عدم تساوی یا نه منطقی (نات منطقی) زمانی مقدار صحیح برمی گردادند که دو طرف تساوی باهم مساوی نباشند. اگر دو طرف تساویی مساوی باشند مقدار غلط (<code>false) </code> بر می گرداند</p> + </td> + <td><code>!</code>, <code>!==</code></td> + <td> + <p>The basic expression is <code>true</code>, but the comparison returns <code>false</code> because we've negated it:</p> + + <p><code>var myVariable = 3;<br> + !myVariable === 3;</code></p> + + <p>Here we are testing "is <code>myVariable</code> NOT equal to 3". This returns <code>false</code>, because it IS equal to 3.</p> + + <p><code><code>var myVariable = 3;</code><br> + myVariable !== 3;</code></p> + </td> + </tr> + </tbody> +</table> + +<p dir="rtl">عمل های زیادی وجود دارد اما برای شروع تا همین جا کافی است اما اگر می خواهید <a href="/fa/docs/Web/JavaScript/Reference/Operators">لیست تمامی عمل و عبارت ها را مشاهده کنید اینجا را کلیک</a> کنید.</p> + +<div class="note"> +<p dir="rtl"><strong>نکته مهم</strong>: ترکیب چند نوع متفاوت از متغییرها در زمان محاسبه باعث ایجاد نتایج عجیبی می شود ٫ پس مراقب باشید متغییرها را به درستی استفاده کنید تا نتیجه صحیح بگیرید. برای مثال در کنسول خود عبارت <code>"35" + "25"</code> وارد کنید. چرا نتیجه ای که فکر می کنید را نخواهید ؟ زیرا اعداد بین دوتا نماد نقل قول است پس کامپایلر مثل جمع رشته با آن برخورد می کند نه بعلاوه عدد صحیح. اگر شما <code>35 + 25</code> در کنسول وارد کنید نتیجه صحیح را خواهید دید.</p> +</div> + +<h3 id="شرط_ها">شرط ها</h3> + +<p dir="rtl">شرط ها در ساختار کد به شما اجازه می دهند در صورت صحیح یا غلط بودن یک عبارت مقدار یا فرمانی اجرا شود و اجرای ٫ بستگی به خروجی شرط دارد . رایج ترین ساختار شرطی : <code>if ... else</code> است بصورت نمونه :</p> + +<pre class="brush: js">var iceCream = 'chocolate'; +if (iceCream === 'chocolate') { + alert('Yay, I love chocolate ice cream!'); +} else { + alert('Awwww, but chocolate is my favorite...'); +}</pre> + +<p dir="rtl">عبارت درون <code>if ( ... )</code> یک شرط است - این شرط می گوید اگر مقدار متغیر <code>iceCream</code> برابر با مقدار رشته یی <code>chocolate</code> بود پس نتیجه شرط <code>true</code> (صحیح) است در نتیجه تکه کد درون {} اجرا می شود و اگر شرط برقرار نبود یا به عبارتی غلط بود از تکه کد اول می گذرد و تکه کد بعد از <code>else</code> اجرا خواهد شد. </p> + +<h3 dir="rtl" id="توابع">توابع </h3> + +<p dir="rtl">{{Glossary("Function", "Functions")}} یک روش برای بسته بندی دستورات است که می خواهید برای چند بار از آن استفاده کنید ٫ فارغ از اینکه چه زمان می خواهید از این مجموعه دستورات استفاده کنید با صدا زدن نام تابعی که این دستورات در درون آن قرار دارند می توانید آنها را بارها بدون تکرار اجرا کنید. شما نمونه ای از توابع را در مثال های قبل دیدید. بصورت نمونه:</p> + +<ol> + <li> + <pre class="brush: js">var myVariable = document.querySelector('h1');</pre> + </li> + <li> + <pre class="brush: js">alert('hello!');</pre> + </li> +</ol> + +<p dir="rtl">توابع بالا در درون بروزر وجود دارند و هر زمان بخواهید می توانید آنها را صدا بزنید.</p> + +<p dir="rtl">اگر شما چیزی شبیه نام متغییر دیدید که جلوی آن پرانتز های باز و بسته <code>()</code> وجود دارد آن چیز حتمی تابع است. توابع معمولا پارامترهایی ({{Glossary("Argument", "arguments")}} ) را به عنوان ورودی می گیرند و این اطلاعات را لازم دارند تا بتواند کار خود را انجام دهند. پارامترهای ورودی در در بین علامت های پرانتز قرار می گیرند و در صورتی که بیشتر از یک پارامتر ورودی وجود داشته باشد با علامت کاما از یک دیگر جدا می شوند.</p> + +<p dir="rtl">برای نمونه تابع <code>alert()</code> باعث می شود که باکس پاپ آپ در پنجره مرورگر نمایش داده شود ولی برای نمایش دادن باکس پاپ آپ نیاز هست مقداری به عنوان پارمتر ورودی توسط تابع دریافت ٫ تا عمل انجام گردد.</p> + +<p dir="rtl">خبر خوب این است شما هم می توانید توابع خود را بسازید. در مثال بعدی ما یک تابع ساده با دو پارامتر ورودی نوشته ایم که در درون تابع عمل ضرب را بر روی دو متغییر ورودی انجام و نتیجه را به عنوان خروجی بر می گرداند :</p> + +<pre class="brush: js">function multiply(num1,num2) { + var result = num1 * num2; + return result; +}</pre> + +<p dir="rtl">بهتر است برای یاد گیری تابع بالا را در کنسول مرورگر اجرا کنید و بعد از آن کدهای زیر را برای دیدن نتیجه خروجی تابع در کنسول در ادامه وارد کنید :</p> + +<pre class="brush: js">multiply(4,7); +multiply(20,20); +multiply(0.5,3);</pre> + +<div class="note"> +<p dir="rtl"><strong>توجه</strong>: عبارت <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> به مرورگر می گوید مقدار درون متغییر <code>result</code> به عنوان خروجی یا نتیجه محاسبه تابع در نظر بگیر. این عمل اجباری است زیرا متغییرهای تعریف شده در درون تابع فقط در دسترس داخل همان تابع خواهد بود . به موضوع تعیین قوانین و شرایط دسترسی به متغییرهای درون تابع {{Glossary("Scope", "scoping")}} می گویند. برای اطلاعات بیشتر در مورد<a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope"> اسکوپینگ متغییرها ( محدود دسترسی به متغییر) به اینجا</a> مراجعه کنید.</p> +</div> + +<h3 dir="rtl" id="رویداد_ها">رویداد ها</h3> + +<p dir="rtl">بدون رویدادها نمی توان یک وبسایت تعاملی ساخت . این ساختار از کد گوش بزنگ می مانند تا عکس العمل یا اتفاقی در مرورگر پیش آید و بعد کدی تحت پاسخ به آن عکس العمل تعریف شده اجرا می شود. مشهود ترین مثال <a href="/en-US/docs/Web/Events/click">رویداد کلیک</a> در زمانی که روی چیزی در مرورگر انجام می شود. برای امتحان کد زیر را در کنسول وارد کنید و در صفحه وبی که در همان پنجره کنسول وجود دارد کلیک کنید تا نتیجه را ببنید:</p> + +<pre class="brush: js">document.querySelector('html').onclick = function() { + alert('Ouch! Stop poking me!'); +}</pre> + +<p dir="rtl">روش های زیادی وجود دارد که برای المان یا تگ یک رویداد تعریف کرد. در کد زیری ما المان (تگ) HTML را توسط یک رویداد با نام <code><a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> بدون تعریف یک نام به بصورت مستقیم تابعی بدون نام به آن نسبت داده ایم ٫ محتوا تابع همان کدهای خواهند بود که زمان عمل کلیک می خواهیم اجرا شوند.</p> + +<p dir="rtl">به این کد توجه کنید:</p> + +<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre> + +<p dir="rtl">نتیجه اجرای کد بالا با پایین یکی است:</p> + +<pre class="brush: js">var myHTML = document.querySelector('html'); +myHTML.onclick = function() {};</pre> + +<p dir="rtl">این بهینه تر است!</p> + +<h2 dir="rtl" id="یک_مثال_فوق_العاده_از_وبسایت">یک مثال فوق العاده از وبسایت</h2> + +<p dir="rtl">تا الان با مقدمات جاوااسکریپت آشنا شدیم٫ زمان آن رسیده به سراغ مثال های جالب برویم تا دید مناسبی به شما بدهد که چه چیزهای را می توانید بعد از یادگیری زبان جاوااسکریپت پیاده سازی کنید.</p> + +<p dir="rtl"></p> + +<h3 dir="rtl" id="تعویض_کننده_تصویر">تعویض کننده تصویر</h3> + +<p dir="rtl">در این بخش شما خواهید دید که در وبسایت مثالی ما چگونه می تواند با یک تکه کد ساده جاوااسکریپت یک تعویض کننده تصویر با قابلیت تعویض عکس بعد از هر کلیک روی عکس ساخت.</p> + +<ol dir="rtl"> + <li> اول از همه عکس مورد علاقه خود را که می خواهید در سایت شما نمایش داده شود پیدا کنید فقط در نظر بگیرید با عکس اول هم اندازه باشد یا در حد امکان سایز آن نزدیک به تصویر قبلی باشد .</li> + <li>تصویر را در فولدر <code>images</code> ذخیره کنید.</li> + <li>فایل <code>main.js</code> باز کنید و کد زیر را وارد کنید (اگر کد سلام دنیا شما در فایل وجود دارد آن را پاک کنید):</li> +</ol> + +<pre class="brush: js">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'); + } +}</pre> + +<p dir="rtl">تمام تغییرات را در فایل ها باز را ذخیره کنید و فایل <code>index.html</code> را توسط مرورگر اجرا کنید. حالا زمانی که روی تصویر کلیک می کنید باید تصویر بعدی را به شما نمایش دهد.</p> + +<p dir="rtl">کاری که در کد بالا کردیم ٫ المان <span style="">image </span> را در متغییر <code style="">myImage</code> بعنوان منبع ذخیره کردیم . در مرحله بعد توسط رویداد <code style="">onclick</code><span style=""> به ویژگی مربوط به گرفتن محل یک تابع نوشتم که بعد از هر کلیک اتفاقات زیر برای المان تصویر پیش می آید:</span></p> + +<ol dir="rtl"> + <li>مقدار ویژگی <code>src</code> را در درون متغییر ریختیم.</li> + <li>مقدار درون متغییر را با شرط مقایسه کردیم و اگر مقدار برابر با <code>src</code> بود کد درون شرط اجرا می شود .</li> + <li> اگر شرط صحیح بود مقدار ویژگی <code>src</code> به تصویر دوم تغییر داده می شود و تصویر در درون المان {{htmlelement("image")}} نمایش در می آید.</li> + <li>اگر شرط صحیح نبود یعنی تصویر به تازگی تغییر کرده است و مقدار ويژگی <code>src</code> به محل ذخیره سازی تصویر اول(اصلی) می بایست تغییر نشانی دهد .</li> +</ol> + +<h3 id="اضافه_کردن_یک_پیام_خوش_آمد_گویی">اضافه کردن یک پیام خوش آمد گویی</h3> + +<p dir="rtl">در ادامه تعدادی کد اضافه خواهیم کرد که باعث می شود عنوان سایت بعد از دیدن(مرور) سایت توسط کاربر به یک پیام خوش آمدید تغییر کند. این پیام زمانی که کاربر برای بار دوم به سایت مراجعه می کند به او نمایش داده خواهد شد همچنین این اختیار را به کاربر می دهیم تا هر زمان مجددا به صحفه مراجعه کرد پیام خوش آمدگوئی خود را ببنید</p> + +<ol> + <li dir="rtl"> در فایل <code>index.html</code> را بعد از المان (تگ) {{htmlelement("script")}} وارد کنید </li> + <li> + <pre class="brush: html"><button>Change user</button></pre> + </li> + <li dir="rtl">در فایل <code>main.js</code> در پایین ترین بخش فایل دقیقا تک کد زیر را وارد کنید .در کد زیر یک رونوشت مانند از المان های button (دکمه) و heading (عنوان) در متغییر ها ریخته شده .</li> + <li> + <pre class="brush: js">var myButton = document.querySelector('button'); +var myHeading = document.querySelector('h1');</pre> + </li> + <li dir="rtl">تابع زیر را در فایل اضافه کنید . در حال حاضر کاری انجام نمی دهد اما بعدا خواهید دید</li> + <li dir="rtl"> + <pre class="brush: js">function setUserName() { + var myName = prompt('Please enter your name.'); + localStorage.setItem('name', myName); + myHeading.innerHTML = 'Mozilla is cool, ' + myName; +}</pre> + تابع <a href="/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a> یک جعبه دریافت متن نمایش می دهد مانند <code>alert()</code> با این تفاوت در <code>prompt()</code> از کاربر اطلاعاتی را به عنوان ورودی می گیرد و در ادامه در متغییری بعد از زدن دکمه اوکی ذخیره می کند. ما در اینجا از کاربر خواسته ایم نام خود را وارد کند و در ادامه با کمک API و صدا زدن تابع <code>localStorage</code> اطلاعات وارد شده (نام) را در حافظه داخلی مرورگر ذخیره می کنیم . ما از حافظه محلی (حافظه محلی مرورگر) بوسیله تابع <code>setItem()</code> و اختصاص دادن اسم <code>'name'</code> به اطلاعاتی که در درون متغیر <code>myName</code> می باشدرا ذخیره کردیم و این اطلاعات ذخیره شده همان نامی است که توسط کاربر وارد شده است.</li> + <li dir="rtl">کد <code>if ... else</code> را اضافه کنید بهتر ایست این قسمت از کد را بخش مقدار دهی اولیه نام گذاری کنیم زیرا در اینجا مشخص می شود چه زمان باید چه اتفاقی پیش آید</li> + <li dir="rtl"> + <pre class="brush: js">if(!localStorage.getItem('name')) { + setUserName(); +} else { + var storedName = localStorage.getItem('name'); + myHeading.innerHTML = 'Mozilla is cool, ' + storedName; +}</pre> + کد درون شرط نه منطقی زمانی اجرا می شود که اطلاعاتی برای <code>name</code> در ذخیره سازی محلی وجود نداشته باشد و در نتیجه تابع <code>setUserName()</code> فراخوانی می شود( نامی که کاربر در بازدید قبلی داده است ست می شود) این نام از طریق استفاده از تابع <code>getItem()</code> و مقدار دریافت مقدار بازگشتی از تابع و دادن این مقدار برای تنظیم (ست کردن) بوسیله <code>innerHTML</code> صورت می گیرد.</li> + <li dir="rtl">در پایان رویداد <code>onclick</code> که برای دکمه تعیین شده است تابع <code>setUserName()</code> فراخوانی می کند . این عمل به کاربر اجازه می دهد هر زمان که بخواهد با کلیک روی این دکمه بتواند هر نام جدیدی که می خواهد وارد کند</li> + <li> + <pre class="brush: js">myButton.onclick = function() { + setUserName(); +} +</pre> + </li> +</ol> + +<p dir="rtl">حالا اگر برای اولین بار از صحفه وبسایت دیدار(ویزیت) کنید ٫ از شما می خواهد نام خود را برای دریافت پیام شخصی وارد کنید و شما می توانید هر زمان که تمایل داشته باشید با کلیک کردن روی دکمه درون صحفه این نام را تغییر دهید . این ویژگی به کمک ذخیره سازی محلی در درون مرورگر انجام می شود و بعد از بستن صفحه و مجددا باز کردن آن پیام به شما نمایش داده خواهد شد.</p> + +<h2 dir="rtl" id="نتیجه_گیری">نتیجه گیری</h2> + +<p dir="rtl">اگر تمام دستورالعمل های مقاله را دنبال کرده باشید باید چیزی مشابه صفحه زیر مشاهده کنید ( شما می توانید <a href="http://mdn.github.io/beginner-html-site-scripted/">خروجی کار ما را از اینجا مشاهده </a>ببینید )</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> + +<p dir="rtl">اگر به مشکلی بر خوردید می توانید کار خود را با نسخه نهایی مثال ما که<a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js"> کد آن روی گیتهاب موجود است</a> مقایسه کنید.</p> + +<p dir="rtl">در این مقاله فقط مثال ساده ای از عملکرد جاوا اسکریپت آورده شد اگر از این آموزش لذت بردید و می خواهید بصورت دقیق تر و حرفه ای تر به یاد گیری ادامه دهید به راهنمای <a href="/fa/docs/Web/JavaScript/راهنما">جاوااسکریپت</a> ما مراجعه کنید.</p> + +<p>{{PreviousNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}</p> diff --git a/files/fa/learn/getting_started_with_the_web/منتشر_کردن_وبسایت_شما/index.html b/files/fa/learn/getting_started_with_the_web/منتشر_کردن_وبسایت_شما/index.html new file mode 100644 index 0000000000..1292676834 --- /dev/null +++ b/files/fa/learn/getting_started_with_the_web/منتشر_کردن_وبسایت_شما/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{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")}}</div> + +<div class="summary"> +<p dir="rtl">بعد از اتمام کد نویسی و سازماندهی و ساخت وبسایت ٫ زمان انتشار آن بصورت آنلاین فرا می رسید تا مردم بتوانند به وبسایت شما مراجعه کنند. در این مقاله روش انتشار کدهای که شما نوشته اید بصورت آنلاین را توضیح می دهد.</p> +</div> + +<h2 id="گزینه_ها_چیست_؟">گزینه ها چیست ؟</h2> + +<p>انتشار وبسایت یک موضوع (مبحث) ساده ای نیست . زیرا روش های متفاوتی برای این عمل وجود دارد . در این مقاله تمام روش های موجود پوشش داده نشده است بلکه رایج ترین روش های که یک فرد مبتدی به راحتی از آن استفاده کند توضیح داده شده ست .</p> + +<h3 id="گرفتن_فضا_و_دامنه">گرفتن فضا و دامنه</h3> + +<p>اگر می خواهید روی تمام فرایند انتشار وبسایتان کنترل داشته باشید باید پول خرج کنید تا موارد زیر را برای انتشار وبسایت بدست آورید:</p> + +<ul> + <li dir="rtl">فضا (هاست) : اجاره فضا از یک شرکت خدمات دهنده فضا که خدمات <a href="/en-US/Learn/What_is_a_web_server">وبسرور </a>را می دهند. شما بعد از خرید فایل های وبسایت خود را در فضای خریداری شده بارگذاری می کنید و وبسرور وبسایت شما را در اختیار هرکسی که در خواست بازدید داشته باشد می گذارد.</li> + <li dir="rtl">نام دامنه :یک آدرس یکتا برای رسیدن به وبسایت شما است مانند <code>http://www.mozilla.org</code> یا <code>http://www.bbc.co.uk</code> . شما نام دامنه را برای حداقل یک سال یا بیشتر از یک مرکز ثبت دامنه اجاره می کنید.</li> +</ul> + +<p dir="rtl">بسیار از از حرفه ها از این طریق وبسایت خود را بارگذاری می کنند.</p> + +<p>In addition, you will need a {{Glossary("FTP", "File Transfer Protocol (FTP)")}} program (see <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> 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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p> + +<h4 id="Tips_for_finding_hosting_and_domains">Tips for finding hosting and domains</h4> + +<ul> + <li>We don't promote specific commercial hosting companies or domain name registrars here. To find hosting companies and registrars, just search for "web hosting" and "domain names". All registrars will have a feature to allow you to check if the domain name you want is available, or if someone else has already registered it.</li> + <li>Your home or office {{Glossary("ISP", "internet service provider")}} may provide some limited hosting for a small website. The available feature set will be limited, but it might be perfect for your first experiments — contact them and ask!</li> + <li>There are a few free services available like <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a>, and <a href="https://wordpress.com/">WordPress</a>. Again, you get what you pay for, but they are ideal for your initial experiments. Free services mostly don't require FTP software for uploads either — you can just drag and drop right inside their web interface.</li> + <li>Sometimes companies provide both hosting and domains in one package.</li> +</ul> + +<h3 id="استفاده_از_ابزارهای_آنلاین_مثل_گیتهاب_و_گوگل_اپ_انجین">استفاده از ابزارهای آنلاین مثل گیتهاب و گوگل اپ انجین</h3> + +<p>Some tools let you publish your website online:</p> + +<ul> + <li><a href="https://github.com/">GitHub</a> is a "social coding" site. It allows you to upload code repositories for storage in the <a href="http://git-scm.com/">Git</a> <strong>version control system. </strong>You can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your GitHub code, use it, learn from it, and improve on it. GitHub has a very useful feature called <a href="https://pages.github.com/">GitHub Pages</a>, which allows you to expose website code live on the web.</li> + <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web & Mobile Backends in Any Language | Google Cloud Platform">Google App Engine</a> is a powerful platform that lets you build and run applications on Google’s infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. See <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a> for more information.</li> +</ul> + +<p>Unlike most hosting, such tools are usually free to use, but you only get a limited feature-set.</p> + +<h3 dir="rtl" id="استفاده_از_IDE_مثل_Thimble">استفاده از IDE مثل Thimble</h3> + +<p>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).</p> + +<p>Try playing with some of these examples, and see which one you like the best:</p> + +<ul> + <li><a href="https://jsfiddle.net/">JSFiddle</a></li> + <li><a href="https://thimble.mozilla.org">Thimble</a></li> + <li><a href="http://jsbin.com/">JS Bin</a></li> + <li><a href="https://codepen.io/">CodePen</a></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p> + +<h2 id="انتشار_در_مقابل_گیتهاب">انتشار در مقابل گیتهاب</h2> + +<p>Now let's take you through how to easily publish your site via GitHub Pages.</p> + +<ol> + <li>First of all, <a href="https://github.com/">sign up for GitHub</a> and verify your email address.</li> + <li>Next, you need to <a href="https://github.com/new">create a repository</a> for your files to go in.</li> + <li>On this page, in the <em>Repository name</em> box, enter <em>username</em>.github.io, where <em>username</em> is your username. So for example, our friend bobsmith would enter <em>bobsmith.github.io</em>.<br> + Also check <em>Initialize this repository with a README</em> and then click <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li> + <li>After that, drag and drop the content of your website folder into your repository and then click <em>Commit changes</em>.<br> + + <div class="note"> + <p><strong>Note</strong>: Make sure your folder has an <code>index.html</code> file.</p> + </div> + </li> + <li> + <p>Now navigate your browser to <em>username</em>.github.io to see your website online. For example, for the username <em>chrisdavidmills</em>, go to <a href="http://chrisdavidmills.github.io/"><em>chrisdavidmills</em>.github.io</a>.</p> + + <div class="note"> + <p><strong>Note</strong>: 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.</p> + </div> + </li> +</ol> + +<p>To learn more, see <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p> + +<h2 id="مطالعه_بیشتر">مطالعه بیشتر</h2> + +<ul> + <li><a href="/en-US/Learn/What_is_a_web_server">What is a web server</a></li> + <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li> + <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li> + <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.</li> + <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> by Scott Murray has some useful ideas on available services.</li> +</ul> + +<p>{{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")}}</p> + +<h2 id="مرتبط_به_مقاله">مرتبط به مقاله</h2> + +<ul> + <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li> + <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li> + <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li> + <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li> + <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li> + <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li> + <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li> + <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> +</ul> diff --git a/files/fa/learn/getting_started_with_the_web/نصب_نرم_افزارهای_پایه/index.html b/files/fa/learn/getting_started_with_the_web/نصب_نرم_افزارهای_پایه/index.html new file mode 100644 index 0000000000..a4e8158d1c --- /dev/null +++ b/files/fa/learn/getting_started_with_the_web/نصب_نرم_افزارهای_پایه/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary" dir="rtl"> +<p><em>در نصب نرم افزار پایه</em>، نشان می دهیم که برای توسعه وب به چه ابزارهایی نیاز دارید و چگونه آنها را نصب نمایید.</p> +</div> + +<h2 dir="rtl" id="حرفه_ای_ها_از_چه_ابزارهایی_استفاده_می_کنند؟">حرفه ای ها از چه ابزارهایی استفاده می کنند؟</h2> + +<ul> + <li dir="rtl"><strong>یک کامپیوتر</strong>. شاید خیلی واضح به نظر برسد ولی هستن کسانی که این مقاله را از تلفن همراه خود و یا کامپیوتر کتابخانه می خوانند. برای شروع توسعه وب بصورت جدی، بهتر است که یک کامپیوتر شخصی یا لپ تاپ (ویندوز، مکیناش یا لینوکس) داشته باشید.</li> + <li dir="rtl"><strong>یک text editor یا ویرایشگر متن</strong> برای نوشتن کد در آن.این مورد می تواند یک text editor (مثل <a href="http://brackets.io/">Brackets</a>، <a href="https://atom.io/">Atom</a> یا<a href="https://code.visualstudio.com/">Visual Studio Code</a>)باشد یا یک hybrid editor (مثل <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>). ویرایشگرهای Office برای این کار نیستند، چرا که به عناصر مخفی وابسته اند که در موتور رندر مرورگرها اختلال ایجاد می کند.</li> + <li dir="rtl"><strong>مرورگرهای وب</strong>, برای تست کدها. در حال حاضر مرورگرهای <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox </a>، <a href="https://www.google.com/chrome/browser/">Chrome</a>، <a href="http://www.opera.com/">Opera</a>، <a href="https://www.apple.com/safari/">Safari</a>، <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> و <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> بیشترین کاربرد را دارند. همچنین باید نحوه نمایش وب سایت خود در موبایل و همه مرورگرهای قدیمی که مخاطبین شما ممکن است از آنها استفاده نمایند (مثل IE 6–8) نیز تست کنید.</li> + <li dir="rtl"><strong>یک graphics editor یا ویرایشگر گرافیکی</strong>, مثل <a href="http://www.gimp.org/">GIMP</a>، <a href="http://www.getpaint.net/">Paint.NET</a>، یا <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>، برای ساخت تصاویر صفحات وب سایتتان..</li> + <li dir="rtl"><strong>یک version control system یا سیستم مدیریت نسخه</strong>, برای مدیریت فایل های روی سرور، همکاری تیمی بر روی یک پروژه، اشتراک گذاری کد و منابع، و جلوگیری از مشکل در ویرایش ها. هم اکنون <a href="http://git-scm.com/">Git</a> محبوب ترین ابزار کنترل نسخه است و سرویس نگه داری کد <a href="https://github.com/">GitHub</a>، که بر اساس Git است، نیز بسیار محبوب می باشد .</li> + <li dir="rtl"><strong>یک برنامه FTP </strong>،که حساب های کاربری میزبانی های وب قدیمی تر برای مدیریت فایل ها استفاده می شد (برای این منظور <a href="http://git-scm.com/">Git</a> بطور فزاینده ای در حال جایگزین شدن بجای FTP است). برنامه های FTP زیادی وجود دارد مثل <a href="https://cyberduck.io/">Cyberduck</a>، <a href="http://fetchsoftworks.com/">Fetch</a>، و <a href="https://filezilla-project.org/">FileZilla</a>.</li> + <li dir="rtl"><strong>یک سیستم اتوماتیک سازی یا automation system</strong>، مثل <a href="http://gruntjs.com/">Grunt</a> یا<a href="http://gulpjs.com/">Gulp</a>، برای انجام خودکار کارهای تکراری، مثلا minify کردن کد و اجرای تست ها.</li> + <li dir="rtl">قالبها، کتابخانه ها، فریم ورک ها و غیره، برای سریعتر انجام دادن کارها .</li> + <li dir="rtl">بعلاوه ابزارهای دیگر!</li> +</ul> + +<h2 dir="rtl" id="در_حال_حاظر_به_چه_ابزارهایی_نیاز_دارید؟">در حال حاظر به چه ابزارهایی نیاز دارید؟</h2> + +<p dir="rtl">لیست بالا شاید به نظر ترسناک برسد، ولی خوشبختانه توسعه وب را تقریبا بدون دونستن هیچ چیز در مورد موارد بالا می توان شروع کرد. در این مقاله با حداقل ها شروع خواهیم کرد — یک text editor و چندتا مرورگر جدید.</p> + +<h3 dir="rtl" id="نصب_یک_ویرایشگر_متن">نصب یک ویرایشگر متن</h3> + +<p dir="rtl">احتمالا بر روی کامپیوتر خود یک text editor خیلی ساده دارید. بطور پیش فرض <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Notepad</a> در ویندوز و <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a> در مکیناش هستند. در توزیع های مختلف لینوکس، اوضاع متفاوت است; مثلا در ابونتو(Ubuntu) ، <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a> به صورت پیش فرض وجود دارد.</p> + +<p dir="rtl">برای توسعه وب می توان چیزی بهتر از Notepad یاTextEdit داشت. توصیه ما این است که با <a href="http://brackets.io">Brackets</a> شروع کنید، که ویژگی هایlive previews و code hints را ارائه می کند.</p> + +<h3 dir="rtl" id="نصب_مرورگرهای_جدید_وب">نصب مرورگرهای جدید وب</h3> + +<p dir="rtl">در حال حاضر، ما فقط دوتا از مرورگرهای وب را برای تست کدهایمان نصب خواهیم کرد. در لیست زیر با توجه به سیستم عامل خود، روی لینک های مرورگر مورد نظر خود کلیلک کنید تا آن را نصب کنید:</p> + +<ul> + <li dir="rtl">لینوکس: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> , <a href="https://www.google.com/chrome/browser/">Chrome</a> , <a href="http://www.opera.com/">Opera</a> .</li> + <li dir="rtl">ویندوز: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/windows/microsoft-edge"><font color="#0066cc">Microsoft Edge</font></a> ( Edge بصورت پیش فرض در ویندوز 10 وجود دارد،اگر که ویندوز 8 و بعد از آن ،این مرورگر را دارید، می توانید IE 10 یا بیشتر را هم نصب کنید; در غیر اینصورت باید از مرورگرهای جایگزین استفاده کنید)</li> + <li dir="rtl">مکینتاش: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> ( Safari مرورگر پیش فرض در iOS و OS X می باشد)</li> +</ul> + +<p dir="rtl">قبل از دادمه، باید حداقل دوتا از این مرورگرها را نصب کرده و برای تست آماده شده باشند.</p> + +<h3 dir="rtl" id="نصب_یک_وب_سرور_محلی">نصب یک وب سرور محلی</h3> + +<p>بعضی از مثال ها برای اینکه بتوانند به خوبی کار کنند باید از طریق وب سرور اجرا شوند. در قسمت <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">چگونه یک وب سرور محلی برای تست نصب کنیم؟</a> نحوه انجام این کار را فرا خواهید گرفت.</p> + +<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/fa/learn/getting_started_with_the_web/وب_سایت_شما_چه_شکلی_است؟/index.html b/files/fa/learn/getting_started_with_the_web/وب_سایت_شما_چه_شکلی_است؟/index.html new file mode 100644 index 0000000000..3f68570e18 --- /dev/null +++ b/files/fa/learn/getting_started_with_the_web/وب_سایت_شما_چه_شکلی_است؟/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{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")}}</div> + +<div class="summary" dir="rtl"> +<p>وب سایت شما چه شکلی است؟ در مورد کار برنامه ریزی و طراحی وب سایتتان <em>قبل از</em> نوشتن کدهای آن بحث می کنند. که شامل این موارد می شود، "چه اطلاعاتی وب سایت من نیاز دارد؟" "چه فونت ها و رنگ هایی را می خواهم؟" "سایت من چه کار قرار هست انجام دهد؟"</p> +</div> + +<h2 dir="rtl" id="قبل_از_شروع_کار_برنامه_ریزی">قبل از شروع کار: برنامه ریزی</h2> + +<p dir="rtl">قبل از انجام هر کاری ایده نیاز دارید. وب سایتتان چه کاری باید انجام دهد؟ یک وب سایت عموماً هر کاری می تواند انجام دهد، ولی برای شروع باید یک چیز ساده را انتخاب کنید. در اینجا شروع می کنیم یک صفحه ساده وب با یک سربرگ، یک تصویر، و چندتا پاراگراف بسازیم.</p> + +<p dir="rtl">برای شروع لازم هست که به سوالات زیر پاسخ دهید:</p> + +<ol> + <li dir="rtl"><strong>وب سایتتان در مورد چیست؟ </strong>حیوانات را دوست دارید یا،شهر اصفهان، یا بازی شبگرد؟</li> + <li dir="rtl"><strong>در مورد این موضوع چه اطلاعاتی را رائه می کنید؟ </strong>یک عنوان و چندتا پاراگراف بنویسید، و بعد از آن در مورد تصویری فکر کنید که می خواهید در صفحه خود نمایش دهید.</li> + <li dir="rtl">به صورت خیلی کلی، <strong>وب سایت شما چه شکلی است</strong>. رنگ پس زمینه چه شکلی است؟ چه سبکی از فونت مناسب کار شماست: رسمی، کارتونی، ضخیم و شلوغ، ظریف.</li> +</ol> + +<div class="note"> +<p dir="rtl"><strong>توجه</strong>: پروژه های خیلی پیچیده به دستورالعمل (guidelines) جزئی تری نیاز دارند که تمامی جزئیات مربوط رنگها، فونت ها، فاصله بین موارد داخل صفحه، حالت مناسب نوشته ها، و ... را تعیین کند. گاهی اوقات آن را راهنمای طراحی (design guide) یا کتاب برند (brand book) می گویند، که می توانید نمونه از آن را در <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">دستورالعمل های سیستم عامل فایرفاکس (Firefox OS Guidelines)</a> ببینید.</p> +</div> + +<h2 dir="rtl" id="طراحی_خود_را_بکشید">طراحی خود را بکشید</h2> + +<p dir="rtl">قدم بعدی، برداشتن قلم و کاغذ و کشیدن یک چیز تقریبی است که قرار هست وب سایت شما آن شکلی باشد. برای نخستین صفحه وب ساده یتان، چیز زیادی برای کشیدن وجود ندارد، ولی برای عادت کردن به این کار باید از همین الان آن را انجام دهید. واقعاً کمک کننده است --توجه کنید که قرار نیست کمال المک باشید!</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> + +<div class="note"> +<p dir="rtl"><strong>توجه</strong>: حتی در وب سایت های پیچیده که داراری تیم های طراحی جداگانه هستند، کار با کشیدن طرح های دستی روی کاغذ شروع می شود و بعداً برای طرح نهایی از یک ویرایشگر گرافیکی یا تکنولوژی های وب استفاده می کنند.</p> + +<p dir="rtl">تیم های وب اغلب شامل هم یک طراح گرافیکی و یک طراح {{Glossary("UX", "user-experience")}} (UX) هستند. طراح های گرافیکی یا graphic designers، مشخص است که چه کاری انجام می دهند، قرار دادن اجزاء وب سایت کنار یکدیگر. <span id="result_box" lang="fa"><span>طراحان UX</span> <span>نقش</span> <span>تا حدودی</span> <span>انتزاعی تر</span></span>ی دارند که باید به تجربه کاربران و نحوه تعامل آنها با وب سایت بپردازند.</p> +</div> + +<h2 dir="rtl" id="منابع_خود_را_تعیین_کنید">منابع خود را تعیین کنید</h2> + +<p dir="rtl">در این لحظه خوب است محتوایی که قرار است بر روی صفحه وب شما ظاهر شود را کنار یکدیگر قرار دهیم.</p> + +<h3 dir="rtl" id="متن">متن</h3> + +<p dir="rtl"><span id="result_box" lang="fa"><span>باز هم باید</span> <span>پاراگراف ها</span> <span>و عنوان خود را</span> <span>از</span> <span>قبل داشته باشید</span></span>. پس آن را در نظر بگیرید.</p> + +<h3 dir="rtl" id="قالب_رنگ">قالب رنگ</h3> + +<p dir="rtl">برای انتخاب رنگ، به قسمت <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">انتخاب کننده رنگ(the Color Picker) </a>رفته و رنگ مورد نظر خود را پیدا کنید. هر زمان که بر روی رنگی کلیک می کنید، یک کد شش حرفی عجیب شبیه <code>#660066</code> را می بینید. به این کد هگز (دسیمال) گفته می شود و نشان دهنده رنگ شماست. این کد را فعلاً در جای مطمئنی کپی کنید.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p> + +<h3 dir="rtl" id="تصاویر">تصاویر</h3> + +<p dir="rtl">برای انتخاب یک تصویر، به <a href="https://www.google.com/imghp?gws_rd=ssl">تصاویر گوگل (Google Images)</a> رفته و چیز مناسبی را جستجو کنید.</p> + +<ol> + <li dir="rtl">وقتی تصویر مناسبی را پیدا کردید، روی آن کلیک کنید.</li> + <li dir="rtl">کلید <em>View image</em> را بزنید.</li> + <li dir="rtl">در صفحه بعدی روی تصویر راست کلیک کنید (در مکینتاش از Ctrl + click استفاده کنید) و <em>Save Image As...</em> را انتخاب کنید، و بعد از آن مکان مناسبی را برای ذخیره تصویر خود انتخاب کنید. علاوه بر آن، آدرس وب تصویر را هم از قسمت آدرس بار مرورگر، برای استفاده های بعدی کپی کنید.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p> + +<p dir="rtl">توجه داشته باشید که اکثر عکس های موجود در سرچ گوگل دارای حق کپی رایت هستند . برای اینکه تصادفا این قانون نقض نشود شما می توانید از فلتر لایسنس گوگل استفاده کنید .</p> + +<p dir="rtl">۱ روی دکمه tools کلیک کنید و ۲ در منوی انتخاب شده گزینه label for reuse را انتخاب کنید تا تصاویر برای استفاده مجدد در جست و جو ظاهر شوند.</p> + +<div class="note"> +<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p> +</div> + +<h3 dir="rtl" id="فونت">فونت</h3> + +<p dir="rtl">برای انتخاب فونت:</p> + +<ol> + <li dir="rtl">به <a href="http://www.google.com/fonts">گوگل فونت(Google Fonts)</a> بروید و در لیست فونت مورد نظر خود را پیدا کنید. برای اعمال فیلترهای بیشتر بر روی نتایج می توانید از قسمت سمت راست استفاده کنید.</li> + <li dir="rtl">بعد از انتخاب فونت بر روی آیکن "بعلاوه" (Add to) کلیک کنید.</li> + <li dir="rtl">در پنل پایین صفحه بر روی کلید "* Family Selected"<em> کلیک کنید</em> ("*" بستگی به این دارد که چه تعداد فونت انتخاب کرده باشید).</li> + <li dir="rtl">در پنجره ظاهر شد یا به اصطلاح popup box ، می توانید کدهای Google را ببینید که برای استفاده های آینده آنها را کپی و ذخیره کنید.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p> + +<p>{{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")}}</p> diff --git a/files/fa/learn/html/index.html b/files/fa/learn/html/index.html new file mode 100644 index 0000000000..701db66e46 --- /dev/null +++ b/files/fa/learn/html/index.html @@ -0,0 +1,69 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - Beginner + - Guide + - HTML + - Intro + - Learn + - NeedsTranslation + - Topic + - TopicStub +translation_of: Learn/HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary" dir="rtl">برای ساخت وب سایت ها ، شما باید در مورد {{Glossary('HTML')}}-- فن آوری بنیادی مورد استفاده در تعریف ساختار صفحه وب، بدانید.HTML برای تشخیص اینکه آیا محتوای وب شما باید بوسیله یک پاراگراف، فهرست، عنوان، پیوند، عکس، اجرا کننده برنامه های چند رسانه ای، فرم، یا یکی از عناصر بسیار دیگر در دسترس و یا حتی عنصر جدیدی که تعریف می کنید، شناخته شود، به کار می رود. </p> + +<h2 dir="rtl" id="آموزش_مسیر">آموزش مسیر</h2> + +<p dir="rtl">در حالت ایده آل شما باید سفر آموزشی تان را با یادگیری HTML آغاز نمایید. با خواندن مقدمه HTML شروع کنید. سپس شما امکان حرکت به سوی آموزش در مورد مباحث پیشرفته ای را دارید چون:</p> + +<p dir="rtl"><a href="/en-US/docs/Web/API">HTML5 APIs</a></p> + +<p dir="rtl"><a href="/en-US/docs/Learn/CSS">CSS</a> و چگونگی بکار گیری آن برای سبک HTML (برای مثال، سایز متن و فونت استفاده شده را عوض کنید، مرزها یا سایه ها را اضافه کنید، صفحه تان را با چند ستون عرضه کنید، کارتون و سایر جلوه ای بصری را بیفزایید.) </p> + +<p dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript </a>و چگونگی بکارگیری آن برای افزودن عملکردی پویا به صفحات وب( مثلا، موقعیت خود را یافته و آنرا روی نقشه ترسیم نمایید، موجب ظاهرشدن/مخفی شدن عناصر UI وقتی که دکمه ای را می زنید، شوید، اطلاعات کاربر را بصورت محلی روی کامپیوترهایشان ذخیره کنید، و خیلی خیلی بیشتر.)</p> + +<p dir="rtl">قبل از آغاز این بحث، شما باید دارای یک آشنایی حداقلی با استفاده رایانه ها و استفاده با بردباری از وب باشید.(بدین معنی که: فقط با نگاه کردن به آن، مطلب را بگیرید). شما باید یک محیط کار منظم دقیق در <strong><em>نصب نرم افزار اولیه، </em></strong>داشته و چگونگی ایجاد و مدیریت فایل ها مشابه آنچه دقیقا در <strong><em>سروکار با فایل ها</em></strong> بود،- هر دو بخش <strong><em>آغاز کار با وب</em></strong> کامل مبتدیان، داشته باشید.</p> + +<p dir="rtl"> فعایت از طریق آ<strong><em>غاز کار با وب </em></strong>پیش از تلاش برای این مبحث، توصیه می شود، با این حال، ایت کنر مطلقا ضروری نمی باشد؛ بیشتر از آنچه در لوای <strong><em>مبانی HTML </em></strong>و همچنین در <strong><em>مقدمه HTML </em></strong>داشتیم، ولیکن با جزئیات بیشتری پوشش داده می شود.</p> + +<p dir="rtl"> </p> + +<h2 dir="rtl" id="واحد_ها">واحد ها</h2> + +<p dir="rtl">این مبحث، واحدهای زیر، در نظمی پیشنهادی برای کار کردن از طریق آنها، در بر می گیرد. طبق تعریف شما یاید با مورد اول آغاز نمایید:</p> + +<h4 dir="rtl" id="مقدمه_ای_بر_HTML"><a href="/fa/docs/">مقدمه ای بر HTML </a></h4> + +<p dir="rtl"> </p> + +<p dir="rtl"> </p> + +<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt> + <dd>This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> + <dd>This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tables</a></dt> + <dd>Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></dt> + <dd>Forms are a very important part of the Web — these provide much of the functionality you need for interacting with web sites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.</dd> +</dl> + +<h2 id="Solving_common_HTML_problems">Solving common HTML problems</h2> + +<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</p> + +<h2 id="See_also">See also</h2> + +<div class="document-head" id="wiki-document-head"> +<dl> + <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN.</dt> + <dd>The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.</dd> +</dl> +</div> diff --git a/files/fa/learn/html/introduction_to_html/getting_started/index.html b/files/fa/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..33592c6f35 --- /dev/null +++ b/files/fa/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,668 @@ +--- +title: شروع کار با html +slug: Learn/HTML/Introduction_to_HTML/Getting_started +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +<div dir="rtl">{{LearnSidebar}}</div> + +<div dir="rtl">{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary" dir="rtl">در این مقاله به بررسی اصول زبان علامت گذاری HTML می پردازیم. برای انجام این کار، ابتدا عناصر(المان ها) و خصوصیت ها و دیگر اصطلاحات را تعریف می کنیم و سپس ارتباط آنها با زبان HTML را مورد بررسی قرار می دهیم. <br> + همچنین به شما نشان خواهیم داد که یک عنصر اچ تی ام ال چه ساختاری دارد و چگونه تعریف می شود. <br> + در ادامه، به تمرین کدهای HTML می پردازیم تا شما با جذابیت های آن آشنا شوید. </p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th dir="rtl" scope="row">پیش نیازها:</th> + <td>داشتن دانش ابتدایی رایانه,<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">دانش نصب نرم افزارها</a>,<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">دانش ابتدایی در مورد کار کردن با فایل ها</a></td> + </tr> + <tr> + <th dir="rtl" scope="row">اهداف:</th> + <td dir="rtl">آشنایی ابتدایی با زبان HTML و نوشتن چند عنصر اچ تی ام ال به عنوان تمرین.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="HTML_چیست؟">HTML چیست؟</h2> + +<p dir="rtl">{{glossary("HTML")}} (زبان علامت گذاری ابر متن)یک زبان برنامه نویسی نیست;<br> + بلکه یک زبان علامت گذاری است که به مرورگر می گوید که چگونه صفحات وب ای که وارد آنها می شویم را ساختار دهی کند. این زبان به تناسب فردی که از آن استفاده می کند می تواند ساده یا پیچیده باشد.<br> + اچ تی ام ال حاوی یک سری {{glossary("Element", "عنصر")}} است که با استفاده از آنها می توانید بخش های مختلفی از محتواها را محصور کنید تا نشان داده شوند یا روش های خاصی بر روی آنها اعمال شوند. <br> + بعنوان مثال می توان در یک علامت محصور کننده ی ابر متن(که به آن {{glossary("Tag", "تگ")}} گفته می شود) متنی را به یک صفحه ی وب دیگر پیوند زد و یا کلمات را ایتالیک کرد و یا کارهای دیگری را انجام داد.<br> + به عنوان مثال, محتوای زیر را که در یک خط نوشته شده است در نظر بگیرید:</p> + +<pre>My cat is very grumpy +</pre> + +<p dir="rtl">اگر بخواهیم این خط همین طور که هست نمایش داده شود,می توانیم آن را بعنوان یک پاراگراف در نظر بگیریم به طوری که در داخل یک عنصر پاراگراف قرار بگیرد({{htmlelement("p")}}):</p> + +<pre class="brush: html"><p>My cat is very grumpy</p></pre> + +<div class="note" dir="rtl"> +<p><strong>نکته</strong>: عناصر HTML حساس به حروف بزرگ و کوچک نیستند. به عنوان مثال آنها می توانند با حروف کوچک و یا با حروف بزرگ نوشته شوند. <br> + به عنوان مثال,یک عنصر {{htmlelement("title")}} می تواند به صورت های<br> + <code><title></code>, <code><TITLE></code>, <code><Title></code>, <code><TiTlE></code><br> + نوشته شود و یا به صورت هایی دیگر. و در تمامی این موارد به درستی کار می کند.<br> + اما بهترین تمرین این است که تمامی عناصر را با حروف کوچک بنویسیم تا استحکام و خوانایی و دیگر موارد افزایش یابد.</p> +</div> + +<h2 dir="rtl" id="تشریح_یک_عنصر_HTML">تشریح یک عنصر HTML</h2> + +<p dir="rtl">اجازه دهید عنصر پاراگراف را کمی بیشتر مورد بررسی قرار دهیم:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p dir="rtl">بخش های اصلی عنصر ما(عنصر مذکور) عبارتند از:</p> + +<ol dir="rtl"> + <li><strong>تگ باز شده: </strong>این تگ(علامت) حاوی نام عنصر مورد نظر است(در اینجا,عنصر p),به طوری که در داخل براکت های زاویه ای(یعنی همان علامت های < و >) قرار می گیرد. این بخش جایی است که عنصر ما شروع می شود و آغاز به تاثیر گذاری می کند--در این صورت می توان گفت که این بخش جایی است که پاراگراف ما شروع می شود. </li> + <li><strong>تگ بسته شده:</strong> این تگ مشابه با تگ باز شده, می باشد با این تفاوت که حاوی یک علامت اسلش رو به جلو (یعنی/) قبل از نام آن عنصر است. این بخش همان جایی است که عنصر ما پایان می پذیرد. نبستن یک تگ معمولا یک خطا است که تازه کارها دچار آن می شوند. که می تواند باعث نتایج زیان باری شود.</li> + <li><strong>محتوا:</strong>این همان محتوای عنصر است,که در این مورد تنها یک متن است.</li> + <li><strong>عنصر:</strong> به تگ باز شده به اضافه ی تگ بسته شده به اضافه ی محتوا,عنصر گفته می شود.</li> +</ol> + +<h3 dir="rtl" id="آموزش_عملی_ایجاد_اولین_عنصر">آموزش عملی: ایجاد اولین عنصر </h3> + +<p dir="rtl">خط زیر را در بخش <em>Input</em> ویرایش کنید. برای انجام این کار می توانید آن را بین تگ های <em> و <em/> قرار دهید ( برای باز کردن عنصر, کافیست تگ <em> را قبل از آن قرار دهید. و برای برای بستن آن کافیست تگ <em/> را پس از آن قرار دهید). این کار باعث می شود که متن مورد نظر ایتالیک شود! سپس شما قادر خواهید بود تا به صورت زنده تغییرات را در بخش <em>Output</em> مشاهده کنید. </p> + +<p dir="rtl">در صورتی که اشتباهی توسط شما رخ داد, همواره می توانید با استفاده از دکمه ی <em>Reset</em> آن را به حالت اولیه برگردانید. </p> + +<div class="hidden"> +<h6 dir="rtl" id="کد_قابل_اجرا">کد قابل اجرا</h6> + +<pre class="brush: html" dir="rtl"><h2>خروجی زنده</h2> +<div class="output" style="min-height: 50px;"> +</div> + +<h2>کد قابل ویرایش</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> +<p class="a11y-label">دکمه ی Esc را فشار دهید تا از ناحیه ی کد خارج شویم.</p> +<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> + This is my text. +</textarea> + +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<p> </p> + +<pre class="brush: css">html { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<em>This is my text.</em>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + +<p> </p> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Nesting_elements">Nesting elements</h3> + +<p>You can put elements inside other elements too — this is called <strong>nesting</strong>. If we wanted to state that our cat is <strong>very</strong> grumpy, we could wrap the word "very" in a {{htmlelement("strong")}} element, which means that the word is to be strongly emphasized:</p> + +<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> + +<p>You do however need to make sure that your elements are properly nested: in the example above, we opened the <code>p</code> element first, then the <code>strong</code> element, therefore we have to close the <code>strong</code> element first, then the <code>p</code>. The following is incorrect:</p> + +<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> + +<p>The elements have to open and close correctly, so they are clearly inside or outside one another. If they overlap like above, then your web browser will try to make a best guess at what you were trying to say, and you may well get unexpected results. So don't do it!</p> + +<h3 id="Block_versus_inline_elements">Block versus inline elements</h3> + +<p>There are two important categories of elements in HTML which you should know about. They are block-level elements and inline elements.</p> + +<ul> + <li>Block-level elements form a visible block on a page — they will appear on a new line from whatever content went before it, and any content that goes after it will also appear on a new line. Block-level elements tend to be structural elements on the page that represent, for example, paragraphs, lists, navigation menus, footers, etc. A block-level element wouldn't be nested inside an inline element, but it might be nested inside another block-level element.</li> + <li>Inline elements are those that are contained within block-level elements and surround only small parts of the document’s content, not entire paragraphs and groupings of content. An inline element will not cause a new line to appear in the document; they would normally appear inside a paragraph of text, for example an {{htmlelement("a")}} element (hyperlink) or emphasis elements such as {{htmlelement("em")}} or {{htmlelement("strong")}}.</li> +</ul> + +<p>Take the following example:</p> + +<pre class="brush: html"><em>first</em><em>second</em><em>third</em> + +<p>fourth</p><p>fifth</p><p>sixth</p> +</pre> + +<p>{{htmlelement("em")}} is an inline element, so as you can see below, the first three elements sit on the same line as one another with no space in between. On the other hand, {{htmlelement("p")}} is a block-level element, so each element appears on a new line, with space above and below each (the spacing is due to default <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a> that the browser applies to paragraphs).</p> + +<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p> + +<div class="note"> +<p><strong>Note</strong>: HTML5 redefined the element categories in HTML5: see <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>. While these definitions are more accurate and less ambiguous than the ones that went before, they are a lot more complicated to understand than "block" and "inline", so we will stick with these throughout this topic.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: The terms "block" and "inline", as used in this topic, should not be confused with <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">the types of CSS boxes</a> with the same names. While they correlate by default, changing the CSS display type doesn't change the category of the element and doesn't affect which elements it can contain and which elements it can be contained in. One of the reasons why HTML5 dropped these terms was to prevent this rather common confusion.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: You can find useful reference pages that include lists of block and inline elements — see <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a> and <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>.</p> +</div> + +<h3 id="Empty_elements">Empty elements</h3> + +<p>Not all elements follow the above pattern of opening tag, content, closing tag. Some elements consist only of a single tag, which is usually used to insert/embed something in the document at the place it is included. For example, the {{htmlelement("img")}} element embeds an image file onto a page in the position it is included in:</p> + +<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p>This would output the following on your page:</p> + +<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Note</strong>: Empty elements are also sometimes called <em>void elements</em>.</p> +</div> + +<h2 id="Attributes">Attributes</h2> + +<p>Elements can also have attributes, which look like this:</p> + +<p><img alt='&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Attributes contain extra information about the element which you don't want to appear in the actual content. In this case, the <code>class</code> attribute allows you to give the element an identifying name that can be later used to target the element with style information and other things.</p> + +<p>An attribute should have:</p> + +<ol> + <li>A space between it and the element name (or the previous attribute, if the element already has one or more attributes.)</li> + <li>The attribute name, followed by an equals sign.</li> + <li>An attribute value, with opening and closing quote marks wrapped around it.</li> +</ol> + +<h3 id="Active_learning_Adding_attributes_to_an_element">Active learning: Adding attributes to an element</h3> + +<p>Another example of an element is {{htmlelement("a")}} — this stands for "anchor" and will make the piece of text it wraps around into a hyperlink. This can take a number of attributes, but several are as follows:</p> + +<ul> + <li><code>href</code>: This attribute specifies as its value the web address that you want the link to point to; where the browser navigates to when the link is clicked. For example, <code>href="https://www.mozilla.org/"</code>.</li> + <li><code>title</code>: The <code>title</code> attribute specifies extra information about the link, such as what the page is that you are linking to. For example, <code>title="The Mozilla homepage"</code>. This will appear as a tooltip when hovered over.</li> + <li><code>target</code>: The <code>target</code> attribute specifies the browsing context which will be used to display the link. For example, <code>target="_blank"</code> will display the link in a new tab. If you want to display the link in the current tab just omit this attribute.</li> +</ul> + +<p>Edit the line below in the <em>Input</em> area to turn it into a link to your favorite website. First, add the <code><a></code> element. Second, add the <code>href</code> attribute and the <code>title</code> attribute. Lastly, specify <code>target</code> attribute to open the link in the new tab. You'll be able to see your changes update live in the <em>Output</em> area. You should see a link that when hovered over displays the <code>title</code> attribute's content, and when clicked navigates to the web address in the <code>href</code> element. Remember that you need to include a space between the element name, and each attribute.</p> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Editable code<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Press Esc to move focus away from the code area (Tab inserts a tab character).<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-code<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + This is my text. +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>controls<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show solution<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<p> </p> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html </span><span class="punctuation token">{</span> + <span class="property token">font-family</span><span class="punctuation token">:</span> <span class="string token">'Open Sans Light'</span>,Helvetica,Arial,sans-serif<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">h2 </span><span class="punctuation token">{</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">body </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'<em>This is my text.</em>'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + +textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> +window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// stop tab key tabbing out of textarea and</span> +<span class="comment token">// make it write a tab at the caret position instead</span> + +textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> + <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> + + <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> + caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> + +textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="comment token">// We only want to save the state when the user code is being shown,</span> + <span class="comment token">// not the solution, so that solution is not saved over the user code</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<p> </p> +</div> + +<h6 id="Playable_code3">Playable code3</h6> + +<p> </p> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;This is my page&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +img { + max-width: 100%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<p>I really enjoy <strong>playing the drums</strong>. One of my favourite drummers is Neal Peart, who\ plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + +<p> </p> + +<p> </p> + +<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Whitespace_in_HTML">Whitespace in HTML</h3> + +<p>In the above examples you may have noticed that a lot of whitespace is included in the code listings — this is not necessary at all; the two following code snippets are equivalent:</p> + +<pre class="brush: html"><p>Dogs are silly.</p> + +<p>Dogs are + silly.</p></pre> + +<p>No matter how much whitespace you use (which can include space characters, but also line breaks), the HTML parser reduces each one down to a single space when rendering the code. So why use so much whitespace? The answer is readability — it is so much easier to understand what is going on in your code if you have it nicely formatted, and not just bunched up together in a big mess. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you what style of formatting you use (how many spaces for each level of indentation, for example), but you should consider formatting it.</p> + +<h2 id="Entity_references_Including_special_characters_in_HTML">Entity references: Including special characters in HTML</h2> + +<p>In HTML, the characters <code><</code>, <code>></code>,<code>"</code>,<code>'</code> and <code>&</code> are special characters. They are parts of the HTML syntax itself, so how do you include one of these characters in your text, for example if you really want to use an ampersand or less than sign, and not have it interpreted as code as some browsers may do?</p> + +<p>We have to use character references — special codes that represent characters, and can be used in these exact circumstances. Each character reference is started with an ampersand (&), and ended by a semicolon (;).</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Literal character</th> + <th scope="col">Character reference equivalent</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>In the below example, you can see two paragraphs, which are talking about web technologies:</p> + +<pre class="brush: html"><p>In HTML, you define a paragraph using the <p> element.</p> + +<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p></pre> + +<p>In the live output below, you can see that the first paragraph has gone wrong, because the browser thinks that the second instance of <code><p></code> is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.</p> + +<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Note</strong>: A chart of all the available HTML character entity references can be found on Wikipedia: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p> +</div> + +<h2 id="HTML_comments">HTML comments</h2> + +<p>In HTML, as with most programming languages, there is a mechanism available to write comments in the code — comments are ignored by the browser and invisible to the user, and their purpose is to allow you to include comments in the code to say how your code works, what the different parts of the code do, etc. This can be very useful if you return to a code base that you've not worked on for six months, and can't remember what you did — or if you hand your code over to someone else to work on.</p> + +<p>To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <code><!--</code> and <code>--></code>, for example:</p> + +<pre class="brush: html"><p>I'm not inside a comment</p> + +<!-- <p>I am!</p> --></pre> + +<p>As you can see below, the first paragraph appears in the live output, but the second one doesn't.</p> + +<p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Summary">Summary</h2> + +<p>You've reached the end of the article — we hope you enjoyed your tour of the very basics of HTML! At this point you should understand what the language looks like, how it works at a basic level, and be able to write a few elements and attributes. This is a perfect place to be right now, as in subsequent articles in the module we will go into some of the things you have already looked at in a lot more detail, and introduce some new features of the language. Stay tuned!</p> + +<div class="note"> +<p><strong>Note</strong>: At this point, as you start to learn more about HTML, you might also want to start to explore the basics of Cascading Style Sheets, or <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS is the language you use to style your web pages (whether e.g. changing the font or colors, or altering the page layout). HTML and CSS go very well together, as you'll soon discover.</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> +</ul> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<div> </div> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/fa/learn/html/introduction_to_html/index.html b/files/fa/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..0eb65805a3 --- /dev/null +++ b/files/fa/learn/html/introduction_to_html/index.html @@ -0,0 +1,21 @@ +--- +title: Introduction to HTML +slug: Learn/HTML/Introduction_to_HTML +tags: + - آشنایی با HTML + - ساختار صفحات وب +translation_of: Learn/HTML/Introduction_to_HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">در قلب خود، HTML یک زبان نسبتا ساده است که از عناصر تشکیل شده است، که می تواند به قطعات متن اعمال شود تا معنای متفاوت آنها را در یک متن بسط دهد. (به عنوان مثال: آیا یک پاراگراف؟ آیا یک لیست گلوله است؟ آیا آن بخشی از یک جدول است؟)، یک متن را به بخش های منطقی ترسیم می کند و محتویات مانند تصاویر و ویدیوها را در یک صفحه قرار می دهد. این واحد دو دسته اول را معرفی خواهد کرد؛ و مفاهیم اساسی و ترکیب آن را، برای درک HTML نشان می دهد.</p> + +<h2 class="summary" id="پیش_نیازها">پیش نیازها</h2> + +<p>داشتن حداقل آگاهی عمومی در مورد استفاده از رایانه ها و استفاده از وب و درک نحوه ایجاد و مدیریت فایل ها. هر دو به عنوان بخشی از این واحد آموزش داده میشوند.</p> + +<h2 id="راهنماها">راهنماها</h2> + +<p>این واحد شامل مقالات زیر است که همه نظریه اساسی HTML را به شما آموزش می دهد و فرصتی برای آزمایش برخی مهارت ها را فراهم می کند.</p> + +<p>آموزش HTML از ابتدا</p> diff --git a/files/fa/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/fa/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..10aebc5351 --- /dev/null +++ b/files/fa/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,284 @@ +--- +title: What’s in the head? Metadata in HTML +slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">The {{glossary("Head", "head")}} of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page {{htmlelement("title")}}, links to {{glossary("CSS")}} (if you choose to style your HTML content with CSS), links to custom favicons, and other metadata (data about the HTML, such as the author, and important keywords that describe the document.) In this article we'll cover all of the above and more, in order to give you a good basis for working with markup.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic HTML familiarity, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To learn about the HTML head, its purpose, the most important items it can contain, and what effect it can have on the HTML document.</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_the_HTML_head">What is the HTML head?</h2> + +<p>Let's revisit the simple <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">HTML document we covered in the previous article</a>:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>The HTML head is the contents of the {{htmlelement("head")}} element — unlike the contents of the {{htmlelement("body")}} element (which are displayed on the page when loaded in a browser), the head's content is not displayed on the page. Instead, the head's job is to contain {{glossary("Metadata", "metadata")}} about the document. In the above example, the head is quite small:</p> + +<pre class="brush: html"><head> + <meta charset="utf-8"> + <title>My test page</title> +</head></pre> + +<p>In larger pages however, the head can get quite full. Try going to some of your favorite websites and use the <a href="/en-US/docs/Learn/Discover_browser_developer_tools">developer tools</a> to check out their head contents. Our aim here is not to show you how to use everything that can possibly be put in the head, but rather to teach you how to use the major elements that you'll want to include in the head, and give you some familiarity. Let's get started.</p> + +<h2 id="Adding_a_title">Adding a title</h2> + +<p>We've already seen the {{htmlelement("title")}} element in action — this can be used to add a title to the document. This however can get confused with the {{htmlelement("h1")}} element, which is used to add a top level heading to your body content — this is also sometimes referred to as the page title. But they are different things!</p> + +<ul> + <li>The {{htmlelement("h1")}} element appears on the page when loaded in the browser — generally this should be used once per page, to mark up the title of your page content (the story title, or news headline, or whatever is appropriate to your usage.)</li> + <li>The {{htmlelement("title")}} element is metadata that represents the title of the overall HTML document (not the document's content.)</li> +</ul> + +<h3 id="Active_learning_Inspecting_a_simple_example">Active learning: Inspecting a simple example</h3> + +<ol> + <li>To start off this active learning, we'd like you to go to our GitHub repo and download a copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>. To do this, either + + <ol> + <li>Copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place.</li> + <li>Press the "Raw" button on the GitHub page, which causes the raw code to appear (possibly in a new browser tab). Next, choose your browser's <em>File > Save Page As...</em> menu and choose a sensible place to save the file.</li> + </ol> + </li> + <li>Now open the file in your browser. You should see something like this: + <p><img alt="A simple web page with the title set to <title> element, and the <h1> set to <h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">It should now be completely obvious where the <code><h1></code> content appears, and where the <code><title></code> content appears!</p> + </li> + <li>You should also try opening the code up in your code editor, editing the contents of these elements, then refreshing the page in your browser. Have some fun with it.</li> +</ol> + +<p>The <code><title></code> element contents are also used in other ways. For example, if you try bookmarking the page (<em>Bookmarks > Bookmark This Page</em> or the star icon in the URL bar in Firefox), you will see the <code><title></code> contents filled in as the suggested bookmark name.</p> + +<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> + +<p>The <code><title></code> contents are also used in search results, as you'll see below.</p> + +<h2 id="Metadata_the_<meta>_element">Metadata: the <meta> element</h2> + +<p>Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document — the {{htmlelement("meta")}} element. Of course, the other stuff we are talking about in this article could also be thought of as metadata too. There are a lot of different types of <code><meta></code> elements that can be included in your page's <head>, but we won't try to explain them all at this stage, as it would just get too confusing. Instead, we'll explain a few things that you might commonly see, just to give you an idea.</p> + +<h3 id="Specifying_your_document's_character_encoding">Specifying your document's character encoding</h3> + +<p>In the example we saw above, this line was included:</p> + +<pre class="brush: html"><meta charset="utf-8"></pre> + +<p>This element simply specifies the document's character encoding — the character set that the document is permitted to use. <code>utf-8</code> is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language; it's therefore a good idea to set this on every web page you create! For example, your page could handle English and Japanese just fine:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">If you set your character encoding to <code>ISO-8859-1</code>, for example (the character set for the Latin alphabet), your page rendering may appear all messed up:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> + +<div class="note"> +<p><strong>Note</strong>: Some browsers (e.g. Chrome) automatically fix incorrect encodings, so depending on what browser you use, you may not see this problem anyway. You should still set an encoding of <code>utf-8</code> on your page anyway, to avoid any potential problems in other browsers.</p> +</div> + +<h3 id="Active_learning_Experiment_with_character_encoding">Active learning: Experiment with character encoding</h3> + +<p>To try this out, revisit the simple HTML template you obtained in the previous section on <code><title></code> (the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>), try changing the meta charset value to <code>ISO-8859-1</code>, and add the Japanese to your page. This is the code we used:</p> + +<pre class="brush: html"><p>Japanese example: ご飯が熱い。</p></pre> + +<h3 id="Adding_an_author_and_description">Adding an author and description</h3> + +<p>Many <code><meta></code> elements include <code>name</code> and <code>content</code> attributes:</p> + +<ul> + <li><code>name</code> specifies the type of meta element it is; what type of information it contains.</li> + <li><code>content</code> specifies the actual meta content.</li> +</ul> + +<p>Two such meta elements that are useful to include on your page define the author of the page, and provide a concise description of the page. Let's look at an example:</p> + +<pre class="brush: html"><meta name="author" content="Chris Mills"> +<meta name="description" content="The MDN Web Docs Learning Area aims to provide +complete beginners to the Web with all they need to know to get +started with developing web sites and applications."></pre> + +<p>Specifying an author is useful in a few ways: it is useful to be able to work out who wrote the page, if you want to contact them with questions about the content. Some content management systems have facilities to automatically extract page author information and make it available for such purposes.</p> + +<p>Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed <a href="/en-US/docs/Glossary/SEO">Search Engine Optimization</a>, or {{glossary("SEO")}}.)</p> + +<h3 id="Active_learning_The_description's_use_in_search_engines">Active learning: The description's use in search engines</h3> + +<p>The description is also used on search engine result pages. Let's go through an exercise to explore this</p> + +<ol> + <li>Go to the <a href="https://developer.mozilla.org/en-US/">front page of The Mozilla Developer Network</a>.</li> + <li>View the page's source (Right/<kbd>Ctrl</kbd> + click on the page, choose <em>View Page Source</em> from the context menu.)</li> + <li>Find the description meta tag. It will look something like this (although it may change over time): + <pre class="brush: html"><meta name="description" content="The MDN Web Docs site + provides information about Open Web technologies + including HTML, CSS, and APIs for both Web sites and + progressive web apps."></pre> + </li> + <li>Now search for "MDN Web Docs" in your favorite search engine (We used Google.) You'll notice the description <code><meta></code> and <code><title></code> element content used in the search result — definitely worth having! + <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/16074/mdn-search-result.png" style="border-style: solid; border-width: 1px; display: block; height: 982px; margin: 0px auto; width: 1302px;"></p> + </li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: In Google, you will see some relevant subpages of MDN Web Docs listed below the main homepage link — these are called sitelinks, and are configurable in <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> — a way to make your site's search results better in the Google search engine.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Many <code><meta></code> features just aren't used any more. For example, the keyword <code><meta></code> element (<code><meta name="keywords" content="fill, in, your, keywords, here"></code>) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results.</p> +</div> + +<h3 id="Other_types_of_metadata">Other types of metadata</h3> + +<p>As you travel around the web, you'll find other types of metadata, too. A lot of the features you'll see on websites are proprietary creations, designed to provide certain sites (such as social networking sites) with specific pieces of information they can use.</p> + +<p>For example, <a href="http://ogp.me/">Open Graph Data</a> is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN Web Docs sourcecode, you'll find this:</p> + +<pre class="brush: html"><meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> +<meta property="og:description" content="The Mozilla Developer Network (MDN) provides +information about Open Web technologies including HTML, CSS, and APIs for both Web sites +and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> +<meta property="og:title" content="Mozilla Developer Network"></pre> + +<p>One effect of this is that when you link to MDN Web Docs on facebook, the link appears along with an image and description: a richer experience for users.</p> + +<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Twitter also has its own similar proprietary metadata, which has a similar effect when the site's URL is displayed on twitter.com. For example:</p> + +<pre class="brush: html"><meta name="twitter:title" content="Mozilla Developer Network"></pre> + +<h2 id="Adding_custom_icons_to_your_site">Adding custom icons to your site</h2> + +<p>To further enrich your site design, you can add references to custom icons in your metadata, and these will be displayed in certain contexts. The most commonly used of these is the <strong>favicon</strong> (short for "favorites icon", referring to its use in the "favorites" or "bookmarks" lists in browsers).</p> + +<p>The humble favicon has been around for many years. It is the first icon of this type: a 16-pixel square icon used in multiple places. You may see (depending on the browser) favicons displayed in the browser tab containing each open page, and next to bookmarked pages in the bookmarks panel.</p> + +<p>A favicon can be added to your page by:</p> + +<ol> + <li>Saving it in the same directory as the site's index page, saved in <code>.ico</code> format (most browsers will support favicons in more common formats like <code>.gif</code> or <code>.png</code>, but using the ICO format will ensure it works as far back as Internet Explorer 6.)</li> + <li>Adding the following line into your HTML's {{HTMLElement("head")}} block to reference it: + <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + </li> +</ol> + +<p>Here is an example of a favicon in a bookmarks panel:</p> + +<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> + +<p>There are lots of other icon types to consider these days as well. For example, you'll find this in the source code of the MDN Web Docs homepage:</p> + +<pre class="brush: html"><!-- third-generation iPad with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> +<!-- iPhone with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> +<!-- first- and second-generation iPad: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> +<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> +<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> +<!-- basic favicon --> +<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"></pre> + +<p>The comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an iPad's home screen.</p> + +<p>Don't worry too much about implementing all these types of icon right now — this is a fairly advanced feature, and you won't be expected to have knowledge of this to progress through the course. The main purpose here is to let you know what such things are, in case you come across them while browsing other websites' source code.</p> + +<div class="note"> +<p><strong>Note:</strong> If your site uses a Content Security Policy (CSP) to enhance its security, the policy applies to the favicon. If you encounter problems with the favicon not loading, verify that the {{HTTPHeader("Content-Security-Policy")}} header's <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> directive</a> is not preventing access to it.</p> +</div> + +<h2 id="Applying_CSS_and_JavaScript_to_HTML">Applying CSS and JavaScript to HTML</h2> + +<p>Just about all websites you'll use in the modern day will employ {{glossary("CSS")}} to make them look cool, and {{glossary("JavaScript")}} to power interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the {{htmlelement("link")}} element and the {{htmlelement("script")}} element, respectively.</p> + +<ul> + <li> + <p>The {{htmlelement("link")}} element always goes inside the head of your document. This takes two attributes, rel="stylesheet", which indicates that it is the document's stylesheet, and href, which contains the path to the stylesheet file:</p> + + <pre class="brush: html"><link rel="stylesheet" href="my-css-file.css"></pre> + </li> + <li> + <p>The {{htmlelement("script")}} element does not have to go in the head; in fact, often it is better to put it at the bottom of the document body (just before the closing <code></body></code> tag), to make sure that all the HTML content has been read by the browser before it tries to apply JavaScript to it (if JavaScript tries to access an element that doesn't yet exist, the browser will throw an error.)</p> + + <pre class="brush: html"><script src="my-js-file.js"></script></pre> + + <p><strong>Note</strong>: The <code><script></code> element may look like an empty element, but it's not, and so needs a closing tag. Instead of pointing to an external script file, you can also choose to put your script inside the <code><script></code> element.</p> + </li> +</ul> + +<h3 id="Active_learning_applying_CSS_and_JavaScript_to_a_page">Active learning: applying CSS and JavaScript to a page</h3> + +<ol> + <li>To start this active learning, grab a copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions.</li> + <li>Open the HTML file in both your browser, and your text editor.</li> + <li>By following the information given above, add {{htmlelement("link")}} and {{htmlelement("script")}} elements to your HTML, so that your CSS and JavaScript are applied to your HTML.</li> +</ol> + +<p>If done correctly, when you save your HTML and refresh your browser you'll see that things have changed:</p> + +<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>The JavaScript has added an empty list to the page. Now when you click anywhere on the list, a dialog box will pop up asking you to enter some text for a new list item. When you press the OK button, a new list item will be added to the list containing the text. When you click on an existing list item, a dialog box will pop up allowing you to change the item's text.</li> + <li>The CSS has caused the background to go green, and the text to become bigger. It has also styled some of the content that the JavaScript has added to the page (the red bar with the black border is the styling the CSS has added to the JS-generated list.)</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: If you get stuck in this exercise and can't get the CSS/JS to apply, try checking out our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> example page.</p> +</div> + +<h2 id="درج_کردن_زبان_اصلی_سند">درج کردن زبان اصلی سند</h2> + +<p>در نهایت، لازم به ذکر است که شما میتوانید (و واقعا میبایست) زبان صفحۀ خود را تنظیم کنید. این کار را میتوان با اضافه کردن <a href="/en-US/docs/Web/HTML/Global_attributes/lang">صفت lang</a> به تگ باز HTML (همانطور که در <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> دیده میشود و در زیر نشان داده شده) انجام داد.</p> + +<p>Finally, it's worth mentioning that you can (and really should) set the language of your page. This can be done by adding the <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang attribute</a> to the opening HTML tag (as seen in the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> and shown below.)</p> + +<pre class="brush: html"><html lang="en-US"></pre> + +<p>This is useful in many ways. Your HTML document will be indexed more effectively by search engines if its language is set (allowing it to appear correctly in language-specific results, for example), and it is useful to people with visual impairments using screen readers (for example, the word "six" exists in both French and English, but is pronounced differently.)</p> + +<p>You can also set subsections of your document to be recognised as different languages. For example, we could set our Japanese language section to be recognised as Japanese, like so:</p> + +<pre class="brush: html"><p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p></pre> + +<p>These codes are defined by the <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a> standard. You can find more about them in <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.</p> + +<h2 id="Summary">Summary</h2> + +<p>That marks the end of our quickfire tour of the HTML head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things you'll find in there for now! In the next article we'll be looking at HTML text fundamentals.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/fa/learn/index.html b/files/fa/learn/index.html new file mode 100644 index 0000000000..8f8780fa13 --- /dev/null +++ b/files/fa/learn/index.html @@ -0,0 +1,155 @@ +--- +title: آموزش وب +slug: Learn +tags: + - Beginner + - Index + - Landing + - Learn + - NeedsTranslation + - TopicStub + - Web + - آموزش + - ترجمه + - رایگان + - طبقه بندی + - مقدماتی + - وب +translation_of: Learn +--- +<dl> + <dt>{{LearnSidebar}}</dt> +</dl> + +<div class="summary" dir="rtl"> +<p>به منطقۀ آموزشی MDN خوش آمدید. با کمک این مجموعه مقالات میتوانید توسعۀ وب را از سطوح بسیار مقدماتی و به همراه هر آنچه که برای کدنویسی یک وب سایت ساده نیاز دارید یاد بگیرید.</p> +</div> + +<p dir="rtl">هدف MDN تبدیل شما از یک "مبتدی" به یک "متخصص" نیست ولی قطعاً شما را از یک "مبتدی" به یک سطح "قابل قبول" میرساند. بعد از آن باید بتوانید راه خود را تعیین کنید، آموزشهای <a href="https://developer.mozilla.org/en-US/">the rest of MDN</a> و دیگر منابعی که سطح متوسط به پیشرفته در نظر گرفته شده است را دنبال کنید که دانش قبلی زیادی را طلب میکند.</p> + +<p dir="rtl">اگر کاملاً مبتدی هستید، توسعۀ وب میتواند چالش خوبی باشد — ما دستتان را خواهیم گرفت و آنقدر اطلاعات در اختیارتان قرار میدهیم تا به احساس راحتی برسید و تمامی مباحث را به خوبی یاد بگیرید. باید حس کنید که در خانه هستید، خواه یک دانشجو باشید که میخواهد توسعۀ وب یاد بگیرد (به صورت شخصی یا قسمتی از یک کلاس)، معلمی که برای کلاسهای خود مطالب تهیه میکند، یا به عنوان سرگرمی، یا کسی که فقط میخواهد بیشتر در مورد نحوۀ کار تکنولوژیهای تحت وب یاد بگیرد.</p> + +<div class="warning"> +<p dir="rtl"><strong>مهم</strong>: مطالب آموزشی تهیه شده در اینجا به صورت منظم در حال اضافه شدن است. اگر در مورد موضوعاتی که دوست دارید پوشش داده شوند یا دیده نشدهاند سؤالی دارید، برای اطلاعات در مورد نحوۀ تماس به قسمت {{anch("Contact us")}} در زیر مراجعه نمایید.</p> +</div> + +<h2 dir="rtl" id="از_کجا_شروع_کنیم">از کجا شروع کنیم</h2> + +<p dir="rtl"></p> + +<ul class="card-grid" dir="rtl"> + <li><span>کاملاً مبتدی:</span> + + <p>اگر شخصی کاملاً مبتدی در زمینۀ توسعۀ وب هستید، توصیۀ ما این است که کار را از قسمت <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">شروع کار با وب</a> آغاز کنید که مقدمهای عملی برای توسعۀ وب است.</p> + </li> + <li><span>سؤالات خاص:</span> + <p>اگر در مورد توسعۀ وب سؤالات خاصی دارید، قسمت <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions">سؤالات متداول</a> ما میتواند کمکتان کند.</p> + </li> + <li><span>فراتر از مقدماتی:</span> + <p>اگر کمی دانش قبلی دارید، قدم بعدی یادگیری جزئیات {{glossary("HTML")}} و {{glossary("CSS")}} است: میتوانید با قسمت <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">مقدمهای بر HTML</a> شروع کنید و بعد از آن به سراغ قسمت <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">مقدمهای بر CSS</a> بروید.</p> + </li> + <li><span>رفتن بهسوی اسکریپت نویسی</span> + <p>اگر با HTML و CSS احساس راحتی میکنید، و یا به کدنویسی بسیار علاقه دارید، شاید بخواهید به سراغ {{glossary("JavaScript")}} یا توسعۀ سمت سرور بروید. کار را با قسمتهای <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps"> قدمهای اول در جاوا اسکریپت</a> و <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">قدمهای اول در سمت سرور</a> شروع کنید.</p> + </li> +</ul> + +<div class="note" dir="rtl"> +<p><strong>توجه:</strong> در <a href="https://developer.mozilla.org/en-US/docs/Glossary">واژهنامه</a> میتوانید تعاریف تمامی اصطلاحات را پیدا نمایید.</p> +</div> + +<p dir="rtl">{{LearnBox({"title":"مدخل تصادفی واژه نامه"})}}</p> + +<h2 dir="rtl" id="مطالب_ارائه_شده">مطالب ارائه شده</h2> + +<p dir="rtl">در زیر میتوانید فهرست موضوعاتی که در MDN وجود دارد را ببینید.</p> + +<dl> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">شروع کار با وب</a></dt> + <dd dir="rtl">برای کسانی که در توسعه وب کاملاً مبتدی هستند، مقدمهای را رائه میدهد.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML — ساختار وب</a></dt> + <dd dir="rtl">HTML زبانی است که برای ساخت قسمتهای مختلف محتوا و تعریف آنچه که معنی و هدف آنهاست، از آن استفاده میکنیم. در این قسمت HTML را با جزئیات کامل آموزش میدهیم.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS — ظاهر وب</a></dt> + <dd dir="rtl">CSS زبانی است که از آن برای استایل و چیدمانِ محتوای وب و همچنین اضافه کردن حرکات، مثل پویانماییها استفاده میکنیم. این قسمت CSS را با جزئیات تحت پوشش قرار میدهد.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript — اسکریپت نویسی پویا سمت کاربر</a></dt> + <dd dir="rtl">جاوا اسکریپت یک زبان اسکریپتی است که برای اضافه کردن کنشهای تعاملی به صفحات وب مورد استفاده قرار میگیرد. این قسمت به تمام نکاتی که برای نوشتن و خواندنِ راحت جاوا اسکریپت لازم است میپردازد.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">دسترسیپذیری — وب را برای همه قابل استفاده کنید</a></dt> + <dd>Accessibility is the practice of making web content available to as many people as possible regardless of disabilities, device, locale, or other differentiating factors relevant to them. This topic gives you all you need to know.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing">ابزارها و تست ها</a></dt> + <dd dir="rtl">این قسمت ابزارهایی را تحت پوشش قرار میدهد که توسعهدهندگان را در کارشان کمک میکند، مانند ابزارهای تست در مرورگرهای مختلف.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side">برنامه نویسی سمت سرور وب سایت</a></dt> + <dd>Even if you are concentrating on client-side web development, it is still useful to know about how servers and server-side code features work. This topic provides a general introduction to how the server-side works, and detailed tutorials detailing how to build up a server-side app using two popular frameworks — Django (Python) and Express (node.js). </dd> +</dl> + +<h2 dir="rtl" id="دریافت_کد_مثالها">دریافت کد مثالها</h2> + +<p dir="rtl">کد مثالهایی که در آموزشها با آن مواجه هستید، همگی<a href="https://github.com/mdn/learning-area/"> در گیتهاب موجود هستند</a>. اگر میخواهید همۀ آنها را بر روی کامپیوتر خود داشته باشید، راحتترین روش بدین صورت است:</p> + +<ol> + <li dir="rtl"><a href="http://git-scm.com/downloads">گیت </a>را بر روی دستگاه خود نصب کنید. این نرم افزار، یک سیستم کنترل نسخه است که گیتهاب بر اساس آن کار میکند.</li> + <li dir="rtl"><a href="https://github.com/join">یک حساب گیتهاب برای خود بسازید</a>. این کار بسیار ساده و آسان است.</li> + <li dir="rtl">بعد از ساخت حساب، با کمک نام کاربری و رمز عبور خود به <a href="https://github.com">github.com</a> وارد شوید.</li> + <li dir="rtl">در کامپیوتر خود <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">command prompt</a> (ویندوز) یا terminal (<a href="https://help.ubuntu.com/community/UsingTheTerminal">لینوکس</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">مکینتاش</a>) را باز کنید.</li> + <li dir="rtl">برای کپی کردن مخزن آموزشها به پوشهای با نام learning-area به مکانی که command prompt/terminal برای استفاده دستورات خود باز کردهاند، دستور زیر را بنویسید: + <pre class="brush: bash line-numbers language-bash"><code class="language-bash">git clone https://github.com/mdn/learning-area</code></pre> + </li> + <li dir="rtl">حالا میتوانید به پوشۀ مورد نظر رفته و فایلهای جدید را در آن ببینید. (هم میتوانید از finder/file explorer استفاده کنید و هم از دستور <a href="https://en.wikipedia.org/wiki/Cd_%28command%29">cd command</a>).</li> +</ol> + +<p dir="rtl">هر زمان که لازم باشد، میتوانید با انجام مراحل زیر تغییرات صورت گرفته در مخزن گیتهاب را در پوشۀ <code>learning-area</code> اعمال نمایید:</p> + +<ol> + <li dir="rtl">در command prompt/terminal خود، با کمک <code>cd</code> به پوشه <code>learning-area</code> بروید. مثلاً اگر در پوشۀ بالایی آن هستید: + + <pre class="brush: bash line-numbers language-bash"><code class="language-bash">cd learning-area</code></pre> + </li> + <li dir="rtl">مخزن را با کمک دستور زیر بروزرسانی کنید: + <pre class="brush: bash line-numbers language-bash"><code class="language-bash">git pull</code></pre> + </li> +</ol> + +<article class="approved text-content"> +<div class="boxed translate-rendered"> +<h2 dir="rtl" id="ارتباط_با_ما">ارتباط با ما</h2> + +<p dir="rtl">اگر در مورد هر موضوعی خواستید با ما در ارتباط باشید، بهترین روش ارسال یک پیام از طریق <a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Conversations#Asynchronous_discussions">لیستهای ایمیل</a> یا<a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Conversations#Chat_in_IRC"> کانال های IRC </a>برای ماست. بسیار مشتاق شنیدن در مورد چیزهای اشتباه و یا کمبودهای موجود در سایت، درخواست موضوعات جدید آموزشی، درخواست کمک در مورد موضوعاتی که درک نمی کنید، یا هر چیز دیگری هستیم.</p> + +<p dir="rtl">اگر هم که علاقه مند به کمک در توسعه/بهبود محتوا هستید، نگاهی به قسمت <a href="https://developer.mozilla.org/en-US/Learn/How_to_contribute">چطور می توانید کمک کنید</a> بیاندازید، و در ارتباط با شید! بیش از هرچیز از مصاحبت با شما خوشحالیم، خواه یک شخص یادگیرنده باشید، یا معلم، یا توسعه دهنده با تجربه وب، یا کسی که می خواهد به بهبود تجربه آموزشی کمک کند.</p> + +<h2 dir="rtl" id="همچنین_ببینید">همچنین ببینید</h2> + +<dl> + <dt dir="rtl"><a href="https://www.mozilla.org/en-US/newsletter/developer/">خبرنامه توسعه موزیلا</a></dt> + <dd dir="rtl">خبرنامه مخصوص توسعه دهندگان وب، که منبع عالی برای تمامی سطوح توسعه است.</dd> +</dl> + +<dl> + <dt dir="rtl"><a href="https://www.codecademy.com/">Codecademy</a></dt> + <dd dir="rtl">سایتی تعاملی فوق العاده برای آموزش زبان های برنامه نویسی از ابتدا.</dd> + <dt dir="rtl"><a href="https://code.org/">Code.org</a></dt> + <dd dir="rtl">کدنویسی مقدماتی به صورت تئوری و عملی که بیشتر برای کودکان و افراد کاملا مبتدی مناسب است.</dd> + <dt dir="rtl"><a href="https://www.freecodecamp.com/">freeCodeCamp.com</a></dt> + <dd dir="rtl">سایتی تعاملی حاوی آموزش ها و پروژه های یادگیری توسعه وب.</dd> +</dl> + +<dl> + <dt dir="rtl"><a href="https://learning.mozilla.org/web-literacy/">Web Literacy Map</a></dt> + <dd dir="rtl">فریم ورکی برای سطح اولیه یادگیری وب و مهارت های قرن 21، که امکان دسترسی به فعالیت های آموزشی طبقه بندی شده را فراهم می کند.</dd> + <dt dir="rtl"><a href="https://learning.mozilla.org/activities">Teaching activities</a></dt> + <dd dir="rtl">سری فعالیت های یاددهی برای یادگیری (و آموزش) که توسط بنیاد موزیلا ایجاد شده است، و همه چیز را آموزش می دهد، از دانش اولیه وب گرفته تا امنیت جاوااسکریپت و هک Minecraft.</dd> +</dl> +</div> +</article> + +<article class="localized"> +<div class="editor-wrapper" id="editor-wrapper"> +<div class="ckeditor-container editor-container dirty"> +<div class="editor"> +<div class="editor-tools"></div> + +<div style="height: 107px;"> +<div style="border: 1px solid rgb(182, 182, 182); width: 894px; position: fixed; top: 0px;"></div> +</div> +</div> +</div> +</div> +</article> diff --git a/files/fa/learn/javascript/index.html b/files/fa/learn/javascript/index.html new file mode 100644 index 0000000000..2e6649a258 --- /dev/null +++ b/files/fa/learn/javascript/index.html @@ -0,0 +1,66 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - Beginner + - CodingScripting + - JavaScript + - JavaScripting beginner + - Landing + - Module + - NeedsTranslation + - Topic + - TopicStub + - 'l10n:priority' +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} is a programming language that allows you to implement complex things on web pages. Every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, or interactive maps, or animated 2D/3D graphics, or scrolling video jukeboxes, and so on — you can bet that JavaScript is probably involved.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>JavaScript is arguably more difficult to learn than related technologies such as <a href="/en-US/docs/Learn/HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS">CSS</a>. Before attempting to learn JavaScript, you are strongly advised to get familiar with at least these two technologies first, and perhaps others as well. Start by working through the following modules:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></li> +</ul> + +<p>Having previous experience with other programming languages might also help.</p> + +<p>After getting familiar with the basics of JavaScript, you should be in a position to learn about more advanced topics, for example:</p> + +<ul> + <li>JavaScript in depth, as taught in our <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li> + <li><a href="/en-US/docs/Web/API">Web APIs</a></li> +</ul> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt> + <dd>In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></dt> + <dd>In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></dt> + <dd>In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt> + <dd>When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. </dd> +</dl> + +<h2 id="Solving_common_JavaScript_problems">Solving common JavaScript problems</h2> + +<p><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a> provides links to sections of content explaining how to use JavaScript to solve very common problems when creating a webpage.</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">JavaScript on MDN</a></dt> + <dd>The main entry point for core JavaScript documentation on MDN — this is where you'll find extensive reference docs on all aspects of the JavaScript language, and some advanced tutorials aimed at experienced JavaScripters.</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt> + <dd>An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by <a href="https://twitter.com/bit101">Keith Peters</a>.</dd> +</dl> diff --git a/files/fa/learn/javascript/objects/index.html b/files/fa/learn/javascript/objects/index.html new file mode 100644 index 0000000000..0e611c58c2 --- /dev/null +++ b/files/fa/learn/javascript/objects/index.html @@ -0,0 +1,49 @@ +--- +title: مقدمه ای بر اشیاء در جاوااسکریپت +slug: Learn/JavaScript/Objects +tags: + - آموزش + - جاوااسکریپت + - راهنما + - شی + - مقاله + - مقدماتی +translation_of: Learn/JavaScript/Objects +--- +<div dir="rtl">{{LearnSidebar}}</div> + +<p class="summary">در جاوااسکریپ، تقریبا همه چیز، از ویژگیهای اصلی آن مثل رشته و آرایه تا API های مرورگر ساخته شده بر پایه جاوااسکریپت، یک شی است. حتی این امکان وجود دارد تا اشیا مورد نظر خود برای تجمیع توابع و متغییرهای مرتبط با هم در یک بسته کارا را تعریف کنید. اگر بخواهید در دانش خود نسبت به این زبان جلوتر بروید، شناخت ذات شی-پایه جاوااسکریپت ضروری مینماید. به همین دلیل ما برای کمک شما این بخش را آماده کردهایم. در این بخش ابتدا تئوری اشیاء و رسم الخط آن را به جزء بررسی کرده و سپس به چگونگی ساخت اشیاء اختصاصی نگاهی خواهیم انداخت.</p> + +<h2 id="پیشنیازها">پیشنیازها</h2> + +<p dir="rtl">پیش از شروع این بخش، شما باید با HTML و CSS تا حدی آشنایی داشته باشید. توصیه میشود که بخشهای <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">مقدمهای بر HTML</a> و <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">مقدمهای بر CSS</a> را قبل از شروع با جاوااسکریپت را کار کنید.</p> + +<p dir="rtl">همچنین لازم است قبل از شروع کار با اشیا در جاوااسکریپت، تا حدودی با اصول آن آشنا باشید. پیش از مطالعه این بخش، <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">قدمهای اول در جاوااسکریپت</a> و <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">بلوکهای سازنده جاوااسکریپت</a> را مطالعه بنمایید.</p> + +<div class="note" dir="rtl"> +<p><strong>نکته</strong>: اگر شما روی کامپیوتر/تبلت/ یا سایر دستگاهها کار میکنید و شما توانایی تولید فایلهای خود را ندارید، میتوانید (بسیاری از) نمونه کدها را در برنامههای کدنویسی آنلاین مثل <a href="http://jsbin.com/">JSBin</a> و <a href="https://thimble.mozilla.org/">Thimble</a> اجرا نمایید.</p> +</div> + +<h2 id="راهنما">راهنما</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">مقدمهای بر اشیاء</a></dt> + <dd dir="rtl">در اولین مقاله به اشیاء در جاوااسکریپت نگاهی خواهیم انداخت، به اصول رسم الخط اشیاء در جاوااسکریپت نگاهی خواهیم انداخت و برخی از ویژگیهای جاوااسکریپت را که تا کنون با آن کار کردهایم را بازنگری میکنیم و این حقیقت را که بسیاری از ویژگیهایی که تا کنون با آنها سروکار داشتهایم در واقع شی بودهاند را بازگو میکنیم.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">جاوااسکریپت شیگرا برای مبتدیها</a></dt> + <dd dir="rtl">با دانستن اصول اولیه، در این بخش روی جاوااسکریپت شی-گرا تمرکز (OOJS) تمرکز میکنیم — این مقاله دیدی کلی از تئوری برنامه نویسی شی گرا ارائه میکند و سپس چگونگی شبیه سازی کلاسهایی از اشیاء توسز توابع سازنده و چگونگی ساخت نمونه اشیاء را شرح میدهد.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">نمونههای اولیه شی</a></dt> + <dd dir="rtl">نمونههای اولیه، مکانیزمی است که اشیا در جاوااسکریپت از یکدیگر ارثبری مینمایند، این مفهوم با مفهوم ارثبری در زبانهای شی گرای سنتی متفاوت است. در این مقاله، این تفاوت را بررسی میکنیم، چگونگی کارکرد زنجیرههای نمونه اولیه را شرح میدهیم و به اینکه چگونه خاصیتهای نمونه اولیه را میتوان برای اضافه کردن توابع به سازندههای موجود استفاده کرد، نگاهی خواهیم انداخت.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">ارثبری در جاوااسکریپت</a></dt> + <dd dir="rtl">با این توضیحات فراوان از OOJS، این مقاله چگونگی ساخت اشیا "فرزند" (سازندهها) و چگونگی ارث بردن ویژگیها از کلاس والد خود شرح میدهیم.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">کار با دادههای جیسان</a></dt> + <dd dir="rtl">نشانهگذاری شیء جاوااسکریپت (JSON) که معمولا برای نمایش و انتقال داده در وبسایتها (یعنی ارسال داده از سرور به کلاینت به گونهای که بتوان آن را در صفحه وب نمایش داد) استفاده میشود، فرمت متن-پایه استاندارد برای نمایش ساختارمند داده بر اساس نشانگذاری اشیاء در جاوااسکریپت است. شما غالبا با جیسان مواجه میشوید، بنابراین در این مقاله ما به شما هرآنچه را که برای کار با جیسان با استفاده از جاوااسکریپت نیاز دارید، شامل تجزیه جیسان به نحوی که بتوانید به دادههای آن دسترسی داشته باشید و یا جیسان خود را بنویسید، یاد خواهیم داد.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">تمرین ساخت شی</a></dt> + <dd dir="rtl">در مقالات قبلی، به همه ضروریات تئوری اشیاء جاوااسکریپت و نشانهگذاری آن نگاه کردیم و به شما پایه محکمی برای شروع دادیم. در این مقاله به داخل تمرین عملی شیرجه میزنیم و به شما تمرین بیشتری از اشیاء اختصاصی جاوااسکریپت میدهیم که با آنها یک چیز جالب و رنگی بسازید — یک توپ شیطانک رنگی!</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></dt> + <dd>In this assessment, you are expected to use the bouncing balls demo from the previous article as a starting point, and add some new and interesting features to it.</dd> +</dl> diff --git a/files/fa/learn/javascript/objects/inheritance/index.html b/files/fa/learn/javascript/objects/inheritance/index.html new file mode 100644 index 0000000000..c80d22ab3a --- /dev/null +++ b/files/fa/learn/javascript/objects/inheritance/index.html @@ -0,0 +1,436 @@ +--- +title: Inheritance in JavaScript +slug: Learn/JavaScript/Objects/Inheritance +translation_of: Learn/JavaScript/Objects/Inheritance +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">With most of the gory details of OOJS now explained, this article shows how to create "child" object classes (constructors) that inherit features from their "parent" classes. In addition, we present some advice on when and where you might use OOJS, and look at how classes are dealt with in modern ECMAScript syntax.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) and OOJS basics (see <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To understand how it is possible to implement inheritance in JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="وراثت_Prototypal">وراثت Prototypal</h2> + +<p>So far we have seen some inheritance in action — we have seen how prototype chains work, and how members are inherited going up a chain. But mostly this has involved built-in browser functions. How do we create an object in JavaScript that inherits from another object?</p> + +<p>Let's explore how to do this with a concrete example.</p> + +<h2 id="Getting_started">Getting started</h2> + +<p>First of all, make yourself a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> file (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">running live</a> also). Inside here you'll find the same <code>Person()</code> constructor example that we've been using all the way through the module, with a slight difference — we've defined only the properties inside the constructor:</p> + +<pre class="brush: js">function Person(first, last, age, gender, interests) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; +};</pre> + +<p>The methods are <em>all</em> defined on the constructor's prototype. For example:</p> + +<pre class="brush: js">Person.prototype.greeting = function() { + alert('Hi! I\'m ' + this.name.first + '.'); +};</pre> + +<div class="note"> +<p><strong>Note</strong>: In the source code, you'll also see <code>bio()</code> and <code>farewell()</code> methods defined. Later you'll see how these can be inherited by other constructors.</p> +</div> + +<p>Say we wanted to create a <code>Teacher</code> class, like the one we described in our initial object-oriented definition, which inherits all the members from <code>Person</code>, but also includes:</p> + +<ol> + <li>A new property, <code>subject</code> — this will contain the subject the teacher teaches.</li> + <li>An updated <code>greeting()</code> method, which sounds a bit more formal than the standard <code>greeting()</code> method — more suitable for a teacher addressing some students at school.</li> +</ol> + +<h2 id="تعریف_سازنده_Teacher">تعریف سازنده ()Teacher</h2> + +<p>The first thing we need to do is create a <code>Teacher()</code> constructor — add the following below the existing code:</p> + +<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) { + Person.call(this, first, last, age, gender, interests); + + this.subject = subject; +}</pre> + +<p>This looks similar to the Person constructor in many ways, but there is something strange here that we've not seen before — the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code> function. This function basically allows you to call a function defined somewhere else, but in the current context. The first parameter specifies the value of <code>this</code> that you want to use when running the function, and the other parameters are those that should be passed to the function when it is invoked.</p> + +<p>We want the <code>Teacher()</code> constructor to take the same parameters as the <code>Person()</code> constructor it is inheriting from, so we specify them all as parameters in the <code>call()</code> invocation.</p> + +<p>The last line inside the constructor simply defines the new <code>subject</code> property that teachers are going to have, which generic people don't have.</p> + +<p>As a note, we could have simply done this:</p> + +<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + this.subject = subject; +}</pre> + +<p>But this is just redefining the properties anew, not inheriting them from <code>Person()</code>, so it defeats the point of what we are trying to do. It also takes more lines of code.</p> + +<h3 id="ارث_بری_از_یک_سازنده_بدون_هیچ_گونه_پارامتری">ارث بری از یک سازنده بدون هیچ گونه پارامتری</h3> + +<p>Note that if the constructor you are inheriting from doesn't take its property values from parameters, you don't need to specify them as additional arguments in <code>call()</code>. So, for example, if you had something really simple like this:</p> + +<pre class="brush: js">function Brick() { + this.width = 10; + this.height = 20; +}</pre> + +<p>You could inherit the <code>width</code> and <code>height</code> properties by doing this (as well as the other steps described below, of course):</p> + +<pre class="brush: js">function BlueGlassBrick() { + Brick.call(this); + + this.opacity = 0.5; + this.color = 'blue'; +}</pre> + +<p>Note that we've only specified <code>this</code> inside <code>call()</code> — no other parameters are required as we are not inheriting any properties from the parent that are set via parameters.</p> + +<h2 id="Setting_Teachers_prototype_and_constructor_reference">Setting Teacher()'s prototype and constructor reference</h2> + +<p>All is good so far, but we have a problem. We have defined a new constructor, and it has a <code>prototype</code> property, which by default just contains an object with a reference to the constructor function itself. It does not contain the methods of the Person constructor's <code>prototype</code> property. To see this, enter <code>Object.getOwnPropertyNames(Teacher.prototype)</code> into either the text input field or your JavaScript console. Then enter it again, replacing <code>Teacher</code> with <code>Person</code>. Nor does the new constructor <em>inherit</em> those methods. To see this, compare the outputs of <code>Person.prototype.greeting</code> and <code>Teacher.prototype.greeting</code>. We need to get <code>Teacher()</code> to inherit the methods defined on <code>Person()</code>'s prototype. So how do we do that?</p> + +<ol> + <li>Add the following line below your previous addition: + <pre class="brush: js">Teacher.prototype = Object.create(Person.prototype);</pre> + Here our friend <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> comes to the rescue again. In this case we are using it to create a new object and make it the value of <code>Teacher.prototype</code>. The new object has <code>Person.prototype</code> as its prototype and will therefore inherit, if and when needed, all the methods available on <code>Person.prototype</code>.</li> + <li>We need to do one more thing before we move on. After adding the last line, <code>Teacher.</code><code>prototype</code>'s <code>constructor</code> property is now equal to <code>Person()</code>, because we just set <code>Teacher.prototype</code> to reference an object that inherits its properties from <code>Person.prototype</code>! Try saving your code, loading the page in a browser, and entering <code>Teacher.prototype.constructor</code> into the console to verify.</li> + <li>This can become a problem, so we need to set this right. You can do so by going back to your source code and adding the following line at the bottom: + <pre class="brush: js">Object.defineProperty(Teacher.prototype, 'constructor', { + value: Teacher, + enumerable: false, // so that it does not appear in 'for in' loop + writable: true });</pre> + </li> + <li>Now if you save and refresh, entering <code>Teacher.prototype.constructor</code> should return <code>Teacher()</code>, as desired, plus we are now inheriting from <code>Person()</code>!</li> +</ol> + +<h2 id="Giving_Teacher_a_new_greeting_function">Giving Teacher() a new greeting() function</h2> + +<p>To finish off our code, we need to define a new <code>greeting()</code> function on the <code>Teacher()</code> constructor.</p> + +<p>The easiest way to do this is to define it on <code>Teacher()</code>'s prototype — add the following at the bottom of your code:</p> + +<pre class="brush: js">Teacher.prototype.greeting = function() { + let prefix; + + if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') { + prefix = 'Mr.'; + } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') { + prefix = 'Ms.'; + } else { + prefix = 'Mx.'; + } + + alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.'); +};</pre> + +<p>This alerts the teacher's greeting, which also uses an appropriate name prefix for their gender, worked out using a conditional statement.</p> + +<h2 id="Trying_the_example_out">Trying the example out</h2> + +<p>Now that you've entered all the code, try creating an object instance from <code>Teacher()</code> by putting the following at the bottom of your JavaScript (or something similar of your choosing):</p> + +<pre class="brush: js">let teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre> + +<p>Now save and refresh, and try accessing the properties and methods of your new <code>teacher1</code> object, for example:</p> + +<pre class="brush: js">teacher1.name.first; +teacher1.interests[0]; +teacher1.bio(); +teacher1.subject; +teacher1.greeting(); +teacher1.farewell();</pre> + +<p>These should all work just fine. The queries on lines 1, 2, 3, and 6 access members inherited from the generic <code>Person()</code> constructor (class). The query on line 4 accesses a member that is available only on the more specialized <code>Teacher()</code> constructor (class). The query on line 5 would have accessed a member inherited from <code>Person()</code>, except for the fact that <code>Teacher()</code> has its own member with the same name, so the query accesses that member.</p> + +<div class="note"> +<p><strong>Note</strong>: If you have trouble getting this to work, compare your code to our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">finished version</a> (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">running live</a> also).</p> +</div> + +<p>The technique we covered here is not the only way to create inheriting classes in JavaScript, but it works OK, and it gives you a good idea about how to implement inheritance in JavaScript.</p> + +<p>You might also be interested in checking out some of the new {{glossary("ECMAScript")}} features that allow us to do inheritance more cleanly in JavaScript (see <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a>). We didn't cover those here, as they are not yet supported very widely across browsers. All the other code constructs we discussed in this set of articles are supported as far back as IE9 or earlier, and there are ways to achieve earlier support than that.</p> + +<p>A common way is to use a JavaScript library — most of the popular options have an easy set of functionality available for doing inheritance more easily and quickly. <a href="http://coffeescript.org/#classes">CoffeeScript</a> for example provides <code>class</code>, <code>extends</code>, etc.</p> + +<h2 id="A_further_exercise">A further exercise</h2> + +<p>In our <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">OOP theory section</a>, we also included a <code>Student</code> class as a concept, which inherits all the features of <code>Person</code>, and also has a different <code>greeting()</code> method from <code>Person</code> that is much more informal than the <code>Teacher</code>'s greeting. Have a look at what the student's greeting looks like in that section, and try implementing your own <code>Student()</code> constructor that inherits all the features of <code>Person()</code>, and implements the different <code>greeting()</code> function.</p> + +<div class="note"> +<p><strong>Note</strong>: If you have trouble getting this to work, have a look at our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html">finished version</a> (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">running live</a> also).</p> +</div> + +<h2 id="Object_member_summary">Object member summary</h2> + +<p>To summarize, you've got four types of property/method to worry about:</p> + +<ol> + <li>Those defined inside a constructor function that are given to object instances. These are fairly easy to spot — in your own custom code, they are the members defined inside a constructor using the <code>this.x = x</code> type lines; in built in browser code, they are the members only available to object instances (usually created by calling a constructor using the <code>new</code> keyword, e.g. <code>let myInstance = new myConstructor()</code>).</li> + <li>Those defined directly on the constructor themselves, that are available only on the constructor. These are commonly only available on built-in browser objects, and are recognized by being chained directly onto a constructor, <em>not</em> an instance. For example, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>. These are also known as <strong>static properties/methods</strong>.</li> + <li>Those defined on a constructor's prototype, which are inherited by all instances and inheriting object classes. These include any member defined on a Constructor's <code>prototype</code> property, e.g. <code>myConstructor.prototype.x()</code>.</li> + <li>Those available on an object instance, which can either be an object created when a constructor is instantiated like we saw above (so for example <code>var teacher1 = new Teacher( name = 'Chris' );</code> and then <code>teacher1.name</code>), or an object literal (<code>let teacher1 = { name = 'Chris' }</code> and then <code>teacher1.name</code>).</li> +</ol> + +<p>If you are not sure which is which, don't worry about it just yet — you are still learning, and familiarity will come with practice.</p> + +<h2 id="ECMAScript_2015_Classes">ECMAScript 2015 Classes</h2> + +<p>ECMAScript 2015 introduces <a href="/en-US/docs/Web/JavaScript/Reference/Classes">class syntax</a> to JavaScript as a way to write reusable classes using easier, cleaner syntax, which is more similar to classes in C++ or Java. In this section we'll convert the Person and Teacher examples from prototypal inheritance to classes, to show you how it's done.</p> + +<div class="note"> +<p><strong>Note</strong>: This modern way of writing classes is supported in all modern browsers, but it is still worth knowing about the underlying prototypal inheritance in case you work on a project that requires supporting a browser that doesn't support this syntax (most notably Internet Explorer).</p> +</div> + +<p>Let's look at a rewritten version of the Person example, class-style:</p> + +<pre class="brush: js">class Person { + constructor(first, last, age, gender, interests) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + } + + greeting() { + console.log(`Hi! I'm ${this.name.first}`); + }; + + farewell() { + console.log(`${this.name.first} has left the building. Bye for now!`); + }; +} +</pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a> statement indicates that we are creating a new class. Inside this block, we define all the features of the class:</p> + +<ul> + <li>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor()</a></code> method defines the constructor function that represents our <code>Person</code> class.</li> + <li><code>greeting()</code> and <code>farewell()</code> are class methods. Any methods you want associated with the class are defined inside it, after the constructor. In this example, we've used <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">template literals</a> rather than string concatenation to make the code easier to read.</li> +</ul> + +<p>We can now instantiate object instances using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a>, in just the same way as we did before:</p> + +<pre class="brush: js">let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']); +han.greeting(); +// Hi! I'm Han + +let leia = new Person('Leia', 'Organa', 19, 'female', ['Government']); +leia.farewell(); +// Leia has left the building. Bye for now +</pre> + +<div class="note"> +<p><strong>Note</strong>: Under the hood, your classes are being converted into Prototypal Inheritance models — this is just syntactic sugar. But I'm sure you'll agree that it's easier to write.</p> +</div> + +<h3 id="Inheritance_with_class_syntax">Inheritance with class syntax</h3> + +<p>Above we created a class to represent a person. They have a series of attributes that are common to all people; in this section we'll create our specialized <code>Teacher</code> class, making it inherit from <code>Person</code> using modern class syntax. This is called creating a subclass or subclassing.</p> + +<p>To create a subclass we use the <a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends keyword</a> to tell JavaScript the class we want to base our class on,</p> + +<pre class="brush: js">class Teacher extends Person { + constructor(subject, grade) { + this.subject = subject; + this.grade = grade; + } +}</pre> + +<p>but there's a little catch.</p> + +<p>Unlike old-school constructor functions where the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> does the initialization of <code>this</code> to a newly-allocated object, this isn't automatically initialized for a class defined by the <a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a> keyword, i.e the sub-classes.</p> + +<p>Therefore running the above code will give an error:</p> + +<pre class="brush: js">Uncaught ReferenceError: Must call super constructor in derived class before +accessing 'this' or returning from derived constructor</pre> + +<p>For sub-classes, the <code>this</code> intialization to a newly allocated object is always dependant on the parent class constructor, i.e the constructor function of the class from which you're extending.</p> + +<p>Here we are extending the <code>Person</code> class — the <code>Teacher</code> sub-class is an extension of the <code>Person</code> class. So for <code>Teacher</code>, the <code>this</code> initialization is done by the <code>Person</code> constructor.</p> + +<p>To call the parent constructor we have to use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code> operator</a>, like so:</p> + +<pre class="brush: js">class Teacher extends Person { + constructor(subject, grade) { + super(); // Now 'this' is initialized by calling the parent constructor. + this.subject = subject; + this.grade = grade; + } +}</pre> + +<p>There is no point having a sub-class if it doesn't inherit properties from the parent class.<br> + It is good then, that the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code> operator</a> also accepts arguments for the parent constructor.</p> + +<p>Looking back to our <code>Person</code> constructor, we can see it has the following block of code in its constructor method:</p> + +<pre class="brush: js"> constructor(first, last, age, gender, interests) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; +} </pre> + +<p>Since the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></code> operator is actually the parent class constructor, passing it the necessary arguments of the <code>Parent</code> class constructor will also initialize the parent class properties in our sub-class, thereby inheriting it:</p> + +<pre class="brush: js">class Teacher extends Person { + constructor(first, last, age, gender, interests, subject, grade) { + super(first, last, age, gender, interests); + + // subject and grade are specific to Teacher + this.subject = subject; + this.grade = grade; + } +} +</pre> + +<p>Now when we instantiate <code>Teacher</code> object instances, we can call methods and properties defined on both <code>Teacher</code>and <code>Person</code> as we'd expect:</p> + +<pre class="brush: js">let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5); +snape.greeting(); // Hi! I'm Severus. +snape.farewell(); // Severus has left the building. Bye for now. +snape.age // 58 +snape.subject; // Dark arts +</pre> + +<p>Like we did with Teachers, we could create other subclasses of <code>Person</code> to make them more specialized without modifying the base class.</p> + +<div class="note"> +<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-class-inheritance.html">es2015-class-inheritance.html</a> (<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-class-inheritance.html">see it live also</a>).</p> +</div> + +<h2 id="Getters_and_Setters">Getters and Setters</h2> + +<p>There may be times when we want to change the values of an attribute in the classes we create or we don't know what the final value of an attribute will be. Using the <code>Teacher</code> example, we may not know what subject the teacher will teach before we create them, or their subject may change between terms.</p> + +<p>We can handle such situations with getters and setters.</p> + +<p>Let's enhance the Teacher class with getters and setters. The class starts the same as it was the last time we looked at it.</p> + +<p>Getters and setters work in pairs. A getter returns the current value of the variable and its corresponding setter changes the value of the variable to the one it defines.</p> + +<p>The modified <code>Teacher</code> class looks like this:</p> + +<pre class="brush: js">class Teacher extends Person { + constructor(first, last, age, gender, interests, subject, grade) { + super(first, last, age, gender, interests); + // subject and grade are specific to Teacher + this._subject = subject; + this.grade = grade; + } + + get subject() { + return this._subject; + } + + set subject(newSubject) { + this._subject = newSubject; + } +} +</pre> + +<p>In our class above we have a getter and setter for the <code>subject</code> property. We use <strong><code>_</code> </strong> to create a separate value in which to store our name property. Without using this convention, we would get errors every time we called get or set. At this point:</p> + +<ul> + <li>To show the current value of the <code>_subject</code> property of the <code>snape</code> object we can use the <code>snape.subject</code> getter method.</li> + <li>To assign a new value to the <code>_subject</code> property we can use the <code>snape.subject="new value"</code> setter method.</li> +</ul> + +<p>The example below shows the two features in action:</p> + +<pre class="brush: js">// Check the default value +console.log(snape.subject) // Returns "Dark arts" + +// Change the value +snape.subject = "Balloon animals" // Sets _subject to "Balloon animals" + +// Check it again and see if it matches the new value +console.log(snape.subject) // Returns "Balloon animals" +</pre> + +<div class="note"> +<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-getters-setters.html">es2015-getters-setters.html</a> (<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-getters-setters.html">see it live also</a>).</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Getters and setters can be very useful at times, for example when you want to run some code every time a property is requested or set. For simple cases, however, plain property access without a getter or setter will do just fine.</p> +</div> + +<h2 id="When_would_you_use_inheritance_in_JavaScript">When would you use inheritance in JavaScript?</h2> + +<p>Particularly after this last article, you might be thinking "woo, this is complicated". Well, you are right. Prototypes and inheritance represent some of the most complex aspects of JavaScript, but a lot of JavaScript's power and flexibility comes from its object structure and inheritance, and it is worth understanding how it works.</p> + +<p>In a way, you use inheritance all the time. Whenever you use various features of a Web API , or methods/properties defined on a built-in browser object that you call on your strings, arrays, etc., you are implicitly using inheritance.</p> + +<p>In terms of using inheritance in your own code, you probably won't use it often, especially to begin with, and in small projects. It is a waste of time to use objects and inheritance just for the sake of it when you don't need them. But as your code bases get larger, you are more likely to find a need for it. If you find yourself starting to create a number of objects that have similar features, then creating a generic object type to contain all the shared functionality and inheriting those features in more specialized object types can be convenient and useful.</p> + +<div class="note"> +<p><strong>Note</strong>: Because of the way JavaScript works, with the prototype chain, etc., the sharing of functionality between objects is often called <strong>delegation</strong>. Specialized objects delegate functionality to a generic object type.</p> +</div> + +<p>When using inheritance, you are advised to not have too many levels of inheritance, and to keep careful track of where you define your methods and properties. It is possible to start writing code that temporarily modifies the prototypes of built-in browser objects, but you should not do this unless you have a really good reason. Too much inheritance can lead to endless confusion, and endless pain when you try to debug such code.</p> + +<p>Ultimately, objects are just another form of code reuse, like functions or loops, with their own specific roles and advantages. If you find yourself creating a bunch of related variables and functions and want to track them all together and package them neatly, an object is a good idea. Objects are also very useful when you want to pass a collection of data from one place to another. Both of these things can be achieved without use of constructors or inheritance. If you only need a single instance of an object, then you are probably better off just using an object literal, and you certainly don't need inheritance.</p> + +<h2 id="Alternatives_for_extending_the_prototype_chain">Alternatives for extending the prototype chain</h2> + +<p>In JavaScript, there are several different ways to extend the prototype of an object aside from what we've shown above. To find out more about the other ways, visit our <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Different_ways_to_create_objects_and_the_resulting_prototype_chain">Inheritance and the prototype chain</a> article.</p> + +<h2 id="Summary">Summary</h2> + +<p>This article has covered the remainder of the core OOJS theory and syntax that we think you should know now. At this point you should understand JavaScript object and OOP basics, prototypes and prototypal inheritance, how to create classes (constructors) and object instances, add features to classes, and create subclasses that inherit from other classes.</p> + +<p>In the next article we'll have a look at how to work with JavaScript Object Notation (JSON), a common data exchange format written using JavaScript objects.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — A really useful interactive learning site for learning about objects.</li> + <li><a href="https://www.manning.com/books/secrets-of-the-javascript-ninja-second-edition">Secrets of the JavaScript Ninja</a>, Chapter 7 — A good book on advanced JavaScript concepts and techniques, by John Resig, Bear Bibeault, and Josip Maras. Chapter 7 covers aspects of prototypes and inheritance really well; you can probably track down a print or online copy fairly easily.</li> + <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/README.md">You Don't Know JS: this & Object Prototypes</a> — Part of Kyle Simpson's excellent series of JavaScript manuals, Chapter 5 in particular looks at prototypes in much more detail than we do here. We've presented a simplified view in this series of articles aimed at beginners, whereas Kyle goes into great depth and provides a more complex but more accurate picture.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> +</ul> diff --git a/files/fa/learn/javascript/objects/مقدمات/index.html b/files/fa/learn/javascript/objects/مقدمات/index.html new file mode 100644 index 0000000000..47ee37c7a2 --- /dev/null +++ b/files/fa/learn/javascript/objects/مقدمات/index.html @@ -0,0 +1,254 @@ +--- +title: مقدمات اشیا در جاوااسکریپت +slug: Learn/JavaScript/Objects/مقدمات +translation_of: Learn/JavaScript/Objects/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div> + +<p class="summary" dir="rtl"><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">در اولین مقاله به اشیاء در جاوااسکریپت نگاهی خواهیم انداخت، به اصول رسم الخط اشیاء در جاوااسکریپت نگاهی خواهیم انداخت و برخی از ویژگیهای جاوااسکریپت را که تا کنون با آن کار کردهایم را بازنگری میکنیم و این حقیقت را که بسیاری از ویژگیهایی که تا کنون با آنها سروکار داشتهایم در واقع شی بودهاند را بازگو میکنیم.</span></p> + +<table class="learn-box standard-table" style="height: 239px; width: 575px;"> + <tbody> + <tr> + <th dir="rtl" scope="row">پیشنیازها:</th> + <td dir="rtl">ادبیات اولیه کامپیوتر، فهم مقدماتی HTML و CSS، آشنایی با مقدمات جاوااسکریپت ( <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">قدمهای اول در جاوااسکریپت</a> و <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">بلوکهای سازنده جاوااسکریپت</a> را ببینید).</td> + </tr> + <tr> + <th dir="rtl" scope="row">اهداف:</th> + <td dir="rtl">یادگیری اصول اولیه برنامه نویسی شی-گرا، ارتباط آن با جاوااسکریپت ("تقریبا همه چیز یک شی است") و چگونگی کار با اشیاء در جاوااسکریپت.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="مقدمات_اشیاء">مقدمات اشیاء</h2> + +<p dir="rtl">یک شی مجموعه از دادهها و یا عملکردهای مرتبط است (که معمولا شامل تعدادی متغییر و تابع است — در داخل اشیاء به متغییرها خاصیت و به توابع، متد گویند). بیایید با یک نمونه بفهمیم آنها چگونه هستند.</p> + +<p dir="rtl">برای شروع، یک کپی از فالی <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> ما را دانلود کنید.این فایل یک {{HTMLElement("script")}} برای نوشتن کد ما را فراهم میآورد.</p> + +<p dir="rtl">مشابه بسیاری چیزهای دیگر در جاوااسکریپت، ساخت یک شی با تعریف و مقداردهی یک متغییر آغاز میشود. متن زیر را در کد جاوااسکریپتی که اکنون دارید وارد نموده، ذخیره و رفرش کنید:</p> + +<pre class="brush: js">var person = {};</pre> + +<p dir="rtl">اگر در کنسول جاوااسکریپت <code>person</code> را وارد نمایید و دکه اینتر را بزنید، خروجی زیر را خواهید داشت:</p> + +<pre class="brush: js">[object Object]</pre> + +<p dir="rtl">تبریک! شما اولین شی خود را ساختید. کار انجام شد! اما این شی هنوز خالی است، نمیتواند کار خاصی را انجام دهد، پس بیایید شیمان را آپدیت کنیم تا به شکل زیر در بیاید:</p> + +<pre class="brush: js">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] + '.'); + } +}; +</pre> + +<p dir="rtl">بعد از ذخیره و رفرش، مقادیر زیر را در کنسول جاوااسکریپت مرورگر خود در بخش ابزار توسعه وارد کنید:</p> + +<pre class="brush: js">person.name +person.name[0] +person.age +person.interests[1] +person.bio() +person.greeting()</pre> + +<p dir="rtl">شما حالا مقداری داده و عملکرد داخل شی خود دارید و میتوناید با نشانگذاری سادهای به آن دسترسی داشته باشید.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are having trouble getting this to work, try comparing your code against our version — see <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (also <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">see it running live</a>). 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.</p> +</div> + +<p>So what is going on here? Well, an object is made up of multiple members, each of which has a name (e.g. <code>name</code> and <code>age</code> above), and a value (e.g. <code>['Bob', 'Smith']</code> and <code>32</code>). 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:</p> + +<pre class="brush: js">var objectName = { + member1Name: member1Value, + member2Name: member2Value, + member3Name: member3Value +};</pre> + +<p>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 <strong>properties</strong>. The last two items are functions that allow the object to do something with that data, and are referred to as the object's <strong>methods</strong>.</p> + +<p>An object like this is referred to as an <strong>object literal</strong> — 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.</p> + +<p>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.</p> + +<h2 id="Dot_notation">Dot notation</h2> + +<p>Above, you accessed the object's properties and methods using <strong>dot notation</strong>. The object name (person) acts as the <strong>namespace</strong> — it must be entered first to access anything <strong>encapsulated</strong> 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:</p> + +<pre class="brush: js">person.age +person.interests[1] +person.bio()</pre> + +<h3 id="Sub-namespaces">Sub-namespaces</h3> + +<p>It is even possible to make the value of an object member another object. For example, try changing the name member from</p> + +<pre class="brush: js">name: ['Bob', 'Smith'],</pre> + +<p>to</p> + +<pre class="brush: js">name : { + first: 'Bob', + last: 'Smith' +},</pre> + +<p>Here we are effectively creating a <strong>sub-namespace</strong>. 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:</p> + +<pre class="brush: js">person.name.first +person.name.last</pre> + +<p><strong>Important</strong>: At this point you'll also need to go through your method code and change any instances of</p> + +<pre class="brush: js">name[0] +name[1]</pre> + +<p>to</p> + +<pre class="brush: js">name.first +name.last</pre> + +<p>Otherwise your methods will no longer work.</p> + +<h2 id="Bracket_notation">Bracket notation</h2> + +<p>There is another way to access object properties — using bracket notation. Instead of using these:</p> + +<pre class="brush: js">person.age +person.name.first</pre> + +<p>You can use</p> + +<pre class="brush: js">person['age'] +person['name']['first']</pre> + +<p>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 <strong>associative arrays</strong> — they map strings to values in the same way that arrays map numbers to values.</p> + +<h2 id="Setting_object_members">Setting object members</h2> + +<p>So far we've only looked at retrieving (or <strong>getting</strong>) object members — you can also <strong>set</strong> (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this:</p> + +<pre class="brush: js">person.age = 45; +person['name']['last'] = 'Cratchit';</pre> + +<p>Try entering the above lines, and then getting the members again to see how they've changed, like so:</p> + +<pre class="brush: js">person.age +person['name']['last']</pre> + +<p>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:</p> + +<pre class="brush: js">person['eyes'] = 'hazel'; +person.farewell = function() { alert("Bye everybody!"); }</pre> + +<p>You can now test out your new members:</p> + +<pre class="brush: js">person['eyes'] +person.farewell()</pre> + +<p>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:</p> + +<pre class="brush: js">var myDataName = nameInput.value; +var myDataValue = nameValue.value;</pre> + +<p>we could then add this new member name and value to the <code>person</code> object like this:</p> + +<pre class="brush: js">person[myDataName] = myDataValue;</pre> + +<p>To test this, try adding the following lines into your code, just below the closing curly brace of the <code>person</code> object:</p> + +<pre class="brush: js">var myDataName = 'height'; +var myDataValue = '1.75m'; +person[myDataName] = myDataValue;</pre> + +<p>Now try saving and refreshing, and entering the following into your text input:</p> + +<pre class="brush: js">person.height</pre> + +<p>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.</p> + +<h2 id="What_is_this">What is "this"?</h2> + +<p>You may have noticed something slightly strange in our methods. Look at this one for example:</p> + +<pre class="brush: js">greeting: function() { + alert('Hi! I\'m ' + this.name.first + '.'); +}</pre> + +<p>You are probably wondering what "this" is. The <code>this</code> keyword refers to the current object the code is being written inside — so in this case <code>this</code> is equivalent to <code>person</code>. So why not just write <code>person</code> instead? As you'll see in the <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a> article when we start creating constructors, etc., <code>this</code> is very useful — it will always ensure that the correct values are used when a member's context changes (e.g. two different <code>person</code> object instances may have different names, but will want to use their own name when saying their greeting).</p> + +<p>Let's illustrate what we mean with a simplified pair of person objects:</p> + +<pre class="brush: js">var person1 = { + name: 'Chris', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +var person2 = { + name: 'Brian', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p>In this case, <code>person1.greeting()</code> will output "Hi! I'm Chris."; <code>person2.greeting()</code> 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, <code>this</code> 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.</p> + +<h2 id="You've_been_using_objects_all_along">You've been using objects all along</h2> + +<p>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.</p> + +<p>So when you used string methods like:</p> + +<pre class="brush: js">myString.split(',');</pre> + +<p>You were using a method available on an instance of the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> class. Every time you create a string in your code, that string is automatically created as an instance of <code>String</code>, and therefore has several common methods/properties available on it.</p> + +<p>When you accessed the document object model using lines like this:</p> + +<pre class="brush: js">var myDiv = document.createElement('div'); +var myVideo = document.querySelector('video');</pre> + +<p>You were using methods available on an instance of the <code><a href="/en-US/docs/Web/API/Document">Document</a></code> class. For each webpage loaded, an instance of <code>Document</code> is created, called <code>document</code>, 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.</p> + +<p>The same is true of pretty much any other built-in object/API you've been using — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, etc.</p> + +<p>Note that built in Objects/APIs don't always create object instances automatically. As an example, the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — 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:</p> + +<pre class="brush: js">var myNotification = new Notification('Hello!');</pre> + +<p>Again, we'll look at constructors in a later article.</p> + +<div class="note"> +<p><strong>Note</strong>: It is useful to think about the way objects communicate as <strong>message passing</strong> — 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.</p> +</div> + +<h2 id="Summary">Summary</h2> + +<p>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 <code>person</code> 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.</p> + +<p>In the next article we'll start to look at object-oriented programming (OOP) theory, and how such techniques can be used in JavaScript.</p> + +<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> +</ul> diff --git a/files/fa/learn/server-side/django/index.html b/files/fa/learn/server-side/django/index.html new file mode 100644 index 0000000000..48088ab2d0 --- /dev/null +++ b/files/fa/learn/server-side/django/index.html @@ -0,0 +1,70 @@ +--- +title: Django Web Framework (Python) +slug: Learn/Server-side/Django +tags: + - Beginner + - CodingScripting + - Intro + - Learn + - NeedsTranslation + - Python + - Server-side programming + - TopicStub + - django +translation_of: Learn/Server-side/Django +--- +<div>{{LearnSidebar}}</div> + +<p>Django is an extremely popular and fully featured server-side web framework, written in Python. This module shows you why Django is one of the most popular web server frameworks, how to set up a development environment, and how to start using it to create your own web applications.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module you don't need to have any knowledge of Django. Ideally, you would need to understand what server-side web programming and web frameworks are by reading the topics in our <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a> module.</p> + +<p>A general knowledge of programming concepts and <a href="/en-US/docs/Glossary/Python">Python</a> is recommended, but is not essential to understanding the core concepts.</p> + +<div class="note"> +<p><strong>Note</strong>: Python is one of the easiest programming languages for novices to read and understand. That said, if you want to understand this module better, there are numerous free books and tutorials available on the Internet to help you out (new programmers might want to check out the <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> page on the python.org wiki).</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></dt> + <dd>In this first Django article we answer the question "What is Django?" and give you an overview of what makes this web framework special. We'll outline the main features, including some advanced functionality that we won't have time to cover in detail in this module. We'll also show you some of the main building blocks of a Django application, to give you an idea of what it can do before you set it up and start playing.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></dt> + <dd>Now that you know what Django is for, we'll show you how to set up and test a Django development environment on Windows, Linux (Ubuntu), and macOS — whatever common operating system you are using, this article should give you what you need to be able to start developing Django apps.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></dt> + <dd>The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" — an example website we'll be working through and evolving in subsequent articles.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></dt> + <dd>This article shows how you can create a "skeleton" website project, which you can then go on to populate with site-specific settings, urls, models, views, and templates.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></dt> + <dd>This article shows how to define models for the <em>LocalLibrary</em> website — models represent the data structures we want to store our app's data in, and also allow Django to store data in a database for us (and modify it later on). It explains what a model is, how it is declared, and some of the main field types. It also briefly shows a few of the main ways you can access model data.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></dt> + <dd>Now that we've created models for the <em>LocalLibrary </em>website, we'll use the Django Admin site to add some "real" book data. First we'll show you how to register the models with the admin site, then we'll show you how to login and create some data. At the end we show some ways in which you can further improve the presentation of the admin site.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></dt> + <dd>We're now ready to add the code to display our first full page — a home page for the <em>LocalLibrary</em> that shows how many records we have of each model type, and provides sidebar navigation links to our other pages. Along the way we'll gain practical experience in writing basic URL maps and views, getting records from the database, and using templates.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></dt> + <dd>This tutorial extends our <em>LocalLibrary</em> website, adding list and detail pages for books and authors. Here we'll learn about generic class-based views, and show how they can reduce the amount of code you have to write for common use cases. We'll also go into URL handling in greater detail, showing how to perform basic pattern matching.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></dt> + <dd>This tutorial extends our <em>LocalLibrary</em> website, adding a session-based visit-counter to the home page. This is a relatively simple example, but it does show how you can use the session framework to provide persistent behaviour for anonymous users in your own sites.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></dt> + <dd>In this tutorial we'll show you how to allow users to login to your site with their own accounts, and how to control what they can do and see based on whether or not they are logged in and their <em>permissions</em>. As part of this demonstration we'll extend the <em>LocalLibrary</em> website, adding login and logout pages, and user- and staff-specific pages for viewing books that have been borrowed.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></dt> + <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Django, and in particular the easiest way to write forms to create, update, and delete model instances. As part of this demonstration we'll extend the <em>LocalLibrary</em> website so that librarians can renew books, and create, update, and delete authors using our own forms (rather than using the admin application).</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></dt> + <dd>As websites grow they become harder to test manually — not only is there more to test, but, as the interactions between components become more complex, a small change in one area can require many additional tests to verify its impact on other areas. One way to mitigate these problems is to write automated tests, which can easily and reliably be run every time you make a change. This tutorial shows how to automate <em>unit testing</em> of your website using Django's test framework.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></dt> + <dd>Now you've created (and tested) an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></dt> + <dd>Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> — this article provides a practical demonstration of how Django's built-in protections handle such threats.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></dt> + <dd>In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.</dd> +</dl> diff --git a/files/fa/learn/server-side/index.html b/files/fa/learn/server-side/index.html new file mode 100644 index 0000000000..b497257371 --- /dev/null +++ b/files/fa/learn/server-side/index.html @@ -0,0 +1,59 @@ +--- +title: Server-side website programming +slug: Learn/Server-side +tags: + - Beginner + - CodingScripting + - Intro + - Landing + - Learn + - NeedsTranslation + - Server + - Server-side programming + - Topic + - TopicStub +translation_of: Learn/Server-side +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">The <strong><em>Dynamic Websites </em></strong>–<em><strong> Server-side programming</strong></em> topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a generic introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.</p> + +<p>Most major websites use some kind of server-side technology to dynamically display different data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Displaying all of these using completely different static pages would be completely inefficient, so instead such sites display static templates (built using <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), and then dynamically update the data displayed inside those templates when needed, e.g. when you want to view a different product on Amazon.</p> + +<p>In the modern world of web development, learning about server-side development is highly recommended.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>Getting started with server-side programming is usually easier than with client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.</p> + +<p>A basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".</p> + +<p>You will need to understand "how the web works". We recommend that you first read the following topics:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li> +</ul> + +<p>With that basic understanding you'll be ready to work your way through the modules in this section. </p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks . </p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt> + <dd>This module provides server-technology-agnostic information about server-side website programming, including answers to fundamental questions about server-side programming — "what it is", "how it differs from client-side programming", and "why it is so useful" — and an overview of some of the more popular server-side web frameworks and guidance on how to select the most suitable for your site. Lastly we provide an introductory section on web server security.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt> + <dd>Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt> + <dd>Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Node_server_without_framework">Node server without framework</a></dt> + <dd>This article provides a simple static file server built with pure Node.js, for those of you not wanting to use a framework.</dd> +</dl> diff --git a/files/fa/learn/server-side/قدم_اول/index.html b/files/fa/learn/server-side/قدم_اول/index.html new file mode 100644 index 0000000000..2ce55b9041 --- /dev/null +++ b/files/fa/learn/server-side/قدم_اول/index.html @@ -0,0 +1,45 @@ +--- +title: قدم اول برنامه نویسی وب سمت سرور +slug: Learn/Server-side/قدم_اول +tags: + - آموزش + - برنامه نویسی سمت سرور + - راهنمایی + - مقدماتی + - کد +translation_of: Learn/Server-side/First_steps +--- +<div dir="rtl"> </div> + +<p dir="rtl">در این دوره ماژول برنامه نویسی سمت سرویس ما چند سوال اساسی در باره برنامه نویسی سمت سرور پاسخ می دهیم<span class="seoSummary"> "برنامه نویسی سمت سرور چیست؟", "تفاوت برنامه نویسی سمت سرور و سمت کلاینت چیست؟", و"برنامه نویسی سمت سرور چطور میتواند مفید باشد".</span> در ادامه ما محبوب ترین فریمورک های وب سمت سرور را بررسی می کنیم و در طول این راهنمایی چگونگی روش انتخاب مناسب ترین فریمورک برای ساخت اولین وبسایت شما را خواهیم داشت.</p> + +<h2 dir="rtl" id="پیش_نیازها">پیش نیازها</h2> + +<p dir="rtl">پیش از شروع نیازی نیست شما درباره برنامه نویسی وب سمت سرور هیچ دانشی داشت باشید در عوض شما باید با نوع برنامه نویسی آشنای داشته باشید.</p> + +<p dir="rtl">به هر حال, شما خواهید فهمید "وب چگونه کار می کنید" ما پیشنهاد می کنیم اول موضوعات زیر را دنبال کنید:</p> + +<ul> + <li dir="rtl"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">یک سرور وب چیست ؟</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">چه نرم افزاری نیاز است تا یک وبسایت ساخت؟</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">چگونه فایل ها را روی یک سرور وب آپلود (بارگذاری) کرد ؟</a></li> +</ul> + +<p dir="rtl">بعد از آشنای با مفاهیم پایه شما آماده خواهید بود ادامه این ماژول را دنبال کنید.</p> + +<h2 dir="rtl" id="راهنما">راهنما</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction">آشنای با سمت سرور</a></dt> + <dd dir="rtl">به دوره آموزش ابتدایی سمت سرور MDN خوش آمدید ! در این آموزش ٬ ما از بالاترین سطح برنامه نویس به سمت سرور نگاه می کنیم و به سوال های مثل "چه چیزی هست ؟" , "چه تفاوتی با برنامه نویسی سمت کلاینت دارد؟" و "برنامه نویسی سمت سرور مفید است ؟" . بعد از خواندن این مقاله شما خواهید فهمید قدرت کد نویسی سمت سرور در چیست.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">بررسی اجمالی سمت سرور</a></dt> + <dd dir="rtl">الان شما با خواندن مقاله موجود در لینک بالا می فهمید هدف و فواید برنامه نویسی سمت سرور در چیست. ما با بررسی های که خواهیم انجام داد روی درخواست های داینامک از طرف مرورگر (بروزر) به جزییات آن آشنا خواهیم شد. اکثر کد های سمت سرور یک وبسایت وظیفه هندل در خواست ها و پاسخ ها را از طریق یکسان دارند . درک این موضوع به شما کمک می کند که بدانید در نوشتن کدهای خود چه مواردی را باید در نظر بگیرید .</dd> + <dt dir="rtl"><a href="/fa/docs/">فریم ورک وب سمت سرور</a></dt> + <dd dir="rtl">در مقاله قبلی دیدید یک وب اپ سمت سرو چطوری به درخواست های دریافت شده از مرورگر وب پاسخ می دهد . الان در این مقاله که در لینک بالا وجود دارد خواهید دید یک فریمورک وب چگونه مدریت فرآیند ها (تسک ها) را آسانتر می کند. این موضوع به شما کمک می کند فریمورک بهتری برای وب اپ خود انتخاب کنید .</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">امنیت وبسایت </a></dt> + <dd dir="rtl">امنیت وبسایت مستلزم در نظر گرفتن همه جنبه ها در طراحی و استفاده وبسایت است . با خواندن مقاله موجود در لینک یک الگو یا معلم تمام و کمال برای راهنمای شما جهت تامین امنیت وبسایت شما نباید اما این آموزش به شما کمک خواهد کرد با در نظر گرفتن قدم های مهم که باعث می شود وب اپ شما مقاومت لازم در مقابل بیشتر تهدید های عمومی بدست آورد</dd> +</dl> + +<h2 dir="rtl" id="ارزیابی">ارزیابی </h2> + +<p dir="rtl">این بازنگری شامل هیچ ارزبای نیست زیرا شما هنوز هیچ کدی مشاهده نکردید. ما امیدواریم شما درک درستی از انواع عملکرد و بتوانید برنامه نویسی سمت سرور را شروع کنید و بتوانید انتخاب کنید کدام فریمورک وب برای خلق اولین وبسایت شما بهتر است.</p> diff --git a/files/fa/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/fa/learn/tools_and_testing/client-side_javascript_frameworks/index.html new file mode 100644 index 0000000000..c9b01985e9 --- /dev/null +++ b/files/fa/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -0,0 +1,133 @@ +--- +title: Understanding client-side JavaScript frameworks +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks +tags: + - JavaScript + - Translation +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.</p> + +<p class="summary">As an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.</p> + +<p class="summary">In this set of articles, we are aiming to give you a comfortable starting point to help you begin learning frameworks. We are not aiming to exhaustively teach you everything you need to know about React/ReactDOM, or Vue, or some other specific framework; the framework teams' own docs do that job already. Instead, we want to back up and first answer more fundamental questions such as:</p> + +<ul> + <li class="summary">Why should I use a framework? What problems do they solve for me?</li> + <li class="summary">What questions should I ask when trying to choose a framework? Do I even need to use a framework?</li> + <li class="summary">What features do frameworks have? How do they work in general, and how do frameworks' implementations of these features differ?</li> + <li class="summary">How do they relate to "vanilla" JavaScript or HTML?</li> +</ul> + +<p class="summary">After that, we'll provide some tutorials covering the essentials of some of the major frameworks, to provide you with enough context and familiarity to start going into greater depth yourself. We want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web platform fundamental best practices such as accessibility.</p> + +<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Get started now, with "Introduction to client-side frameworks"</a></strong></p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and especially <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</p> + +<p>Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.</p> + +<h2 id="Introductory_guides">Introductory guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction to client-side frameworks</a></dt> + <dd>We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Framework main features</a></dt> + <dd>Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.</dd> +</dl> + +<h2 id="React_tutorials">React tutorials</h2> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.</p> + +<p>If you need to check your code against our version, you can find a finished version of the sample React app code in our <a href="https://github.com/mdn/todo-react">todo-react repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p> +</div> + +<dl> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Getting started with React</a></dt> + <dd>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Beginning our React todo list</a></dt> + <dd>Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Componentizing our React app</a></dt> + <dd>At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React interactivity: Events and state</a></dt> + <dd>With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React interactivity: Editing, filtering, conditional rendering</a></dt> + <dd>As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibility in React</a></dt> + <dd>In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React resources</a></dt> + <dd>Our final article provides you with a list of React resources that you can use to go further in your learning.</dd> +</dl> + +<h2 id="Ember_tutorials">Ember tutorials</h2> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.</p> + +<p>If you need to check your code against our version, you can find a finished version of the sample Ember app code in the <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>. For a running live version, see <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> (this also includes a few additional features not covered in the tutorial).</p> +</div> + +<dl> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Getting started with Ember</a></dt> + <dd>In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app structure and componentization</a></dt> + <dd>In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember interactivity: Events, classes and state</a></dt> + <dd>At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember Interactivity: Footer functionality, conditional rendering</a></dt> + <dd>Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routing in Ember</a></dt> + <dd>In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember resources and troubleshooting</a></dt> + <dd>Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.</dd> +</dl> + +<h2 id="Vue_tutorials">Vue tutorials</h2> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Vue tutorials last tested in May 2020, with Vue 2.6.11.</p> + +<p>If you need to check your code against our version, you can find a finished version of the sample Vue app code in our <a href="https://github.com/mdn/todo-vue">todo-vue repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p> +</div> + +<dl> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Getting started with Vue</a></dt> + <dd>Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creating our first Vue component</a></dt> + <dd>Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendering a list of Vue components</a></dt> + <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">At this point we've got a fully working component; we're now ready to add multiple <code>ToDoItem</code> components to our App. In this article we'll look at adding a set of todo item data to our <code>App.vue</code> component, which we'll then loop through and display inside <code>ToDoItem</code> components using the <code>v-for</code> directive. </span></dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Adding a new todo form: Vue events, methods, and models</a></dt> + <dd>We now have sample data in place and a loop that takes each bit of data and renders it inside a <code>ToDoItem</code> in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <code><input></code>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt> + <dd>The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Using Vue computed properties</a></dt> + <dd>In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue conditional rendering: editing existing todos</a></dt> + <dd>Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely <code>v-if</code> and <code>v-else</code> — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Focus management with Vue refs</a></dt> + <dd>We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt> + <dd>Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.</dd> +</dl> + +<h2 id="Which_frameworks_did_we_choose">Which frameworks did we choose?</h2> + +<p>We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:</p> + +<ul> + <li>They are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skill set when looking for a job.</li> + <li>They have strong communities and good documentation. It is very important to be able to get help with learning a complex subject, especially when you are just starting out.</li> + <li>We don't have the resources to cover <em>all</em> modern frameworks. That list would be very difficult to keep up-to-date anyway, as new ones appear all the time.</li> + <li>As a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. Keeping the list short is therefore helpful.</li> +</ul> + +<p>We want to say this upfront — we've <strong>not</strong> chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.</p> + +<p>Note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via <a href="https://wiki.mozilla.org/Matrix">Matrix</a>, or <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>, or drop us a mail on the <a href="mailto:mdn-admins@mozilla.org">mdn-admins list</a>.</p> diff --git a/files/fa/learn/tools_and_testing/index.html b/files/fa/learn/tools_and_testing/index.html new file mode 100644 index 0000000000..6c0e91c3c6 --- /dev/null +++ b/files/fa/learn/tools_and_testing/index.html @@ -0,0 +1,52 @@ +--- +title: Tools and testing +slug: Learn/Tools_and_testing +tags: + - Accessibility + - Automation + - Beginner + - CSS + - CodingScripting + - HTML + - JavaScript + - Landing + - Learn + - NeedsTranslation + - Testing + - Tools + - Topic + - TopicStub + - cross browser + - user testing +translation_of: Learn/Tools_and_testing +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Once you've started to become comfortable programming with core web technologies (like HTML, CSS, and JavaScript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from JavaScript frameworks, to testing and automation tools, and more besides. As your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, working out a reliable toolchain to give your development process superpowers.</p> + +<p>On top of that, we still need to keep cross-browser support in the forefront of our minds, and make sure that our code follows best practices that allow our projects to work across different browsers and devices that our users are using to browse the Web, and be usable by people with disabilities.</p> + +<p>Working out what tools you should be using can be a difficult process, so we have written this set of articles to inform you of what types of tool are available, what they can do for you, and how to make use of the current industry favourites.</p> + +<div class="note"> +<p><strong>Note</strong>: We have referenced a number of tools in this topic, not because we endorse them or think they are the best, but because we know they work and have good industry support. In most cases there are other tools available, old ones will go out of fashion, and new ones will no doubt appear.</p> +</div> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use many the tools detailed here. For example, you'll need to know the fundamentals of these languages before you start debugging problems in complex web code, making effective use of JavaScript frameworks, or writing tests and running them against your code using test runners.</p> + +<p>In addition, you should start with the first module in this topic, which gives a useful overview of the general area.</p> + +<h2 id="Modules">Modules</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Understanding client-side web development tools</a></dt> + <dd>Client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. We finish up by providing a complete toolchain example showing you how to get productive.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Understanding client-side JavaScript frameworks</a></dt> + <dd>JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience. This module gives you some fundamental background knowledge about how client-side frameworks work and how they fit into your toolset, before moving on to tutorial series covering some of today's most popular ones.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git and GitHub</a></dt> + <dd>All developers will use some kind of <strong>version control system</strong> (<strong>VCS</strong>), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll back to previous versions of the code base if a problem is discovered later on. The most popular VCS (at least among web developers) is <strong>Git</strong>, along with <strong>GitHub</strong>, a site that provides hosting for your repositories and several tools for working with them. This module aims to teach you what you need to know about both of them.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross browser testing</a></dt> + <dd>This module looks specifically at the area of testing web projects across different browsers. Here we look at identifying your target audience (e.g. what users, browsers and devices do you most need to worry about?), how to go about testing, the main issues that you'll face with different types of code and how to fix/mitigate those, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.</dd> +</dl> diff --git a/files/fa/mdn/community/index.html b/files/fa/mdn/community/index.html new file mode 100644 index 0000000000..742a54d893 --- /dev/null +++ b/files/fa/mdn/community/index.html @@ -0,0 +1,49 @@ +--- +title: Join the MDN Web Docs community +slug: MDN/Community +translation_of: MDN/Community +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<div class="summary"> +<p>The MDN Web Docs site is more than a wiki: It's a community of developers working together to make MDN an outstanding resource for developers who use open Web technologies.</p> +</div> + +<p>We'd love it if you contribute to MDN, but we'd love it even more if you participate in the MDN community. Here's how to get connected, in three easy steps:</p> + +<ol> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">Create an MDN account</a>.</li> + <li><a href="/en-US/docs/MDN/Community/Conversations">Join in conversations</a>.</li> + <li><a href="/en-US/docs/MDN/Community/Whats_happening">Follow what's happening</a>.</li> +</ol> + +<h2 id="How_the_community_works">How the community works</h2> + +<p>The following are more articles that describe the community of MDN.</p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Roles">Community roles</a></dt> + <dd class="landingPageList">There are a number of roles within the MDN community that have specific responsibilities.</dd> + <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Doc_sprints">Doc sprints</a></dt> + <dd class="landingPageList">This is a guide to organizing a documentation sprint. It contains advice and tips from people who have organized doc sprints, to help you in organizing one, too.</dd> + <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Whats_happening">Follow what's happening</a></dt> + <dd class="landingPageList">MDN is brought to you by the <a class="external" href="https://wiki.mozilla.org/MDN">Mozilla Developer Network community</a>. Here are some ways to that we share information about what we're doing.</dd> +</dl> + +<dl> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Conversations">MDN community conversations</a></dt> + <dd class="landingPageList">The "work" of MDN happens on the MDN site, but the "community" also happens through (asynchronous) discussion and (synchronous) online chat and meetings.</dd> + <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Working_in_community">Working in community</a></dt> + <dd class="landingPageList">A major part of contributing to MDN documentation on any significant scale is knowing how to work as part of the MDN community. This article offers tips to help you make the most of your interactions with both other writers and with development teams.</dd> +</dl> +</div> +</div> diff --git a/files/fa/mdn/contribute/getting_started/index.html b/files/fa/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..21b0a3703c --- /dev/null +++ b/files/fa/mdn/contribute/getting_started/index.html @@ -0,0 +1,109 @@ +--- +title: شروع به کار در MDN +slug: MDN/Contribute/Getting_started +tags: + - راهنما + - مبتدی + - مقدمه +translation_of: MDN/Contribute/Getting_started +--- +<div>{{MDNSidebar}}</div> + +<p dir="rtl" id="What_is_MDN.3F"><span class="seoSummary">ما جامعهی بازی ازتوسعهدهندگان و نویسندگان وب، (بدون توجه به برند، مرورگر و یا پلتفرمی خاص) مشغول ایجاد منابع برای بهتر کردن وب هستیم. هر کسی میتواند مشارکت کند و ما را با مشارکت خود قوی تر کند. ما با یاری همدیگر قادر خواهیم بود، نوآوری را برای هدفی بهتر به وب بیاوریم. همینجا شروع می شود. با شما.</span></p> + +<p dir="rtl">هر بخش از MDN (کدهایی که موجب کارکرد سایت روی متون و اسناد، نمونه کدها،و پیش نمایش ها هستند) بواسطه ارتباط نویسندگان و بهینه سازان تولید می شود. هرکس چیزی برای <span class="seoSummary">ارائه </span> دارد، به امید آنکه شماهم به ما بپیوندید!</p> + +<h2 dir="rtl" id="۳_گام_ساده_برای_ورود_به_MDN"><span>۳ گام ساده برای ورود به MDN</span></h2> + +<p dir="rtl">MDN یک ویکی است، جاییکه هرکس قادر به اضافه یا اصلاح مطالب است. نیازی نیست که شما یک برنامه نویس باشید ویا چیز زیادی در مورد فن آوری بدانید.چیزهای زیادی از وظایف ساده ای چون غلط گیری و تصحیح غلط های املایی گرفته تا موارد پیچیده ای چون نگارش اسناد API وجود دارند که نیاز به انجامشان هست.این راهنما علاوه بر کمک کردن به شروع فعالیت شما، با راهنمایی شما در مسیر توسعه و بهبود مطالب MDN، هدایتگر شما خواهد بود.</p> + +<p dir="rtl">مشارکت امری ساده و بی دردسر است.حتی اگر مرتکب اشتباه شوید، به سادگی رفع می شود؛ اگر دقیقا نمی دانید چیزها چگونه دیده شوند، یا دستورزبانتان خیلی خوب نیست، جای نگرانی نیست! ما تیمی از افرادی که کارشان اطمینان یافتن از خوب بودن مطالب MDN تاحد ممکن است، داریم. برخی افراد برای اطمینان از تمیز و خوش خط بودن کار شما، درکنارتان هستند.آنچه می دانید را به مشارکت گذاشته و به تلاشتان ادامه دهید و برای آنکه حتی کارتان را بهتر کنید، از بقیه جامعه کمک بگیرید.</p> + +<h3 dir="rtl" id="گام_۱_در_MDN_شناسه_کاربری_بسازید">گام ۱: در MDN شناسه کاربری بسازید</h3> + +<p dir="rtl">برای شروع همکاری در MDN، شما احتیاج به یک حساب کاربری در MDN دارید. برای اطلاع از جزئیات بیشتر لطفا <a href="/fa/docs/MDN/Contribute/Howto/ساختنـحسابـکاربری">چگونه یک حساب کاربری بسازیم</a> را ببینید .توجه داشته باشید که شما پیش از ایجاد حساب کاربری MDN نیاز به <a href="https://github.com/join">درست کردن حساب کاربری در GitHub</a> خواهید داشت، چراکه ما برای بررسی صلاحیت کاربران از GitHub استفاده میکنیم.</p> + +<p dir="rtl">اگر وظیفه تان شامل ایجاد صفحاتی جدید می شود، لطفا به دلایل امنیتی صفحه زیر را ملاحظه کنید، چراکه حسابهای جدید به خودی خود فاقد این توانایی می باشند:</p> + +<p dir="rtl"> {{SectionOnPage("/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages", "Getting page creation permissions")}}</p> + +<h3 dir="rtl" id="گام_۲_وظیفه_ای_به_عهده_بگیرید">گام ۲: وظیفه ای به عهده بگیرید</h3> + +<p dir="rtl">حال که شما با حسابتان وارد شده اید، توضیح انواع مختلف کارها و وظایف را در صفحه {{anch("Possible task types", "the list below")}} را خوانده و در مورد اینکه کدام یک بیشتر جذبتان می نماید، تصمیم بگیرید.شما مختارید هر وظیفه ای که می پسندید به عهده گرفته و مشارکتتان را آغاز نمایید .</p> + +<h3 dir="rtl" id="گام_۳_انجام_وظیفه_نمایید">گام ۳: انجام وظیفه نمایید</h3> + +<p>هرگاه در مورد کاری که علاقمند به انجامش هستید، تصمیمتان را گرفتید، یک صفحه مشخص، نمونه کد و غیره برای کارکردن روی آن بیابید و بلافاصله انجامش دهید!</p> + +<p>اصلا نگران این نباشید که کارها را به صورت ایدهآل و بدون نقص انجام دهید؛ چراکه دیگر مشارکت کنندگان MDN با نظارت بر خطاهایی که از دست شما در رفته، مشکلات را برطرف خواهند کرد. اگر در مسیر خود سوالاتی داشتید، میتوانید با مراجعه به صفحه <a href="https://developer.mozilla.org/en-US/docs/MDN/Community">Community</a> از لیست آدرسهای ایمیل و کانالهای چت که از آنها برای گرفتن جواب استفاده میشود، مطلع شوید. </p> + +<div class="note"> +<p>اگر مایل به کسب تجربه با ویرایش بر روی MDN هستید، قبل از انجام هرکاری 'در واقع'، صفحه ای بنام <a href="https://developer.mozilla.org/en-US/docs/Sandbox">Sandbox</a> برای بازی درهمین حوالی برایتان داریم . لطفا آزمایش های خود را به این صفحه محدود کنید. لطفا از ایجاد تغییرات غیر ضروری به صفحات محتوا، فقط برای دیدن آنچه اتفاق می افتد، بپرهیزید که این کار، ایجاد آلودگی است که دیگران تمیزش کنند و یا، بدتر، گیج کردن خوانندگانی است که تنها در تلاش برای یادگیری و یا مراجعه به موردی می باشند. </p> +</div> + +<p>وقتی که وظیفه انتخابی تان را انجام دادید، برای انتخاب یک بخش دیگر، احساس رهایی نمایید یا نگاهی به </p> + +<p><a href="#Other_things_you_can_do_on_MDN">other things you can do on MDN</a> درمورد چیزهایی که روی MDN قادر به انجامشان هستید، بیندازید.</p> + +<h2 dir="rtl" id="انواع_کارهای_ممکن">انواع کارهای ممکن</h2> + +<p dir="rtl">راه های متعددی برای آنکه بتوانید با MDN مشارکت نمایید، بسته به مجموعه مهارت ها و علایقتان، برای انتخاب وجوددارد. حتی اگر برخی از وظایف ممکن است دلهره آورباشند، تعداد زیادی از فعالیت های ساده در دسترسمان است. بسیاری از آنها فقط پنج دقیقه (یا کمتر!) از وقتتان را نیاز دارند. در زیر، زمان تقریبی که معمولا هر نوع از وظایف می گیرند، همراه با وظیفه و شرح کوتاهی برای آن، خواهید یافت. </p> + +<h3 dir="rtl" id="گزینه_۱_من_کلمات_را_دوست_دارم">گزینه ۱: من کلمات را دوست دارم</h3> + +<p dir="rtl">شما میتوانید در بازبینی یا کمک در مستندات موجود ما را یاری کنید و برچسبهای صحیح را به آنها را اعمال کنید.</p> + +<ul dir="rtl"> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">برای یک صفحه خلاصه بنویسید</a> (۵-۱۵ دقیقه)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Do_an_editorial_review">بازبینی سرمقاله</a> (۵-۳۰ دقیقه)</li> + <li><a href="/en-US/docs/MDN/User_guide/Writing#Editing_an_existing_page">بروزرسانی کردن یک مقاله با اطلاعات جدید</a> (۵ دقیقه تا ۱ ساعت)</li> + <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Write_a_new_entry_in_the_Glossary">نوشتن یک مطلب جدید در واژهنامه</a> (۱۵ دقیقه تا ۱ ساعت)</li> + <li><a href="/en-US/docs/MDN/User_guide/Writing#Adding_a_new_page">نوشتن یک مقاله در مورد یک تکنولوژی جدید یا API</a> (۳۰ دقیقه تا ۲ ساعت)</li> + <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Write_an_article_to_help_learning_the_web">نوشتن یک مقاله برای کمک کردن به افراد برای آموزش وب</a> (۱-۳ ساعت) </li> +</ul> + +<div class="note" dir="rtl"><strong>توجه:</strong>اگر شما یک چند مقاله را مورد بازبینی قرار میدهید، از شما میخواهیم که <a href="/en-US/docs/MDN/Contribute/Content/Style_guide">راهنمای سبک </a>را مطاله کنید. این به استواری نوشتار شما کمک میکند .</div> + +<h3 dir="rtl" id="گزینه_۲_من_کد_نویسی_را_دوست_دارم"> گزینه ۲: من کد نویسی را دوست دارم</h3> + +<p dir="rtl">ما به نمونه کدهای بیشتری احتیاج داریم! شما همچنین میتوانید در ساخت پلتفورم سایت ما <a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Kuma">کوما</a> یاری نمایید.</p> + +<ul dir="rtl"> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">تبدیل نمونه کدها </a> (۳۰ دقیقه)</li> + <li><a href="https://kuma.readthedocs.org/en/latest/installation-vagrant.html">برپایی یک محیط ساخت برای کوما</a> (۱ ساعت)</li> + <li><a href="https://github.com/mozilla/kuma#readme">فرستادن وصله کد به پایگاه کدی کوما</a> (۱ ساعت)</li> +</ul> + +<h3 dir="rtl" id="گزینه_۳_من_هم_کد_نویسی_و_هم_کلمات_را_دوست_دارم">گزینه ۳: من هم کد نویسی و هم کلمات را دوست دارم</h3> + +<p dir="rtl">ما کارهایی داریم که نیاز به تواناییهای فنی و زبانی دارد.</p> + +<ul dir="rtl"> + <li dir="rtl"><a href="/en-US/docs/MDN/Contribute/Howto/Tag_JavaScript_pages">برجسب گذاری صفحات جاوااسکریپت</a> (۵ دقیقه)</li> + <li dir="rtl"><a href="/en-US/docs/MDN/Promote">ترویج MDN در سایت خودتان</a> (۵ دقیقه)</li> + <li dir="rtl"><a href="/en-US/docs/MDN/Contribute/Howto/Do_a_technical_review">بررسی فنی</a> (۳۰ دقیقه)</li> + <li dir="rtl"><a href="/en-US/docs/MDN/Contribute/Howto/Update_API_page_layout">بروزرسانی طرح API </a> (نیم ساعت)</li> + <li dir="rtl"><a href="/en-US/docs/MDN/Contribute/Creating_and_editing_pages#Creating_a_new_page">نوشتن یک مقاله در موضوعی که شما با آن آشنا هستید</a> (۱ ساعت یا بیشتر)</li> + <li dir="rtl"><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">نوشتن تمارین تعاملی برای آشنایی بیشتر مردم با وب</a> (۱ ساعت یا بیشتر)</li> +</ul> + +<h3 dir="rtl" id="گزینه_۴_من_MDN_را_در_زبان_خودم_میخواهم">گزینه ۴: من MDN را در زبان خودم میخواهم</h3> + +<p dir="rtl">بومیسازی و ترجمه تمامی کارها توسط جامعه شگفتانگیزی از داوطلبان انجام میشود.</p> + +<ul dir="rtl"> + <li><a href="/en-US/docs/MDN/Contribute/Localize/Translating_pages">صفحات را ترجمه کنید.</a> (۲ ساعت)</li> + <li>به سایر بومیسازان لیست شده در <a href="/en-US/docs/MDN/Contribute/Localize/Localization_projects">پروژههای بومیسازی</a> متصل شوید. (۳۰ دقیقه)</li> +</ul> + +<h3 dir="rtl" id="گزینه_۵_من_اطلاعات_اشتباه_پیدا_کردم_اما_نمیدانم_چگونه_آن_را_تصحیح_کنم">گزینه ۵: من اطلاعات اشتباه پیدا کردم اما نمیدانم چگونه آن را تصحیح کنم</h3> + +<p dir="rtl">شما میتوانید مشکلات را با <a class="external" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">کامل کردن ایرادات مستندات</a> گزارش دهید. (۵ دقیقه)</p> + +<h2 dir="rtl" id="چیزهای_دیگری_که_شما_میتوانید_در_MDN_انجام_دهید">چیزهای دیگری که شما میتوانید در MDN انجام دهید</h2> + +<ul dir="rtl"> + <li><a href="/en-US/docs/Project:Community">عضویت در جامعه MDN</a>.</li> + <li><a href="/en-US/profile">مشخصات خود را تکمیل کنید</a> در نتیجه دیگران میتوانند بیشتر درباره شما بدانند.</li> + <li>درباره <a href="/en-US/docs/MDN/Contribute">همکاری در MDN</a> بیشتر بدانید. </li> +</ul> diff --git a/files/fa/mdn/contribute/howto/be_a_beta_tester/index.html b/files/fa/mdn/contribute/howto/be_a_beta_tester/index.html new file mode 100644 index 0000000000..5f3f96aa8c --- /dev/null +++ b/files/fa/mdn/contribute/howto/be_a_beta_tester/index.html @@ -0,0 +1,36 @@ +--- +title: چطور یک آزمایش کنندهٔ بتا شوید +slug: MDN/Contribute/Howto/Be_a_beta_tester +translation_of: MDN/Contribute/Howto/Be_a_beta_tester +--- +<div>{{MDNSidebar}}</div><p>هر از گاهی توسعهدهندگان پلتفرم MDN یا <a href="https://developer.mozilla.org/en-US/docs/MDN/Kuma">Kuma</a> تغیراتی در وبسایت ایجاد میکنند، ما این تغییرات را به کاربرانی که در برنامه آزمایش بتا فعال شده باشند نمایش میدهیم. همانطور که در تمام نسخههای بتا متداول است، بعضی از امکانات در شرایط خاصی ممکن است به درستی کار نکنند.</p> + +<h2 id="وارد_برنامه_تست_بتا_شوید">وارد برنامه تست بتا شوید</h2> + +<ol> + <li>هنگامی که وارد MDN شدهاید، بر روی نام خود در نوار بالایی کلیک کنید. این کار شما را به صفحه مجموعه تنظیمات شما میبرد.</li> + <li>بر روی دکمه <strong>Edit </strong>کلیک کنید. این کار صفحه شما را در حالت ویرایش باز میکند.</li> + <li>گزینه مربوط به <strong>Beta tester </strong>را انتخاب کنید.</li> + <li>بر روی دکمه <strong>Publish </strong>کلیک کنید.</li> +</ol> + +<h2 id="از_برنامه_تست_بتا_خارج_شوید">از برنامه تست بتا خارج شوید</h2> + +<ol> + <li>هنگامی که وارد MDN شدهاید، بر روی نام خود در نوار بالایی کلیک کنید. این کار شما را به صفحه مجموعه تنظیمات شما میبرد.</li> + <li>بر روی دکمه <strong>Edit </strong>کلیک کنید. این کار صفحه شما را در حالت ویرایش باز میکند.</li> + <li>گزینه مربوط به <strong>Beta tester </strong>را پاک کنید.</li> + <li>بر روی دکمه <strong>Publish </strong>کلیک کنید.</li> +</ol> + +<h2 id="بازخوردهای_خود_را_گزارش_کنید">بازخوردهای خود را گزارش کنید</h2> + +<ol> + <li>اگر در باگزیلا حساب ندارید، <a href="https://bugzilla.mozilla.org/createaccount.cgi">یک حساب باز کنید</a>.</li> + <li><a href="https://bugzilla.mozilla.org/form.mdn#h=detail%7Cbug">یک گزارش اشکال برای MDN در باگزیلا</a> باز کنید.</li> + <li>کلمه «Beta» را در فیلد خلاصه وارد کنید تا توسعهدهندگان MDN بتوانند آنها را فیلتر و به راحتی تست کنند.</li> + <li>گزارش اشکال خود را به بهترین حالتی که میتوانید پُر کنید. تا آنجایی که میتوانید جزئیات را تشریح کنید.</li> + <li>بر روی دکمه <strong>Submit </strong>کلیک کنید.</li> +</ol> + +<p> </p> diff --git a/files/fa/mdn/contribute/howto/create_and_edit_pages/index.html b/files/fa/mdn/contribute/howto/create_and_edit_pages/index.html new file mode 100644 index 0000000000..82d2ebb7bd --- /dev/null +++ b/files/fa/mdn/contribute/howto/create_and_edit_pages/index.html @@ -0,0 +1,179 @@ +--- +title: نحوه ایجاد و ویرایش صفحات +slug: MDN/Contribute/Howto/Create_and_edit_pages +translation_of: MDN/Contribute/Howto/Create_and_edit_pages +--- +<div>{{MDNSidebar}}</div> + +<p><span class="seoSummary">این مقاله عوامل جدیدی را در روند ویرایش صفحات موجود و ایجاد صفحات جدید معرفی می کند.</span></p> + +<h2 id="Editing_an_existing_page">Editing an existing page</h2> + +<p>To edit a page:</p> + +<ol> + <li>If you are on the read-only version of MDN Web Docs (https://developer.mozilla.org), click <strong>Edit in wiki</strong> in the article header. This takes you to the editable, wiki version of the site (https://wiki.developer.mozilla.org), but does not actually open the editing interface.</li> + <li>Click the <strong>Edit</strong> button in the article header of the wiki page.</li> + <li>The page then reloads, with an editing interface where you can add or delete information directly.</li> + <li>Add paragraphs, delete text, insert headings, and perform more of the basic functions involved in writing and editing.</li> +</ol> + +<p>See the guide to <a href="/en-US/docs/MDN/Contribute/Editor/Basics">Editor UI elements</a> in the <a href="/en-US/docs/MDN/Contribute/Editor">MDN Editor guide</a> for more information on using <strong>MDN</strong>'s built-in editor.</p> + +<h3 id="Preview_changes">Preview changes</h3> + +<p>To see what your changes look like:</p> + +<ul> + <li>Click the <strong>Preview</strong> button, within the editing function at the top or bottom of the page.</li> + <li>This opens the preview page, showing your revisions in a new window, or tab.</li> + <li>Each time you click this button, it refreshes your preview page with the latest changes.</li> +</ul> + +<p>Be careful! Previewing a page <strong>does not</strong> save your progress. Don't close the editing tab until you've saved your work.</p> + +<h3 id="Revision_comment">Revision comment</h3> + +<p>After previewing your changes, you will want to <em>save your revision</em>. Before you <strong>save</strong>, look for the revision comment box, below the editing box, leaving a comment to inform other contributors why you made changes. For example, you might have added a new section, changed some words to make the terminology more consistent, rewritten a paragraph to clarify the language, or removed information because it was redundant.</p> + +<h3 id="Table_of_Contents">Table of Contents</h3> + +<p>The 'On this Page' section of an article, is an auto-generated list of links to the headings on the page. The wording of these can be edited via the headings. It's also possible to remove a table of contents or decrease its number of links, by selecting 'Edit Page Title and Properties', changing the value of the "TOC" drop down.</p> + +<h3 id="Tags">Tags</h3> + +<p>You can add or remove tags, which describe the page content and purpose, below the editing section. See <a href="/en-US/docs/MDN/Contribute/Tagging">How to properly tag pages</a>, for information on which tags to apply.</p> + +<h3 id="Review_needed">Review needed?</h3> + +<p>If an expert or experienced contributor should review your edits, please request a technical review (for code, API's, or technologies), and/or an editorial review (for prose, grammar, and content), making sure the appropriate box is checked before you save.</p> + +<h3 id="Attach_files">Attach files</h3> + +<p>Attaching files requires a special user privilege. See <a href="/en-US/docs/MDN/Contribute/Editor/Basics/Attachments">Attachments in the MDN editor</a> for details, including how to request the upload privilege.</p> + +<h3 id="Publish_Discard_or_Keep_editing">Publish, Discard, or Keep editing</h3> + +<p>When you finish editing and are happy with your preview, publish your work and comments by clicking the <em>green</em> <strong>Publish</strong> button, to the <strong>right of the page title</strong>, or towards the <strong>bottom of the page</strong>. If you wish to continue working, click <strong>Publish and keep editing</strong>, which publishes your changes and keeps the edit interface open.</p> + +<p>If you change your mind, you can discard edits, by clicking the <em>red</em> <strong>Discard</strong> button. Note that discarding changes <em>permanently</em> discards them.</p> + +<p>Pressing <strong>Enter</strong> in the Revision Comment field is equivalent to clicking <strong>Publish and Keep Editing</strong>.</p> + +<div class="note"> +<p>Note: If attempting to save, but changes are rejected as invalid, and you feel the content is appropriate for MDN, <a href="mailto:mdn-admins@mozilla.com?subject=MDN%3A%20Content%20Rejection%20Appeal&body=%3CDescribe%20the%20content%20you%20were%20trying%20to%20save%20and%20where%20you%20were%20trying%20to%20place%20it.%3E">email the MDN admin team</a> for assistance.</p> +</div> + +<h2 id="Getting_page-creation_permissions">Getting page-creation permissions</h2> + +<p>For security reasons, newly-created accounts don't have the ability to create new pages. If you try to do so, you'll see a page instructing you how to get the page created. There are two options:</p> + +<ul> + <li><strong>Ask for the page to be created for you.</strong> To do this, <a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&projects=mdn/sprints/2&labels=user-report">file a documentation request issue</a>, with the title "Create page: <page title>". Fill out the URL field of the template with the location on MDN where you'd like the page to go if you know where to place it. In the comment text, include information on why this page needs creating.</li> + <li><strong>Request page creation privileges.</strong> If you request page creation privileges, and they're granted to you, you'll be able to add new pages by following the instructions here. To request these privileges, <a href="mailto:mdn-admins@mozilla.org">email the MDN admin</a> team with your request. Include your username, why you would like to have the ability to create new pages. For instance, you're documenting a new API which involves many new pages, or you'd like to add new terms to the glossary. You should also have made useful contributions to this site's content, and been a contributor for some time. This length of time, and the other factors are collectively considered.</li> +</ul> + +<h2 id="Creating_a_new_page">Creating a new page</h2> + +<p>Once you have page-creation permission, you can begin creating pages.</p> + +<p>If you do not know where to place a new article, <strong>do not worry.</strong> Put it anywhere, we will find it, move to where it belongs, or merge it into existing content. Whatever makes the most sense. Do not worry about making it perfect. We have happy helper gnomes who help to make your content clean and rather luscious.</p> + +<p>There are a few ways to create a new page:</p> + +<ul> + <li><a href="#Missing_page_link">'Missing page' link.</a></li> + <li><a href="#New_page_without_link">New page without a link.</a></li> + <li><a href="#Subpage_of_an_existing_page">A subpage of an existing page.</a></li> + <li><a href="#Clone_of_an_existing_page">Clone of an existing page.</a></li> + <li><a href="#Link_from_an_existing_page">Link from an existing page.</a></li> +</ul> + +<h3 id="Missing_page_link">'Missing page' link</h3> + +<p>As with most wikis, it is possible to create a link to a page that is yet to exist. For example, an author might create a list of all the members of an API, before creating the pages for those members. On MDN, links to non-existent pages are typically displayed in red.</p> + +<p>To create a page from a 'missing page' link:</p> + +<ol> + <li>Log into MDN, and have page-creation permission. If not logged in, clicking a 'missing page' link results in a 404 (page not found) error.</li> + <li>Click the 'missing page' link. If you have page creation permission, the <a href="/en-US/docs/MDN/Contribute/Editor">MDN Editor UI</a> opens, ready for you to create the missing page.</li> + <li>Write the content of the page, and save it.</li> +</ol> + +<h3 id="New_page_without_link">New page without link</h3> + +<p><em>To create a new page without linking from another page</em>, enter a unique page name in the URL field of your browser. For example, if you enter:</p> + +<pre class="language-html notranslate">https://wiki.developer.mozilla.org/en-US/docs/FooBar</pre> + +<p>MDN Creates a new page, with the title "FooBar", opening the editor for you to add new content. Refer to the <a href="#Editing_an_existing_page">Editing an existing page</a> section of this article, for information on how to use the editor mode.</p> + +<p><em>To create a new page without linking from another page</em>:</p> + +<ol> + <li>Log in, and have page-creation permission.</li> + <li>Enter the following in the URL field of your browser:</li> +</ol> + +<pre class="language-html notranslate">https://wiki.developer.mozilla.org/en-US/docs/new</pre> + +<p>MDN Creates a new page, with a place for a title, opening the editor to add new content to this page. Refer to <a href="#Editing_an_existing_page">Editing an existing page</a>, for information on using editor mode.</p> + +<h3 id="Subpage_of_an_existing_page">Subpage of an existing page</h3> + +<p>To create a page you want to be below an existing page, in the page hierarchy:</p> + +<ol> + <li>If needed, navigate to the wiki site by clicking <strong>Edit in wiki</strong> in the article header.</li> + <li>On the 'parent' page, click the <strong>Advanced</strong> menu (the gear icon in the toolbar), then click <strong>New sub-page</strong>.</li> + <li>An editor view opens for creating a new document.</li> + <li>Add a title for this document, in the <strong>Title</strong> field.</li> + <li>Change the <strong>Slug</strong> field, if needed. For example, if the title is long, and a shorter URL seems appropriate. This field is automatically filled by the editor, substituting underscores for spaces found in the title, changing only the last part of the URL.</li> + <li>In the <strong>TOC</strong> field, select heading levels you want to be displayed in the table of contents for the page. Or select 'No table of contents', if one is not needed.</li> + <li>Write content of the page in the editor pane, saving your changes. Refer to <a href="#Editing_an_existing_page">Editing an existing page</a>, for further information on using editor mode.</li> +</ol> + +<h3 id="Clone_of_an_existing_page">Clone of an existing page</h3> + +<p>If there is an existing page, whose format you wish to use as a base for your new page, you can 'clone' that page, and then change its content.</p> + +<ol> + <li>If needed, navigate to the wiki site by clicking <strong>Edit in wiki</strong> in the article header.</li> + <li>On the original page, click the <strong>Advanced</strong> menu (the gear icon in the toolbar), and click <strong>Clone this page</strong>. An editor view opens, for creating a new document.</li> + <li>Change the <strong>Title</strong> of the page, as appropriate for the new content. The <strong>Slug</strong> field is updated automatically as you change the <strong>Title</strong> field.</li> + <li>Change the path portion of the <strong>Slug</strong> field, as needed, to put the new document in a different location in the document hierarchy. In most cases, this is not needed. A cloned page often has similar content to its original, and need to be in a similar location.</li> + <li>In the <strong>TOC</strong> field, select the heading levels you want to be automatically displayed in the table of contents for this page. Or select 'No table of contents', if one is not needed.</li> + <li>Write your content in the editor pane, saving your changes. Refer to <a href="#Editing_an_existing_page">Editing an existing page</a>, for more information on using editor mode.</li> +</ol> + +<h3 id="Link_from_an_existing_page">Link from an existing page</h3> + +<p>This is a bit of a hybrid. You can create a link on another page, then click the link you just inserted, to create the new page:</p> + +<ol> + <li>Enter the name of your new page, anywhere that makes sense in the text of an existing page.</li> + <li>Highlight this new name, and <strong>click the Link icon (<img alt="" src="https://developer.mozilla.org/files/3810/link-icon.png" style="height: 28px; width: 29px;">) </strong>in the editor's toolbar. The <strong>'Update Link'</strong> dialog opens, with the highlighted text in the <strong>'Link To'</strong> field.</li> + <li><strong>"/en-US/docs/"</strong> is inserted by default, to the beginning of the URL field.<em> Enter the name </em>of the page after "/en-US/docs/". The page name does not have to be the same as the link text.</li> + <li>Click <strong>OK</strong>, to create and insert the link.</li> +</ol> + +<p>If the page does not yet exist, the link is displayed in red. If the page <em>does</em> exist, the link is displayed blue. If you want to create a new page, but the page title you desire is already taken, check if it makes sense helping edit and improve the page already there. Otherwise, think of a unique title for your new page, and create a link for it. Refer to <a href="https://developer.mozilla.org/Project:en/Page_Naming_Guide" title="Project:en/Page_Naming_Guide">page naming guide</a> for guidelines.</p> + +<p>To add content to your new page, click on the red link you just created, after saving and closing the editor. The new page opens in editor mode, enabling you to start writing. Refer to <a href="#Editing_an_existing_page">Editing an existing page</a>, for further information on using editor mode.</p> + +<h2 id="Refreshing_page_content">Refreshing page content</h2> + +<p>MDN support of KumaScript macros, and integration of content from other pages can sometimes be hampered by the need for caching of pages, for performance reasons. Pages are built from their source, and this output is cached for future requests. From that moment on, any macros (templates), or integrations (using the macro<span class="templateLink"><code><a href="https://developer.mozilla.org/en-US/docs/Template:Page">Page</a></code></span>), will not reflect later changes made to the macro, its output, or the contents of the integrated material.</p> + +<ul> + <li>To manually update a page, force-refresh your Web browser. MDN detects this, triggering a page rebuild, pulling in updated macro output, and integrating page content.</li> + <li>You can also configure pages to periodically rebuild, automatically. This should not be done unless you expect the page to update frequently. See <a href="/en-US/docs/MDN/Contribute/Tools/Page_regeneration">Page regeneration</a>, for detailed information.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Editor">MDN editor guide</a></li> + <li><a href="/en-US/docs/MDN/Contribute/Content/Style_guide">MDN style guide</a></li> +</ul> diff --git a/files/fa/mdn/contribute/howto/index.html b/files/fa/mdn/contribute/howto/index.html new file mode 100644 index 0000000000..08734f5092 --- /dev/null +++ b/files/fa/mdn/contribute/howto/index.html @@ -0,0 +1,15 @@ +--- +title: How-to guides +slug: MDN/Contribute/Howto +tags: + - Landing + - MDN Meta + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Howto +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>These articles provide step-by-step guides to accomplishing specific goals when contributing to MDN.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/fa/mdn/contribute/howto/ساختنـحسابـکاربری/index.html b/files/fa/mdn/contribute/howto/ساختنـحسابـکاربری/index.html new file mode 100644 index 0000000000..4eb955f71c --- /dev/null +++ b/files/fa/mdn/contribute/howto/ساختنـحسابـکاربری/index.html @@ -0,0 +1,42 @@ +--- +title: چگونه یک حساب کاربری بسازیم +slug: MDN/Contribute/Howto/ساختنـحسابـکاربری +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +<div>{{MDNSidebar}}</div><p dir="rtl"><span class="seoSummary">برای اینکه بتوانید مطالب داخل MDN را تغییر دهید , باید یک اکانت MDN بسازید . اما اگر فقط می خواهید از مطالب MDN استفاده کنید میازی به این اکانت ندارید . این مطلب جهت راهنمایی شما جهت ساختن پروفایلی داخل MDN است .</span></p> + +<div class="pull-aside"> +<div class="moreinfo" dir="rtl"><strong>چرا MDN به آدرس ایمیل من نیاز دارد ؟</strong><br> +<br> +آدرس ایمیل شما برای بازگردانی و بازنشانی اکانت MDN شما ( البته اگر نیازی به اینکار باشد ) توسط مدیران MDN تا از این طریق بتوانند در مورد خوده اکانت یا فعالیت های شما داخل این سایت با شما تماس بگیرند .<br> +<br> +علاوه بر این شما می توانید برای دریافت اطلاعیه ها ( مثلا در مورد<a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Watch_a_page"> تغییر برخی صفحات خاص</a> ) یا پیغام ها ( به عنوان مثال اگر شما عضو گروه توسعه دهنده ما باشید , باید ایمیل هایی را که درباره یه اجزای جدیدی که نیاز به تست شدن دارن دریافت کنید ) .<br> +<br> +آدرس ایمیل شما هیچوقت داخل MDN نمایش داده نمی شود و فقط در مواردی که در <a href="https://www.mozilla.org/privacy/websites/">سیاست نامه ی حفظ حریم خصوصی</a> نامبرده شده است استفاده خواهد شد .<br> + +<div class="note"> +<p dir="rtl"><strong>پای نوشت : اگر شما با استفاده از GitHub وارد MDN شده اید, و اگر شما در GitHub از یک آدرس « نادرست » ایمیل استفاده کرده اید , شما این پیام ها را از MDN دریافت نخواهی کرد . ( که شامل اطلاعیه های صفحاتی که عضوش شده اید میشود </strong></p> +</div> +</div> + + +</div> + +<ol dir="rtl"> + <li>بالای هر صفحه ی MDN شما یک دکمه که روی آن عبارت <strong>Sign In </strong>نوشته شده است را می بینید . نشانگر موس خود را روی این دکمه ببرید ( ولی اگر از تلفن همراه استفاده می کنید باید لمسش کنید ) تا لیستی از سرویس های احراز هویتی که ما برای وارد شدن به MDN از آنها حمایت می کنیم به نمایش گزاشته شود .</li> + <li>سرویسی را برای وارد شدن انتخاب کنید . در حال حاضر این کار فقط با GitHub ممکن است . به یاد داشته باشید که اگر شما از GitHub برای اینکار استفاده کنید , پیوندی به اکانت GitHub شما در صفحه ی پروفایل شما در MDN ایجاد خواهد شد .</li> + <li>مراحلی درخواستی GitHub را دنبال کنید تا اکانت خود را به MDN متصل کنید .</li> + <li>وقتی که سیستم احراز هویت شما را به MDN باز گرداند, از شما درخواست میشود تا عبارتی را جهت نام کاربری و آدرس ایمیل خود را وارد کنید .<em>نام کاربری شما به صورت عمومی جهت نسبت دادن کارهای انجام شده توسط شما به کار گرفته میشود . <u>از آدرس ایمیل خود جهت نام کاربری خود استفاده نکنید</u> .</em></li> + <li>روی عبارت <strong>Create my MDN profile </strong>کلیک کنید .</li> + <li>اگر آدرس ایمیلی که شما در مرحله ی چهار وارد کرده اید با آدرس ایمیلی که سیستم احراز هویت استفاده کرده است مغایرت دارد , لطفا ایمیل خود را چک کرده و روی لینکی که ما برای تایید فرستاده ایم کلیک کنید .</li> +</ol> + +<p dir="rtl">تمام شد ! شما یک اکانت MDN ساختید , و شما می توانید فورا جهت ویرایش صفحات اقدام کنید !</p> + +<p dir="rtl">اگر می خواهید پروفایل عمومی خود را ببینید , می توانید روی اسم خود بالای هر صفحه ای از MDN کلیک کنید . از آنجا شما می توانید روی <strong>Edit</strong> کلیک کنید تا تغییراتی روی پروفایل خود اعمال کنید .</p> + +<div class="note"> +<p dir="rtl"><strong>پای نوشت : نام های کاربری جدید نمی توانند شما فاصله ( Space ) یا کارکتر اتساین ( @ ) شنود . به یاد داشته باشید که نام کاربری شما جهت شناسایی کارهایی که شما انجام داده اید , به صورت عمومی , استفاده خواهد شد .</strong></p> +</div> + +<p> </p> diff --git a/files/fa/mdn/contribute/index.html b/files/fa/mdn/contribute/index.html new file mode 100644 index 0000000000..d3129e6814 --- /dev/null +++ b/files/fa/mdn/contribute/index.html @@ -0,0 +1,74 @@ +--- +title: مشارکت در شبکه توسعه دهندگان موزیلا +slug: MDN/Contribute +tags: + - امدیان + - راهنما + - صفحه فرود + - مستندات + - نیازمند ترجمه +translation_of: MDN/Contribute +--- +<div>{{MDNSidebar}}</div> + +<p dir="rtl">خوش آمدید! با ملاحظه این صفحه، شما اولین گام را برای مشارکت دادن به MDN برداشته اید. راهنماهای حاضر همهی جنبههای مشارکت در MDN را پوشش میدهند. این جنبههای همکاری شامل راهنماهای سبک و سیاق، راهنماهای استفاده از ویرایشگر و ابزارهای ما، و موارد بیشتر میشود. لطفا قبل از ویرایش و ایجاد هر صفحهای از مطالعه و توافق با <a href="https://www.mozilla.org/en-US/about/legal/terms/mozilla/">شرایط موزیلا</a> اطمینان حاصل کنید.</p> + + + +<div class="row topicpage-table"> +<div class="section"> +<h2 dir="rtl" id="راهنماهای_مشارکت_دهنده">راهنماهای مشارکت دهنده</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/MDN/Getting_started">آغاز به کار</a></dt> + <dd dir="rtl">یک راهنمای چابک برای آشنایی و ایجاد نخستین مشارکتهای شما در امدیان.</dd> + <dt dir="rtl"><a href="/en-US/docs/MDN/Contribute/Style_guide">راهنمای سیاق و محتوا</a></dt> + <dd>The MDN content and style guide provides details about writing style, page layout, and content styles, so that the content you write fits in with the rest of MDN's content.</dd> + <dt dir="rtl"><a href="/en-US/docs/MDN/Contribute/Editor">راهنمای ویرایشگر</a></dt> + <dd dir="rtl">یک راهنمای کامل در مورد ویرایشگر امدیان.</dd> + <dt dir="rtl"><a href="/en-US/docs/MDN/Contribute/Reviewing_articles">بازنگری مقالات</a></dt> + <dd>A guide to performing technical and editorial reviews of articles' content, to help us ensure that all content on MDN is as useful and readable as can be!</dd> + <dt dir="rtl"><a href="/en-US/docs/MDN/Contribute/Conventions">واژگان و قراردادها</a></dt> + <dd>Our terminology and conventions guide provides information you can use to ensure that you use the correct terminology to describe things.</dd> + <dt dir="rtl"><a href="/en-US/docs/MDN/Contribute/Community">کار با انجمن MDN</a></dt> + <dd>A guide to working with our community, finding help, and connecting with the people with the answers to the questions that arise while you contribute to MDN.</dd> + <dt dir="rtl"><a href="/en-US/docs/MDN/Contribute/FAQ">پرسشهای متداول</a></dt> + <dd>Tips and answers to the most common questions about contributing to MDN.</dd> +</dl> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/MDN/Kuma/Contributing">مشارکت در Kuma</a></dt> + <dd>A guide to contributing to the Kuma project. Kuma is the platform that powers the MDN Web site.</dd> +</dl> +</div> + +<div class="section"> +<h2 dir="rtl" id="چگونه_...">چگونه ...</h2> + +<p>Our <a href="/en-US/docs/MDN/Contribute/Howto">how-to guides</a> provide step-by-step instructions to help you accomplish specific tasks when contributing to MDN.</p> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/MDN/Contribute/Howto/Document_a_CSS_property">چگونه یک CSS property را مستند نماییم</a></dt> + <dd>A guide to writing documentation of CSS properties. All CSS property documents should match the style and layout described in this article.</dd> + <dt dir="rtl">چگونه یک عنصر HTML را مستند نماییم</dt> + <dd>This guide to documenting HTML elements will ensure that the documents you write match others on MDN.</dd> + <dt dir="rtl"><a href="/en-US/docs/MDN/Contribute/Howto/Tag">چگونه صفحات را درست برچسب بزنیم</a></dt> + <dd>This guide to tagging pages provides information about our standards for tagging, including lists of tags that have standard meanings on MDN. Following this guide will ensure that your content is properly categorized, more easily searchable, and that our search filtering mechanism works properly with your articles.</dd> + <dt dir="rtl"><a href="/en-US/docs/MDN/Contribute/Howto/Interpret_specifications">چگونه ویژگیها را درست تفسیر نماییم</a></dt> + <dd>This guide will help you to properly interpret standard Web specifications; being able to read these can be an art form, and knowing how to do it will help you produce better documentation.</dd> +</dl> + +<h2 dir="rtl" id="محلی_سازی">محلی سازی</h2> + +<p dir="rtl"></p> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/MDN/Contribute/Localize/Tour">تور راهنمایی محلیسازی</a></dt> + <dd>This guided tour will teach you how to localize content on MDN.</dd> + <dt dir="rtl"><a href="/en-US/docs/MDN/Contribute/Localize/Guide">راهنمای محلیسازی</a></dt> + <dd>This guide provides details about the localization process for MDN content.</dd> + <dt dir="rtl"><a href="/en-US/docs/MDN/Contribute/Localize/Localization_projects">پروژههای محلیسازی</a></dt> + <dd>Find the localization project for your language—or, if there isn't one, learn how to start a new one!</dd> +</dl> +</div> +</div> diff --git a/files/fa/mdn/contribute/localize/index.html b/files/fa/mdn/contribute/localize/index.html new file mode 100644 index 0000000000..ed2a2577cd --- /dev/null +++ b/files/fa/mdn/contribute/localize/index.html @@ -0,0 +1,29 @@ +--- +title: Localizing MDN +slug: MDN/Contribute/Localize +tags: + - Documentation + - Localization + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Localize +--- +<div>{{MDNSidebar}}</div><p>MDN is used by people all over the world as a reference and guide to Web technologies, as well as to the internals of Firefox itself. Our localization communities are a key part of the Mozilla project; their work in translating and localizing our documentation helps people around the world develop for the open Web. If you'd like to learn more about our localization teams, join one of the teams, or even start a new localization, this is the place to begin.</p> +<p>{{LandingPageListSubpages}}</p> +<h2 id="Localization_tools">Localization tools</h2> +<p>There are several useful tools that you'll use during localization work:</p> +<dl> + <dt> + <a href="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Verbatim</a></dt> + <dd> + Used for translation of strings across multiple Mozilla projects, including the MDN user interface (as well as the Firefox user interface).</dd> + <dt> + <a href="http://transvision.mozfr.org/" title="http://transvision.mozfr.org/">Transvision</a></dt> + <dd> + A utility provided by Mozilla France, which lets you search for occurrences of an English string, finding all the various translations into a target locale that are used throughout Mozilla code. Useful for finding the preferred translations for words or phrases.</dd> +</dl> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/Mozilla/Localization" title="/en-US/docs/Mozilla/Localization">Localization at Mozilla</a></li> +</ul> diff --git a/files/fa/mdn/contribute/localize/ترجمه_صفحات/index.html b/files/fa/mdn/contribute/localize/ترجمه_صفحات/index.html new file mode 100644 index 0000000000..288a8ecc61 --- /dev/null +++ b/files/fa/mdn/contribute/localize/ترجمه_صفحات/index.html @@ -0,0 +1,64 @@ +--- +title: ترجمه صفحات MDN +slug: MDN/Contribute/Localize/ترجمه_صفحات +tags: + - ترجمه + - ترجمه صفحات + - محلی سازی + - پروژه های MDN +translation_of: MDN/Contribute/Localize/Translating_pages +--- +<div>{{MDNSidebar}}</div> + +<p dir="rtl"><strong>این مقاله یک راهنمای پایه برای ترجمه مطالب MDN شامل مکانیسم ترجمه و نکاتی برای مدیریت بهتر انواع مختلف مطالب میباشد.</strong></p> + +<h2 dir="rtl" id="شروع_ترجمه_یک_صفحه_جدید"><strong>شروع ترجمه یک صفحه جدید</strong></h2> + +<p dir="rtl"><strong>وقتی شما وارد یک صفحه میشوید و مایلید آن صفحه را ترجمه کنید، باید مراحل زیر را طی کنید:</strong></p> + +<ol> + <li dir="rtl"><strong>بر روی آیکن ( ) کلیک کنید تا منوی زبانها باز شود و بر روی Add a Translation کلیک کنید. صفحه انتخاب زبان نمایش داده میشود.</strong></li> + <li dir="rtl"><strong>برای روی زبانی که قصد ترجمه صفحه مورد نظر به آن را دارید کلیک کنید. نمای ترجمه متن به همراه متن اصلی در سمت چپ صفحه نمایش داده میشود.</strong></li> + <li dir="rtl"><strong>زیر بخش Translate Description ، شما میتوانید عنوان و به طور دلخواه نامک را به زبان مورد نظر ترجمه کنید. نامک آخرین بخش آدرس صفحه (به طور مثال "ترجمه_صفحات" برای این صفحه) میباشد. بعضی از مترجمین نامک را ترجمه نمیکنند و به همان زبان انگلیسی باقی میگذارند. برای فهمیدن این موضوع مقالههای دیگر به زبان خود را نگاه کنید تا نوع رایج را پیدا کنید. شما میتوانید بر روی علامت منفی کنار <strong style="line-height: 1.5;">Translate Description </strong>زمانی که دیگر با آن کار نداشتید کلیک کنید تا مخفی شود و فضای بیشتر برای بخش ترجمه ایجاد شود.</strong></li> + <li dir="rtl"><strong>زیر بخش Translate Content متن مطلب را ترجمه کنید.</strong></li> + <li dir="rtl"><strong>حداقل یک برچسب برای صفحه انتخاب کنید.</strong></li> + <li dir="rtl"><strong>در انتها بر روی Save Changes کلیک کنید.</strong></li> +</ol> + +<div class="note"><strong><strong>Note:</strong> </strong>The user interface elements of the Translating Article view are initially shown in English. On subsequent visits to translate a particular article, the UI is shown in the appropriate language if a localization of MDN is available for that language. The MDN user interface can be localized using <a href="https://localize.mozilla.org/projects/mdn/" title="https://localize.mozilla.org/projects/mdn/">Verbatim</a>. See <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Localizing with Verbatim</a> for details on how to use this tool.</div> + +<h2 dir="rtl" id="ویرایش_یک_صفحه_ترجمه_شده" style="text-align: right;"><strong>ویرایش یک صفحه ترجمه شده</strong></h2> + +<ul dir="rtl"> + <li style="text-align: right;"> + <p style="text-align: right;"><strong>در صفحه ترجمه شده ، بر روی دکمه Edit کلیک کنید. تا نمای ترجمه متن به همراه متن اصلی نمایان شود.</strong></p> + </li> +</ul> + +<p dir="rtl"><strong>اگر تغییری در نسخه اصلی صفحه بعد از ترجمهی آن ایجاد شود در نمای ویرایش صفحات متنهایی که در آنها تغییر ایجاد شده است علامت گذاری میشوند. این عمل باعث سرعت بخشیدن به کار مترجمان میشود.</strong></p> + +<h2 id="ترجمه_برچسبها" style="text-align: right;"><strong>ترجمه برچسبها</strong></h2> + +<p dir="rtl" style="text-align: right;"><strong>برچسب زدن صفحات بسیار مهم است ، حتی اگر صفحه مورد نظر ترجمه شده باشد.</strong></p> + +<p dir="rtl" style="text-align: right;"><strong>برخی برچسبها برای فیلترهای جستجو و یا برای قراردادهای بین مشارکت کنندگان استفاده میشوند آنها نباید ترجمه شوند. برای کسب اطلاع بیشتر از این برچسبها به <a href="/fa/docs/Project:MDN/Contributing/Tagging_standards">استانداردهای برچسب گذاری</a> مراجعه کنید. شما جهت ایجاد برچسبهای ترجمه شده برای محتوای گروهی آزادید، اگر آنها هیچ یک از <a dir="rtl" href="/fa/docs/Project:MDN/Contributing/Tagging_standards" lang="fa">استانداردهای برچسب گذاری</a> را رعایت نکردهاند.</strong></p> + +<h2 id="نکاتی_برای_بومی_سازان_جدید" style="text-align: right;"><strong>نکاتی برای بومی سازان جدید</strong></h2> + +<p dir="rtl"><strong>* اگر شما اخیرا به بومی سازان MDN پیوستهاید، پیشنهاداتی برایتان داریم.</strong></p> + +<p dir="rtl"><strong>* مقالات موجود در </strong><a href="https://developer.mozilla.org/en-US/docs/Glossary">Glossary</a> <strong>بدلیل ساده و کوتاه بودن، مواردی عالی برای ترجمه توسط تازه واردان میباشند.</strong></p> + +<p dir="rtl"><strong>* مقالات دارای برچسب </strong> <a href="https://developer.mozilla.org/en-US/docs/tag/l10n%3Apriority">tagged "l10n:priority"</a> <strong>اولویتدار تلقی می شوند. همچنین، عموما، وقتی که بیشترین نیاز خوانندگان به ترجمه، هنگام فراگیری مفاهیم می باشد، پس مقالات آموزشی و مفهومی دارای اولویت بالاتری از صفحات مرجع می باشند. </strong></p> + +<p dir="rtl"><strong>* اگر با متن بین دو جفت آکولاد، مثل </strong> <code>\{{some-text("more text")}}</code><strong> روبرو شدید، آنرا به همین شکل در ترجمه آورده و نگارش کاراکترهایش را تغییر ندهید. این یک </strong><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Macros">macro</a> ا<strong>ست، که احتمالا ساختاری روی صفحه ایجاد مینماید، یا موارد مفید دیگری را انجام میدهد. ممکن است با متن ترجمه نشدهای که بوسیله macro ایجاد شده است، مواجه شوید؛ تا کسب تجربه بیشتر با MDN جای نگرانی نیست. (از آنجاکه macro ها میتوانند بسیار قوی باشند، تغییر چنین متنی نیاز به </strong><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Tools/Template_editing">special privileges</a><strong> دارد.) اگر برای دیدن انواع کارهایی که macroها انجام میدهند، کنجکاوید، نگاهی به </strong><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">Commonly-used macros</a> <strong>بیندازید.</strong></p> + +<p dir="rtl">* <strong>برای یافتن</strong> <strong>موارد بیشتر درباره بومی سازی محل زندگی بومی خود، سری به </strong><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Localize/Localization_projects">Localization projects page</a> بزنید.</p> + +<h2 dir="rtl" id="ترجمه_برچسب_ها"><strong>ترجمه برچسب ها</strong></h2> + +<p dir="rtl"><strong>مقاله را بخشبندی نمایید. اینکار مقاله را تحت فیلترهای درست موتورهای جستجوگر، قابل یافتن مینماید.</strong></p> + +<p dir="rtl"><a href="https://developer.mozilla.org/fa/docs/Project:MDN/Contributing/Tagging_standards">Read the Tagging Guide</a></p> + +<p style="text-align: right;"></p> diff --git a/files/fa/mdn/index.html b/files/fa/mdn/index.html new file mode 100644 index 0000000000..8692abf1fb --- /dev/null +++ b/files/fa/mdn/index.html @@ -0,0 +1,39 @@ +--- +title: پروژ MDN +slug: MDN +tags: + - MDN + - NeedsTranslation + - TopicStub + - مستندسازی +translation_of: MDN +--- +<div>{{MDNSidebar}}</div> + +<p><strong>MDN Web Docs</strong> is a wiki on which we document the open Web, Mozilla technologies, and other developer topics. Anyone is welcome to add and edit content. You don't need to be a programmer or know a lot about technology; there are many different tasks that need to be performed, from the simple (proof-reading and correcting typos) to the complex (writing API documentation).</p> + +<div class="summary"> +<p>The mission of MDN Web Docs is to provide <em>developers</em> with the <em>information</em> they need to <em>easily</em> build projects on the <em>web platform</em>. We invite you to help!</p> +</div> + +<p>We need your help! It's easy. Don't worry about asking for permission or about making mistakes. On the other hand, please get to know the <a href="/en-US/docs/MDN/Community" title="/en-US/docs/MDN/Community">MDN community</a>; we're here to help you! The documentation below should get you started, but don't hesitate to join the discussion the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a>.</p> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/MDN/Getting_started">Newcomer quick start</a></span> + + <p>Are you new to MDN and want to learn how to help make it better? Start here!</p> + </li> + <li><span><a href="/en-US/docs/MDN/Contribute">I'm an advanced user</a></span> + <p>Access our full, in-depth guide for MDN contributors to learn more once you've gotten comfortable.</p> + </li> + <li><span><a href="/en-US/docs/MDN/Promote">Spread the word</a></span> + <p>If you love MDN, help get the word out! Find art, tools, and guides for promoting MDN.</p> + </li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/MDN/Community">Join the MDN Community</a></li> + <li><a href="https://app.zenhub.com/workspace/o/mdn/sprints/boards?repos=121649843,55001853,70901646,134759439,90252175,1352520,3311772,82040629,121278372,33677290,132630865">Scrum board</a></li> +</ul> diff --git a/files/fa/mdn_at_ten/index.html b/files/fa/mdn_at_ten/index.html new file mode 100644 index 0000000000..37882489ed --- /dev/null +++ b/files/fa/mdn_at_ten/index.html @@ -0,0 +1,37 @@ +--- +title: MDN at 10 +slug: MDN_at_ten +translation_of: MDN_at_ten +--- +<p class="summary">Celebrate 10 years of documenting your Web.</p> + +<div class="column-container"> +<div class="column-8"> +<h2 id="The_history_of_MDN">The history of MDN</h2> + +<p>In early 2005, a small team of idealists set out to create a new, free, community-built online resource for all Web developers. Their brilliant but offbeat idea grew into today’s Mozilla Developer Network—the premier resource for all open Web technologies. Ten years later, our global community is bigger than ever, and together we’re still creating documentation, sample code and learning resources for all open Web technologies, including CSS, HTML, JavaScript and everything else that makes the open Web as powerful as it is.</p> + +<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/History_of_MDN">Learn more <span class="offscreen">about the history</span></a></p> + + +<h2 id="Contributing_to_MDN">Contributing to MDN</h2> + +<p>For ten years, the MDN community has been documenting the open Web. From fixing simple typos to writing entire suites of an entirely new API, everyone has something to offer and no contribution is too large or too small. We have over 90,000 pages of content that have been written or translated by members of our outstanding community of Mozillians. You can become one of them.</p> + +<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Learn more <span class="offscreen">about contributing</span></a></p> + +<p> </p> + +<p> </p> +</div> + +<div class="column-4">{{TenthCampaignQuote}}</div> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="/en-US/docs/MDN_at_ten/">MDN at 10</a></li> + <li><a href="/en-US/docs/MDN_at_ten/History_of_MDN">The history of MDN</a></li> + <li><a href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Contributing to MDN</a></li> +</ol> +</div> diff --git a/files/fa/midas/index.html b/files/fa/midas/index.html new file mode 100644 index 0000000000..975b7bdfa8 --- /dev/null +++ b/files/fa/midas/index.html @@ -0,0 +1,330 @@ +--- +title: Midas +slug: Midas +tags: + - DOM + - Midas + - NeedsContent + - NeedsHelp + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub +translation_of: Mozilla/Projects/Midas +--- +<h2 id="Introduction" name="Introduction">Introduction</h2> + +<p>Midas is the code name for Gecko's built-in rich text editor. Midas can be enabled via JavaScript on an HTML document. When Midas is enabled, the document becomes editable by the user. Scripting for Midas is based on the <a href="http://msdn.microsoft.com/en-us/library/ms533049.aspx">DHTML commands</a> supported by Internet Explorer. Internet Explorer supports the ability to make an entire document editable by setting the <code>designMode</code> property of the {{domxref("document")}} object; this is how Midas is invoked in Gecko. Internet Explorer also supports the ability to edit specific elements using the <code>contentEditable</code> attribute; Starting with Firefox 3, Gecko also supports <code>contentEditable</code>. Once Midas is invoked, a few more methods of the <code>document</code> object become available.</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<dl> + <dt><a href="/en-US/docs/Midas/designMode">document.designMode</a></dt> + <dd>By setting this property to "on", the document becomes editable.</dd> +</dl> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Since an entire document becomes editable, authors often load the editable document into an <code>IFRAME</code> and do the bulk of the scripting in the parent document. According to <a href="http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-50708718">standards</a>, The <code>IFRAME</code> element has the <code>contentDocument</code> property that refers to the document in the inline frame. It also has a property called <code>contentWindow</code> that refers to the window object inside the inline frame. This also avoids problems with {{bug(198155)}}.</p> + +<p>In addition to the built-in commands, advanced editing can be done by manipulating the {{domxref("Selection")}} and {{domxref("range")}} objects. It is beneficial to be familiar with these objects when working with an editable document.</p> + +<h2 id="Examples" name="Examples">Examples</h2> + +<p>This example shows the basic structure described in the Notes section :</p> + +<pre><html> + <head> + <title>Simple Edit Box</title> + </head> + <body> + <iframe + id="MidasForm" + src="about:blank" + onload="this.contentDocument.designMode='on';" + ></iframe> + </body> +</html> +</pre> + +<h2 id="Methods" name="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Document.execCommand")}}</dt> + <dd>Executes the given command.</dd> + <dt>{{domxref("Document.queryCommandEnabled")}}</dt> + <dd>Determines whether the given command can be executed on the document in its current state.</dd> + <dt>{{domxref("Document.queryCommandIndeterm")}}</dt> + <dd>Determines whether the current selection is in an indetermined state.</dd> + <dt>{{domxref("Document.queryCommandState")}}</dt> + <dd>Determines whether the given command has been executed on the current selection.</dd> + <dt>{{domxref("Document.queryCommandValue")}}</dt> + <dd>Determines the current value of the document, range, or current selection for the given command.</dd> +</dl> + +<h2 id="Supported_Commands" name="Supported_Commands">Supported Commands</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Command</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td>backcolor</td> + <td>A color code.</td> + <td>This command will set the background color of the document.</td> + </tr> + <tr> + <td>bold</td> + <td> </td> + <td>If there is no selection, the insertion point will set bold for subsequently typed characters. + <p>If there is a selection and all of the characters are already bold, the bold will be removed. Otherwise, all selected characters will become bold.</p> + </td> + </tr> + <tr> + <td>contentReadOnly</td> + <td> </td> + <td>This command will make the editor readonly(true)or editable(false). Anticipated usage is for temporarily disabling input while something else is occurring elsewhere in the web page.</td> + </tr> + <tr> + <td>copy</td> + <td> </td> + <td>If there is a selection, this command will copy the selection to the clipboard. If there isn't a selection, nothing will happen. + <p>note: this command won't work without setting a pref or using signed JS. See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p> + + <p>note: the shortcut key will automatically trigger this command (typically accel-C) with or without the signed JS or any code on the page to handle it.</p> + </td> + </tr> + <tr> + <td>createlink</td> + <td>A URI.</td> + <td>This command will not do anything if no selection is made. If there is a selection, a link will be inserted around the selection with the url parameter as the href of the link.</td> + </tr> + <tr> + <td>cut</td> + <td> </td> + <td>If there is a selection, this command will copy the selection to the clipboard and remove the selection from the edit control. If there isn't a selection, nothing will happen. + <p>note: this command won't work without setting a pref or using signed JS. See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p> + + <p>note: the shortcut key will automatically trigger this command (typically accel-X) with or without the signed JS or any code on the page to handle it.</p> + </td> + </tr> + <tr> + <td>decreasefontsize</td> + <td> </td> + <td>This command will add a <small> tag around selection or at insertion point.</td> + </tr> + <tr> + <td>delete</td> + <td> </td> + <td>This command will delete all text and objects that are selected. If no text is selected it deletes one character to the right. This is similar to the <em>Delete</em> button on the keyboard.</td> + </tr> + <tr> + <td>fontname</td> + <td>A font name</td> + <td>This command will set the font face for a selection or at the insertion point if there is no selection. + <p>The given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names.</p> + </td> + </tr> + <tr> + <td>fontsize</td> + <td>A number</td> + <td>This command will set the fontsize for a selection or at the insertion point if there is no selection. + <p>The given number is such as would be used in the "size" attribute of the font tag.</p> + </td> + </tr> + <tr> + <td>forecolor</td> + <td>A color code</td> + <td>This command will set the text color of the selection or at the insertion point.</td> + </tr> + <tr> + <td>formatblock</td> + <td>H1, H2, H3, H4, H5, H6, P, DIV, ADDRESS, BLOCKQUOTE (more?)</td> + <td>The selection surrounded by the given block element.</td> + </tr> + <tr> + <td>heading</td> + <td>H1, H2, H3, H4, H5, H6</td> + <td>Selected block will be formatted as the given type of heading.</td> + </tr> + <tr> + <td>hilitecolor</td> + <td>A color code</td> + <td>This command will set the hilite color of the selection or at the insertion point. It only works with styleWithCSS enabled.</td> + </tr> + <tr> + <td>increasefontsize</td> + <td> </td> + <td>This command will add a <big> tag around selection or at insertion point.</td> + </tr> + <tr> + <td>indent</td> + <td> </td> + <td>Indent the block where the caret is located. If the caret is inside a list, that item becomes a sub-item one level deeper.</td> + </tr> + <tr> + <td>insertbronreturn</td> + <td>true/false</td> + <td>Selects whether pressing return inside a paragraph creates another paragraph or just inserts a <br> tag.</td> + </tr> + <tr> + <td>inserthorizontalrule</td> + <td>null/string (when string is the Line's id)</td> + <td>This command will insert a horizontal rule (line) at the insertion point. + <p>Does it delete the selection? Yes!</p> + </td> + </tr> + <tr> + <td>inserthtml</td> + <td>A string.</td> + <td>This command will insert the given html into the <body> in place of the current selection or at the caret location. + <p>The given string is the HTML to insert.</p> + </td> + </tr> + <tr> + <td>insertimage</td> + <td>A URI.</td> + <td>This command will insert an image (referenced by the given url) at the insertion point.</td> + </tr> + <tr> + <td>insertorderedlist</td> + <td> </td> + <td>Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and an OL. If the caret is inside a bulleted item, the bulleted item becomes a numbered item.</td> + </tr> + <tr> + <td>insertunorderedlist</td> + <td> </td> + <td>Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and UL. If the caret is inside a numbered item, the numbered item becomes a bulleted item.</td> + </tr> + <tr> + <td>insertparagraph</td> + <td> </td> + <td>Inserts a new paragraph.</td> + </tr> + <tr> + <td>italic</td> + <td> </td> + <td>If there is no selection, the insertion point will set italic for subsequently typed characters. + <p>If there is a selection and all of the characters are already italic, the italic will be removed. Otherwise, all selected characters will become italic.</p> + </td> + </tr> + <tr> + <td>justifycenter</td> + <td> </td> + <td>Center-aligns the current block.</td> + </tr> + <tr> + <td>justifyfull</td> + <td> </td> + <td>Fully-justifies the current block.</td> + </tr> + <tr> + <td>justifyleft</td> + <td> </td> + <td>Left-aligns the current block.</td> + </tr> + <tr> + <td>justifyright</td> + <td> </td> + <td>Right aligns the current block.</td> + </tr> + <tr> + <td>outdent</td> + <td> </td> + <td>Outdent the block where the caret is located. If the block is not indented prior to calling outdent, nothing will happen. + <p>If the caret is in a list item, the item will bump up a level in the list or break out of the list entirely.</p> + </td> + </tr> + <tr> + <td>paste</td> + <td> </td> + <td>This command will paste the contents of the clipboard at the location of the caret. If there is a selection, it will be deleted prior to the insertion of the clipboard's contents. + <p>note: this command won't work without setting a pref or using signed JS. user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p> + + <p>note: the shortcut key will automatically trigger this command (typically accel-V) with or without the signed JS or any code on the page to handle it.</p> + </td> + </tr> + <tr> + <td>redo</td> + <td> </td> + <td>This command will redo the previous undo action. If undo was not the most recent action, this command will have no effect. + <p>note: the shortcut key will automatically trigger this command (typically accel-shift-Z)</p> + </td> + </tr> + <tr> + <td>removeformat</td> + <td> </td> + <td>Removes inline formatting from the current selection.</td> + </tr> + <tr> + <td>selectall</td> + <td> </td> + <td>This command will select all of the contents within the editable area. + <p>note: the shortcut key will automatically trigger this command (typically accel-A)</p> + </td> + </tr> + <tr> + <td>strikethrough</td> + <td> </td> + <td>If there is no selection, the insertion point will set strikethrough for subsequently typed characters. + <p>If there is a selection and all of the characters are already striked, the strikethrough will be removed. Otherwise, all selected characters will have a line drawn through them.</p> + </td> + </tr> + <tr> + <td>styleWithCSS</td> + <td> </td> + <td>This command is used for toggling the format of generated content. By default (at least today), this is true. An example of the differences is that the "bold" command will generate <b> if the styleWithCSS command is false and generate css style attribute if the styleWithCSS command is true.</td> + </tr> + <tr> + <td>subscript</td> + <td> </td> + <td>If there is no selection, the insertion point will set subscript for subsequently typed characters. + <p>If there is a selection and all of the characters are already subscripted, the subscript will be removed. Otherwise, all selected characters will be drawn slightly lower than normal text.</p> + </td> + </tr> + <tr> + <td>superscript</td> + <td> </td> + <td>If there is no selection, the insertion point will set superscript for subsequently typed characters. + <p>If there is a selection and all of the characters are already superscripted, the superscript will be removed. Otherwise, all selected characters will be drawn slightly higher than normal text.</p> + </td> + </tr> + <tr> + <td>underline</td> + <td> </td> + <td>If there is no selection, the insertion point will set underline for subsequently typed characters. + <p>If there is a selection and all of the characters are already underlined, the underline will be removed. Otherwise, all selected characters will become underlined.</p> + </td> + </tr> + <tr> + <td>undo</td> + <td> </td> + <td>This command will undo the previous action. If no action has occurred in the document, then this command will have no effect. + <p>note: the shortcut key will automatically trigger this command (typically accel-Z)</p> + </td> + </tr> + <tr> + <td>unlink</td> + <td> </td> + <td>If the insertion point is within a link or if the current selection contains a link, the link will be removed and the text will remain.</td> + </tr> + <tr> + <td colspan="3">{{Deprecated_header}}</td> + </tr> + <tr> + <td>readonly</td> + <td> </td> + <td>This command has been replaced with contentReadOnly. It takes the same values as contentReadOnly, but the meaning of true and false are inversed.</td> + </tr> + <tr> + <td>useCSS</td> + <td> </td> + <td>This command has been replaced with styleWithCSS. It takes the same values as styleWithCSS, but the meaning of true and false are inversed.</td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/fa/mozilla/add-ons/add-on_guidelines/index.html b/files/fa/mozilla/add-ons/add-on_guidelines/index.html new file mode 100644 index 0000000000..a2ceecab7b --- /dev/null +++ b/files/fa/mozilla/add-ons/add-on_guidelines/index.html @@ -0,0 +1,116 @@ +--- +title: Add-on guidelines +slug: Mozilla/Add-ons/Add-on_guidelines +translation_of: 'https://extensionworkshop.com/documentation/publish/add-on-policies/' +--- +<p>These add-on guidelines were created to foster an open and diverse add-on developer community while ensuring an excellent user experience. They apply to all add-ons and add-on updates regardless of where they are hosted, and also apply to customizations performed by installers that configure Firefox without using an add-on. Add-ons hosted on <a class="external text" href="https://addons.mozilla.org/" rel="nofollow">AMO</a> are subject to <a href="https://addons.mozilla.org/developers/docs/policies" title="https://addons.mozilla.org/developers/docs/policies">additional policies</a>.</p> +<h2 id="Be_Transparent">Be Transparent</h2> +<ul> + <li>Add-ons must either be installed using the add-on web install system, or be approved by the user using the <a class="external text" href="https://blog.mozilla.org/addons/2011/08/11/strengthening-user-control-of-add-ons/" rel="nofollow">install opt-in dialog</a>. + <ul> + <li>We want our users to know what they are installing so that they are not unpleasantly surprised by changes they did not expect. We also want them to know what to remove if they decide not to keep it.</li> + <li>Add-ons installed through application installers should <a class="external text" href="/en-US/docs/Adding_Extensions_using_the_Windows_Registry" rel="nofollow">use the Windows Registry</a> or equivalent global install methods so that Firefox displays the opt-in screen. The opt-in screen must not be tampered with in any way, including overlaying additional information or images on top of it.</li> + </ul> + </li> + <li>Add-ons must always be possible to uninstall or disable from the Add-ons Manager. + <ul> + <li>Add-ons installed globally using the Windows registry or global extension directories cannot be uninstalled (<a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=640775" rel="nofollow">bug 640775</a>), but they can be disabled to the same effect.</li> + </ul> + </li> + <li>Add-ons must use a <a class="external text" href="/en-US/docs/Install_manifests#id" rel="nofollow">single unique ID</a> during their entire lifetime. + <ul> + <li>Using the same ID for multiple products, or multiple IDs for a single product, can lead to problems with automatic updates as well as blocklisting conflicts. Add-ons may change their IDs due to ownership changes, as they commonly use an email address-like format ( + <i> + e.g.,</i> + personasplus@mozilla.com).</li> + </ul> + </li> + <li>Add-ons must not use brand names, trademarks, or other terms in ways that deceive users. Using Mozilla trademarks must follow <a class="external text" href="http://www.mozilla.org/foundation/trademarks/policy.html" rel="nofollow">our trademark policy</a>.</li> + <li>Add-ons should clearly communicate their intended purpose and active features, including features introduced through updates. + <ul> + <li>While we understand and support add-on developers who choose to monetize their products, this should not come at the expense of users' browsing experience. If an add-on inserts advertisements, affiliate codes, sponsored search results, or the like, into web pages, the user should be made aware of this when the add-on is installed. Likewise, if some features require payment to use, or require payment to remain active after a trial period, users should be made aware of this.</li> + </ul> + </li> +</ul> +<h2 id="Be_Respectful_to_Users">Be Respectful to Users</h2> +<ul> + <li>Add-ons must remove all introduced code, executables, and application configuration changes when they are uninstalled. + <ul> + <li>Uninstalling an add-on using the regular uninstall process should generally suffice. This guideline primarily applies to changes made to preferences such as the homepage, default search URL, network settings, and so forth. These preferences should be restored to their previous values when the add-on is uninstalled. Most add-ons can easily accomplish this by making such changes via a <a class="external text" href="/en-US/docs/Building_an_Extension#Defaults_Files" rel="nofollow">default preferences file</a>.</li> + </ul> + </li> + <li>Add-ons should respect the users' choices and not make unexpected changes, or limit users' ability to revert them. + <ul> + <li>For instance, users generally do not expect an add-on to change the Firefox homepage. Asking users to opt-in to such extra changes is recommended. Making them difficult or impossible to revert is strongly discouraged.</li> + </ul> + </li> + <li>Add-ons should make it clear how private user data is being used. + <ul> + <li>Add-ons which send user data over the Internet should generally provide a Privacy Policy, ideally concise and easily readable.</li> + </ul> + </li> + <li>Add-on developers should provide a mechanism for them to be contacted. + <ul> + <li>While developers are not required to provide a support channel for users, it is recommended. All add-on developers should have a contact form or public email address so that they can be contacted in case of emergencies, such as guideline violations that could lead to blocklisting.</li> + </ul> + </li> +</ul> +<h2 id="Be_Safe">Be Safe</h2> +<ul> + <li>Add-ons must not cause harm to users' data, system, or online identities.</li> + <li>Add-ons must not transmit users' private data unsafely, or expose it to third parties unnecessarily. + <ul> + <li>Private data should always be sent over a secure connection. This includes browsing data such as visited URLs and bookmarks.</li> + <li>Making the browser easier to fingerprint by adding text to the User-Agent string or adding custom headers is also a privacy concern, and should be avoided.</li> + </ul> + </li> + <li>Add-ons must not create or expose application or system vulnerabilities. + <ul> + <li>Security bugs happen, but once discovered they need to be addressed immediately. A popular add-on with a security vulnerability is a valuable attack vector for hackers, and in such cases we will move quickly to blocklist the add-on if there is no prompt response from the developer.</li> + </ul> + </li> + <li>Add-ons must not tamper with the application or blocklist update systems.</li> + <li>Add-ons should not store any browsing data while in Private Browsing Mode. + <ul> + <li>It's worth stressing that PBM is about avoiding storing + <i> + local</i> + data while browsing, not about sending data elsewhere. To learn more about PBM we recommend reading <a class="external text" href="http://ehsanakhgari.org/tag/privatebrowsing" rel="nofollow">Ehsan's blog posts</a> about it.</li> + </ul> + </li> +</ul> +<h2 id="Be_Stable">Be Stable</h2> +<ul> + <li>Add-ons must not cause hangs or crashes.</li> + <li>Add-ons should not break or disable core application features. + <ul> + <li>This includes features like tabbed browsing, Private Browsing Mode, and the location bar. Add-ons that are specifically meant to do this are exempt.</li> + </ul> + </li> + <li>Add-ons should not cause memory leaks, or unnecessarily consume large amounts of memory.</li> + <li>Add-ons should not slow down the application or system significantly.</li> + <li>Add-ons should not consume network resources to an extent that affects regular application usage. + <ul> + <li>Downloading large amounts of data without user awareness can significantly disrupt regular browsing, and may result in unexpected charges for users who have network usage limitations (notably on mobile).</li> + </ul> + </li> +</ul> +<h2 id="Exceptions">Exceptions</h2> +<ul> + <li>Add-ons can break some of these guidelines if that's their intended purpose and there isn't malicious intent ( + <i> + e.g.,</i> + a security exploit proof of concept).</li> + <li>Add-ons deployed by administrators within workplaces, schools, kiosks, and so forth, are exempt from most guidelines.</li> + <li>As add-ons can only run clean up code if they are uninstalled while Firefox is running and they are enabled, we do not require that they attempt to clean up after themselves when they are uninstalled under other circumstances. Application installers that configure Firefox without add-ons should revert any changes when uninstalled.</li> + <li>Add-ons may leave behind preferences changes in private preference branches which do not affect Firefox when the add-on is not active, so that any previous add-on configuration is not lost if the user decides to re-install the add-on in the future.</li> +</ul> +<p>Other exceptions may apply.</p> +<h2 id="Enforcement">Enforcement</h2> +<p>Add-ons that do not follow these guidelines may qualify for blocklisting, depending on the extent of the violations. Guidelines qualified with the word + <i> + must</i> + are especially important, and violations thereof will most likely result in a blocklisting nomination.</p> +<p>The Add-ons Team will do their best to contact the add-on's developers and provide a reasonable time frame for the problems to be corrected before a block is put in place. If an add-on is considered malicious or its developers have proven unreachable or unresponsive, or in case of repeat violations, blocklisting may be immediate.</p> +<p>Guideline violations should be <a class="external text" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Tech%20Evangelism&component=Add-ons" rel="nofollow">reported via Bugzilla</a>, under Tech Evangelism > Add-ons. Questions can be posted in the <a class="external text" href="irc://irc.mozilla.org/addons" rel="nofollow">#addons IRC channel</a>.</p> +<p>These guidelines may change in the future. All updates will be announced in the <a class="external text" href="https://blog.mozilla.org/addons/" rel="nofollow">Add-ons Blog</a>.</p> diff --git a/files/fa/mozilla/add-ons/index.html b/files/fa/mozilla/add-ons/index.html new file mode 100644 index 0000000000..ac0a1e3aa6 --- /dev/null +++ b/files/fa/mozilla/add-ons/index.html @@ -0,0 +1,117 @@ +--- +title: افزونهها +slug: Mozilla/Add-ons +tags: + - Add-ons + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons +--- +<div class="summary" dir="rtl">تغییر و توسعه برنامههای موزیلا</div> + +<p dir="rtl"><span class="seoSummary">افزونهها قابلیتهای جدیدی به برنامههای مبتنی بر <a href="/en-US/docs/Mozilla/Gecko">Gecko</a> مانند فایرفاکس، سیمانکی و تاندربیرد اضافه میکنند.</span><strong> </strong>دو نوع اصلی از افزونهها وجود دارد: <a href="#Extensions">الحاقیها</a> که قابلیتهای جدیدی به برنامه اضافه میکنند، <a href="#Themes">تمها</a> که رابط کاربری برنامه را تغییر میدهند.</p> + +<p dir="rtl">موزیلا برای هر دو نوع الحاقیها و تمها، یک مخزن در <a href="https://addons.mozilla.org/">addons.mozilla.org</a> راهاندازی کردهاست، که به عنوان AMO شناخته میشود. وقتی شما <a href="/en-US/Add-ons/Submitting_an_add-on_to_AMO">افزونهها را به AMO ارسال میکنید</a> افزونهها بازبینی شده، و افزونهها بعد از گذراندن مرحله بازبینی برای کاربران قابل دسترس خواهد بود. شما مجبور نیستید که افزونهها را به AMO ارسال کنید، اما اگر اینکار را انجام دهید، کاربران اطمینان پیدا میکنند که در عمل افزونهها بازبینی شده، و شما به عنوان یک منبع مفید افزونهها از دید AMO سود خواهید برد.</p> + +<p dir="rtl">افرونهها تاثیر زیادی بر برنامههایی که آنها را میزبانی میکنند میگذارند. ما برای اطمینان از فراهم کردن یک تجربه خوب برای کاربران باید <a href="/en-US/docs/Mozilla/Add-ons/Add-on_guidelines">مجموعهای از راهنماییها</a> را توسعه دهیم. این راهنماییها بر روی تمام انواع افزونهها اعمال میشود، چه آنها در <a href="https://addons.mozilla.org/">addons.mozilla.org</a> میزبانی بشوند یا نشوند.</p> + +<hr> +<h2 dir="rtl" id="الحاقیها"><a name="Extensions">الحاقیها</a></h2> + +<p dir="rtl">الحاقیها قابلیت جدیدی به برنامههای موزیلا مانند فایرفاکس و تاندربیرد اضافه میکنند. الحاقیها ویژگیهای جدیدی به مرورگر، مانند روش متفاوتی برای مدیریت تبها اضافه میکنند، و آنها می توانند محتوای وب را بهمنظور استفاده از وبسایتها یا امنیت وبسایتهای خاص بهبود بخشند.</p> + +<p dir="rtl">سه تکنیک مختلف وجود دارد که شما میتوانید برای ساختن الحاقیها استفاده کنید: الحاقیهای افزودنی مبتنی بر SDK، الحاقیهای خود راهانداز بدون نیاز به راهاندازی مجدد، الحاقیهای روی هم قرار داده شده.</p> + +<ul class="card-grid"> + <li dir="rtl"><span><a href="https://developer.mozilla.org/en-US/Add-ons/SDK">الحاقیهای افزودنی مبتنی بر SDK</a></span><br> + توسعه الحاقیهای بدون نیاز به راه اندازی مجدد از یکسری از API های جاوا اسکریپت سطح بالا استفاده میکند.</li> + <li dir="rtl"><span><a href="/en-US/Add-ons/Bootstrapped_extensions">الحاقیهای بدون نیاز به راه اندازی مجدد</a></span><br> + توسعه الحاقیهایی که نیاز به راه اندازی مجدد مرورگر ندارند.</li> + <li dir="rtl"><a href="/en-US/Add-ons/Overlay_Extensions"><span>الحاقیهای روی هم قرار داده شده</span></a><br> + توسعه الحاقیهای قدیمی که از XML روی هم قرار گرفته شده استفاده میکنند.</li> +</ul> + +<p dir="rtl">اگر امکان دارد، توصیه میشود تا از افزونه SDK استفاده کنید، که از مکانیزم توسعه بدون نیاز به راه اندازی مجدد استفاده میکند ولی وظایف خاص را ساده کرده و بعد از اجرا پاکسازی را انجام میدهد . اگر افزونه SDK مناسب نیازهای شما نیست، بهجای آن یک الحاقی بدون نیاز به راه اندازی مجدد را توسعه دهید. درحال حاضر الحاقیهای روی هم قرار گرفته منسوخ شدهاند، اگر چه خیلی از آنها که بسیار مورد علاقه هستند هنوز وجود دارند.</p> + +<p dir="rtl">برای اطلاعات بیشتر در مورد انتخاب تکنیک مناسب برای استفاده، این <a href="/en-US/Add-ons/Comparing_Extension_Toolchains">مقایسه</a> را بخوانید.</p> + +<div class="column-container"> +<div class="column-half"> +<h3 dir="rtl" id="تمرینهای_مفید">تمرینهای مفید</h3> + +<p dir="rtl">مهم نیست که شما چطور یک الحاق را توسعه میدهید، راهنماییهای زیادی وجود دارد که می توانید دنبال کنید و مطمئن شوید که الحاقی شما تا آنجایی که امکان دارد تجربه خوبی برای کاربران مهیا کردهاست یا نه.</p> + +<dl> + <dt dir="rtl"><a href="/en-US/Add-ons/Performance_best_practices_in_extensions">کارائی</a></dt> + <dd dir="rtl">اطمینان از اینکه الحاقی شما سریع، جوابگو و از نظرحافظه کارآمد است.</dd> + <dt dir="rtl"><a href="/en-US/Add-ons/Security_best_practices_in_extensions">امنیت</a></dt> + <dd dir="rtl">اطمینان از اینکه الحاقی شما کاربر را در معرض وب سایتهای بداندیش قرار نمیدهد.</dd> + <dt dir="rtl"><a href="/en-US/Add-ons/Extension_etiquette">رسوم</a></dt> + <dd dir="rtl">اطمینان از اینکه الحاقی شما به درستی با دیگر الحاقیها کار میکند.</dd> +</dl> +</div> + +<div class="column-half"> +<h3 dir="rtl" id="برنامه_ویژه">برنامه ویژه</h3> + +<p dir="rtl">اغلب مستندات فرض میکنند که توسعه شما برای میزکار فایرفاکس است. اگر شما بعضی دیگر برنامههای مبتنی بر Gecko را توسعه میدهید، تفاوتهای اصلی وجود دارد که شما باید در مورد آن بدانید.</p> + +<dl> + <dt dir="rtl"><a href="/en-US/Add-ons/Thunderbird">تاندربیرد</a></dt> + <dd dir="rtl">توسعه الحاقیها برای سرویس گیرنده پست الکترونیک تاندربیرد.</dd> + <dt dir="rtl"><a href="/en-US/Add-ons/Firefox_for_Android">فایرفاکس برای اندروید</a></dt> + <dd dir="rtl">توسعه الحاقیها برای فایرفاکس برای اندروید.</dd> + <dt dir="rtl"><a href="/en-US/Add-ons/SeaMonkey_2">سیمانکی</a></dt> + <dd dir="rtl">توسعه الحاقیها برای مجموعه برنامه <a href="http://www.seamonkey-project.org/">سیمانکی</a>.</dd> +</dl> +</div> +</div> + +<hr> +<h2 dir="rtl" id="تمها"><a name="Themes">تمها</a></h2> + +<p dir="rtl">تمها افزونههایی هستند که رابط کاربری برنامه را سفارشی میکنند. دو نوع تم وجود دارد: تمهای سبک وزن و تمهای کامل.</p> + +<div class="column-container"> +<div class="column-half"> +<p dir="rtl"><a href="https://addons.mozilla.org/en-US/developers/docs/themes">تمهای سبک وزن</a> از تمهای کامل برای پیاده سازی سادهتر هستند، اما سفارشی سازی محدودی را فراهم میکنند.</p> +</div> + +<div class="column-half" dir="rtl"> +<p>با <a href="/en-US/docs/Themes">تمهای کامل</a> می توانید تغییرات بیشتری به ظاهر برنامه بدهید. مستندات برای تمهای کامل بهروز نیستند، اما به عنوان پایهای برای مستندات بهروز شده به اینجا لینک شده است.</p> +</div> +</div> + +<hr> +<h2 dir="rtl" id="انواع_دیگر_افزونهها">انواع دیگر افزونهها</h2> + +<p dir="rtl"><a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">متصّل شوندههای موتور جستجو</a> نوع ساده و خیلی خاص از افزونه هستند: آنها موتورهای جستجوی جدید را به نوار جستجوی مرورگر اضافه می کنند.</p> + +<p dir="rtl"><strong><a href="/en-US/docs/Plugins">متصّل شوندهها</a> </strong>به برنامهها در فهمیدن محتوایی که بهصورت محلی پشتیبانی نمیشوند کمک میکنند. ما به مرور رمان پشتیبانی از اینگونه متصّل شوندهها را بدخواهیم دانست، آنهایی که تاریخچهای در مورد قابلیت پایداری، کارایی، و مشکلات امنیتی دارند.</p> + +<h2 id="Subnav" style="text-align: right;">Subnav</h2> + +<ol> + <li style="text-align: right;"><a href="/en-US/Add-ons/Overlay_Extensions" title="Overlay extensions">Overlay extensions</a></li> + <li style="text-align: right;"><a href="/en-US/Add-ons/Bootstrapped_extensions" title="Restartless extensions">Restartless extensions</a></li> + <li style="text-align: right;"><a href="/en-US/Add-ons/SDK">Add-on SDK</a></li> + <li style="text-align: right;"><a href="#">Extension good practices</a> + <ol> + <li><a href="/en-US/Add-ons/Performance_best_practices_in_extensions" title="Performance">Performance</a></li> + <li><a href="/en-US/Add-ons/Security_best_practices_in_extensions" title="Security">Security</a></li> + <li><a href="/en-US/Add-ons/Extension_etiquette" title="Etiquette">Etiquette</a></li> + </ol> + </li> + <li style="text-align: right;"><a href="#">Themes</a> + <ol> + <li><a href="https://addons.mozilla.org/en-US/developers/docs/themes" title="Lightweight themes">Lightweight themes</a></li> + <li><a href="/en-US/docs/Themes" title="Complete themes">Complete themes</a></li> + </ol> + </li> + <li style="text-align: right;"><a href="#">Publishing add-ons</a> + <ol> + <li><a href="https://addons.mozilla.org/" title="addons.mozilla.org">addons.mozilla.org</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/Add-on_guidelines">Add-on guidelines</a></li> + </ol> + </li> +</ol> diff --git a/files/fa/mozilla/add-ons/sdk/index.html b/files/fa/mozilla/add-ons/sdk/index.html new file mode 100644 index 0000000000..135dca5a25 --- /dev/null +++ b/files/fa/mozilla/add-ons/sdk/index.html @@ -0,0 +1,81 @@ +--- +title: کیت توسعه افزونه +slug: Mozilla/Add-ons/SDK +translation_of: Archive/Add-ons/Add-on_SDK +--- +<p dir="rtl">شما می توانید افزونه های فایرفاکس را با استفاده از تکنولوژی های وب و کیت توسعه فایرفاکس بسازید: جاوااسکریپت ، HTML، و CSS. کیت توسعه شامل API های جاوااسکریپت برای توسعه افزونه و ابزارهایی برای توسعه و آزمایش و انتشار افزونه است.</p> + +<hr> +<h3 dir="rtl" id="آموزش_ها">آموزش ها</h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Tutorials#getting-started">شروع</a></dt> + <dd dir="rtl">چگونه <a href="/en-US/Add-ons/SDK/Tutorials/Installation">کیت توسعه را نصب کنیم</a> و از <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">ابزار cfx</a> برای توسعه ، تست و انتشار افزونه استفاده کنیم.</dd> + <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Tutorials#interact-with-the-browser">ارتباط با مرورگر</a></dt> + <dd dir="rtl"><a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">باز کردن صفحات</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Listen_For_Page_Load">بارگزاری صفحات</a>, و<a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs"> لیست صفحات باز</a>.</dd> + <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Tutorials#development-techniques">تکنیک های توسعه</a></dt> + <dd dir="rtl">یاد گرفتن تکنیک های توسعه معمولی , مانند <a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">یونیت تست</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Logging">logging</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Creating_Reusable_Modules">ایجاد ماژوله های قابل استفاده مجدد</a>, محلی کردن, and <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">توسعه برای موبایل</a>.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Tutorials#create-user-interfaces">ایجاد اجزای رابط کاربری</a></dt> + <dd dir="rtl">ساخت اجزای رابط کاربری مانند <a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">دکمه های تولبار</a>, منوهای بازشونده, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">منوها</a>, و <a href="/en-US/Add-ons/SDK/Tutorials/Display_a_Popup">دیالوگ ها</a>.</dd> + <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Tutorials#modify-web-pages">ویرایش صفحات</a></dt> + <dd dir="rtl">ویرایش صفحات <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">مطابق یک الگوی آدرس</a> یا به صورت پویا <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">یک تب را ویرایش کنیم</a>.</dd> + <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Tutorials/Annotator">قرار دادن همه چیز کنار هم</a></dt> + <dd dir="rtl">مشاهده افزونه ها نمونه .</dd> +</dl> +</div> +</div> + +<hr> +<h3 dir="rtl" id="راهنما_ها">راهنما ها</h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Guides#contributors-guide">راهنمای نویسندگان</a></dt> + <dd dir="rtl">یاد گرفتن چگونگی <a href="/en-US/Add-ons/SDK/Guides/Getting_Started">شرکت کردن در توسعه کیت توسعه</a>, و یاد گرفتن مهمترین اصطلاحات کیت توسعه , مانند <a href="/en-US/Add-ons/SDK/Guides/Modules">ماژول</a>, <a href="/en-US/Add-ons/SDK/Guides/Classes_and_Inheritance">کلاس ها و وراثت</a>, <a href="/en-US/Add-ons/SDK/Guides/Private_Properties">تنظیمات خصوصی</a>, و <a href="/en-US/Add-ons/SDK/Guides/Content_Processes">فرایند های محتوا</a>.</dd> + <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Guides#sdk-infrastructure">زیر ساخت های کیت توسعه</a></dt> + <dd dir="rtl">جنبه های تکنولوژی زیر بنایی کیت توسعه: <a href="/en-US/Add-ons/SDK/Guides/Module_structure_of_the_SDK">ماژول ها </a>, <a href="/en-US/Add-ons/SDK/Guides/Program_ID">شماره برنامه </a>, و تعریف قوانین <a href="/en-US/Add-ons/SDK/Guides/Firefox_Compatibility">سازگاری فایرفاکس</a>.</dd> + <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">اسکریپت های محتوا</a></dt> + <dd dir="rtl">یک راهنمای دقیق برای کار با اسکریپت های محتوا.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Guides#sdk-idioms">اصطلاحات کیت توسعه</a></dt> + <dd dir="rtl"><a href="/en-US/Add-ons/SDK/Guides/Working_with_Events">چارچوب رویداد های</a> کیت توسعه ، <a href="/en-US/Add-ons/SDK/Guides/Two_Types_of_Scripts">تمایز بین اسکریپت های محتوا و اسکریپت های افزونه ها</a>.</dd> + <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">XUL مهاجرت</a></dt> + <dd dir="rtl">یک راهنما یرای <a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">انتقال افزونه های XUL به کیت توسعه</a>. این راهنما شامل <a href="/en-US/Add-ons/SDK/Guides/XUL_vs_SDK">مقایسه دو مجموعه ابزار</a> و<a href="/en-US/Add-ons/SDK/Guides/Porting_the_Library_Detector"> نمونه های کاری</a> انتقال افزونه های XUL.</dd> + <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Guides/Multiprocess_Firefox_and_the_SDK">فایرفاکس چند پروسه ای و کیت توسعه</a></dt> + <dd dir="rtl">چگونگی چک کردن سازگاری افزونه شما با فایرفاکس چند پروسه ای و درست کردن ان در صورت نبودن</dd> +</dl> +</div> +</div> + +<hr> +<h3 dir="rtl" id="ارجاع">ارجاع</h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt dir="rtl"><a href="/en-US/Add-ons/SDK/High-Level_APIs">رابط های برنامه کاربردی سطح بالا</a></dt> + <dd dir="rtl">مستندات مرجع برای رابط های برنامه کاربردی کیت توسعه سطح بالا.</dd> + <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Tools">ابزراهای مرجع</a></dt> + <dd dir="rtl">مستندات ارجاع برای <a href="/en-US/Add-ons/SDK/Tools/cfx">ابزار cfx</a> برای توسعه , تست, و انتشار افزونه, استفاده های کلی از ابزار <a href="/en-US/Add-ons/SDK/Tools/console">کنسول </a>برای Logging, و فایل <a href="/en-US/Add-ons/SDK/Tools/package_json">pachage,json</a>.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Low-Level_APIs">رابط های برنامه کاربردی سطح پایین</a></dt> + <dd>مستندات مرجع برای رابط های برنامه کاربری کیت توسعه سطح پایین.</dd> +</dl> +</div> +</div> diff --git a/files/fa/mozilla/add-ons/themes/background/index.html b/files/fa/mozilla/add-ons/themes/background/index.html new file mode 100644 index 0000000000..3ad47ca2be --- /dev/null +++ b/files/fa/mozilla/add-ons/themes/background/index.html @@ -0,0 +1,104 @@ +--- +title: Background Themes +slug: Mozilla/Add-ons/Themes/Background +translation_of: Mozilla/Add-ons/Themes/Lightweight_themes +--- +<p>{{AddonSidebar}}</p> + +<h2 id="How_to_Create_Your_Own_Background_Theme">How to Create Your Own Background Theme</h2> + +<div class="primary auto" id="getting-started"> +<p>Themes are made up of a "header" graphic image file, which skins the default Firefox UI background.</p> + +<p>Finished Your Design? You can <a href="https://addons.mozilla.org/developers/theme/submit">submit it right now!</a></p> + +<h3 id="Creating_a_Theme_Header_Image">Creating a Theme Header Image</h3> + +<p>The header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip. It will be <strong>anchored to the top-right corner</strong> of the browser window.</p> + +<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9929/header-step.jpg" style="height: 215px; width: 1059px;"></p> + +<ul> + <li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/header.jpg">View a sample Theme Header here.</a></li> +</ul> + +<h4 id="Image_Requirements">Image Requirements</h4> + +<ul> + <li>Dimensions should be <strong>3000px wide × 200px high</strong></li> + <li>PNG or JPG file format</li> + <li>Image must be no larger than 300 KB in file size</li> +</ul> + +<h4 id="Tips">Tips</h4> + +<ul> + <li>Subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser UI.</li> + <li>Firefox may reveal more of the lower portion of the image if another toolbar or other UI element is added to the top of the window.</li> + <li>The upper right-hand side of the image should have the most important information—as a user increases the width of the browser window, the browser reveals more of the left-hand side of the image.</li> +</ul> + +<h4 id="Online_Image_Editor_Resources">Online Image Editor Resources</h4> + +<ul> + <li><a href="http://www.pixlr.com">Pixlr</a> — Pixlr offers professional and easy-to-use tools for creating and editing images within a browser.</li> + <li><a href="http://www.photoshop.com">Photoshop</a> — Tweak, rotate and touch up photos with Photoshop® Express, a free online photo editor.</li> +</ul> + +<h3 id="Creating_a_Theme_Footer_Image">Creating a Theme Footer Image</h3> + +<p>In older versions of Firefox, or newer versions with certain add-ons installed, the footer image is displayed as the background of the bottom of the browser window, behind the add-on and find bars. It will be anchored to the bottom-left corner of the browser window. Footer images are optional.</p> + +<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9935/footer-step.jpg" style="height: 56px; width: 1249px;"></p> + +<ul> + <li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/footer.jpg">View a sample Theme Footer here.</a></li> +</ul> + +<h4 id="Image_Requirements_2">Image Requirements</h4> + +<ul> + <li>Dimensions should be <strong>3000px wide × 100px high</strong></li> + <li>PNG or JPG file format</li> + <li>Image must be no larger than 300 KB in file size</li> +</ul> + +<h4 id="Tips_2">Tips</h4> + +<ul> + <li>Subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser UI.</li> + <li>Firefox may reveal more of the upper portion of the image if the find bar is open or if an extension adds more height to the bottom of the window.</li> + <li>The left-hand side of the image should have the most importan information—as a user increases the width of the browser window, the browser reveals more of the right-hand side of the image.</li> +</ul> + +<h3 id="Submitting_your_Theme_Images">Submitting your Theme Images</h3> + +<p>To get started submitting your images, go to the Theme Submission page:</p> + +<ol class="itemized"> + <li><strong>Name your theme</strong> — pick a unique name for your theme. Duplicate names are not allowed, so you may need to try a few times to find a unique name.</li> + <li><strong>Pick a category and tags</strong> — select a category and enter some tags that best describe your theme. Keep in mind that a reviewer may reject your theme if it is obvious that your category and/or tags are unrelated to your theme.</li> + <li><strong>Describe your theme</strong> — write a short description of your theme. Keep in mind that a reviewer may reject your theme if your description is not an accurate representation of your theme.</li> + <li><strong>Select a license for your theme</strong> — decide on a copyright license for your work. <a href="http://creativecommons.org/licenses/">Read more about the types of Creative Common licenses.</a> + <ul> + <li><strong>Important:</strong> Please be sure you have the rights to use the image in your theme!</li> + </ul> + </li> + <li><strong>Upload your images</strong> — make sure they are under 300 KB in size and JPG or PNG format!</li> + <li><strong>Select text and tab colors</strong> — you can choose the tab ("background") color and foreground text color that work best with your header image.</li> + <li><strong>Preview your theme</strong> — you're ready to preview your theme! Simply mouse over the image above the Submit Theme button, and see how it looks instantly.</li> + <li><strong>Submit your theme</strong> — if everything looks right, click the Submit Theme button and you're done! You can see all the themes you've authored on your profile page. + <ul> + <li><strong>Tip:</strong> to ensure that your theme is approved for the gallery, be sure it complies with the content guidelines and terms of service!</li> + </ul> + </li> +</ol> + +<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9933/submission-step.jpg" style="height: 1800px; width: 785px;"></p> + +<p class="call-to-submit"><a class="button prominent" href="https://addons.mozilla.org/en-US/developers/theme/submit">Submit Your Theme Now</a></p> + +<h2 class="call-to-submit" id="More_Tutorials">More Tutorials</h2> + +<p><a href="http://vanillaorchidstutorials.blogspot.com/2015/11/mozilla-themes-focal-point-sizing.html">Mozilla Themes Focal Point on Sizing</a> - A tutorial on theming with a focus on sizing, by VanillaOrchids.</p> +</div> diff --git a/files/fa/mozilla/add-ons/themes/index.html b/files/fa/mozilla/add-ons/themes/index.html new file mode 100644 index 0000000000..86dd860fa7 --- /dev/null +++ b/files/fa/mozilla/add-ons/themes/index.html @@ -0,0 +1,61 @@ +--- +title: Themes +slug: Mozilla/Add-ons/Themes +tags: + - Add-ons + - Look & Feel + - NeedsTranslation + - Themes + - TopicStub +translation_of: Mozilla/Add-ons/Themes +--- +{{AddonSidebar}} + +<div class="warning"> +<p>The Theme documentation here is out of date.</p> +</div> + +<p>Themes are skins for different Mozilla applications. They allow you to change the look and feel of the user interface and personalize it to your tastes. A theme can simply change the colors of the UI or it can change every piece of its appearance.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> + +<dl> + <dt><a href="/en-US/docs/Building_a_Theme" title="Building a Theme">Building a Theme</a></dt> + <dd>A tutorial for building a simple theme in Firefox.</dd> + <dt><a href="/en-US/docs/Themes/Common_Firefox_Theme_Issues_and_Solutions" title="Themes/Common_Firefox_Theme_Issues_and_Solutions">Common Theme Issues and Their Solutions</a></dt> + <dd>Common issues seen when AMO editors review themes and how to fix them.</dd> + <dt><a href="/en-US/docs/Themes/Lightweight_themes" title="Themes/Lightweight themes">Lightweight themes</a></dt> + <dd>Building lightweight themes for Firefox</dd> + <dt><a href="/en-US/docs/Creating_a_Skin_for_SeaMonkey_2.x" title="Creating_a_Skin_for_SeaMonkey_2.x">Creating a Skin for SeaMonkey 2</a></dt> + <dd>An introduction to creating new themes for SeaMonkey 2.</dd> + <dt><a href="/en-US/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales" title="Making_Sure_Your_Theme_Works_with_RTL_Locales">Making Sure Your Theme Works with RTL Locales</a></dt> + <dd>How to make sure your theme will look right with Hebrew, Arabic, Persian and Urdu locales.</dd> + <dt><a href="/en-US/docs/Theme_Packaging" title="Theme_Packaging">Theme Packaging</a></dt> + <dd>How to package themes for Firefox and Thunderbird.</dd> + <dt><a href="http://www.tudobom.de/articles/yatt/" title="http://www.tudobom.de/articles/yatt/">Yet Another Theme Tutorial</a></dt> + <dd>Another tutorial in Mozilla theme construction.</dd> + <dt><a href="/en-US/Mozilla/Add-ons/Themes/Obsolete">Obsolete docs</a></dt> + <dd>These docs are very old and will never be updated, but we've kept them in case the are useful source material for people updating the Theme documentation.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Getting_help">Getting help</h2> + +<ul> + <li><a href="http://forums.mozillazine.org/viewforum.php?f=18">MozillaZine Themes forum</a></li> +</ul> + +<h2 class="Tools" id="Tools" name="Tools">Tools</h2> + +<ul> + <li><a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/inspectorwidget/">InspectorWidget</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-us/firefox/addon/force-rtl/">Force RTL</a>: Test for RTL compatibility</li> +</ul> +</div> +</div> + +<p> </p> diff --git a/files/fa/mozilla/add-ons/themes/theme_concepts/index.html b/files/fa/mozilla/add-ons/themes/theme_concepts/index.html new file mode 100644 index 0000000000..dda28c91fe --- /dev/null +++ b/files/fa/mozilla/add-ons/themes/theme_concepts/index.html @@ -0,0 +1,232 @@ +--- +title: Theme concepts +slug: Mozilla/Add-ons/Themes/Theme_concepts +translation_of: Mozilla/Add-ons/Themes/Theme_concepts +--- +<div>{{AddonSidebar()}}</div> + +<p>Themes developed using the <a href="/en-US/Add-ons/WebExtensions">WebExtensions API</a> in Firefox enable you to change the look of the browser by adding images to the header area of the Firefox browser; this is the area behind the menu bar, toolbars, address bar, search bar, and tab strip.</p> + +<p>These theme options can be implemented as static themes (although the theme images themselves may be animated) or as dynamic themes created in a browser extension.</p> + +<div class="note"> +<p>If you have a lightweight theme it will be converted to this new theme format automatically before lightweight themes are deprecated. You do not need to port your th eme. However, please feel free to update your themes to use any of the new features described here.</p> +</div> + +<h2 id="Static_themes">Static themes</h2> + +<p>Static themes are specified using the same resources as a browser extension: a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> file to define the theme components with those components stored in the same folder as the manifest.json file or a sub folder. These resources are then packed in a zip for publication on <a href="https://addons.mozilla.org">addons.mozilla.org</a> (AMO) or for self-distribution. For more information on self-distribution, visit <a href="/en-US/docs/Mozilla/Add-ons/Distribution">Signing and distributing your add-on</a>.</p> + +<p>You can also use the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Themes/Using_the_AMO_theme_generator">theme generator</a> on AMO to create a static theme. Additionally, <a href="https://color.firefox.com">Firefox Color</a> can be used to preview customizations to the browser's theme with options to share and export a theme.</p> + +<div class="note"> +<p>A theme and browser extension functionality cannot be defined in one package, such as including a theme to complement an extension. You can, however, programmatically include a theme in an extension using the Theme API. See <a href="#Dynamic_themes">Dynamic themes</a>.</p> +</div> + +<h3 id="Defining_a_theme">Defining a theme</h3> + +<p>To create a theme (in this example a simple, single image theme):</p> + +<ul> + <li>Create a folder in a suitable location on your computer.</li> + <li>Add the theme image file to the folder: + <pre><mytheme> + <your_header_image>.<type></pre> + </li> + <li>Create a file called manifest.json in the folder and edit its content as follows: + <pre class="brush: json">{ + "manifest_version": 2, + "version": "1.0", + "name": "<your_theme_name>", + "theme": { + "images": { + "theme_frame": "<your_header_image>.<type>" + }, + "colors": { + "frame": "#FFFFFF", + "tab_background_text": "#000" + } + } +} +</pre> + Where: + + <ul> + <li><code>"frame":</code> is the heading area background color for your theme.</li> + <li><code>"</code><code>tab_background_text</code><code>":</code> the color of the text in the heading area.</li> + </ul> + </li> + <li>Package your theme and submit it to AMO, <a href="/en-US/Add-ons/WebExtensions/Publishing_your_WebExtension">following these instructions</a>. Themes can be submitted to AMO for hosting or for self-distribution.</li> +</ul> + +<h3 id="Static_theme_approaches">Static theme approaches</h3> + +<p>There are two approaches you can take to theming the header area of Firefox: using a single image or using multiple images. You could combine the two, but it’s easier to treat them separately.</p> + +<h4 id="Single_image_themes">Single image themes</h4> + +<p>This is the basic or minimal theming option, where you define:</p> + +<ul> + <li>a single image, which is anchored to the top right of the header area.</li> + <li>A color for the text in the header.</li> +</ul> + +<p>The area your header image needs to fill is a maximum of 200 pixels high. The maximum image width is determined by the resolution of the monitor Firefox is displaying on and how much of the monitor Firefox is using. Practically, this means you would need to allow for a width of up to 5120 pixels wide (for the next generation of 5k monitors). However, rather than creating a very wide image, a better approach is to use a narrower image with a transparent left edge so that it fades to the background color. For example, we could use this image<br> + <img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left edge fading to total transparency." src="https://mdn.mozillademos.org/files/15215/weta.png" style="height: 200px; width: 406px;"><br> + combined with a complementary background color, to create this effect in the header<br> + <img alt="A single image theme using the weta.png image" src="https://mdn.mozillademos.org/files/15217/basic_theme.png" style="height: 113px; width: 679px;"></p> + +<p>See details about this theme in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_fade">weta_fade</a>.</p> + +<p>Obviously, you can still provide a single wide image if you prefer.</p> + +<h4 id="Multiple_image_themes">Multiple image themes</h4> + +<p>As an alternative to creating a single image theme, you have the option to use multiple images. These images can be individually anchored to locations within the header, with the option to apply tiling to each image.</p> + +<p>Depending on the effect you want to create you may need to suppress the mandatory <code>"</code><code>theme_frame</code><code>":</code> image with an empty or transparent image. You would use an empty or transparent image if, for example, you wanted to tile a centrally justified image, such as<br> + <img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left and right edges fading to total transparency." src="https://mdn.mozillademos.org/files/15219/weta_for_tiling.png" style="height: 200px; width: 270px;"><br> + to create this effect<br> + <img alt="A single image theme using the additional images option to align an image to the center of the heading and tile it. " src="https://mdn.mozillademos.org/files/15221/tiled_theme.png" style="height: 113px; width: 679px;"><br> + Here you specify the weta image like this:</p> + +<pre class="brush: json" dir="ltr">"images": { + "theme_frame": "empty.png", + "additional_backgrounds": [ "weta_for_tiling.png"] +},</pre> + +<p dir="ltr">and the images tiling with:</p> + +<pre class="brush: json" dir="ltr">"properties": { + "additional_backgrounds_alignment": [ "top" ], + "additional_backgrounds_tiling": [ "repeat" ] +},</pre> + +<p>Full details of how to setup this theme can be found in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_tiled">weta_tiled</a>. Full detais of the alignment and tiling options can be found in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">"theme" key description</a>.</p> + +<p>Alternatively, you can use multiple images, say combining the original weta image with this one anchored to the left of the header<br> + <img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the right edge fading to total transparency." src="https://mdn.mozillademos.org/files/15223/weta-left.png" style="height: 200px; width: 406px;"><br> + to create this effect<br> + <img alt="A theme using the additional images option to place two mirrored image to the left and right of the browser header." src="https://mdn.mozillademos.org/files/15225/multi_image_theme.png" style="height: 113px; width: 679px;"></p> + +<p>Where the images are specified with:</p> + +<pre class="brush: json" dir="ltr">"images": { + "theme_frame": "empty.png", + "additional_backgrounds": [ "weta.png", "weta-left.png"] +},</pre> + +<p dir="ltr">and their alignment by:</p> + +<pre class="brush: json" dir="ltr">"properties": { + "additional_backgrounds_alignment": [ "right top" , "left top" ] +},</pre> + +<p>Full details of how to setup this theme can be found in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_mirror">weta_mirror</a>. Full details of the alignment options can be found in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">"theme" key description</a>.</p> + +<h3 id="Static_animated_themes">Static animated themes</h3> + +<p>It is possible to create an animated theme using an APNG format image, as in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/animated">animated</a>. However, remember that rapid animations, such as the one in the example might be too distracting for a practical theme.</p> + +<p dir="ltr">You can also animate themes programmatically, which we discuss in <a href="#Dynamic_themes">Dynamic themes</a>.</p> + +<h3 dir="ltr" id="Updating_static_themes">Updating static themes</h3> + +<p dir="ltr">If your static theme is hosted on AMO, you can upload a new version using the <a href="https://addons.mozilla.org/en-US/developers/">Developer Hub </a>with the following steps:</p> + +<ol dir="ltr"> + <li>Visit the product page for your theme through the <a href="https://addons.mozilla.org/en-US/developers/">Developer Hub</a></li> + <li>Select "Upload New Version" on the left</li> + <li>Upload your packaged file for validation or modify it using the theme generator</li> +</ol> + +<p>For self-hosted static themes, a new version can be updated through AMO by following the above steps or be handled by you through an updateURL or external application updates. A new version will need to be signed through the Developer Hub.</p> + +<div class="note"> +<p> If you are uploading a packaged file, the version number must be higher than the current version number</p> +</div> + +<h2 id="Dynamic_themes">Dynamic themes</h2> + +<p>As an alternative to defining a static theme, you can use the {{WebExtAPIRef("theme")}} API to control the theme used in Firefox from within a browser extension. There are a couple of use cases for this option:</p> + +<ul> + <li>To bundle a theme with a browser extension, as an added extra.</li> + <li>Create a dynamic theme that changes under programmatic control.</li> +</ul> + +<p>And, obviously, you can combine the two and bundle a programmatically controlled theme with your extension.</p> + +<p>Using the {{WebExtAPIRef("theme")}} API is straightforward. First, request "theme"<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions"> permission</a> in the extension's<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json"> manifest.json</a> file. Next, you build a JSON object containing the same information you would use in a static theme’s manifest.json, Finally, pass the JSON object in a {{WebExtAPIRef("theme.update()")}} call.</p> + +<p>For example, the following code, from the <a href="https://github.com/mdn/webextensions-examples/tree/master/dynamic-theme">dynamic theme example</a> defines the content for the day and night elements of the dynamic theme:</p> + +<pre class="brush: js" dir="ltr">const themes = { + 'day': { + images: { + theme_frame: 'sun.jpg', + }, + colors: { + frame: '#CF723F', + tab_background_text: '#111', + } + }, + 'night': { + images: { + theme_frame: 'moon.jpg', + }, + colors: { + frame: '#000', + tab_background_text: '#fff', + } + } +};</pre> + +<p>The theme.Theme object is then passed to {{WebExtAPIRef("theme.update()")}} to change the header theme, as in this code snippet from the same example:</p> + +<pre class="brush: js" dir="ltr">function setTheme(theme) { + if (currentTheme === theme) { + // No point in changing the theme if it has already been set. + return; + } + currentTheme = theme; + browser.theme.update(themes[theme]); +}</pre> + +<p dir="ltr">Learn more about dynamic themes and see an additional example in the following video:</p> + +<p dir="ltr">{{EmbedYouTube("ycckyrUN0AY")}}</p> + +<p dir="ltr"></p> + +<p dir="ltr">If you have not built a browser extension before, check out <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Your first extension</a> for a step-by-step guide.</p> + +<h2 id="Cross-browser_compatibility">Cross-browser compatibility</h2> + +<p>There is currently limited compatibility between themes in the major browsers. Opera takes an entirely different approach, and Microsoft Edge themes are not yet open to developers.</p> + +<p>There is good compatibility between Firefox static themes and Chrome themes, providing the ability to port a single header image theme from Firefox to Chrome. However, noting that<code> "frame":</code> and <code>"tab_background_text":</code> only support RGB color array definition on Chrome.</p> + +<p>So, in the single image theme example (weta_fade) could be supported in Chrome using the following manifest.json file:</p> + +<pre class="brush: json" dir="ltr">{ + "manifest_version": 2, + "version": "1.0", + "name": "<your_theme_name>", + "theme": { + "images": { + "theme_frame": "weta.png" + }, + "colors": { + "frame": [ 173 , 176 , 159 ], + "tab_background_text": [ 0 , 0 , 0 ] + } + } +}</pre> + +<p>Also, note that Chrome tiles the <code>“theme_frame”:</code> image from the left of the header area.</p> + +<p dir="ltr"><img alt="The basic theme example using the Chrome compatible manifest.json keys, showing the differences in how those keys are implemented." src="https://mdn.mozillademos.org/files/15227/basic_in_chrome.png" style="height: 113px; width: 679px;"></p> + +<p>For more information, see the notes on <a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#Chrome_compatibility">Chrome compatibility</a>.</p> diff --git a/files/fa/mozilla/add-ons/webextensions/api/index.html b/files/fa/mozilla/add-ons/webextensions/api/index.html new file mode 100644 index 0000000000..724bf34516 --- /dev/null +++ b/files/fa/mozilla/add-ons/webextensions/api/index.html @@ -0,0 +1,61 @@ +--- +title: JavaScript APIs +slug: Mozilla/Add-ons/WebExtensions/API +tags: + - NeedsTranslation + - TopicStub + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API +--- +<div>{{AddonSidebar}}</div> + +<div> +<p>JavaScript APIs for WebExtensions can be used inside the extension's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a> and in any other documents bundled with the extension, including <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> or <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">page action</a> popups, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sidebars">sidebars</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Options_pages">options pages</a>, or <a href="/en-US/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">new tab pages</a>. A few of these APIs can also be accessed by an extension's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">content scripts</a> (see the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">list in the content script guide</a>).</p> + +<p>To use the more powerful APIs you need to <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">request permission</a> in your extension's <code>manifest.json</code>.</p> + +<p>You can access the APIs using the <code>browser</code> namespace:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logTabs</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span> +<span class="punctuation token">}</span> + +browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>currentWindow<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">,</span> logTabs<span class="punctuation token">)</span></code></pre> +</div> + +<div> +<p>Many of the APIs are asynchronous, returning a {{JSxRef("Promise")}}:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logCookie</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span> +<span class="punctuation token">}</span> + +<span class="keyword token">function</span> <span class="function token">logError</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> +<span class="punctuation token">}</span> + +<span class="keyword token">let</span> setCookie <span class="operator token">=</span> browser<span class="punctuation token">.</span>cookies<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span> + <span class="punctuation token">{</span>url<span class="punctuation token">:</span> <span class="string token">"https://developer.mozilla.org/"</span><span class="punctuation token">}</span> +<span class="punctuation token">)</span><span class="punctuation token">;</span> +setCookie<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>logCookie<span class="punctuation token">,</span> logError<span class="punctuation token">)</span></code></pre> +</div> + +<div> +<p>Note that this is different from Google Chrome's extension system, which uses the <code>chrome</code> namespace instead of <code>browser</code>, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions APIs supports <code>chrome</code> and callbacks as well as <code>browser</code> and promises. Mozilla has also written a polyfill which enables code that uses <code>browser</code> and promises to work unchanged in Chrome: <a class="external external-icon" href="https://github.com/mozilla/webextension-polyfill">https://github.com/mozilla/webextension-polyfill</a>.</p> + +<p>Firefox also implements these APIs under the <code>chrome</code> namespace using callbacks. This allows code written for Chrome to run largely unchanged in Firefox for the APIs documented here.</p> + +<p>Microsoft Edge uses the <code>browser</code> namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.</p> + +<p>Not all browsers support all the APIs: for the details, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a>.</p> + +<p>Tip: Throughout the JavaScript API listings you will find short code examples that illustrate how the API is used. You can exercise these examples, without needing to create a web extension, using the console in the <a href="https://extensionworkshop.com/documentation/develop/debugging/#developer-tools-toolbox">Toolbox</a>. For example, here is the first code example on this page running in the Toolbox console in Firefox Developer Edition:</p> + +<p><img alt="Illustration of a snippet of web extension code run from the console in the Toolbox" src="https://mdn.mozillademos.org/files/17186/JavaScript_exercised_in_console.jpg" style="height: 347px; width: 680px;"></p> + +<h2 id="JavaScript_API_listing">JavaScript API listing</h2> + +<p>See below for a complete list of JavaScript APIs:</p> +</div> + +<div>{{LandingPageListSubpages}}</div> diff --git a/files/fa/mozilla/add-ons/webextensions/api/runtime/index.html b/files/fa/mozilla/add-ons/webextensions/api/runtime/index.html new file mode 100644 index 0000000000..62478e3457 --- /dev/null +++ b/files/fa/mozilla/add-ons/webextensions/api/runtime/index.html @@ -0,0 +1,168 @@ +--- +title: runtime +slug: Mozilla/Add-ons/WebExtensions/API/runtime +tags: + - API + - Add-ons + - Extensions + - Interface + - NeedsTranslation + - Reference + - TopicStub + - WebExtensions + - runtime +translation_of: Mozilla/Add-ons/WebExtensions/API/runtime +--- +<div>{{AddonSidebar}}</div> + +<p><span class="seoSummary">This module provides information about your extension and the environment it's running in.</span></p> + +<p>It also provides messaging APIs enabling you to:</p> + +<ul> + <li>Communicate between different parts of your extension. For advice on choosing between the messaging options, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Choosing_between_one-off_messages_and_connection-based_messaging">Choosing between one-off messages and connection-based messaging</a>.</li> + <li>Communicate with other extensions.</li> + <li>Communicate with native applications.</li> +</ul> + +<h2 id="Types">Types</h2> + +<dl> + <dt>{{WebExtAPIRef("runtime.Port")}}</dt> + <dd>Represents one end of a connection between two specific contexts, which can be used to exchange messages.</dd> + <dt>{{WebExtAPIRef("runtime.MessageSender")}}</dt> + <dd> + <p>Contains information about the sender of a message or connection request.</p> + </dd> + <dt>{{WebExtAPIRef("runtime.PlatformOs")}}</dt> + <dd>Identifies the browser's operating system.</dd> + <dt>{{WebExtAPIRef("runtime.PlatformArch")}}</dt> + <dd>Identifies the browser's processor architecture.</dd> + <dt>{{WebExtAPIRef("runtime.PlatformInfo")}}</dt> + <dd>Contains information about the platform the browser is running on.</dd> + <dt>{{WebExtAPIRef("runtime.RequestUpdateCheckStatus")}}</dt> + <dd>Result of a call to {{WebExtAPIRef("runtime.requestUpdateCheck()")}}.</dd> + <dt>{{WebExtAPIRef("runtime.OnInstalledReason")}}</dt> + <dd>The reason that the {{WebExtAPIRef("runtime.onInstalled")}} event is being dispatched.</dd> + <dt>{{WebExtAPIRef("runtime.OnRestartRequiredReason")}}</dt> + <dd>The reason that the {{WebExtAPIRef("runtime.onRestartRequired")}} event is being dispatched.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{WebExtAPIRef("runtime.lastError")}}</dt> + <dd>This value is set when an asynchronous function has an error condition that it needs to report to its caller.</dd> + <dt>{{WebExtAPIRef("runtime.id")}}</dt> + <dd>The ID of the extension.</dd> +</dl> + +<h2 id="Functions">Functions</h2> + +<dl> + <dt>{{WebExtAPIRef("runtime.getBackgroundPage()")}}</dt> + <dd>Retrieves the <a href="/en-US/docs/Web/API/Window">Window</a> object for the background page running inside the current extension.</dd> + <dt>{{WebExtAPIRef("runtime.openOptionsPage()")}}</dt> + <dd> + <p>Opens your extension's <a href="/en-US/Add-ons/WebExtensions/user_interface/Options_pages">options page</a>.</p> + </dd> + <dt>{{WebExtAPIRef("runtime.getManifest()")}}</dt> + <dd>Gets the complete <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> file, serialized as an object.</dd> + <dt>{{WebExtAPIRef("runtime.getURL()")}}</dt> + <dd>Given a relative path from the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> to a resource packaged with the extension, returns a fully-qualified URL.</dd> + <dt>{{WebExtAPIRef("runtime.setUninstallURL()")}}</dt> + <dd>Sets a URL to be visited when the extension is uninstalled.</dd> + <dt>{{WebExtAPIRef("runtime.reload()")}}</dt> + <dd>Reloads the extension.</dd> + <dt>{{WebExtAPIRef("runtime.requestUpdateCheck()")}}</dt> + <dd>Checks for updates to this extension.</dd> + <dt>{{WebExtAPIRef("runtime.connect()")}}</dt> + <dd>Establishes a connection from a content script to the main extension process, or from one extension to a different extension.</dd> + <dt>{{WebExtAPIRef("runtime.connectNative()")}}</dt> + <dd> + <div>Connects the extension to a native application on the user's computer.</div> + </dd> + <dt>{{WebExtAPIRef("runtime.sendMessage()")}}</dt> + <dd>Sends a single message to event listeners within your extension or a different extension. Similar to {{WebExtAPIRef('runtime.connect')}} but only sends a single message, with an optional response.</dd> + <dt>{{WebExtAPIRef("runtime.sendNativeMessage()")}}</dt> + <dd>Sends a single message from an extension to a native application.</dd> + <dt>{{WebExtAPIRef("runtime.getPlatformInfo()")}}</dt> + <dd>Returns information about the current platform.</dd> + <dt>{{WebExtAPIRef("runtime.getBrowserInfo()")}}</dt> + <dd>Returns information about the browser in which this extension is installed.</dd> + <dt>{{WebExtAPIRef("runtime.getPackageDirectoryEntry()")}}</dt> + <dd>Returns a DirectoryEntry for the package directory.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<dl> + <dt>{{WebExtAPIRef("runtime.onStartup")}}</dt> + <dd>Fired when a profile that has this extension installed first starts up. This event is not fired when an incognito profile is started.</dd> + <dt>{{WebExtAPIRef("runtime.onInstalled")}}</dt> + <dd>Fired when the extension is first installed, when the extension is updated to a new version, and when the browser is updated to a new version.</dd> + <dt>{{WebExtAPIRef("runtime.onSuspend")}}</dt> + <dd>Sent to the event page just before the extension is unloaded. This gives the extension an opportunity to do some cleanup.</dd> + <dt>{{WebExtAPIRef("runtime.onSuspendCanceled")}}</dt> + <dd>Sent after {{WebExtAPIRef("runtime.onSuspend")}} to indicate that the extension won't be unloaded after all.</dd> + <dt>{{WebExtAPIRef("runtime.onUpdateAvailable")}}</dt> + <dd>Fired when an update is available, but isn't installed immediately because the extension is currently running.</dd> + <dt>{{WebExtAPIRef("runtime.onBrowserUpdateAvailable")}} {{deprecated_inline}}</dt> + <dd>Fired when an update for the browser is available, but isn't installed immediately because a browser restart is required.</dd> + <dt>{{WebExtAPIRef("runtime.onConnect")}}</dt> + <dd>Fired when a connection is made with either an extension process or a content script.</dd> + <dt>{{WebExtAPIRef("runtime.onConnectExternal")}}</dt> + <dd>Fired when a connection is made with another extension.</dd> + <dt>{{WebExtAPIRef("runtime.onMessage")}}</dt> + <dd>Fired when a message is sent from either an extension process or a content script.</dd> + <dt>{{WebExtAPIRef("runtime.onMessageExternal")}}</dt> + <dd>Fired when a message is sent from another extension. Cannot be used in a content script.</dd> + <dt>{{WebExtAPIRef("runtime.onRestartRequired")}}</dt> + <dd>Fired when the device needs to be restarted.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("webextensions.api.runtime")}}</p> + +<div>{{WebExtExamples("h2")}}</div> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/runtime"><code>chrome.runtime</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json"><code>runtime.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/fa/mozilla/add-ons/webextensions/api/runtime/onmessage/index.html b/files/fa/mozilla/add-ons/webextensions/api/runtime/onmessage/index.html new file mode 100644 index 0000000000..f58f2a5f8c --- /dev/null +++ b/files/fa/mozilla/add-ons/webextensions/api/runtime/onmessage/index.html @@ -0,0 +1,317 @@ +--- +title: runtime.onMessage +slug: Mozilla/Add-ons/WebExtensions/API/runtime/onMessage +translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/onMessage +--- +<nav> +<p>{{AddonSidebar()}}</p> + +<p>از این رویداد برای گوش دادن به پیام های بخش دیگری از افزونه خود استفاده کنید.</p> +</nav> + +<p>برخی از موارد مورد استفاده برای مثال:</p> + +<ul> + <li>در یک content script ، برای گوش دادن به پیام های background script.</li> + <li>در یک background script ، برای گوش دادن به پیام های content script</li> + <li><strong>در یک صفحه <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Options_pages">options page</a> یا <a href="/en-US/Add-ons/WebExtensions/User_interface_components#Popups">popup</a> script</strong>, برای گوش دادن به پیام هایbackground script.</li> + <li><strong>در یک background script</strong>, برای گوش دادن به پیام های options page یا popup script.</li> +</ul> + +<p>برای ارسال پیام که توسط <code>onMessage()</code> listener, از {{WebExtAPIRef("runtime.sendMessage()")}} یا (برای ارسال پیام به یک content script) {{WebExtAPIRef("tabs.sendMessage()")}}.</p> + +<div class="blockIndicator note"> +<p>از ایجاد چندین <code>onMessage()</code> listeners برای همان نوع پیام خودداری کنید, زیرا نظم چندین listeners will fire تضمین نمی شود.</p> + +<p>اگر می خواهید تحویل پیام به یک نقطه پایان خاص را تضمین کنید, از روش <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Connection-based_messaging">مبتنی بر اتصال برای پیام استفاده کنید</a>.</p> +</div> + +<p>همراه با message خود, به listener منتقل می شود:</p> + +<ul> + <li>یک شیء <code>فرستنده</code> که جزئیاتی درباره فرستنده پیام می دهد.</li> + <li>یک تابع <code>()sendResponse</code> که می تواند برای ارسال پاسخ به فرستنده استفاده شود.</li> +</ul> + +<p>شما می توانید با فراخوانی تابع <code>()sendResponse</code> در listener خود. <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Sending_a_synchronous_response">مثالی را ببینید</a>.</p> + +<p>برای ارسال response ناهمزمان, دو گزینه وجود دارد:</p> + +<ul> + <li>رویداد listener را <code>true</code> برگردانید. این کار باعث می شود تابع <code>()sendResponse</code> پس از بازگشت listener معتبر باشد, بنابراین میتوانید بعدأ آن را صدا بزنید. <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Sending_an_asynchronous_response_using_sendResponse">مثالی را ببینید</a>.</li> + <li>return a <code>Promise</code> from the event listener, and resolve when you have the response (or reject it in case of an error). <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Sending_an_asynchronous_response_using_a_Promise">See an example</a>.</li> +</ul> + +<div class="warning"> +<p>بازگشت یک <code>Promise</code> در حال حاضر ترجیح داده می شود, زیرا <code>sendResponse()</code> <a href="https://github.com/mozilla/webextension-polyfill/issues/16#issuecomment-296693219">از مشخصات W3C حذف می شود</a>.</p> + +<p>کتابخانه محبوب <a href="https://github.com/mozilla/webextension-polyfill">webextension-polyfill</a> قبلا تابع <code>()sendResponse</code> را از اجزای آن حذف کرده است.</p> +</div> + +<div class="blockIndicator note"> +<p>شما همچنین می توانید از یک روش <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Connection-based_messaging">مبتنی بر اتصال برای تبادل پیام استفاده کنید</a>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox brush:js">browser.runtime.onMessage.addListener(<var>listener</var>) +browser.runtime.onMessage.removeListener(<var>listener</var>) +browser.runtime.onMessage.hasListener(<var>listener</var>) +</pre> + +<p>رویکردها سه تابع دارند:</p> + +<dl> + <dt><code>addListener(<var>listener</var>)</code></dt> + <dd>به این رویداد یک listener اضلفه می کند.</dd> + <dt><code>removeListener(<var>listener</var>)</code></dt> + <dd>listening به این رویداد را متوقف می کند. یک <code><var>listener</var></code> دلیلی است برای حذف listener.</dd> + <dt><code>hasListener(<var>listener</var>)</code></dt> + <dd>بررسی می کند که حداقل یک listener برای این رویداد ثبت شده باشد. اگر listening وجود داشت <code>true</code> برمیگرداند, در غیر این صورت <code>false</code> را بر میگرداند.</dd> +</dl> + +<h2 id="addListener_syntax">addListener syntax</h2> + +<h3 id="پارامترها">پارامترها</h3> + +<dl> + <dt><code><var>listener</var></code></dt> + <dd> + <p>یک تابع برگشتی که هنگام وقوع این رویداد فراخوانی می شود. به دلایل زیر این تابع پاس داده می شود:</p> + + <dl class="reference-values"> + <dt><code><var>message</var></code></dt> + <dd><code>object</code>. خود پیام است. این یک شیء با قابلیت JSON-ifiable است.</dd> + <dt><code><var>sender</var></code></dt> + <dd>یک {{WebExtAPIRef('runtime.MessageSender')}} شیء به نمایندگی از فرستنده پیام.</dd> + <dt><code><var>sendResponse</var></code></dt> + <dd> + <p>یک تابع برای صدا زدن, حداکثر یک بار, برای ارسال پاسخ به <code><var>پیام</var></code>. این تابع یک آرگومان واحد را شامل می شود, که ممکن است هر شیء با قابلیت JSON باشد. این آرگومان به فرستنده پیام ارسال می شود.</p> + + <p>اگر بیش از یک شنونده <code>onMessage()</code> در همان سند دارید, پس فقط ممکن است یک نفر پاسخی ارسال کند.</p> + + <p>برای ارسال پاسخ همزمان, قبل از بازگشت تابع listener با <code>sendResponse()</code> تماس بگیرید.</p> + + <p>برای ارسال پاسخ به صورت ناهمزمان:</p> + + <ul> + <li>یا یک رفرنس برای آرگومان <code>()sendResponse</code> نگه دارید و مقدار <code>true</code> را برای تابع listener برگردانید. شما می توانید پس از بازگشت تابع listener، با <code>()sendResponse</code> تماس بگیرید.</li> + <li>یا یک {{jsxref("Promise")}} را از تابع listener برگردانید و promise را در صورت آماده بودن پاسخ حل کنید. این یک روش ترجیحی است.</li> + </ul> + </dd> + </dl> + + <p>تابع <code><var>listener</var></code> می تواند مقدار Boolean یا {{jsxref("Promise")}} را برگرداند.</p> + + <div class="blockIndicator note"> + <p><strong>مهم:</strong> با استفاده از تابع <code>async</code> با <code>()addListener</code> تماس نگیرید:</p> + + <pre class="brush: js example-bad">// don't do this +browser.runtime.onMessage.addListener( + async (data, sender) => { + if (data.type === 'handle_me') { return 'done'; } + } +); +</pre> + + <p>این امر باعث می شود شنونده هر پیامی را که دریافت می کند, به طور موثر همه شنوندگان دیگر را از دریافت و پردازش پیام مسدود می کند.</p> + + <p>اگر می خواهید رویکردی ناهمزمان داشته باشید, به جای این کار از یک Promise استفاده کنید, مانند مثال زیر:</p> + + <pre class="brush: js example-good">browser.runtime.onMessage.addListener( + (data, sender) => { + if (data.type === 'handle_me') { + return Promise.resolve('done'); + } + } +); +</pre> + </div> + </dd> +</dl> + +<h2 id="سازگاری_مرورگر">سازگاری مرورگر</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.api.runtime.onMessage()")}}</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Simple_example">Simple example</h3> + +<p>This content script listens for click events on the web page. If the click was on a link, it messages the background page with the target URL:</p> + +<pre class="brush: js">// content-script.js + +window.addEventListener("click", notifyExtension); + +function notifyExtension(e) { + if (e.target.tagName != "A") { + return; + } + browser.runtime.sendMessage({"url": e.target.href}); +} +</pre> + +<p>The background script listens for these messages and displays a notification using the <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/notifications">notifications</a></code> API:</p> + +<pre class="brush: js">// background-script.js + +browser.runtime.onMessage.addListener(notify); + +function notify(message) { + browser.notifications.create({ + "type": "basic", + "iconUrl": browser.extension.getURL("link.png"), + "title": "You clicked a link!", + "message": message.url + }); +} +</pre> + +<h3 id="Sending_a_synchronous_response">Sending a synchronous response</h3> + +<p>This content script sends a message to the background script when the user clicks on the page. It also logs any response sent by the background script:</p> + +<pre class="brush: js">// content-script.js + +function handleResponse(message) { + console.log(`background script sent a response: ${message.response}`); +} + +function handleError(error) { + console.log(`Error: ${error}`); +} + +function sendMessage(e) { + const sending = browser.runtime.sendMessage({content: "message from the content script"}); + sending.then(handleResponse, handleError); +} + +window.addEventListener("click", sendMessage);</pre> + +<p>Here is a version of the corresponding background script, that sends a response synchronously, from inside in the listener:</p> + +<pre class="brush: js">// background-script.js + +function handleMessage(request, sender, sendResponse) { + console.log(`content script sent a message: ${request.content}`); + sendResponse({response: "response from background script"}); +} + +browser.runtime.onMessage.addListener(handleMessage);</pre> + +<p>And here is another version which uses {{jsxref("Promise.resolve()")}}:</p> + +<pre class="brush: js">// background-script.js + +function handleMessage(request, sender, sendResponse) { + console.log(`content script sent a message: ${request.content}`); + return Promise.resolve({response: "response from background script"}); +} + +browser.runtime.onMessage.addListener(handleMessage);</pre> + +<h3 id="Sending_an_asynchronous_response_using_sendResponse">Sending an asynchronous response using sendResponse</h3> + +<p>Here is an alternative version of the background script from the previous example. It sends a response asynchronously after the listener has returned. Note <code>return true;</code> in the listener: this tells the browser that you intend to use the <code>sendResponse</code> argument after the listener has returned.</p> + +<pre class="brush: js">// background-script.js + +function handleMessage(request, sender, sendResponse) { + console.log(`content script sent a message: ${request.content}`); + setTimeout(() => { + sendResponse({response: "async response from background script"}); + }, 1000); + return true; +} + +browser.runtime.onMessage.addListener(handleMessage); +</pre> + +<h3 id="Sending_an_asynchronous_response_using_a_Promise">Sending an asynchronous response using a Promise</h3> + +<p>This content script gets the first <code><a></code> link on the page and sends a message asking if the link's location is bookmarked. It expects to get a Boolean response (<code>true</code> if the location is bookmarked, <code>false</code> otherwise):</p> + +<pre class="brush: js">// content-script.js + +const firstLink = document.querySelector("a"); + +function handleResponse(isBookmarked) { + if (isBookmarked) { + firstLink.classList.add("bookmarked"); + } +} + +browser.runtime.sendMessage({ + url: firstLink.href +}).then(handleResponse);</pre> + +<p>Here is the background script. It uses <code>{{WebExtAPIRef("bookmarks.search()")}}</code> to see if the link is bookmarked, which returns a {{jsxref("Promise")}}:</p> + +<pre class="brush: js">// background-script.js + +function isBookmarked(message, sender, response) { + return browser.bookmarks.search({ + url: message.url + }).then(function(results) { + return results.length > 0; + }); +} + +browser.runtime.onMessage.addListener(isBookmarked);</pre> + +<p>If the asynchronous handler doesn't return a Promise, you can explicitly construct a promise. This rather contrived example sends a response after a 1-second delay, using <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">Window.setTimeout()</a></code>:</p> + +<pre class="brush: js">// background-script.js + +function handleMessage(request, sender, sendResponse) { + return new Promise(resolve => { + setTimeout( () => { + resolve({response: "async response from background script"}); + }, 1000); + }); +} + +browser.runtime.onMessage.addListener(handleMessage);</pre> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/runtime#event-onMessage"><code>chrome.runtime</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json"><code>runtime.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre class="brush: js">// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/fa/mozilla/add-ons/webextensions/index.html b/files/fa/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..49530e6d87 --- /dev/null +++ b/files/fa/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,97 @@ +--- +title: WebExtensions +slug: Mozilla/Add-ons/WebExtensions +tags: + - افزونه + - افزونه_فایرفاکس + - برنامه_نویسی + - توسعه +translation_of: Mozilla/Add-ons/WebExtensions +--- +<div dir="rtl">{{AddonSidebar}}</div> + +<div dir="rtl"><strong>افزونه ها</strong> قادر به بسط و تغییر قابلیت یک مرورگر می باشند. افزونه ها، برای فایرفاکس، با به کارگیری </div> + +<div dir="rtl">وب-گستر API، که یک سیستم مرورگر-متقابل جهت توسعه افزونه هاست، ساخته می شود. برای یک گسترش بزرگ، سیستم با افزونه API یا <a class="external-icon external" href="https://developer.chrome.com/extensions">extension API</a> مورد پشتیبانی گوگل و اوپرا و <a href="https://browserext.github.io/browserext/">W3C Draft Community Group</a> سازگار می باشد. افزونه های نوشته شده برای این مرورگرها، اغلب بیشتر مواقع در فایرفاکس یا <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> ، تنها با اندکی تغییر، اجرا خواهند شد. همچنین این API دارای سازگاری کامل با <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocess Firefox</a> است.</div> + +<div dir="rtl">اگر شما ایده ها یا پرسش هایی داشته، یا برای رها شدن از افزونه های وراثتی، جهت به کارگیری وب-افزونه ها، نیازمند کمک باشید،می توانید در <a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> یا <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> در <a href="https://wiki.mozilla.org/IRC">IRC</a> به تنیجه برسید.</div> + +<p dir="rtl"> </p> + +<div class="row topicpage-table" dir="rtl"> +<div class="section"> +<h3 id="آغاز_کار">آغاز کار</h3> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/What_are_WebExtensions"> افزونه چیست ؟</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_first_WebExtension">اولین افزونه شما</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">دومین افزونه شما</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">تشریح یک افزونه</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Examples">افزونه های نمونه </a></li> +</ul> + +<h3 id="چگونه">چگونه</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">جلوگیری از ترافیک HTTP</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">تغییر محتوای وب</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">اضافه کردن دکمه در منوی ابزار</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">پیاده سازی صفحه تنظیمات</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">کارکدن با کلیپ بورد</a></li> + <li><a href="/fa/docs/">دستکاری کردن برگه های مرورگر</a></li> + <li><a href="/fa/docs/">دسترسی و تغییر لیست علاقه مندی ها</a></li> + <li><a href="/fa/docs/">دسترسی و تغییر کوکی ها</a></li> +</ul> + +<h3 id="مفاهیم">مفاهیم</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">بررسی اجمالی JavaScript API</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_interface_components">کامپوننت رابط کاربری</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Content scripts</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">تطابق الگوها</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">بین المللی کردن</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">راهبرد امنیت محتوا</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">بومی سازی پیام ها</a></li> +</ul> + +<h3 id="انتقال">انتقال</h3> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">اتقال افزونه گوگل کروم</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">انتقال یک افزونه قدیمی فایرفاکس</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">جا نمایی افزونه</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">مقایسه به Add-on SDK</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">مقایسه با افزونه های XUL/XPCOM</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">ناسازگاری ها با Chrome</a></li> +</ul> + +<h3 id="نحوه_کار_فایرفاکس">نحوه کار فایرفاکس</h3> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">نصب</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Debugging">اشکال زدایی</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">شروع کار با web-ext</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">منابع کامند web-ext</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">WebExtensionها و آی دی Add-on</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">انتشار WebExtension شما</a></li> +</ul> +</div> + +<div class="section"> +<h3 id="منابع">منابع</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">بررسی اجمالی JavaScript API</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">جدول سازگاری مرورگرهای وب برای JavaScript API</a></li> +</ul> + +<h4 id="JavaScript_APIs">JavaScript APIs</h4> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}</div> + +<h4 id="Manifest_keys">Manifest keys</h4> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div> +</div> +</div> diff --git a/files/fa/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/fa/mozilla/add-ons/webextensions/your_first_webextension/index.html new file mode 100644 index 0000000000..b3fcdaaa40 --- /dev/null +++ b/files/fa/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -0,0 +1,152 @@ +--- +title: اولین extension شما +slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +<div>{{AddonSidebar}}</div> + +<p dir="rtl">در این مقاله ما از ابتدا تا انتهای ساخت یک افزونه برای فایر فاکس را با هم مرور میکنیم. این <span id="result_box" lang="fa"><span>افزونه فقط یک </span></span> border <span lang="fa"><span> قرمز را به هر صفحه ای که از «mozilla.org» یا هر کدام از زیر دامنه های آن فراخوانی شده باشد را اضافه میکند .</span></span></p> + +<p>منبع کد این مثال بر روی گیت هاب: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p> + +<p dir="rtl">در ابتدا شما به فایرفاکس نسخه 45 یا بالاتر نیاز دارید.</p> + +<h2 id="نوشتن_extension">نوشتن extension</h2> + +<p>یک فولدر جدید ایجاد کنید و به آن بروید. به عنوان مثال ، در خط فرمان / ترمینال خود را اینگونه انجام می دهید:</p> + +<pre class="brush: bash">mkdir borderify +cd borderify</pre> + +<h3 id="manifest.json">manifest.json</h3> + +<p><font>اکنون یک فایل جدید با نام "manifest.json" را مستقیماً در فولدر </font> "borderify" <font> ایجاد کنید.<span> </span>مطالب زیر را به آن بدهید:</font></p> + +<pre class="brush: json">{ + + "manifest_version": 2, + "name": "Borderify", + "version": "1.0", + + "description": "Adds a red border to all webpages matching mozilla.org.", + + "icons": { + "48": "icons/border-48.png" + }, + + "content_scripts": [ + { + "matches": ["*://*.mozilla.org/*"], + "js": ["borderify.js"] + } + ] + +}</pre> + +<ul> + <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>سه کلید اول:<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/manifest_version" style="margin: 0px; padding: 0px; border: 0px; color: rgb(40, 92, 118); text-decoration: none;">manifest_version</a></code><font><font>،<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/name" style="margin: 0px; padding: 0px; border: 0px; color: rgb(40, 92, 118); text-decoration: none;">name</a></code><font><font>، و<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/version" style="margin: 0px; padding: 0px; border: 0px; color: rgb(40, 92, 118); text-decoration: none;">version</a></code><font><font>، اجباری است و شامل داده های اصلی برای </font></font> extension <font><font> است.</font></font></li> + <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/description" style="margin: 0px; padding: 0px; border: 0px; color: rgb(40, 92, 118); text-decoration: none;">description</a></code><font><font><span> </span>اختیاری است ، اما توصیه می شود: در </font></font> Add-ons Manager <font><font> نمایش داده می شود.</font></font></li> + <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/icons" style="margin: 0px; padding: 0px; border: 0px; color: rgb(40, 92, 118); text-decoration: none;">icons</a></code><font><font><span> </span>اختیاری است ، اما توصیه می شود: به شما امکان می دهد یک نماد را برای </font></font> extension <font><font>مشخص کنید ، که در </font></font> Add-ons Manager <font><font> نشان داده خواهد شد.</font></font></li> +</ul> + +<p><font><font>جالب ترین نکته اینجاست که<span> </span></font></font><code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/content_scripts" style="margin: 0px; padding: 0px; border: 0px; color: rgb(40, 92, 118); text-decoration: none;">content_scripts</a></code><font><font> به Firefox می گوید یک اسکریپت را در صفحات وب بارگذاری کنید که URL آن با الگوی خاصی مطابقت دارد.<span> </span></font><font>در این حالت ، ما از Firefox می خواهیم یک اسکریپت با نام "borderify.js" را در تمام صفحات HTTP یا HTTPS که از "mozilla.org" یا هر یک از زیر دامنه های آن استفاده می شود بارگیری کند.</font></font></p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts"><font><font>در مورد اسکریپت های محتوا بیشتر بدانید.</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns"><font><font>درباره الگوهای مطابقت بیشتر بدانید</font></font></a><font><font><span> </span>.</font></font></li> +</ul> + +<div class="warning"> +<p><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID"><font><font>در بعضی مواقع باید یک ID برای extension خود تعیین کنید</font></font></a><font><font><span> </span>.<span> </span></font><font>اگر نیاز به </font></font> add-on ID <font><font> دارید</font></font> , کلید <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">برنامه ها</a></code> را در <code>manifest.json</code> قرار دهید و ویژگی <code>gecko.id</code> آن را تنظیم کنید:</p> + +<pre class="brush: json">"applications": { + "gecko": { + "id": "borderify@example.com" + } +}</pre> +</div> + +<h3 id="iconsborder-48.png">icons/border-48.png</h3> + +<p>extension<font> باید یک نماد داشته باشد.<span> تا در کنار لیست </span></font> extension ها در Add-ons Manager <font> نمایش داده شود.<span> </span>manifest.json ما قول داده است كه ما در "</font> icons/border<font>-48.png" نماد داشته باشيم.</font></p> + +<p><font><font>فولدر </font></font>"icons" <font><font> را مستقیماً در فولدر </font></font> "borderify" <font><font> ایجاد کنید.<span> </span></font><font>نمادی را در آنجا با نام "border-48.png" ذخیره کنید.<span> </span></font><font>می توانید<span> </span></font></font><a class="external" href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png" rel="noopener"><font><font>از نمونه</font></font></a><font><font><span> </span>این مورد که از نماد Google Material Design طراحی شده است و تحت شرایط<span> </span></font></font><a class="external" href="https://creativecommons.org/licenses/by-sa/3.0/" rel="noopener"><font><font>مجوز Creative Commons Attribution-ShareAlike</font></font></a><font><font><span> </span>استفاده می شود استفاده کنید.</font></font></p> + +<p><font><font>اگر می خواهید نماد خود را تهیه کنید ، باید 48x48 پیکسل باشد.<span> </span></font><font>شما همچنین می توانید یک نماد پیکسل 96x96 را برای نمایشگرهای با وضوح بالا تهیه کنید ، و اگر این کار را انجام دهید به عنوان<span> </span></font></font><code>96</code><font><font>خاصیت<span> </span></font></font><code>icons</code> object <font><font> در manifest.json مشخص می شود:</font></font></p> + +<pre class="brush: json">"icons": { + "48": "icons/border-48.png", + "96": "icons/border-96.png" +}</pre> + +<p><font>روش دیگر ، شما می توانید یک فایل SVG را در اینجا تهیه کنید ، و به درستی اندازه گیری می شود.<span> </span></font><font>(اگرچه: اگر از SVG استفاده می کنید و نماد شما متن را شامل می شود ، ممکن است بخواهید از ابزار "تبدیل به مسیر" ویرایشگر SVG خود برای صاف کردن متن استفاده کنید ، به طوری که با اندازه / موقعیت ثابت سازگار باشد.</font></p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/icons"><font><font>درباره مشخص کردن نمادها بیشتر بدانید.</font></font></a></li> +</ul> + +<h3 id="borderify.js">borderify.js</h3> + +<p><font>سرانجام ، فایلی به نام "borderify.js" را مستقیماً در فولدر "</font>borderify<font>" ایجاد کنید.<span> </span>این محتوا را به آن بدهید:</font></p> + +<pre class="brush: js">document.body.style.border = "5px solid red";</pre> + +<p><font><font>این اسکریپت در صفحات مطابقت با الگوی ارائه شده در<span> </span></font></font><code>content_scripts</code><font><font>کلید manifest.json<span> </span></font><font>بارگذاری می شود<span> </span></font><font>.<span> </span></font><font>درست مانند اسکریپت هایی که توسط خود صفحه بارگذاری شده است ، اسکریپت دسترسی مستقیم به اسناد دارد.</font></font></p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts"><font><font>در مورد اسکریپت های محتوا بیشتر بدانید.</font></font></a></li> +</ul> + +<h2 id="امتحان_کردن"><font><font>امتحان کردن</font></font></h2> + +<p><span>ابتدا بررسی کنید که فایل های مناسب را در فولدرهای مناسب دارید:</span></p> + +<pre>borderify/ + icons/ + border-48.png + borderify.js + manifest.json</pre> + +<h3 id="نصب">نصب</h3> + +<p> در فایرفاکس : صفحه <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/about:debugging">about:debugging</a> را باز کنید، روی "This Firefox" (در نسخه های جدیدتر فایرفاکس) کلیک کنید، روی "Load Temporary Add-on" کلیک کنید و یکی از فایل ها را از آدرس اصلی extension خود انتخاب کنید</p> + +<p>{{EmbedYouTube("cer9EUKegG4")}}</p> + +<p>extension اکنون نصب شده است و تا زمانی که فایرفاکس را مجدداً راه اندازی کنید ، باقی خواهد ماند.</p> + +<p><font><font>روش دیگر ، می توانید با استفاده از<span> </span></font><font>ابزار<span> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext"><font><font>web-ext</font></font></a><font><font><span> </span>، پسوند را از خط فرمان اجرا<span> </span></font><font>کنید.</font></font></p> + +<h3 id="آزمایش_کردن">آزمایش کردن</h3> + +<p><span>اکنون سعی کنید از صفحهای تحت "mozilla.org" بازدید کنید</span>، <span>و باید </span> border <span> قرمز را در صفحه مشاهده کنید:</span></p> + +<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p> + +<div class="note"> +<p><font>هر چند آن را در addons.mozilla.org امتحان نکنید!<span> </span></font><font>اسکریپت های محتوا در حال حاضر در آن دامنه مسدود شده اند</font> .</p> +</div> + +<p><font>کمی آزمایش کنید.<span> </span></font><font>اسکریپت محتوا را تغییر دهید تا رنگ حاشیه تغییر کند ، یا کاری دیگر روی محتوای صفحه انجام دهید.<span> </span>اسکریپت محتوا را ذخیره کنید ، سپس فایل های </font> extension <font> را با کلیک کردن روی دکمه </font> "Reload" <font> در </font> about:debugging <font> بارگیری مجدد کنید.<span> </span>می توانید تغییرات را بلافاصله مشاهده کنید:</font></p> + +<p>{{EmbedYouTube("NuajE60jfGY")}}</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox"><font><font>درباره بارگیری برنامه های افزودنی بیشتر بدانید</font></font></a></li> +</ul> + +<h2 id="بسته_بندی_و_انتشار"><font><font>بسته بندی و انتشار</font></font></h2> + +<p><font><font>برای استفاده افراد دیگر از </font></font> extension <font><font> شما ، باید آن را بسته بندی کرده و برای امضا به موزیلا ارسال کنید.<span> </span></font><font>برای کسب اطلاعات بیشتر در مورد آن ، به<span> </span></font></font> <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Publishing your extension"</a><font><font><span> </span>مراجعه کنید.</font></font></p> + +<h2 id="بعدی_چیست؟">بعدی چیست؟</h2> + +<p><span>اکنون شما یک ایده از روند توسعه یک WebExtension برای Firefox دارید ، سعی کنید:</span></p> + +<ul> + <li> <a href="https://wiki.developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_second_WebExtension"><font><font>یک extension پیچیده تر بنویسید</font></font></a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension"><font><font>در مورد آناتومی یک extension بیشتر بخوانید</font></font></a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Examples"><font><font>مثال های extension را کاوش کنید</font></font></a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_"><font><font>اطلاعاتی را برای توسعه، آزمایش و انتشار extension خود بیابید.</font></font></a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_#Continue_your_learning_experience">یادگیری خود را بیشتر کنید</a>.</li> +</ul> diff --git a/files/fa/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/fa/mozilla/add-ons/webextensions/your_second_webextension/index.html new file mode 100644 index 0000000000..aff7ba0259 --- /dev/null +++ b/files/fa/mozilla/add-ons/webextensions/your_second_webextension/index.html @@ -0,0 +1,458 @@ +--- +title: اکستنشن دوم شما +slug: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +--- +<div> +<p>{{AddonSidebar}}</p> + +<p dir="rtl">اگر شما مقاله <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">اولین اکستنشن خود</a> را خوانده اید، حالا ایده ای از چگونگی نوشتن یک اکستنشن به شما داده می شود. در این مقاله ما اکستنشن کمی پیچیده تری را که در ان از تعدادی از API ها استفاده شده، می نویسیم.</p> + +<p>The extension adds a new button to the Firefox toolbar. When the user clicks the button, we display a popup enabling them to choose an animal. Once they choose an animal, we'll replace the current page's content with a picture of the chosen animal.</p> + +<p>To implement this, we will:</p> + +<ul> + <li><strong>define a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a>, which is a button attached to the Firefox toolbar</strong>.<br> + For the button we'll supply: + <ul> + <li>an icon, called "beasts-32.png"</li> + <li>a popup to open when the button is pressed. The popup will include HTML, CSS, and JavaScript.</li> + </ul> + </li> + <li><strong>define an icon for the extension</strong>, called "beasts-48.png". This will be shown in the Add-ons Manager.</li> + <li><strong>write a content script, "beastify.js" that will be injected into web pages</strong>.<br> + This is the code that will actually modify the pages.</li> + <li><strong>package some images of the animals, to replace images in the web page</strong>.<br> + We'll make the images "web accessible resources" so the web page can refer to them.</li> +</ul> + +<p>You could visualise the overall structure of the extension like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13671/Untitled-1.png" style="display: block; height: 1200px; margin-left: auto; margin-right: auto; width: 860px;"></p> + +<p>It's a simple extension, but shows many of the basic concepts of the WebExtensions API:</p> + +<ul> + <li>adding a button to the toolbar</li> + <li>defining a popup panel using HTML, CSS, and JavaScript</li> + <li>injecting content scripts into web pages</li> + <li>communicating between content scripts and the rest of the extension</li> + <li>packaging resources with your extension that can be used by web pages</li> +</ul> + +<p>You can find <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">complete source code for the extension on GitHub</a>.</p> + +<p>To write this extension, you'll need Firefox 45 or newer.</p> + +<h2 id="Writing_the_extension">Writing the extension</h2> + +<p>Create a new directory and navigate to it:</p> + +<pre class="brush: bash">mkdir beastify +cd beastify</pre> + +<h3 id="manifest.json">manifest.json</h3> + +<p>Now create a new file called "manifest.json", and give it the following contents:</p> + +<pre class="brush: json">{ + + "manifest_version": 2, + "name": "Beastify", + "version": "1.0", + + "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#beastify", + "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify", + "icons": { + "48": "icons/beasts-48.png" + }, + + "permissions": [ + "activeTab" + ], + + "browser_action": { + "default_icon": "icons/beasts-32.png", + "default_title": "Beastify", + "default_popup": "popup/choose_beast.html" + }, + + "web_accessible_resources": [ + "beasts/frog.jpg", + "beasts/turtle.jpg", + "beasts/snake.jpg" + ] + +} +</pre> + +<ul> + <li>The first three keys: <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name">name</a></code>, and <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version">version</a></code>, are mandatory and contain basic metadata for the extension.</li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/description">description</a></code> and <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url">homepage_url</a></code> are optional, but recommended: they provide useful information about the extension.</li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> is optional, but recommended: it allows you to specify an icon for the extension, that will be shown in the Add-ons Manager.</li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> lists permissions the extension needs. We're just asking for the <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission"><code>activeTab</code> permission</a> here.</li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> specifies the toolbar button. We're supplying three pieces of information here: + <ul> + <li><code>default_icon</code> is mandatory, and points to the icon for the button</li> + <li><code>default_title</code> is optional, and will be shown in a tooltip</li> + <li><code>default_popup</code> is used if you want a popup to be shown when the user clicks the button. We do, so we've included this key and made it point to an HTML file included with the extension.</li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a></code> lists files that we want to make accessible to web pages. Since the extension replaces the content in the page with images we've packaged with the extension, we need to make these images accessible to the page.</li> +</ul> + +<p>Note that all paths given are relative to manifest.json itself.</p> + +<h3 id="The_icon">The icon</h3> + +<p>The extension should have an icon. This will be shown next to the extension's listing in the Add-ons Manager (you can open this by visiting the URL "about:addons"). Our manifest.json promised that we would have an icon for the toolbar at "icons/beasts-48.png".</p> + +<p>Create the "icons" directory and save an icon there named "beasts-48.png". You could use <a href="https://github.com/mdn/webextensions-examples/blob/master/beastify/icons/beasts-48.png">the one from our example</a>, which is taken from the <a href="https://www.iconfinder.com/iconsets/free-retina-icon-set">Aha-Soft’s Free Retina iconset</a>, and used under the terms of its <a href="http://www.aha-soft.com/free-icons/free-retina-icon-set/">license</a>.</p> + +<p>If you choose to supply your own icon, It should be 48x48 pixels. You could also supply a 96x96 pixel icon, for high-resolution displays, and if you do this it will be specified as the <code>96</code> property of the <code>icons</code> object in manifest.json:</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"icons":</span> <span class="punctuation token">{</span> + <span class="key token">"48":</span> <span class="string token">"icons/beasts-48.png"</span><span class="punctuation token">,</span> + <span class="key token">"96":</span> <span class="string token">"icons/beasts-96.png"</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="The_toolbar_button">The toolbar button</h3> + +<p>The toolbar button also needs an icon, and our manifest.json promised that we would have an icon for the toolbar at "icons/beasts-32.png".</p> + +<p>Save an icon named "beasts-32.png" in the "icons" directory. You could use <a href="https://github.com/mdn/webextensions-examples/blob/master/beastify/icons/beasts-32.png">the one from our example</a>, which is taken from the <a href="http://www.iconbeast.com/free">IconBeast Lite icon set</a> and used under the terms of its <a href="http://www.iconbeast.com/faq/">license</a>.</p> + +<p>If you don't supply a popup, then a click event is dispatched to your extension when the user clicks the button. If you do supply a popup, the click event is not dispatched, but instead, the popup is opened. We want a popup, so let's create that next.</p> + +<h3 id="The_popup">The popup</h3> + +<p>The function of the popup is to enable the user to choose one of three beasts.</p> + +<p>Create a new directory called "popup" under the extension root. This is where we'll keep the code for the popup. The popup will consist of three files:</p> + +<ul> + <li><strong><code>choose_beast.html</code></strong> defines the content of the panel</li> + <li><strong><code>choose_beast.css</code></strong> styles the content</li> + <li><strong><code>choose_beast.js</code></strong> handles the user's choice by running a content script in the active tab</li> +</ul> + +<pre class="brush: bash">mkdir popup +cd popup +touch choose_beast.html choose_beast.css choose_beast.js +</pre> + +<h4 id="choose_beast.html">choose_beast.html</h4> + +<p>The HTML file looks like this:</p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + <head> + <meta charset="utf-8"> + <link rel="stylesheet" href="choose_beast.css"/> + </head> + +<body> + <div id="popup-content"> + <div class="button beast">Frog</div> + <div class="button beast">Turtle</div> + <div class="button beast">Snake</div> + <div class="button reset">Reset</div> + </div> + <div id="error-content" class="hidden"> + <p>Can't beastify this web page.</p><p>Try a different page.</p> + </div> + <script src="choose_beast.js"></script> +</body> + +</html> +</pre> + +<p>We have a <code><a href="/en-US/docs/Web/HTML/Element/div"><div></a></code> element with an ID of <code>"popup-content"</code> that contains an element for each animal choice. We have another <code><div></code> with an ID of <code>"error-content"</code> and a class <code>"hidden"</code>. We'll use that in case there's a problem initializing the popup.</p> + +<p>Note that we include the CSS and JS files from this file, just like a web page.</p> + +<h4 id="choose_beast.css">choose_beast.css</h4> + +<p>The CSS fixes the size of the popup, ensures that the three choices fill the space, and gives them some basic styling. It also hides elements with <code>class="hidden"</code>: this means that our <code>"error-content"</code> <code><div></code> will be hidden by default.</p> + +<pre class="brush: css">html, body { + width: 100px; +} + +.hidden { + display: none; +} + +.button { + margin: 3% auto; + padding: 4px; + text-align: center; + font-size: 1.5em; + cursor: pointer; +} + +.beast:hover { + background-color: #CFF2F2; +} + +.beast { + background-color: #E5F2F2; +} + +.reset { + background-color: #FBFBC9; +} + +.reset:hover { + background-color: #EAEA9D; +} + +</pre> + +<h4 id="choose_beast.js">choose_beast.js</h4> + +<p>Here's the JavaScript for the popup:</p> + +<pre class="brush: js">/** + * CSS to hide everything on the page, + * except for elements that have the "beastify-image" class. + */ +const hidePage = `body > :not(.beastify-image) { + display: none; + }`; + +/** + * Listen for clicks on the buttons, and send the appropriate message to + * the content script in the page. + */ +function listenForClicks() { + document.addEventListener("click", (e) => { + + /** + * Given the name of a beast, get the URL to the corresponding image. + */ + function beastNameToURL(beastName) { + switch (beastName) { + case "Frog": + return browser.extension.getURL("beasts/frog.jpg"); + case "Snake": + return browser.extension.getURL("beasts/snake.jpg"); + case "Turtle": + return browser.extension.getURL("beasts/turtle.jpg"); + } + } + + /** + * Insert the page-hiding CSS into the active tab, + * then get the beast URL and + * send a "beastify" message to the content script in the active tab. + */ + function beastify(tabs) { + browser.tabs.insertCSS({code: hidePage}).then(() => { + let url = beastNameToURL(e.target.textContent); + browser.tabs.sendMessage(tabs[0].id, { + command: "beastify", + beastURL: url + }); + }); + } + + /** + * Remove the page-hiding CSS from the active tab, + * send a "reset" message to the content script in the active tab. + */ + function reset(tabs) { + browser.tabs.removeCSS({code: hidePage}).then(() => { + browser.tabs.sendMessage(tabs[0].id, { + command: "reset", + }); + }); + } + + /** + * Just log the error to the console. + */ + function reportError(error) { + console.error(`Could not beastify: ${error}`); + } + + /** + * Get the active tab, + * then call "beastify()" or "reset()" as appropriate. + */ + if (e.target.classList.contains("beast")) { + browser.tabs.query({active: true, currentWindow: true}) + .then(beastify) + .catch(reportError); + } + else if (e.target.classList.contains("reset")) { + browser.tabs.query({active: true, currentWindow: true}) + .then(reset) + .catch(reportError); + } + }); +} + +/** + * There was an error executing the script. + * Display the popup's error message, and hide the normal UI. + */ +function reportExecuteScriptError(error) { + document.querySelector("#popup-content").classList.add("hidden"); + document.querySelector("#error-content").classList.remove("hidden"); + console.error(`Failed to execute beastify content script: ${error.message}`); +} + +/** + * When the popup loads, inject a content script into the active tab, + * and add a click handler. + * If we couldn't inject the script, handle the error. + */ +browser.tabs.executeScript({file: "/content_scripts/beastify.js"}) +.then(listenForClicks) +.catch(reportExecuteScriptError); + +</pre> + +<p>The place to start here is line 96. The popup script executes a content script in the active tab as soon as the popup is loaded, using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">browser.tabs.executeScript()</a></code> API. If executing the content script is successful, then the content script will stay loaded in the page until the tab is closed or the user navigates to a different page.</p> + +<p>A common reason the <code>browser.tabs.executeScript()</code> call might fail is that you can't execute content scripts in all pages. For example, you can't execute them in privileged browser pages like about:debugging, and you can't execute them on pages in the <a href="https://addons.mozilla.org/">addons.mozilla.org</a> domain. If it does fail, <code>reportExecuteScriptError()</code> will hide the <code>"popup-content"</code> <code><div></code>, show the <code>"error-content"</code> <code><div></code>, and log an error to the <a href="/en-US/Add-ons/WebExtensions/Debugging">console</a>.</p> + +<p>If executing the content script is successful, we call <code>listenForClicks()</code>. This listens for clicks on the popup.</p> + +<ul> + <li>If the click was on a button with <code>class="beast"</code>, then we call <code>beastify()</code>.</li> + <li>If the click was on a button with <code>class="reset"</code>, then we call <code>reset()</code>.</li> +</ul> + +<p>The <code>beastify()</code> function does three things:</p> + +<ul> + <li>map the button clicked to a URL pointing to an image of a particular beast</li> + <li>hide the page's whole content by injecting some CSS, using the <code><a href="/en-US/Add-ons/WebExtensions/API/tabs/insertCSS">browser.tabs.insertCSS()</a></code> API</li> + <li>send a "beastify" message to the content script using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">browser.tabs.sendMessage()</a></code> API, asking it to beastify the page, and passing it the URL to the beast image.</li> +</ul> + +<p>The <code>reset()</code> function essentially undoes a beastify:</p> + +<ul> + <li>remove the CSS we added, using the <code><a href="/en-US/Add-ons/WebExtensions/API/tabs/removeCSS">browser.tabs.removeCSS()</a></code> API</li> + <li>send a "reset" message to the content script asking it to reset the page.</li> +</ul> + +<h3 id="The_content_script">The content script</h3> + +<p>Create a new directory, under the extension root, called "content_scripts" and create a new file in it called "beastify.js", with the following contents:</p> + +<pre class="brush: js">(function() { + /** + * Check and set a global guard variable. + * If this content script is injected into the same page again, + * it will do nothing next time. + */ + if (window.hasRun) { + return; + } + window.hasRun = true; + + /** + * Given a URL to a beast image, remove all existing beasts, then + * create and style an IMG node pointing to + * that image, then insert the node into the document. + */ + function insertBeast(beastURL) { + removeExistingBeasts(); + let beastImage = document.createElement("img"); + beastImage.setAttribute("src", beastURL); + beastImage.style.height = "100vh"; + beastImage.className = "beastify-image"; + document.body.appendChild(beastImage); + } + + /** + * Remove every beast from the page. + */ + function removeExistingBeasts() { + let existingBeasts = document.querySelectorAll(".beastify-image"); + for (let beast of existingBeasts) { + beast.remove(); + } + } + + /** + * Listen for messages from the background script. + * Call "beastify()" or "reset()". + */ + browser.runtime.onMessage.addListener((message) => { + if (message.command === "beastify") { + insertBeast(message.beastURL); + } else if (message.command === "reset") { + removeExistingBeasts(); + } + }); + +})(); +</pre> + +<p>The first thing the content script does is to check for a global variable <code>window.hasRun</code>: if it's set the script returns early, otherwise it sets <code>window.hasRun</code> and continues. The reason we do this is that every time the user opens the popup, the popup executes a content script in the active tab, so we could have multiple instances of the script running in a single tab. If this happens, we need to make sure that only the first instance is actually going to do anything.</p> + +<p>After that, the place to start is line 40, where the content script listens for messages from the popup, using the <code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code> API. We saw above that the popup script can send two different sorts of messages: "beastify" and "reset".</p> + +<ul> + <li>if the message is "beastify", we expect it to contain a URL pointing to a beast image. We remove any beasts that might have been added by previous "beastify" calls, then construct and append an <code><a href="/en-US/docs/Web/HTML/Element/img"><img></a></code> element whose <code>src</code> attribute is set to the beast URL.</li> + <li>if the message is "reset", we just remove any beasts that might have been added.</li> +</ul> + +<h3 id="The_beasts">The beasts</h3> + +<p>Finally, we need to include the images of the beasts.</p> + +<p>Create a new directory called "beasts", and add the three images in that directory, with the appropriate names. You can get the images from <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify/beasts">the GitHub repository</a>, or from here:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11459/frog.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11461/snake.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11463/turtle.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"></p> + +<h2 id="Testing_it_out">Testing it out</h2> + +<p>First, double check that you have the right files in the right places:</p> + +<pre>beastify/ + + beasts/ + frog.jpg + snake.jpg + turtle.jpg + + content_scripts/ + beastify.js + + icons/ + beasts-32.png + beasts-48.png + + popup/ + choose_beast.css + choose_beast.html + choose_beast.js + + manifest.json</pre> + +<p>Starting in Firefox 45, you can install extensions temporarily from disk.</p> + +<p>Open "about:debugging" in Firefox, click "Load Temporary Add-on", and select your manifest.json file. You should then see the extension's icon appear in the Firefox toolbar:</p> + +<p>{{EmbedYouTube("sAM78GU4P34")}}</p> + +<p>Open a web page, then click the icon, select a beast, and see the web page change:</p> + +<p>{{EmbedYouTube("YMQXyAQSiE8")}}</p> + +<h2 id="Developing_from_the_command_line">Developing from the command line</h2> + +<p>You can automate the temporary installation step by using the <a href="/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> tool. Try this:</p> + +<pre class="brush: bash">cd beastify +web-ext run</pre> +</div> diff --git a/files/fa/mozilla/connect/index.html b/files/fa/mozilla/connect/index.html new file mode 100644 index 0000000000..e91eddc039 --- /dev/null +++ b/files/fa/mozilla/connect/index.html @@ -0,0 +1,98 @@ +--- +title: Connect with Mozilla +slug: Mozilla/Connect +translation_of: Mozilla/Connect +--- +<div class="summary"> +<p><span class="seoSummary">Enable, inspire and collaborate to make the Web the primary platform used to create experiences across all connected devices.</span></p> +</div> + + +<div> +<div class="column-container dev-program-callouts dev-program-block dev-program-first dev-program-column-wrapper"> +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Hacks_blog">Hacks blog</h2> + +<p>A key resource for people developing for the Open Web, the Mozilla Hacks blog offers news and discussion of the latest in Web technologies and browser features.</p> + +<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="https://hacks.mozilla.org/" style="white-space: normal;">Read it now </a></div> +</div> +</div> + +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Help_QA">Help Q&A</h2> + +<p>Discuss the Web and Web apps on Stack Overflow, where you can exchange ideas with other Web developers.<br> + <span class="smaller"><strong>{{anch("Developer discussions", "Search the Q&A below")}}</strong></span></p> + +<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="http://stackoverflow.com/r/mozilla" style="white-space: normal;">Mozilla Q&A on Stack Overflow </a></div> +</div> +</div> + +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Join_MDN">Join MDN</h2> + +<p>Sign up for MDN! You will able to <a href="/en-US/docs/MDN/Contribute">edit the documentation</a> here, create a profile to show off your work, and get access to features over time as we roll them out.</p> + +<div class="callout-link-wrapper"><a class="callout-link" href="/profile/edit" style="white-space: normal;">Join or log in </a></div> +</div> +</div> +</div> + +<div class="dev-program-explanation dev-program-block"> +<h2 id="Connect_with_Mozilla">Connect with Mozilla</h2> + +<p>Developers are creating the future by building services and apps for people all over the world. The goal of Mozilla Developer Relations is to help developers to use open and standardized web technologies to succeed in achieving their goals. In addition to the documentation here on MDN, we offer help and other resources towards this goal, through various channels. We invite you to connect, learn, and share your own knowledge.</p> + +<p>We are offering help through Q&A on Stack Overflow, to solve specific technical issues and challenges you might have. We also have a newsletter keeping you informed on the latest happenings in the web scene around web apps and more. <a href="https://marketplace.firefox.com/developers/#newsletter-signup">Subscribe to the Apps & Hacks newsletter.</a></p> + +<p>If you share Mozilla's <a href="https://www.mozilla.org/en-US/mission/">mission</a> and <a href="https://www.mozilla.org/en-US/about/manifesto/">principles</a>, and want to help spread them to more developers, check out the ways you can <a href="https://wiki.mozilla.org/Engagement/Developer_Engagement/Technical_Evangelism/Get_Involved">get involved with technical evangelism</a>, and join our <a href="https://lists.mozilla.org/listinfo/evangelism">evangelism discussion group</a>.</p> + +<p>We have a lot of plans and ideas for iteratively expanding our Developer Relations offerings, and we want you involved as we do so! So, <a href="http://stackoverflow.com/r/mozilla">follow the tags on Stack Overflow</a>, <a href="https://hacks.mozilla.org/">subscribe to the Hacks blog</a>, <a href="https://marketplace.firefox.com/developers/#newsletter-signup">subscribe to the newsletter, </a>and <a href="/profile/edit">sign up for an account</a>!</p> +</div> + +<div class="column-container dev-program-block"> +<div class="column-half" id="Developer_discussions"> +<h2 id="QA_on_Stack_Overflow_See_all_QA...">Q&A on Stack Overflow <a class="heading-link" href="http://stackoverflow.com/r/mozilla">See all Q&A...</a></h2> + +<p>We have Q&A to discuss challenges and issues when developing, in particular for Firefox OS and the Open Web on mobile. It's available on Stack Overflow under the easy URL <a href="http://stackoverflow.com/r/mozilla">http://stackoverflow.com/r/mozilla</a>.</p> + + +<div class="stack-form">Stack form</div> + +<h3 id="Latest_QA_Topics">Latest Q&A Topics</h3> +</div> + +<div class="column-half dev-program-hacks dev-program-block"> </div> +</div> + +<p class="dev-program-block"><img alt="Developers at a Firefox OS workshop in Madrid." src="https://mdn.mozillademos.org/files/7479/PhonesUp.jpg" style="display: block; height: 359px; margin: 0px auto; max-width: 100%; width: 720px;"></p> + +<div class="column-container dev-program-block"> +<div class="column-7 dev-program-events"> +<h2 id="Where_is_Mozilla_View_attendees_and_details_on_our_Events_page...">Where is Mozilla? <a class="heading-link" href="https://developer.mozilla.org/en/events">View attendees and details on our Events page... </a></h2> + +<p>Here is a listing of events where Mozilla representatives will be speaking. Make sure to talk to them!</p> +</div> + +<div class="column-5"> +<h2 id="Other_resources">Other resources</h2> + +<ul class="no-bullets"> + <li><a href="http://www.youtube.com/user/mozhacks">Mozilla Hacks on YouTube</a> + + <ul> + <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqIHIUUv08hBCHq1OgPKhdo0">Firefox OS videos</a></li> + <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqLZNY22xKbTEzMfYo9PXAlm">Firefox Developer Tools videos</a></li> + </ul> + </li> + <li><a href="https://twitter.com/mozhacks">@mozhacks on Twitter</a></li> +</ul> +</div> +</div> +</div> + +<p> </p> diff --git a/files/fa/mozilla/developer_guide/index.html b/files/fa/mozilla/developer_guide/index.html new file mode 100644 index 0000000000..48b6819bdf --- /dev/null +++ b/files/fa/mozilla/developer_guide/index.html @@ -0,0 +1,95 @@ +--- +title: Developer guide +slug: Mozilla/Developer_guide +tags: + - Developing Mozilla + - Landing + - Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Developer_guide +--- +<p><span class="seoSummary">راه های فراوانی برای همکاری در پروژه موزیلا وجود دارد: کد نویسی, آزمایش, بهبود روند ساخت موزیلا و ابزارها, یا کمک کردن در بهبود مستندسازی ها. </span>این راهنما اطلاعاتی را ارائه می دهد که نه فقط به شما در شروع برای همکاری با موزیلا کمک می کند بلکه ، می تواند می توانید این را به عنوان مرجعی برای مراجعات بعدی استفاده کنید حتی برای شما که با تجربه هستید.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="عنوان_های_مستند_سازی">عنوان های مستند سازی</h2> + +<dl> + <dt><a href="/en-US/docs/Introduction" title="Introduction">شروع به کار</a></dt> + <dd>راهنمای قدم به قدم مبتدیان برای همکاری با موزیلا.</dd> +</dl> + +<dl> + <dt><a class="internal" href="/en-US/docs/Developer_Guide/Source_Code" title="en-US/docs/Developer_Guide/Source_Code">کار کردن با کد های موزیلا</a></dt> + <dd>راهنمای کد ها, چگونگی دریافت کد ها,و راهنمایی کد نویسی استاندارد.</dd> + <dt><a class="internal" href="/en-US/docs/Developer_Guide/Build_Instructions" title="en-US/docs/Developer_Guide/Build_Instructions">سازو کار ساختن</a></dt> + <dd>چگونگی ساخت برنامه برای فایرفاکس ، تاندربرد ، سی مانکی و بقیه برنامه ها.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Development_process_overview" title="en-US/docs/Developer Guide/Development process overview">بازبینی روند توسعه</a></dt> + <dd>بازبینی از روند کلی توسعه کد موزیلا.</dd> + <dt><a href="/en-US/docs/Mozilla/Multiple_Firefox_Profiles" title="en-US/docs/Mozilla/Multiple_Firefox_Profiles">مدیریت چند پروفایلی</a></dt> + <dd>هنگام کار کردن با نسخه های غیر رسمی فایرفاکس, این بسیار سود مند است که چند پروفایل داشته باشید., مانند اینکه یکی برای کارهای معمولی و دیگری برای تست برنامه ها.</dd> + <dt><a class="internal" href="/en-US/docs/Mozilla_automated_testing" title="en-US/docs/Mozilla automated testing">تست اتوماتیک</a></dt> + <dd>چگونگی اجرای تست ها اتوماتیک موزیلا, و چگونگی نوشتن تست های جدید.</dd> + <dt><a class="internal" href="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch" title="en-US/docs/Getting your patch in the tree">چگونگی ارائه کردن پیوست بهبود</a></dt> + <dd>بعد از نوشتن پیوست خود,شما نیاز دارید تا پیوست را ارسال کنید. این مقاله روند بازبینی و چگونگی تایید را شرح می دهد.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Getting_documentation_updated" title="en-US/docs/Developer_Guide/Getting documentation updated">Getting documentation updated</a></dt> + <dd>How to ensure that documentation is kept up to date as you develop.</dd> + <dt><a class="internal" href="/en-US/docs/Mozilla_Modules_and_Module_Ownership" title="en-US/docs/Mozilla Modules and Module Ownership">Mozilla modules and module ownership</a></dt> + <dd>This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.</dd> + <dt><a class="internal" href="/en-US/docs/Code_snippets" title="en-US/docs/Code_snippets">Code snippets</a></dt> + <dd>Useful code samples for a wide variety of things you might need to figure out how to do.</dd> + <dt><a class="internal" href="/en-US/docs/Mozilla_Development_Strategies" title="en-US/docs/Mozilla Development Strategies">Mozilla development strategies</a></dt> + <dd>Tips for how to make the most of your time working on the Mozilla project.</dd> + <dt><a class="internal" href="/en-US/docs/Debugging" title="en-US/docs/Debugging">Debugging</a></dt> + <dd>Find helpful tips and guides for debugging Mozilla code.</dd> + <dt><a href="/en-US/docs/Performance" title="en-US/docs/Performance">Performance</a></dt> + <dd>Performance guides and utilities to help you make your code perform well (and to play nicely with others).</dd> + <dt><a class="internal" href="/en-US/docs/The_Mozilla_platform" title="en-US/docs/The Mozilla platform">The Mozilla platform</a></dt> + <dd>Information about the workings of the Mozilla platform.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object" title="en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object">Adding APIs to the navigator object</a> {{ gecko_minversion_inline("9.0") }}</dt> + <dd>How to augment the {{ domxref("window.navigator") }} object with additional APIs.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Interface_Compatibility" title="en-US/docs/Developer Guide/Interface Compatibility">Interface Compatibility</a></dt> + <dd>Guidelines for modifying scriptable and binary APIs in Mozilla.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Customizing_Firefox" title="en-US/docs/Developer Guide/Customizing Firefox">Customizing Firefox</a></dt> + <dd>Information about creating customized versions of Firefox.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Virtual_ARM_Linux_environment" title="Virtual ARM Linux environment">Virtual ARM Linux environment</a></dt> + <dd>How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.</dd> + <dt><a href="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips" title="Obsolete Build Caveats and Tips">Obsolete Build Caveats and Tips</a></dt> + <dd>A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools">Tools</h2> + +<dl> + <dt><a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a></dt> + <dd>The <a class="internal" href="/en-US/docs/Bugzilla" title="en-US/docs/Bugzilla">Bugzilla</a> database used to track issues for Mozilla projects.</dd> + <dt><a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a></dt> + <dd>Browse and search the Mozilla source code repository on the Web.</dd> + <dt><a href="http://dxr.mozilla.org/">DXR</a></dt> + <dd>Next generation of searching Mozilla's source code. In active development.</dd> + <dt><a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></dt> + <dd>The <a class="internal" href="/en-US/docs/Bonsai" title="en-US/docs/Bonsai">Bonsai</a> tool lets you find out who changed what file in the repository, and when they did it.</dd> + <dt><a class="internal" href="/en-US/docs/Mercurial" title="en-US/docs/Mercurial">Mercurial</a></dt> + <dd>The distributed version-control system used to manage Mozilla's source code.</dd> + <dt><a class="external" href="https://tbpl.mozilla.org/" title="http://tinderbox.mozilla.org/showbuilds.cgi">TBPL (Tinderbox Push Log)</a></dt> + <dd><span class="internal">Tinderbox Push Log</span> shows the status of the tree (whether or not it currently builds successfully). Check this before checking in and out, to be sure you're working with a working tree.</dd> + <dt><a class="internal" href="/en-US/docs/Crash_reporting" title="en-US/docs/Crash reporting">Crash tracking</a></dt> + <dd>Information about the <a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a> crash reporting system.</dd> + <dt><span class="external">Performance tracking: <a href="https://datazilla.mozilla.org/">Datazilla</a> and <a href="http://graphs.mozilla.org/">Graphs</a></span></dt> + <dd>See performance information for Mozilla projects.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Callgraph" title="en-US/docs/Developing Mozilla/Callgraph">Callgraph</a></dt> + <dd>A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.</dd> + <dt><a class="external" href="http://www.mozilla.org/community/developer-forums.html" title="http://www.mozilla.org/community/developer-forums.html">Developer forums</a></dt> + <dd>A topic-specific list of discussion forums where you can talk about Mozilla development issues.</dd> + <dt><a class="external" href="http://www.codefirefox.com/cheatsheet/" title="http://www.brianbondy.com/mozilla/cheatsheet/">Mozilla Platform Development Cheat Sheet</a></dt> + <dd>Brian Bondy's list of frequently referenced information for platform developers.</dd> + <dt><a class="external" href="http://www.codefirefox.com/videos/" title="http://www.brianbondy.com/mozilla/cheatsheet/">Firefox development video tutorials</a></dt> + <dd>Brian Bondy's video tutorials on Firefox development.</dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/fa/mozilla/developer_guide/source_code/index.html b/files/fa/mozilla/developer_guide/source_code/index.html new file mode 100644 index 0000000000..62d7439273 --- /dev/null +++ b/files/fa/mozilla/developer_guide/source_code/index.html @@ -0,0 +1,54 @@ +--- +title: Working with Mozilla source code +slug: Mozilla/Developer_guide/Source_Code +tags: + - Developing Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Developer_guide/Source_Code +--- +<p style="direction: rtl;">مقالات زیر به شما چگونگی هدایت و استفاده از کد ها و چگونگی تغییر در کدها بر اساس نیاز خود را یاد می دهند.</p> + +<table style="direction: rtl; text-align: right !important;"> + <tbody> + <tr> + <td colspan="2"> + <h2 dir="ltr" id="موضوعات_مستندات" style="text-align: right;">موضوعات مستندات</h2> + </td> + </tr> + <tr> + <td style="vertical-align: top; text-align: right;"> + <dl> + <dt><a class="internal" href="/En/Developer_Guide/Source_Code/Mercurial" title="En/Mozilla Source Code (Mercurial)">Getting the code from the Mercurial repository</a></dt> + <dd>If you plan to contribute to the Mozilla project, the best way to get the code is to check it out from the version control repository. Learn how to do that here.</dd> + <dt><a class="internal" href="/En/Developer_Guide/Source_Code/Downloading_Source_Archives" title="En/Mozilla Source Code (HTTP//FTP)">د</a>انلود کد ها با استفاده از HTTP یا FTP</dt> + <dd>If you want to fetch the code for a specific release of a particular Mozilla product, you may prefer to download a source code archive.</dd> + <dt><a class="internal" href="/en/Viewing_and_searching_Mozilla_source_code_online" title="En/Viewing and searching Mozilla source code online">Viewing and searching Mozilla source code online</a></dt> + <dd>Learn how to use MXR, Mozilla's online search and browsing tool for accessing the source code. This isn't a good way to download the code, but is a great way to search it.</dd> + <dt><a class="internal" href="/en/Mozilla_Source_Code_Directory_Structure" title="en/Mozilla Source Code Directory Structure">Navigating the Mozilla source code</a></dt> + <dd>Learn about the various folders in the Mozilla source tree, and how to find what you're looking for.</dd> + <dt><a class="external" href="/en/Introduction#Find_a_bug_we%27ve_identified_as_being_good_for_newcomers" title="/en/Introduction#Find_a_bug_we%27ve_identified_as_being_good_for_newcomers">Bugs for newcomers</a></dt> + <dd>If you are new to the project and want something to work on, look here.</dd> + </dl> + </td> + <td style="vertical-align: top; text-align: right;"> + <dl> + <dt><a class="internal" href="/En/Developer_Guide/Coding_Style" title="En/Mozilla Coding Style Guide">Mozilla Coding Style Guide</a></dt> + <dd>The code style guide provides information about how you should format your source code to ensure that you don't get mocked by the reviewers.</dd> + <dt style="direction: rtl;">راهنمای توسعه رابط</dt> + <dd>Guidelines and documentation for how to create and update XPCOM interfaces.</dd> + <dt><a class="link-https" href="https://wiki.mozilla.org/Build:TryServer" title="https://wiki.mozilla.org/Build:TryServer">Try Servers</a></dt> + <dd>Mozilla products build on at least three platforms. If you don't have access to them all, you can use the try servers to test your patches and make sure the tests pass.</dd> + <dt><a class="internal" href="/en/Creating_a_patch" title="En/Creating a patch">Creating a patch</a></dt> + <dd>Once you've made a change to the Mozilla code, the next step (after making sure it works) is to create a patch and submit it for review. <em>This article needs to be updated fully for Mercurial.</em></dd> + <dt><a class="external" href="http://www.mozilla.org/hacking/committer/" title="http://www.mozilla.org/hacking/committer/">Getting commit access to the source code</a></dt> + <dd>Feel ready to join the few, the proud, the committers? Find out how to get check-in access to the Mozilla code.</dd> + <dt><a class="internal" href="/En/Developer_Guide/Source_Code/CVS" title="En/Mozilla Source Code (CVS)">د</a>ریافت کد های قدیمی تر موزیلا از CVS</dt> + <dd>Older versions of the Mozilla source code, as well as the current versions of NSS and NSPR, are kept in a CVS repository. Learn about that in this article.</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p>{{ languages( { "de": "de/Entwicklerhandbuch/Quelltexte", "ja": "ja/Developer_Guide/Source_Code", "pt": "pt/Developer_Guide/Codigo_Fonte" } ) }}</p> diff --git a/files/fa/mozilla/firefox/index.html b/files/fa/mozilla/firefox/index.html new file mode 100644 index 0000000000..bda8e2d389 --- /dev/null +++ b/files/fa/mozilla/firefox/index.html @@ -0,0 +1,47 @@ +--- +title: فایرفاکس +slug: Mozilla/Firefox +translation_of: Mozilla/Firefox +--- +<div>{{FirefoxSidebar}}</div> + +<p dir="rtl"><a href="http://www.mozilla.org/en-US/firefox/">فایرفاکس</a> مرورگر وب معروف موزیلا است، برای چندین پلت فرم شامل ویندوز، مک او اس ایکس، و لینوکس برروی میزکار و دستگاههای سیار اندروید قابل دسترس است. با سازگاری زیاد، تکنولوژیهای آینده وب، ابزارهای توسعه قدرتمند، فایرفاکس بهترین انتخاب برای هم توسعه دهندگان و هم کاربران نهایی خواهد بود.</p> + +<p dir="rtl">فایرفاکس یک پروژه متن باز است؛ بیشترکدها از سوی داوطلبان کمیتههای بزرگ ما کمک شده است. شما در اینجا در مورد چگونگی شرکت در پروژه فایرفاکس یاد خواهید گرفت و همچنین پیوندهایی در مورد نحوه ساختن افزونهها برای فایرفاکس، استفاده از ابزارهای توسعه در فایرفاکس، و دیگر کارها را خواهید یافت.</p> + +<div class="summary" dir="rtl"> +<p>یادبگیرید چگونه یک افزونه برای <a href="http://www.mozilla.org/en-US/firefox/">فایرفاکس</a> بسازید، چگونه فایرفاکس خود را بسازید و توسعه دهید، و ارتباط داخلی فایرفاکس با زیرپروژههای آن چگونه کار میکند.</p> +</div> + +<ul class="card-grid" dir="rtl"> + <li><span>نکات انتشار توسعهدهنده</span> + + <p><a href="/en-US/Firefox/Releases">نکات انتشار متمرکز شده برروی توسعه دهنده</a>؛ یادبگیرید چه قابلیتهای جدیدی در هر نسخه فایرفاکس برای افزونهها و وب سایتها ارایه شده است.</p> + </li> + <li><span>مستندات پروژه</span> + <p>دریافت اطلاعات دقیق در مورد <a href="/en-US/docs/Mozilla">باطن فایرفاکس</a> و ساخت سیستم آن، بنابراین شما راه خود را در کد پیدا خواهید کرد.</p> + </li> + <li><span>راهنمای توسعه</span> + <p><a href="/en-US/docs/Developer_Guide">راهنمای توسعه</a> ما جزئیاتی در مورد اینکه چطور کد منبع فایرفاکس را تهیه و کامپایل کنید فراهم میکند، چگونه راه خود را پیدا کنید، و چگونه در پروژه شرکت کنید.</p> + </li> +</ul> + +<p dir="rtl">فایرفاکس در چهار <strong>کانال </strong>قابل دسترس است. کانال انتشار برای استفاده روزانه؛ نسخهی استفاده شده توسط میلیونها نفر در کل جهان. کانالهای دیگر برای استفاده توسط تست کنندهها، قبول کنندگان آینده، و علاقهمندان جدی است.</p> + +<ul class="card-grid" dir="rtl"> + <li class="download-box"><span>Firefox Nightly</span> + + <p>Nightly builds of Firefox for testing purposes only.</p> + <a class="download-button external ignore-external" href="http://nightly.mozilla.org/" rel="noopener">Download Nightly</a></li> + <li class="download-box"><span>Firefox Aurora</span> + <p>The newest innovations in an experimental environment.</p> + <a class="download-button external ignore-external" href="http://www.mozilla.org/en-US/firefox/channel/#aurora" rel="noopener">Download Aurora</a></li> + <li class="download-box"><span>Firefox Beta</span> + <p>The latest features in a more stable environment.</p> + <a class="download-button external ignore-external" href="http://www.mozilla.org/en-US/firefox/channel/#beta" rel="noopener">Download Beta</a></li> + <li class="download-box"><span>Firefox</span> + <p>Tried, tested, and used by millions around the world.</p> + <a class="download-button external ignore-external" href="http://www.mozilla.org/en-US/firefox/channel/#firefox" rel="noopener">Download Firefox</a></li> +</ul> + +<p dir="rtl"></p> diff --git a/files/fa/mozilla/firefox_for_android/index.html b/files/fa/mozilla/firefox_for_android/index.html new file mode 100644 index 0000000000..2cf583fac0 --- /dev/null +++ b/files/fa/mozilla/firefox_for_android/index.html @@ -0,0 +1,62 @@ +--- +title: Firefox for Android +slug: Mozilla/Firefox_for_Android +translation_of: Mozilla/Firefox_for_Android +--- +<p>For more and more people mobile devices are the primary way, or even the only way, to access the Web.<a class="link-https" href="https://www.mozilla.org/en-US/mobile/"> Firefox for Android</a> (codenamed Fennec) is an open, hackable, standards-based browser, just like the desktop Firefox.</p> + +<p>Firefox for Android constructs its user interface from native Android widgets instead of XUL: this greatly improves performance, especially startup time, and memory consumption.</p> + +<h2 id="Contribute_to_Firefox_for_Android">Contribute to Firefox for Android</h2> + +<p>The main starting point for information about the Firefox for Android project itself is the project <a class="link-https" href="https://wiki.mozilla.org/Mobile/Get_Involved">"Get Involved" page</a>.</p> + +<p>You can help us to create and improve Firefox for Android:</p> + +<ul> + <li>Help us with <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing" title="https://developer-new.mozilla.org/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing">compatibility testing</a></li> + <li>Subscribe to the <a href="https://mail.mozilla.org/listinfo/mobile-firefox-dev">mobile-firefox-dev mailing list</a></li> + <li>Contact the team over <a class="link-irc" href="irc://irc.mozilla.org/#mobile">IRC</a></li> + <li>Join in our <a class="link-https" href="https://wiki.mozilla.org/Mobile/Notes">Wednesday development meeting</a></li> + <li>Keep up to date with project news on <a class="external" href="http://planet.firefox.com/mobile/">Planet Firefox Mobile</a>, <a href="http://fennecnightly.tumblr.com/">Tumblr</a> and <a class="link-https" href="https://twitter.com/FennecNightly" title="https://twitter.com/#!/mozmobile">Twitter</a></li> + <li><a href="https://wiki.mozilla.org/Mobile/Fennec/Android" title="https://wiki.mozilla.org/Mobile/Fennec/Android">Build and hack on Firefox for Android</a> (Fennec)</li> +</ul> + +<h2 id="Develop_for_the_mobile_web">Develop for the mobile web</h2> + +<p>We've started putting together a guide to <a href="/En/Mobile" title="En/Mobile">designing web sites for mobile devices</a>.</p> + +<p>With Firefox for Android, you've got access a number of APIs that expose the underlying capabilities of the device, closing the gap between the Web and native applications:</p> + +<ul> + <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/" title="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Battery</a></li> + <li><a href="/en/DOM/Using_the_Camera_API" title="Using the Camera API">Camera</a></li> + <li><a href="/en/API/WebTelephony/Introduction_to_WebTelephony" title="Introduction to WebTelephony">WebTelephony</a></li> + <li><a href="/en/API/WebSMS/Introduction_to_WebSMS" title="Introduction to WebSMS">WebSMS</a></li> + <li><a href="/En/Using_geolocation" title="Using geolocation">Geolocation</a></li> + <li><a href="/en/Detecting_device_orientation" title="https://developer.mozilla.org/en/detecting_device_orientation">Orientation</a></li> + <li><a href="/en/WebAPI/Web_Activities" title="Web Activities">Web Activities</a></li> +</ul> + +<p>To test your web site on Firefox for Android, you can <a class="link-https" href="https://www.mozilla.org/en-US/mobile/">install it on an Android device</a> or <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">run it on your desktop using the Android Emulator</a>.</p> + +<h2 id="Build_mobile_add-ons">Build mobile add-ons</h2> + +<p><a href="/en/Extensions/Mobile" title="en/Extensions/Firefox_on_Android">Firefox for Android supports add-ons</a> using the exact same <a href="/en/Extensions" title="en/Extensions">extension system</a> used by all other Gecko-based applications. We did not invent a new add-on system. This means that building an add-on for Firefox on Android is the <a href="/en/Building_an_Extension" title="en/Building_an_Extension">same process</a> that would be used for desktop Firefox. Add-ons that work with desktop Firefox <strong>do not</strong> automatically work in Firefox on Android. The user interfaces are just too different.</p> + +<div class="note">Firefox on Android has a unique application identifier which must be used in <code>install.rdf</code>. The identifier is <code>{aa3c5121-dab2-40e2-81ca-7ea25febc110}</code></div> + +<p>Both classic restart-required and newer <a href="/en/Extensions/Bootstrapped_extensions" title="en/Extensions/Bootstrapped_extensions">restartless</a> add-on approaches are supported. Using the restartless approach is preferred whenever possible because the user experience is far superior to forcing an application restart when installing or removing an add-on.</p> + +<h3 id="Quick_Overview">Quick Overview</h3> + +<ul> + <li>There is no visible XUL in the UI, so using overlays to try to add or change UI is useless.</li> + <li>Internal code and objects, like <code>gBrowser</code>, do not exist. Look at the Firefox on Android <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js" title="http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js"><code>browser.js</code></a> file to learn about the internals. Much of the same fundamental functionality exists.</li> + <li>Services like <code>nsIPromptService</code> and <code>nsIAlertsService</code> are implemented to use native Android UI.</li> + <li>There is a simple JavaScript object, called <a href="/en/Extensions/Mobile/API/NativeWindow" title="en/Extensions/Mobile/NativeWindow"><code>NativeWindow</code></a>, that allows you to manipulate parts of the native Android UI.</li> +</ul> + +<h2 id="Get_help_with_Firefox_for_Android">Get help with Firefox for Android</h2> + +<p>Documentation and tutorials for using and troubleshooting Firefox for Android are available on the <a class="external" href="http://support.mozilla.org/mobile" title="http://support.mozilla.org/mobile">Mozilla Support website</a>.</p> diff --git a/files/fa/mozilla/index.html b/files/fa/mozilla/index.html new file mode 100644 index 0000000000..edba954db8 --- /dev/null +++ b/files/fa/mozilla/index.html @@ -0,0 +1,10 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla +--- +<p>The articles below include content about downloading and building Mozilla code. In addition, you'll find helpful articles about how the code works, how to build add-ons for Mozilla applications, and the like.</p> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/fa/mozilla/marketplace/publishing/submit/index.html b/files/fa/mozilla/marketplace/publishing/submit/index.html new file mode 100644 index 0000000000..265a1ad776 --- /dev/null +++ b/files/fa/mozilla/marketplace/publishing/submit/index.html @@ -0,0 +1,10 @@ +--- +title: Submit +slug: Mozilla/Marketplace/Publishing/Submit +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit +--- +<p>This section describes the process for submitting an app to Firefox Marketplace</p> +<p>Residual details: <a href="/en-US/Marketplace/Publishing/Submit/Submitting_an_app">https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Submitting_an_app</a></p> diff --git a/files/fa/mozilla/mobile/index.html b/files/fa/mozilla/mobile/index.html new file mode 100644 index 0000000000..669a69a9ed --- /dev/null +++ b/files/fa/mozilla/mobile/index.html @@ -0,0 +1,32 @@ +--- +title: Mobile +slug: Mozilla/Mobile +tags: + - Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Mobile +--- +<h2 id="Firefox_OS" name="Firefox_OS"><a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a></h2> + +<p>Firefox OS is an open source mobile operating system which uses Linux and Mozilla's Gecko engine to run a user interface and set of applications written entirely in HTML, CSS and JavaScript.</p> + +<p>Read about how to install Firefox OS and how to develop apps for it.</p> + +<h2 id="Firefox_for_Android" name="Firefox_for_Android"><a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a></h2> + +<p>Firefox for Android is Mozilla's mobile web browser for Android devices. It's recently been rewritten to use Android's native UI, making it faster, leaner and more responsive. It provides support for powerful APIs to access device capabilities such as the camera and telephony stack.</p> + +<p>Read about how to help create Firefox for Android, how to use its device APIs, and how to build mobile add-ons.</p> + +<h2 id="Firefox_for_iOS" name="Firefox_for_iOS"><a href="/en-US/docs/Mozilla/Firefox_for_iOS">Firefox for iOS</a></h2> + +<p>Firefox for iOS is Mozilla's upcoming mobile web browser for iOS devices. Because of AppStore restrictions, it uses the built in WebView supplied by iOS rather than Gecko.</p> + +<p>Read about how to help with Firefox for iOS, and how to integrate it with your other iOS Apps.</p> + +<h2 id="Mobile_web_development" name="Mobile_web_development"><a href="/en-US/docs/Web/Guide/Mobile">Mobile web development</a></h2> + +<p>Mobile devices have very different hardware characteristics from desktop or laptop computers, and many of the APIs used to work with them are still in the process of being standardized.</p> + +<p>Read about how to develop web sites that look good on mobile devices and take advantage of the new possibilities they offer. Learn how to make sure your web site works well on different browsers.</p> diff --git a/files/fa/mozilla/mobile/viewport_meta_tag/index.html b/files/fa/mozilla/mobile/viewport_meta_tag/index.html new file mode 100644 index 0000000000..e946b4c832 --- /dev/null +++ b/files/fa/mozilla/mobile/viewport_meta_tag/index.html @@ -0,0 +1,87 @@ +--- +title: Using the viewport meta tag to control layout on mobile browsers +slug: Mozilla/Mobile/Viewport_meta_tag +translation_of: Mozilla/Mobile/Viewport_meta_tag +--- +<h2 id="Background">Background</h2> + +<p>The browser's {{glossary("viewport")}} is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.</p> + +<p>Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.</p> + +<p>This is done because many pages are not mobile optimized, and break (or at least look bad) when rendered at a small viewport width. This virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices.</p> + +<h3 id="Enter_viewport_meta_tag">Enter viewport meta tag</h3> + +<p>However, this mechanism is not so good for pages that are optimized for narrow screens using <a href="/en-US/docs/Web/CSS/Media_Queries">media queries</a> — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques.</p> + +<p>To mitigate this problem, Apple introduced the "viewport meta tag" in Safari iOS to let web developers control the viewport's size and scale. Many other mobile browsers now support this tag, although it is not part of any web standard. Apple's <a class="external" href="https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">documentation</a> does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in Fennec. For example, Safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.</p> + +<p>Learn more about viewports in different mobile browsers in <a class="external" href="http://www.quirksmode.org/mobile/viewports2.html" title="http://www.quirksmode.org/mobile/viewports2.html">A Tale of Two Viewports</a> at quirksmode.org.</p> + +<h2 id="Viewport_basics">Viewport basics</h2> + +<p>A typical mobile-optimized site contains something like the following:</p> + +<pre><meta name="viewport" content="width=device-width, initial-scale=1"></pre> + +<p>The <code>width</code> property controls the size of the viewport. It can be set to a specific number of pixels like <code>width=600</code> or to the special value <code>device-width</code>, which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding <code>height</code> and <code>device-height</code> values, which may be useful for pages with elements that change size or position based on the viewport height.)</p> + +<p>The <code>initial-scale</code> property controls the zoom level when the page is first loaded. The <code>maximum-scale</code>, <code>minimum-scale</code>, and <code>user-scalable</code> properties control how users are allowed to zoom the page in or out.</p> + +<h2 id="A_pixel_is_not_a_pixel">A pixel is not a pixel</h2> + +<p>In recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. For example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially this caused usability and readability problems on many touch-optimized web sites. Peter-Paul Koch wrote about this problem in <a class="external" href="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html">A pixel is not a pixel</a>.</p> + +<p>On high dpi screens, pages with <code>initial-scale=1</code> will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the <a class="external" href="http://www.w3.org/TR/CSS2/syndata.html#length-units">CSS 2.1 specification</a>, which says:</p> + +<blockquote> +<p>If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.</p> +</blockquote> + +<p>For web developers, this means that the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly. But remember that not all mobile devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations.</p> + +<p>The default pixel ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor(<em>density</em>/150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.</p> + +<h2 id="Viewport_width_and_screen_width">Viewport width and screen width</h2> + +<p>Sites can set their viewport to a specific size. For example, the definition <code>"width=320, initial-scale=1"</code> can be used to fit precisely onto a small phone display in portrait mode. This can cause <a class="external" href="http://starkravingfinkle.org/blog/2010/01/perils-of-the-viewport-meta-tag/">problems</a> when the browser doesn't render a page at a larger size. To fix this, browsers will expand the viewport width if necessary to fill the screen at the requested scale. This is especially useful on large-screen devices like the iPad. (Allen Pike's <a class="external" href="http://www.antipode.ca/2010/choosing-a-viewport-for-ipad-sites/">Choosing a viewport for iPad sites</a> has a good explanation for web developers.)</p> + +<p>For pages that set an initial or maximum scale, this means the <code>width</code> property actually translates into a <em>minimum</em> viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:</p> + +<pre><meta name="viewport" content="width=500, initial-scale=1"></pre> + +<p>Other <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes">attributes</a> that are available are <code>minimum-scale</code>, <code>maximum-scale</code>, and <code>user-scalable</code>. These properties affect the initial scale and width, as well as limiting changes in zoom level.</p> + +<p>Not all mobile browsers handle orientation changes in the same way. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a <code>maximum-scale</code> value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:</p> + +<pre><meta name="viewport" content="initial-scale=1, maximum-scale=1"></pre> + +<p>Suppress the small zoom applied by many smartphones by setting the initial scale and minimum-scale values to 0.86. The result is horizontal scroll is suppressed in any orientation and the user can zoom in if they want to.</p> + +<pre><meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86"></pre> + +<h2 id="Common_viewport_sizes_for_mobile_and_tablet_devices">Common viewport sizes for mobile and tablet devices</h2> + +<p>If you want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of <a href="http://viewportsizes.com/" title="http://viewportsizes.com/">mobile and tablet viewport sizes here</a>. This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Non-normatively describes the Viewport META element</td> + </tr> + </tbody> +</table> + +<p>There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites. It would be good to have a true standard for web pages to control viewport properties. As the standardization process proceeds, we at Mozilla will work to keep up to date with any changes.</p> diff --git a/files/fa/mozilla/projects/index.html b/files/fa/mozilla/projects/index.html new file mode 100644 index 0000000000..d7e62c6882 --- /dev/null +++ b/files/fa/mozilla/projects/index.html @@ -0,0 +1,15 @@ +--- +title: Projects +slug: Mozilla/Projects +tags: + - Landing + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +<p>Here you'll find links to documentation about various Mozilla projects; these are often parts of Firefox or other products, but may also be used in other projects as well.</p> + +<p>{{ LandingPageListSubpages() }}</p> diff --git a/files/fa/mozilla/projects/nss/index.html b/files/fa/mozilla/projects/nss/index.html new file mode 100644 index 0000000000..68b4961e63 --- /dev/null +++ b/files/fa/mozilla/projects/nss/index.html @@ -0,0 +1,176 @@ +--- +title: Network Security Services +slug: Mozilla/Projects/NSS +translation_of: Mozilla/Projects/NSS +--- +<p><strong><font><font>خدمات امنیت شبکه</font></font></strong><font><font> ( </font></font><strong><font><font>NSS</font></font></strong><font><font> ) مجموعه ای از کتابخانه های طراحی شده برای پشتیبانی از توسعه کراس پلت فرم از برنامه های امنیتی و کلاینت و سرور است. </font><font>برنامه های ساخته شده با NSS می توانند از SSL v3، TLS، PKCS # 5، PKCS # 7، PKCS # 11، PKCS # 12، S / MIME، X.509 v3 و دیگر استانداردهای امنیتی پشتیبانی کند.</font></font></p> + +<p><font><font>برای اطلاعات دقیق در مورد استانداردهای پشتیبانی، به </font></font><a href="/en-US/docs/Overview_of_NSS" title="Overview_of_NSS"><font><font>بررسی اجمالی از NSS</font></font></a><font><font> . </font><font>برای یک لیست از سوالات متداول، به </font></font><a href="/en-US/docs/NSS_FAQ" title="NSS_FAQ"><font><font>پرسش های متداول</font></font></a><font><font> مراجعه کنید </font><font>.</font></font></p> + +<p><font><font>NSS تحت مجوز عمومی Mozilla موجود است. </font><font>برای اطلاعات در مورد دانلود منتشر شده NSS به عنوان فایل های tar، به </font></font><a href="https://developer.mozilla.org/en-US/docs/NSS_Sources_Building_Testing"><font><font>دانلود منبع PKI</font></font></a><font><font> مراجعه کنید </font><font>.</font></font></p> + +<p><font><font>اگر شما یک توسعه دهنده هستید و مایل به مشارکت در NSS هستید، ممکن است بخواهید که اسناد سطح بالا را </font></font><a href="/en-US/docs/An_overview_of_NSS_Internals" title="/ en-US / docs / An_overview_of_NSS_Internals"><font><font>از جزئیات داخلی NSS</font></font></a><font><font> و </font></font><a href="/en-US/docs/Getting_Started_With_NSS" title="/ en-US / docs / Getting_Started_With_NSS"><font><font>شروع به کار با NSS</font></font></a><font><font> بخوانید </font><font>.</font></font></p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation"><font><font>مستندات</font></font></h2> + + <h3 id="اطلاعات_پس_زمینه"><font><font>اطلاعات پس زمینه</font></font></h3> + + <dl> + <dt><a href="/en-US/docs/Overview_of_NSS"><font><font>بررسی NSS</font></font></a></dt> + <dd><font><font>خلاصه ای از NSS و قابلیت های آن را ارائه می دهد.</font></font></dd> + <dt><a href="/en-US/docs/NSS_FAQ"><font><font>سوالات متداول NSS</font></font></a></dt> + <dd><font><font>پرسش های اساسی در مورد NSS پاسخ می دهد.</font></font></dd> + <dt><a href="/en-US/docs/Introduction_to_Public-Key_Cryptography"><font><font>مقدمه ای بر رمزنگاری عمومی کلید</font></font></a></dt> + <dd><font><font>مفاهیم اساسی رمزنگاری عمومی کلید که NSS را پایه گذاری می کنند را توضیح می دهد.</font></font></dd> + <dt><a href="/en-US/docs/Introduction_to_SSL"><font><font>معرفی SSL</font></font></a></dt> + <dd><font><font>پروتکل SSL را معرفی می کند، از جمله اطلاعاتی درباره رمزهای رمزنگاری پشتیبانی شده توسط SSL و مراحل مربوط به دستکاری SSL.</font></font></dd> + </dl> + + <h3 id="شروع_شدن"><font><font>شروع شدن</font></font></h3> + + <dl> + <dt><a href="/en-US/docs/NSS/NSS_Releases" title="NSS_releases"><font><font>انتشارات NSS</font></font></a></dt> + <dd><font><font>این صفحه حاوی اطلاعاتی درباره نسخه های فعلی و گذشته NSS است.</font></font></dd> + <dt><a href="/en-US/docs/NSS_Sources_Building_Testing"><font><font>دریافت کد منبع و ساخت آن</font></font></a></dt> + <dd><font><font>دستورالعمل در مورد نحوه ساخت NSS در سیستم عامل های پشتیبانی شده مختلف.</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/Developer_guide/Source_Code/Mercurial"><font><font>کد منبع موزیلا را با استفاده از Mercurial دریافت کنید</font></font></a></dt> + <dd><font><font>اطلاعات در مورد کار با Mercurial.</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/Developer_guide/Source_Code/CVS"><font><font>دریافت کد منبع موزیلا با استفاده از CVS (نامعتبر)</font></font></a></dt> + <dd><font><font>مستندات CVS قدیمی ضعیف</font></font></dd> + </dl> + + <h3 id="API_های_NSS"><font><font>API های NSS</font></font></h3> + + <dl> + <dt><a href="/en-US/docs/Introduction_to_Network_Security_Services"><font><font>مقدمه ای بر خدمات امنیتی شبکه</font></font></a></dt> + <dd><font><font>یک مرور کلی از کتابخانه های NSS و آنچه شما باید بدانید که از آنها استفاده می کنید را ارائه می دهد.</font></font></dd> + <dt><a href="NSS/SSL_functions"><font><font>توابع عمومی NSS SSL</font></font></a></dt> + <dd><font><font>خلاصه API های SSL صادر شده توسط کتابخانه های اشتراک NSS.</font></font></dd> + <dt><a href="/en-US/docs/NSS_reference"><font><font>NSS SSL مرجع</font></font></a></dt> + <dd><font><font>API برای فراخوانی عملیات SSL استفاده می شود.</font></font></dd> + <dt><a href="NSS/NSS_API_GUIDELINES"><font><font>راهنمای NSS API</font></font></a></dt> + <dd><font><font>توضیح می دهد که چگونه کتابخانه ها و کد ها سازماندهی شده اند و دستورالعمل هایی برای توسعه کد (کنفرانس نامگذاری، اداره خطا، ایمنی موضوع، و غیره)</font></font></dd> + <dt><a href="NSS/nss_tech_notes"><font><font>نکات فنی NSS</font></font></a></dt> + <dd><font><font>پیوند به یادداشت های فنی NSS، که آخرین اطلاعات مربوط به ویژگی های NSS جدید و مستندات تکمیلی را برای موضوعات پیشرفته در برنامه نویسی با NSS ارائه می دهد.</font></font></dd> + </dl> + + <h3 id="ابزار،_تست_و_سایر_مشخصات_فنی"><font><font>ابزار، تست و سایر مشخصات فنی</font></font></h3> + + <dl> + <dt><a href="/en-US/docs/Mozilla/Projects/NSS/Building"><font><font>دستورالعمل ساخت NSS</font></font></a></dt> + <dd>Describe how to check out and build NSS releases.</dd> + </dl> + + <dl> + <dt><a href="/en-US/docs/Mozilla/Projects/NSS/NSS_Developer_Tutorial">NSS Developer Tutorial</a></dt> + <dd>How to make changes in NSS. Coding style, maintaining ABI compatibility.</dd> + </dl> + + <dl> + <dt><a href="NSS/Tools">NSS Tools</a></dt> + <dd>Tools for developing, debugging, and managing applications that use NSS.</dd> + <dt><a href="NSS/NSS_Sample_Code">Sample Code</a></dt> + <dd>Demonstrates how NSS can be used for cryptographic operations, certificate handling, SSL, etc.</dd> + <dt><a href="NSS/NSS_Third-Party_Code">Third-Party Code</a></dt> + <dd>A list of third-party code included in the NSS library.</dd> + <dt><a href="https://www-archive.mozilla.org/projects/security/pki/nss/testnss_32.html">NSS 3.2 Test Suite</a></dt> + <dd><strong>Archived version.</strong> Describes how to run the standard NSS tests.</dd> + <dt><a href="https://www-archive.mozilla.org/projects/security/pki/nss/performance_reports.html">NSS Performance Reports</a></dt> + <dd><strong>Archived version.</strong> Links to performance reports for NSS 3.2 and later releases.</dd> + <dt><a href="https://www-archive.mozilla.org/projects/security/pki/nss/nss-3.11/nss-3.11-algorithms.html">Encryption Technologies Available in NSS 3.11</a></dt> + <dd><strong>Archived version.</strong> Lists the cryptographic algorithms used by NSS 3.11.</dd> + <dt><a href="https://www-archive.mozilla.org/projects/security/pki/nss/loadable_certs.html">NSS 3.1 Loadable Root Certificates</a></dt> + <dd><strong>Archived version.</strong> Describes the scheme for loading root CA certificates.</dd> + <dt><a href="https://www-archive.mozilla.org/projects/security/pki/nss/db_formats.html">cert7.db</a></dt> + <dd><strong>Archived version.</strong> General format of the cert7.db database.</dd> + </dl> + + <h3 id="PKCS_11_information">PKCS #11 information</h3> + + <ul> + <li><a href="/en-US/docs/PKCS11" title="PKCS11">Documentation on PKCS #11 modules</a></li> + <li><a href="/en-US/docs/PKCS11_Implement">Implementing PKCS #11 for NSS</a></li> + <li><a href="/en-US/docs/PKCS11_Module_Specs" title="PKCS11_Module_Specs">The strings NSS uses to load PKCS #11 modules</a></li> + <li><a href="/en-US/docs/PKCS11_FAQ">PKCS #11 FAQ</a></li> + <li><a href="/en-US/docs/PKCS11_Jar_Install">Using the JAR Installation Manager to Install a PKCS #11 Cryptographic Module</a></li> + <li><a href="https://www-archive.mozilla.org/projects/security/pki/pkcs11/">PKCS #11 Conformance Testing - Archived version</a></li> + </ul> + + <dl> + </dl> + + <h3 id="CA_certificates_pre-loaded_into_NSS">CA certificates pre-loaded into NSS</h3> + + <ul> + <li><a href="https://www.mozilla.org/projects/security/certs/policy/">Mozilla CA certificate policy</a></li> + <li><a href="https://www.mozilla.org/projects/security/certs/included/">List of pre-loaded CA certificates</a> + <ul> + <li>Consumers of this list must consider the trust bit setting for each included root certificate. <a href="https://www.imperialviolet.org/2012/01/30/mozillaroots.html">More Information</a>, <a href="https://github.com/agl/extract-nss-root-certs">Extracting roots and their trust bits</a></li> + </ul> + </li> + </ul> + + <dl> + </dl> + + <h3 id="NSS_is_built_on_top_of_Netscape_Portable_Runtime_(NSPR)">NSS is built on top of Netscape Portable Runtime (NSPR)</h3> + + <dl> + <dt><a href="NSPR">Netscape Portable Runtime</a></dt> + <dd>NSPR project page.</dd> + <dt><a href="/en-US/docs/Mozilla/Projects/NSPR/Reference">NSPR Reference</a></dt> + <dd><font><font>اسناد API NSPR</font></font></dd> + </dl> + + <h3 id="اطلاعات_اضافی"><font><font>اطلاعات اضافی</font></font></h3> + + <ul> + <li><a href="/en-US/docs/JavaScript_crypto" title="JavaScript_Crypto"><font><font>با استفاده از object.crypto از جاوا اسکریپت</font></font></a></li> + <li><a href="/en-US/docs/HTTP_Delegation" title="HTTP_Delegation"><font><font>اعطای پرونده HTTP برای OCSP</font></font></a></li> + <li><a href="/en-US/docs/TLS_Cipher_Suite_Discovery" title="TLS_Cipher_Suite_Discovery"><font><font>TLS Cipher Suite Discovery</font></font></a></li> + <li><a href="/en-US/docs/NSS_Certificate_Download_Specification" title="NSS_Certificate_Download_Specification"><font><font>مشخصات فنی دانلود استاندارد NSS</font></font></a></li> + <li><a href="/en-US/docs/NSS/FIPS_Mode_-_an_explanation" title="FIPS Mode - یک توضیح"><font><font>FIPS Mode - یک توضیح</font></font></a></li> + <li><a href="/en-US/docs/NSS_Key_Log_Format" title="NSS Key Log Format"><font><font>فرمت فایل های ورودی کلیدی</font></font></a></li> + <li><font><font>مشاهده </font></font><a href="/en-US/docs/tag/NSS" title="/ en-US / docs / tag / NSS"><font><font>تمام مقالات مربوط به NSS در MDN</font></font></a></li> + </ul> + + <h3 id="برنامه_ریزی"><font><font>برنامه ریزی</font></font></h3> + + <p><font><font>اطلاعات مربوط به برنامه ریزی NSS را می توانید در </font></font><a class="external" href="https://wiki.mozilla.org/NSS"><font><font>wiki.mozilla.org</font></font></a><font><font> پیدا کنید </font><font>، از جمله:</font></font></p> + + <ul> + <li><a class="external" href="https://wiki.mozilla.org/FIPS_Validation"><font><font>اعتبار FIPS</font></font></a></li> + <li><a class="external" href="https://wiki.mozilla.org/NSS:Roadmap"><font><font>صفحه نقشه راه NSS</font></font></a></li> + <li><a href="https://fedoraproject.org/wiki/User:Mitr/NSS:DeveloperFriendliness" title="https://fedoraproject.org/wiki/User:Mitr/NSS:DeveloperFriendliness"><font><font>پروژه بهبود NSS</font></font></a></li> + </ul> + </td> + <td> + <h2 class="Community" id="Community" name="Community"><font><font>جامعه</font></font></h2> + + <ul> + <li><font><font>مشاهده انجمن های امنیتی موزیلا ...</font></font></li> + </ul> + + <p><font><font>{{DiscussionList ("dev-security"، "mozilla.dev.security")}}</font></font></p> + + <ul> + <li><font><font>مشاهده انجمن های رمزنگاری موزیلا ...</font></font></li> + </ul> + + <p><font><font>{{DiscussionList ("dev-tech-crypto"، "mozilla.dev.tech.crypto")}}</font></font></p> + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics"><font><font>مطالب مرتبط</font></font></h2> + + <ul> + <li><a href="/en-US/docs/Security" title="امنیت"><font><font>امنیت</font></font></a></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/fa/mozilla/projects/psm/index.html b/files/fa/mozilla/projects/psm/index.html new file mode 100644 index 0000000000..14df349b24 --- /dev/null +++ b/files/fa/mozilla/projects/psm/index.html @@ -0,0 +1,13 @@ +--- +title: Personal Security Manager (PSM) +slug: Mozilla/Projects/PSM +translation_of: Mozilla/Projects/PSM +--- +<p>مدیر امنیت شخصی (PSM) متشکل از مجموعه ای از کتابخانه ها است که عملیات رمزگذاری را از طرف برنامه مشتری انجام می دهند. این عملیات شامل راه اندازی اتصال SSL ، امضای شی و تأیید امضا ، مدیریت گواهینامه (از جمله صدور و ابطال) و سایر توابع رایج PKI است.</p> + +<p>یادداشت:</p> + +<ul> + <li>PSM همیشه <a href="/fa/docs/Mozilla/Developer_guide/Build_Instructions">با Firefox ساخته می شود</a> ، بنابراین دستورالعمل های ساخت جداگانه ای وجود ندارد.</li> + <li><a href="http://www-archive.mozilla.org/projects/security/pki/psm/">بایگانی اطلاعات در مورد PSM</a></li> +</ul> diff --git a/files/fa/mozilla/projects/rhino/index.html b/files/fa/mozilla/projects/rhino/index.html new file mode 100644 index 0000000000..99391813c4 --- /dev/null +++ b/files/fa/mozilla/projects/rhino/index.html @@ -0,0 +1,20 @@ +--- +title: Rhino +slug: Mozilla/Projects/Rhino +translation_of: Mozilla/Projects/Rhino +--- +<p><img alt="Image:rhino.jpg" class="internal" src="/@api/deki/files/832/=Rhino.jpg"></p> + +<p><span class="seoSummary"><strong>Rhino</strong> is an open-source implementation of <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> written entirely in Java. It is typically embedded into Java applications to provide scripting to end users. It is embedded in J2SE 6 as the default Java scripting engine.</span></p> + +<h4 id="Rhino_downloads" name="Rhino_downloads">Rhino downloads</h4> + +<p>How to <a class="internal" href="/en/RhinoDownload" title="en/RhinoDownload">get source and binaries</a>. </p> + +<h4 id="Rhino_documentation" name="Rhino_documentation">Rhino documentation</h4> + +<p><a href="/en/Rhino_documentation" title="en/Rhino_documentation">Information on Rhino</a> for script writers and embedders.</p> + +<h4 id="Rhino_help" name="Rhino_help">Rhino help</h4> + +<p><a href="/en/Rhino/Community" title="en/Rhino/Community">Some resources</a> if you get stuck.</p> diff --git a/files/fa/mozilla/tech/index.html b/files/fa/mozilla/tech/index.html new file mode 100644 index 0000000000..c084ed3bb5 --- /dev/null +++ b/files/fa/mozilla/tech/index.html @@ -0,0 +1,10 @@ +--- +title: Mozilla technologies +slug: Mozilla/Tech +translation_of: Mozilla/Tech +--- +<p>(fa translation)</p> + +<p>Mozilla has several technologies used as components of its projects. These are documented here.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/fa/mozilla/بازار/index.html b/files/fa/mozilla/بازار/index.html new file mode 100644 index 0000000000..5bac76b631 --- /dev/null +++ b/files/fa/mozilla/بازار/index.html @@ -0,0 +1,95 @@ +--- +title: بازار فایرفاکس +slug: Mozilla/بازار +translation_of: Archive/Mozilla/Marketplace +--- +<div class="summary" dir="rtl">بازار فایرفاکس یک بازار آنلاین و باز غیر اختصاصی برای ساخت نرم افزارهای تحت وب بر پایه HTML5 است.</div> + +<div class="column-container" dir="rtl"> +<p><span class="seoSummary">بازار فایرفاکس توسعه دهندگان را قادر می سازد تا <a href="/en-US/Apps">نرم افزارهای متن باز تحت وب</a> را با استفاده از تکنولوژیهای استاندارد وب، زبانها، و ابزارها انتشار دهند. موزیلا ارزشهای اصلی خود — بازبودن، آزادی، انتخاب کاربر — را برای دنیای نرم افزارها به ارمغان میآورد.</span></p> +</div> + +<div class="row topicpage-table" dir="rtl"> +<div class="section"> +<h2 class="Community" id="Community" name="Community">انتشار نرم افزار شما</h2> + +<dl> + <dt><a href="/en-US/Marketplace/Publishing/Publish_options">گزینههای انتشار برنامه</a></dt> + <dd>پس از اینکه شما یک نرم افزار تحت وب متن باز ساختید، گزینههای مختلفی برای انتشار به دنیای خارج در دسترس خواهد بود. این مقاله گزینههای در دسترس را توضیح میدهد.</dd> + <dt><a href="/en-US/Marketplace/Submission/Submitting_an_app">ارسال یک نرم افزار به بازار فایرفاکس</a></dt> + <dd>راهنمای مفصلی برای کسانی که مایل به انتشار نرم افزار در بازار فایرفاکس هستند.</dd> + <dt><a href="/en-US/Apps/Publishing/General_app_publishing_topics">مباحث عمومی انتشار نرم افزار</a></dt> + <dd>اطلاعات عمومی و نکات کاربردی در مورد انتشار نرم افزار متن باز تحت وب.</dd> + <dt><a href="/en-US/Marketplace/Marketplace_APIs">APIهای بازار فایرفاکس</a></dt> + <dd>اتصال به مرجع اصلی راهنمای APIهای بازار فایرفاکس را پوشش میدهد، و شما میتوانید حسابهای پرداخت نرم افزار، توابع خودکار نرم افزار، و دیگر موارد را پیکربندی کنید.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Community" id="Community" name="Community">کسب درآمد</h2> + +<dl> + <dt><a href="/en-US/Marketplace/Monetization/Profiting_from_your_app">سود بردن از نرم افزار خودتان</a></dt> + <dd>شما بهسختی برروی کدنویسی آخرین برنامه خود کار کردهاید، اما چطور میتوان هنگام انتشار برنامهتان از آن کسب درآمد کنید؟ این مقاله معرفی مفصلی در مورد پیاده سازی پرداختهای برنامه، شامل پرداختهای بازار و پرداختهای درون برنامهای دارد.</dd> +</dl> + +<h2 class="Tools" id="Tools" name="Tools">ابزارهایی برای توسعه نرم افزار</h2> + +<ul> + <li><a href="/en-US/Firefox_OS/Using_the_App_Manager">مدیریت نرم افزار فایرفاکس او اس</a></li> + <li><a href="/en-US/Apps/App_developer_tools">ابزارهای توسعه نرم افزار</a></li> +</ul> + +<h2 id="ساخت_بازار_خودتان">ساخت بازار خودتان</h2> + +<dl> + <dt><a href="/en-US/Marketplace/Creating_a_store">ساخت یک فروشگاه</a></dt> + <dd>شما نباید از بازار فایرفاکس برای توزیع برنامه خودتان استفاده کنید.</dd> +</dl> +</div> +</div> + +<h2 dir="rtl" id="Subnav">Subnav</h2> + +<ol dir="rtl"> + <li><a href="/en-US/Marketplace/Submission">App Submission & Review</a> + + <ol> + <li><a href="/en-US/Marketplace/Submission/Submitting_an_app" title="This step-by-step guide will help you successfully submit your app to the Firefox Marketplace.">Submitting an app to the Firefox Marketplace</a></li> + <li><a href="/en-US/Marketplace/Submission/Rating_Your_Content">Obtaining a rating for your app</a></li> + <li><a href="/en-US/Marketplace/Submission/Marketplace_review_criteria" title="An explanation of the criteria an app must meet in order to be published on the Firefox Marketplace">Marketplace review criteria</a></li> + <li><a href="/en-US/Marketplace/Publishing/Marketplace_screenshot_criteria" title="Some guidelines on how to create an effective screenshot for marketplace submission">Marketplace screenshot criteria</a></li> + <li><a href="/en-US/Marketplace/Publishing/Privacy_policies" title="Your users' privacy is very important, so you need to develop and adhere to a reasonable privacy policy to engender their trust. This article provides a guide to developing privacy policies.">Privacy policy</a></li> + <li><a href="/en-US/Marketplace/Submission/Testing_and_troubleshooting">App testing and troubleshooting</a></li> + </ol> + </li> + <li><a href="/en-US/Marketplace/Publishing">App Publishing</a> + <ol> + <li><a href="/en-US/Marketplace/Publishing/Publish_options" title="If you don't want to go the Firefox Marketplace route, here is some useful information on self-publishing apps.">Publishing options</a></li> + <li><a href="/en-US/Marketplace/Publishing/Packaged_apps" title="A detailed description of packaged apps, what the different types entail, and what they are used for in the context of the Firefox Marketplace, and self-published apps.">Packaged Apps</a></li> + <li><a href="/en-US/Marketplace/Publishing/Updating_apps" title="Information about how both hosted and packaged app updates are handled, and what you need to do to ensure that your app properly supports updating.">Updating apps</a></li> + <li><a href="/en-US/Marketplace/Publishing/Open_web_apps_for_android">Open web apps for Android</a></li> + <li><a href="/en-US/Marketplace/Publishing/Adding_a_subdomain" title="For security reasons, each app must have its own domain (or subdomain) on the Web. This article covers how to go about creating a subdomain for your app.">Adding a subdomain for an app</a></li> + <li><a href="/en-US/Marketplace/Publishing/Creating_a_store" title="Information that may be helpful to you if you want to build your own store for selling and distributing Open Web Apps.">Creating a store</a></li> + </ol> + </li> + <li><a href="/en-US/Marketplace/Monetization">Monetization</a> + <ol> + <li><a href="/en-US/Marketplace/Monetization/Profiting_from_your_app" title="This guide contains introductory materials on how to monetize your apps, including tools needed, and a monetization calculator.">Profiting from your app</a></li> + <li><a href="/en-US/Marketplace/Monetization/App_payments_guide">App payments guide</a></li> + <li><a href="/en-US/Marketplace/Monetization/In-app_payments" title="A guide to implementing support for in-app payments in your Web app.">In-app payments</a></li> + <li><a href="/en-US/Marketplace/Monetization/validating_a_receipt" title="A guide to when—and how—to validate your app's purchase receipt.">Validating a receipt</a></li> + <li><a href="/en-US/Marketplace/Monetization/App_pricing" title="A round up of fixed price points you can choose for your paid apps, and how these vary across different currencies, along with useful supporting information on dealing with app payments.">App pricing list</a></li> + <li><a href="/en-US/Marketplace/Monetization/Payments_Status" title="An at-a-glance summary of what countries have got our app payment services set up in them — where paid apps can be distributed">Payments Status</a></li> + </ol> + </li> + <li><a href="/en-US/Marketplace/APIs">Marketplace APIs</a> + <ol> + <li><a href="/en-US/Marketplace/APIs/Marketplace_utility_library" title="To help you work with the Firefox Marketplace, we provide a JavaScript library you can use in your apps to make it easier to handle in-app payments and verify payment receipts.">Marketplace utility library</a></li> + <li><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/submission.html" title="The Submission API lets you validate your app, update your app, and fetch information about the apps available to be installed.">Submission API</a></li> + <li><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/payment.html" title="The Payment API lets you get information about and process in-app purchases as well as to simply get information about what pricing tiers are available.">Payment API</a></li> + <li><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/overview.html" title="All Marketplace-related documentation is centered here.">Marketplace API</a></li> + </ol> + </li> + <li><a href="/en-US/Marketplace/FAQ">Firefox Marketplace FAQ</a></li> +</ol> diff --git a/files/fa/server-sent_events/index.html b/files/fa/server-sent_events/index.html new file mode 100644 index 0000000000..9b22801732 --- /dev/null +++ b/files/fa/server-sent_events/index.html @@ -0,0 +1,99 @@ +--- +title: Server-sent events +slug: Server-sent_events +tags: + - NeedsTranslation + - Server-sent events + - TopicStub +translation_of: Web/API/Server-sent_events +--- +<p>Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as <em><a href="/en-US/docs/DOM/event" title="DOM/Event">Events</a> + data</em> inside the web page.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> + <dl> + <dt> + <a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent events/Using server-sent events">Using server-sent events</a></dt> + <dd> + A tutorial guide to writing both server and client side part of a server-sent events app.</dd> + <dt> + <a href="/en-US/docs/Server-sent_events/EventSource" title="Server-sent events/EventSource">EventSource reference</a></dt> + <dd> + A reference to the client-side EventSource API.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Server-sent_events" title="tag/Server-sent events">View All...</a></span></p> + </td> + <td> + <h2 class="Tools" id="Tools" name="Tools">Tools</h2> + <ul> + <li>Remy Sharp’s <a class="link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource polyfill</a></li> + <li>Yaffle’s <a class="link-https" href="https://github.com/Yaffle/EventSource" title="https://github.com/Yaffle/EventSource">EventSource polyfill</a></li> + <li>Rick Waldron’s <a class="link-https" href="https://github.com/rwldrn/jquery.eventsource">jquery plugin</a></li> + </ul> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> + <ul> + <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/WebSockets" title="WebSockets">WebSockets</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<h2 id="See_also">See also</h2> +<ul> + <li>A <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/" title="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">Twitter like application</a> powered by server-sent events and <a class="link-https" href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline" title="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends timeline">its code on Github</a>.</li> + <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events" title="http://dsheiko.com/weblog/html5-and-server-sent-events">HTML5 and Server-sent events</a></li> + <li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html" title="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Server-sent events using Asp.Net</a></li> +</ul> +<h2 id="Specification">Specification</h2> +<ul> + <li><a href="http://dev.w3.org/html5/eventsource/" title="http://dev.w3.org/html5/eventsource/">Server-sent events</a></li> +</ul> +<h2 id="Browser_compatibility">Browser compatibility</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>EventSource support</td> + <td>9</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11</td> + <td>5</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>EventSource support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> + </table> +</div> diff --git a/files/fa/tools/debugger/how_to/index.html b/files/fa/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..084f1717e5 --- /dev/null +++ b/files/fa/tools/debugger/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Tools/Debugger/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +<div>{{ToolsSidebar}}</div><p><span class="seoSummary">These articles describe how to use the debugger.</span></p> + +<p>{{ ListSubpages () }}</p> diff --git a/files/fa/tools/debugger/index.html b/files/fa/tools/debugger/index.html new file mode 100644 index 0000000000..c384131b2e --- /dev/null +++ b/files/fa/tools/debugger/index.html @@ -0,0 +1,59 @@ +--- +title: The Firefox JavaScript Debugger +slug: Tools/Debugger +tags: + - Debugger + - Debugging + - Dev Tools + - JavaScript + - NeedsTranslation + - Tools + - TopicStub + - 'l10n:priority' +translation_of: Tools/Debugger +--- +<div>{{ToolsSidebar}}</div> + +<p>The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.</p> + +<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p> + +<p>You can use it to debug code running locally in Firefox or running remotely, for example on an Android device running Firefox for Android. See <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to learn how to connect the debugger to a remote target.</p> + +<p>To find your way around the debugger, here's a <a href="/en-US/docs/Tools/Debugger/UI_Tour">quick tour of the UI</a>.</p> + +<h2 id="How_to">How to</h2> + +<p>To find out what you can do with the debugger, see the following how-to guides:</p> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Open_the_debugger">Open the debugger</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Set a breakpoint</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Set a conditional breakpoint</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Set_an_XHR_breakpoint">Set an XHR breakpoint</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Set_a_logpoint">Set a logpoint</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Set_event_listener_breakpoints">Set event listener breakpoints</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">Disable breakpoints</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">Step through code</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Breaking_on_exceptions">Break on exceptions</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Set_Watch_Expressions">Set watch expressions</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Debug_worker_threads">Debug worker threads</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Pretty-print a minified file</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Search">Search</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Debug eval sources</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Use a source map</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_watchpoints">Use watchpoints</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Break_on_DOM_mutation">Break on DOM Mutation</a></li> +</ul> +</div> + +<hr> +<h2 id="Reference">Reference</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Debugger/Keyboard_shortcuts">Keyboard shortcuts</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Source_map_errors">Source map errors</a></li> +</ul> +</div> diff --git a/files/fa/tools/index.html b/files/fa/tools/index.html new file mode 100644 index 0000000000..72f8581e5b --- /dev/null +++ b/files/fa/tools/index.html @@ -0,0 +1,218 @@ +--- +title: ابزارهای توسعه فایرفاکس +slug: Tools +tags: + - Developing Mozilla + - Guide + - NeedsTranslation + - Tools + - TopicStub + - Web Development + - 'Web Development:Tools' + - 'l10n:priority' +translation_of: Tools +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile.</p> + +<p>If you are looking for information on using the web developer tools available in Firefox, you've come to the right place — this page provides links to detailed information on all of the core tools and additional tools, and further information such as how to connect to and debug Firefox for Android, how to extend the devtools, and how to debug the browser as a whole.</p> + +<p>Please explore the links found in the sidebar, and further down the page. If you have any feedback or questions about the devtools, send us messages on our mailing list or IRC channel (see the <a href="/en-US/docs/Tools#Join_the_Developer_tools_community">community links near the bottom of the page</a>). If you have any feedback or questions specifically about the documentation, the <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> is a good place to post.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are just getting started with web development and using developer tools, our <a href="/en-US/docs/Learn">learning web development</a> docs will help you — see <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> and <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a> for good starting points.</p> +</div> + +<h2 id="The_Core_Tools">The Core Tools</h2> + +<p>You can open the Firefox Developer Tools from the menu by selecting <em>Tools</em> > <em>Web Developer</em> > <em>Toggle Tools</em> or use the keyboard shortcut <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd> on Windows and Linux, or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on macOS.</p> + +<p>The ellipsis menu on the right-hand side of Developer Tools, contains several commands that let you perform actions or change tool settings.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="display: block; height: 290px; margin: 0 auto; width: 225px;"></p> + +<table class="standard-table" style="height: 178px; width: 840px;"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td> + <td>This button only appears when there are multiple iframes on a page. Click it to display a list of the iframes on the current page and select the one with which you want to work.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td> + <td>Click this button to take a screenshot of the current page. (<strong>Note:</strong> This feature is not turned on by default and must be enabled in settings before the icon will appear.)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td> + <td>Toggles Responsive Design Mode.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td> + <td>Opens the menu that includes docking options, the ability to show or hide the split console, and Developer Tools settings. The menu also includes links to the documentation for Firefox Web Tools and the Mozilla Community.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td> + <td>Closes the Developer Tools</td> + </tr> + </tbody> +</table> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Page_Inspector">Page Inspector</h3> + +<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>View and edit page content and layout. Visualise many aspects of the page including the box model, animations, and grid layouts.</p> +</div> + +<div class="column-half"> +<h3 id="Web_Console">Web Console</h3> + +<p><a href="/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See messages logged by a web page and interact with the page using JavaScript.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="JavaScript_Debugger">JavaScript Debugger</h3> + +<p><a href="/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Stop, step through, examine, and modify the JavaScript running in a page.</p> +</div> + +<div class="column-half"> +<h3 id="Network_Monitor">Network Monitor</h3> + +<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See the network requests made when a page is loaded.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Performance_Tools">Performance Tools</h3> + +<p><a href="/en-US/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Analyze your site's general responsiveness, JavaScript, and layout performance.</p> +</div> + +<div class="column-half"> +<h3 id="Responsive_Design_Mode">Responsive Design Mode</h3> + +<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See how your website or app will look and behave on different devices and network types.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Accessibility_inspector">Accessibility inspector</h3> + +<p><a href="/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention.</p> +</div> + +<div class="column-half"></div> +</div> + +<div class="note"> +<p><strong>Note</strong>: The collective term for the UI inside which the DevTools all live is the <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>.</p> +</div> + +<h2 id="More_Tools">More Tools</h2> + +<p>These developer tools are also built into Firefox. Unlike the "Core Tools" above, you might not use them every day.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Memory">Memory</a></dt> + <dd>Figure out which objects are keeping memory in use.</dd> + <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt> + <dd>Inspect cookies, local storage, indexedDB, and session storage present in a page.</dd> + <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt> + <dd>Inspect the page's DOM properties, functions, etc.</dd> + <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> + <dd>Select a color from the page.</dd> + <dt><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt> + <dd>A text editor built into Firefox that lets you write and execute JavaScript.</dd> + <dt><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></dt> + <dd>View and edit CSS styles for the current page.</dd> + <dt><a href="/en-US/docs/Tools/Screenshot_tool">Taking screenshots</a></dt> + <dd>Take a screenshot of the entire page or of a single element.</dd> + <dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Measure a portion of the page</a></dt> + <dd>Measure a specific area of a web page.</dd> + <dt><a href="/en-US/docs/Tools/Rulers">Rulers</a></dt> + <dd>Overlay horizontal and vertical rulers on a web page</dd> +</dl> +</div> + +<div class="column-container"> +<div class="column-third"> +<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p> + +<p style="text-align: center;">For the latest developer tools and features, try Firefox Developer Edition.</p> + +<p><a href="https://www.mozilla.org/en-US/firefox/developer/" style="width: 300px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Developer Edition</a></p> +</div> + +<div class="column-third"></div> +</div> + +<h2 id="Connecting_the_Developer_Tools">Connecting the Developer Tools</h2> + +<p>If you open the developer tools using <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">keyboard shortcuts</a> or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt> + <dd>Debug add-ons, content tabs, and workers running in the browser.</dd> + <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Connecting to Firefox for Android</a></dt> + <dd>Connect the developer tools to an instance of Firefox running on an Android device.</dd> + <dt><a href="/en-US/docs/Tools/Working_with_iframes">Connecting to iframes</a></dt> + <dd>Connect the developer tools to a specific iframe in the current page.</dd> + <dt><a href="/en-US/docs/Tools/Valence">Connecting to other browsers</a></dt> + <dd>Connect the developer tools to Chrome on Android and Safari on iOS.</dd> +</dl> +</div> + +<h2 id="Debugging_the_browser">Debugging the browser</h2> + +<p>By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt> + <dd>See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.</dd> + <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt> + <dd>Attach the Developer Tools to the browser itself.</dd> +</dl> +</div> + +<h2 id="Extending_the_devtools">Extending the devtools</h2> + +<p>For information on extending the Firefox DevTools, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> over in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">Browser Extensions</a> section of MDN.</p> + +<h2 id="Migrating_from_Firebug">Migrating from Firebug</h2> + +<p>Firebug has come to the end of its lifespan (see <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a> for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Migrating from Firebug</a>.</p> + +<h2 id="Contribute">Contribute</h2> + +<p>If you want to help improve the developer tools, these resources will get you started.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="https://docs.firefox-dev.tools/">Get Involved</a></dt> + <dd>Our developer documentation explains how to get involved.</dd> + <dt><a href="http://bugs.firefox-dev.tools/">bugs.firefox-dev.tools</a></dt> + <dd>A tool helping to find bugs to work on.</dd> +</dl> +</div> diff --git a/files/fa/tools/network_monitor/index.html b/files/fa/tools/network_monitor/index.html new file mode 100644 index 0000000000..8ab3d7c569 --- /dev/null +++ b/files/fa/tools/network_monitor/index.html @@ -0,0 +1,571 @@ +--- +title: Network Monitor +slug: Tools/Network_Monitor +translation_of: Tools/Network_Monitor +--- +<p>مانیتور شبکه همه درخواست های شبکه فایرفاکس را نشان می دهد (به عنوان مثال، هنگامی که یک صفحه را بارگذاری می کند یا به دلیل XMLHttpRequests)، چه مدت هر درخواست طول می کشد و جزئیات هر درخواست.</p> + +<h2 id="باز_کردن_مانیتور_شبکه">باز کردن مانیتور شبکه</h2> + +<p>چند راه مختلف برای باز کردن مانیتور شبکه وجود دارد:</p> + +<div class="geckoVersionNote"> +<p>میانبر صفحه کلید در فایرفاکس 55 تغییر کرده است</p> +</div> + +<ul> + <li>فشاردهید <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> ( <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>E</kbd> در سیستم عامل مک).</li> + <li>"شبکه" را از منوی Web Developer انتخاب کنید (که منوی زیر در منوی Tools در OS X و لینوکس است).</li> + <li>روی نماد آچار کلیک کنید (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), که در نوار ابزار اصلی یا زیرمنو روبرواست (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">),سپس انتخاب "شبکه".</li> +</ul> + +<p>مانیتور شبکه در پایین پنجره مرورگر ظاهر می شود. برای دیدن درخواست ها، صفحه را بارگیری کنید:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13535/1-new-overview-small.png" style="display: block; height: 831px; margin: 0px auto; width: 1100px;"></p> + +<p>مانیتور شبکه هر زمان که جعبه ابزار باز است، حتی اگر شبکه مانیتور خود انتخاب نشده باشد، درخواست های شبکه را ثبت می کند. این بدان معنی است که شما می توانید یک صفحه را در اشکال زدایی، به عنوان مثال، کنسول وب، شروع کنید، سپس به Network Monitor بروید تا فعالیت شبکه را بدون نیاز به بارگذاری مجدد صفحه ببینید.</p> + +<h2 id="نمای_کلی_UI">نمای کلی UI</h2> + +<p>UI به چهار قسمت اصلی تقسیم می شود:</p> + +<ul> + <li>صفحه اصلی حاوی نوار ابزار، لیست درخواست شبکه و پنجره جزئیات اطلاعات درخواست شبکه است:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13266/nm-pieces.png" style="display: block; height: 850px; margin-left: auto; margin-right: auto; width: 962px;"></p> + +<ul> + <li>نمایش تجزیه و تحلیل عملکرد یک صفحه جداگانه است:</li> +</ul> + +<p><img alt="Performance analysis view" src="https://mdn.mozillademos.org/files/14673/Performance%20analysis.png" style="display: block; height: 541px; margin-left: auto; margin-right: auto; width: 665px;"></p> + +<h2 id="نوار_ابزار">نوار ابزار</h2> + +<p>از فایرفاکس 47 به بعد، نوار ابزار در بالای پنجره اصلی قرار دارد. در نسخه های قبلی فایرفاکس، در پایین آن است.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13138/nm-toolbar.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 1910px;">It provides:</p> + +<ul> + <li>an icon to clear the <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Network_request_list">network request list</a></li> + <li>an array of icons to filter the network request list by type: + <ul> + <li>by the content type of the response</li> + <li>XHR requests</li> + <li>(new in Firefox 48) WebSocket upgrades (labeled WS)</li> + </ul> + </li> + <li>an icon to launch <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Performance_analysis">performance analysis</a></li> + <li>a summary of this page, including the number of requests, total size, and total time</li> + <li>a box enabling you to <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Filtering_by_URL">filter requests by URL</a> and <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Filtering_by_properties">by properties</a></li> + <li>an icon to show/hide the <a href="/en-US/docs/Tools/Network_Monitor#Network_request_details">network request details pane</a>.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: From Firefox 58 onwards, the "Flash" filter button is no longer available, and Flash requests are included in the "Others" filter ({{bug(1413540)}}).</p> +</div> + +<h2 id="Network_request_list">Network request list</h2> + +<p>By default, the Network Monitor shows a list of all the network requests made in the course of loading the page. Each request is displayed in its own row:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13537/5-new-request-list-new.png" style="display: block; height: 257px; margin: 0px auto; width: 900px;">By default, the Network Monitor is cleared each time you navigate to a new page or reload the current page. You can override this behavior by checking "Enable persistent logs" in the <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Common_preferences">Settings</a>.</p> + +<h3 id="Network_request_columns">Network request columns</h3> + +<p>From Firefox 55 onwards, you can toggle different columns by right-clicking on the table header and choosing the specific column from the context menu. A "Reset Columns" option is also available to reset the columns to their initial configuration. Here is a list of all available columns:</p> + +<ul> + <li><strong>Status</strong>: The HTTP status code returned. This is displayed as a color-coded icon: + + <ul> + <li><img alt="" src="https://mdn.mozillademos.org/files/13136/1x.png" style="height: 17px; width: 17px;">blue circle for informational (1XX codes). Notably, this includes 101 (switching protocols) for <a href="/en-US/docs/Web/API/WebSocket">WebSocket</a> upgrades.</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10941/200.png" style="height: 17px; width: 17px;"> green circle for success (2XX codes)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10945/300.png" style="height: 17px; width: 17px;"> orange triangle for redirection (3XX)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10943/4-500.png" style="height: 17px; width: 17px;"> red square for errors (4XX and 5XX)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10947/cached.png" style="height: 17px; width: 17px;"> hollow grey circle for responses that were fetched from the browser cache.</li> + </ul> + The exact code is displayed immediately after the icon.</li> + <li><strong>Method</strong>: the HTTP request method used.</li> + <li><strong>File</strong>: basename of the file requested.</li> + <li><strong>Protocol:</strong> The network protocol used to transfer the data. This column is hidden by default. This is new in Firefox 55.</li> + <li><strong>Scheme:</strong> The scheme (https/http/ftp/...) of the path requested. This column is hidden by default. This is new in Firefox 55.</li> + <li><strong>Domain</strong>: domain of the path requested. + <ul> + <li>If the request used SSL/TLS and the connection had security weaknesses such as weak ciphers, you'll see a warning triangle next to the domain. You will be able to see more details about the problem in the <a href="/en-US/docs/Tools/Network_Monitor#Security">Security tab</a>.</li> + <li>Hover over the domain to see the IP address.</li> + <li>There's an icon next to the domain that gives you extra information about the security status of that request. See <a href="/en-US/docs/Tools/Network_Monitor#Security_icons">Security icons</a>.</li> + </ul> + </li> + <li><strong>Remote IP</strong>: The IP address of the server answering the request. This column is hidden by default. This is new in Firefox 55.</li> + <li><strong>Cause</strong>: The reason that the network request occurred, for example XHR request, {{htmlelement("img")}}, script, script requesting an image, etc. This is new in Firefox 49.</li> + <li><strong>Type</strong>: <code>Content-type</code> of the response.</li> + <li><strong>Cookies:</strong> The number of request cookies associated to the request. This column is hidden by default. This is new in Firefox 55.</li> + <li><strong>Set-Cookies:</strong> The number of response cookies associated to the request. This column is hidden by default. This is new in Firefox 55.</li> + <li><strong>Transferred</strong>: the number of bytes that were actually transferred to load the resource. This will be less than <strong>Size</strong> if the resource was compressed. From Firefox 47, if the resource was fetched from a <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> cache, then this cell displays "service worker".</li> + <li><strong>Size</strong>: the size of the transferred resource.</li> +</ul> + +<p>The toolbar at the top labels these columns, and clicking the label sorts all the requests by that column.</p> + +<h4 id="Image_thumbnails">Image thumbnails</h4> + +<p>If the file is an image, the row includes a thumbnail of the image, and hovering over the filename shows a preview in a tooltip:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13539/6-new-thumb-small.png" style="display: block; height: 241px; margin: 0px auto; width: 900px;"></p> + +<h4 id="Security_icons">Security icons</h4> + +<p>The Network Monitor displays an icon in the Domain column:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13541/7-new-security-icons-new.png" style="display: block; height: 217px; margin: 0px auto; width: 900px;"></p> + +<p>This gives you extra information about the security status of the request:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Icon</th> + <th scope="col">Meaning</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11655/https.svg" style="height: 16px; width: 16px;"></td> + <td>HTTPS</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11653/https-weak.svg" style="height: 16px; width: 16px;"></td> + <td>Weak HTTPS (for example, a weak cipher was used)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11649/https-failed.svg" style="height: 16px; width: 16px;"></td> + <td>Failed HTTPS (for example, a certificate was invalid)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11651/http.svg" style="height: 16px; width: 16px;"></td> + <td>HTTP</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11657/localhost.svg" style="height: 16px; width: 16px;"></td> + <td>Localhost</td> + </tr> + </tbody> +</table> + +<p>For weak and failed HTTPS requests, you'll see more details of the problem in the <a href="/en-US/docs/Tools/Network_Monitor#Security">Security tab</a>.</p> + +<h4 id="Cause_column">Cause column</h4> + +<p>The Cause column indicates what the cause of the request was. This is usually fairly obvious, and you can generally see the correlation between this and the Type column entry. The most common values are:</p> + +<ul> + <li>document: The source HTML document.</li> + <li>img: {{htmlelement("img")}} element.</li> + <li>imageset: {{htmlelement("img")}} element.</li> + <li>script: A JavaScript file.</li> + <li>stylesheet: A CSS file.</li> +</ul> + +<div> +<p>When a request was triggered by JavaScript, a small JS icon is shown to the left of the entry in the Cause column. Hovering over this displays a popup containing the stack trace for the request, to provide more clues as to why a request happened.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13575/stack-trace-new-small.png" style="display: block; margin: 0 auto;"></p> + +<p>You can then click on any of the entries in the popup to open up the relevant script in the <a href="/en-US/docs/Tools/Debugger">Debugger</a> pane.</p> +</div> + +<h3 id="Timeline">Timeline</h3> + +<p>The request list also displays a timeline for the different parts of each request.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13543/8-new-timeline-small.png" style="display: block; height: 239px; margin: 0px auto; width: 900px;"></p> + +<p>Each timeline is given a horizontal position in its row relative to the other network requests, so you can see the total time taken to load the page. For more details on the color-coding used here, see the section on the <a href="/en-US/docs/Tools/Network_Monitor#Timings">Timings</a> page.</p> + +<p>Starting in Firefox 45, the timeline also contains two vertical lines:</p> + +<ul> + <li>the <span style="color: blue;">blue</span> line marks the point at which the page's <code><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> event is triggered</li> + <li>the <span style="color: red;">red</span> line marks the point at which the page's <code><a href="/en-US/docs/Web/Events/load">load</a></code> event is triggered</li> +</ul> + +<h3 id="Filtering_requests">Filtering requests</h3> + +<p>You can filter requests by content type, by whether they are XMLHttpRequests or WebSocket requests, by URL, or by request properties.</p> + +<h4 id="Filtering_by_content_type">Filtering by content type</h4> + +<p>To filter by content type, use the buttons in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p> + +<h4 id="Filtering_XHR">Filtering XHR</h4> + +<p>To see only {{Glossary("XHR (XMLHttpRequest)", "XHR")}} requests, use the "XHR" button in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p> + +<h4 id="Filtering_WebSockets">Filtering WebSockets</h4> + +<div class="geckoVersionNote"> +<p>New in Firefox 48</p> +</div> + +<p>To see only WebSocket connections, use the "WS" button in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p> + +<p>To monitor the data exchanged in WebSocket connections, try the <a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">WebSocket Monitor add-on</a>.</p> + +<h4 id="Filtering_by_URL">Filtering by URL</h4> + +<p>To filter by URL, use the search box in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>. Click in the search box, or press <kbd>Ctrl</kbd> + <kbd>F</kbd> (or <kbd>Cmd</kbd> + <kbd>F</kbd> on a Mac), and start typing. The list of network requests will be filtered to include only requests that contain your filter string, in either the Domain or the File portions.</p> + +<p>From Firefox 45, you can filter requests that <em>don't</em> contain your filter string by prefixing your query with the "-" operator. For example, the query "-google.com" will show all requests that don't have "google.com" in their URL.</p> + +<h4 id="Filtering_by_properties">Filtering by properties</h4> + +<div class="geckoVersionNote"> +<p>New in Firefox 55</p> +</div> + +<p>To filter by specific request properties, use the search box in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>. The search box recognizes specific keywords, which can be used to filter the requests by specific request properties. Those keywords are followed by a colon and a related filter value. The filter values are matched case insensitive. Prepending a minus (<code>-</code>) negates the filter. You can combine different filters together by seperating them with a space.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Keyword</th> + <th scope="col">Meaning</th> + <th scope="col">Examples</th> + </tr> + <tr> + <td><code>status-code</code></td> + <td>Shows resources that have the specific HTTP status code.</td> + <td><code>status-code:304</code></td> + </tr> + <tr> + <td><code>method</code></td> + <td>Shows resources that have were requested via the specific HTTP request method.</td> + <td><code>method:post</code></td> + </tr> + <tr> + <td><code>domain</code></td> + <td>Shows resources coming from a specifc domain.</td> + <td><code>domain:mozilla.org</code></td> + </tr> + <tr> + <td><code>remote-ip</code></td> + <td>Shows resources coming from a server with the specified IP.</td> + <td><code>remote-ip:63.245.215.53</code><br> + <code>remote-ip:[2400:cb00:2048:1::6810:2802]</code></td> + </tr> + <tr> + <td><code>cause</code></td> + <td>Shows resources matching a specific cause type. The types can be found in the description of the <a href="#Cause_column">cause column</a>.</td> + <td><code>cause:js</code><br> + <code>cause:stylesheet<br> + cause:img</code></td> + </tr> + <tr> + <td><code>transferred</code></td> + <td>Shows resources having a specific transferred size or a transferred size close to the one specified. <code>k</code> can be used as suffix for kilobytes and <code>m</code> for megabytes, e.g. the value <code>1k</code> is equivalent to <code>1024</code>.</td> + <td><code>transferred:1k</code></td> + </tr> + <tr> + <td><code>size</code></td> + <td>Shows resources having a specific size (after decompression) or a size close to the one specified. <code>k</code> can be used as suffix for kilobytes and <code>m</code> for megabytes, e.g. the value <code>1k</code> is equivalent to <code>1024</code>.</td> + <td><code>size:2m</code></td> + </tr> + <tr> + <td><code>larger-than</code></td> + <td>Shows resources that are larger than the specified size in bytes. <code>k</code> can be used as suffix for kilobytes and <code>m</code> for megabytes, e.g. the value <code>1k</code> is equivalent to <code>1024</code>.</td> + <td><code>larger-than:2000</code><br> + <code>-larger-than:4k</code></td> + </tr> + <tr> + <td><code>mime-type</code></td> + <td>Shows resources that match the specified MIME type.</td> + <td><code>mime-type:text/html</code><br> + <code>mime-type:image/png</code><br> + <code>mime-type:application/javascript</code></td> + </tr> + <tr> + <td><code>is</code></td> + <td><code>is:cached</code> and <code>is:from-cache</code> shows only resources coming from cache.<br> + <code>is:running</code> shows only resources, which are currently being transferred.</td> + <td><code>is:cached</code><br> + <code>-is:running</code></td> + </tr> + <tr> + <td><code>scheme</code></td> + <td>Shows resources transferred via the given scheme.</td> + <td><code>scheme:http</code></td> + </tr> + <tr> + <td><code>has-response-header</code></td> + <td>Shows resources that contain the specified HTTP response header.</td> + <td><code>has-response-header:cache-control</code><br> + <code>has-response-header:X-Firefox-Spdy</code></td> + </tr> + <tr> + <td><code>set-cookie-domain</code></td> + <td>Show the resources that have a <code>Set-Cookie</code> header with a <code>Domain</code> attribute that matches the specified value.</td> + <td><code>set-cookie-domain:.mozilla.org</code></td> + </tr> + <tr> + <td><code>set-cookie-name</code></td> + <td>Show the resources that have a <code>Set-Cookie</code> header with a name that matches the specified value.</td> + <td><code>set-cookie-name:_ga</code></td> + </tr> + <tr> + <td><code>set-cookie-value</code></td> + <td>Show the resources that have a <code>Set-Cookie</code> header with a value that matches the specified value.</td> + <td><code>set-cookie-value:true</code></td> + </tr> + <tr> + <td><code>regexp</code></td> + <td>Show the resources having a URL that matches the given {{Glossary("regular expression")}}.</td> + <td><code>regexp:\d{5}<br> + regexp:mdn|mozilla</code></td> + </tr> + </thead> +</table> + +<h3 id="Context_menu">Context menu</h3> + +<p>Context-clicking on a row in the list displays a context menu with the following options:</p> + +<ul> + <li>Copy URL</li> + <li>Copy URL Parameters (new in Firefox 40)</li> + <li>Copy POST Data (new in Firefox 40, only for POST requests)</li> + <li>Copy as cURL</li> + <li>Copy Request Headers (new in Firefox 40)</li> + <li>Copy Response Headers (new in Firefox 40)</li> + <li>Copy Response (new in Firefox 40)</li> + <li>Copy Image as Data URI (only for images)</li> + <li>Copy All As HAR (new in Firefox 41)</li> + <li>Save All As HAR (new in Firefox 41)</li> + <li>Save Image As (new in Firefox 55, only for images)</li> + <li>Edit and Resend</li> + <li>Open in New Tab</li> + <li>Start <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Performance Analysis</a> for the page</li> +</ul> + +<h4 id="Edit_and_Resend">Edit and Resend</h4> + +<p>This option opens an editor enabling you to edit the request's method, URL, parameters, and headers, and resend the request.</p> + +<h4 id="Copy_as_cURL">Copy as cURL</h4> + +<p>This option copies the network request to the clipboard as a <a href="http://curl.haxx.se/">cURL</a> command, so you can execute it from a command line. The command may include the following options:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>-X [METHOD]</code></td> + <td>If the method is not GET or POST</td> + </tr> + <tr> + <td><code>--data</code></td> + <td>For URL encoded request parameters</td> + </tr> + <tr> + <td><code>--data-binary</code></td> + <td>For multipart request parameters</td> + </tr> + <tr> + <td><code>--http/VERSION</code></td> + <td>If the HTTP version is not 1.1</td> + </tr> + <tr> + <td><code>-I</code></td> + <td>If the method is HEAD</td> + </tr> + <tr> + <td><code>-H</code></td> + <td> + <p>One for each request header.</p> + + <p>From Firefox 34, if the "Accept-Encoding" header is present, the cURL command will include <code>--compressed</code> instead of <code>-H "Accept-Encoding: gzip, deflate"</code>. This means that the response will be automatically decompressed.</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="CopySave_All_As_HAR">Copy/Save All As HAR</h4> + +<div class="geckoVersionNote"> +<p>New in Firefox 41.</p> +</div> + +<p>These options create an <a href="https://w3c.github.io/web-performance/specs/HAR/Overview.html">HTTP Archive</a> (HAR) for all requests listed. The HAR format enables you to export detailed information about network requests. 'Copy All As HAR' copies the data to the clipboard, 'Save All As HAR' opens a dialog allowing you to save the archive to disk.</p> + +<h2 id="Network_request_details">Network request details</h2> + +<p>Clicking on a row displays a new pane in the right-hand side of the network monitor, which provides more detailed information about the request.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13274/nm-headers-annotated.png" style="display: block; height: 436px; margin-left: auto; margin-right: auto; width: 935px;"></p> + +<p>The tabs at the top of this pane enable you to switch between the following pages:</p> + +<ul> + <li><strong>Headers</strong></li> + <li><strong>Cookies</strong></li> + <li><strong>Params</strong></li> + <li><strong>Response</strong></li> + <li><strong>Timings</strong></li> + <li><strong>Security </strong>(only for secure pages)</li> + <li><strong>Preview</strong> (only if the content type is HTML) (Removed in Firefox 55)</li> +</ul> + +<p>Clicking the icon at the right-hand end of the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a> closes the details pane and returns you to the list view.</p> + +<h3 id="Headers">Headers</h3> + +<p>This tab lists basic information about the request:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15013/headers-updated-2.png" style="display: block; height: 439px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<p>This includes:</p> + +<ul> + <li>request URL</li> + <li>request method</li> + <li>remote IP address and port <em>(new in Firefox 39)</em></li> + <li>status code with link to MDN doc (if available)</li> + <li>the HTTP request and response headers that were sent</li> + <li>a button to <a href="/en-US/docs/Tools/Network_Monitor#Edit_and_Resend">edit and resend</a> the request</li> +</ul> + +<p>You can filter the headers that are displayed:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13244/nm-headers-filtered.png" style="display: block; height: 516px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<div class="geckoVersionNote"> +<p>New in Firefox 54</p> +</div> + +<p>Besides each header is a <em>[Learn More]</em> link referring to the <a href="/en-US/docs/Web/HTTP/Headers">documentation of the HTTP headers</a>.</p> + +<h3 id="Cookies">Cookies</h3> + +<p>This tab lists full details of any cookies sent with the request or response:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13240/nm-cookies.png" style="display: block; height: 464px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<p>As with headers, you can filter the list of cookies displayed.</p> + +<h3 id="Params">Params</h3> + +<p>This tab displays the GET parameters and POST data of a request:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13254/nm-params.png" style="display: block; height: 462px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<h3 id="Response">Response</h3> + +<p>The complete content of the response. If the response is HTML, JS, or CSS, it will be shown as text:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13258/nm-response.png" style="display: block; height: 462px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<p>If the response is JSON, it will be shown as an inspectable object.</p> + +<p>If the response is an image, the tab displays a preview:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13260/nm-response-image.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<h3 id="Timings">Timings</h3> + +<p>The Timings tab breaks a network request down into the following subset of the stages defined in the <a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">HTTP Archive</a> specification:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Name</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>Blocked</td> + <td> + <p>Time spent in a queue waiting for a network connection.</p> + + <p>The browser imposes a limit on the number of simultaneous connections that can be made to a single server. In Firefox this defaults to 6, but can be changed using the <code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code> preference. If all connections are in use, the browser can't download more resources until a connection is released.</p> + </td> + </tr> + <tr> + <td>DNS resolution</td> + <td>Time taken to resolve a host name.</td> + </tr> + <tr> + <td>Connecting</td> + <td>Time taken to create a TCP connection.</td> + </tr> + <tr> + <td>Sending</td> + <td>Time taken to send the HTTP request to the server.</td> + </tr> + <tr> + <td>Waiting</td> + <td>Waiting for a response from the server.</td> + </tr> + <tr> + <td>Receiving</td> + <td>Time taken to read the entire response from the server (or cache).</td> + </tr> + </tbody> +</table> + +<p>It presents a more detailed, annotated, view of the timeline bar for that request showing how the total wait time is split into the various stages:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13264/nm-timings.png" style="display: block; height: 466px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<h3 id="Security">Security</h3> + +<p>If the site is being served over HTTPS, you get an extra tab labeled "Security". This contains details about the secure connection used including the protocol, the cipher suite, and certificate details:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13262/nm-security.png" style="display: block; height: 231px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<p>The Security tab shows a warning for security weaknesses. Currently it warns you about two weaknesses:</p> + +<ol> + <li>Using SSLv3 instead of TLS</li> + <li>Using the RC4 cipher</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10165/security-warning.png" style="display: block; height: 93px; margin-left: auto; margin-right: auto; width: 591px;"></p> + +<h3 id="Preview">Preview</h3> + +<p>Removed in Firefox 55.</p> + +<p>If the file type is HTML another tab appears labeled "Preview". This renders just that HTML:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13256/nm-preview.png" style="display: block; height: 474px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<h2 id="Pausing_and_resume_network_traffic_recording">Pausing and resume network traffic recording</h2> + +<p>In Firefox 58+, the Network Monitor has a button that pauses and resumes recording of the current page's network traffic. This is useful in situations where, for example, you are trying to get a stable view of a page for debugging purposes, but under normal circumstances the view keeps evolving due to persistent network requests. The pause button allows you to look at a certain snapshot.</p> + +<p>The button can be found at the far left of the main Network Monitor toolbar, and looks like a typical pause button — <img alt="" src="https://mdn.mozillademos.org/files/15625/pause-icon.png" style="height: 23px; width: 34px;">.</p> + +<p>you can see it here in context:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15624/play-pause-network-traffic.png" style="border-style: solid; border-width: 1px; display: block; height: 305px; margin: 0px auto; width: 930px;"></p> + +<p>Once pressed, the button changes to a play icon, and you can toggle network traffic recording back on by pressing it again.</p> + +<h2 id="Performance_analysis">Performance analysis</h2> + +<p>The Network Monitor includes a performance analysis tool, to help show you how long the browser takes to download the different parts of your site.<br> + <br> + To run the performance analysis tool click the stopwatch icon in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p> + +<p>(Alternatively, if you have only just opened the Network Monitor, so it's not yet populated with the list of requests, you'll get a stopwatch icon in the main window.)</p> + +<p>The Network Monitor then loads the site twice: once with an empty browser cache, and once with a primed browser cache. This simulates the first time a user visits your site, and subsequent visits. It displays the results for each run side by side, or vertically if the browser window is narrow:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12864/nm-performance.png" style="display: block; height: 1028px; margin-left: auto; margin-right: auto; width: 691px;"></p> + +<p>The results for each run are summarised in a table and a pie chart. The tables group resources by type, and show the total size of each resource and the total time it took to load them. The accompanying pie chart shows the relative size of each resource type.</p> + +<p>To get back to the Network Monitor's list of network requests click the "Back" button on the left.</p> + +<p>Clicking on a slice of the pie takes you to the Network Monitor for that run, with a filter automatically applied to see <a href="/en-US/docs/Tools/Network_Monitor#Filtering_by_content_type">only that resource type</a>.</p> diff --git a/files/fa/tools/web_console/index.html b/files/fa/tools/web_console/index.html new file mode 100644 index 0000000000..481b81950d --- /dev/null +++ b/files/fa/tools/web_console/index.html @@ -0,0 +1,37 @@ +--- +title: کنسول وب +slug: Tools/Web_Console +translation_of: Tools/Web_Console +--- +<p dir="rtl">کنسول وب:</p> + +<ol dir="rtl"> + <li>گزارش های مرتبط با یک صفحه وب: درخواست های شبکه، جاوا اسکریپت، CSS، اخطار و خطاهای امنیتی، اخطار ها و پیام های صریح کد جاوا اسکریپت درون صفحه</li> + <li>شما را قادر می کند به تعامل با یک صفحه وب، با اجرای عبارات جاوا اسکریپت در محتوای صفحه</li> +</ol> + +<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Web_Console/Opening_the_Web_Console">باز کردن کنسول وب</a></dt> + <dd>چگونگی شروع استفاده از کنسول وب.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">مترجم خط فرمان</a></dt> + <dd>چگونگی تعامل با یک سند بوسیله کنسول.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Split_console">انشعاب کنسول</a></dt> + <dd>استفاده از کنسول در کنار ابزار دیگر.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Web_Console/Console_messages">پیام های کسنول</a></dt> + <dd>جزئیات پیام های کنسول وب.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Rich_output">خروجی توانمند</a></dt> + <dd><span class="short_text" id="result_box" lang="fa"><span>مشاهده</span> <span>و تعامل با اشیاء</span> <span>وارد شده توسط</span> <span>کنسول.</span></span></dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Keyboard_shortcuts">میانبر های صفحه کلید</a></dt> + <dd>مرجع میانبر..</dd> +</dl> +</div> +</div> diff --git a/files/fa/web/api/animationevent/animationevent/index.html b/files/fa/web/api/animationevent/animationevent/index.html new file mode 100644 index 0000000000..cbdb74c9e8 --- /dev/null +++ b/files/fa/web/api/animationevent/animationevent/index.html @@ -0,0 +1,67 @@ +--- +title: AnimationEvent() +slug: Web/API/AnimationEvent/AnimationEvent +translation_of: Web/API/AnimationEvent/AnimationEvent +--- +<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p> + +<p>The <code><strong>AnimationEvent(نمای پویا)</strong></code> constructor returns a newly created {{domxref("AnimationEvent")}}, representing an event in relation with an animation.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>animationEvent</em> = new AnimationEvent(نمای پویا, {animationName: <em>aPropertyName</em>, + elapsedTime : <em>aFloat</em>, + pseudoElement: <em>aPseudoElementName</em>}); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<p><em>The <code>AnimationEvent()</code> constructor also inherits arguments from {{domxref("Event.Event", "Event()")}}.</em></p> + +<dl> + <dt><code>type</code></dt> + <dd>A {{domxref("DOMString")}} representing the name of the type of the <code>AnimationEvent</code>. It is case-sensitive and can be: <code>'animationstart'</code>, <code>'animationend'</code>, or <code>'animationiteration'</code>.</dd> + <dt><code>animationName</code> {{optional_inline}}</dt> + <dd>A {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition. It defaults to <code>""</code>.</dd> + <dt><code>elapsedTime</code> {{optional_inline}}</dt> + <dd>A <code>float</code> giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an <code>"animationstart"</code> event, <code>elapsedTime</code> is <code>0.0</code> unless there was a negative value for {{cssxref("animation-delay")}}, in which case the event will be fired with <code>elapsedTime</code> containing <code>(-1 * </code><em>delay</em><code>)</code>. It defaults to <code>0.0</code>.</dd> + <dt><code>pseudoElement</code> {{optional_inline}}</dt> + <dd>Is a {{domxref("DOMString")}}, starting with <code>"::"</code>, containing the name of the <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="Learn more about pseudo-elements.">pseudo-element</a> the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: <code>""</code>. It defaults to <code>""</code>.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>A new {{domxref("AnimationEvent")}}, initialized per any provided options.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations', '#dom-animationevent-animationevent', 'AnimationEvent()') }}</td> + <td>{{ Spec2('CSS3 Animations')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.AnimationEvent.AnimationEvent")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li> + <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}</li> + <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li> +</ul> diff --git a/files/fa/web/api/animationevent/index.html b/files/fa/web/api/animationevent/index.html new file mode 100644 index 0000000000..b89a47286d --- /dev/null +++ b/files/fa/web/api/animationevent/index.html @@ -0,0 +1,79 @@ +--- +title: AnimationEvent +slug: Web/API/AnimationEvent +tags: + - API + - Experimental + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Animations +translation_of: Web/API/AnimationEvent +--- +<div>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</div> + +<p>The <strong><code>AnimationEvent</code></strong> interface represents events providing information related to <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">animations</a>.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}</dt> + <dd>Creates an <code>AnimationEvent</code> event with the given parameters.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>Also inherits properties from its parent {{domxref("Event")}}</em>.</p> + +<dl> + <dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition.</dd> + <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt> + <dd>Is a <code>float</code> giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an <code>animationstart</code> event, <code>elapsedTime</code> is <code>0.0</code> unless there was a negative value for {{cssxref("animation-delay")}}, in which case the event will be fired with <code>elapsedTime</code> containing <code>(-1 * <var>delay</var>)</code>.</dd> + <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}}, starting with <code>'::'</code>, containing the name of the <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> the animation runs on. If the animation doesn't run on a pseudo-element but on the element, an empty string: <code>''</code>.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Also inherits methods from its parent {{domxref("Event")}}</em>.</p> + +<dl> + <dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt> + <dd>Initializes a <code>AnimationEvent</code> created using the deprecated {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} method.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Animations", "#interface-animationevent", "AnimationEvent")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.AnimationEvent")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li> + <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li> +</ul> diff --git a/files/fa/web/api/blob/index.html b/files/fa/web/api/blob/index.html new file mode 100644 index 0000000000..e2de156275 --- /dev/null +++ b/files/fa/web/api/blob/index.html @@ -0,0 +1,129 @@ +--- +title: Blob +slug: Web/API/Blob +tags: + - API + - Files + - NeedsMobileBrowserCompatibility + - NeedsTranslation + - Reference + - TopicStub + - WebAPI +translation_of: Web/API/Blob +--- +<div>{{APIRef("File API")}}</div> + +<p>A <code>Blob</code> object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The {{domxref("File")}} interface is based on <code>Blob</code>, inheriting blob functionality and expanding it to support files on the user's system.</p> + +<p>To construct a <code>Blob</code> from other non-blob objects and data, use the {{domxref("Blob.Blob", "Blob()")}} constructor. To create a blob that contains a subset of another blob's data, use the {{domxref("Blob.slice()", "slice()")}} method. To obtain a <code>Blob</code> object for a file on the user's file system, see the {{domxref("File")}} documentation.</p> + +<p>The APIs accepting <code>Blob</code> objects are also listed on the {{domxref("File")}} documentation.</p> + +<div class="note"> +<p><strong>Note:</strong> The <code>slice()</code> method had initially taken <code>length</code> as the second argument to indicate the number of bytes to copy into the new <code>Blob</code>. If you specified values such that <code>start + length</code> exceeded the size of the source <code>Blob</code>, the returned <code>Blob</code> contained data from the start index to the end of the source <code>Blob</code>.</p> +</div> + +<div class="note"><strong>Note:</strong> Be aware that the <code>slice()</code> method has vendor prefixes on some browsers and versions: <code>blob.mozSlice()</code> for Firefox 12 and earlier and <code>blob.webkitSlice()</code> in Safari. An old version of the <code>slice()</code> method, without vendor prefixes, had different semantics, and is obsolete. The support for <code>blob.mozSlice()</code> has been dropped with Firefox 30.</div> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}</dt> + <dd>Returns a newly created <code>Blob</code> object whose content consists of the concatenation of the array of values given in parameter.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt> + <dd>The size, in bytes, of the data contained in the <code>Blob</code> object.</dd> + <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt> + <dd>A string indicating the MIME type of the data contained in the <code>Blob</code>. If the type is unknown, this string is empty.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt> + <dd>Returns a new <code>Blob</code> object containing the data in the specified range of bytes of the source <code>Blob</code>.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Blob_constructor_example_usage">Blob constructor example usage</h3> + +<p>The {{domxref("Blob.Blob", "Blob() constructor")}} allows one to create blobs from other objects. For example, to construct a blob from string:</p> + +<pre class="brush: js">var debug = {hello: "world"}; +var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</pre> + +<div class="warning"> +<p>Before the Blob constructor was available, this could be accomplished through the {{domxref("BlobBuilder")}} API, which is now deprecated:</p> + +<pre class="brush: js">var builder = new BlobBuilder(); +var fileParts = ['<a id="a"><b id="b">hey!</b></a>']; +builder.append(fileParts[0]); +var myBlob = builder.getBlob('text/xml'); +</pre> +</div> + +<h3 id="Example_for_creating_a_URL_to_a_typed_array_using_a_blob">Example for creating a URL to a typed array using a blob</h3> + +<p>The following code:</p> + +<pre class="brush: js">var typedArray = GetTheTypedArraySomehow(); +var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'}); // pass a useful mime type here +var url = URL.createObjectURL(blob); +// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf +// now you can use the url in any context that regular URLs can be used in, for example img.src, etc. +</pre> + +<h3 id="Example_for_extracting_data_from_a_Blob">Example for extracting data from a Blob</h3> + +<p>One way to read content from a Blob is to use a {{domxref("FileReader")}}. The following code reads the content of a Blob as a typed array:</p> + +<pre class="brush: js">var reader = new FileReader(); +reader.addEventListener("loadend", function() { + // reader.result contains the contents of blob as a typed array +}); +reader.readAsArrayBuffer(blob);</pre> + +<p>Another way to read content from a Blob is to use a Response. The following code reads the content of a Blob as text:</p> + +<pre class="brush: js">var text = await (new Response(blob)).text(); +</pre> + +<p>By using other methods of {{domxref("FileReader")}}, it is possible to read the contents of a Blob as a string or a data URL.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('File API','#blob','Blob')}}</td> + <td>{{Spec2('File API')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Blob")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("BlobBuilder")}}</li> + <li>{{domxref("FileReader")}}</li> + <li>{{domxref("File")}}</li> + <li>{{domxref("URL.createObjectURL")}}</li> + <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> +</ul> diff --git a/files/fa/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/fa/web/api/canvasrenderingcontext2d/createlineargradient/index.html new file mode 100644 index 0000000000..d7a1e1bde6 --- /dev/null +++ b/files/fa/web/api/canvasrenderingcontext2d/createlineargradient/index.html @@ -0,0 +1,114 @@ +--- +title: CanvasRenderingContext2D.createLinearGradient() +slug: Web/API/CanvasRenderingContext2D/createLinearGradient +translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient +--- +<div>{{APIRef}}</div> + +<p>The <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createLinearGradient()</code></strong> method of the Canvas 2D API creates a gradient along the line connecting two given coordinates.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14681/mdn-canvas-linearGradient.png" style="height: 121px; width: 264px;"></p> + +<p>This method returns a linear {{domxref("CanvasGradient")}}. To be applied to a shape, the gradient must first be assigned to the {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} or {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}} properties.</p> + +<div class="note"> +<p><strong>Note:</strong> Gradient coordinates are global, i.e., relative to the current coordinate space. When applied to a shape, the coordinates are NOT relative to the shape's coordinates.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">CanvasGradient <var>ctx</var>.createLinearGradient(<var>x0</var>, <var>y0</var>, <var>x1</var>, <var>y1</var>); +</pre> + +<p>The <code>createLinearGradient()</code> method is specified by four parameters defining the start and end points of the gradient line.</p> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>x0</code></dt> + <dd>The x-axis coordinate of the start point.</dd> + <dt><code>y0</code></dt> + <dd>The y-axis coordinate of the start point.</dd> + <dt><code>x1</code></dt> + <dd>The x-axis coordinate of the end point.</dd> + <dt><code>y1</code></dt> + <dd>The y-axis coordinate of the end point.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<dl> + <dt>{{domxref("CanvasGradient")}}</dt> + <dd>A linear <code>CanvasGradient</code> initialized with the specified line.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Filling_a_rectangle_with_a_linear_gradient">Filling a rectangle with a linear gradient</h3> + +<p>This example initializes a linear gradient using the <code>createLinearGradient()</code> method. Three color stops between the gradient's start and end points are then created. Finally, the gradient is assigned to the canvas context, and is rendered to a filled rectangle.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[7]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +// Create a linear gradient +// The start gradient point is at x=20, y=0 +// The end gradient point is at x=220, y=0 +var gradient = ctx.createLinearGradient(20,0, 220,0); + +// Add three color stops +gradient.addColorStop(0, 'green'); +gradient.addColorStop(.5, 'cyan'); +gradient.addColorStop(1, 'green'); + +// Set the fill style and draw a rectangle +ctx.fillStyle = gradient; +ctx.fillRect(20, 20, 200, 100); +</pre> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('Filling_a_rectangle_with_a_linear_gradient', 700, 180) }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}</p> + +<h3 id="Gecko-specific_notes">Gecko-specific notes</h3> + +<ul> + <li>Starting with Gecko 2.0 {{geckoRelease("2.0")}}, specifying non-finite values now throws <code>NOT_SUPPORTED_ERR</code> instead of <code>SYNTAX_ERR</code>.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The interface defining this method: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li> +</ul> diff --git a/files/fa/web/api/canvasrenderingcontext2d/index.html b/files/fa/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..3b9cc7021e --- /dev/null +++ b/files/fa/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,424 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Games + - Graphics + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CanvasRenderingContext2D +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary">The <code><strong>CanvasRenderingContext2D</strong></code> interface, part of the <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>, provides the 2D rendering context for the drawing surface of a {{HTMLElement("canvas")}} element. It is used for drawing shapes, text, images, and other objects.</span></p> + +<p>See the interface's properties and methods in the sidebar and below. The <a href="/en-US/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">Canvas tutorial</a> has more explanation, examples, and resources, as well.</p> + +<h2 id="Basic_example">Basic example</h2> + +<p>To get a <code>CanvasRenderingContext2D</code> instance, you must first have an HTML <code><canvas></code> element to work with:</p> + +<pre class="brush: html"><canvas id="my-house" width="300" height="300"></canvas></pre> + +<p>To get the canvas' 2D rendering context, call {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} on the <code><canvas></code> element, supplying <code>'2d'</code> as the argument:</p> + +<pre class="brush: js">const canvas = document.getElementById('my-house'); +const ctx = canvas.getContext('2d'); +</pre> + +<p>With the context in hand, you can draw anything you like. This code draws a house:</p> + +<pre class="brush: js">// Set line width +ctx.lineWidth = 10; + +// Wall +ctx.strokeRect(75, 140, 150, 110); + +// Door +ctx.fillRect(130, 190, 40, 60); + +// Roof +ctx.beginPath(); +ctx.moveTo(50, 140); +ctx.lineTo(150, 60); +ctx.lineTo(250, 140); +ctx.closePath(); +ctx.stroke(); +</pre> + +<p>The resulting drawing looks like this:</p> + +<p>{{EmbedLiveSample("Basic_example", 700, 330)}}</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="Drawing_rectangles">Drawing rectangles</h3> + +<p>There are three methods that immediately draw rectangles to the canvas.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt> + <dd>Sets all pixels in the rectangle defined by starting point <em>(x, y)</em> and size <em>(width, height)</em> to transparent black, erasing any previously drawn content.</dd> + <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt> + <dd>Draws a filled rectangle at <em>(x, y) </em>position whose size is determined by <em>width</em> and <em>height</em>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt> + <dd>Paints a rectangle which has a starting point at <em>(x, y)</em> and has a<em> w</em> width and an <em>h</em> height onto the canvas, using the current stroke style.</dd> +</dl> + +<h3 id="Drawing_text">Drawing text</h3> + +<p>The following methods draw text. See also the {{domxref("TextMetrics")}} object for text properties.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt> + <dd>Draws (fills) a given text at the given (x, y) position.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt> + <dd>Draws (strokes) a given text at the given (x, y)<em> </em>position.</dd> + <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt> + <dd>Returns a {{domxref("TextMetrics")}} object.</dd> +</dl> + +<h3 id="Line_styles">Line styles</h3> + +<p>The following methods and properties control how lines are drawn.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt> + <dd>Width of lines. Default <code>1.0</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt> + <dd>Type of endings on the end of lines. Possible values: <code>butt</code> (default), <code>round</code>, <code>square</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt> + <dd>Defines the type of corners where two lines meet. Possible values: <code>round</code>, <code>bevel</code>, <code>miter</code> (default).</dd> + <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt> + <dd>Miter limit ratio. Default <code>10</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt> + <dd>Returns the current line dash pattern array containing an even number of non-negative numbers.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt> + <dd>Sets the current line dash pattern.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt> + <dd>Specifies where to start a dash array on a line.</dd> +</dl> + +<h3 id="Text_styles">Text styles</h3> + +<p>The following properties control how text is laid out.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt> + <dd>Font setting. Default value <code>10px sans-serif</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt> + <dd>Text alignment setting. Possible values: <code>start</code> (default), <code>end</code>, <code>left</code>, <code>right</code>, <code>center</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt> + <dd>Baseline alignment setting. Possible values: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (default), <code>ideographic</code>, <code>bottom</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt> + <dd>Directionality. Possible values: <code>ltr</code>, <code>rtl</code>, <code>inherit</code> (default).</dd> +</dl> + +<h3 id="Fill_and_stroke_styles">Fill and stroke styles</h3> + +<p>Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt> + <dd>Color or style to use inside shapes. Default <code>#000</code> (black).</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt> + <dd>Color or style to use for the lines around shapes. Default <code>#000</code> (black).</dd> +</dl> + +<h3 id="Gradients_and_patterns">Gradients and patterns</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt> + <dd>Creates a linear gradient along the line given by the coordinates represented by the parameters.</dd> + <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt> + <dd>Creates a radial gradient given by the coordinates of the two circles represented by the parameters.</dd> + <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt> + <dd>Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.</dd> +</dl> + +<h3 id="Shadows">Shadows</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt> + <dd>Specifies the blurring effect. Default: <code>0</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt> + <dd>Color of the shadow. Default: fully-transparent black.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt> + <dd>Horizontal distance the shadow will be offset. Default: <code>0</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt> + <dd>Vertical distance the shadow will be offset. Default: <code>0</code>.</dd> +</dl> + +<h3 id="Paths">Paths</h3> + +<p>The following methods can be used to manipulate paths of objects.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt> + <dd>Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt> + <dd>Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.</dd> + <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt> + <dd>Moves the starting point of a new sub-path to the (x, y) coordinates.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt> + <dd>Connects the last point in the current sub-path to the specified (x, y) coordinates with a straight line.</dd> + <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt> + <dd>Adds a cubic Bézier curve to the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt> + <dd>Adds a quadratic Bézier curve to the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt> + <dd>Adds a circular arc to the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt> + <dd>Adds an arc to the current path with the given control points and radius, connected to the previous point by a straight line.</dd> + <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}}</dt> + <dd>Adds an elliptical arc to the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt> + <dd>Creates a path for a rectangle at<em> </em>position (x, y) with a size that is determined by <em>width</em> and <em>height</em>.</dd> +</dl> + +<h3 id="Drawing_paths">Drawing paths</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt> + <dd>Fills the current sub-paths with the current fill style.</dd> + <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt> + <dd>Strokes the current sub-paths with the current stroke style.</dd> + <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt> + <dd>If a given element is focused, this method draws a focus ring around the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt> + <dd>Scrolls the current path or a given path into the view.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt> + <dd>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> in the Canvas tutorial.</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt> + <dd>Reports whether or not the specified point is contained in the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt> + <dd>Reports whether or not the specified point is inside the area contained by the stroking of a path.</dd> +</dl> + +<h3 id="Transformations">Transformations</h3> + +<p>Objects in the <code>CanvasRenderingContext2D</code> rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}} {{experimental_inline}}</dt> + <dd>Current transformation matrix ({{domxref("SVGMatrix")}} object).</dd> + <dt>{{domxref("CanvasRenderingContext2D.getTransform")}}</dt> + <dd>Retrieves the current transformation matrix being applied to the context.</dd> + <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt> + <dd>Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.</dd> + <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt> + <dd>Adds a scaling transformation to the canvas units by x horizontally and by y vertically.</dd> + <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt> + <dd>Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.</dd> + <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt> + <dd>Multiplies the current transformation matrix with the matrix described by its arguments.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt> + <dd>Resets the current transform to the identity matrix, and then invokes the <code>transform()</code> method with the same arguments.</dd> + <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt> + <dd>Resets the current transform by the identity matrix.</dd> +</dl> + +<h3 id="Compositing">Compositing</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt> + <dd>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code> (opaque).</dd> + <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt> + <dd>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap.</dd> +</dl> + +<h3 id="Drawing_images">Drawing images</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt> + <dd>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</dd> +</dl> + +<h3 id="Pixel_manipulation">Pixel manipulation</h3> + +<p>See also the {{domxref("ImageData")}} object.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt> + <dd>Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt> + <dd>Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has an <em>sw</em> width and <em>sh</em> height.</dd> + <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt> + <dd>Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.</dd> +</dl> + +<h3 id="Image_smoothing">Image smoothing</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt> + <dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd> +</dl> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingQuality")}} {{experimental_inline}}</dt> + <dd>Allows you to set the quality of image smoothing.</dd> +</dl> + +<h3 id="The_canvas_state">The canvas state</h3> + +<p>The <code>CanvasRenderingContext2D</code> rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt> + <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt> + <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt> + <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd> +</dl> + +<h3 id="Hit_regions">Hit regions</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> + <dd>Adds a hit region to the canvas.</dd> + <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> + <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> + <dd>Removes all hit regions from the canvas.</dd> +</dl> + +<h3 id="Filters">Filters</h3> + +<dl> + <dt>{{experimental_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt> + <dd>Applies a CSS or SVG filter to the canvas, e.g., to change its brightness or bluriness.</dd> +</dl> + +<h2 id="Non-standard_APIs">Non-standard APIs</h2> + +<h3 id="Blink_and_WebKit">Blink and WebKit</h3> + +<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and were removed shortly after Chrome 36</a>.</p> + +<dl> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt> + <dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt> + <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd> +</dl> + +<h3 id="Blink_only">Blink only</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt> + <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd> +</dl> + +<h3 id="WebKit_only">WebKit only</h3> + +<dl> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt> + <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt> + <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt> + <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> +</dl> + +<dl> +</dl> + +<h3 id="Gecko_only">Gecko only</h3> + +<h4 id="Prefixed_APIs">Prefixed APIs</h4> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt> + <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt> + <dd>Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt> + <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt> + <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> +</dl> + +<h4 id="Internal_APIs_chrome-context_only">Internal APIs (chrome-context only)</h4> + +<dl> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt> + <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt> + <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd> +</dl> + +<h3 id="Internet_Explorer">Internet Explorer</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt> + <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#2dcontext", "CanvasRenderingContext2D")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.CanvasRenderingContext2D")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{HTMLElement("canvas")}}</li> +</ul> diff --git a/files/fa/web/api/element/getboundingclientrect/index.html b/files/fa/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..3ec032bead --- /dev/null +++ b/files/fa/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,90 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +translation_of: Web/API/Element/getBoundingClientRect +--- +<div>{{APIRef("DOM")}}</div> + +<p style="direction: rtl;"><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> روال </span></font><strong>Element.getBoundingClientRect() اندازه و محل قرار گیری نسبی یک ایتم را در صفحه باز می گرداند </strong></code></p> + +<p style="direction: rtl;"> </p> + +<h2 id="ترکیب" style="direction: rtl;">ترکیب</h2> + +<pre class="syntaxbox" style="direction: rtl;">var <a href="/en-US/docs/Web/API/DOMRect">domRect</a> = <a href="/en-US/docs/Web/API/Element">element</a>.getBoundingClientRect();</pre> + +<h3 id="Value">Value</h3> + +<p style="direction: rtl;">مقدار بازگشتی تابع {{domxref("DOMRect")}} شی ای می باشد که با اجتماع مسطتیلی که با آیتم {{domxref("Element.getClientRects", "getClientRects()")}} بازگشت می شود.</p> + +<p style="direction: rtl;">The returned value is a {{domxref("DOMRect")}} object which is the union of the rectangles returned by {{domxref("Element.getClientRects", "getClientRects()")}} for the element, i.e., the CSS border-boxes associated with the element. The result is the smallest rectangle which contains the entire element, with read-only <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code> properties describing the overall border-box in pixels. Properties other than <code>width</code> and <code>height</code> are relative to the top-left of the viewport.</p> + +<p>Empty border-boxes are completely ignored. If all the element's border-boxes are empty, then a rectangle is returned with a <code>width</code> and <code>height</code> of zero and where the <code>top</code> and <code>left</code> are the top-left of the border-box for the first CSS box (in content order) for the element.</p> + +<p>The amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the bounding rectangle. This means that the rectangle's boundary edges (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">top, right, bottom, left</span></font>) change their values every time the scrolling position changes (because their values are relative to the viewport and not absolute). If you need the bounding rectangle relative to the top-left corner of the document, just add the current scrolling position to the <code>top</code> and <code>left</code> properties (these can be obtained using {{domxref("window.scrollX")}} and {{domxref("window.scrollY")}}) to get a bounding rectangle which is independent from the current scrolling position.</p> + +<p>Scripts requiring high cross-browser compatibility can use {{domxref("window.pageXOffset")}} and {{domxref("window.pageYOffset")}} instead of <code>window.scrollX</code> and <code>window.scrollY.</code> Scripts without access to these properties can use code like this:</p> + +<pre class="brush:js">// For scrollX +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft +// For scrollY +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.scrollTop == 'number' ? t : document.body).scrollTop +</pre> + +<h2 id="مثال" style="direction: rtl;">مثال</h2> + +<pre class="brush:js">// rect is a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height +var rect = obj.getBoundingClientRect(); +</pre> + +<h2 id="ویژگی_ها" style="direction: rtl;">ویژگی ها</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h3 id="Notes">Notes</h3> + +<p>The returned <code>DOMRect</code> object can be modified in modern browsers. This was not true with older versions which effectively returned <code>DOMRectReadOnly</code>. With IE and Edge, not being able to add missing properties to their returned <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx"><code>ClientRect</code></a>, object prevents backfilling <code>x</code> and <code>y</code>.</p> + +<p>Due to compatibility problems (see below), it is safest to rely on only properties <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code>. </p> + +<p>Properties in the returned <code>DOMRect</code> object are not own properties. While the <code>in</code> operator and <code>for...in</code> will find returned properties, other APIs such as <code>Object.keys()</code> will fail. Moreover, and unexpectedly, the ES2015 and newer features such as <code>Object.assign()</code> and object rest/spread will fail to copy returned properties.</p> + +<pre class="brush: js">rect = elt.getBoundingClientRect() +// The result in emptyObj is {} +emptyObj = Object.assign({}, rect) +emptyObj = { ...rect } +{width, ...emptyObj} = rect +</pre> + +<p><code>DOMRect</code> properties <code>top</code> <code>left</code> <code>right</code> <code>bottom</code> are computed from the other property values.</p> + +<h2 id="سازگاری_با_مرورگر_ها" style="direction: rtl;">سازگاری با مرورگر ها</h2> + +<div class="hidden" style="direction: rtl;">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("api.Element.getBoundingClientRect")}}</p> + +<h2 id="همچنین" style="direction: rtl;">همچنین</h2> + +<ul> + <li><code><a href="/en-US/docs/DOM/element.getClientRects">getClientRects()</a></code></li> + <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li> + <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, an earlier version of <code>DOMRect</code></li> +</ul> diff --git a/files/fa/web/api/element/index.html b/files/fa/web/api/element/index.html new file mode 100644 index 0000000000..a0d4f8ee21 --- /dev/null +++ b/files/fa/web/api/element/index.html @@ -0,0 +1,331 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - DOM Reference + - Element + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web API +translation_of: Web/API/Element +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><strong><code>Element</code></strong> is the most general base class from which all objects in a {{DOMxRef("Document")}} inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from <code>Element</code>.</span> For example, the {{DOMxRef("HTMLElement")}} interface is the base interface for HTML elements, while the {{DOMxRef("SVGElement")}} interface is the basis for all SVG elements. Most functionality is specified further down the class hierarchy.</p> + +<p>Languages outside the realm of the Web platform, like XUL through the <code>XULElement</code> interface, also implement <code>Element</code>.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<p><em>Inherits properties from its parent interface, {{DOMxRef("Node")}}, and by extension that interface's parent, {{DOMxRef("EventTarget")}}. It implements the properties of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, </em>and {{DOMxRef("Animatable")}}.</p> + +<dl> + <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("NamedNodeMap")}} object containing the assigned attributes of the corresponding HTML element.</dd> + <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMTokenList")}} containing the list of class attributes.</dd> + <dt>{{DOMxRef("Element.className")}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the class of the element.</dd> + <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the inner height of the element.</dd> + <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the width of the left border of the element.</dd> + <dt>{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the width of the top border of the element.</dd> + <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the inner width of the element.</dd> + <dt>{{DOMxRef("Element.computedName")}} {{readOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.</dd> + <dt>{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. </dd> + <dt>{{DOMxRef("Element.id")}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the id of the element.</dd> + <dt>{{DOMxRef("Element.innerHTML")}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.</dd> + <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt> + <dd>A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.</dd> + <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt> + <dd>The namespace URI of the element, or <code>null</code> if it is no namespace. + <div class="note"> + <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}</p> + </div> + </dd> + <dt>{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt> + <dd>Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd> + <dt>{{DOMxRef("Element.outerHTML")}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.</dd> + <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt> + <dd>A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd> + <dt>{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt> + <dd>Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd> + <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd> + <dt>{{DOMxRef("Element.scrollLeft")}}</dt> + <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd> + <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd> + <dt>{{DOMxRef("Element.scrollTop")}}</dt> + <dd>A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.</dd> + <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd> + <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd> + <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt> + <dd>Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.</dd> + <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt> + <dd>Returns the shadow root that is hosted by the element, regardless if its open or closed. <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> + <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt> + <dd>Returns the name of the shadow DOM slot the element is inserted in.</dd> + <dt>{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd> + <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("String")}} with the name of the tag for the given element.</dd> + <dt>{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}</dt> + <dd>Returns the {{DOMxRef("UndoManager")}} associated with the element.</dd> + <dt>{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to <code>Element</code>.</p> + +<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p> +</div> + +<h3 id="Properties_included_from_Slotable">Properties included from Slotable</h3> + +<p><em>The <code>Element</code> interface includes the following property, defined on the {{DOMxRef("Slotable")}} mixin.</em></p> + +<dl> + <dt>{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}</dt> + <dd>Returns a {{DOMxRef("HTMLSlotElement")}} representing the {{htmlelement("slot")}} the node is inserted in.</dd> +</dl> + +<h3 id="Handlers" name="Handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("Element.onfullscreenchange")}}</dt> + <dd>An event handler for the {{event("fullscreenchange")}} event, which is sent when the element enters or exits full-screen mode. This can be used to watch both for successful expected transitions, but also to watch for unexpected changes, such as when your app is backgrounded.</dd> + <dt>{{domxref("Element.onfullscreenerror")}}</dt> + <dd>An event handler for the {{event("fullscreenerror")}} event, which is sent when an error occurs while attempting to change into full-screen mode.</dd> +</dl> + +<h4 id="Obsolete_event_handlers">Obsolete event handlers</h4> + +<dl> + <dt>{{DOMxRef("Element.onwheel")}}</dt> + <dd>Returns the event handling code for the {{Event("wheel")}} event. <strong>This is now implemented on {{DOMxRef("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.</strong></dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}<em>, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}<em>, {{DOMxRef("NonDocumentTypeChildNode")}}, </em></em>and {{DOMxRef("Animatable")}}.</em></p> + +<dl> + <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt> + <dd>Registers an event handler to a specific event type on the element.</dd> + <dt>{{DOMxRef("Element.attachShadow()")}}</dt> + <dd>Attatches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.</dd> + <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt> + <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd> + <dt>{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}</dt> + <dd>Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.</dd> + <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> + <dd>Creates a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.</dd> + <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt> + <dd>Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.</dd> + <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt> + <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.</dd> + <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt> + <dd>Returns an array of Animation objects currently active on the element.</dd> + <dt>{{DOMxRef("Element.getAttribute()")}}</dt> + <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd> + <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt> + <dd>Returns an array of attribute names from the current element.</dd> + <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt> + <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd> + <dt>{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.</dd> + <dt>{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> + <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.</dd> + <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt> + <dd>Returns the size of an element and its position relative to the viewport.</dd> + <dt>{{DOMxRef("Element.getClientRects()")}}</dt> + <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd> + <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt> + <dd>Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.</dd> + <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt> + <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.</dd> + <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt> + <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd> + <dt>{{DOMxRef("Element.hasAttribute()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd> + <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd> + <dt>{{DOMxRef("Element.hasAttributes()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd> + <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt> + <dd>Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.</dd> + <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt> + <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd> + <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt> + <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd> + <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt> + <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd> + <dt>{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd> + <dt>{{DOMxRef("Element.querySelector()")}}</dt> + <dd>Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.</dd> + <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt> + <dd>Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.</dd> + <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt> + <dd>Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.</dd> + <dt>{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}</dt> + <dd>Removes the element from the children list of its parent.</dd> + <dt>{{DOMxRef("Element.removeAttribute()")}}</dt> + <dd>Removes the named attribute from the current node.</dd> + <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt> + <dd>Removes the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>Removes the node representation of the named attribute from the current node.</dd> + <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt> + <dd>Removes an event listener from the element.</dd> + <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt> + <dd>Asynchronously asks the browser to make the element full-screen.</dd> + <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt> + <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd> +</dl> + +<dl> + <dt>{{domxref("Element.scroll()")}}</dt> + <dd>Scrolls to a particular set of coordinates inside a given element.</dd> + <dt>{{domxref("Element.scrollBy()")}}</dt> + <dd>Scrolls an element by the given amount.</dd> + <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt> + <dd>Scrolls the page until the element gets into the view.</dd> + <dt>{{domxref("Element.scrollTo()")}}</dt> + <dd>Scrolls to a particular set of coordinates inside a given element.</dd> + <dt>{{DOMxRef("Element.setAttribute()")}}</dt> + <dd>Sets the value of a named attribute of the current node.</dd> + <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt> + <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>Sets the node representation of the named attribute from the current node.</dd> + <dt>{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> + <dd>Sets the node representation of the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}</dt> + <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd> + <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt> + <dd>Designates a specific element as the capture target of future <a href="/en-US/docs/Web/API/Pointer_events">pointer events</a>.</dd> + <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt> + <dd>Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Web Animations", '', '')}}</td> + <td>{{Spec2("Web Animations")}}</td> + <td>Added the <code>getAnimations()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Undo Manager', '', 'Element')}}</td> + <td>{{Spec2('Undo Manager')}}</td> + <td>Added the <code>undoScope</code> and <code>undoManager</code> properties.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br> + Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br> + Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td>Added the following methods: <code>querySelector()</code> and <code>querySelectorAll()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Added the <code>requestPointerLock()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Added the <code>requestFullscreen()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Added the following properties: <code>innerHTML</code>, and <code>outerHTML</code>.<br> + Added the following method: <code>insertAdjacentHTML()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Added the following properties: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br> + Added the following methods: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, <code>scroll()</code>, <code>scrollBy()</code>, <code>scrollTo()</code> and <code>scrollIntoView()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Added inheritance of the {{DOMxRef("ElementTraversal")}} interface.</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Added the following methods: <code>closest()</code>, <code>insertAdjacentElement()</code> and <code>insertAdjacentText()</code>.<br> + Moved <code>hasAttributes()</code> from the <code>Node</code> interface to this one.</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-element", "Element")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Removed the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br> + Modified the return value of <code>getElementsByTagName()</code> and <code>getElementsByTagNameNS()</code>.<br> + Removed the <code>schemaTypeInfo</code> property.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br> + Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>The <code>normalize()</code> method has been moved to {{DOMxRef("Node")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Element")}}</p> diff --git a/files/fa/web/api/gamepadevent/index.html b/files/fa/web/api/gamepadevent/index.html new file mode 100644 index 0000000000..292215959f --- /dev/null +++ b/files/fa/web/api/gamepadevent/index.html @@ -0,0 +1,64 @@ +--- +title: GamepadEvent +slug: Web/API/GamepadEvent +translation_of: Web/API/GamepadEvent +--- +<pre class="syntaxbox notranslate">{{APIRef("Gamepad API")}}</pre> + +<p>The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events {{domxref("Window.gamepadconnected")}} and {{domxref("Window.gamepaddisconnected")}} are fired in response to.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("GamepadEvent.GamepadEvent","GamepadEvent()")}}</dt> + <dd>Returns a new <code>GamepadEvent</code> object.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{ domxref("GamepadEvent.gamepad") }} {{readonlyInline}}</dt> + <dd>Returns a {{ domxref("Gamepad") }} object, providing access to the associated gamepad data for the event fired.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>The gamepad property being called on a fired {{domxref("Window.gamepadconnected")}} event.</p> + +<pre class="brush: js notranslate">window.addEventListener("gamepadconnected", function(e) { + console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.", + e.gamepad.index, e.gamepad.id, + e.gamepad.buttons.length, e.gamepad.axes.length); +});</pre> + +<p>And on a {{domxref("Window.gamepaddisconnected")}} event.</p> + +<pre class="brush: js notranslate">window.addEventListener("gamepaddisconnected", function(e) { + console.log("Gamepad disconnected from index %d: %s", + e.gamepad.index, e.gamepad.id); +});</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("Gamepad", "#gamepadevent-interface", "GamepadEvent")}}</td> + <td>{{Spec2("Gamepad")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("api.GamepadEvent")}}</p> + +<h2 id="See_also">See also</h2> + +<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p> diff --git a/files/fa/web/api/index.html b/files/fa/web/api/index.html new file mode 100644 index 0000000000..1feb708b20 --- /dev/null +++ b/files/fa/web/api/index.html @@ -0,0 +1,13 @@ +--- +title: Web APIs +slug: Web/API +tags: + - API + - JavaScript + - Reference + - Web +translation_of: Web/API +--- +<p dir="rtl">در هنگام نوشتن کد برای برنامه های تحت وب به وسیله جاواسکریپت API های بسیار زیادی وجود دارند. در زیر لیستی از تمام رابط ها که شما ممکن است در هنگام توسعه برنامه های وب ویا سایت های خودتان بخواهید از آنها استفاده کنید موجود است.</p> + +<div>{{APIListAlpha}} </div> diff --git a/files/fa/web/api/mediatrackconstraints/index.html b/files/fa/web/api/mediatrackconstraints/index.html new file mode 100644 index 0000000000..11f3c9e37f --- /dev/null +++ b/files/fa/web/api/mediatrackconstraints/index.html @@ -0,0 +1,264 @@ +--- +title: MediaTrackConstraints +slug: Web/API/MediaTrackConstraints +translation_of: Web/API/MediaTrackConstraints +--- +<div><font><font>{{APIRef ("ضبط رسانه و جریان")}}</font></font></div> + +<p><strong><code>MediaTrackConstraints</code></strong><font><font>فرهنگ لغت استفاده می شود برای توصیف مجموعه ای از قابلیت ها و ارزش یا ارزش هر یک می تواند در را. </font><font>یک فرهنگ لغت محدودیتی به {{domxref ("MediaStreamTrack.applyConstraints"، "applyConstraints ()")}}}} منتقل می شود تا یک اسکریپت بتواند مجموعه ای از مقادیر یا محدوده دقیق (موردنیاز) یا مقادیر یا محدوده های مورد نظر برای مسیر و مجموعه اخیر محدودیت های سفارشی درخواست شده توسط {{domxref ("MediaStreamTrack.getConstraints"، "getConstraints ()")}}} بازیابی می شود.</font></font></p> + +<p><font><font>برای هر محدودیت، می توانید به طور معمول مقدار دقیق مورد نیاز خود را، ارزش ایده آل که می خواهید، محدوده ای از مقادیر قابل قبول و / یا یک مقدار که می خواهید تا حد ممکن نزدیک باشد، مشخص کنید. </font><font>خصوصیات بسته به نوع ملک محدود می شود.</font></font></p> + +<p>To learn more about how constraints work, see <a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Capabilities, constraints, and settings</a>.</p> + +<h2 id="Properties">Properties</h2> + +<p>Some combination—but not necessarily all—of the following properties will exist on the object.</p> + +<h3 id="Properties_of_all_media_tracks">Properties of all media tracks</h3> + +<dl> + <dt>{{domxref("MediaTrackConstraints.deviceId", "deviceId")}}</dt> + <dd>A {{domxref("ConstrainDOMString")}} object specifying a device ID or an array of device IDs which are acceptable and/or required.</dd> + <dt>{{domxref("MediaTrackConstraints.groupId", "groupId")}}</dt> + <dd>A {{domxref("ConstrainDOMString")}} object specifying a group ID or an array of group IDs which are acceptable and/or required.</dd> +</dl> + +<h3 id="Properties_of_audio_tracks">Properties of audio tracks</h3> + +<dl> + <dt>{{domxref("MediaTrackConstraints.autoGainControl", "autoGainControl")}}</dt> + <dd>A {{domxref("ConstrainBoolean")}} object which specifies whether automatic gain control is preferred and/or required.</dd> + <dt>{{domxref("MediaTrackConstraints.channelCount", "channelCount")}}</dt> + <dd>A {{domxref("ConstrainLong")}} specifying the channel count or range of channel counts which are acceptable and/or required.</dd> + <dt>{{domxref("MediaTrackConstraints.echoCancellation", "echoCancellation")}}</dt> + <dd>A {{domxref("ConstrainBoolean")}} object specifying whether or not echo cancellation is preferred and/or required.</dd> + <dt>{{domxref("MediaTrackConstraints.latency", "latency")}}</dt> + <dd>A {{domxref("ConstrainDouble")}} specifying the latency or range of latencies which are acceptable and/or required.</dd> + <dt>{{domxref("MediaTrackConstraints.noiseSuppression", "noiseSuppression")}}</dt> + <dd>A {{domxref("ConstrainBoolean")}} which specifies whether noise suppression is preferred and/or required.</dd> + <dt>{{domxref("MediaTrackConstraints.sampleRate", "sampleRate")}}</dt> + <dd>A {{domxref("ConstrainLong")}} specifying the sample rate or range of sample rates which are acceptable and/or required.</dd> + <dt>{{domxref("MediaTrackConstraints.sampleSize", "sampleSize")}}</dt> + <dd>A {{domxref("ConstrainLong")}} specifying the sample size or range of sample sizes which are acceptable and/or required.</dd> + <dt>{{domxref("MediaTrackConstraints.volume", "volume")}}</dt> + <dd>A {{domxref("ConstrainDouble")}} specifying the volume or range of volumes which are acceptable and/or required.</dd> +</dl> + +<h3 id="Properties_of_image_tracks">Properties of image tracks</h3> + +<dl> + <dt>{{domxref("MediaTrackConstraints.whiteBalanceMode","whiteBalanceMode")}}</dt> + <dd>A {{jsxref("String")}} specifying one of <code>"none"</code>, <code>"manual"</code>, <code>"sigle-shot"</code>, or <code>"continuous"</code>.</dd> + <dt>{{domxref("MediaTrackConstraints.exposureMode","exposureMode")}}</dt> + <dd>A {{jsxref("String")}} specifying one of <code>"none"</code>, <code>"manual"</code>, <code>"sigle-shot"</code>, or <code>"continuous"</code>.</dd> + <dt>{{domxref("MediaTrackConstraints.focusMode","focusMode")}}</dt> + <dd>A {{jsxref("String")}} specifying one of <code>"none"</code>, <code>"manual"</code>, <code>"sigle-shot"</code>, or <code>"continuous"</code>.</dd> + <dt>{{domxref("MediaTrackConstraints.pointsOfInterest","pointsOfInterest")}}</dt> + <dd>The pixel coordinates on the sensor of one or more points of interest. This is either an object in the form { x:<em>value</em>, y:<em>value</em> } or an array of such objects, where <em>value </em> is a double-precision integer.</dd> + <dt>{{domxref("MediaTrackConstraints.expsureCompensation","exposureCompensation")}}</dt> + <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying f-stop adjustment by up to ±3. </dd> + <dt>{{domxref("MediaTrackConstraints.colorTemperature","colorTemperature")}}</dt> + <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired color temperature in degrees kelvin.</dd> + <dt>{{domxref("MediaTrackConstraints.iso","iso")}}</dt> + <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired iso setting.</dd> + <dt>{{domxref("MediaTrackConstraints.brightness","brightness")}}</dt> + <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired brightness setting.</dd> + <dt>{{domxref("MediaTrackConstraints.contrast","contrast")}}</dt> + <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the degree of difference between light and dark.</dd> + <dt>{{domxref("MediaTrackConstraints.saturation","saturation")}}</dt> + <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the degree of color intensity.</dd> + <dt>{{domxref("MediaTrackConstraints.sharpness","sharpness")}}</dt> + <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the intensity of edges.</dd> + <dt>{{domxref("MediaTrackConstraints.focusDistance","focusDistance")}}</dt> + <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying distance to a focused object.</dd> + <dt>{{domxref("MediaTrackConstraints.zoom","zoom")}}</dt> + <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the desired focal length.</dd> + <dt>{{domxref("MediaTrackConstraints.torch","torch")}}</dt> + <dd>A {{jsxref("Boolean")}} whter the fill light continuously connected, meaning it stays on as long as the track is active.</dd> +</dl> + +<h3 id="Properties_of_video_tracks">Properties of video tracks</h3> + +<dl> + <dt>{{domxref("MediaTrackConstraints.aspectRatio", "aspectRatio")}}</dt> + <dd>A {{domxref("ConstrainDouble")}} specifying the video aspect ratio or range of aspect ratios which are acceptable and/or required.</dd> + <dt>{{domxref("MediaTrackConstraints.facingMode", "facingMode")}}</dt> + <dd>A {{domxref("ConstrainDOMString")}} object specifying a facing or an array of facings which are acceptable and/or required.</dd> + <dt>{{domxref("MediaTrackConstraints.frameRate", "frameRate")}}</dt> + <dd><font><font>A {{domxref ("ConstrainDouble")}} تعیین نرخ فریم یا دامنه نرخ فریم که قابل قبول و / یا مورد نیاز است.</font></font></dd> + <dt><font><font>{{domxref ("MediaTrackConstraints.height"، "height")}}</font></font></dt> + <dd><font><font>A {{domxref ("ConstrainLong")}} تعیین ارتفاع ویدیو یا محدوده ارتفاع که قابل قبول و / یا مورد نیاز است.</font></font></dd> + <dt><font><font>{{domxref ("MediaTrackConstraints.width"، "width")}}</font></font></dt> + <dd><font><font>A {{domxref ("ConstrainLong")}} مشخص کردن عرض ویدئو یا طیف وسیعی از عرض که قابل قبول و / یا مورد نیاز است.</font></font></dd> +</dl> + +<h2 id="مشخصات_فنی"><font><font>مشخصات فنی</font></font></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col"><font><font>مشخصات</font></font></th> + <th scope="col"><font><font>وضعیت</font></font></th> + <th scope="col"><font><font>اظهار نظر</font></font></th> + </tr> + <tr> + <td><font><font>{{SpecName ('Media Capture'، '# dom-mediatrackconstraints'، 'applyConstraints ()')}}</font></font></td> + <td><font><font>{{Spec2 ('رسانه ضبط')}}</font></font></td> + <td><font><font>تعریف اولیه</font></font></td> + </tr> + <tr> + <td><font><font>{{SpecName ('MediaStream تصویر'، '# mediatrackconstraintset-section'، 'applyConstraints ()')}}</font></font></td> + <td><font><font>{{Spec2 ('MediaStream Image')}}</font></font></td> + <td><font><font>محدودیت های تصویر را اضافه می کند.</font></font></td> + </tr> + </tbody> +</table> + +<h2 id="سازگاری_مرورگر"><font><font>سازگاری مرورگر</font></font></h2> + +<p><font><font>{{CompatibilityTable}}</font></font></p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th><font><font>ویژگی</font></font></th> + <th><font><font>کروم</font></font></th> + <th><font><font>فایرفاکس (Gecko)</font></font></th> + <th><font><font>اینترنت اکسپلورر</font></font></th> + <th><font><font>اپرا</font></font></th> + <th><font><font>سافاری</font></font></th> + </tr> + <tr> + <td><font><font>پشتیبانی پایه</font></font></td> + <td><font><font>{{CompatChrome (59)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatOpera (46)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><code>deviceId</code></td> + <td><font><font>{{CompatChrome (59)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatOpera (46)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><code>groupId</code></td> + <td><font><font>{{CompatChrome (59)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatOpera (46)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>خواص آهنگ صوتی</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>خواص مسیر تصویر</font></font></td> + <td><font><font>{{CompatChrome (63)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatOpera (50)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>خواص آهنگ های ویدئویی</font></font></td> + <td><font><font>{{CompatChrome (59)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatOpera (46)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><font><font>ویژگی</font></font></th> + <th><font><font>Android Webview</font></font></th> + <th><font><font>Chrome برای آندروید</font></font></th> + <th><font><font>فایرفاکس موبایل (Gecko)</font></font></th> + <th><font><font>اینترنت اکسپلورر</font></font></th> + <th><font><font>اپرا موبایل</font></font></th> + <th><font><font>سافاری موبایل</font></font></th> + </tr> + <tr> + <td><font><font>پشتیبانی پایه</font></font></td> + <td><font><font>{{CompatChrome (59)}}</font></font></td> + <td><font><font>{{CompatChrome (59)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatOperaMobile (46)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><code>deviceId</code></td> + <td><font><font>{{CompatChrome (59)}}</font></font></td> + <td><font><font>{{CompatChrome (59)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatOperaMobile (46)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><code>groupId</code></td> + <td><font><font>{{CompatChrome (59)}}</font></font></td> + <td><font><font>{{CompatChrome (59)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatOperaMobile (46)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>خواص آهنگ صوتی</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>خواص مسیر تصویر</font></font></td> + <td><font><font>{{CompatChrome (63)}}</font></font></td> + <td><font><font>{{CompatChrome (63)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatOperaMobile (50)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>خواص آهنگ های ویدئویی</font></font></td> + <td><font><font>{{CompatChrome (59)}}</font></font></td> + <td><font><font>{{CompatChrome (59)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatOperaMobile (46)}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="همچنین_نگاه_کنید"><font><font>همچنین نگاه کنید</font></font></h2> + +<ul> + <li><font><font>{{domxref ("MediaDevices.getUserMedia ()")}}</font></font></li> + <li><font><font>{{domxref ("MediaStreamTrack.getConstraints ()")}}</font></font></li> + <li><font><font>{{domxref ("MediaStreamTrack.applyConstraints ()")}}</font></font></li> + <li><font><font>{{domxref ("MediaDevices.getSupportedConstraints ()")}}</font></font></li> + <li><font><font>{{domxref ("MediaTrackSupportedConstraints")}}</font></font></li> + <li><font><font>{{domxref ("MediaStreamTrack.getSettings ()")}}</font></font></li> +</ul> diff --git a/files/fa/web/api/node/index.html b/files/fa/web/api/node/index.html new file mode 100644 index 0000000000..0d23b9445d --- /dev/null +++ b/files/fa/web/api/node/index.html @@ -0,0 +1,373 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - DOM Reference + - NeedsTranslation + - Reference + - TopicStub + - WebAPI +translation_of: Web/API/Node +--- +<div>{{APIRef("DOM")}}</div> + +<p>A <strong><code>Node</code></strong> is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.</p> + +<p>The following interfaces all inherit from <code>Node</code> its methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p> + +<p>These interfaces may return null in particular cases where the methods and properties are not relevant. They may throw an exception - for example when adding children to a node type for which no children can exist.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last <code>'/'</code>.</dd> + <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt> + <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd> + <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt> + <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd> + <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{ gecko_minversion_inline("1.9.2") }}<br> + Though recent specifications require <code>localName</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>The namespace URI of this node, or <code>null</code> if it is no namespace. In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}<br> + Though recent specifications require <code>namespaceURI</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd> + <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt> + <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd> + <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt> + <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are: + <table class="standard-table"> + <tbody> + <tr> + <th scope="col">Name</th> + <th scope="col">Value</th> + </tr> + <tr> + <td><code>ELEMENT_NODE</code></td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td> + <td><code>2</code></td> + </tr> + <tr> + <td><code>TEXT_NODE</code></td> + <td><code>3</code></td> + </tr> + <tr> + <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td> + <td><code>4</code></td> + </tr> + <tr> + <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td> + <td><code>6</code></td> + </tr> + <tr> + <td><code>PROCESSING_INSTRUCTION_NODE</code></td> + <td><code>7</code></td> + </tr> + <tr> + <td><code>COMMENT_NODE</code></td> + <td><code>8</code></td> + </tr> + <tr> + <td><code>DOCUMENT_NODE</code></td> + <td><code>9</code></td> + </tr> + <tr> + <td><code>DOCUMENT_TYPE_NODE</code></td> + <td><code>10</code></td> + </tr> + <tr> + <td><code>DOCUMENT_FRAGMENT_NODE</code></td> + <td><code>11</code></td> + </tr> + <tr> + <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td> + <td><code>12</code></td> + </tr> + </tbody> + </table> + </dd> + <dt>{{domxref("Node.nodeValue")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the value of an object. For most <code>Node</code> types, this returns <code>null</code> and any set operation is ignored. For nodes of type <code>TEXT_NODE</code> ({{domxref("Text")}} objects), <code>COMMENT_NODE</code> ({{domxref("Comment")}} objects), and <code>PROCESSING_INSTRUCTION_NODE</code> ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.</dd> + <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt> + <dd>Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns <code>null</code>.</dd> + <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd> + <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt> + <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd> + <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.<br> + Though recent specifications require <code>prefix</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{domxref("Node.textContent")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.appendChild()")}}</dt> + <dd>Insert a {{domxref("Node")}} as the last child node of this element.</dd> + <dt>{{domxref("Node.cloneNode()")}}</dt> + <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd> + <dt>{{domxref("Node.compareDocumentPosition()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.contains()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt> + <dd>...</dd> + <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt> + <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd> + <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating if the element has any attributes, or not.</dd> + <dt>{{domxref("Node.hasChildNodes()")}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating if the element has any child nodes, or not.</dd> + <dt>{{domxref("Node.insertBefore()")}}</dt> + <dd>Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.</dd> + <dt>{{domxref("Node.isDefaultNamespace()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.isEqualNode()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.isSameNode()")}} {{obsolete_inline}}</dt> + <dd> </dd> + <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt> + <dd>Returns a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a> flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd> + <dt>{{domxref("Node.lookupPrefix()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt> + <dd> </dd> + <dt>{{domxref("Node.normalize()")}}</dt> + <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd> + <dt>{{domxref("Node.removeChild()")}}</dt> + <dd>Removes a child node from the current element, which must be a child of the current node.</dd> + <dt>{{domxref("Node.replaceChild()")}}</dt> + <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd> + <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt> + <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd> + <dd> </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Browse_all_child_nodes">Browse all child nodes</h3> + +<p>The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).</p> + +<pre class="brush: js">function DOMComb (oParent, oCallback) { + if (oParent.hasChildNodes()) { + for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) { + DOMComb(oNode, oCallback); + } + } + oCallback.call(oParent); +}</pre> + +<h4 id="Syntax">Syntax</h4> + +<pre>DOMComb(parentNode, callbackFunction);</pre> + +<h4 id="Description">Description</h4> + +<p>Recursively cycle all child nodes of <code>parentNode</code> and <code>parentNode</code> itself and execute the <code>callbackFunction</code> upon them as <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a> objects.</p> + +<h4 id="Parameters">Parameters</h4> + +<dl> + <dt><code>parentNode</code></dt> + <dd>The parent node (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd> + <dt><code>callbackFunction</code></dt> + <dd>The callback function (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd> +</dl> + +<h4 id="Sample_usage">Sample usage</h4> + +<p>The following example send to the <code>console.log</code> the text content of the body:</p> + +<pre class="brush: js">function printContent () { + if (this.nodeValue) { console.log(this.nodeValue); } +} + +onload = function () { + DOMComb(document.body, printContent); +};</pre> + +<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3> + +<pre class="brush: js">Element.prototype.removeAll = function () { + while (this.firstChild) { this.removeChild(this.firstChild); } + return this; +};</pre> + +<h4 id="Sample_usage_2">Sample usage</h4> + +<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */ +document.body.removeAll();</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>isSameNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br> + The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br> + Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br> + Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br> + Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>getFeature()</code>{{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br> + Removed in {{CompatGeckoDesktop("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Removed in {{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>isSameNode()</code> {{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("9.0")}}.<br> + Removed in {{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>isSupported()</code> {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Removed in {{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>attributes</code></td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> + Moved to {{domxref("Element")}} in {{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>getFeature()</code>{{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br> + Removed in {{CompatGeckoDesktop("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Webkit and Blink incorrectly do not make <code>Node</code> inherit from {{domxref("EventTarget")}}.</p> diff --git a/files/fa/web/api/node/innertext/index.html b/files/fa/web/api/node/innertext/index.html new file mode 100644 index 0000000000..98dd0eed8f --- /dev/null +++ b/files/fa/web/api/node/innertext/index.html @@ -0,0 +1,75 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +translation_of: Web/API/HTMLElement/innerText +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{ Non-standard_header() }}</p> + +<h2 dir="rtl" id="گزیده">گزیده</h2> + +<p dir="rtl"><code><strong>Node.innerText </strong></code><span id="result_box" lang="fa">یک ویژگی غیر استاندارد است که نشان دهنده محتوای متن یک node و زیر گروه های آن است</span><span lang="fa"><span> به عنوان گیرنده متنی که کاربر می تواند با نشانگر موس از محتوا انتخاب و آن را کپی نماید.</span></span></p> + +<p dir="rtl">{{domxref("Node.textContent")}} <span id="result_box" lang="fa"><span>یک جایگزین</span> <span>استاندارد</span> <span>تا حدی شبیه</span> <span>است، اگر چه</span> <span>تفاوت های مهمی بین</span> <span>این دو وجود دارد</span><span>.</span></span></p> + +<h2 dir="rtl" id="ویژگی_ها">ویژگی ها</h2> + +<p dir="rtl"><span class="short_text" id="result_box" lang="fa"><span>یک</span> <span>پیش نویس</span> <span>غیر رسمی از</span> ویژگی ها در <strong><a dir="rtl" href="https://rocallahan.github.io/innerText-spec/">اینجا</a></strong> <span>موجود است.</span></span></p> + +<h2 dir="rtl" id="Browser_Compatibility" name="Browser_Compatibility">سازگاری با مرورگرها</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>پایه پشتیبانی</td> + <td>4</td> + <td>{{ CompatGeckoDesktop(45) }}</td> + <td>6</td> + <td>9.6 (شاید پیش از این)</td> + <td>3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>پایه پشتیبانی</td> + <td>2.3 (شاید پیش از این)</td> + <td>{{ CompatGeckoMobile(45) }}</td> + <td>10 (شاید پیش از این)</td> + <td>12</td> + <td>4.1 (شاید پیش از این)</td> + </tr> + </tbody> +</table> +</div> + +<h2 dir="rtl" id="موارد_مرتبط">موارد مرتبط</h2> + +<ul> + <li>{{domxref("HTMLElement.outerText")}}</li> + <li>{{domxref("Element.innerHTML")}}</li> +</ul> diff --git a/files/fa/web/api/node/insertbefore/index.html b/files/fa/web/api/node/insertbefore/index.html new file mode 100644 index 0000000000..5e853fc373 --- /dev/null +++ b/files/fa/web/api/node/insertbefore/index.html @@ -0,0 +1,155 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertBefore +translation_of: Web/API/Node/insertBefore +--- +<div> +<div>Mojtaba iranpour {{APIRef("DOM")}}</div> +</div> + +<p>The <code><strong>Node.insertBefore()</strong></code> method inserts the specified node before a reference node as a child of the current node.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>insertedNode</em> = <em>parentNode</em>.insertBefore(<em>newNode</em>, <em>referenceNode</em>); +</pre> + +<p>In Mozilla Firefox, if <code><var>referenceNode</var></code> is <code>null</code><span style="font-size: 14px; line-height: 1.5;">, </span><code><var>newNode</var></code><span style="font-size: 14px; line-height: 1.5;"> is inserted at the end of the list of child nodes. If the <code><em>referenceNode </em></code>is of <em><code>[ Type ]</code> "<code><em>undefined"</em> </code></em>( this kind of argument is <code>String</code> ) will be throw, in all of the browser ( IE, Chrome and Mozilla ) a "Type Error: Invalid Argument" since the the function </span><code>insertBefore </code>accept as second argument a<em><code> [ Type ] Node.</code></em></p> + +<h2 id="Example_2">Example</h2> + +<pre class="brush: html"><div id="parentElement"> + <span id="childElement">foo bar</span> +</div> + +<script> +//Create the new node to insert +var newNode = document.createElement("span"); + +//Get a reference to the parent node +var parentDiv = document.getElementById("parentElement").parentNode; + +//Begin test case [ 1 ] : Exist a childElement --> All working correctly +var sp2 = document.getElementById("childElement"); +parentDiv.insertBefore(newNode,sp2); +//End test case [ 1 ] + +//Begin test case [ 2 ] : childElement is of Type undefined +var sp2 = undefined; //Not exist a node of id "childElement" +parentDiv.insertBefore(newNode,sp2); //implicit dynamic cast to type Node +//End test case [ 2 ] + +//Begin test case [ 3 ] : childElement is of Type "undefined" ( string ) +var sp2 = "undefined"; //Not exist a node of id "childElement" +parentDiv.insertBefore(newNode,sp2); //Generate "Type Error: Invalid Argument" +//End test case [ 3 ] +</pre> + +<ul> + <li><code>insertedNode</code> The node being inserted, that is <code>newNode</code></li> + <li><code>parentNode</code> The parent of the newly inserted node.</li> + <li><code>newNode</code> The node to insert.</li> + <li><code>referenceNode</code> The node before which <code>newNode</code> is inserted.</li> +</ul> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush:html"><div id="parentElement"> + <span id="childElement">foo bar</span> +</div> + +<script> +// Create a new, plain <span> element +var sp1 = document.createElement("span"); + +// Get a reference to the element, before we want to insert the element +var sp2 = document.getElementById("childElement"); +// Get a reference to the parent element +var parentDiv = sp2.parentNode; + +// Insert the new element into the DOM before sp2 +parentDiv.insertBefore(sp1, sp2); +</script> +</pre> + +<p>There is no <code>insertAfter</code> method. It can be emulated by combining the <code>insertBefore</code> method with <code><a href="/en-US/docs/DOM/Node.nextSibling" title="DOM/Node.nextSibling">nextSibling</a></code>.</p> + +<p>In the previous example, <code>sp1</code> could be inserted after <code>sp2</code> using:</p> + +<pre><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre> + +<p>If <code>sp2</code> does not have a next sibling, then it must be the last child — <code>sp2.nextSibling</code> returns <code>null</code>, and <code>sp1</code> is inserted at the end of the child node list (immediately after <code>sp2</code>).</p> + +<h2 id="Example2" name="Example2">Example 2</h2> + +<p>Insert an element before the first child element, using the <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a> property.</p> + +<pre class="brush:js">// Get a reference to the element in which we want to insert a new node +var parentElement = document.getElementById('parentElement'); +// Get a reference to the first child +var theFirstChild = parentElement.firstChild; + +// Create a new element +var newElement = document.createElement("div"); + +// Insert the new element before the first child +parentElement.insertBefore(newElement, theFirstChild); +</pre> + +<p>When the element does not have a first child, then <code>firstChild</code> is <code>null</code>. The element is still appended to the parent, after the last child. Since the parent element did not have a first child, it did not have a last child either. Consequently, the new element is the only element, after insertion.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Specification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727">insertBefore</a></li> +</ul> diff --git a/files/fa/web/api/node/isequalnode/index.html b/files/fa/web/api/node/isequalnode/index.html new file mode 100644 index 0000000000..9cc089f509 --- /dev/null +++ b/files/fa/web/api/node/isequalnode/index.html @@ -0,0 +1,88 @@ +--- +title: Node.isEqualNode() +slug: Web/API/Node/isEqualNode +translation_of: Web/API/Node/isEqualNode +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>The <code><strong>Node.isEqualNode()</strong></code> method tests whether two nodes are equal. Two nodes are equal when they have the same type, defining characteristics (for elements, this would be their ID, number of children, and so forth), its attributes match, and so on. The specific set of data points that must match varies depending on the types of the nodes.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>isEqualNode</var> = <var>node</var>.isEqualNode(<var>otherNode</var>); +</pre> + +<ul> + <li><code>otherNode</code>: The {{domxref("Node")}} to compare equality with.</li> +</ul> + +<h2 id="Example">Example</h2> + +<p>In this example, we create three {{HTMLElement("div")}} blocks. The first and third have the same contents and attributes, while the second is different. Then we run some JavaScript to compare the nodes using <code>isEqualNode()</code> and output the results.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>This is the first element.</div> +<div>This is the second element.</div> +<div>This is the first element.</div> + +<p id="output"></p></pre> + +<div class="hidden"> +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#output { + width: 440px; + border: 2px solid black; + border-radius: 5px; + padding: 10px; + margin-top: 20px; + display: block; +}</pre> +</div> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">let output = document.getElementById("output"); +let divList = document.getElementsByTagName("div"); + +output.innerHTML += "div 0 equals div 0: " + divList[0].isEqualNode(divList[0]) + "<br/>"; +output.innerHTML += "div 0 equals div 1: " + divList[0].isEqualNode(divList[1]) + "<br/>"; +output.innerHTML += "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) + "<br/>";</pre> + +<h3 id="Results">Results</h3> + +<p>{{ EmbedLiveSample('Example', 480) }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Node.isEqualNode")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Node.isSameNode()")}}</li> +</ul> diff --git a/files/fa/web/api/notification/index.html b/files/fa/web/api/notification/index.html new file mode 100644 index 0000000000..42deb63eaa --- /dev/null +++ b/files/fa/web/api/notification/index.html @@ -0,0 +1,198 @@ +--- +title: Notification +slug: Web/API/notification +tags: + - API + - Interface + - NeedsTranslation + - Notifications + - Reference + - TopicStub +translation_of: Web/API/Notification +--- +<div>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</div> + +<p><span class="seoSummary">The <code>Notification</code> interface of the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> is used to configure and display desktop notifications to the user.</span> These notifications' appearance and specific functionality vary across platforms but generally they provide a way to asynchronously provide information to the user.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("Notification.Notification", "Notification()")}}</dt> + <dd>Creates a new instance of the <code>Notification</code> object.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<h3 id="Static_properties">Static properties</h3> + +<p>These properties are available only on the <code>Notification</code> object itself.</p> + +<dl> + <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt> + <dd>A string representing the current permission to display notifications. Possible values are: + <ul> + <li><code>denied</code> — The user refuses to have notifications displayed.</li> + <li><code>granted</code> — The user accepts having notifications displayed.</li> + <li><code>default</code> — The user choice is unknown and therefore the browser will act as if the value were denied.</li> + </ul> + </dd> +</dl> + +<h3 id="Instance_properties">Instance properties</h3> + +<p>These properties are available only on instances of the <code>Notification</code> object.</p> + +<dl> + <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt> + <dd>The actions array of the notification as specified in the constructor's <code>options</code> parameter.</dd> + <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt> + <dd>The URL of the image used to represent the notification when there is not enough space to display the notification itself.</dd> + <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt> + <dd>The body string of the notification as specified in the constructor's <code>options</code> parameter.</dd> + <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt> + <dd>Returns a structured clone of the notification’s data.</dd> + <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt> + <dd>The text direction of the notification as specified in the constructor's <code>options</code> parameter.</dd> + <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt> + <dd>The language code of the notification as specified in the constructor's <code>options</code> parameter.</dd> + <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt> + <dd>The ID of the notification (if any) as specified in the constructor's <code>options</code> parameter.</dd> + <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt> + <dd>The URL of the image used as an icon of the notification as specified in the constructor's <code>options</code> parameter.</dd> + <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt> + <dd>The URL of an image to be displayed as part of the notification, as specified in the constructor's <code>options</code> parameter.</dd> + <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt> + <dd>Specifies whether the user should be notified after a new notification replaces an old one.</dd> + <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt> + <dd>A {{jsxref("Boolean")}} indicating that a notification should remain active until the user clicks or dismisses it, rather than closing automatically.</dd> + <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt> + <dd>Specifies whether the notification should be silent — i.e., no sounds or vibrations should be issued, regardless of the device settings.</dd> + <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt> + <dd>Specifies the time at which a notification is created or applicable (past, present, or future).</dd> + <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt> + <dd>The title of the notification as specified in the first parameter of the constructor.</dd> + <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt> + <dd>Specifies a vibration pattern for devices with vibration hardware to emit.</dd> +</dl> + +<h4 id="Event_handlers">Event handlers</h4> + +<dl> + <dt>{{domxref("Notification.onclick")}}</dt> + <dd>A handler for the {{event("click")}} event. It is triggered each time the user clicks on the notification.</dd> +</dl> + +<dl> + <dt>{{domxref("Notification.onclose")}}</dt> + <dd>A handler for the {{event("close")}} event. It is triggered when the user closes the notification.</dd> +</dl> + +<dl> + <dt>{{domxref("Notification.onerror")}}</dt> + <dd>A handler for the {{event("error")}} event. It is triggered each time the notification encounters an error.</dd> + <dt>{{domxref("Notification.onshow")}}</dt> + <dd>A handler for the {{event("show")}} event. It is triggered when the notification is displayed.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<h3 id="Static_methods">Static methods</h3> + +<p>These methods are available only on the <code>Notification</code> object itself.</p> + +<dl> + <dt>{{domxref("Notification.requestPermission()")}}</dt> + <dd>Requests permission from the user to display notifications.</dd> +</dl> + +<h3 id="Instance_methods">Instance methods</h3> + +<p>These properties are available only on an instance of the <code>Notification</code> object or through its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a>. The <code>Notification</code> object also inherits from the {{domxref("EventTarget")}} interface.</p> + +<dl> + <dt>{{domxref("Notification.close()")}}</dt> + <dd>Programmatically closes a notification.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>Assume this basic HTML:</p> + +<pre class="brush: html"><button onclick="notifyMe()">Notify me!</button></pre> + +<p>It's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.</p> + +<pre class="brush: js">function notifyMe() { + // Let's check if the browser supports notifications + if (!("Notification" in window)) { + alert("This browser does not support desktop notification"); + } + + // Let's check whether notification permissions have already been granted + else if (Notification.permission === "granted") { + // If it's okay let's create a notification + var notification = new Notification("Hi there!"); + } + + // Otherwise, we need to ask the user for permission + else if (Notification.permission !== "denied") { + Notification.requestPermission().then(function (permission) { + // If the user accepts, let's create a notification + if (permission === "granted") { + var notification = new Notification("Hi there!"); + } + }); + } + + // At last, if the user has denied notifications, and you + // want to be respectful there is no need to bother them any more. +}</pre> + +<p>{{EmbedLiveSample('Example', '100%', 30)}}</p> + +<h3 id="Alternate_example_run_on_page_load">Alternate example: run on page load</h3> + +<p>In many cases, you don't need to be this verbose. For example, in our <a href="https://mdn.github.io/emogotchi/">Emogotchi demo</a> (<a href="https://github.com/mdn/emogotchi">see source code</a>), we simply run {{domxref("Notification.requestPermission")}} regardless to make sure we can get permission to send notifications (this uses the newer promise-based method syntax):</p> + +<pre class="brush: js">Notification.requestPermission().then(function(result) { + console.log(result); +});</pre> + +<p>Then we run a simple <code>spawnNotification()</code> function when we want to fire a notification — this is passed arguments to specify the body, icon, and title we want. Then it creates the necessary <code>options</code> object and fires the notification using the {{domxref("Notification.Notification","Notification()")}} constructor.</p> + +<pre class="brush: js">function spawnNotification(body, icon, title) { + var options = { + body: body, + icon: icon + }; + var n = new Notification(title, options); +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Notification")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> +</ul> diff --git a/files/fa/web/api/notification/requestpermission/index.html b/files/fa/web/api/notification/requestpermission/index.html new file mode 100644 index 0000000000..c9bd799f25 --- /dev/null +++ b/files/fa/web/api/notification/requestpermission/index.html @@ -0,0 +1,80 @@ +--- +title: Notification.requestPermission() +slug: Web/API/Notification/requestPermission +translation_of: Web/API/Notification/requestPermission +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p>The <strong><code>requestPermission()</code></strong> method of the {{domxref("Notification")}} interface requests permission from the user for the current origin to display notifications.</p> + +<div class="note"> +<p><strong>Note:</strong> This feature is <strong>not</strong> available in {{domxref("SharedWorker")}}</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<p>The latest spec has updated this method to a promise-based syntax that works like this:</p> + +<pre class="brush: js">Notification.requestPermission().then(function(permission) { ... });</pre> + +<p>Previously, the syntax was based on a simple callback; this version is now deprecated:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">Notification<span class="punctuation token">.</span><span class="function token">requestPermission</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p><code class="language-js"><span class="punctuation token">Safari Version 12.0.3 still uses callback to get the permission.</span></code></p> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>callback</code> {{optional_inline}} {{deprecated_inline("gecko46")}}</dt> + <dd>An optional callback function that is called with the permission value. Deprecated in favor of the promise return value.</dd> +</dl> + +<h3 id="Returns">Returns</h3> + +<p>A {{jsxref("Promise")}} that resolves to a {{domxref("DOMString")}} with the permission picked by the user. Possible values for this string are <code>granted</code>, <code>denied</code>, or <code>default</code>.</p> + +<h2 id="Example">Example</h2> + +<p>The following snippet requests permission from the user, then logs a different result to the console depending on the user's choice.</p> + +<pre class="brush: js">Notification.requestPermission().then(function(result) { + if (result === 'denied') { + console.log('Permission wasn\'t granted. Allow a retry.'); + return; + } + if (result === 'default') { + console.log('The permission request was dismissed.'); + return; + } + // Do something with the granted permission. +});</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Notification.requestPermission")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> +</ul> diff --git a/files/fa/web/css/_colon_not/index.html b/files/fa/web/css/_colon_not/index.html new file mode 100644 index 0000000000..7f7c5cbec3 --- /dev/null +++ b/files/fa/web/css/_colon_not/index.html @@ -0,0 +1,117 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +tags: + - سی اس اس + - شبه کلاس + - لایه + - مرجع + - وب +translation_of: 'Web/CSS/:not' +--- +<div>{{CSSRef}}</div> + +<div dir="rtl"><strong><code>not()</code></strong> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class<strong><code>:</code></strong></a><a href="/en-US/docs/Web/CSS/Pseudo-classes"> </a> همه عناصر را انتخاب میکند بجز عناصری که به عنوان ورودی به این کلاس داده شود. <span id="result_box" lang="fa"><span>از آنجایی که این کلاس از انتخاب عناصر خاصی جلوگیری می کند، به عنوان </span></span> <em>negation pseudo-class</em><span lang="fa"><span> شناخته می شود.</span></span></div> + +<div dir="rtl"> </div> + +<pre class="brush: css no-line-numbers" dir="rtl">/* paragraph همه عناصر را انتخاب میکند بجز عنصر */ +:not(p) { + color: blue; +}</pre> + +<div class="note"> +<p><strong>Notes:</strong></p> + +<ul> + <li>Useless selectors can be written using this pseudo-class. For example, <code>:not(*)</code> matches any element which is not an element, so the rule will never be applied.</li> + <li>This pseudo-class can increase the <a href="/en-US/docs/Web/CSS/Specificity">specificity</a> of a rule. For example, <code>#foo:not(#bar)</code> will match the same element as the simpler <code>#foo</code>, but has a higher specificity.</li> + <li><code>:not(.foo)</code> will match anything that isn't <code>.foo</code>, <em>including {{HTMLElement("html")}} and {{HTMLElement("body")}}.</em></li> + <li>This selector only applies to one element; you cannot use it to exclude all ancestors. For instance, <code>body :not(table) a</code> will still apply to links inside of a table, since {{HTMLElement("tr")}} will match with the <code>:not()</code> part of the selector.</li> +</ul> +</div> + +<h2 id="Syntax">Syntax</h2> + +<p dir="rtl">ورودیهای شبهکلاس <code>()not:</code> با ویرگول از یکدیگر جدا میشود.</p> + +<p dir="rtl"> </p> + +<p> </p> + +<div class="warning"> +<p>The ability to list more than one selector is experimental and not yet widely supported.</p> +</div> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>این عنصر، عنصر پاراگراف است.</p> +<p class="fancy">من چقدر خوبم!</p> +<div>این عنصر، عنصر پاراگراف نیست.</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.fancy { + text-shadow: 2px 2px 3px gold; +} + +/* نیستند `fancy` که دارای کلاس <p> ِتمام عنصار */ +p:not(.fancy) { + color: green; +} + +/* <p> همه عناصر بجز عنصر */ +body :not(p) { + text-decoration: underline; +} + +/* <span> یا <div> همه عناصر بجز عناصر */ +body :not(div):not(span) { + font-weight: bold; +} +/* را دارا هستند `fancy` یا `crazy` همه عناصر بجز عناصری که کلاسهای */ +/* توجه داشته باشید که این نوع نوشتار هنوز پشتیبانی نمیشود. */ +body :not(.crazy, .fancy) { + font-family: sans-serif; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#negation', ':not()')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Extends its argument to allow some non-simple selectors.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#negation', ':not()')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("css.selectors.not")}}</p> +</div> diff --git a/files/fa/web/css/_doublecolon_cue/index.html b/files/fa/web/css/_doublecolon_cue/index.html new file mode 100644 index 0000000000..f1e723f7e7 --- /dev/null +++ b/files/fa/web/css/_doublecolon_cue/index.html @@ -0,0 +1,79 @@ +--- +title: '::cue (:cue)' +slug: 'Web/CSS/::cue' +translation_of: 'Web/CSS/::cue' +--- +<p> </p> + +<div>{{CSSRef}}</div> + +<p> </p> + +<p dir="rtl"><a href="/en-US/docs/Web/CSS/Pseudo-elements">شبه عنصر</a> {{ Cssxref("cue::") }} یک عنصر انتخاب شده با نشانههای WebVTT را تطابق میدهد. این <a href="/en-US/docs/Web/CSS/Pseudo-elements">شبه عنصر</a> میتواند برای<a href="/docs/Web/API/WebVTT_API#Styling_WebTT_cues"> آرایش زیرنویس و دیگر موارد</a> محتوای تصویری با VTT tracks مورد استفاده قرار گیرد.</p> + +<pre class="brush: css no-line-numbers">::cue { + color: yellow; + font-weight: bold; +}</pre> + +<h2 id="Allowable_properties">Allowable properties</h2> + +<p>Only a small subset of CSS properties can be used in a rule with <code>::cue</code> in its selector:</p> + +<ul> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("opacity")}}</li> + <li>{{cssxref("visibility")}}</li> + <li>{{cssxref("text-decoration")}} and its longhand properties</li> + <li>{{cssxref("text-shadow")}}</li> + <li>{{cssxref("background")}} and its longhand properties</li> + <li>{{cssxref("outline")}} and its longhand properties</li> + <li>{{Cssxref("font")}} and its longhand properties, including {{cssxref("line-height")}}</li> + <li>{{cssxref("white-space")}}</li> + <li>{{cssxref("text-combine-upright")}}</li> + <li>{{cssxref("ruby-position")}}</li> +</ul> + +<p>The properties are applied to the entire set of cues as if they were a single unit. The only exception is that <code>background</code> and its shorthand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<p>The following CSS sets the cue style so that the text is white and the background is a translucent black box.</p> + +<pre class="brush: css">::cue { + color: #fff; + background-color: rgba(0, 0, 0, 0.6); +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}</td> + <td>{{Spec2("WebVTT")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("css.selectors.cue")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebVTT_API">Web Video Tracks Format (WebVTT)</a></li> +</ul> diff --git a/files/fa/web/css/adjacent_sibling_combinator/index.html b/files/fa/web/css/adjacent_sibling_combinator/index.html new file mode 100644 index 0000000000..c988c47aed --- /dev/null +++ b/files/fa/web/css/adjacent_sibling_combinator/index.html @@ -0,0 +1,80 @@ +--- +title: Adjacent sibling combinator +slug: Web/CSS/Adjacent_sibling_combinator +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +<div>{{CSSRef("Selectors")}}</div> + +<p dir="rtl">ترکیب (<code>+</code>) <strong>adjacent sibling combinator</strong> دو انتخابگر را از هم جدا میکند و زمانی تطابق انجام میشود که انتخابگر دوم بلافاصله بعد از انتخابگر اول آمده باشد و هر فرزند یک والد {{domxref("element")}} باشند.</p> + +<pre class="brush: css no-line-numbers">/* باشند img پارگرافهایی که بلافاصله بعد از */ +img + p { + font-style: bold; +}</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">former_element + target_element { <em>style properties</em> } +</pre> + +<h2 id="Example">Example</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">li:first-of-type + li { + color: red; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li>One</li> + <li>Two!</li> + <li>Three</li> +</ul></pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Example', 200, 100)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Renames it the "next-sibling" combinator.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.selectors.adjacent_sibling")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/General_sibling_selectors">General sibling selectors</a></li> +</ul> diff --git a/files/fa/web/css/all/index.html b/files/fa/web/css/all/index.html new file mode 100644 index 0000000000..8f80bf5b2b --- /dev/null +++ b/files/fa/web/css/all/index.html @@ -0,0 +1,159 @@ +--- +title: all +slug: Web/CSS/all +translation_of: Web/CSS/all +--- +<div>{{CSSRef}}</div> + +<p>The <code><strong>all</strong></code> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand property</a> sets all of an element's properties (other than {{cssxref("unicode-bidi")}} and {{cssxref("direction")}}) to their initial or inherited values, or to the values specified in another stylesheet origin..</p> + +<pre class="brush:css no-line-numbers">/* Global values */ +all: initial; +all: inherit; +all: unset; + +/* CSS Cascading and Inheritance Level 4 */ +all: revert; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<p>The <code>all</code> property is specified as one of the CSS global keyword values. Note that none of these values affect the {{cssxref("unicode-bidi")}} and {{cssxref("direction")}} properties.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt>{{cssxref("initial")}}</dt> + <dd>Specifies that all the element's properties should be changed to their <a href="/en-US/docs/Web/CSS/initial_value">initial values</a>.</dd> + <dt>{{cssxref("inherit")}}</dt> + <dd>Specifies that all the element's properties should be changed to their <a href="/en-US/docs/Web/CSS/inheritance">inherited values</a>.</dd> + <dt>{{cssxref("unset")}}</dt> + <dd>Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not.</dd> + <dt>{{cssxref("revert")}}</dt> + <dd>Specifies behavior that depends on the stylesheet origin to which the declaration belongs: + <dl> + <dt><a href="/en-US/docs/Web/CSS/Cascade#User-agent_stylesheets">User-agent origin</a></dt> + <dd>Equivalent to <code>unset</code>.</dd> + <dt><a href="/en-US/docs/Web/CSS/Cascade#User_stylesheets">User origin</a></dt> + <dd>Rolls back the <a href="/en-US/docs/Web/CSS/Cascade">cascade</a> to the user-agent level, so that the <a href="/en-US/docs/Web/CSS/specified_value">specified values</a> are calculated as if no author-level or user-level rules were specified for the element.</dd> + <dt><a href="/en-US/docs/Web/CSS/Cascade#Author_stylesheets">Author origin</a></dt> + <dd>Rolls back the <a href="/en-US/docs/Web/CSS/Cascade">cascade</a> to the user level, so that the <a href="/en-US/docs/Web/CSS/specified_value">specified values</a> are calculated as if no author-level rules were specified for the element. For purposes of <code>revert</code>, the Author origin includes the Override and Animation origins.</dd> + </dl> + </dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><blockquote id="quote"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +</blockquote> +Phasellus eget velit sagittis.</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">body { + font-size: small; + background-color: #F0F0F0; + color: blue; +} + +blockquote { + background-color: skyblue; + color: red; +} +</pre> + +<h3 id="Result">Result</h3> + +<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;"> +<h4 id="No_all_property">No <code>all</code> property</h4> + +<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; } +blockquote { background-color: skyblue; color: red; }</pre> +{{EmbedLiveSample("ex0", "200", "125")}} + +<p>The {{HTMLElement("blockquote")}} uses the browser's default styling together with a specific background and text color. It also behaves as a <em>block</em> element: the text that follows it is beneath it.</p> +</div> + +<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;"> +<h4 id="allunset"><code>all:unset</code></h4> + +<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; } +blockquote { background-color: skyblue; color: red; } +blockquote { all: unset; }</pre> +{{EmbedLiveSample("ex1", "200", "125")}} + +<p>The {{HTMLElement("blockquote")}} doesn't use the browser default styling: it is an <em>inline</em> element now (initial value), its {{cssxref("background-color")}} is <code>transparent</code> (initial value), but its {{cssxref("font-size")}} is still <code>small</code> (inherited value) and its {{cssxref("color")}} is <code>blue</code> (inherited value).</p> +</div> + +<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;"> +<h4 id="allinitial"><code>all:initial</code></h4> + +<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; } +blockquote { background-color: skyblue; color: red; } +blockquote { all: initial; }</pre> +{{EmbedLiveSample("ex2", "200", "125")}} + +<p>The {{HTMLElement("blockquote")}} doesn't use the browser default styling: it is an <em>inline</em> element now (initial value), its {{cssxref("background-color")}} is <code>transparent</code> (initial value), its {{cssxref("font-size")}} is <code>normal</code> (initial value) and its {{cssxref("color")}} is <code>black</code> (initial value).</p> +</div> + +<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;"> +<h4 id="allinherit"><code>all:inherit</code></h4> + +<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; } +blockquote { background-color: skyblue; color: red; } +blockquote { all: inherit; }</pre> +{{EmbedLiveSample("ex3", "200", "125")}} + +<p>The {{HTMLElement("blockquote")}} doesn't use the browser default styling: it is a <em>block</em> element now (inherited value from its containing {{HTMLElement("body")}} element), its {{cssxref("background-color")}} is <code>#F0F0F0</code> (inherited value), its {{cssxref("font-size")}} is <code>small</code> (inherited value) and its {{cssxref("color")}} is <code>blue</code> (inherited value).</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Cascade', '#all-shorthand', 'all') }}</td> + <td>{{ Spec2('CSS4 Cascade') }}</td> + <td>Added the <code>revert</code> value.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}</td> + <td>{{ Spec2('CSS3 Cascade') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.all")}}</p> + +<h2 id="See_also">See also</h2> + +<p>CSS global keyword values: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}</p> diff --git a/files/fa/web/css/css_box_model/index.html b/files/fa/web/css/css_box_model/index.html new file mode 100644 index 0000000000..ed6760a26a --- /dev/null +++ b/files/fa/web/css/css_box_model/index.html @@ -0,0 +1,116 @@ +--- +title: CSS Basic Box Model +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - Guide + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Box_Model +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Basic Box Model</strong> is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the <a href="/en-US/docs/Web/CSS/Visual_formatting_model">visual formatting model</a>.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="Properties">Properties</h3> + +<h4 id="Properties_controlling_the_flow_of_content_in_a_box">Properties controlling the flow of content in a box</h4> + +<div class="index"> +<ul> + <li>{{CSSxRef("overflow")}}</li> + <li>{{CSSxRef("overflow-x")}}</li> + <li>{{CSSxRef("overflow-y")}}</li> +</ul> +</div> + +<h4 id="Properties_controlling_the_size_of_a_box">Properties controlling the size of a box</h4> + +<div class="index"> +<ul> + <li>{{CSSxRef("height")}}</li> + <li>{{CSSxRef("width")}}</li> + <li>{{CSSxRef("max-height")}}</li> + <li>{{CSSxRef("max-width")}}</li> + <li>{{CSSxRef("min-height")}}</li> + <li>{{CSSxRef("min-width")}}</li> +</ul> +</div> + +<h4 id="Properties_controlling_the_margins_of_a_box">Properties controlling the margins of a box</h4> + +<div class="index"> +<ul> + <li>{{CSSxRef("margin")}}</li> + <li>{{CSSxRef("margin-bottom")}}</li> + <li>{{CSSxRef("margin-left")}}</li> + <li>{{CSSxRef("margin-right")}}</li> + <li>{{CSSxRef("margin-top")}}</li> + <li>{{CSSxRef("margin-trim")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<h4 id="Properties_controlling_the_paddings_of_a_box">Properties controlling the paddings of a box</h4> + +<div class="index"> +<ul> + <li>{{CSSxRef("padding")}}</li> + <li>{{CSSxRef("padding-bottom")}}</li> + <li>{{CSSxRef("padding-left")}}</li> + <li>{{CSSxRef("padding-right")}}</li> + <li>{{CSSxRef("padding-top")}}</li> +</ul> +</div> + +<h4 id="Other_properties">Other properties</h4> + +<div class="index"> +<ul> + <li>{{CSSxRef("visibility")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt> + <dd>Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt> + <dd>Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.</dd> + <dt><a href="/en-US/docs/Web/CSS/Visual_formatting_model">Visual formatting model</a></dt> + <dd>Explains the visual formatting model.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Box")}}</td> + <td>{{Spec2("CSS3 Box")}}</td> + <td>Added <code style="white-space: nowrap;">margin-trim</code></td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "box.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> diff --git a/files/fa/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/fa/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..95cced5f62 --- /dev/null +++ b/files/fa/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,83 @@ +--- +title: Mastering margin collapsing +slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +<div>{{CSSRef}}</div> + +<p>The <a href="/en-US/docs/Web/CSS/margin-top">top</a> and <a href="/en-US/docs/Web/CSS/margin-bottom">bottom</a> margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as <strong>margin collapsing</strong>. Note that the margins of <a href="/en-US/docs/Web/CSS/float">floating</a> and <a href="/en-US/docs/Web/CSS/position#absolute">absolutely positioned</a> elements never collapse.</p> + +<p>Margin collapsing occurs in three basic cases:</p> + +<dl> + <dt dir="rtl">هم نیا</dt> + <dd dir="rtl">margin هم نیا ها با یکدیگر ادغام نمیشوند. (except when the latter sibling needs to be <a href="/en-US/docs/Web/CSS/clear">cleared</a> past floats).</dd> + <dt>No content separating parent and descendants</dt> + <dd>If there is no border, padding, inline part, <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">block formatting context</a> created, or <em><a href="/en-US/docs/Web/CSS/clear">clearance</a></em> to separate the {{cssxref("margin-top")}} of a block from the {{cssxref("margin-top")}} of one or more of its descendant blocks; or no border, padding, inline content, {{cssxref("height")}}, {{cssxref("min-height")}}, or {{cssxref("max-height")}} to separate the {{cssxref("margin-bottom")}} of a block from the {{cssxref("margin-bottom")}} of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.</dd> + <dt>Empty blocks</dt> + <dd>If there is no border, padding, inline content, {{cssxref("height")}}, or {{cssxref("min-height")}} to separate a block's {{cssxref("margin-top")}} from its {{cssxref("margin-bottom")}}, then its top and bottom margins collapse.</dd> +</dl> + +<p>Some things to note:</p> + +<ul> + <li>More complex margin collapsing (of more than two margins) occurs when the above cases are combined.</li> + <li>These rules apply even to margins that are zero, so the margin of a descendant ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.</li> + <li>When negative margins are involved, the size of the collapsed margin is the sum of the largest positive margin and the smallest (most negative) negative margin.</li> + <li>When all margins are negative, the size of the collapsed margin is the smallest (most negative) margin. This applies to both adjacent elements and nested elements.</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>The bottom margin of this paragraph is collapsed …</p> +<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p> + +<div>This parent element contains two paragraphs! + <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p> + <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p> +</div> + +<p>I am <code>2rem</code> below the element above.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + margin: 2rem 0; + background: lavender; +} + +p { + margin: .4rem 0 1.2rem 0; + background: yellow; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Examples', 'auto', 350)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{css_key_concepts}}</li> +</ul> diff --git a/files/fa/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/fa/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..40e7937e9e --- /dev/null +++ b/files/fa/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,234 @@ +--- +title: مفاهیم اولیه فلکس باکس +slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +tags: + - فلکس + - فلکس باکس + - قالب بندی + - محور +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +<div>{{CSSRef}}</div> + +<p class="summary">فلکسیبل باکس ماژول که معمولا به آن فلکسباکس میگویند، به عنوان یک قالببندی تک بعدی طراحی شد و به عنوان راهی برای تقسیم فضا بین بخشهای داخل یک جعبه و ابزار قدرتمندی برای ترازبندی. این مقاله یک طرح کلی از امکانات اصلی فلکسباکس را ارائه میدهد.</p> + +<p>When we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. This can be contrasted with the two-dimensional model of <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>, which controls columns and rows together.</p> + +<h2 id="دو_محور_فلکسباکس">دو محور فلکسباکس</h2> + +<p>When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the {{cssxref("flex-direction")}} property, and the cross axis runs perpendicular to it. Everything we do with flexbox refers back to these axes, so it is worth understanding how they work from the outset.</p> + +<h3 id="محور_اصلی">محور اصلی</h3> + +<p>محور اصلی که با <code>flex-direction</code> مشخص میشود, چهار مقدار میپذیرد:</p> + +<ul> + <li><code>row</code></li> + <li><code>row-reverse</code></li> + <li><code>column</code></li> + <li><code>column-reverse</code></li> +</ul> + +<p>اگر <code>row</code> یا <code>row-reverse</code> را انتخاب کنید, محور اصلی در جهت طبیعی متنها (<strong>inline</strong>) خواهد بود</p> + +<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p> + +<p>اگر <code>column</code> یا <code>column-reverse</code> را انتخاب کنید محور اصلی در جهت بالا به پایین (<strong>block direction</strong>) خواهد بود.</p> + +<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p> + +<h3 id="محور_قطعکننده">محور قطعکننده</h3> + +<p>The cross axis runs perpendicular to the main axis, therefore if your <code>flex-direction</code> (main axis) is set to <code>row</code> or <code>row-reverse</code> the cross axis runs down the columns.</p> + +<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p> + +<p>If your main axis is <code>column</code> or <code>column-reverse</code> then the cross axis runs along the rows.</p> + +<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p> + +<p>Understanding which axis is which is important when we start to look at aligning and justifying flex items; flexbox features properties that align and justify content along one axis or the other.</p> + +<h2 id="خطهای_شروع_و_پایان">خطهای شروع و پایان</h2> + +<p>Another vital area of understanding is how flexbox makes no assumption about the writing mode of the document. In the past, CSS was heavily weighted towards horizontal and left-to-right writing modes. Modern layout methods encompass the range of writing modes and so we no longer assume that a line of text will start at the top left of a document and run towards the right hand side, with new lines appearing one under the other.</p> + +<p>You can read more about the relationship between flexbox and the Writing Modes specification in a later article, however the following description should help explain why we do not talk about left and right and top and bottom when we describe the direction that our flex items flow in.</p> + +<p>If the <code>flex-direction</code> is <code>row</code> and I am working in English, then the start edge of the main axis will be on the left, the end edge on the right.</p> + +<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>If I were to work in Arabic, then the start edge of my main axis would be on the right and the end edge on the left.</p> + +<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> + +<p>In both cases the start edge of the cross axis is at the top of the flex container and the end edge at the bottom, as both languages have a horizontal writing mode.</p> + +<p>After a while, thinking about start and end rather than left and right becomes natural, and will be useful to you when dealing with other layout methods such as CSS Grid Layout which follow the same patterns.</p> + +<h2 id="جعبه_محتوی_از_نوع_فلکس">جعبه محتوی از نوع فلکس</h2> + +<p>An area of a document laid out using flexbox is called a <strong>flex container</strong>. To create a flex container, we set the value of the area's container's {{cssxref("display")}} property to <code>flex</code> or <code>inline-flex</code>. As soon as we do this the direct children of that container become <strong>flex items</strong>. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way.</p> + +<ul> + <li>Items display in a row (the <code>flex-direction</code> property's default is <code>row</code>).</li> + <li>The items start from the start edge of the main axis.</li> + <li>The items do not stretch on the main dimension, but can shrink.</li> + <li>The items will stretch to fill the size of the cross axis.</li> + <li>The {{cssxref("flex-basis")}} property is set to <code>auto</code>.</li> + <li>The {{cssxref("flex-wrap")}} property is set to <code>nowrap</code>.</li> +</ul> + +<p>The result of this is that your items will all line up in a row, using the size of the content as their size in the main axis. If there are more items than can fit in the container, they will not wrap but will instead overflow. If some items are taller than others, all items will stretch along the cross axis to fill its full size.</p> + +<p>You can see in the live example below how this looks. Try editing the items or adding additional items in order to test the initial behavior of flexbox.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} </p> + +<h3 id="تغییر_جعهت_فلکس">تغییر جعهت فلکس</h3> + +<p>Adding the {{cssxref("flex-direction")}} property to the flex container allows us to change the direction in which our flex items display. Setting <code>flex-direction: row-reverse</code> will keep the items displaying along the row, however the start and end lines are switched.</p> + +<p>If we change <code>flex-direction</code> to <code>column</code> the main axis switches and our items now display in a column. Set <code>column-reverse</code> and the start and end lines are again switched.</p> + +<p>The live example below has <code>flex-direction</code> set to <code>row-reverse</code>. Try the other values — <code>row</code>, <code>column</code> and <code>column-reverse</code> — to see what happens to the content.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p> + +<h2 id="جعبه_محتوی_فلکس_از_نوع_چندسطری_با_flex-wrap">جعبه محتوی فلکس از نوع چندسطری با flex-wrap</h2> + +<p>While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines either side.</p> + +<p>To cause wrapping behaviour add the property {{cssxref("flex-wrap")}} with a value of <code>wrap</code>. Now, should your items be too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. As <code>flex-wrap</code> is set to <code>wrap</code>, the items wrap. Set it to <code>nowrap</code>, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using <code>nowrap</code> would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p> + +<p>Find out more about wrapping flex items in the guide <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering Wrapping of Flex Items</a>.</p> + +<h2 id="مختصرنویسی_با_flex-flow">مختصرنویسی با flex-flow</h2> + +<p>You can combine the two properties <code>flex-direction</code> and <code>flex-wrap</code> into the {{cssxref("flex-flow")}} shorthand. The first value specified is <code>flex-direction</code> and the second value is <code>flex-wrap</code>.</p> + +<p>In the live example below try changing the first value to one of the allowable values for <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> or <code>column-reverse</code>, and also change the second to <code>wrap</code> and <code>nowrap</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p> + +<h2 id="مشخصات_آیتمهای_داخلی_فلکس">مشخصات آیتمهای داخلی فلکس</h2> + +<p>To have more control over flex items we can target them directly. We do this by way of three properties:</p> + +<ul> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-basis")}}</li> +</ul> + +<p>We will take a brief look at these properties in this overview, and you can gain a fuller understanding in the guide <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items on the Main Axis</a>.</p> + +<p>Before we can make sense of these properties we need to consider the concept of <strong>available space</strong>. What we are doing when we change the value of these flex properties is to change the way that available space is distributed amongst our items. This concept of available space is also important when we come to look at aligning items.</p> + +<p>If we have three 100 pixel-wide items in a container which is 500 pixels wide, then the space we need to lay out our items is 300 pixels. This leaves 200 pixels of available space. If we don’t change the initial values then flexbox will put that space after the last item.</p> + +<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + +<p>If we instead would like the items to grow and fill the space, then we need to have a method of distributing the leftover space between the items. This is what the <code>flex</code> properties that we apply to the items themselves, will do.</p> + +<h3 id="مشخصه_flex-basis">مشخصه <code>flex-basis</code></h3> + +<p>The <code>flex-basis</code> is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is <code>auto</code> — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the <code>flex-basis</code>.</p> + +<p>If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare <code>display: flex</code> on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.</p> + +<h3 id="مشخصه_flex-grow">مشخصه <code>flex-grow</code></h3> + +<p>With the <code>flex-grow</code> property set to a positive integer, flex items can grow along the main axis from their <code>flex-basis</code>. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.</p> + +<p>If we gave all of our items in the example above a <code>flex-grow</code> value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.</p> + +<p>The flex-grow property can be used to distribute space in proportion. If we give our first item a <code>flex-grow</code> value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).</p> + +<h3 id="مشخصه_flex-shrink">مشخصه <code>flex-shrink</code></h3> + +<p>Where the <code>flex-grow</code> property deals with adding space in the main axis, the <code>flex-shrink</code> property controls how it is taken away. If we do not have enough space in the container to lay out our items and <code>flex-shrink</code> is set to a positive integer the item can become smaller than the <code>flex-basis</code>. As with <code>flex-grow</code> different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for <code>flex-shrink</code> will shrink faster than its siblings that have lower values.</p> + +<p>The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.</p> + +<div class="note"> +<p>Note that these values for <code>flex-grow</code> and <code>flex-shrink</code> are proportions. Typically if we had all of our items set to flex: <code>1 1 200px</code> and then wanted one item to grow at twice the rate, we would set that item to flex: <code>2 1 200px</code>. However you could use flex: <code>10 1 200px</code> and flex: <code>20 1 200px</code> if you wanted.</p> +</div> + +<h3 id="مختصرنویسی_مقادیر_برای_مشخصههای_فلکس">مختصرنویسی مقادیر برای مشخصههای فلکس</h3> + +<p>You will very rarely see the <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The <code>flex</code> shorthand allows you to set the three values in this order — <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p> + +<p>The live example below allows you to test out the different values of the flex shorthand; remember that the first value is <code>flex-grow</code>. Giving this a positive value means the item can grow. The second is <code>flex-shrink</code> — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is <code>flex-basis</code>; this is the value the items are using as their base value to grow and shrink from.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}</p> + +<p>There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:</p> + +<ul> + <li><code>flex: initial</code></li> + <li><code>flex: auto</code></li> + <li><code>flex: none</code></li> + <li><code>flex: <positive-number></code></li> +</ul> + +<p>Setting <code>flex: initial</code> resets the item to the initial values of Flexbox. This is the same as <code>flex: 0 1 auto</code>. In this case the value of <code>flex-grow</code> is 0, so items will not grow larger than their <code>flex-basis</code> size. The value of <code>flex-shrink</code> is 1, so items can shrink if they need to rather than overflowing. The value of <code>flex-basis</code> is <code>auto</code>. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.</p> + +<p>Using <code>flex: auto</code> is the same as using <code>flex: 1 1 auto</code>; everything is as with <code>flex:initial</code> but in this case the items can grow and fill the container as well as shrink if required.</p> + +<p>Using <code>flex: none</code> will create fully inflexible flex items. It is as if you wrote <code>flex: 0 0 auto</code>. The items cannot grow or shrink but will be laid out using flexbox with a <code>flex-basis</code> of <code>auto</code>.</p> + +<p>The shorthand you often see in tutorials is <code>flex: 1</code> or <code>flex: 2</code> and so on. This is as if you used <code>flex: 1 1 0</code>. The items can grow and shrink from a <code>flex-basis</code> of 0.</p> + +<p>Try these shorthand values in the live example below.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p> + +<h2 id="ترازبندی_همترازی_و_تقسیم_فضا_بین_بخشهای_داخلی_جعبه_محتوی_فلکس">ترازبندی, همترازی و تقسیم فضا بین بخشهای داخلی جعبه محتوی فلکس</h2> + +<p>A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.</p> + +<h3 id="align-items"><code>align-items</code></h3> + +<p>The {{cssxref("align-items")}} property will align the items on the cross axis.</p> + +<p>The initial value for this property is <code>stretch</code> and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.</p> + +<p>You could instead set <code>align-items</code> to <code>flex-start</code> in order to make the items line up at the start of the flex container, <code>flex-end</code> to align them to the end, or <code>center</code> to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:</p> + +<ul> + <li><code>stretch</code></li> + <li><code>flex-start</code></li> + <li><code>flex-end</code></li> + <li><code>center</code></li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p> + +<h3 id="justify-content"><code>justify-content</code></h3> + +<p>The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which <code>flex-direction</code> has set the flow. The initial value is <code>flex-start</code> which will line the items up at the start edge of the container, but you could also set the value to <code>flex-end</code> to line them up at the end, or <code>center</code> to line them up in the centre.</p> + +<p>You can also use the value <code>space-between</code> to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value <code>space-around</code>. With <code>space-around</code>, items have a half-size space on either end. Or, to cause items to have equal space around them use the value <code>space-evenly</code>. With <code>space-evenly</code>, items have a full-size space on either end.</p> + +<p>Try the following values of <code>justify-content</code> in the live example:</p> + +<ul> + <li><code>flex-start</code></li> + <li><code>flex-end</code></li> + <li><code>center</code></li> + <li><code>space-around</code></li> + <li><code>space-between</code></li> + <li><code>space-evenly</code></li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p> + +<p>In the article <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a Flex Container</a> we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.</p> + +<h2 id="مراحل_بعدی">مراحل بعدی</h2> + +<p>After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">how this specification relates to other parts of CSS</a>.</p> diff --git a/files/fa/web/css/css_flexible_box_layout/index.html b/files/fa/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..ffb152df28 --- /dev/null +++ b/files/fa/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,163 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible Boxes + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +<div>{{CSSRef}}</div> + +<p class="summary"><strong>CSS Flexible Box Layout</strong> is a module of <a href="/en-US/docs/Web/CSS">CSS</a> that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.</p> + +<h2 id="Basic_Example">Basic Example</h2> + +<p>In the following example a container has been set to <code>display: flex</code>, which means that the three child items become flex items. The value of <code>justify-content</code> has been set to <code>space-between</code> in order to space the items out evenly on the main axis. An equal amount of space is placed between each item with the left and right items being flush with the edges of the flex container. You can also see that the items are stretching on the cross axis, due to the default value of <code>align-items</code> being <code>stretch</code>. The items stretch to the height of the flex container, making them each appear as tall as the tallest item.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("align-content")}}</li> + <li>{{cssxref("align-items")}}</li> + <li>{{cssxref("align-self")}}</li> + <li>{{cssxref("flex")}}</li> + <li>{{cssxref("flex-basis")}}</li> + <li>{{cssxref("flex-direction")}}</li> + <li>{{cssxref("flex-flow")}}</li> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-wrap")}}</li> + <li>{{cssxref("justify-content")}}</li> + <li>{{cssxref("order")}}</li> +</ul> +</div> + +<h3 id="Glossary_entries">Glossary entries</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Glossary/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Glossary/Flex_Container">Flex Container</a></li> + <li><a href="/en-US/docs/Glossary/Flex_Item">Flex Item</a></li> + <li><a href="/en-US/docs/Glossary/Main_Axis">Main Axis</a></li> + <li><a href="/en-US/docs/Glossary/Cross_Axis">Cross Axis</a></li> + <li><a href="/en-US/docs/Glossary/Flex">Flex</a></li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></dt> + <dd>An overview of the features of flexbox</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</a></dt> + <dd>How flexbox relates to other layout methods, and other CSS specifications</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></dt> + <dd>How the Box Alignment properties work with flexbox.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></dt> + <dd>Explaining the different ways to change the order and direction of items, and covering the potential issues in doing so.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></dt> + <dd>This article explains the flex-grow, flex-shrink and flex-basis properties.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></dt> + <dd>How to create flex containers with multiple lines and control the display of the items in those lines.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a></dt> + <dd>Common design patterns that are typical flexbox use cases.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Backwards compatibility of Flexbox</a></dt> + <dd>Browser status of flexbox, interoperability issues and supporting older browsers and versions of the spec</dd> +</dl> + +<ul> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("20.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>10.0{{property_prefix("-ms")}}<br> + 11.0</td> + <td>12.10</td> + <td>6.1{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown()}}</td> + <td>4.4</td> + <td>11</td> + <td>12.10</td> + <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a></dt> + <dd>a community-curated list of flexbox browser bugs and workarounds</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></dt> + <dd>This article provides a set of mixins for those who want to create cross-browser flexbox experiences that even work in older browser that don't support the modern flexbox syntax</dd> +</dl> + +<p> </p> diff --git a/files/fa/web/css/flex_value/index.html b/files/fa/web/css/flex_value/index.html new file mode 100644 index 0000000000..2dd81e4740 --- /dev/null +++ b/files/fa/web/css/flex_value/index.html @@ -0,0 +1,53 @@ +--- +title: <flex> +slug: Web/CSS/flex_value +tags: + - سی اس اس + - قالب بندی + - وب +translation_of: Web/CSS/flex_value +--- +<div>{{CSSRef}}</div> + +<p><strong><code dir="ltr"><flex></code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> یک فاصله طولی منعطف را در یک جعبه محتوی گرید مشخص میکند. این نوع مقدار در {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} و سایر موارد مشابه استفاده میشود.</p> + +<h2 id="سینتکس">سینتکس</h2> + +<p>نوع داده <code><flex></code> به صورت {{cssxref("<number>")}} و در ادامه <a id="fr" name="fr"><code>fr</code></a> استفاده میشود. واحد <code>fr</code> کسری از فضای باقیمانده در جعبه محتوی گرید است. مانند سایر مقادیر در سیاساس، بین مقدار و واحد فاصلهای نیست.</p> + +<h2 id="مثال">مثال</h2> + +<pre class="brush: css">1fr /* استفاده از یک عدد طبیعی */ +2.5fr /* استفاده از یک عدد اعشاری */ +</pre> + +<h2 id="خصوصیات">خصوصیات</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">خصوصیت</th> + <th scope="col">وضعیت</th> + <th scope="col">توضیحات</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Grid", "#typedef-flex", "<flex>")}}</td> + <td>{{Spec2("CSS Grid")}}</td> + <td>تعریف اولیه.</td> + </tr> + </tbody> +</table> + +<h2 id="سازگاری_با_مرورگرها">سازگاری با مرورگرها</h2> + + + +<p>{{Compat("css.types.flex")}}</p> + +<h2 id="مقالات_مرتبط">مقالات مرتبط</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> +</ul> diff --git a/files/fa/web/css/index.html b/files/fa/web/css/index.html new file mode 100644 index 0000000000..bfddd551f0 --- /dev/null +++ b/files/fa/web/css/index.html @@ -0,0 +1,84 @@ +--- +title: 'CSS: شیوهنامههای آبشاری' +slug: Web/CSS +tags: + - CSS + - Design + - Layout + - NeedsTranslation + - References + - TopicStub +translation_of: Web/CSS +--- +<p dir="rtl"><span class="seoSummary"><strong>شیوه نامههای آبشاری (CSS)</strong> یک زبان <a href="/fa/docs/DOM/stylesheet">شیوه نامه</a> است که نحوه نمایش یک سند در قالب <a href="/fa/docs/HTML" title="The HyperText Mark-up Language">HTML</a></span> یا <a href="/fa/docs/XML" title="fa/docs/XML">XML</a> (شامل زبانهای متنوعی مثل <a href="/fa/docs/SVG" title="fa/docs/SVG">SVG</a> یا <a href="/fa/docs/Web/MathML">MathML</a> یا {{Glossary("XHTML", "", 1)}}) را شرح می دهد<span class="seoSummary">. CSS نحوه رندر شدن عناصر روی صفحه نمایش، روی کاغذ، در گفتار ، یا روی دیگر رسانهها را شرح میدهد.</span></p> + +<p dir="rtl">CSS یکی از زبانهای اصلی <em>وب متن باز</em> و دارای استاندارد برمبنای <a class="external" href="http://w3.org/Style/CSS/#specs">خصوصیات W3C</a> است. در سطحهای مختلف، CSS1 که الان منسوخ شده است، CSS2.1 که یک توصیه است و <a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>، که حالا به ماژولهای کوچکتر شکسته شده است، و در حال پیشرفت در مسیر استانداردسازی است توسعه داده شده است.</p> + +<ul class="card-grid" dir="rtl"> + <li><span>مرجع CSS</span> + + <p><a href="/fa/docs/CSS/CSS_Reference" title="en-US/docs/CSS/CSS_Reference">مرجع کامل CSS</a> ما برای <u>توسعه دهندگان وب فصلی</u> تمامی خصوصیات و مفاهیم CSS را شرح میدهد.</p> + </li> + <li><span>آموزش CSS</span> + <p><a href="fa/docs/Learn/CSS">آموزشگاه css ما</a> حاوی آموزشهای فراوان برای رساندن شما از سطح مبتدی به حرفهای است و تمامی اصول اساسی را پوشش میدهد.</p> + </li> + <li><span>معرفی CSS</span> + <p>اگر شما در توسعه وب تازهکار هستید، حتما مقاله <a href="en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">مقدمات ccs</a> ما را بخوانید تا بدانید که CSS چیست و چگونه باید آن را به کار گرفت.</p> + </li> +</ul> + +<div class="row topicpage-table" dir="rtl"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">مستندات و آموزشها در مورد CSS</h2> + +<dl> + <dt>مفاهیم کلیدی CSS</dt> + <dd><a href="/en-US/docs/CSS/Syntax" title="/en-US/docs/CSS/Syntax">نحو و قالب زبان</a> و معرفی مفاهیم بنیادی مثل <a href="/en-US/docs/CSS/Specificity" title="Specificity">ویژگی</a> و <a href="/en-US/docs/CSS/inheritance" title="inheritance">ارثبری</a>، <a href="/en-US/docs/CSS/box_model" title="Box model">مدل جعبهای</a> و <a href="/en-US/docs/CSS/margin_collapsing" title="Margin collapsing">حاشیه سقوط</a>، <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">پشتهسازی</a> و محتوای <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">فرمتدهی جعبهای</a>، یا مقادیر <a href="/en-US/docs/CSS/initial_value" title="initial value">اولیه</a>، <a href="/en-US/docs/CSS/computed_value" title="computed value">محاسبه شده</a>، <a href="/en-US/docs/CSS/used_value" title="used value">استفاده شده</a> و <a href="/en-US/docs/CSS/actual_value" title="actual value">واقعی</a> را شرح میدهد. موجودیتهایی مثل <a href="/en-US/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">خصوصیات مختصر شده CSS</a> نیز تعریف شدهاند.</dd> + <dt><a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">راهنمای توسعه دهنده CSS</a></dt> + <dd>مقالاتی برای کمک به شما تا تکنیکهای CSS را یاد بگیرید و محتوی خودتان را درخشان کنید.</dd> +</dl> + +<h2 class="Tools" id="Tools" name="Tools">ابزارهای سادهسازی توسعه CSS</h2> + +<ul> + <li><a class="external" href="http://jigsaw.w3.org/css-validator/">سرویس تایید اعتبار W3C CSS</a> چک میکند که یک CSS داده شده معتبر است. این یک ابزار ارزشمند است.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">الحاقی فایرباگ</a><span class="external"> فایرفاکس، یک الحاقی معروف برای هدایت ویرایش زنده</span> CSS روی سایتهای ملاقات شده است. برای تست بعضی تستها خیلی کاربردی است، بهرحال این الحاقی کارهای بیشتری نیز انجام میدهد.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">الحاقی توسعه وب</a> نیز اجازه میدهد تا بهصورت زنده CSS سایتهای دیده شده را ببینید و ویرایش کنید. سادهتر از فایرباگ است، بهرحال قدرت کمتری دارد.</li> + <li><a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">الحاقی EditCSS</a> فایرفاکس اجازه ویرایش CSS در نوار کناری را میدهد.</li> +</ul> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">موضوعات وابسته</h2> + +<ul> + <li><a href="/en-US/learn/css" title="https://developer.mozilla.org/en-US/learn/css">منابع CSS </a>را بدانید.</li> + <li>زبانهای وب بازی که اغلب CSS روی آنها اعمال شده است: <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>، <a href="/en-US/docs/SVG" title="SVG">SVG</a>، <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>، <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>.</li> + <li>تکنولوژیهای موزیلا که استفاده وسیعی از CSS میکنند: <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>، <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">الحاقیها</a> و <a href="/en-US/docs/Themes" title="en-US/docs/Themes">تمهای</a> فایرفاکس و تاندربیرد.</li> +</ul> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="News" name="News">اخبار</h2> + +<ul> + <li><a href="http://www.w3.org/TR/pointerevents/" title="http://www.w3.org/TR/pointerevents/">Pointer Events</a> reached the <em>Candidate Recommandation</em> status, meaning that the CSS property <code>touch-action</code>, currently only implemented in IE10 (with the <code>-ms-</code> prefix), is no more experimental. <em>(May 6th, 2013)</em></li> + <li>Gecko's support of <a href="/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes"><em>flexible boxes</em></a> has been adapted to match a recent specification clarification: from Firefox 23, and already in Nightly, {{cssxref("::before")}} and {{cssxref("::after")}} will be flex items, and as such can be repositioned using {{cssxref("order")}} and {{cssxref("align-self")}}. <em>(May 3rd, 2013)</em></li> + <li>The CSSWG published a <a href="http://www.w3.org/TR/2013/WD-selectors4-20130502/">new working draft</a> of the Selectors Level 4 specification. It still is in the <em>exploring phase</em> and most of the new features are not supported anywhere, but it refines the behavior of scoped selectors and added two new ones: <code>:blank</code>, a relaxed {{cssxref(":empty")}} matching elements only containing spaces and carriage returns, and <code>:placeholder-shown</code>. The two pseudo-classes <code>:matches()</code> and {{cssxref(":not", ":not()")}} have been tweaked to allow more complex parameters. But beware, as this is still a very early draft, these features may change in the future. <em>(May 2nd, 2013)</em></li> +</ul> + +<h2 class="Community" id="Community" name="Community">کمک گرفتن از کمیتهها</h2> + +<p>شما در مورد مشکلات مربوط به CSS احتیاج به کمک دارید و نمیتوانید راهحل را در مستندات پیدا کنید؟</p> + +<ul> + <li><a href="/en-US/docs/CSS/Common_CSS_Questions" title="en-US/docs/CSS/Common_CSS_Questions">سوالات معمول CSS</a> که تذکراتی جهت حل مشکلات معمول CSS را ارایه میدهد.</li> + <li>به <a href="http://stackoverflow.com/questions/tagged/css" title="http://stackoverflow.com/questions/tagged/css">Stack Overflow</a> بروید، یک سایت مشترک ساحته شده و نگهدارنده Q&A است و میتوانید پاسخ سوال خودتان را جستجو و پیدا کنید. اگر نه شما قادر خواهید بود که سوال خود را در آنجا مطرح کنید.</li> + <li>طرح مشورت در انجمن، که CSS و HTML را پوشش میدهند: سوال خود را در کانال IRC موزیلا بپرسید: <a class="link-irc" href="irc://irc.mozilla.org/css">#css</a> + <ul> + <li>سوال خود را در <a class="external" href="http://www.css-discuss.org/">CSS-Discuss site and list</a> بپرسید</li> + </ul> + </li> +</ul> +</div> +</div> + +<p dir="rtl"></p> diff --git a/files/fa/web/css/margin/index.html b/files/fa/web/css/margin/index.html new file mode 100644 index 0000000000..c29a75ea06 --- /dev/null +++ b/files/fa/web/css/margin/index.html @@ -0,0 +1,207 @@ +--- +title: margin +slug: Web/CSS/margin +translation_of: Web/CSS/margin +--- +<div dir="rtl">{{CSSRef()}}</div> + +<h2 dir="rtl" id="خلاصه_مطلب">خلاصه مطلب</h2> + +<p dir="rtl">خواصیت margin درCSS حاشیه را برای چهار طرف عنصر مشخص می کند. این خواصیت خلاصه شده چهار خواصیت {{ Cssxref("margin-top") }} ، {{ Cssxref("margin-right") }} ، {{ Cssxref("margin-bottom") }} و {{ Cssxref("margin-left") }} می باشد که برای جلوگیری از مقدار دهی به هر کدام از این خواص تعبیه شده است.</p> + +<p dir="rtl">همچنین قابلیت مقداردهی با مقادیر منفی را نیز داراست.</p> + +<h2 dir="rtl" id="روش_استفاده">روش استفاده</h2> + +<pre class="brush:css" dir="rtl">/* به هر چهار جهت این مقدار اعمال می گردد */ +margin: 1em; + +/*افقی (قسمت چپ و راست) | عمودی (قسمت بالا و پایین) */ +margin: 5% auto; + +/* پایین | افقی(چپ و راست) | بالا */ +margin: 1em auto 2em; + +/* چپ | پایین | راست | بالا */ +margin: 2px 1em 0 auto; + +margin: وارث; +</pre> + +<h3 dir="rtl" id="مقادیر">مقادیر</h3> + +<p dir="rtl">یک، دو، سه و یا چهار عدد از مقادیر زیر را می پذیرد:</p> + +<dl> + <dt dir="rtl"><code><length></code></dt> + <dd dir="rtl">مقدار ثابتی را مشخص می کند. مقادیر منفی مورد قبول هستند. مقادیر قابل قبول را در {{cssxref("<length>")}} مشاهده کنید.</dd> + <dt dir="rtl"><code><percentage></code></dt> + <dd dir="rtl">A {{cssxref("<percentage>")}} relative to the <strong>width</strong> of the containing block. Negative values are allowed.</dd> + <dt dir="rtl"><code>auto</code></dt> + <dd dir="rtl"><code>auto </code>is replaced by some suitable value, e.g. it can be used for centering of blocks.<br> + <code>div { width:50%; margin:0 auto; }</code> centers the div container horizontally.</dd> +</dl> + +<ul dir="rtl"> + <li><strong>One</strong> single value applies to all <strong>four sides</strong>.</li> + <li><strong>Two</strong> values apply first to <strong>top and bottom</strong>, the second one to <strong>left and right</strong>.</li> + <li><strong>Three</strong> values apply first to <strong>top</strong>, second to <strong>left and right</strong> and third to <strong>bottom</strong>.</li> + <li><strong>Four</strong> values apply to <strong>top</strong>, <strong>right</strong>, <strong>bottom</strong> and <strong>left</strong> in that order (clockwise).</li> +</ul> + +<h3 dir="rtl" id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox" dir="rtl">{{csssyntax("margin")}}</pre> + +<h2 dir="rtl" id="Examples">Examples</h2> + +<h3 dir="rtl" id="Simple_example">Simple example</h3> + +<h4 dir="rtl" id="HTML">HTML</h4> + +<pre class="brush: html" dir="rtl"><div class="ex1"> + margin: auto; + background: gold; + width: 66%; +</div> +<div class="ex2"> + margin: 20px 0 0 -20px; + background: gold; + width: 66%; +</div></pre> + +<h4 dir="rtl" id="CSS">CSS</h4> + +<pre class="brush: css; highlight:[2,7]" dir="rtl">.ex1 { + margin: auto; + background: gold; + width: 66%; +} +.ex2 { + margin: 20px 0px 0 -20px; + background: gold; + width: 66%; +}</pre> + +<p dir="rtl">{{ EmbedLiveSample('Margin_Exemples') }}</p> + +<h3 dir="rtl" id="Another_example">Another example</h3> + +<pre class="brush: css" dir="rtl">margin: 5%; /* all sides 5% margin */ + +margin: 10px; /* all sides 10px margin */ + +margin: 1.6em 20px; /* top and bottom 1.6em, left and right 20px margin */ + +margin: 10px 3% 1em; /* top 10px, left and right 3%, bottom 1em margin */ + +margin: 10px 3px 30px 5px; /* top 10px, right 3px, bottom 30px, left 5px margin */ + +margin: 1em auto; /* 1em margin on top and bottom, box is horizontally centered */ + +margin: auto; /* box is horizontally centered, 0 margin on top and bottom */ +</pre> + +<h2 dir="rtl" id="Horizontal_centering_with_margin_0_auto">Horizontal centering with <code>margin: 0 auto;</code></h2> + +<p dir="rtl">To center something horizontally in modern browsers, use <code><a href="/en-US/docs/Web/CSS/display">display</a>: flex; <a href="/en-US/docs/Web/CSS/justify-content">justify-content</a>: center;</code> .</p> + +<p dir="rtl">However, in older browsers like IE8-9, these are not available. In order to center an element inside its parent, use <code>margin: 0 auto;</code></p> + +<h2 dir="rtl" id="Specifications">Specifications</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>margin</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Removes its effect on inline elements.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="Browser_compatibility">Browser compatibility</h2> + +<p dir="rtl">{{ CompatibilityTable() }}</p> + +<div dir="rtl" id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>auto</code> value</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>6.0 (strict mode)</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div dir="rtl" id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 dir="rtl" id="See_also">See also</h2> + +<ul> + <li dir="rtl"><a class="internal" href="/en/CSS/margin_collapsing" title="en/CSS/margin collapsing">Margin collapsing</a></li> +</ul> diff --git a/files/fa/web/css/media_queries/index.html b/files/fa/web/css/media_queries/index.html new file mode 100644 index 0000000000..e1f92ab511 --- /dev/null +++ b/files/fa/web/css/media_queries/index.html @@ -0,0 +1,131 @@ +--- +title: Media queries +slug: Web/CSS/Media_Queries +tags: + - CSS + - CSS3 Media Queries + - Media Queries + - NeedsTranslation + - Overview + - Reference + - Responsive Design + - TopicStub +translation_of: Web/CSS/Media_Queries +--- +<div>{{CSSRef("CSS3 Media Queries")}}</div> + +<p><strong>Media Queries</strong> are a key component of <a href="/en-US/docs/Web/Apps/Progressive/Responsive">responsive design</a>, which make it possible for CSS to adapt based on various parameters or device characteristics. For example, a media query can apply different styles if the screen is smaller than a certain size, or based on whether the user is holding their device in portrait or landscape mode. The {{cssxref("@media")}} at-rule is used to conditionally apply styles to a document.</p> + +<p>In addition, the media query syntax is also used in other contexts, such as in the {{HTMLElement("source")}} element's {{htmlattrxref("media", "source")}} attribute, which can be set to a media query string to use to determine whether or not to use that source when selecting the specific image to use in a {{HTMLElement("picture")}} element.</p> + +<p>In addition, the {{domxref("Window.matchMedia()")}} method can be used to test the window against a media query. You can also use {{domxref("MediaQueryList.addListener()")}} to be notified whenever the state of the queries changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.</p> + +<p>You can learn more about programmatically using media queries in <a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a>.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="At-rules">At-rules</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@import")}}</li> + <li>{{cssxref("@media")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></dt> + <dd>Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.</dd> + <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a></dt> + <dd>Describes how to test media queries from your JavaScript code, programmatically, to determine the state of the device, and to set up listeners that let your code be notified when the results of media queries change (such as when the user rotates the screen, causing an orientation change).</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Conditional')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS4 Media Queries')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'media.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.7)}}</td> + <td>9.0</td> + <td>9.2</td> + <td>1.3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1.7)}}</td> + <td>9.0</td> + <td>9.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/fa/web/css/media_queries/ابزار-تست-رسانه-پاسخگو/index.html b/files/fa/web/css/media_queries/ابزار-تست-رسانه-پاسخگو/index.html new file mode 100644 index 0000000000..286a3e8ba2 --- /dev/null +++ b/files/fa/web/css/media_queries/ابزار-تست-رسانه-پاسخگو/index.html @@ -0,0 +1,331 @@ +--- +title: ابزار تست رسانه پاسخگو +slug: Web/CSS/Media_Queries/ابزار-تست-رسانه-پاسخگو +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +<div dir="rtl">{{cssref}}</div> + +<p dir="rtl"> ابزارهای تست پاسخگو بسیار مفید هستند، زمانی که می خواهید سبک CSS را طبق نوع کلی دستگاه (مانند اندازه چاپ در مقابل سایز صفحه نمایش)، ویژگی های خاص (مانند عرض مرورگر رسانه) یا محیط (مانند شرایط نور محیط) استفاده کنید. با انواع مختلفی از دستگاه های متصل به اینترنت که امروزه در دسترس ما هستند و با وجود ابزارهای چند رسانه ای با اندازه های بیشمار، ابزار تست پاسخگو رسانه ها یک ابزار حیاتی برای ساخت وب سایت ها و برنامه هایی با سیستم طراحی حرفه ای جهت کار بر روی هر سخت افزاری که کاربران ممکن است با آن کار کنند، بشمار میرود.</p> + +<h2 dir="rtl" id="هدف_قرار_دادن_انواع_رسانه_ها"><span class="short_text" id="result_box" lang="fa"><span>هدف قرار دادن انواع رسانه ها</span></span></h2> + +<p dir="rtl">انواع رسانه ها دسته کلی یک دستگاه مشخص را توصیف می کنند. اگر چه وبسایت ها معمولا با صفحه نمایش طراحی شده اند، ممکن است بخواهید سبکهایی را ایجاد کنید که دستگاه هایی خاص مانند چاپگرها یا صفحه نمایش مبتنی بر صدا را هدف قرار میدهند. به عنوان مثال، این کد CSS چاپگر ها را هدف قرار میدهد :</p> + +<pre class="brush: css">@media print { ... }</pre> + +<p dir="rtl">همچنین می توانید به راحتی چندین دستگاه را هدف قرار دهید. به عنوان مثال، دستور<code>@media</code> با استفاده از دو ابزار رسانه پاسخگو، صفحه نمایش و همینطور چاپگر را هدف قرار میدهد:</p> + +<pre class="brush: css" dir="rtl">@media screen, print { ... }</pre> + +<p dir="rtl"><span id="result_box" lang="fa"><span class="alt-edited">برای مشاهده لیستی از رسانه های مختلف روی<a href="/fa-IR/docs/CSS/@media#Media_types"> انواع رسانه</a> کلید کنید. از آنجایی که دستگاهها را فقط در شرایط بسیار وسیع توصیف می کنند، فقط تعداد کمی از آنها در دسترس هستند؛ برای اختصاص ویژگی های خاص تر، از <em>ویژگی های رسانه</em> استفاده کنید.</span></span></p> + +<h2 dir="rtl" id="Targeting_media_features">Targeting media features</h2> + +<p><a href="/en-US/docs/CSS/@media#Media_features">Media features</a> describe the specific characteristics of a given {{glossary("user agent")}}, output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or to devices that are being used in low-light conditions. This example applies styles when the user's <em>primary</em> input mechanism (such as a mouse) can hover over elements:</p> + +<pre class="brush: css"><a href="/en-US/docs/CSS/@media">@media</a> (hover: hover) { ... }</pre> + +<p>Many media features are <em>range features</em>, which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's {{glossary("viewport")}} is equal to or narrower than 12,450 pixels:</p> + +<pre class="brush: css">@media (max-width: 12450px) { ... }</pre> + +<p>If you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is non-zero. For example, this CSS will apply to any device with a color screen:</p> + +<pre class="brush: css">@media (color) { ... }</pre> + +<p>If a feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false. For example, the styles nested inside the following query will never be used, because no speech-only device has a screen aspect ratio:</p> + +<pre class="brush: css">@media speech and (aspect-ratio: 11/5) { ... }</pre> + +<p>For more media feature examples, please see the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features">reference page</a> for each specific feature.</p> + +<h2 id="Creating_complex_media_queries">Creating complex media queries</h2> + +<p>Sometimes you may want to create a media query that depends on multiple conditions. This is where the <em>logical operators</em> come in: <code>not</code>, <code>and</code>, and <code>only</code>. Furthermore, you can combine multiple media queries into a <em>comma-separated list</em>; this allows you to apply the same styles in different situations.</p> + +<p>In the previous example, we've already seen the <code>and</code> operator used to group a media <em>type</em> with a media <em>feature</em>. The <code>and</code> operator can also combine multiple media features into a single media query. The <code>not</code> operator, meanwhile, negates a media query, basically reversing its normal meaning. The <code>only</code> operator prevents older browsers from applying the styles.</p> + +<div class="note"> +<p><strong>Note:</strong> In most cases, the <code>all</code> media type is used by default when no other type is specified. However, if you use the <code>not</code> or <code>only</code> operators, you must explicitly specify a media type.</p> +</div> + +<h3 id="and"><code>and</code></h3> + +<p>The <code>and</code> keyword combines a media feature with a media type <em>or</em> other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:</p> + +<pre class="brush: css">@media (min-width: 30em) and (orientation: landscape) { ... }</pre> + +<p>To limit the styles to devices with a screen, you can chain the media features to the <code>screen</code> media type:</p> + +<pre class="brush: css">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre> + +<h3 id="comma-separated_lists">comma-separated lists</h3> + +<p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680 pixels <em>or</em> is a screen device in portrait mode:</p> + +<pre class="brush: css">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre> + +<p>Taking the above example, if the user had a printer with a page height of 800 pixels, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480 pixels, the second query would apply and the media statement would still return true.</p> + +<h3 id="not"><code>not</code></h3> + +<p>The <code>not</code> keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The <code>not</code> keyword can't be used to negate an individual feature query, only an entire media query. The <code>not</code> is evaluated last in the following query:</p> + +<pre class="brush: css">@media not all and (monochrome) { ... } +</pre> + +<p>... so that the above query is evaluated like this:</p> + +<pre class="brush: css">@media not (all and (monochrome)) { ... } +</pre> + +<p>... rather than like this:</p> + +<pre class="example-bad brush: css">@media (not all) and (monochrome) { ... }</pre> + +<p>As another example, the following media query:</p> + +<pre class="brush: css">@media not screen and (color), print and (color) { ... } +</pre> + +<p>... is evaluated like this:</p> + +<pre class="brush: css">@media (not (screen and (color))), print and (color) { ... }</pre> + +<h3 id="only"><code>only</code></h3> + +<p>The <code>only</code> keyword prevents older browsers that do not support media queries with media features from applying the given styles. <em>It has no effect on modern browsers.</em></p> + +<pre class="brush: html"><link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" /> +</pre> + +<h2 id="Mozilla-specific_media_features">Mozilla-specific media features</h2> + +<p>Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features in the future.</p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/@media/-moz-mac-graphite-theme">-moz-mac-graphite-theme</a></li> + <li><a href="/en-US/docs/Web/CSS/@media/-moz-maemo-classic">-moz-maemo-classic</a></li> + <li><a href="/en-US/docs/Web/CSS/@media/-moz-device-pixel-ratio">-moz-device-pixel-ratio</a> {{deprecated_inline("16")}}</li> + <li><a href="/en-US/docs/Web/CSS/@media/-moz-os-version">-moz-os-version</a></li> + <li><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-end-backward">-moz-scrollbar-end-backward</a></li> + <li><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-end-forward">-moz-scrollbar-end-forward</a></li> + <li><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-start-backward">-moz-scrollbar-start-backward</a></li> + <li><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-start-forward">-moz-scrollbar-start-forward</a></li> + <li><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-thumb-proportional">-moz-scrollbar-thumb-proportional</a></li> + <li><a href="/en-US/docs/Web/CSS/@media/-moz-touch-enabled">-moz-touch-enabled</a></li> + <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-accent-color-in-titlebar">-moz-windows-accent-color-in-titlebar</a></li> + <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-classic">-moz-windows-classic</a></li> + <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-compositor">-moz-windows-compositor</a></li> + <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-default-theme">-moz-windows-default-theme</a></li> + <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-glass">-moz-windows-glass</a></li> + <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-theme">-moz-windows-theme</a></li> +</ul> + +<h2 id="WebKit-specific_media_features">WebKit-specific media features</h2> + +<p id="-webkit-transform-3d">For WebKit-specific media features, please see the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features">reference page</a> for each specific feature.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("21")}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("9.0")}}</td> + <td>{{CompatOpera("9")}}</td> + <td>{{CompatSafari("4")}}</td> + </tr> + <tr> + <td><code>grid</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} <sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>resolution</code></td> + <td>{{CompatChrome("29")}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}} <sup>[2]</sup><br> + {{CompatGeckoDesktop("8.0")}} <sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>scan</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[4]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>-webkit-min-device-pixel-ratio</code>, <code>-webkit-max-device-pixel-ratio</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}<sup>[7]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>-webkit-transform-3d</code></td> + <td>{{CompatVersionUnknown}}<sup>[5]</sup></td> + <td>{{CompatGeckoDesktop("49")}}<sup>[6]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[5]</sup></td> + <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td> + </tr> + <tr> + <td><code>-webkit-transform-2d</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[5]</sup></td> + <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td> + </tr> + <tr> + <td><code>-webkit-transition</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[5]</sup></td> + <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td> + </tr> + <tr> + <td><code>display-mode</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("47")}}<sup>[8]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>grid</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>resolution</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>scan</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>-webkit-min-device-pixel-ratio</code>, <code>-webkit-max-device-pixel-ratio</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>-webkit-transform-3d</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>-webkit-transform-2d</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>-webkit-transition</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>display-mode</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(47)}}<sup>[8]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>grid</code> media type is not supported.</p> + +<p>[2] Supports {{cssxref("<integer>")}} values only.</p> + +<p>[3] Supports {{cssxref("<number>")}} values, as per the spec.</p> + +<p>[4] <code>tv</code> media type is not supported.</p> + +<p>[5] See {{WebKitBug(22494)}}.</p> + +<p>[6] Implemented for Web compatibility reasons in Gecko 46.0 {{geckoRelease("46.0")}} behind the preference <code>layout.css.prefixes.webkit</code> defaulting to <code>false</code>. See {{bug(1239799)}}. Since Gecko 49.0 {{geckoRelease("49")}} <code>layout.css.prefixes.webkit</code> defaults to <code>true</code>.</p> + +<p>[7] Implemented as aliases for <code>min--moz-device-pixel-ratio</code> and <code>max--moz-device-pixel-ratio</code> for Web compatibility reasons in Gecko 45.0 {{geckoRelease("45.0")}} (see {{bug(1176968)}}) behind the preferences <code>layout.css.prefixes.webkit</code> and <code>layout.css.prefixes.device-pixel-ratio-webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49")}} <code>layout.css.prefixes.webkit</code> defaults to <code>true</code>.</p> + +<p>[8] Only the <code>fullscreen</code> and <code>browser</code> values of <code>display-mode</code> were supported in 47. <code>minimal-ui</code> and <code>standalone</code> were added in Firefox 57.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="internal" href="/en-US/docs/CSS/@media#Media_types">Media types</a></li> + <li><a href="/en-US/docs/CSS/@media#Media_features">Media features</a></li> + <li><a href="/en-US/docs/CSS/Using_media_queries_from_code">Testing media queries using code</a></li> + <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a></li> +</ul> diff --git a/files/fa/web/css/position/index.html b/files/fa/web/css/position/index.html new file mode 100644 index 0000000000..d0ccad0e5f --- /dev/null +++ b/files/fa/web/css/position/index.html @@ -0,0 +1,173 @@ +--- +title: موقعیت +slug: Web/CSS/position +translation_of: Web/CSS/position +--- +<p dir="rtl">{{CSSRef}}</p> + +<h2 dir="rtl" id="خلاصه">خلاصه</h2> + +<p dir="rtl">ویژگی <code style="font-size: 14px;">position <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a></code> قوانین دیگری برای موقعیت دادن به عناصر انتخاب میکند، طراحی شده تا برای افکتهای انیمیشن نوشته شده مفید باشد.</p> + +<p dir="rtl">{{cssinfo}}</p> + +<p dir="rtl">یک <strong>عنصر موقعیت گرفته</strong> عنصری است که ویژگی موقعیت <a href="/en-US/docs/CSS/computed_value" title="/en-US/docs/CSS/computed_value">محاسبه شده</a> relative، absolute، یا fixed است.</p> + +<p dir="rtl">یک <strong>عنصر مستقل موقعیت گرفته</strong> شده عنصری است که ویژگی موقعیت <a href="/en-US/docs/CSS/computed_value" title="/en-US/docs/CSS/computed_value">محاسبه شده</a> absolute یا fixed است.</p> + +<p dir="rtl">{{Cssxref("top")}}، {{Cssxref("right")}}، {{Cssxref("bottom")}}، و {{Cssxref("left")}} ویژگیهایی هستند که موقعیت عناصر موقعیت داده شده را مشخص میکنند.</p> + +<h2 dir="rtl" id="نحو">نحو</h2> + +<p dir="rtl"> </p> + +<pre class="twopartsyntaxbox" dir="rtl" style="margin-top: 0px; padding: 0px; white-space: normal; font-size: 14px; line-height: 18px;"><a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("position")}}</pre> + +<pre dir="rtl" style="margin-bottom: 1.286em; padding: 0px; white-space: normal; font-size: 14px; line-height: 18px;">position: static position: relative position: absolute position: fixed position: inherit</pre> + +<h3 dir="rtl" id="مقادیر">مقادیر</h3> + +<p dir="rtl"><strong><em>static</em></strong></p> + +<p dir="rtl">رفتار عادی. ویژگیهای top، right، bottom، و left اعمال نمیشوند.</p> + +<p dir="rtl"><strong><em>relative</em></strong></p> + +<p dir="rtl">عناصر را طوری روی سطح پخش میکند گویی موقعیت داده نشدند، و سپس موقعیت عنصر را تنظیم میکند، بدون آنکه ترکیب را تغییر دهد (بنابراین برای عنصر یک جای باز جایی که باید داشته باشد و موقعیت داده نشده کنار میگذارد). position: relative روی عناصر <code>table-*-group</code>، <code>table-row</code>، <code>table-column</code>، <code>table-cell</code>، و <code>table-caption</code> بی تاثیر است.</p> + +<p dir="rtl"><strong><em>absolute</em></strong></p> + +<p dir="rtl">برای عنصر فضا کنار نمیگذارد. در عوض، در موقعیت نسبی مشخص شده نسبت به نزدیکترین والد موقعیت داده شده یا نسبت به بلوک شامل موقعیت میدهد. جعبههایی که موقعیت مستقل دارند میتوانند حاشیه/margin داشته باشند، آنها با هیچ یک از حواشی دیگر فروپاشی نمیکنند.</p> + +<p dir="rtl"><strong><em>fixed</em></strong></p> + +<p dir="rtl">برای عنصر فضا کنار نمیگذارد. در عوض، در موقعیت نسبی مشخص شده نسبت به نما/viewport صفحهی نمایش موقعیت میدهد و با حرکت دادن صفحه/scroll حرکت نمیکند. در زمان چاپ، در همان موقعیت روی هر صفحه ثابت میماند.</p> + +<h2 dir="rtl" id="نمونهها">نمونهها</h2> + +<h3 dir="rtl" id="موقعیت_دادن_نسبی">موقعیت دادن نسبی</h3> + +<p dir="rtl">برای نسبی موقعیت دادن یک عنصر که از بالا و چپ ۲۰ پیکسل از موقعیت عادی خودش تفاوت دارد، دستور CSS زیر استفاده میشود.</p> + +<pre dir="rtl">#two { position: relative; top: 20px; left: 20px; }</pre> + +<p dir="rtl">به عناصر دیگر توجه کنید که چطور نمایش داده میشوند در حالی که "Two" در موقعیت عادی خودش بود و فضا درنظر میگیرد.</p> + +<p dir="rtl"><img alt="" src="https://developer.mozilla.org/@api/deki/files/4922/=relative-positioning.png" style="height: 136px; width: 519px;"></p> + +<h3 dir="rtl" id="موقعیت_دادن_مستقل">موقعیت دادن مستقل</h3> + +<p dir="rtl">عناصری که نسبی موقعیت داده شدند همچنان در روند عادی عناصر در سند درنظر گرفته میشوند. در مقابل، عنصری که مستقل موقعیت داده شده از روند خارج شده بنابراین زمانی که عناصر دیگر قرار داده میشود هیچ فضایی نمیگیرد. عنصری که موقعیت مستقل گرفته است موقعیت نسبی نسبت به نزدیکترین والد موقعیت داده شده دارد. اگر والدی که موقعیت گرفته باشه وجود نداشته باشد، ظرف آغازین استفاده میشود.</p> + +<p dir="rtl">در مثال زیر، والد آبی رنگ div موقعیت نسبی گرفته است (پس نزدیکترین والد موقعیت گرفته شده خواهد بود) و جعبهی Two مستقل موقعیت گرفته است:</p> + +<pre dir="rtl">#ancestor { position: relative; background: #ddf; width: 500px; } + +#two { position: absolute; top: 20px; left: 20px; }</pre> + +<p dir="rtl"><img alt="" src="https://developer.mozilla.org/@api/deki/files/4923/=absolute-positioning.png" style="height: 134px; width: 518px;"></p> + +<p dir="rtl">اگر #ancestor موقعیت نسبی نداشته بود، جعبهی Two با موقعیت نسبی نسبت به بالاترین گوشه سمت چپ صفحه ظاهر میشد.</p> + +<p dir="rtl">موقعیت دادن ثابت</p> + +<p dir="rtl">موقعیت ثابت مشابه موقعیت دادن مستقل است، با این استثنا که بلوک شامل عنصر همان نما/viewport است. این موقعیت اغلب برای ساخت یک عنصر شناوری که حتی پس از حرکت دادن صفحه/scroll در همان موقعیت میماند استفاده میشود. در مثال زیر جعبهی "One" با فاصلهی ۸۰ پیکسل از بالا و صفحه و ۲۰ پیکسل از سمت چپ موقعیت ثابت دارد:</p> + +<pre dir="rtl">#one { position: fixed; top: 80px; left:20px; }</pre> + +<p dir="rtl">وقتی بالای صفحه را نگاه میکنید، جعبه در بالاترین گوشه سمت چپ ظاهر میشود، و پس از حرکت دادن صفحه، در همان جایگاه نسبی نسبت به نما باقی میماند:</p> + +<p dir="rtl"><img alt="" src="https://developer.mozilla.org/@api/deki/files/4924/=fixed-1.png?size=thumb" style="height: 279px; width: 356px;"></p> + +<p dir="rtl"><img alt="" src="https://developer.mozilla.org/@api/deki/files/4925/=fixed-2.png?size=thumb" style="height: 222px; width: 352px;"></p> + +<h2 dir="rtl" id="نکات">نکات</h2> + +<p dir="rtl">برای عناصری که موقعیت نسبی دارند، ویژگی {{Cssxref("top")}} یا {{Cssxref("bottom")}} جابجایی عمودی از موقعیت عادی و ویژگی {{Cssxref("left")}} یا {{Cssxref("right")}} جابجایی افقی را تعیین میکنند.</p> + +<p dir="rtl">برای عناصری که موقعیت مستقل دارند، ویژگیهای {{Cssxref("top")}}، {{Cssxref("right")}}، {{Cssxref("bottom")}}، و {{Cssxref("left")}} جابجاییها از ضلع بلوک شامل عنصر(عنصری که نسبت به آن موقعیت نسبی دارد) تعیین میکنند. حاشیه برای آن عنصر اگر وجود داشته باشد نخست حاشیهها اعمال میشوند سپس جابجاییها.</p> + +<p dir="rtl">اکثر اوقات، عناصر مستقل موقعیت گرفته شده مقادیر خودکار/auto برای {{Cssxref("height")}} و {{Cssxref("width")}} دارند تا طول و عرض عنصر متناسب با محتوای آن تغییر کند.</p> + +<p dir="rtl"><span style="line-height: 21px;">اگر {{Cssxref("top")}} و {{Cssxref("bottom")}} هر دو تعیین شوند(فنی، نه خودکار)، {{Cssxref("top")}} برنده میشود.</span></p> + +<p dir="rtl"><span style="line-height: 21px;">اگر }}Cssxref("left")}} و {{Cssxref("right")}} هر دو تعیین شوند، {{Cssxref("left")}} وقتی {{Cssxref("direction")}} ltr/چپ به راست هست (انگلیسی، ژاپنی افقی، غیره.) و {{Cssxref("right")}} برنده خواهد شد وقتی {{Cssxref("direction")}} rtl/راست به چپ هست(پارسی، عبری، غیره.).</span></p> + +<h2 dir="rtl" id="مشخصات"><span style="line-height: 21px;">مشخصات</span></h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">دیدگاه</th> + <th scope="col">وضعیت</th> + <th scope="col">مشخصات</th> + </tr> + </thead> + <tbody> + <tr> + <td> </td> + <td>{{Spec2('CSS2.1')}}</td> + <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="سازگاری_مرورگر">سازگاری مرورگر</h2> + +<p dir="rtl">{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>1.0 (1.0) ({{anch("Gecko notes", "See notes")}})</td> + <td>4.0</td> + <td>4.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>fixed </code>value</td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>7.0</td> + <td>4.0</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>1.0 (1.0) ({{anch("Gecko notes", "See notes")}})</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/fa/web/css/pseudo-elements/index.html b/files/fa/web/css/pseudo-elements/index.html new file mode 100644 index 0000000000..ab3de8d597 --- /dev/null +++ b/files/fa/web/css/pseudo-elements/index.html @@ -0,0 +1,97 @@ +--- +title: Pseudo-elements +slug: Web/CSS/Pseudo-elements +translation_of: Web/CSS/Pseudo-elements +--- +<div>{{CSSRef}}</div> + +<p dir="rtl">یک CSS <strong>pseudo-element</strong> کلمه کلیدی است که به انتخابگر اضافه میشود و اجازه میدهد قسمت خاصی از عنصر انتخاب شده را آرایش کنید. برای مثال، {{ Cssxref("first-line::") }} میتواند برای تغییر نوشتار و رنگ خط اول یک پاراگراف مورد استفاده قرار گیرد.</p> + +<pre class="brush: css no-line-numbers">/* The first line of every <p> element. */ +p::first-line { + color: blue; + text-transform: uppercase; +}</pre> + +<div class="note"> +<p><strong>Note:</strong> In contrast to pseudo-elements, {{cssxref("pseudo-classes")}} can be used to style an element based on its <em>state</em>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">selector::pseudo-element { + property: value; +}</pre> + +<p>You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.</p> + +<div class="note"> +<p><strong>Note:</strong> As a rule, double colons (<code>::</code>) should be used instead of a single colon (<code>:</code>). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.</p> +</div> + +<h2 id="Index_of_standard_pseudo-elements">Index of standard pseudo-elements</h2> + +<div class="index"> +<ul> + <li>{{ Cssxref("::after") }}</li> + <li>{{ Cssxref("::before") }}</li> + <li>{{ cssxref("::cue")}}</li> + <li>{{ Cssxref("::first-letter") }}</li> + <li>{{ Cssxref("::first-line") }}</li> + <li>{{ Cssxref("::selection") }}</li> + <li>{{ Cssxref("::slotted") }}</li> + <li>{{ Cssxref("::backdrop") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li> +</ul> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Lowest Version</th> + <th>Support of</th> + </tr> + <tr> + <td rowspan="2">Internet Explorer</td> + <td>8.0</td> + <td><code>:pseudo-element</code></td> + </tr> + <tr> + <td>9.0</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + <tr> + <td rowspan="2">Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + <td><code>:pseudo-element</code></td> + </tr> + <tr> + <td>1.0 (1.5)</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + <tr> + <td rowspan="2">Opera</td> + <td>4.0</td> + <td><code>:pseudo-element</code></td> + </tr> + <tr> + <td>7.0</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a></li> +</ul> diff --git a/files/fa/web/css/specificity/index.html b/files/fa/web/css/specificity/index.html new file mode 100644 index 0000000000..fe692075a4 --- /dev/null +++ b/files/fa/web/css/specificity/index.html @@ -0,0 +1,343 @@ +--- +title: Specificity +slug: Web/CSS/Specificity +translation_of: Web/CSS/Specificity +--- +<p> </p> + +<div>{{CSSRef}}</div> + +<p class="summary"><strong>Specificity</strong> is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of <a href="/en-US/docs/Web/CSS/CSS_Reference#Selectors">CSS selectors</a>.</p> + +<h2 id="How_is_specificity_calculated">How is specificity calculated?</h2> + +<p>Specificity is a weight that is applied to a given CSS declaration, determined by the number of each <a href="#Selector_Types">selector type</a> in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, <a href="#directly-targeted-elements">directly targeted elements</a> will always take precedence over rules which an element inherits from its ancestor.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> <a href="#Tree_proximity_ignorance">Proximity of elements</a> in the document tree has no effect on the specificity.</p> +</div> + +<h3 id="Selector_Types">Selector Types</h3> + +<p>The following list of selector types increases by specificity:</p> + +<ol> + <li><a href="/en-US/docs/Web/CSS/Type_selectors">Type selectors</a> (e.g., <code>h1</code>) and pseudo-elements (e.g., <code>::before</code>).</li> + <li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selectors</a> (e.g., <code>.example</code>), attributes selectors (e.g., <code>[type="radio"]</code>) and pseudo-classes (e.g., <code>:hover</code>).</li> + <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selectors</a> (e.g., <code>#example</code>).</li> +</ol> + +<p>Universal selector ({{CSSxRef("Universal_selectors", "*")}}), combinators ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, <a href="/en-US/docs/Web/CSS/Descendant_combinator" style="white-space: nowrap;">'<code> </code>'</a>, {{CSSxRef("Column_combinator", "||")}}) and negation pseudo-class ({{CSSxRef(":not", ":not()")}}) have no effect on specificity. (The selectors declared <em>inside</em> <code>:not()</code> do, however.)</p> + +<p>For more information, visit: <a href="https://specifishity.com">https://specifishity.com</a></p> + +<p>Inline styles added to an element (e.g., <code>style="font-weight: bold;"</code>) always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.</p> + +<h3 id="The_!important_exception">The <code>!important</code> exception</h3> + +<p>When an <code>important</code> rule is used on a style declaration, this declaration overrides any other declarations. Although technically <code>!important</code> has nothing to do with specificity, it interacts directly with it. Using <code>!important,</code> however, is <strong>bad practice</strong> and should be avoided because it makes debugging more difficult by breaking the natural <a href="/en-US/docs/Web/CSS/Cascade">cascading</a> in your stylesheets. When two conflicting declarations with the <code>!important</code> rule are applied to the same element, the declaration with a greater specificity will be applied.</p> + +<p><strong>Some rules of thumb:</strong></p> + +<ul> + <li><strong>Always</strong> look for a way to use specificity before even considering <code>!important</code></li> + <li><strong>Only</strong> use <code>!important</code> on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css).</li> + <li><strong>Never</strong> use <code>!important</code> when you're writing a plugin/mashup.</li> + <li><strong>Never</strong> use <code>!important</code> on site-wide CSS.</li> +</ul> + +<p><strong>Instead of using <code>!important</code>, consider:</strong></p> + +<ol> + <li>Make better use of the CSS cascade</li> + <li> + <p>Use more specific rules. By indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority:</p> + + <pre class="brush: html"><div id="test"> + <span>Text</span> +</div> +</pre> + + <pre class="brush: css">div#test span { color: green; } +div span { color: blue; } +span { color: red; }</pre> + + <p>No matter the order, text will be green because that rule is most specific. (Also, the rule for blue overwrites the rule for red, notwithstanding the order of the rules)</p> + </li> + <li>As a nonsense special case for (2), duplicate simple selectors to increase specificity when you have nothing more to specify. + <pre class="brush: css">#myId#myId span { color: yellow; } +.myClass.myClass span { color: orange; }</pre> + </li> +</ol> + +<h4 id="How_!important_can_be_used">How !important can be used:</h4> + +<h5 id="A)_Overriding_inline_styles">A) Overriding inline styles</h5> + +<p>Your global CSS file that sets visual aspects of your site globally may be overwritten by inline styles defined directly on individual elements. Both inline styles and !important are considered very bad practice, but sometimes you need the latter to override the former.</p> + +<p>In this case, you could set certain styles in your global CSS file as !important, thus overriding inline styles set directly on elements.</p> + +<pre class="brush: html"><div class="foo" style="color: red;">What color am I?</div> +</pre> + +<pre class="brush: css">.foo[style*="color: red"] { + color: firebrick !important; +} +</pre> + +<p>Many JavaScript frameworks and libraries add inline styles. Using <code>!important</code> with a very targeted selector is one way to override these inline styles.</p> + +<h5 id="B)_Overriding_high_specificity">B) Overriding high specificity</h5> + +<pre class="brush: css">#someElement p { + color: blue; +} + +p.awesome { + color: red; +}</pre> + +<p>How do you make <code>awesome</code> paragraphs always turn red, even ones inside <code>#someElement</code>? Without <code>!important</code>, the first rule will have more specificity and will win over the second rule.</p> + +<h4 id="How_to_override_!important">How to override <code>!important</code></h4> + +<p>A) Add another CSS rule with <code>!important</code>, and either give the selector a higher specificity (adding a tag, id or class to the selector), or add a CSS rule with the same selector at a later point than the existing one. This works because in a specificity tie, the last rule defined wins.</p> + +<p>Some examples with a higher specificity:</p> + +<pre class="brush: css">table td { height: 50px !important; } +.myTable td { height: 50px !important; } +#myTable td { height: 50px !important; } +</pre> + +<p>B) Or add the same selector after the existing one:</p> + +<pre class="brush: css">td { height: 50px !important; }</pre> + +<p>C) Or, preferably, rewrite the original rule to avoid the use of <code>!important</code> altogether.</p> + +<pre class="brush: css">[id="someElement"] p { + color: blue; +} + +p.awesome { + color: red; +}</pre> + +<p>Including an id as part of an attribute selector instead of as an id selector gives it the same specificity as a class. Both selectors above now have the same weight. In a specificity tie, the last rule defined wins.</p> + +<h4 id="For_more_information_visit">For more information, visit:</h4> + +<ul> + <li><a href="https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css">https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css</a></li> + <li><a href="https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean">https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean</a></li> + <li><a href="https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css">https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css</a></li> + <li><a href="https://stackoverflow.com/questions/11178673/how-to-override-important">https://stackoverflow.com/questions/11178673/how-to-override-important</a></li> + <li><a href="https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css">https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css</a></li> +</ul> + +<h3 id="The_is_and_not_exceptions" name="The_is_and_not_exceptions"><a id="The_not_exception" name="The_not_exception">The <code>:is()</code> and <code>:not()</code> exceptions</a></h3> + +<p>The matches-any pseudo-class {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} and the negation pseudo-class {{CSSxRef(":not", ":not()")}} are <em>not</em> considered a pseudo-class in the specificity calculation. But selectors placed into the pseudo-class count as normal selectors when determining the count of <a href="#Selector_Types">selector types</a>.</p> + +<div id="The_not_exception-example"> +<p>This chunk of CSS ...</p> + +<pre class="brush: css">div.outer p { + color: orange; +} + +div:not(.outer) p { + color: blueviolet; +} +</pre> + +<p>... when used with the following HTML ...</p> + +<pre class="brush: html"><div class="outer"> + <p>This is in the outer div.</p> + <div class="inner"> + <p>This text is in the inner div.</p> + </div> +</div> +</pre> + +<p>... appears on the screen like this:</p> + +<p>{{EmbedLiveSample("The_not_exception-example")}}</p> +</div> + +<h3 id="The_where_exception" name="The_where_exception">The <code>:where()</code> exception {{Experimental_Inline}}</h3> + +<p>{{SeeCompatTable}}</p> + +<p>The specificity-adjustment pseudo-class {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} always has its specificity replaced with zero.</p> + +<p>This chunk of CSS ...</p> + +<pre class="brush: css">div:where(.outer) p { + color: orange; +} + +div p { + color: blueviolet; +} +</pre> + +<div class="hidden"> +<pre class="brush: css;">#no-where-support { + margin: 0.5em; + border: 1px solid red; +} + +#no-where-support:where(*) { + display: none !important; +} +</pre> +</div> + +<p>... when used with the following HTML ...</p> + +<div class="hidden"> +<pre class="brush: html;"><div id=no-where-support> +⚠️ Your browser doesn't support the <code><a href="https://developer.mozilla.org/docs/Web/CSS/:where">:where()</a></code> pseudo-class. +</div> +</pre> +</div> + +<pre class="brush: html"><div class="outer"> + <p>This is in the outer div.</p> + <div class="inner"> + <p>This text is in the inner div.</p> + </div> +</div> +</pre> + +<p>... appears on the screen like this:</p> + +<p>{{EmbedLiveSample("The_where_exception")}}</p> + +<h3 id="Form-based_specificity">Form-based specificity</h3> + +<p>Specificity is based on the form of a selector. In the following case, the selector <code>*[id="foo"]</code> counts as an attribute selector for the purpose of determining the selector's specificity, even though it selects an ID.</p> + +<p>The following CSS styles ...</p> + +<pre class="brush: css">*#foo { + color: green; +} + +*[id="foo"] { + color: purple; +} +</pre> + +<p>... when used with this markup ...</p> + +<pre class="brush: html"><p id="foo">I am a sample text.</p> +</pre> + +<p>... end up looking like this:</p> + +<p>{{EmbedLiveSample("Form-based_specificity")}}</p> + +<p>This is because it matches the same element but the ID selector has a higher specificity.</p> + +<h3 id="Tree_proximity_ignorance">Tree proximity ignorance</h3> + +<p>The proximity of an element to other elements that are referenced in a given selector has no impact on specificity. The following style declaration ...</p> + +<pre class="brush: css">body h1 { + color: green; +} + +html h1 { + color: purple; +} +</pre> + +<p>... with the following HTML ...</p> + +<pre class="brush: html"><html> + <body> + <h1>Here is a title!</h1> + </body> +</html> +</pre> + +<p>... will render as:</p> + +<p>{{EmbedLiveSample("Tree_proximity_ignorance")}}</p> + +<p>This is because the two declarations have equal <a href="#Selector_Types">selector type</a> counts, but the <code>html h1</code> selector is declared last.</p> + +<h3 id="Directly_targeted_elements_vs._inherited_styles">Directly targeted elements vs. inherited styles</h3> + +<p>Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule. This CSS ...</p> + +<pre class="brush: css">#parent { + color: green; +} + +h1 { + color: purple; +}</pre> + +<p>... with the following HTML ...</p> + +<pre class="brush: html"><html> + <body id="parent"> + <h1>Here is a title!</h1> + </body> +</html></pre> + +<p>... will also render as:</p> + +<p>{{EmbedLiveSample("Directly_targeted_elements_vs._inherited_styles")}}</p> + +<p>This is because the <code>h1</code> selector targets the element specifically, but the green selector is only inherited from its parent.</p> + +<h2 id="Specifications">Specifications</h2> + +<div style="overflow: auto;"> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#specificity-rules", "Calculating a selector's specificity")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Add the specificity adjustment selector {{CSSxRef(":where", ":where()")}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#specificity", "Calculating a selector's specificity")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td>Add <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "cascade.html#specificity", "Calculating a selector's specificity")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Add <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>.</td> + </tr> + <tr> + <td>{{SpecName("CSS1", "#cascading-order", "Cascading order")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Specificity Calculator: An interactive website to test and understand your own CSS rules - <a href="https://specificity.keegan.st/">https://specificity.keegan.st/</a></li> + <li>CSS3 Selectors Specificity - <a class="external" href="http://www.w3.org/TR/selectors/#specificity" rel="freelink">http://www.w3.org/TR/selectors/#specificity</a></li> + <li>{{CSS_Key_Concepts}}</li> +</ul> diff --git a/files/fa/web/css/top/index.html b/files/fa/web/css/top/index.html new file mode 100644 index 0000000000..b0b4af4e6f --- /dev/null +++ b/files/fa/web/css/top/index.html @@ -0,0 +1,194 @@ +--- +title: بالا +slug: Web/CSS/top +tags: + - top + - بالا +translation_of: Web/CSS/top +--- +<div dir="rtl">{{CSSRef}}</div> + +<h2 dir="rtl" id="Summary" name="Summary">خلاصه مطلب</h2> + +<p dir="rtl">ویژگی CSS <code>top</code> قسمتی از موقعیت عناصر موقعیت داده شده (positioned elements) را مشخص میکند. این ویژگی تاثیری بر عناصری که موقعیت داده نشده اند (non-positioned)، ندارد.</p> + +<p dir="rtl">برای عناصری که موقعیت مستقل دارند (آنهایی که همراه {{Cssxref("position")}}: <code>absolute</code> یا {{Cssxref("position")}}: <code>fixed</code> هستند)، فاصلهی بین ضلع بالای حاشیه از عنصر و ضلع بالای بلوک شامل خودش را مشخص میکند.</p> + +<p dir="rtl">برای عناصری که موقعیت نسبی دارند (آنهایی که همراه {{Cssxref("position")}}: <code>relative</code> هستند)، اندازهی حرکتی که عنصر به زیر موقعیت عادی خود دارد مشخص میکند.</p> + +<p dir="rtl">وقتی هر دو ویژگی {{Cssxref("top")}} و {{Cssxref("bottom")}} تعیین شده باشند، موقعیت عنصر بیش از حد محدود هست و ویژگی {{Cssxref("top")}} اولویت دارد: مقدار محاسبه شدهی {{Cssxref("bottom")}} روی -{{Cssxref("top")}} قرار می گیرد، درحالی که مقدار خودش که تعیین گردیده نادیده گرفته میشود.</p> + +<p dir="rtl">{{cssinfo}}</p> + +<h2 dir="rtl" id="Syntax" name="Syntax">روش استفاده</h2> + +<pre class="twopartsyntaxbox" dir="rtl"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("top")}} +</pre> + +<pre dir="rtl">top: 3px /* <length> مقادیر */ +top: 2.4em + +top: 10% /* <percentages> of the height of the containing block */ + +top: auto + +top: inherit +</pre> + +<h3 dir="rtl" id="مقادیر">مقادیر</h3> + +<dl> + <dt dir="rtl"><code><طول></code></dt> + <dd dir="rtl">یک عدد منفی، null، یا مثبت هست که {{cssxref("<length>")}} نشان میدهد:</dd> + <dd> + <ul dir="rtl"> + <li>برای عناصر با موقعیت مستقل (absolutely)، فاصله ازقسمت بالایی (لبه ی بالای) بلوک را مشخص می کند؛</li> + <li>برای عناصر با موقعیت نسبی (relative)، اگر در حالت معمول (normal flow) موقعیتی (position) مشخص نشده باشد، عنصر نسبت به موقعیت معمول (normal) خود به سمت پایین حرکت می کند.</li> + </ul> + </dd> + <dt dir="rtl"><code><درصد></code></dt> + <dd dir="rtl">یک {{cssxref("<percentage>")}} از ارتفاع بلوک شامل است، همانطور که در <a href="#" title="#">خلاصه</a> شرح داده شد مورد استفاده قرار میگیرد.</dd> + <dt dir="rtl"><code>خودکار</code></dt> + <dd dir="rtl">کلیدواژهای است که بیان میکند:</dd> + <dd> + <ul dir="rtl"> + <li>برای عناصر با موقعیت مستقل، موقعیت عنصر بر مبنای ویژگی {{Cssxref("bottom")}} و ارتفاع مربوط تنظیم میشود: <code>auto</code> بعنوان ارتفاع بر مبنای محتوا.</li> + <li>برای عناصر با موقعیت نسبی، جابجایی عنصر از موقعیت اصلی خود بر مبنای ویژگی {{Cssxref("bottom")}} تنظیم میشود، یا اگر {{Cssxref("bottom")}} هم <code>auto</code> باشد، عنصر را جابجا نمیکند.</li> + </ul> + </dd> + <dt dir="rtl"><code>به ارث بردن</code></dt> + <dd dir="rtl">کلیدواژهای است که نشان میدهد مقدار همان مقداری است که از عنصر والد خود محاسبه شده است (ممکن است بلوک شامل عنصر نباشد).</dd> + <dd dir="rtl">مقدار نخست محاسبه میشود سپس بر اساس نوع آن که {{cssxref("<length>")}}، {{cssxref("<percentage>") }}، یا کلیدواژهی <code>auto</code> است بکار میرود.</dd> +</dl> + +<h2 dir="rtl" id="Examples" name="Examples">نمونهها</h2> + +<pre class="brush: css" dir="rtl">/* body میتواند با واحد px تعیین شود همینطور برای div */ +body{ + width: 100%; + height: 100%; +} + +/* برای div هم میتوان از واحد ٪ استفاده کرد */ +div { + position: absolute; + left: 15%; + top: 30%; + bottom: 30%; + width: 70%; + height: 40%; + text-align: left; + border: 3px rgb(0,0,0) solid; +}</pre> + +<pre class="brush: html" dir="rtl"> <?xml version="1.0" encoding="utf-8"?> + <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> + <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> + <head> + <meta http-equiv="Content-Type" content="application/xhtml+xml" /> + <title>Mozilla.org height top left width percentage CSS</title> + <style type="text/css"> + /* body میتواند با واحد px تعیین شود همینطور برای div */ + body { + width: 100%; + height: 100%; + } + /* برای div هم میتوان از واحد ٪ استفاده کرد */ + div { + position: absolute; + left: 15%; + top: 30%; + bottom: 30%; + width: 70%; + height: 40%; + text-align: left; + border: 3px rgb(0,0,0) solid; + } + </style> + </head> + <body> + <center> + <div> + ...محتوای آزمایشی... + </div> + </center> + + </body> + </html></pre> + +<h2 dir="rtl" id="Specifications" name="Specifications">مشخصات</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">مشخصات</th> + <th scope="col">وضعیت</th> + <th scope="col">دیدگاه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>top</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="Browser_compatibility" name="Browser_compatibility">سازگاری مرورگر</h2> + +<p dir="rtl">{{CompatibilityTable}}</p> + +<div dir="rtl" id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div dir="rtl" id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/fa/web/css/transform-function/index.html b/files/fa/web/css/transform-function/index.html new file mode 100644 index 0000000000..8e2080e302 --- /dev/null +++ b/files/fa/web/css/transform-function/index.html @@ -0,0 +1,163 @@ +--- +title: <transform-function> +slug: Web/CSS/transform-function +tags: + - CSS + - CSS Data Type + - CSS Transforms + - Layout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/transform-function +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code><transform-function></code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the {{cssxref("transform")}} property.</p> + +<h2 id="Describing_transformations_mathematically">Describing transformations mathematically</h2> + +<p>Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the <a href="https://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian coordinate system</a>, although <a href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> are also sometimes used.</p> + +<h3 id="Cartesian_coordinates"><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a>Cartesian coordinates</h3> + +<p>In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation <code>(x, y)</code>.</p> + +<p>In CSS (and most computer graphics), the origin <code>(0, 0)</code> represents the<em> top-left</em> corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be <code>(2, 5)</code>, while a point 3 units to the left and 12 units up would be <code>(-3, -12)</code>.</p> + +<h3 id="Transformation_functions">Transformation functions</h3> + +<p>Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2x2 matrix, like this:</p> + +<div style="text-align: center;"> +<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p> +</div> + +<p>The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:</p> + +<div style="text-align: center;"><a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png"><img src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="height: 32px; width: 189px;"></a></div> + +<p><br> + It is even possible to apply several transformations in a row:</p> + +<div style="text-align: center;"><a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png"><img src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="height: 32px; width: 313px;"></a></div> + +<p><br> + With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.</p> + +<p>However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector <code>(tx, ty)</code> must be expressed separately, as two additional parameters.</p> + +<div class="note"> +<p><strong>Note:</strong> Though trickier than Cartesian coordinates, <a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="https://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> lead to 3x3 transformation matrices, and can simply express translations as linear functions.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<p>The <code><transform-function></code> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.</p> + +<h3 id="Matrix_transformation">Matrix transformation</h3> + +<dl> + <dt>{{cssxref("transform-function/matrix","matrix()")}}</dt> + <dd>Describes a homogeneous 2D transformation matrix.</dd> + <dt>{{cssxref("transform-function/matrix3d","matrix3d()")}}</dt> + <dd>Describes a 3D transformation as a 4x4 homogeneous matrix.</dd> +</dl> + +<h3 id="Perspective">Perspective</h3> + +<dl> + <dt>{{cssxref("transform-function/perspective","perspective()")}}</dt> + <dd>Sets the distance between the user and the z=0 plane.</dd> +</dl> + +<h3 id="Rotation">Rotation</h3> + +<dl> + <dt>{{cssxref("transform-function/rotate","rotate()")}}</dt> + <dd>Rotates an element around a fixed point on the 2D plane.</dd> + <dt>{{cssxref("transform-function/rotate3d","rotate3d()")}}</dt> + <dd>Rotates an element around a fixed axis in 3D space.</dd> + <dt>{{cssxref("transform-function/rotateX","rotateX()")}}</dt> + <dd>Rotates an element around the horizontal axis.</dd> + <dt>{{cssxref("transform-function/rotateY","rotateY()")}}</dt> + <dd>Rotates an element around the vertical axis.</dd> + <dt>{{cssxref("transform-function/rotateZ","rotateZ()")}}</dt> + <dd>Rotates an element around the z-axis.</dd> +</dl> + +<h3 id="Scaling_(resizing)">Scaling (resizing)</h3> + +<dl> + <dt>{{cssxref("transform-function/scale","scale()")}}</dt> + <dd>Scales an element up or down on the 2D plane.</dd> + <dt>{{cssxref("transform-function/scale3d","scale3d()")}}</dt> + <dd>Scales an element up or down in 3D space.</dd> + <dt>{{cssxref("transform-function/scaleX","scaleX()")}}</dt> + <dd>Scales an element up or down horizontally.</dd> + <dt>{{cssxref("transform-function/scaleY","scaleY()")}}</dt> + <dd>Scales an element up or down vertically.</dd> + <dt>{{cssxref("transform-function/scaleZ","scaleZ()")}}</dt> + <dd>Scales an element up or down along the z-axis.</dd> +</dl> + +<h3 id="Skewing_(distortion)">Skewing (distortion)</h3> + +<dl> + <dt>{{cssxref("transform-function/skew","skew()")}}</dt> + <dd>Skews an element on the 2D plane.</dd> + <dt>{{cssxref("transform-function/skewX","skewX()")}}</dt> + <dd>Skews an element in the horizontal direction.</dd> + <dt>{{cssxref("transform-function/skewY","skewY()")}}</dt> + <dd>Skews an element in the vertical direction.</dd> +</dl> + +<h3 id="Translation_(moving)">Translation (moving)</h3> + +<dl> + <dt>{{cssxref("transform-function/translate","translate()")}}</dt> + <dd>Translates an element on the 2D plane.</dd> + <dt>{{cssxref("transform-function/translate3d","translate3d()")}}</dt> + <dd>Translates an element in 3D space.</dd> + <dt>{{cssxref("transform-function/translateX","translateX()")}}</dt> + <dd>Translates an element horizontally.</dd> + <dt>{{cssxref("transform-function/translateY","translateY()")}}</dt> + <dd>Translates an element vertically.</dd> + <dt>{{cssxref("transform-function/translateZ","translateZ()")}}</dt> + <dd>Translates an element along the z-axis.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p> </p> + + + +<p>{{Compat("css.types.transform-function")}}</p> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS {{cssxref("transform")}} property</li> +</ul> diff --git a/files/fa/web/css/transform-function/rotate()/index.html b/files/fa/web/css/transform-function/rotate()/index.html new file mode 100644 index 0000000000..28c924605d --- /dev/null +++ b/files/fa/web/css/transform-function/rotate()/index.html @@ -0,0 +1,85 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate() +translation_of: Web/CSS/transform-function/rotate() +--- +<div>{{CSSRef}}</div> + +<p dir="rtl">تابع <strong><code>()rotate</code></strong> یک جابجایی که چرخشی دوبعدی نسبت به نقطهای ثابت است را بوجود میآورد. نوع خروجی این تابع از جنس {{cssxref("<transform-function>")}} میباشد.</p> + +<p><img src="https://mdn.mozillademos.org/files/12113/rotate.png" style="height: 175px; width: 258px;"></p> + +<p dir="rtl">محور چرخش از طریق مقدار دهی خاصیت {{ cssxref("transform-origin") }} مشخص میشود.</p> + +<h2 id="نحو">نحو</h2> + +<p dir="rtl">مقدار ساخته شده با تابع <code>()rotate</code> برای چرخش، توسط {{cssxref("<angle>")}} مشخص میشود. اگر علامت آن مثبت باشه در جهت ساعتگرد حرکت میکند؛ اگر منفی باشد در جهت پاد ساعتگرد حرکت میکند. چرخش °180 بازتاب نقطه نامیده میشود.</p> + +<pre class="syntaxbox notranslate">rotate(<em>a</em>) +</pre> + +<h3 id="مقادیر">مقادیر</h3> + +<dl> + <dt><code>a</code></dt> + <dd>Is an {{ cssxref("<angle>") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td> + <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="مثالها">مثالها</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="rotated">Rotated</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate(45deg); /* Equal to rotateZ(45deg) */ + background-color: pink; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples", "auto", 180)}}</p> + +<h2 id="سازگاری_مرورگرها">سازگاری مرورگرها</h2> + +<p>برای اطلاعات مربوط به سازگاری، لطفا <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> را ببنید.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li> +</ul> diff --git a/files/fa/web/css/انتخابگرـنوع/index.html b/files/fa/web/css/انتخابگرـنوع/index.html new file mode 100644 index 0000000000..5a4b5e4c89 --- /dev/null +++ b/files/fa/web/css/انتخابگرـنوع/index.html @@ -0,0 +1,78 @@ +--- +title: انتخابگر نوع +slug: Web/CSS/انتخابگرـنوع +translation_of: Web/CSS/Type_selectors +--- +<div>{{CSSRef}}</div> + +<p dir="rtl"><strong>انتخابگر نوع</strong> با نوع عنصر انتخاب میکند. به عبارت دیگر این انتخابگر به وسیله نوع عنصر، تمام عنصرهای تطابق داده شده را انتخاب میکند.</p> + +<pre class="brush: css no-line-numbers">/* را انتخاب میکند <a> همه عنصرهای */ +a { + color: red; +}</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">element { <em>style properties</em> } +</pre> + +<h2 id="Example">Example</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span { + background-color: skyblue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span>Here's a span with some text.</span> +<p>Here's a p with some text.</p> +<span>Here's a span with more text.</span> +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Example', '100%', 150)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No changes</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>No changes</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.selectors.type")}}</p> diff --git a/files/fa/web/css/انتخابگرـویژگی/index.html b/files/fa/web/css/انتخابگرـویژگی/index.html new file mode 100644 index 0000000000..54cf34cd5d --- /dev/null +++ b/files/fa/web/css/انتخابگرـویژگی/index.html @@ -0,0 +1,182 @@ +--- +title: انتخابگر ویژگی +slug: Web/CSS/انتخابگرـویژگی +translation_of: Web/CSS/Attribute_selectors +--- +<div>{{CSSRef}}</div> + +<p dir="rtl"><strong>انتخابگر ویژگی</strong> بر اساس وجود ویژگی یا مقدار ویژگی انتخاب میکند.</p> + +<pre class="brush: css no-line-numbers">/* را داشته باشند title که ویژگی <a> عنصرهای */ +a[title] { + color: purple; +} + +/* باشد "https://example.org" آن برابر با href که ویژگی <a> عنصرهای */ +a[href="https://example.org"] { + color: green; +} + +/* باشد "example" آن در بردارندهی href که ویژگی <a> عنصرهای */ +a[href*="example"] { + font-size: 2em; +} + +/* به پایان رسیده باشد ".org" آن با href که ویژگی <a> عنصرهای */ +a[href$=".org"] { + font-style: italic; +}</pre> + +<dl> + <dt><code>[<em>attr</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em>.</dd> + <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em> whose value is exactly <em>value</em>.</dd> + <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em> whose value is a whitespace-separated list of words, one of which is exactly <em>value</em>.</dd> + <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em> whose value can be exactly <em>value</em> or can begin with <em>value</em> immediately followed by a hyphen, <code>-</code> (U+002D). It is often used for language subcode matches.</dd> + <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em> whose value is prefixed (preceded) by <em>value</em>.</dd> + <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em> whose value is suffixed (followed) by <em>value</em>.</dd> + <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em> whose value contains at least one occurrence of <em>value</em> within the string.</dd> + <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt> + <dd>Adding an <code>i</code> (or <code>I</code>) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Links">Links</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a { + color: blue; +} + +/* Internal links, beginning with "#" */ +a[href^="#"] { + background-color: gold; +} + +/* Links with "example" anywhere in the URL */ +a[href*="example"] { + background-color: silver; +} + +/* Links with "insensitive" anywhere in the URL, + regardless of capitalization */ +a[href*="insensitive" i] { + color: cyan; +} + +/* Links that end in ".org" */ +a[href$=".org"] { + color: red; +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><ul> + <li><a href="#internal">Internal link</a></li> + <li><a href="http://example.com">Example link</a></li> + <li><a href="#InSensitive">Insensitive internal link</a></li> + <li><a href="http://example.org">Example org link</a></li> +</ul></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Links')}}</p> + +<h3 id="Languages">Languages</h3> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">/* All divs with a `lang` attribute are bold. */ +div[lang] { + font-weight: bold; +} + +/* All divs in US English are blue. */ +div[lang~="en-us"] { + color: blue; +} + +/* All divs in Portuguese are green. */ +div[lang="pt"] { + color: green; +} + +/* All divs in Chinese are red, whether + simplified (zh-CN) or traditional (zh-TW). */ +div[lang|="zh"] { + color: red; +} + +/* All divs with a Traditional Chinese + `data-lang` are purple. */ +/* Note: You could also use hyphenated attributes + without double quotes */ +div[data-lang="zh-TW"] { + color: purple; +} +</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div lang="en-us en-gb en-au en-nz">Hello World!</div> +<div lang="pt">Olá Mundo!</div> +<div lang="zh-CN">世界您好！</div> +<div lang="zh-TW">世界您好！</div> +<div data-lang="zh-TW">?世界您好！</div> +</pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample('Languages')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Adds modifier for ASCII case-insensitive attribute value selection</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.selectors.attribute")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Selecting a single element: {{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}}, or {{domxref("Element.querySelector()")}}</li> + <li>Selecting all matching elements: {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}}, or {{domxref("Element.querySelectorAll()")}}</li> + <li>The above methods are all implemented based on the {{domxref("ParentNode")}} mixin; see {{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li> +</ul> diff --git a/files/fa/web/css/بزرگنمایی/index.html b/files/fa/web/css/بزرگنمایی/index.html new file mode 100644 index 0000000000..e664b6b4cc --- /dev/null +++ b/files/fa/web/css/بزرگنمایی/index.html @@ -0,0 +1,134 @@ +--- +title: بزرگنمایی +slug: Web/CSS/بزرگنمایی +translation_of: Web/CSS/zoom +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p><span class="seoSummary">The non-standard <strong><dfn><code>zoom</code></dfn></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property can be used to control the magnification level of an element.</span> {{cssxref("transform-function/scale", "transform: scale()")}} should be used instead of this property, if possible. However, unlike CSS Transforms, <code>zoom</code> affects the layout size of the element.</p> + +<pre class="brush: css no-line-numbers">/* Keyword values */ +zoom: normal; +zoom: reset; + +/* <percentage> values */ +zoom: 50%; +zoom: 200%; + +/* <number> values */ +zoom: 1.1; +zoom: 0.7; + +/* Global values */ +zoom: inherit; +zoom: initial; +zoom: unset;</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Render this element at its normal size.</dd> + <dt><code>reset</code> {{non-standard_inline}}</dt> + <dd>Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing <kbd>Ctrl</kbd>-<kbd>-</kbd> or <kbd>Ctrl</kbd>+<kbd>+</kbd> keyboard shortcuts) to the document. Only supported by WebKit (and possibly Blink).</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Zoom factor. <code>100%</code> is equivalent to <code>normal</code>. Values larger than <code>100%</code> zoom in. Values smaller than <code>100%</code> zoom out.</dd> + <dt>{{cssxref("<number>")}}</dt> + <dd>Zoom factor. Equivalent to the corresponding percentage (<code>1.0</code> = <code>100%</code> = <code>normal</code>). Values larger than <code>1.0</code> zoom in. Values smaller than <code>1.0</code> zoom out.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="First_example">First example</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p class="small">Small</p> +<p class="normal">Normal</p> +<p class="big">Big</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p.small { + zoom: 75%; +} +p.normal { + zoom: normal; +} +p.big { + zoom: 2.5; +} +p { + display: inline-block; +} +p:hover { + zoom: reset; +} +</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('First_example')}}</p> + +<h3 id="Second_example">Second example</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div id="a" class="circle"></div> +<div id="b" class="circle"></div> +<div id="c" class="circle"></div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">div.circle { + width: 25px; + height: 25px; + border-radius: 100%; + text-align: center; + vertical-align: middle; + display: inline-block; + zoom: 1.5; +} +div#a { + background-color: gold; + zoom: normal; +} +div#b { + background-color: green; + zoom: 200%; +} +div#c { + background-color: blue; + zoom: 2.9; +} +</pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample('Second_example')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<p>This property is nonstandard and originated in Internet Explorer. Apple has <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15">a description in the Safari CSS Reference</a>. Rossen Atanassov of Microsoft has <a href="http://cdn.rawgit.com/atanassov/css-zoom/master/Overview.html">an unofficial draft specification proposal on GitHub</a>.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.zoom")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://css-tricks.com/almanac/properties/z/zoom/"><code>zoom</code> entry in CSS-Tricks' CSS Almanac</a></li> + <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code> viewport descriptor</a>, for use with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport"><code>@viewport</code></a></li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=390936">Bug 390936: Implement Internet Explorer <code>zoom</code> property for CSS </a>on the Firefox issue tracker Bugzilla</li> +</ul> diff --git a/files/fa/web/guide/graphics/index.html b/files/fa/web/guide/graphics/index.html new file mode 100644 index 0000000000..e43abf0371 --- /dev/null +++ b/files/fa/web/guide/graphics/index.html @@ -0,0 +1,51 @@ +--- +title: گرافیک در وب +slug: Web/Guide/Graphics +tags: + - 2D + - 3D + - Canvas + - Graphics + - NeedsTranslation + - TopicStub + - Web + - WebGL +translation_of: Web/Guide/Graphics +--- +<p dir="rtl">اغلب سایتها و برنامههای جدید نیاز به نمایش گرافیکها را دارند<span class="seoSummary">.</span> در حالی که نمایش عکسهای ثابت میتواند به سادگی از طریق استفاده از المان {{HTMLElement("img")}} استفاده شود، یا با تنظیم عکس پشت زمبنه المانهای HTML با استفاده از خصوصیت {{cssxref("background-image")}} . شما اغلب میخواهید که عکسها را آزاد ایجاد کنید، یا بعد از این دستکاری کنید. <span class="seoSummary">این مقاله بینشی برای نحوه چگونگی انجام آن را برای شما فراهم میکند.</span></p> +<div class="row topicpage-table" dir="rtl"> + <div class="section"> + <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">گرافیکهای 2D</h2> + <dl> + <dt> + <a href="/en-US/docs/Web/Guide/Graphics/Drawing_graphics_with_canvas">ترسیم گرافیکها با بوم نقاشی</a></dt> + <dd> + راهنمای مقدماتی برای استفاده از المان {{HTMLElement("canvas")}} جهت رسم گرافیکهای 2D.</dd> + <dt> + <a href="/en-US/docs/SVG">SVG</a></dt> + <dd> + گرافیک برداری مقیاسپذیر (SVG) به شما اجازه میدهد تا از خطوط، بوم نقاشی، و دیگر اشکال هندسی برای نمایش گرافیکها استفاده کنید. با جلوگیری از استفاده از نقشه بیتها، شما میتوانید تصاویری با هر مقیاس ایجاد کنید.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">نمایش همه...</a></span></p> + </div> + <div class="section"> + <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">گرافیکهای 3D</h2> + <dl> + <dt> + <a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd> + یک راهنما برای شروع با WebGL، APIهای گرافیکی 3D برای وب است. این تکنولوژی به شما اجازه استفاده از OpenGL ES استاندارد در محتوی وب را میدهد.</dd> + </dl> + </div> +</div> +<h2 dir="rtl" id="تصویر">تصویر</h2> +<dl> + <dt dir="rtl"> + <a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">استفاده از صدا و تصویر HTML5</a></dt> + <dd dir="rtl"> + تصویر تعبیه شده در اسناد HTML و کنترل بازپخش آن.</dd> + <dt dir="rtl"> + <a href="/en-US/docs/WebRTC">WebRTC</a></dt> + <dd dir="rtl"> + RTC درWebRTC به معنای ارتباطات بلادرنگ است، تکنولوژی است که به اشتراک گذاری جریان صوت/تصویر بین مرورگرهای سرویس گیرنده ها را امکان پذیر می کند (جفت ها).</dd> +</dl> diff --git a/files/fa/web/guide/index.html b/files/fa/web/guide/index.html new file mode 100644 index 0000000000..b4901157d6 --- /dev/null +++ b/files/fa/web/guide/index.html @@ -0,0 +1,29 @@ +--- +title: راهنمای توسعه دهنده وب +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +<p>These articles provide how-to information to help you make use of specific technologies and APIs.</p> + +<div class="note"> +<p><strong>Note:</strong> This page is going to be a mess for a little while until we finish migrating content. Our apologies!</p> +</div> + +<div>{{LandingPageListSubpages}}</div> + +<dl> + <dt><a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt> + <dd>JavaScript is the powerful scripting language used to create applications for the Web.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li> +</ul> diff --git a/files/fa/web/html/element/a/index.html b/files/fa/web/html/element/a/index.html new file mode 100644 index 0000000000..dc10c3f5be --- /dev/null +++ b/files/fa/web/html/element/a/index.html @@ -0,0 +1,490 @@ +--- +title: '<a>: The Anchor element' +slug: Web/HTML/Element/a +tags: + - فارسی +translation_of: Web/HTML/Element/a +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">The <strong>HTML <code><a></code> element</strong> (or <em>anchor</em> element), with <a href="#href">its <code>href</code> attribute</a>, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.</span> Content within each <code><a></code> <strong>should</strong> indicate the link's destination.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div> + + + +<h2 id="Attributes">Attributes</h2> + +<p>This element's attributes include the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt id="download">{{HTMLAttrDef("download")}}{{HTMLVersionInline(5)}}</dt> + <dd>Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:</dd> + <dd> + <ul> + <li>Without a value, the browser will suggest a filename/extension, generated from various sources: + <ul> + <li>The {{HTTPHeader("Content-Disposition")}} HTTP header</li> + <li>The final segment in the URL <a href="/en-US/docs/Web/API/URL/pathname">path</a></li> + <li>The {{Glossary("MIME_type", "media type")}} (from the ({{HTTPHeader("Content-Type")}} header, the start of a <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URL</a>, or {{domxref("Blob.type")}} for a <a href="/en-US/docs/Web/API/URL/createObjectURL"><code>blob:</code> URL</a>)</li> + </ul> + </li> + <li>Defining a value suggests it as the filename. <code>/</code> and <code>\</code> characters are converted to underscores (<code>_</code>). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.</li> + </ul> + + <div class="note"><strong>Notes:</strong> + + <ul> + <li><code>download</code> only works for <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin URLs</a>, or the <code>blob:</code> and <code>data:</code> schemes.</li> + <li> + <p>Note: if the <code>Content-Disposition</code> header has different information from the <code>download</code> attribute, resulting behaviour may differ:</p> + + <ul> + <li> + <p>If the header specifies a <code>filename</code>, it takes priority over the attribute.</p> + </li> + <li> + <p>If the header specifies a disposition of <code>inline</code> but no filename, Chrome, and Firefox 82 and later, prioritize the attribute and treat it as a download. Firefox versions before 82 prioritize the header and will display the content.</p> + </li> + </ul> + </li> + </ul> + </div> + </dd> + <dt id="href">{{HTMLAttrDef("href")}}</dt> + <dd> + <p>The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:</p> + + <ul> + <li>Sections of a page with fragment URLs</li> + <li>Pieces of media files with media fragments</li> + <li>Telephone numbers with <code>tel:</code> URLs</li> + <li>Email addresses with <code>mailto:</code> URLs</li> + <li>While web browsers may not support other URL schemes, web sites can with <code><a href="/en-US/docs/Web/API/Navigator/registerProtocolHandler">registerProtocolHandler()</a></code></li> + </ul> + </dd> + <dt id="hreflang">{{HTMLAttrDef("hreflang")}}</dt> + <dd>Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as <a href="/en-US/docs/Web/HTML/Global_attributes/lang">the global <code>lang</code> attribute</a>.</dd> + <dt id="ping">{{HTMLAttrDef("ping")}}</dt> + <dd>A space-separated list of URLs. When the link is followed, the browser will send {{HTTPMethod("POST")}} requests with the body <code>PING</code> to the URLs. Typically for tracking.</dd> + <dt id="referrerpolicy">{{HTMLAttrDef("referrerpolicy")}}{{Experimental_Inline}}</dt> + <dd>How much of the <a href="/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> to send when following the link. See <a href="/en-US/docs/Web/HTTP/Headers/Referrer-Policy"><code>Referrer-Policy</code></a> for possible values and their effects.</dd> + <dt id="rel">{{HTMLAttrDef("rel")}}</dt> + <dd>The relationship of the linked URL as space-separated <a href="/en-US/docs/Web/HTML/Link_types">link types</a>.</dd> + <dt id="target">{{HTMLAttrDef("target")}}</dt> + <dd>Where to display the linked URL, as the name for a <em>browsing context</em> (a tab, window, or <code><iframe></code>). The following keywords have special meanings for where to load the URL: + <ul> + <li><code>_self</code>: the current browsing context. (Default)</li> + <li><code>_blank</code>: usually a new tab, but users can configure browsers to open a new window instead.</li> + <li><code>_parent</code>: the parent browsing context of the current one. If no parent, behaves as <code>_self</code>.</li> + <li><code>_top</code>: the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as <code>_self</code>.</li> + </ul> + + <div class="note"> + <p><strong>Note:</strong> When using <code>target</code>, add <code>rel="noreferrer noopener"</code> to avoid exploitation of the <code>window.opener</code> API;</p> + </div> + + <div class="note"> + <p><strong>Note:</strong> In newer browser versions (e.g. Firefox 79+) setting <code>target="_blank"</code> on <code><a></code> elements implicitly provides the same <code>rel</code> behavior as setting <code>rel="noopener"</code>.</p> + </div> + </dd> + <dt id="type">{{HTMLAttrDef("type")}}</dt> + <dd>Hints at the linked URL’s format with a {{Glossary("MIME type")}}. No built-in functionality.</dd> +</dl> + +<h3 id="Obsolete_attributes">Obsolete attributes</h3> + +<dl> + <dt id="charset">{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Hinted at the {{Glossary("character encoding")}} of the linked URL. + <div class="note"> + <p><strong>Note:</strong> This attribute is obsolete and <strong>should not be used by authors</strong>. Use the HTTP {{HTTPHeader("Content-Type")}} header on the linked URL.</p> + </div> + </dd> + <dt id="coords">{{HTMLAttrDef("coords")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Used with <a href="#shape">the <code>shape</code> attribute</a>. A comma-separated list of coordinates.</dd> + <dt id="name">{{HTMLAttrDef("name")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Was required to define a possible target location in a page. In HTML 4.01, <code>id</code> and <code>name</code> could both be used on <code><a></code>, as long as they had identical values. + <div class="note"> + <p><strong>Note:</strong> Use the global attribute {{HTMLAttrxRef("id")}} instead.</p> + </div> + </dd> + <dt id="rev">{{HTMLAttrDef("rev")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Specified a reverse link; the opposite of <a href="#rel">the <code>rel</code> attribute</a>. Deprecated for being very confusing.</dd> + <dt id="shape">{{HTMLAttrDef("shape")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>The shape of the hyperlink’s region in an image map. + <div class="note"><strong>Note:</strong> Use the {{HTMLElement("area")}} element for image maps instead.</div> + </dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">interactive content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">Transparent</a>, containing either <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> (excluding <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">interactive content</a>) or <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, or any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, but not other <code><a></code> elements.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td>{{ARIARole("link")}} when <code>href</code> attribute is present, otherwise <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">no corresponding role</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td> + <p>When <code>href</code> attribute is present:</p> + + <ul> + <li>{{ARIARole("button")}}</li> + <li>{{ARIARole("checkbox")}}</li> + <li>{{ARIARole("menuitem")}}</li> + <li>{{ARIARole("menuitemcheckbox")}}</li> + <li>{{ARIARole("menuitemradio")}}</li> + <li>{{ARIARole("option")}}</li> + <li>{{ARIARole("radio")}}</li> + <li>{{ARIARole("switch")}}</li> + <li>{{ARIARole("tab")}}</li> + <li>{{ARIARole("treeitem")}}</li> + </ul> + + <p>When <code>href</code> attribute is not present:</p> + + <ul> + <li>any</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{DOMxRef("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<h3 id="Linking_to_an_absolute_URL">Linking to an absolute URL</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><a href="https://www.mozilla.com"> + Mozilla +</a></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Linking_to_an_absolute_URL')}}</p> + +<h3 id="Linking_to_relative_URLs">Linking to relative URLs</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><a href="//example.com">Scheme-relative URL</a> +<a href="/en-US/docs/Web/HTML">Origin-relative URL</a> +<a href="./p">Directory-relative URL</a> +</pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">a { display: block; margin-bottom: 0.5em }</pre> +</div> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample('Linking_to_relative_URLs')}}</p> + +<h3 id="Linking_to_an_element_on_the_same_page">Linking to an element on the same page</h3> + +<pre class="brush: html notranslate"><!-- <a> element links to the section below --> +<p><a href="#Section_further_down"> + Jump to the heading below +</a></p> + +<!-- Heading to link to --> +<h2 id="Section_further_down">Section further down</h2> +</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> You can use <code>href="#top"</code> or the empty fragment (<code>href="#"</code>) to link to the top of the current page, <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier">as defined in the HTML specification</a>.</p> +</div> + +<h3 id="Linking_to_an_email_address">Linking to an email address</h3> + +<p>To create links that open in the user's email program to let them send a new message, use the <code>mailto:</code> scheme:</p> + +<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a></pre> + +<p>For details about <code>mailto:</code> URLs, such as including a subject or body, see <a href="/en-US/docs/Web/Guide/HTML/Email_links">Email links</a> or {{RFC(6068)}}.</p> + +<h3 id="Linking_to_telephone_numbers">Linking to telephone numbers</h3> + +<pre class="brush: html notranslate"><a href="tel:+49.157.0156">+49 157 0156</a> +<a href="tel:+1(555)5309">(555) 5309</a></pre> + +<p><code>tel:</code> link behavior varies with device capabilities:</p> + +<ul> + <li>Cellular devices autodial the number.</li> + <li>Most operating systems have programs that can make calls, like Skype or FaceTime.</li> + <li>Websites can make phone calls with {{domxref("Navigator/registerProtocolHandler", "registerProtocolHandler")}}, such as <code>web.skype.com</code>.</li> + <li>Other behaviors include saving the number to contacts, or sending the number to another device.</li> +</ul> + +<p>See {{RFC(3966)}} for syntax, additional features, and other details about the <code>tel:</code> URL scheme.</p> + +<h3 id="Using_the_download_attribute_to_save_a_<canvas>_as_a_PNG">Using the download attribute to save a <canvas> as a PNG</h3> + +<p>To save a {{HTMLElement("canvas")}} element’s contents as an image, you can create a link with a <code>download</code> attribute and the canvas data as a <code>data:</code> URL:</p> + +<h4 id="Example_painting_app_with_save_link">Example painting app with save link</h4> + +<h5 id="HTML_3">HTML</h5> + +<pre class="brush: html notranslate"><p>Paint by holding down the mouse button and moving it. + <a href="" download="my_painting.png">Download my painting</a> +</p> + +<canvas width="300" height="300"></canvas> +</pre> + +<h5 id="CSS_2">CSS</h5> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} +canvas { + background: #fff; + border: 1px dashed; +} +a { + display: inline-block; + background: #69c; + color: #fff; + padding: 5px 10px; +}</pre> + +<h5 id="JavaScript">JavaScript</h5> + +<pre class="brush: js notranslate">var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); +c.fillStyle = 'hotpink'; + +function draw(x, y) { + if (isDrawing) { + c.beginPath(); + c.arc(x, y, 10, 0, Math.PI*2); + c.closePath(); + c.fill(); + } +} + +canvas.addEventListener('mousemove', event => + draw(event.offsetX, event.offsetY) +); +canvas.addEventListener('mousedown', () => isDrawing = true); +canvas.addEventListener('mouseup', () => isDrawing = false); + +document.querySelector('a').addEventListener('click', event => + event.target.href = canvas.toDataURL() +); +</pre> + +<h5 id="Result_3">Result</h5> + +<p>{{EmbedLiveSample('Example_painting_app_with_save_link', '100%', '400')}}</p> + +<h2 id="Security_and_privacy">Security and privacy</h2> + +<p><code><a></code> elements can have consequences for users’ security and privacy. See <a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns"><code>Referer</code> header: privacy and security concerns</a> for information.</p> + +<p>Using <code>target="_blank"</code> without <code>rel="noreferrer"</code> and <code>rel="noopener"</code> makes the website vulnerable to {{domxref("window.opener")}} API exploitation attacks (<a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">vulnerability description</a>), although note that, in newer browser versions (e.g. Firefox 79+) setting <code>target="_blank"</code> implicitly provides the same protection as setting <code>rel="noopener"</code>.</p> + +<h2 id="Accessibility">Accessibility</h2> + +<h3 id="Strong_link_text">Strong link text</h3> + +<p><strong>The content inside a link should indicate where the link goes</strong>, even out of context.</p> + +<h4 id="Inaccessible_weak_link_text">Inaccessible, weak link text</h4> + +<p>A sadly common mistake is to only link the words “click here” or “here”:</p> + +<pre class="brush: html example-bad notranslate"><p> + Learn more about our products <a href="/products">here</a>. +</p> +</pre> + +<h4 id="Strong_link_text_2">Strong link text</h4> + +<p>Luckily, this is an easy fix, and it’s actually shorter than the inaccessible version!</p> + +<pre class="brush: html example-good notranslate"><p> + Learn more <a href="/products">about our products</a>. +</p></pre> + +<p>Assistive software have shortcuts to list all links on a page. However, strong link text benefits all users — the “list all links” shortcut emulates how sighted users quickly scan pages.</p> + +<h3 id="onclick_events">onclick events</h3> + +<p>Anchor elements are often abused as fake buttons by setting their <code>href</code> to <code>#</code> or <code>javascript:void(0)</code> to prevent the page from refreshing, then listening for their <code>click</code> events .</p> + +<p>These bogus <code>href</code> values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.</p> + +<p>Use a {{HTMLElement("button")}} instead. In general, <strong>you should only use a hyperlink for navigation to a real URL</strong>.</p> + +<h3 id="External_links_and_linking_to_non-HTML_resources">External links and linking to non-HTML resources</h3> + +<p>Links that open in a new tab/window via <code>target="_blank"</code>, or links that point to a download file should indicate what will happen when the link is followed.</p> + +<p>People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior.</p> + +<h4 id="Link_that_opens_a_new_tabwindow">Link that opens a new tab/window</h4> + +<pre class="brush: html notranslate"><a target="_blank" href="https://www.wikipedia.org"> + Wikipedia (opens in new tab) +</a> +</pre> + +<h4 id="Link_to_a_non-HTML_resource">Link to a non-HTML resource</h4> + +<pre class="brush: html notranslate"><a href="2017-annual-report.ppt"> + 2017 Annual Report (PowerPoint) +</a> +</pre> + +<p>If an icon is used to signify link behavior, make sure it has {{HTMLAttrxRef("alt", "img", "alt text", "true")}}:</p> + +<pre class="brush: html notranslate"><a target="_blank" href="https://www.wikipedia.org"> + Wikipedia + <img alt="(opens in new tab)" src="newtab.svg"> +</a> + +<a href="2017-annual-report.ppt"> + 2017 Annual Report + <img alt="(PowerPoint file)" src="ppt-icon.svg"> +</a></pre> + +<ul> + <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN / Understanding WCAG, Guideline 3.2</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200: Opening new windows and tabs from a link only when necessary</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window</a></li> +</ul> + +<h3 id="Skip_links">Skip links</h3> + +<p>A <strong>skip link</strong> is a link placed as early as possible in {{HTMLElement("body")}} content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.</p> + +<pre class="notranslate"><body> + <a href="#content">Skip to main content</a> + + <header> + … + </header> + + <main id="content"> <!-- The skip link jumps to here --> +</pre> + +<pre class="brush: css notranslate">.skip-link { + position: absolute; + top: -3em; + background: #fff; +} +.skip-link:focus { + top: 0; +}</pre> + +<p>Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.</p> + +<p>Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.</p> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li> + <li><a href="https://a11yproject.com/posts/skip-nav-links/">How-to: Use Skip Navigation links</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN / Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1</a></li> +</ul> + +<h3 id="Size_and_proximity">Size and proximity</h3> + +<h4 id="Size">Size</h4> + +<p>Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS pixels</a> is recommended.</p> + +<p>Text-only links in prose content are exempt from this requirement, but it’s still a good idea to make sure enough text is hyperlinked to be easily activated.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size</a></li> + <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5</a></li> + <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets</a></li> +</ul> + +<h4 id="Proximity">Proximity</h4> + +<p>Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.</p> + +<p>Spacing may be created using CSS properties like {{CSSxRef("margin")}}.</p> + +<ul> + <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}</td> + <td>{{Spec2("Referrer Policy")}}</td> + <td>Added the <code>referrerpolicy</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "textlevel-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "textlevel-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.a")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("link")}} is similar to <code><a></code>, but for metadata hyperlinks that are invisible to users.</li> + <li>{{CSSxRef(":link")}} is a CSS pseudo-class that will match <code><a></code> elements with valid <code>href</code> attributes.</li> +</ul> diff --git a/files/fa/web/html/element/abbr/index.html b/files/fa/web/html/element/abbr/index.html new file mode 100644 index 0000000000..b7a78b41f7 --- /dev/null +++ b/files/fa/web/html/element/abbr/index.html @@ -0,0 +1,142 @@ +--- +title: <abbr> +slug: Web/HTML/Element/abbr +translation_of: Web/HTML/Element/abbr +--- +<p id="Summary">{{HTMLRef}}</p> + +<p dir="rtl">عنصر <abbr> (یا عنصر مخفف) نشان دهننده مخفف و به صورت اختتیاری شرحی کامل برای آن است. درصورت وجود شرح ، باید آن را به طور کامل بدون چیز دیگری در در صفت title بنویسید.</p> + +<pre class="brush: html"><p>I do <abbr title="Hypertext Markup Language">HTML</abbr></p></pre> + +<p style="margin-top: -1.5em;"><small>See more in depth examples in the <em><a href="https://developer.mozilla.org/en-US/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">How to mark abbreviations and make them understandable</a></em> article.</small></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">DOM Interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a></td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a></td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="صفات">صفات</h2> + +<p dir="rtl">این عنصر تنها شامل <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">صفات عمومی</a> است.</p> + +<p dir="rtl">برای تعریف شرح کامل مخفف از صفت {{htmlattrxref("title")}} استفده کنید.</p> + +<h2 dir="rtl" id="Specifications" name="Specifications">مشخصات</h2> + +<p dir="rtl"> </p> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">مشخصه</th> + <th scope="col">وضعیت</th> + <th scope="col">توضیح</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="سازگاری_با_مرورگر">سازگاری با مرورگر</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.0</td> + <td>{{CompatGeckoDesktop(1.0)}} [1]</td> + <td>7.0</td> + <td>1.3</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Up to Gecko 1.9.2 (Firefox 3.6), Firefox implemented the {{domxref("HTMLSpanElement")}} interface for this element instead of the {{domxref("HTMLElement")}} interface.</p> + +<h2 dir="rtl" id="ظاهر_پیش_فرض">ظاهر پیش فرض</h2> + +<p dir="rtl">هدف از این عنصر صرفا راحتی نویسند است و همه مرورگر ها آن را به صورت خطی (inline) نمایش میدهند.</p> + +<ul> + <li dir="rtl">برخی از مرورگر های مانند Internet Explorer ، این عنصر را همانند عنصر {{HTMLElement("span")}} نمایش میدهند</li> + <li dir="rtl">Opern ، Firefox و برخی دیگر به محتوای آن یک آندرلاین نقطه نقطه اضافه میکنند.</li> +</ul> + +<h2 dir="rtl" id="همچنین_ببینید">همچنین ببینید</h2> + +<ul> + <li dir="rtl"><a href="/en-US/Learn/HTML/Element/abbr">Using the <abbr> element</a></li> + <li>Other elements conveying <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">text-level semantics</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> + +<div> </div> + +<div> </div> diff --git a/files/fa/web/html/element/data/index.html b/files/fa/web/html/element/data/index.html new file mode 100644 index 0000000000..9d06506179 --- /dev/null +++ b/files/fa/web/html/element/data/index.html @@ -0,0 +1,94 @@ +--- +title: <data> +slug: Web/HTML/Element/data +translation_of: Web/HTML/Element/data +--- +<div>{{HTMLRef}}</div> + +<p>The <strong>HTML <code><data></code> element</strong> links a given content with a machine-readable translation. If the content is time- or date-related, the {{HTMLElement("time")}} element must be used.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/data.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLDataElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element's attributes include the <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>This attribute specifies the machine-readable translation of the content of the element.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>The following example displays product names but also associates each name with a product number.</p> + +<pre class="brush: html"><p>New Products</p> +<ul> + <li><data value="398">Mini Ketchup</data></li> + <li><data value="399">Jumbo Ketchup</data></li> + <li><data value="400">Mega Jumbo Ketchup</data></li> +</ul> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.data")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The HTML {{HTMLElement("time")}} element.</li> +</ul> diff --git a/files/fa/web/html/element/em/index.html b/files/fa/web/html/element/em/index.html new file mode 100644 index 0000000000..527d56af2f --- /dev/null +++ b/files/fa/web/html/element/em/index.html @@ -0,0 +1,150 @@ +--- +title: <em> +slug: Web/HTML/Element/em +translation_of: Web/HTML/Element/em +--- +<h2 dir="rtl" id="خلاصه">خلاصه</h2> + +<p dir="rtl">برچسب HTML تاکید <em> نشانه آن است که متن دارای تاکید و اهمیت بیشری می باشد. برچسب <em> میتواند به صورت تو در تو باشد و هر مرحله از تودرتویی به معنای درجه بیشتری از مهم بودن میباشد.</p> + +<p dir="rtl"> </p> + +<div class="note" dir="rtl"><strong>توجه داشته یاشید: </strong>به صورت معمول این عنصر به صورت مورب (کج) نمایش داده میشود ، با این حال، حقیقتا نباید برای اضافه کردن ظاهر مورب از این تگ استفاده نمود. برای مشخص کردن عنوان کاری (مانند: کتاب ، بازی ، آهنگ و ...) از {{HTMLElement("cite")}} استفاده کنید. این عنصر نیز معمولا با ظاهر مورب نمایش داده میشود. همچنین از {{HTMLElement("strong")}} برای متن هایی استفاده کنید که درجه اهمیت بیشتری نسبت به متن های اطراف دارند.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="ویژگی_ها">ویژگی ها</h2> + +<p dir="rtl">این عنصر تنها شامل <a href="/en-US/docs/Web/HTML/Global_attributes">ویژگی های همگانی</a> می باشد.</p> + +<h2 dir="rtl" id="مثال">مثال</h2> + +<p dir="rtl">عنصر <em> اغلب برای نمایش تضاد ضمنی یا صریح استفاده میشود.</p> + +<pre class="brush: html" dir="rtl"><p> + In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content. +</p></pre> + +<h3 dir="rtl" id="Result" name="Result">نتیجه</h3> + +<p>In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.</p> + +<h2 dir="rtl" id="<i>_در_مقابل_<em>"><i> در مقابل <em></h2> + +<p dir="rtl"><span style="line-height: 1.5;">این اکثرا برای توسعه دهندگان جدید گیج کننده است ، که چرا تعداد بسیاری عنصر مختلف برای تاکید بر برخی از متن وجود دارد. اتفاقا <i> و <em> یکی از شاید ترین این موارد هستند ، چرا از <i> و <em> با هم استفاده کنیم؟ آنها دقیقا یک نتیجه را تولید میکنند ، درست است؟</span></p> + +<p dir="rtl">نه دقیقا. نتیجه بصری اینگونه است، اما به صورت پیش فرض، این دو برچسب نتیجه خود را به صورت مورب نشان میدهند. اما از لحاظ معنایی این دو متفاوت اند. برچسب <em> نشان دهنده تاکید بر محتوای آن است درحای که <i> نشان دهنده یک متن معمولی است. مانند نام یک فیلم یا کتاب یک لغت خارجی یا زمانی که متن مربوط به تعریف یک لغت بجای استفاده از معنای آن باشد میباشد.</p> + +<p dir="rtl">مثالی برای <em> میتواند این باشد:«این را همین اکنون انجام بده!» یا «ما باید کاری برای آن میکردیم.» یک شخص یا نرم افزار که متن را میخواند متن های مورب را با تاکید بیشتری میخواند.</p> + +<p dir="rtl">به عنوان مثالی برای <i> میتوان گفت:«ملکه مری دیشب با ناز و عشوه راه میرفت.» در اینجا هیچ تاکید خواص و یا اهمیت اضافه ای به "ملکه مری" وجود ندارد. این تنها نشان دهنده این است که شی ما در سوال ملکه ای به نام مری نیست. بلکه یک کشتی به نام ملکه مری است. مثال دیگری برای <i> میتواند این باشد:«این کلمه یک مقاله است»</p> + +<h2 dir="rtl" id="Specifications" name="Specifications">مشخصات</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">مشخصه</th> + <th scope="col">وضعیت</th> + <th scope="col">توضیح</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 dir="rtl" id="See_also" name="See_also">همچنین ببینید</h2> + +<ul dir="rtl"> + <li>{{HTMLElement("i")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/fa/web/html/element/heading_elements/index.html b/files/fa/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..9caa97cd0b --- /dev/null +++ b/files/fa/web/html/element/heading_elements/index.html @@ -0,0 +1,143 @@ +--- +title: Heading elements +slug: Web/HTML/Element/Heading_Elements +translation_of: Web/HTML/Element/Heading_Elements +--- +<h2 dir="rtl" id="خلاصه">خلاصه</h2> +<p dir="rtl">عنصر<strong> سرفصل</strong> در شش سطح برای سر فصل گذاری پیاده سازی شده است , <h1> برای مهم ترین(برجسته ترین) و <h6> برای کم اهمیت ترین. عنصر سر فصل به طور خلاصه موضوع اصلی بخش را معرفی می کند.</p> +<p>Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.</p> +<ul class="htmlelt" dir="rtl"> + <li dir="ltr"><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, heading content, palpable content.</li> + <li dir="ltr"><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li> + <li dir="ltr"><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li dir="ltr"><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>; or as a child of an {{HTMLElement("hgroup")}} element</li> + <li dir="ltr"><dfn>DOM interface</dfn> {{domxref("HTMLHeadingElement")}}</li> +</ul> +<h2 dir="rtl" id="صفات">صفات</h2> +<p dir="rtl"><span style="line-height: 21px;">این عنصر ها شامل </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">صفات سراسری</a><span style="line-height: 21px;"> میشوند. </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes"> </a></p> +<p dir="rtl">صفت <strong>align</strong> یک صفت {{deprecated_inline}} در {{HTMLVersionInline(4.01)}} و {{obsolete_inline}} در {{HTMLVersionInline(5)}} است.</p> +<h2 dir="rtl" id="مثال_ها">مثال ها</h2> +<h3 dir="rtl" id="تمام_سرفصل_ها">تمام سرفصل ها</h3> +<pre class="brush: html" dir="rtl"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +<h5>Heading level 5</h5> +<h6>Heading level 6</h6> +</pre> +<p dir="rtl">خروجی کد HTML بالا :</p> +<p dir="rtl"><img alt="Image:HTML-headers2.png" src="/@api/deki/files/245/=HTML-headers2.png" style="float: left;"></p> +<p dir="rtl"> </p> +<p dir="rtl"> </p> +<p dir="rtl"> </p> +<p dir="rtl"> </p> +<h3 dir="rtl" id="sect1"> </h3> +<h3 dir="rtl" id="مثال_در_صفحه">مثال در صفحه :</h3> +<pre class="brush: html"><h1>Heading elements</h1> +<h2>Summary</h2> +<p>Some text here...</p> + +<h2>Examples</h2> +<h3>Example 1</h3> +<p>Some text here...</p> + +<h3>Example 2</h3> +<p>Some text here...</p> + +<h2>see also</h2> +<p>Some text here...</p> +</pre> +<p>خروجی کد HTML بالا :</p> +<p><img alt="Image:HTML-headers1.png" src="/@api/deki/files/244/=HTML-headers1.png" style="float: left;"></p> +<p> </p> +<p> </p> +<p> </p> +<p> </p> +<p> </p> +<p> </p> +<p> </p> +<p> </p> +<h2 dir="rtl" id="توجه">توجه</h2> +<p dir="rtl">از سطح های پایین برای کوچک کردن اندازه فونت سرفصل <strong>استفاده</strong> <strong>نکنید</strong>: به جای آن از ویژگی اندازه فونت در <a href="/en-US/docs/CSS/font-size" title="/en-US/docs/CSS/font-size">CSS font-size</a> CSS استفاده کنید.</p> +<p dir="rtl"> از همه سطح ها استفاده کنید : همیشه از سطح ۱ <h1> شروع کنید، بعد سطح ۲ <h2> و به همین ترتیب تا آخر ... . همچنین سعی کنید در هر صفحه فقط یک بار از سطح ۱ <h1> برای سر فصل استفاده کنید.</p> +<p dir="rtl">برای تعریف نمای کلی (outline) اسناد در {{HTMLVersionInline(5)}}, از {{HTMLElement("section")}} استفاده کنید . سرفصل ها برای بخش ها و زیر بخش ها عنوان را مشخص می کنند. شما همچنین می توانید محتوای سرفصل ها را گروه بندی کنید با استفاده از عنصر {{HTMLElement("div")}}.</p> +<h2 dir="rtl" id="Specifications" name="Specifications">مشخصات</h2> +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">مشخصات</th> + <th scope="col">وضعیت</th> + <th scope="col">توضیحات</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-aside-element.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 dir="rtl" id="سازگاری_در_مرورگرها">سازگاری در مرورگرها</h2> +<p dir="rtl">{{CompatibilityTable}}</p> +<div dir="rtl" id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>ویژگی</th> + <th>کروم</th> + <th>فایرفاکس (Gecko)</th> + <th>اینترنت اکسپلورر</th> + <th>اپرا</th> + <th>Safari</th> + </tr> + <tr> + <td>پشتیبانی اولیه</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<div dir="rtl" id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>ویژگی</th> + <th>اندروید</th> + <th>فایرفاکس موبایل (Gecko)</th> + <th>اینترنت اکسپلورر موبایل</th> + <th>اپرا موبایل</th> + <th>Safari موبابل</th> + </tr> + <tr> + <td>پشتیبانی اولیه</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<h2 dir="rtl" id="همچنین_ببینید">همچنین ببینید</h2> +<ul dir="rtl"> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("div")}}</li> + <li>{{HTMLElement("section")}}</li> +</ul> +<p dir="rtl">{{HTML:Element_Navigation}}</p> diff --git a/files/fa/web/html/element/index.html b/files/fa/web/html/element/index.html new file mode 100644 index 0000000000..e7bd8d2984 --- /dev/null +++ b/files/fa/web/html/element/index.html @@ -0,0 +1,203 @@ +--- +title: عنصرهای HTML +slug: Web/HTML/Element +translation_of: Web/HTML/Element +--- +<p dir="rtl">فهرست پیشرو مرجعی است برای تمام عنصرهای HTML، که دربرگیرندهی عنصرهای جدید در HTML5 نیز میباشد.</p> +<p dir="rtl"><strong>عنصرهای HTML</strong> اجزایی هستند که مشخص میکنند اسناد HTML چگونه باید ساخته شوند، و چه نوع محتوایی در کدام قسمت از سند HTML باید قرار بگیرند. نام آنها باید بین دو علامت ">" و "<" به صورت "<نام عنصر>" قرار میگیرد که به چنین ساختاری یک <em>برچسب</em> گفته میشود. اگر عنصر شامل محتوای دیگری باشد، با یک <em>برچسب پایانی</em> خاتمه مییابد، به صورتی که نام عنصر به همراه یک خط مورب آورده میشود: <code><نام عنصر/>. </code>برخی از عنصرها به برچسب پایانی نیازی ندارند مانند عنصر <code><img></code> که به عنصرهای <em>تهی</em> معروف هستند. اسناد HTML شامل فهرستی درختواره از عنصرهای مختلف هستند، که نام هر یک مشخص کنندهی عملکردش است. برای نمونه عنصر <code><title></code> نشاندهندهی عنوان یک سند است. در ادامه فهرستی الفبایی از عنصرهای HTML وجود دارد.</p> +<h3 dir="rtl" id="A">A</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("a") }} (پیوند)</li> + <li>{{ HTMLElement("abbr") }} (مخفف - کوتاهسازی)</li> + <li>{{ HTMLElement("acronym") }} که {{ obsoleteGeneric("inline","HTML5") }} - در عوض از {{ HTMLElement("abbr") }} استفاده شود</li> + <li>{{ HTMLElement("address") }} (نشانی یا اطلاعات تماس)</li> + <li>{{ HTMLElement("applet") }} که {{ deprecatedGeneric("inline","HTML4") }} و {{ obsoleteGeneric("inline","HTML5") }} - در عوض از {{ HTMLElement("object") }} استفاده شود.</li> + <li>{{ HTMLElement("area") }} (پیوند تصویر-نقشه)</li> + <li>{{ HTMLElement("article") }} (مقالهی مجزا) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("aside") }} (محتوای مرتبط با موضوع اصلی) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("audio") }} (فایل صوتی ضمیمهشده) {{ HTMLVersionInline(5) }}</li> +</ul> +<h3 dir="rtl" id="B">B</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("b") }} (قبلا با نام Bold شناخته میشد)</li> + <li>{{ HTMLElement("base") }} (نشانی پایه)</li> + <li>{{ HTMLElement("basefont") }} که {{ deprecatedGeneric("inline","HTML4") }} و {{ obsoleteGeneric("inline","HTML5") }}</li> + <li>{{ HTMLElement("bdi") }} (محتوای دوطرفه-دوجهت) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("bdo") }} ()</li> + <li>{{ HTMLElement("bgsound") }} (صدای پسزمینه) {{ Non-standard_inline() }}</li> + <li>{{ HTMLElement("big") }} که {{ obsolete_inline("html5") }}</li> + <li>{{ HTMLElement("blink") }} که {{ Non-standard_inline() }}</li> + <li>{{ HTMLElement("blockquote") }} (نقلقول صریح)</li> + <li>{{ HTMLElement("body") }} (بدنهی اصلی سند)</li> + <li>{{ HTMLElement("br") }} (رفتن به خط بعد)</li> + <li>{{ HTMLElement("button") }} (دکمه)</li> +</ul> +<h3 dir="rtl" id="C">C</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("canvas") }} (محیط رسم گرافیکهای پویا) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("caption") }} (عنوان جدول)</li> + <li>{{ HTMLElement("center") }} که {{ Deprecated_inline("html4") }} و {{ obsoleteGeneric("inline","HTML5") }}</li> + <li>{{ HTMLElement("cite") }} (عنوان شغل)</li> + <li>{{ HTMLElement("code") }} (قطعه کد)</li> + <li>{{ HTMLElement("col") }} (ستون جدول)</li> + <li>{{ HTMLElement("colgroup") }} (گروهبندی ستون جدول)</li> + <li>{{ HTMLElement("command") }} (بررسی وضعیت کاربر) {{ HTMLVersionInline(5) }}</li> +</ul> +<h3 dir="rtl" id="D">D</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("datalist") }} (فهرستی از گزینههای از پیش تعریف شده) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("dd") }} (توصیف عبارت)</li> + <li>{{ HTMLElement("del") }} (متن حذفشده)</li> + <li>{{ HTMLElement("details") }} (فراهم آوردن جزییات بیشتر برای کاربر در قالب یک ویجت) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("dfn") }} (تعریف)</li> + <li>{{ HTMLElement("dir") }} که {{ deprecatedGeneric("inline","HTML4") }} و {{ obsoleteGeneric("inline","HTML5") }}</li> + <li>{{ HTMLElement("dl") }} (فهرست تعریفی)</li> + <li>{{ HTMLElement("dt") }} (عبارت تعریفی)</li> +</ul> +<h3 dir="rtl" id="E">E</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("em") }} (تاکید)</li> + <li>{{ HTMLElement("embed") }} (جاسازی یا همان embed کردن) {{ HTMLVersionInline(5) }}</li> +</ul> +<h3 dir="rtl" id="F">F</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("fieldset") }} (مجموعهای کنترلهای یک فرم)</li> + <li>{{ HTMLElement("figcaption") }} (عنوان شکل) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("figure") }} (شکل) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("font") }} که {{ deprecatedGeneric("inline","HTML4") }} و {{ obsoleteGeneric("inline","HTML5") }}</li> + <li>{{ HTMLElement("footer") }} (قسمت انتهایی صفحه) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("form") }} (فرم HTML - جهت جمعآوری اطلاعات از کاربر)</li> + <li>{{ HTMLElement("frame") }} که {{ obsoleteGeneric("inline","HTML5") }}</li> + <li>{{ HTMLElement("frameset") }} که {{ obsoleteGeneric("inline","HTML5") }}</li> +</ul> +<h3 dir="rtl" id="G">G</h3> +<h3 dir="rtl" id="H">H</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("h1") }}، {{ HTMLElement("h2") }}، {{ HTMLElement("h3") }}، {{ HTMLElement("h4") }}، {{ HTMLElement("h5") }}، {{ HTMLElement("h6") }} (عنصرهای مورد نیاز برای عنوانگذاری)</li> + <li>{{ HTMLElement("head") }} (قسمت ابتدایی سند HTML که اطلاعات فرادادهای را شامل میشود)</li> + <li>{{ HTMLElement("header") }} (قسمت ابتدایی صفحه) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("hgroup") }} (گروهی از عناصر که در Heading به کار میروند) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("hr") }} (خط افقی برای جداسازی موضوع)</li> + <li>{{ HTMLElement("html") }} (ریشهی سند HTML، جایی که همه چیز شروع میشود)</li> +</ul> +<h3 dir="rtl" id="I">I</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("i") }} (متن کج)</li> + <li>{{ HTMLElement("iframe") }} (قاب یا frame داخلی)</li> + <li>{{ HTMLElement("img") }} (تصویر)</li> + <li>{{ HTMLElement("input") }} (از اجزای فرم - دریافت ورودی از کاربر)</li> + <li>{{ HTMLElement("ins") }} (متن درجشده)</li> + <li>{{ HTMLElement("isindex") }} که {{ deprecatedGeneric("inline","HTML4") }}</li> +</ul> +<h3 dir="rtl" id="J">J</h3> +<h3 dir="rtl" id="K">K</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("kbd") }} (ورودی صفحهکلید)</li> + <li>{{ HTMLElement("keygen") }} (تولیدکنندهی زوجکلید - متنی تصادفی)</li> +</ul> +<h3 dir="rtl" id="L">L</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("label") }} (برچسب برای کنترلهای فرم)</li> + <li>{{ HTMLElement("legend") }} (عبارتی که بالای مجموعهای از فیلدها قرار میگیرد)</li> + <li>{{ HTMLElement("li") }} (گزینه(ها)ی فهرست)</li> + <li>{{ HTMLElement("link") }} (فرادادهای برای ارتباطهای بینسندی)</li> + <li>{{ HTMLElement("listing") }} (فهرستسازی کد) {{ deprecatedGeneric("inline","HTML3.2") }}</li> +</ul> +<h3 dir="rtl" id="M">M</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("map") }} (نقشهی تصویر)</li> + <li>{{ HTMLElement("mark") }} (متن علامتگذاریشده) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("marquee") }} که {{ Non-standard_inline() }}</li> + <li>{{ HTMLElement("menu") }} (فهرستی از فرمانها) که در HTML4 کنارگذاشته شد اما در HTML5 دوباره استفاده میشود</li> + <li>{{ HTMLElement("meta") }} (فراداده - اطلاعاتی که در مرورگر قابل مشاهده نیستند اما معنای خاصی دارند)</li> + <li>{{ HTMLElement("meter") }} (مقیاس یا اندازهی عددی) {{ HTMLVersionInline(5) }}</li> +</ul> +<h3 dir="rtl" id="N">N</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("nav") }} (پیمایش) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("nobr") }} (عدم درج فاصله) {{ Non-standard_inline() }}</li> + <li>{{ HTMLElement("noframes") }} که {{ obsoleteGeneric("inline","HTML4") }}</li> + <li>{{ HTMLElement("noscript") }} (محتوای اسکریپت بازگشتی)</li> +</ul> +<h3 dir="rtl" id="O">O</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("object") }} (آبجکت یا شی جاسازیشده)</li> + <li>{{ HTMLElement("ol") }} (فهرست مرتب یا شمارهدار)</li> + <li>{{ HTMLElement("optgroup") }} (گروهبندی گزینهها)</li> + <li>{{ HTMLElement("option") }} (گزینهی انتخابی)</li> + <li>{{ HTMLElement("output") }} (نتیجهی محاسبهشده) {{ HTMLVersionInline(5) }}</li> +</ul> +<h3 dir="rtl" id="P">P</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("p") }} (پاراگراف)</li> + <li>{{ HTMLElement("param") }} (پارامتر یک شی)</li> + <li>{{ HTMLElement("plaintext") }} که {{ Deprecated_inline("html2") }}</li> + <li>{{ HTMLElement("pre") }} (متن قالببندیشده)</li> + <li>{{ HTMLElement("progress") }} (نشانگر پیشرفت) {{ HTMLVersionInline(5) }}</li> +</ul> +<h3 dir="rtl" id="Q">Q</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("q") }} (نقلقول)</li> +</ul> +<h3 dir="rtl" id="R">R</h3> +<p dir="rtl">(عنصرهای Ruby به برنامههای پشتیبانی نظیر <a href="https://addons.mozilla.org/en-US/firefox/addon/1935" title="https://addons.mozilla.org/en-US/firefox/addon/1935">XHTML Ruby Support</a> یا <a href="https://addons.mozilla.org/en-US/firefox/addon/6812" title="https://addons.mozilla.org/en-US/firefox/addon/6812">HTML Ruby</a> نیاز دارند که مورد آخر هنور در حال توسعه است)</p> +<ul dir="rtl"> + <li>{{ HTMLElement("rp") }} (پرانتزگذاری در Ruby) که {{ HTMLVersionInline(5) }} و {{ unimplemented_inline() }}</li> + <li>{{ HTMLElement("rt") }} (متن Ruby) که {{ HTMLVersionInline(5) }} و {{ unimplemented_inline() }}</li> + <li>{{ HTMLElement("ruby") }} که {{ HTMLVersionInline(5) }} و {{ unimplemented_inline(33339) }}</li> +</ul> +<h3 dir="rtl" id="S">S</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("s") }} (خطی که از میان عبارت میگذرد) {{ deprecatedGeneric("inline","HTML4") }}</li> + <li>{{ HTMLElement("samp") }} (متن نمونه و پیشنهادی)</li> + <li>{{ HTMLElement("script") }} (اسکریپتی که در سند به کار میرود در این قسمت باید نوشته شود)</li> + <li>{{ HTMLElement("section") }} (بخش جداساز سند) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("select") }} (فهرست انتخابی)</li> + <li>{{ HTMLElement("small") }} (متن با اندازهی کوچک)</li> + <li>{{ HTMLElement("source") }} (جایی که رسانه (فایل صوتی یا تصویری) در آن تعریف میشود) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("spacer") }} (فضای خالی) {{ Non-standard_inline() }}</li> + <li>{{ HTMLElement("span") }} (محدودهی متن)</li> + <li>{{ HTMLElement("strike") }} مانند {{ HTMLElement("s") }} که {{ deprecatedGeneric("inline","HTML4") }}</li> + <li>{{ HTMLElement("strong") }} (نشاندهندهی تاکید زیاد - تاکید قوی)</li> + <li>{{ HTMLElement("style") }} (شیوه نامهی آبشاری یا مخزنی برای تعریف کدهای CSS موردنظر)</li> + <li>{{ HTMLElement("sub") }} (زیرنویس برای متن یا عبارتی خاص)</li> + <li>{{ HTMLElement("summary") }} (خلاصهی جزییات) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("sup") }} (بالانویس برای متن یا عبارتی خاص)</li> +</ul> +<h3 dir="rtl" id="T">T</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("table") }} (جهت نمایش دادههای جدولی)</li> + <li>{{ HTMLElement("tbody") }} (بدنهی جدول)</li> + <li>{{ HTMLElement("td") }} (سلول یا خانهی جدول)</li> + <li>{{ HTMLElement("textarea") }} (ورودی متنی چندخطی)</li> + <li>{{ HTMLElement("tfoot") }} (قسمت انتهایی جدول)</li> + <li>{{ HTMLElement("th") }} (سلول یا خانهی عنوان جدول)</li> + <li>{{ HTMLElement("thead") }} (عنوان جدول)</li> + <li>{{ HTMLElement("time") }} (تاریخ یا زمان) {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("title") }} (عنوان سند)</li> + <li>{{ HTMLElement("tr") }} (سطر جدول)</li> + <li>{{ HTMLElement("track") }} که {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("tt") }} که {{ deprecatedGeneric("inline","HTML5") }}</li> +</ul> +<h3 dir="rtl" id="U">U</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("u") }} (استفاده به عنوان خطزیرین تا HTML4، تغییرشکلیافته در HTML5) که {{ deprecatedGeneric("inline","HTML4") }} و {{ HTMLVersionInline(5) }}</li> + <li>{{ HTMLElement("ul") }} (فهرست نامرتب یا نقطهدار)</li> +</ul> +<h3 dir="rtl" id="V">V</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("var") }} (متغیر)</li> + <li>{{ HTMLElement("video") }} (جهت نمایش ویدیو بدون نیاز به پلاگینهای شخصثالث مانند فلش) {{ HTMLVersionInline(5) }}</li> +</ul> +<h3 dir="rtl" id="W">W</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("wbr") }} (شکستن کلمه به اجزای کوچکتر) {{ HTMLVersionInline(5) }}</li> +</ul> +<h3 dir="rtl" id="X">X</h3> +<ul dir="rtl"> + <li>{{ HTMLElement("xmp") }} (جهت نمایش مثال) {{ deprecatedGeneric("inline","HTML3.2") }} و {{ obsoleteGeneric("inline","HTML4") }}</li> +</ul> +<h3 dir="rtl" id="Y">Y</h3> +<h3 dir="rtl" id="Z">Z</h3> +<p dir="rtl">{{ languages( { "de": "de/HTML/Element", "es": "es/HTML/Elemento", "fr": "fr/HTML/Element", "ja": "ja/HTML/Element", "pl": "pl/HTML/Element", "ko": "ko/HTML/Element", "nl": "nl/HTML/HTML_Tags", "ru": "Ru/HTML/Element", "zh-cn": "cn/HTML/Element", "zh-tw": "zh_tw/HTML/HTML_元素" } ) }}</p> +<p dir="rtl">{{ HTML:Element_Navigation() }}</p> diff --git a/files/fa/web/html/element/input/index.html b/files/fa/web/html/element/input/index.html new file mode 100644 index 0000000000..47a1d82d22 --- /dev/null +++ b/files/fa/web/html/element/input/index.html @@ -0,0 +1,1376 @@ +--- +title: <input> +slug: Web/HTML/Element/Input +translation_of: Web/HTML/Element/input +--- +<div class="summary"> +<p><font><font>HTML </font></font><strong><code><font><font><ورودی></font></font></code><font><font> عنصر</font></font></strong><font><font> استفاده می شود برای ایجاد کنترل های تعاملی برای اشکال مبتنی بر وب به منظور شرایط داده ها از کاربر. </font><font>معناشناسی </font></font><code><font><font><ورودی></font></font></code><font><font> بسته به ارزش آن </font></font><code><font><font>نوع</font></font></code><font><font> ویژگی.</font></font></p> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories"><font><font>دسته بندی های مطالب</font></font></a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content"><font><font> جریان محتوا</font></font></a><font><font> ، ذکر شده است، submittable، resettable، عنصر فرم ارتباط، </font></font><a href="/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوا جملهبندی</font></font></a><font><font> . </font></font><br> + <font><font>اگر {{htmlattrxref ("</font></font>input<font><font>", "</font></font>type<font><font>")}} است نه </font></font><code><font><font>پنهان</font></font></code><font><font> ارزش، عنصر labellable، محتوای قابل لمس.</font></font></li> + <li><dfn><font><font>مجاز محتوای</font></font></dfn><font><font> هیچ، آن است {{</font></font>Glossary<font><font> ("عنصر خالی", "</font></font>empty element<font><font>")}}.</font></font></li> + <li><dfn><font><font>حذف برچسب</font></font></dfn><font><font> باید یک برچسب شروع کرده اند و باید یک تگ پایانی ندارد.</font></font></li> + <li><dfn><font><font>مجاز عناصر پدر و مادر</font></font></dfn><font><font> هر عنصر است که می پذیرد </font></font><a href="/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوای جملهبندی</font></font></a><font><font> .</font></font></li> + <li><dfn><font><font>DOM رابط</font></font></dfn><font><font> {{domxref ("HTMLInputElement")}}</font></font></li> +</ul> + +<h2 id="خواص"><font><font>خواص</font></font></h2> + +<p><font><font>این عنصر شامل </font></font><a href="/en-US/docs/HTML/Global_attributes"><font><font>ویژگی های کلی</font></font></a><font><font> .</font></font></p> + +<dl> + <dt><font><font>{{htmlattrdef ("</font></font>type<font><font>")}}</font></font></dt> + <dd><font><font>نوع کنترل برای نمایش. </font><font>نوع پیش فرض متن است، اگر این ویژگی مشخص نشده است. </font><font>مقادیر ممکن عبارتند از:</font></font> + <ul> + <li><code><font><font>دکمه</font></font></code><font><font> : یک دکمه را فشار با هیچ رفتار پیش فرض.</font></font></li> + <li><code><font><font>چک باکس</font></font></code><font><font> : جعبه چک. </font><font>شما باید با استفاده از </font></font><strong><font><font>ارزش</font></font></strong><font><font> ویژگی برای تعریف ارزش ارائه شده توسط این آیتم استفاده کنید. </font><font>استفاده از </font></font><strong><font><font>چک</font></font></strong><font><font> ویژگی برای نشان که آیا این آیتم انتخاب شده است. </font><font>شما همچنین می توانید استفاده از </font></font><strong><font><font>نامشخص</font></font></strong><font><font> ویژگی به نشان می دهد که چک باکس است در حالت نامشخص (در اکثر سیستم عامل، این تساوی یک خط افقی در سراسر چک باکس).</font></font></li> + <li><code><font><font>رنگ</font></font></code><font><font> : {{HTMLVersionInline ("5")}} کنترل برای تعیین رنگ. </font><font>UI جمع کننده رنگ ندارد ویژگی های مورد نیاز دیگر از پذیرش رنگ ساده به عنوان متن ( </font></font><a href="http://www.w3.org/TR/html5/forms.html#color-state-(type=color)"><font><font>اطلاعات بیشتر</font></font></a><font><font> ).</font></font></li> + <li><code><font><font>تاریخ</font></font></code><font><font> : {{HTMLVersionInline ("5")}} کنترل برای ورود به یک تاریخ (سال، ماه، روز و، با هیچ زمان).</font></font></li> + <li><code><font><font>تاریخ ساعت</font></font></code><font><font> : {{HTMLVersionInline ("5")}} کنترل برای ورود به تاریخ و زمان (ساعت، دقیقه، دوم، و کسری از ثانیه) بر اساس منطقه محلی UTC تنظیم شده است.</font></font></li> + <li><code><font><font>تاریخ ساعت محلی</font></font></code><font><font> : {{HTMLVersionInline ("5")}} کنترل برای ورود به تاریخ و زمان، با هیچ منطقه زمان.</font></font></li> + <li><code><font><font>ایمیل</font></font></code><font><font> : {{HTMLVersionInline ("5")}} درست برای ویرایش یک آدرس ایمیل. </font><font>مقدار ورودی دارای اعتبار است که شامل هر دو رشته خالی یا یک معتبر آدرس ایمیل تنها قبل از ارسال. </font><font>{{cssxref (": معتبر")}} و {{cssxref (": نامعتبر")}} CSS شبه کلاس ها به عنوان مناسب استفاده شود.</font></font></li> + <li><code><font><font>فایل</font></font></code><font><font> : کنترل که اجازه می دهد کاربر را انتخاب کنید یک فایل. </font><font>با استفاده از </font></font><strong><font><font>شرایط</font></font></strong><font><font> ویژگی برای تعریف انواع فایل هایی که کنترل می توانید انتخاب کنید.</font></font></li> + <li><code><font><font>پنهان</font></font></code><font><font> : کنترل است که نشان داده نمی شود، اما که مقدار آن به سرور را مشاهده کنید.</font></font></li> + <li><code><font><font>تصویر</font></font></code><font><font> : گرافیکی دکمه ارسال. </font><font>شما باید با استفاده </font></font><strong><font><font>SRC</font></font></strong><font><font> ویژگی برای تعریف منبع تصویر و </font></font><strong><font><font>ALT</font></font></strong><font><font> ویژگی برای تعریف متن جایگزین. </font><font>شما می توانید با استفاده از </font></font><strong><font><font>ارتفاع</font></font></strong><font><font> و </font></font><strong><font><font>عرض</font></font></strong><font><font> ویژگی برای تعریف اندازه تصویر در پیکسل.</font></font></li> + <li><code><font><font>ماه</font></font></code><font><font> : {{HTMLVersionInline ("5")}} کنترل برای ورود به یک ماه و سال، با هیچ منطقه زمان.</font></font></li> + <li><code><font><font>تعداد</font></font></code><font><font> : {{HTMLVersionInline ("5")}} کنترل برای وارد کردن شماره ممیز شناور.</font></font></li> + <li><code><font><font>رمز عبور</font></font></code><font><font> : درست متن تک خط که ارزش پنهان است. </font><font>استفاده از </font></font><strong><font><font>MAXLENGTH</font></font></strong><font><font> ویژگی برای تعیین حداکثر طول ارزش است که می تواند وارد شود.</font></font></li> + <li><code><font><font>رادیو</font></font></code><font><font> : یک دکمه رادیویی. </font><font>شما باید با استفاده از </font></font><strong><font><font>ارزش</font></font></strong><font><font> ویژگی برای تعریف ارزش ارائه شده توسط این آیتم استفاده کنید. </font><font>استفاده از </font></font><strong><font><font>چک</font></font></strong><font><font> ویژگی برای نشان که آیا این آیتم به صورت پیش فرض انتخاب شده است. </font><font>دکمه های رادیویی که همان مقدار برای </font></font><strong><font><font>نام</font></font></strong><font><font> ویژگی در همان "گروه دکمه رادیویی" می باشد. </font><font>تنها با یک دکمه رادیویی در یک گروه را می توان در یک زمان انتخاب شده است.</font></font></li> + <li><code><font><font>محدوده</font></font></code><font><font> : {{HTMLVersionInline ("5")}} کنترل برای وارد کردن شماره که مقدار دقیق آن مهم نیست. </font><font>این کنترل نوع استفاده از مقادیر پیش فرض زیر اگر صفات مربوطه مشخص نشده است:</font></font> + <ul> + <li><code><font><font>دقیقه</font></font></code><font><font> : 0</font></font></li> + <li><code><font><font>حداکثر</font></font></code><font><font> : 100</font></font></li> + <li><code><font><font>ارزش</font></font></code><font><font> : </font></font><code><font><font>دقیقه</font></font></code><font><font> + ( </font></font><code><font><font>حداکثر</font></font></code><font><font> - </font></font><code><font><font>دقیقه</font></font></code><font><font> ) / 2، یا </font></font><code><font><font>دقیقه</font></font></code><font><font> اگر </font></font><code><font><font>حداکثر</font></font></code><font><font> کمتر از است </font></font><code><font><font>دقیقه</font></font></code></li> + <li><code><font><font>گام</font></font></code><font><font> : 1</font></font></li> + </ul> + </li> + <li><code><font><font>تنظیم مجدد</font></font></code><font><font> : یک دکمه که بازنشانی محتویات فرم به مقادیر پیش فرض.</font></font></li> + <li><code><font><font>جستجو</font></font></code><font><font> : {{HTMLVersionInline ("5")}} فیلد متنی تک خط برای ورود به رشته جستجو. </font><font>خط میشکند صورت خودکار از ارزش ورودی حذف شده است.</font></font></li> + <li><code><font><font>ارسال</font></font></code><font><font> : یک دکمه که تسلیم فرم.</font></font></li> + <li><code><font><font>تلفن</font></font></code><font><font> : {{HTMLVersionInline ("5")}} کنترل برای وارد کردن شماره تلفن. </font><font>خط میشکند صورت خودکار از ارزش ورودی برداشته شود، اما هیچ نحو دیگر اجرا شده است. </font><font>شما می توانید ویژگی های از قبیل استفاده از </font></font><strong><font><font>الگوی</font></font></strong><font><font> و </font></font><strong><font><font>MAXLENGTH</font></font></strong><font><font> برای محدود کردن مقادیر وارد شده در کنترل. </font><font>{{cssxref (": معتبر")}} و {{cssxref (": نامعتبر")}} CSS شبه کلاس ها به عنوان مناسب استفاده شود.</font></font></li> + <li><code><font><font>متن</font></font></code><font><font> : درست متن تک خط. </font><font>خط میشکند صورت خودکار از ارزش ورودی حذف شده است.</font></font></li> + <li><code><font><font>زمان</font></font></code><font><font> : {{HTMLVersionInline ("5")}} کنترل برای ورود به یک مقدار زمان با هیچ منطقه زمان.</font></font></li> + <li><code><font><font>آدرس</font></font></code><font><font> : {{HTMLVersionInline ("5")}} زمینه برای ویرایش یک URL. </font><font>مقدار ورودی دارای اعتبار است که شامل هر دو رشته خالی یا یک URL مطلق معتبر قبل از ارسال. </font><font>خط میشکند و منجر و یا فرار فضای سفید به طور خودکار از ارزش ورودی حذف شده است. </font><font>شما می توانید ویژگی های از قبیل استفاده از </font></font><strong><font><font>الگوی</font></font></strong><font><font> و </font></font><strong><font><font>MAXLENGTH</font></font></strong><font><font> برای محدود کردن مقادیر وارد شده در کنترل. </font><font>{{cssxref (": معتبر")}} و {{cssxref (": نامعتبر")}} CSS شبه کلاس ها به عنوان مناسب استفاده شود.</font></font></li> + <li><code><font><font>هفته</font></font></code><font><font> : {{HTMLVersionInline ("5")}} کنترل برای ورود به عضویت متشکل از تعداد هفته سال و تعداد هفته با هیچ منطقه زمان.</font></font></li> + </ul> + </dd> + <dt><font><font>{{htmlattrdef ("</font></font>accept<font><font>")}}</font></font></dt> + <dd><font><font>اگر مقدار از </font></font><strong><font><font>نوع</font></font></strong><font><font> ویژگی است </font></font><code><font><font>فایل</font></font></code><font><font> ، این ویژگی را نشان می دهد نوع فایل که سرور می پذیرد. </font><font>در غیر این صورت آن را نادیده گرفته است. </font><font>مقدار باید یک لیست با کاما از هم جدا از منحصر به فرد specifiers نوع محتوا:</font></font> + <ul> + <li><font><font>پسوند فایل با شروع با شخصیت STOP (U + 002E). </font><font>(به عنوان مثال: ".JPG، فعلی، doc است")</font></font></li> + <li><font><font>نوع MIME پرونده معتبر بدون پسوند</font></font></li> + <li><code><font><font>صوتی / *</font></font></code><font><font> نمایندگی فایل های صوتی {{HTMLVersionInline ("5")}}</font></font></li> + <li><code><font><font>ویدئو / *</font></font></code><font><font> نمایندگی فایل های ویدئویی {{HTMLVersionInline ("5")}}</font></font></li> + <li><code><font><font>تصویر / *</font></font></code><font><font> فایل های نمایندگی تصویر {{HTMLVersionInline ("5")}}</font></font></li> + </ul> + </dd> + <dt><font><font>{{htmlattrdef ("accesskey")}} {{HTMLVersionInline (4)}} تنها، {{obsoleteGeneric ("درون خطی"، "HTML5")}}</font></font></dt> + <dd><font><font>تک شخصیت است که کاربر می تواند فشار دهید برای تغییر تمرکز ورودی به کنترل. </font><font>این ویژگی جهانی در HTML5 است.</font></font></dd> + <dt><font><font>{{htmlattrdef ("mozactionhint")}} {{غیر standard_inline}}</font></font></dt> + <dd><font><font>مشخص "اشاره عمل" مورد استفاده برای تعیین چگونگی برچسب کلید را وارد کنید در دستگاه های تلفن همراه با صفحه کلید مجازی. </font><font>ارزش پشتیبانی می شوند </font></font><code><font><font>به</font></font></code><font><font> ، </font></font><code><font><font>انجام</font></font></code><font><font> ، </font></font><code><font><font>بعدی</font></font></code><font><font> ، </font></font><code><font><font>جستجو</font></font></code><font><font> ، و </font></font><code><font><font>ارسال</font></font></code><font><font> . </font><font>این به طور خودکار دریافت به رشته مناسب نقشه برداری (و حروف حساس).</font></font></dd> + <dt><font><font>{{htmlattrdef ("autocapitalize")}} {{غیر standard_inline}}</font></font></dt> + <dd><font><font>این یک ویژگی غیر استاندارد استفاده شده توسط سیستم عامل iOS صفری موبایل که کنترل اینکه آیا و چگونه ارزش متن باید به طور خودکار با حروف بزرگ آن را به عنوان وارد / ویرایش توسط کاربر است. </font><font>مقادیر غیر بد دانسته دسترس در iOS 5 و بعد می باشد. </font><font>مقادیر ممکن عبارتند از:</font></font> + <ul> + <li><code><font><font>هیچ</font></font></code><font><font> : کاملا غیر فعال سرمایه اتوماتیک</font></font></li> + <li><code><font><font>جملات</font></font></code><font><font> : به صورت خودکار اولین حرف از جملات.</font></font></li> + <li><code><font><font>کلمات</font></font></code><font><font> : به صورت خودکار اولین حرف از کلمه است.</font></font></li> + <li><code><font><font>شخصیت</font></font></code><font><font> : به صورت خودکار تمام شخصیت های سرمایه گذاری.</font></font></li> + <li><code><font><font>در</font></font></code><font><font> : {{deprecated_inline ()}} توصیه از سیستم عامل iOS 5.</font></font></li> + <li><code><font><font>خاموش</font></font></code><font><font> : {{deprecated_inline ()}} توصیه از سیستم عامل iOS 5.</font></font></li> + </ul> + </dd> + <dt><font><font>{{htmlattrdef ("تکمیل خودکار")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>این ویژگی نشان می دهد که آیا ارزش کنترل می تواند به صورت خودکار توسط مرورگر به پایان رسید. </font><font>این صفت نادیده گرفته اگر مقدار از </font></font><strong><font><font>نوع</font></font></strong><font><font> صفت </font></font><code><font><font>پنهان، رمز عبور، </font></font></code> <code><font><font>چک باکس</font></font></code><font><font> ، </font></font><code><font><font>رادیو</font></font></code><font><font> ، </font></font><code><font><font>فایل</font></font></code><font><font> ، یا یک نوع دکمه ( </font></font><code><font><font>دکمه</font></font></code><font><font> ، </font></font><code><font><font>ارائه</font></font></code><font><font> ، </font></font><code><font><font>تنظیم مجدد</font></font></code><font><font> ، </font></font><code><font><font>تصویر</font></font></code><font><font> ). </font><font>مقادیر ممکن عبارتند از:</font></font> + <ul> + <li><code><font><font>خاموش</font></font></code><font><font> : کاربر باید به صراحت ارزش به این زمینه برای هر استفاده را وارد کنید، و یا سند روش تکمیل خودکار خود را فراهم می کند. </font><font>مرورگر به صورت خودکار تکمیل ورود نیست.</font></font></li> + <li><code><font><font>در</font></font></code><font><font> : مرورگر به طور خودکار می تواند ارزش بر اساس ارزش است که کاربر در طول استفاده قبلی وارد تکمیل.</font></font></li> + </ul> + + <p><font><font>اگر </font></font><strong><font><font>تکمیل خودکار</font></font></strong><font><font> صفت در یک عنصر ورودی مشخص نشده است، پس از آن مرورگر با استفاده از </font></font><strong><font><font>تکمیل خودکار</font></font></strong><font><font> مقدار ویژگی از </font></font><code><font><font><ورودی></font></font></code><font><font> صاحب فرم عنصر. </font><font>صاحب فرم یا است </font></font><code><font><font>فرم</font></font></code><font><font> عنصر که این </font></font><code><font><font><ورودی></font></font></code><font><font> عنصر از نوادگان یا عنصر فرم که است </font></font><strong><font><font>ID</font></font></strong><font><font> توسط مشخص </font></font><strong><font><font>فرم</font></font></strong><font><font> صفت عناصر ورودی. </font><font>برای کسب اطلاعات بیشتر، نگاه کنید به {{htmlattrxref ("تکمیل خودکار"، "فرم")}} ویژگی در {{روی HTMLElement ("فرم")}}.</font></font></p> + + <p><strong><font><font>تکمیل خودکار</font></font></strong><font><font> ویژگی نیز تعیین می فایرفاکس خواهد شد، بر خلاف سایر مرورگرها، </font></font><a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing"><font><font>اصرار دولت غیر فعال پویا و (در صورت وجود) checkedness پویا</font></font></a><font><font> از {{روی HTMLElement ("ورودی")}} در سراسر بارهای صفحه. </font><font>ویژگی تداوم به طور پیش فرض فعال است. </font><font>تنظیم مقدار از </font></font><strong><font><font>تکمیل خودکار</font></font></strong><font><font> ویژگی به </font></font><code><font><font>فعال</font></font></code><font><font> غیر فعال کردن این ویژگی. </font><font>این کار حتی زمانی که </font></font><strong><font><font>تکمیل خودکار</font></font></strong><font><font> ویژگی به طور معمول به {{روی HTMLElement ("ورودی")}} به موجب آن صدق نمی کند </font></font><strong><font><font>نوع</font></font></strong><font><font> . </font><font>مشاهده {{اشکال (654072)}}.</font></font></p> + </dd> + <dt><font><font>{{htmlattrdef ("رقم")}} {{غیر standard_inline}}</font></font></dt> + <dd><font><font>این یک ویژگی غیر استاندارد پشتیبانی شده توسط صفری است که مورد استفاده برای کنترل اینکه آیا autocorrection باید فعال زمانی که کاربر وارد شده است / ویرایش ارزش متن {{روی HTMLElement ("ورودی")}}. </font><font>مقادیر ویژگی ممکن است:</font></font> + <ul> + <li><code><font><font>در</font></font></code><font><font> : فعال کردن autocorrection</font></font></li> + <li><code><font><font>خاموش</font></font></code><font><font> : autocorrection غیر فعال کردن</font></font></li> + </ul> + </dd> + <dt><font><font>{{htmlattrdef ("فوکوس خودکار")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>این ویژگی بولی شما اجازه می دهد مشخص است که یک کنترل فرم باید تمرکز ورودی هنگامی که بارهای صفحه، مگر اینکه کاربر را لغو، به عنوان مثال با تایپ کردن در یک کنترل متفاوت است. </font><font>تنها یک عنصر فرم در یک سند می تواند داشته </font></font><strong><font><font>فوکوس خودکار</font></font></strong><font><font> ویژگی، که یک بولی. </font><font>این را نمی توان اعمال اگر </font></font><strong><font><font>نوع</font></font></strong><font><font> صفت به راه </font></font><code><font><font>پنهان</font></font></code><font><font> (که شده است، شما نمی توانید به طور خودکار تمرکز به کنترل پنهان است).</font></font></dd> + <dt><font><font>{{htmlattrdef ("ذخیره خودکار")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>این ویژگی باید به عنوان یک ارزش منحصر به فرد تعریف شده است. </font><font>اگر ارزش نوع ویژگی است </font></font><code><font><font>جستجو</font></font></code><font><font> ، ارزش عبارت جستجوی قبلی در کرکره در سراسر بار صفحه ادامه خواهد داشت.</font></font></dd> + <dt><font><font>{{htmlattrdef ("چک")}}</font></font></dt> + <dd> + <p><font><font>هنگامی که ارزش </font></font><strong><font><font>نوع</font></font></strong><font><font> ویژگی است </font></font><code><font><font>رادیو</font></font></code><font><font> یا </font></font><code><font><font>چک باکس</font></font></code><font><font> ، حضور این ویژگی بولی نشان می دهد که کنترل به طور پیش فرض انتخاب شده. </font><font>در غیر این صورت آن را نادیده گرفته است.</font></font></p> + + <p><font><font>فایرفاکس خواهد شد، بر خلاف سایر مرورگرها، به طور پیش فرض، </font></font><a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing"><font><font>اصرار پویا بررسی دولت</font></font></a><font><font> از {{روی HTMLElement ("ورودی")}} در سراسر بارهای صفحه. </font><font>با استفاده از {{htmlattrxref ("تکمیل خودکار"، "ورودی")}} ویژگی برای کنترل این ویژگی.</font></font></p> + </dd> + <dt><font><font>{{htmlattrdef ("غیر فعال")}}</font></font></dt> + <dd> + <p><font><font>این ویژگی بولی نشان می دهد که کنترل فرم در دسترس است برای تعامل نیست. </font><font>به طور خاص، </font></font><code><font><font>کلیک</font></font></code><font><font> رویداد </font></font><a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute"><font><font>خواهد شد اعزام نمی</font></font></a><font><font> در کنترل غیر فعال است. </font><font>همچنین، ارزش یک کنترل غیر فعال است با فرم ارسال نشده است.</font></font></p> + + <p><font><font>فایرفاکس خواهد شد، بر خلاف سایر مرورگرها، به طور پیش فرض، </font></font><a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing"><font><font>اصرار دولت معلول پویا</font></font></a><font><font> از {{روی HTMLElement ("ورودی")}} در سراسر بارهای صفحه. </font><font>با استفاده از {{htmlattrxref ("تکمیل خودکار"، "ورودی")}} ویژگی برای کنترل این ویژگی.</font></font></p> + </dd> + <dt><font><font>{{htmlattrdef ("فرم")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>عنصر فرم که عنصر ورودی با (آن همراه </font></font><em><font><font>صاحب فرم</font></font></em><font><font> ). </font><font>ارزش ویژگی باید داشته باشد </font></font><strong><font><font>ID</font></font></strong><font><font> از {{روی HTMLElement ("فرم")}} عنصر در همان سند. </font><font>اگر این ویژگی مشخص نشده است، این </font></font><code><font><font><ورودی></font></font></code><font><font> عنصر باید از نسل {{روی HTMLElement ("فرم")}} عنصر باشد. </font><font>این ویژگی شما را قادر به قرار دادن </font></font><code><font><font><ورودی></font></font></code><font><font> عناصر در هر نقطه در یک سند، نه فقط به عنوان فرزندان عناصر فرم خود را. </font><font>ورودی تنها می توان با یک فرم در ارتباط است.</font></font></dd> + <dt><font><font>{{htmlattrdef ("formaction")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>URI از برنامه ای است که پردازش اطلاعات ارائه شده توسط عنصر ورودی، اگر آن یک دکمه یا عکس ارسال کنید. </font><font>اگر مشخص شده، آن را لغو می {{htmlattrxref ("عمل"، "فرم")}} ویژگی از صاحب فرم عنصر است.</font></font></dd> + <dt><font><font>{{htmlattrdef ("formenctype")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>اگر عنصر ورودی دکمه ارسال و یا تصویر است، این ویژگی نوع محتوا است که برای ارائه به صورت به سرور مشخص می کند. </font><font>مقادیر ممکن عبارتند از:</font></font> + <ul> + <li><code><font><font>نرم افزار / X-WWW-فرم-urlencoded</font></font></code><font><font> : مقدار پیش فرض اگر ویژگی مشخص نشده است.</font></font></li> + <li><code><font><font>چند / فرم داده</font></font></code><font><font> : با استفاده از این ارزش اگر شما با استفاده از {{روی HTMLElement ("ورودی")}} عنصر با {{htmlattrxref ("نوع"، "ورودی")}} مجموعه نسبت به </font></font><code><font><font>فایل</font></font></code><font><font> .</font></font></li> + <li><code><font><font>متن / ساده</font></font></code></li> + </ul> + + <p><font><font>اگر این ویژگی مشخص است، آن را لغو می {{htmlattrxref ("Enctype فرم"، "فرم")}} ویژگی از صاحب فرم عنصر است.</font></font></p> + </dd> + <dt><font><font>{{htmlattrdef ("formmethod")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>اگر عنصر ورودی دکمه ارسال و یا تصویر است، این ویژگی به روش HTTP که مرورگر استفاده می کند برای ارسال فرم مشخص می کند. </font><font>مقادیر ممکن عبارتند از:</font></font> + <ul> + <li><code><font><font>ارسال</font></font></code><font><font> : داده ها از فرم در بدن از فرم شامل است و به سرور ارسال می شود.</font></font></li> + <li><code><font><font>دریافت</font></font></code><font><font> ها: داده ها از فرم به اضافه </font></font><strong><font><font>فرم</font></font></strong><font><font> نسبت URI، با "؟" </font><font>به عنوان یک جدا، و URI نتیجه به سرور ارسال می شود. </font><font>با استفاده از این روش هنگامی که فرم هیچ عوارض جانبی و تنها حاوی کاراکترهای اسکی.</font></font></li> + </ul> + + <p><font><font>اگر مشخص شده، این ویژگی را لغو می {{htmlattrxref ("روش"، "فرم")}} ویژگی از صاحب فرم عنصر است.</font></font></p> + </dd> + <dt><font><font>{{htmlattrdef ("formnovalidate")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>اگر عنصر ورودی دکمه ارسال و یا تصویر است، این ویژگی بولی مشخص می کند که به شکل نیست به اعتبار زمانی که آن را مشاهده کنید. </font><font>اگر این ویژگی مشخص است، آن را لغو می {{htmlattrxref ("novalidate"، "فرم")}} ویژگی از صاحب فرم عنصر است.</font></font></dd> + <dt><font><font>{{htmlattrdef ("formtarget")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>اگر عنصر ورودی دکمه ارسال و یا تصویر است، این ویژگی یک نام یا کلمه کلیدی نشان می دهد که در آن به نمایش پاسخ این است که پس از ارسال فرم دریافت است. </font><font>این نام، و یا کلمه کلیدی برای، است </font></font><em><font><font>زمینه مرور</font></font></em><font><font> (به عنوان مثال، تب، پنجره، و یا فریم های درون خطی). </font><font>اگر این ویژگی مشخص است، آن را لغو می {{htmlattrxref ("هدف"، "فرم")}} ویژگی از صاحب فرم عناصر است. </font><font>کلمات کلیدی زیر دارای معانی خاص:</font></font> + <ul> + <li><font><font>_ </font></font><code><font><font>خود</font></font></code><font><font> : بار پاسخ به زمینه مرور همان یک جریان. </font><font>این مقدار به طور پیش فرض است اگر ویژگی مشخص نشده است.</font></font></li> + <li><code><font><font>_blank</font></font></code><font><font> : بار پاسخ به یک محیط جدید مرور که نامش ذکر نشده.</font></font></li> + <li><code><font><font>_parent</font></font></code><font><font> : بار پاسخ به زمینه مرور پدر و مادر از یک جریان. </font><font>اگر هیچ پدر و مادر وجود دارد، این گزینه رفتار به همان شیوه به عنوان </font></font><code><font><font>_self</font></font></code><font><font> .</font></font></li> + <li><code><font><font>_top</font></font></code><font><font> : بار پاسخ به زمینه مرور در سطح بالا (که شده است، زمینه مرور است که از اجداد یک جریان، و هیچ پدر و مادر). </font><font>اگر هیچ پدر و مادر وجود دارد، این گزینه رفتار به همان شیوه به عنوان </font></font><code><font><font>_self</font></font></code><font><font> .</font></font></li> + </ul> + </dd> + <dt><font><font>{{htmlattrdef ("ارتفاع")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>اگر مقدار از </font></font><strong><font><font>نوع</font></font></strong><font><font> ویژگی است </font></font><code><font><font>تصویر</font></font></code><font><font> ، این ویژگی ارتفاع تصویر نمایش داده شده برای دکمه تعریف می کند.</font></font></dd> + <dt><font><font>{{htmlattrdef ("تدریجی")}} {{غیر standard_inline}}</font></font></dt> + <dd><font><font>این یک ویژگی غیر استاندارد پشتیبانی شده توسط صفری که فقط شامل زمانی که است </font></font><strong><font><font>نوع</font></font></strong><font><font> است </font></font><code><font><font>جستجو</font></font></code><font><font> . </font><font>اگر ویژگی حال حاضر، صرف نظر از آنچه ارزش خود را است، {{روی HTMLElement ("ورودی")}} آتش سوزی </font></font><a href="/en-US/docs/Web/Events/search"><code><font><font>جستجو</font></font></code></a><font><font> وقایع را به عنوان کاربر ویرایش ارزش متن. </font><font>این رویداد تنها پس از ایست-اجرای تعریف کرده است از ضربه زدن به کلید جدید ترین سپری اخراج. </font><font>کلید جدید تنظیم مجدد ایست. </font><font>به عبارت دیگر، شلیک رویداد debounced است. </font><font>اگر ویژگی وجود ندارد، </font></font><a href="/en-US/docs/Web/Events/search"><code><font><font>جستجو</font></font></code></a><font><font> رویداد تنها اخراج وقتی که کاربر به صراحت با دادن یک (مثلا با کلید Enter در حالی که در زمینه فشار دادن).</font></font></dd> + <dt><font><font>{{htmlattrdef ("inputmode")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>اشاره به مرورگر است که برای آن صفحه کلید برای نمایش. </font><font>این ویژگی صدق زمانی که ارزش </font></font><strong><font><font>نوع</font></font></strong><font><font> متن، رمز عبور، ایمیل، و یا URL است. </font><font>مقادیر ممکن عبارتند از:</font></font> + <ul> + <li><code><font><font>کلمه به کلمه</font></font></code><font><font> : عدد و الفبایی، محتوای غیر نثر مانند نام کاربری و کلمه عبور.</font></font></li> + <li><code><font><font>لاتین</font></font></code><font><font> : ورودی لاتین اسکریپت در زبان مورد نظر کاربر با ایدز تایپ مانند پیش بینی متن را فعال کنید. </font><font>برای ارتباط انسان-به-کامپیوتر مانند جعبه جستجو.</font></font></li> + <li><code><font><font>لاتین نام</font></font></code><font><font> : عنوان </font></font><em><font><font>لاتین</font></font></em><font><font> ، اما برای نام انسان است.</font></font></li> + <li><code><font><font>لاتین نثر</font></font></code><font><font> : به عنوان </font></font><em><font><font>لاتین</font></font></em><font><font> ، اما با ایدز تایپ تهاجمی تر. </font><font>برای انسان به انسان ارتباطی مانند پیام های فوری برای ایمیل.</font></font></li> + <li><code><font><font>تمام عرض لاتین</font></font></code><font><font> : عنوان </font></font><em><font><font>لاتین نثر</font></font></em><font><font> ، اما برای زبان دوم کاربر.</font></font></li> + <li><code><font><font>کانا</font></font></code><font><font> : کانا یا ورودی romaji، به طور معمول ورودی هیراگانا، با استفاده از شخصیت های تمام عرض، با پشتیبانی از تبدیل به کانجی. </font><font>در نظر گرفته شده برای ورودی متن ژاپنی.</font></font></li> + <li><code><font><font>کاتاکانا</font></font></code><font><font> : ورودی کاتاکانا، با استفاده از شخصیت های تمام عرض، با پشتیبانی از تبدیل به کانجی. </font><font>در نظر گرفته شده برای ورودی متن ژاپنی.</font></font></li> + <li><code><font><font>عددی</font></font></code><font><font> : ورودی عددی، از جمله کلید برای رقم 0 تا 9، ترجیح شخصیت هزاران جدا کاربر، و شخصیت برای نشان اعداد منفی. </font><font>در نظر گرفته شده برای کدهای عددی، به عنوان مثال شماره کارت اعتباری. </font><font>برای اعداد واقعی، ترجیح می دهند با استفاده از <نوع ورودی = "تعداد"></font></font></li> + <li><code><font><font>تلفن</font></font></code><font><font> : ورودی تلفن، از جمله ستاره و کلید پوند. </font><font>استفاده از <ورودی نوع = "تلفن"> در صورت امکان به جای.</font></font></li> + <li><code><font><font>ایمیل</font></font></code><font><font> : ورودی ایمیل. </font><font>استفاده از <ورودی نوع = "ایمیل"> در صورت امکان به جای.</font></font></li> + <li><code><font><font>آدرس</font></font></code><font><font> : URL ورودی. </font><font>استفاده از <ورودی نوع = "URL"> در صورت امکان به جای.</font></font></li> + </ul> + </dd> + <dt><font><font>{{htmlattrdef ("فهرست")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>شناسایی یک لیست از گزینه های از پیش تعریف شده به پیشنهاد به کاربر. </font><font>مقدار باید باشد </font></font><strong><font><font>ID</font></font></strong><font><font> از {{روی HTMLElement ("کنترل DataList")}} عنصر در همان سند. </font><font>مرورگر تنها گزینه هایی که مقادیر معتبر برای این عنصر ورودی می باشد. </font><font>این صفت زمانی که نادیده گرفته </font></font><strong><font><font>نوع</font></font></strong><font><font> مقدار ویژگی است </font></font><code><font><font>پنهان</font></font></code><font><font> ، </font></font><code><font><font>چک باکس</font></font></code><font><font> ، </font></font><code><font><font>رادیو</font></font></code><font><font> ، </font></font><code><font><font>فایل</font></font></code><font><font> ، یا یک نوع فشار دهید.</font></font></dd> + <dt><font><font>{{htmlattrdef ("حداکثر")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>حداکثر ارزش (عددی یا تاریخ-زمان) را برای این آیتم، که نباید کمتر از حداقل (آن </font></font><strong><font><font>دقیقه</font></font></strong><font><font> ویژگی) ارزش.</font></font></dd> + <dt><font><font>{{htmlattrdef ("MAXLENGTH")}}</font></font></dt> + <dd><font><font>اگر مقدار از </font></font><strong><font><font>نوع</font></font></strong><font><font> ویژگی است </font></font><code><font><font>متن</font></font></code><font><font> ، </font></font><code><font><font>ایمیل</font></font></code><font><font> ، </font></font><code><font><font>جستجو</font></font></code><font><font> ، </font></font><code><font><font>رمز عبور</font></font></code><font><font> ، </font></font><code><font><font>تلفن</font></font></code><font><font> ، و یا </font></font><code><font><font>URL</font></font></code><font><font> ، این ویژگی به حداکثر تعداد کاراکتر (در نقاط کد یونیکد) که کاربر می تواند وارد مشخص. </font><font>برای دیگر انواع کنترل، آن را نادیده گرفته است. </font><font>این می تواند ارزش بیش از </font></font><strong><font><font>اندازه</font></font></strong><font><font> ویژگی. </font><font>اگر آن مشخص نشده است، کاربر می تواند تعداد نامحدودی از حرف وارد نمایید. </font><font>مشخص نتایج تعداد منفی در رفتار پیش فرض. </font><font>که شده است، کاربر می تواند تعداد نامحدودی از حرف وارد نمایید. </font><font>محدودیت ارزیابی شده است تنها زمانی که ارزش صفت تغییر کرده است.</font></font></dd> + <dt><font><font>{{htmlattrdef ("دقیقه")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>حداقل ارزش (عددی یا تاریخ-زمان) را برای این آیتم، که نباید بیشتر از حداکثر (آن </font></font><strong><font><font>حداکثر</font></font></strong><font><font> ویژگی) ارزش.</font></font></dd> + <dt><font><font>{{htmlattrdef ("minlength")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>اگر مقدار از </font></font><strong><font><font>نوع</font></font></strong><font><font> ویژگی است </font></font><code><font><font>متن</font></font></code><font><font> ، </font></font><code><font><font>ایمیل</font></font></code><font><font> ، </font></font><code><font><font>جستجو</font></font></code><font><font> ، </font></font><code><font><font>رمز عبور</font></font></code><font><font> ، </font></font><code><font><font>تلفن</font></font></code><font><font> ، و یا </font></font><code><font><font>URL</font></font></code><font><font> ، این ویژگی حداقل تعداد کاراکتر (در نقاط کد یونیکد) که کاربر می تواند وارد مشخص. </font><font>برای دیگر انواع کنترل، آن را نادیده گرفته است.</font></font></dd> + <dt><font><font>{{htmlattrdef ("چند")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>این ویژگی بولی نشان می دهد که آیا کاربر می تواند بیش از یک مقدار را وارد کنید. </font><font>این ویژگی صدق زمانی که </font></font><strong><font><font>نوع</font></font></strong><font><font> صفت قرار است به </font></font><code><font><font>ایمیل</font></font></code><font><font> و یا </font></font><code><font><font>فایل</font></font></code><font><font> . </font><font>در غیر این صورت آن را نادیده گرفته است.</font></font></dd> + <dt><font><font>{{htmlattrdef ("نام")}}</font></font></dt> + <dd><font><font>نام کنترل، که با داده های فرم را مشاهده کنید.</font></font></dd> + <dt><font><font>{{htmlattrdef ("الگوی")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>یک عبارت منظم که ارزش کنترل است در برابر بررسی می شود. </font><font>الگوی باید کل ارزش، نه فقط برخی از زیر مجموعه مطابقت. </font><font>استفاده از </font></font><strong><font><font>عنوان</font></font></strong><font><font> ویژگی برای توصیف الگوی برای کمک به کاربر. </font><font>این ویژگی صدق زمانی که ارزش </font></font><strong><font><font>نوع</font></font></strong><font><font> ویژگی است </font></font><code><font><font>متن</font></font></code><font><font> ، </font></font><code><font><font>جستجو</font></font></code><font><font> ، </font></font><code><font><font>تلفن</font></font></code><font><font> ، </font></font><code><font><font>آدرس</font></font></code><font><font> و یا </font></font><code><font><font>ایمیل</font></font></code><font><font> . </font><font>در غیر این صورت آن را نادیده گرفته است. </font><font>زبان عبارت منظم همان را جاوا اسکریپت است. </font><font>الگوی توسط اسلش رو به جلو احاطه نیست.</font></font></dd> + <dt><font><font>{{htmlattrdef ("حفره یا سوراخ")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>اشاره به کاربر از آنچه می تواند در کنترل وارد شده است. </font><font>متن حفره یا سوراخ باید بازده حمل و یا خط تغذیه نیست. </font><font>این ویژگی صدق زمانی که ارزش </font></font><strong><font><font>نوع</font></font></strong><font><font> ویژگی است </font></font><code><font><font>متن</font></font></code><font><font> ، </font></font><code><font><font>جستجو</font></font></code><font><font> ، </font></font><code><font><font>تلفن</font></font></code><font><font> ، </font></font><code><font><font>آدرس</font></font></code><font><font> و یا </font></font><code><font><font>ایمیل</font></font></code><font><font> . </font><font>در غیر این صورت آن را نادیده گرفته است.</font></font> + <div class="note"><strong><font><font>توجه:</font></font></strong><font><font> آیا استفاده نمی </font></font><code><font><font>حفره یا سوراخ</font></font></code><font><font> نسبت به جای {{روی HTMLElement ("برچسب")}} عنصر. </font><font>اهداف خود متفاوت است: {{روی HTMLElement ("برچسب")}} ویژگی را توصیف نقش عنصر فرم. </font><font>که است، آن را نشان می دهد که چه نوع از اطلاعات است انتظار می رود، </font></font><code><font><font>حفره یا سوراخ</font></font></code><font><font> ویژگی یک اشاره در مورد فرمت محتوای باید باشد. </font><font>موارد که در آن وجود دارد </font></font><code><font><font>حفره یا سوراخ</font></font></code><font><font> صفت هرگز به کاربر نمایش داده، به طوری که فرم باید بدون آن قابل فهم باشد.</font></font></div> + </dd> + <dt><font><font>{{htmlattrdef ("فقط خواندنی")}}</font></font></dt> + <dd><font><font>این ویژگی بولی نشان می دهد که کاربر می تواند ارزش های کنترل را تغییر دهید.</font></font> + <p><font><font>{{HTMLVersionInline ("5")}} این صفت اگر مقدار از نادیده گرفته </font></font><strong><font><font>نوع</font></font></strong><font><font> صفت </font></font><code><font><font>پنهان</font></font></code><font><font> ، </font></font><code><font><font>محدوده</font></font></code><font><font> ، </font></font><code><font><font>رنگ</font></font></code><font><font> ، </font></font><code><font><font>چک باکس</font></font></code><font><font> ، </font></font><code><font><font>رادیو</font></font></code><font><font> ، </font></font><code><font><font>فایل</font></font></code><font><font> ، یا یک نوع فشار دهید.</font></font></p> + </dd> + <dt><font><font>{{htmlattrdef ("نیاز")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>این ویژگی مشخص می کند که کاربر باید در یک مقدار قبل از ارسال فرم را پر کنید. </font><font>این می تواند مورد استفاده قرار گیرد که </font></font><strong><font><font>نوع</font></font></strong><font><font> صفت </font></font><code><font><font>پنهان</font></font></code><font><font> ، </font></font><code><font><font>تصویر</font></font></code><font><font> ، و یا یک نوع دکمه ( </font></font><code><font><font>ارسال</font></font></code><font><font> ، </font></font><code><font><font>تنظیم مجدد</font></font></code><font><font> ، و یا </font></font><code><font><font>دکمه</font></font></code><font><font> ). </font><font>{{cssxref (": اختیاری")}} و {{cssxref (": نیاز")}} CSS شبه کلاس خواهد شد به میدان به عنوان مناسب استفاده شود.</font></font></dd> + <dt><font><font>{{htmlattrdef ("selectionDirection")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>جهت است که در آن انتخاب رخ داده است. </font><font>این است "رو به جلو" اگر انتخاب از ساخته شده بود به سمت چپ به راست در محل LTR و یا راست به چپ در محلی RTL، و یا "عقب مانده" اگر انتخاب در جهت مخالف ساخته شده است. </font><font>این می تواند "هیچ" اگر جهت انتخاب ناشناخته است.</font></font></dd> + <dt><font><font>{{htmlattrdef ("اندازه")}}</font></font></dt> + <dd><font><font>اندازه اولیه از کنترل. </font><font>این مقدار است در پیکسل مگر اینکه ارزش </font></font><strong><font><font>نوع</font></font></strong><font><font> ویژگی است </font></font><code><font><font>متن</font></font></code><font><font> یا </font></font><code><font><font>رمز عبور</font></font></code><font><font> ، که در این صورت، آن را یک عدد صحیح از شخصیت است. </font><font>شروع در HTML5، این ویژگی فقط زمانی که </font></font><strong><font><font>نوع</font></font></strong><font><font> صفت به راه </font></font><code><font><font>متن</font></font></code><font><font> ، </font></font><code><font><font>جستجو</font></font></code><font><font> ، </font></font><code><font><font>تلفن</font></font></code><font><font> ، </font></font><code><font><font>آدرس</font></font></code><font><font> ، </font></font><code><font><font>ایمیل</font></font></code><font><font> ، و یا </font></font><code><font><font>رمز عبور</font></font></code><font><font> . </font><font>در غیر این صورت آن را نادیده گرفته است. </font><font>علاوه بر این، اندازه باید بزرگتر از صفر باشد. </font><font>اگر شما یک اندازه مشخص نیست، یک مقدار به طور پیش فرض از 20 استفاده شده است.</font></font></dd> + <dt><font><font>{{htmlattrdef ("چک کردن غلط املایی")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>تنظیم مقدار این ویژگی به </font></font><code><font><font>درست</font></font></code><font><font> نشان می دهد که عنصر نیاز به املا و دستور زبان آن بررسی می شود. </font><font>ارزش </font></font><code><font><font>به طور پیش فرض</font></font></code><font><font> نشان می دهد که عنصر است با توجه به رفتار پیش فرض، احتمالا در عنصر پدر و مادر خود را بر اساس به عمل </font></font><code><font><font>چک کردن غلط املایی</font></font></code><font><font> ارزش. </font><font>ارزش </font></font><code><font><font>نادرست</font></font></code><font><font> نشان می دهد که عنصر باید بررسی شود.</font></font></dd> + <dt><font><font>{{htmlattrdef ("SRC")}}</font></font></dt> + <dd><font><font>اگر مقدار از </font></font><strong><font><font>نوع</font></font></strong><font><font> ویژگی است </font></font><code><font><font>تصویر</font></font></code><font><font> ، این ویژگی URI برای محل از یک تصویر به روی گرافیکی نمایش دکمه ارسال را مشخص. </font><font>در غیر این صورت آن را نادیده گرفته است.</font></font></dd> + <dt><font><font>{{htmlattrdef ("گام")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>با این نسخهها کار میکند </font></font><strong><font><font>دقیقه</font></font></strong><font><font> و </font></font><strong><font><font>حداکثر</font></font></strong><font><font> نسبت به محدود کردن افزایش که در آن یک مقدار عددی یا تاریخ-زمان می تواند مجموعه ای. </font><font>این می تواند رشته </font></font><code><font><font>هر</font></font></code><font><font> و یا تعداد ممیز شناور مثبت است. </font><font>اگر این ویژگی است به تنظیم نشده </font></font><code><font><font>هر</font></font></code><font><font> ، کنترل تنها ارزش می پذیرد در تقسیم عددی بر مضرب ارزش گام بیشتر از حداقل.</font></font></dd> + <dt><font><font>{{htmlattrdef ("tabindex")}}-عنصر خاص در {{HTMLVersionInline (4)}}، جهانی در {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>موقعیت عنصر در tabbing منظور ناوبری برای سند جاری.</font></font></dd> + <dt><font><font>{{htmlattrdef ("usemap")}} {{HTMLVersionInline (4)}} تنها، {{obsoleteGeneric ("درون خطی"، "HTML5")}}</font></font></dt> + <dd><font><font>نام {{روی HTMLElement ("نقشه")}} عنصر به عنوان یک تصویر نقشه.</font></font></dd> + <dt><font><font>{{htmlattrdef ("مقدار")}}</font></font></dt> + <dd><font><font>مقدار اولیه از کنترل. </font><font>این ویژگی اختیاری به جز زمانی که ارزش است </font></font><strong><font><font>نوع</font></font></strong><font><font> ویژگی است </font></font><code><font><font>رادیو</font></font></code><font><font> یا </font></font><code><font><font>چک باکس</font></font></code><font><font> . </font></font><br> + <font><font>توجه داشته باشید که زمانی که بارگیری مجدد صفحه، مارمولک خانگی و اینترنت اکسپلورر </font></font><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186"><font><font>خواهد شد مقدار مشخص شده در کد HTML فوق به چشم پوشی</font></font></a><font><font> ، اگر مقدار قبل از بازنگری تغییر یافت.</font></font></dd> + <dt><font><font>{{htmlattrdef ("عرض")}} {{HTMLVersionInline ("5")}}</font></font></dt> + <dd><font><font>اگر مقدار از </font></font><strong><font><font>نوع</font></font></strong><font><font> ویژگی است </font></font><code><font><font>تصویر</font></font></code><font><font> ، این ویژگی عرض تصویر نمایش داده شده برای دکمه تعریف می کند.</font></font></dd> + <dt><font><font>{{htmlattrdef ("X-moz-errormessage")}} {{غیر standard_inline}}</font></font></dt> + <dd><font><font>این فرمت موزیلا اجازه می دهد تا شما را به مشخص پیغام خطا برای نمایش زمانی که یک میدان می کند با موفقیت اعتبار نیست.</font></font></dd> +</dl> + +<h2 id="یادداشت"><font><font>یادداشت</font></font></h2> + +<h3 id="ورودی_فایل"><font><font>ورودی فایل</font></font></h3> + +<div class="note"> +<p><strong><font><font>توجه داشته باشید:</font></font></strong><font><font> شروع در {{مارمولک خانگی ("2.0")}}، خواستار </font></font><code><font><font>کلیک ()</font></font></code><font><font> روش در {{روی HTMLElement ("ورودی")}} عنصر از نوع "فایل" باز می شود جمع کننده فایل و کاربر فایل را انتخاب کنید اجازه می دهد. </font><font>مشاهده </font></font><a href="/en-US/docs/Using_files_from_web_applications"><font><font>با استفاده از فایل ها از برنامه های کاربردی وب</font></font></a><font><font> برای مثال و جزئیات بیشتر.</font></font></p> +</div> + +<p><font><font>شما می توانید مقدار یک جمع کننده فایل از یک اسکریپت تنظیم نشده. </font><font>انجام کاری مانند زیر اثر ندارد:</font></font></p> + +<pre class="brush: js">ور E = getElementById ("someFileInputElement")؛ +e.value = "غذ"؛ +</pre> + +<h3 id="پیام_های_خطا"><font><font>پیام های خطا</font></font></h3> + +<p><font><font>اگر می خواهید فایرفاکس به ارائه یک پیام خطای سفارشی در زمانی که یک میدان قادر به اعتبارسنجی، شما می توانید با استفاده از </font></font><code><font><font>X-moz-errormessage</font></font></code><font><font> ویژگی به انجام این کار:</font></font></p> + +<pre class="brush: html"><نوع ورودی = "ایمیل" X-moz-errormessage = "لطفا یک آدرس ایمیل معتبر را مشخص کنید."> +</pre> + +<p><font><font>توجه داشته باشید، با این حال، که این استاندارد نیست و یک اثر در مرورگرهای دیگر ندارد.</font></font></p> + +<h2 id="نمونه"><font><font>نمونه</font></font></h2> + +<h3 id="جعبه_ورودی_ساده"><font><font>جعبه ورودی ساده</font></font></h3> + +<pre class="brush: html"><! - ورودی عمومی -> +<نوع ورودی = "متن" نام = "ورودی" مقدار = "در اینجا تایپ کنید"> +</pre> + +<p><input><img alt="" class="ife_marker" id="input_ife_marker_0" style="border: 0pt none; cursor: pointer; display: inline; height: 19px; width: 14px;" title="حداکثر طول فیلد نامشخص است"></p> + +<h3 id="سناریو_مورد_استفاده_مشترک"><font><font>سناریو مورد استفاده مشترک</font></font></h3> + +<pre class="brush: html"><! - فرم مشترک است که شامل تگ های ورودی -> +<اقدام فرم = روش "getform.php" = "دریافت"> + نام: <نوع ورودی = "متن" نام = "FIRST_NAME" /> <br /> + تاریخ و زمان آخرین نام: <نوع ورودی = "متن" نام = "LAST_NAME" /> <br /> + فرستادن به ایمیل: <ورودی نوع = "ایمیل" نام = "USER_EMAIL" /> <br /> +<نوع ورودی = "ارسال" مقدار = "ارسال" /> +</ FORM> +</pre> + +<h3 id="با_استفاده_از_mozactionhint_در_فایرفاکس_موبایل"><font><font>با استفاده از mozactionhint در فایرفاکس موبایل</font></font></h3> + +<p><font><font>شما می توانید {{htmlattrxref ("mozactionhint"، "ورودی")}} نسبت به تعیین متن برای برچسب کلید وارد کنید بر روی صفحه کلید مجازی هنگامی که فرم شما در فایرفاکس موبایل ارائه استفاده کنید. </font><font>به عنوان مثال، به یک "بعدی" برچسب، شما می توانید این کار:</font></font></p> + +<pre class="brush: html"><نوع ورودی = "متن" mozactionhint = "بعدی" نام = "sometext" /> +</pre> + +<p><font><font>نتیجه این است:</font></font></p> + +<p><a href="/@api/deki/files/4970/=mozactionhint.png"><img alt="mozactionhint.png" class="default internal" src="/@api/deki/files/4970/=mozactionhint.png?size=webview" style="border: 1px solid black; height: 350px; width: 210px;"></a></p> + +<h2 id="Specifications" name="Specifications"><font><font>مشخصات</font></font></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><font><font>مشخصات</font></font></th> + <th scope="col"><font><font>وضعیت</font></font></th> + <th scope="col"><font><font>توضیح</font></font></th> + </tr> + </thead> + <tbody> + <tr> + <td><font><font>{{SpecName ('HTML WHATWG'، 'ورودی-element.html #-ورودی-عنصر'، '<ورودی>')}}</font></font></td> + <td><font><font>{{Spec2 ('HTML WHATWG')}}</font></font></td> + <td> </td> + </tr> + <tr> + <td><font><font>{{SpecName ('HTML5 W3C'، 'forms.html #-ورودی-عنصر'، '<ورودی>')}}</font></font></td> + <td><font><font>{{Spec2 ('HTML5 W3C')}}</font></font></td> + <td> </td> + </tr> + <tr> + <td><font><font>{{SpecName ('HTML4.01'، 'تعامل / # forms.html H-17.4'، '<FORM>')}}</font></font></td> + <td><font><font>{{Spec2 ('HTML4.01')}}</font></font></td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="سازگاری_مرورگر"><font><font>سازگاری مرورگر</font></font></h2> + +<p><font><font>{{CompatibilityTable}}</font></font></p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th><font><font>خصوصیات</font></font></th> + <th><font><font>کروم</font></font></th> + <th><font><font>فایرفاکس (مارمولک خانگی)</font></font></th> + <th><font><font>اینترنت اکسپلورر</font></font></th> + <th><font><font>اپرا</font></font></th> + <th><font><font>سیاحت اکتشافی در افریقا</font></font></th> + </tr> + <tr> + <td><font><font>حمایت عمومی</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}</font></font></td> + <td><font><font>2 یا قبل از آن</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>نوع</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}</font></font></td> + <td><font><font>2</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>نوع = دکمه</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}</font></font></td> + <td><font><font>3</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>نوع = چک باکس</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}} </font></font><br> + <font><font>{{CompatGeckoDesktop ("1.9.2")}} برای </font></font><code><font><font>رشد نامحدود</font></font></code><font><font> ارزش</font></font></td> + <td><font><font>2</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>نوع = رنگ</font></font></td> + <td><font><font>21.0</font></font></td> + <td> + <p><font><font>{{CompatGeckoDesktop ("29.0")}} (نه برای ویندوز لمسی نشده)</font></font></p> + </td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>11.01</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + </tr> + <tr> + <td><font><font>نوع = تاریخ</font></font></td> + <td><font><font>5.0</font></font></td> + <td><font><font>{{CompatNo}} </font></font><br> + <font><font>{{unimplemented_inline ("825294")}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatVersionUnknown}} (به رسمیت شناخته شده اما هیچ UI)</font></font></td> + </tr> + <tr> + <td><font><font>نوع = تاریخ ساعت</font></font></td> + <td> + <p><font><font>{{CompatNo}} </font></font><br> + <font><font>(به رسمیت شناخته شده اما هیچ UI)</font></font></p> + </td> + <td><font><font>{{CompatNo}} </font></font><br> + <font><font>{{unimplemented_inline ("825294")}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatVersionUnknown}} (به رسمیت شناخته شده اما هیچ UI)</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = تاریخ ساعت محلی</font></font></td> + <td><font><font>5.0</font></font></td> + <td><font><font>{{CompatNo}} </font></font><br> + <font><font>{{unimplemented_inline ("825294")}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatVersionUnknown}} (به رسمیت شناخته شده اما هیچ UI)</font></font></td> + </tr> + <tr> + <td><font><font>نوع = ایمیل</font></font></td> + <td><font><font>5.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>نوع = فایل</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}</font></font></td> + <td><font><font>3.02</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>نوع = پنهان</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}</font></font></td> + <td><font><font>2</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>نوع = تصویر</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>مارمولک خانگی 2.0 تنها x و y می فرستد مختصات زمانی که کلیک، دیگر نمی به نام / مقدار این عنصر</font></font></td> + <td><font><font>2</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>نوع = ماه</font></font></td> + <td><font><font>5.0</font></font></td> + <td><font><font>{{CompatNo}} </font></font><br> + <font><font>{{unimplemented_inline ("446510")}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatVersionUnknown}} (به رسمیت شناخته شده اما هیچ UI)</font></font></td> + </tr> + <tr> + <td><font><font>نوع = تعداد</font></font></td> + <td><font><font>6.0 (محلی سازی در کروم 11)</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("29.0")}}</font></font></td> + <td><font><font>10 </font></font><br> + <font><font>(به رسمیت شناخته شده اما هیچ UI)</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>نوع = رمز عبور</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}</font></font></td> + <td><font><font>2</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>نوع = رادیو</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}} </font></font><br> + <font><font>{{CompatGeckoDesktop ("1.9.2")}} برای </font></font><code><font><font>رشد نامحدود</font></font></code><font><font> ارزش</font></font></td> + <td><font><font>2</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>نوع = دامنه</font></font></td> + <td><font><font>5.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("23.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>10.62 (11.01 اضافه شده پشتیبانی از مقدار پیش فرض)</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>نوع = تنظیم مجدد</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}</font></font></td> + <td><font><font>2</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>نوع = جستجو</font></font></td> + <td><font><font>5.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>11.01</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>نوع = ارسال</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}</font></font></td> + <td><font><font>2</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>نوع = تلفن</font></font></td> + <td><font><font>5.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>11.01</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>نوع = متن</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}</font></font></td> + <td><font><font>2</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>نوع = زمان</font></font></td> + <td><font><font>5.0</font></font></td> + <td><font><font>{{CompatNo}} </font></font><br> + <font><font>{{unimplemented_inline ("825294")}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatVersionUnknown}} (به رسمیت شناخته شده اما هیچ UI)</font></font></td> + </tr> + <tr> + <td><font><font>نوع = URL</font></font></td> + <td><font><font>5.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>نوع = هفته</font></font></td> + <td><font><font>5.0</font></font></td> + <td><font><font>{{CompatNo}} </font></font><br> + <font><font>{{unimplemented_inline ("825294")}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatVersionUnknown}} (به رسمیت شناخته شده اما هیچ UI)</font></font></td> + </tr> + <tr> + <td> + <p><font><font>شرایط = [فرمت فایل]</font></font></p> + </td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + </tr> + <tr> + <td> + <p><font><font>شرایط = [نوع MIME پرونده]</font></font></p> + </td> + <td><font><font>هشت</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("16.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + </tr> + <tr> + <td><font><font>شرایط = صوتی / *</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}} </font></font><br> + <font><font>فیلترها برای پسوند فایل های صوتی زیر: .aac، .aif، .flac، .iff، .m4a، .m4b، .mid، .midi، MP3، .mpa، .mpc ، .oga، .ogg، .ra، .ram، .snd، پنل های ال، .WMA</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + </tr> + <tr> + <td><font><font>شرایط = ویدیو / *</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}} </font></font><br> + <font><font>فیلترها برای پسوند فایل تصویری زیر: .AVI، دیویکس،. FLV، .m4v، .mkv، ویدئویی، .mp4، .mpeg، .MPG، .ogm، .ogv ، .ogx، .rm، .rmvb، .smil، .webm، WMV، .xvid</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + </tr> + <tr> + <td><font><font>شرایط = تصویر / *</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}} </font></font><br> + <font><font>فیلترها برای پسوند فایل تصویر زیر: .jpe، .JPG، .jpeg، با فرمت .gif فعلی، bmp و، .ico، .svg، .svgz، .tif، .tiff ، .ai، .drw، .pct، .psp، .xcf، فایل PSD، .raw</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + </tr> + <tr> + <td><font><font>= [شرایط. </font><font>+ EXT]</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("37.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>ویژه accesskey</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>6</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>mozactionhint</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + </tr> + <tr> + <td><font><font>تکمیل خودکار</font></font></td> + <td><font><font>17.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>5</font></font></td> + <td><font><font>9.6</font></font></td> + <td><font><font>5.2</font></font></td> + </tr> + <tr> + <td><font><font>فوکوس خودکار</font></font></td> + <td><font><font>5.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>9.6</font></font></td> + <td><font><font>5.0</font></font></td> + </tr> + <tr> + <td><font><font>بررسی</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}</font></font></td> + <td><font><font>2</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>غیر فعال</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}</font></font></td> + <td><font><font>6</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>فرم</font></font></td> + <td><font><font>9.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>formaction</font></font></td> + <td><font><font>9.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>5.2</font></font></td> + </tr> + <tr> + <td><font><font>formenctype</font></font></td> + <td><font><font>9.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>formmethod</font></font></td> + <td><font><font>9.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>5.2</font></font></td> + </tr> + <tr> + <td><font><font>formnovalidate</font></font></td> + <td><font><font>5.0 (در 6.0 تنها با DOCTYPE HTML5 کار، پشتیبانی اعتبار در 7.0 غیر فعال و دوباره فعال در 10.0 بود)</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>formtarget</font></font></td> + <td><font><font>9.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>5.2</font></font></td> + </tr> + <tr> + <td><font><font>ارتفاع</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("16.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>افزایشی</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>inputmode</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + </tr> + <tr> + <td><font><font>فهرست</font></font></td> + <td><font><font>20.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>9.6</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + </tr> + <tr> + <td><font><font>حداکثر</font></font></td> + <td><font><font>5.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("16.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>MAXLENGTH</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7")}}</font></font></td> + <td><font><font>2</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>دقیقه</font></font></td> + <td><font><font>5.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("16.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>minlength</font></font></td> + <td><font><font>40.0</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>چندین</font></font></td> + <td><font><font>1.0 (پشتیبانی برای نوع = فایل و نوع = ایمیل از 5.0)</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.9.2")}} برای </font></font><strong><font><font>نوع</font></font></strong><font><font> = فایل </font></font><br> + <font><font>{{CompatVersionUnknown}} برای </font></font><strong><font><font>نوع</font></font></strong><font><font> = ایمیل</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>1.0 (پشتیبانی 10.62 برای نوع = فایل و به عنوان از 11.01 نوع = ایمیل)</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>نام</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}</font></font></td> + <td><font><font>2</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>الگو</font></font></td> + <td><font><font>5.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>9.6</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + </tr> + <tr> + <td><font><font>حفره یا سوراخ</font></font></td> + <td><font><font>10.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>11.00</font></font></td> + <td><font><font>5.0</font></font></td> + </tr> + <tr> + <td><font><font>فقط خواندنی</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}</font></font></td> + <td><font><font>6 (از دست رفته برای </font></font><strong><font><font>نوع</font></font></strong><font><font> از </font></font><code><font><font>چک باکس</font></font></code><font><font> ، </font></font><code><font><font>رادیو</font></font></code><font><font> )</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>ضروری</font></font></td> + <td><font><font>5.0 (پشتیبانی از عنصر انتخاب به عنوان 10)</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>9.6</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + </tr> + <tr> + <td><font><font>اندازه</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}</font></font></td> + <td><font><font>2</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>چک کردن غلط املایی</font></font></td> + <td><font><font>10.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.9.2")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>11.0</font></font></td> + <td><font><font>چهار</font></font></td> + </tr> + <tr> + <td><font><font>SRC</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}</font></font></td> + <td><font><font>2</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>گام</font></font></td> + <td><font><font>6.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("16.0")}}</font></font></td> + <td><font><font>10</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>5.0</font></font></td> + </tr> + <tr> + <td><font><font>tabindex</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("1.7 و یا قبل از آن")}}</font></font></td> + <td><font><font>6 (عناصر با tabindex> 0 می پیمایش نمی شود)</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>عرض</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("16.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>1.0</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><font><font>خصوصیات</font></font></th> + <th><font><font>آندروید</font></font></th> + <th><font><font>فایرفاکس موبایل (مارمولک خانگی)</font></font></th> + <th><font><font>اینترنت اکسپلورر موبایل</font></font></th> + <th><font><font>اپرا موبایل</font></font></th> + <th><font><font>صفری موبایل</font></font></th> + </tr> + <tr> + <td><font><font>حمایت عمومی</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>نوع</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>نوع = دکمه</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>نوع = چک باکس</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>نوع = رنگ</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoDesktop ("27.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>نوع = تاریخ</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>5.0</font></font></td> + </tr> + <tr> + <td><font><font>نوع = تاریخ ساعت</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = تاریخ ساعت محلی</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = ایمیل</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>3.1 (بدون اعتبار سنجی اما می دهد یک صفحه کلید خاص)</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = فایل</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}} [1]</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = پنهان</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = تصویر</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = ماه</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = تعداد</font></font></td> + <td><font><font>2.3 (بدون اعتبار سنجی اما می دهد یک صفحه کلید خاص)</font></font></td> + <td><font><font>{{CompatGeckoMobile ("29.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>4.0 (بدون اعتبار سنجی اما می دهد یک صفحه کلید خاص)</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = رمز عبور</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = رادیو</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = دامنه</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>5.0</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = تنظیم مجدد</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = جستجو</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>چهار</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = ارسال</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = تلفن</font></font></td> + <td><font><font>2.3</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>3.1</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = متن</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = زمان</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = URL</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>3.1 (بدون اعتبار سنجی اما می دهد یک صفحه کلید خاص)</font></font></td> + </tr> + <tr> + <td style="white-space: nowrap;"><font><font>نوع = هفته</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>شرایط = [نوع MIME پرونده]</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>شرایط = صوتی / *</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>شرایط = تصویر / *</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>شرایط = ویدیو / *</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>= [شرایط. </font><font>+ EXT]</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("37.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>ویژه accesskey</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>تکمیل خودکار</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>فوکوس خودکار</font></font></td> + <td><font><font>3.2</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>بررسی</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>غیر فعال</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>فرم</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>formaction</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>5.0</font></font></td> + </tr> + <tr> + <td><font><font>formenctype</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>formmethod</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>5.0</font></font></td> + </tr> + <tr> + <td><font><font>formnovalidate</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>formtarget</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>5.0</font></font></td> + </tr> + <tr> + <td><font><font>ارتفاع</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("16.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>فهرست</font></font></td> + <td><font><font>{{CompatNo}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>حداکثر</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("16.0")}} (UI ممکن unimplemented باقی می ماند)</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>MAXLENGTH</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>دقیقه</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("16.0")}} (UI ممکن unimplemented باقی می ماند)</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>minlength</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>چندین</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>نام</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>1.0</font></font></td> + </tr> + <tr> + <td><font><font>الگو</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>حفره یا سوراخ</font></font></td> + <td><font><font>2.3</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>11.10</font></font></td> + <td><font><font>4</font></font></td> + </tr> + <tr> + <td><font><font>فقط خواندنی</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>ضروری</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>اندازه</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + <td><font><font>{{CompatVersionUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>چک کردن غلط املایی</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("2.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>11.0</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>SRC</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>گام</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("16.0")}} (UI ممکن unimplemented باقی می ماند)</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>10.62</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>tabindex</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + <tr> + <td><font><font>عرض</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatGeckoMobile ("16.0")}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + <td><font><font>{{CompatUnknown}}</font></font></td> + </tr> + </tbody> +</table> +</div> + +<p><font><font>[1]: </font></font><a href="http://blog.uploadcare.com/post/97884147203/you-cannot-upload-files-to-a-server-using-mobile-safari"><font><font>ارسال فایل شکسته شد</font></font></a><font><font> برای IOS 8.0 و 8.0.1 در موبایل صفری. </font><font>اشکال در IOS 8.0.2 ثابت شد.</font></font></p> + +<p><font><font>صفری موبایل برای IOS اعمال سبک به طور پیش فرض از </font></font><code><font><font>{{cssxref ("کدورت")}}: 0.4</font></font></code><font><font> به متن غیر فعال {{روی HTMLElement ("ورودی")}} عناصر. </font><font>سایر مرورگرهای اصلی در حال حاضر نمی اشتراک این سبک به طور پیش فرض خاص است.</font></font></p> + +<p><font><font>در Safari موبایل برای IOS، تنظیم </font></font><code><font><font>{{cssxref ("صفحه نمایش")}}: بلوک</font></font></code><font><font> در {{روی HTMLElement ("ورودی")}} از </font></font><code><font><font>نوع = "تاریخ"</font></font></code><font><font> ، </font></font><code><font><font>نوع = "زمان"</font></font></code><font><font> ، </font></font><code><font><font>نوع = "تاریخ ساعت محلی "</font></font></code><font><font> ، و یا </font></font><code><font><font>نوع = "ماه"</font></font></code><font><font> باعث می شود که متن درون {{روی HTMLElement ("ورودی")}} برای تبدیل شدن به صورت عمودی به misaligned.</font></font></p> + +<p><font><font>به عنوان Chrome v39، </font></font><code><font><font><ورودی نوع = "تاریخ"></font></font></code><font><font> مدل دهید با </font></font><code><font><font>{{cssxref ("صفحه نمایش")}}: جدول سلول. </font><font>{{cssxref ("عرض")}}: 100٪؛</font></font></code><font><font> . یک دارای {{cssxref ("دقیقه عرض")}} اعمال شده توسط کروم و نمی توان آن را باریک تر از این حداقل عرض تبدیل </font></font><a href="https://code.google.com/p/chromium/issues/detail?id=346051"><font><font>ببینید کروم اشکال # 346051.</font></font></a></p> + +<h3 id="یادداشت_مارمولک_خانگی"><font><font>یادداشت مارمولک خانگی</font></font></h3> + +<p><font><font>فایرفاکس خواهد شد، بر خلاف سایر مرورگرها، به طور پیش فرض، </font></font><a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing"><font><font>اصرار دولت غیر فعال پویا و (در صورت وجود) checkedness پویا</font></font></a><font><font> از {{روی HTMLElement ("ورودی")}} در سراسر بارهای صفحه. </font><font>تنظیم مقدار از {{htmlattrxref ("تکمیل خودکار"، "ورودی")}} نسبت به </font></font><code><font><font>فعال</font></font></code><font><font> غیر فعال کردن این ویژگی. </font><font>این کار حتی زمانی که {{htmlattrxref ("تکمیل خودکار"، "ورودی")}} ویژگی به طور معمول به {{روی HTMLElement ("ورودی")}} به موجب آن {{htmlattrxref ("نوع"، "ورودی صدق نمی کند ")}}. </font><font>مشاهده {{اشکال (654072)}}.</font></font></p> + +<p><font><font>شروع در مارمولک خانگی 9.0 {{geckoRelease ("9.0")}}، فایرفاکس برای آندروید کاربران امکان می دهد ضبط تصاویر با استفاده از دوربین خود و ارسال آنها، بدون نیاز به مرورگر را ترک کنند. </font><font>توسعه دهندگان وب می توانید این ویژگی را به سادگی مشخص تنظیم اجرای </font></font><code><font><font>شرایط</font></font></code><font><font> مقدار ویژگی به "تصویر / *" در خود </font></font><code><font><font>فایل</font></font></code><font><font> ورودی، مثل این:</font></font></p> + +<p><code><font><font><ورودی نوع = "فایل" شرایط = "تصویر / *"></font></font></code></p> + +<p><font><font>فایرفاکس برای آندروید مجموعه به طور پیش فرض {{cssxref ("تصویر پس زمینه")}} شیب در همه </font></font><code><font><font>نوع = "متن"</font></font></code><font><font> ، </font></font><code><font><font>نوع = "فایل"</font></font></code><font><font> ، </font></font><code><font><font>نوع = "را فشار دهید"</font></font></code><font><font> ، و </font></font><code><font><font>نوع = "ارسال"</font></font></code><font><font> ورودی. </font><font>این را می توان با استفاده از غیرفعال </font></font><code><font><font>تصویر پس زمینه: هیچ کدام</font></font></code><font><font> .</font></font></p> + +<p><font><font>فایرفاکس برای آندروید همچنین مجموعه به طور پیش فرض {{cssxref ("مرز")}} در تمام </font></font><code><font><font><ورودی نوع = "فایل"></font></font></code><font><font> عناصر.</font></font></p> + +<h4 id="محلی_کردن"><font><font>محلی کردن</font></font></h4> + +<p><font><font>ورودی مجاز برای برخی از <ورودی> انواع در منطقه بستگی دارد. </font><font>در برخی از مناطق، 1،000.00 یک شماره تلفن معتبر است، در حالی که در دیگر مناطق راه معتبر برای ورود به این تعداد 1.000،00 است.</font></font></p> + +<p><font><font>فایرفاکس با استفاده از فن آوری هوشمند زیر برای تعیین مکان به اعتبار ورودی کاربر (حداقل برای نوع = "تعداد"):</font></font></p> + +<ul> + <li><font><font>سعی کنید به زبان مشخص شده توسط 'زبان' / 'XML: زبان' ویژگی در عنصر یا هر یک از پدر و مادر خود را.</font></font></li> + <li><font><font>سعی کنید به زبان مشخص شده توسط هر هدر HTTP Content-زبان و یا</font></font></li> + <li><font><font>اگر هیچ موردی مشخص، استفاده از زبان مرورگر.</font></font></li> +</ul> + +<h2 id="همچنین_ببینید"><font><font>همچنین ببینید</font></font></h2> + +<ul> + <li><font><font>دیگر عناصر مرتبط با فرم: {{روی HTMLElement ("فرم")}}، {{روی HTMLElement ("را فشار دهید")}}، {{روی HTMLElement ("کنترل DataList")}}، {{روی HTMLElement ("افسانه")}}، {{روی HTMLElement ("برچسب")}}، {{روی HTMLElement ("انتخاب کنید")}}، {{روی HTMLElement ("optgroup")}}، {{روی HTMLElement ("گزینه")}}، {{روی HTMLElement ("ناحیه ی متن ")}}، {{روی HTMLElement (" کرک ")}}، {{روی HTMLElement (" از فیلدها ")}}، {{روی HTMLElement (" خروجی ")}}، {{روی HTMLElement (" پیشرفت ")}} و { {روی HTMLElement ("متر")}}.</font></font></li> + <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text"><font><font>صلیب مرورگر متن حفره یا سوراخ HTML5</font></font></a></li> +</ul> + +<p><font><font>{{HTMLRef}}</font></font></p> diff --git a/files/fa/web/html/global_attributes/id/index.html b/files/fa/web/html/global_attributes/id/index.html new file mode 100644 index 0000000000..c57e277c10 --- /dev/null +++ b/files/fa/web/html/global_attributes/id/index.html @@ -0,0 +1,67 @@ +--- +title: شناسه +slug: Web/HTML/Global_attributes/id +translation_of: Web/HTML/Global_attributes/id +--- +<div dir="rtl">{{HTMLSidebar("Global_attributes")}}</div> + +<div dir="rtl"><strong><code>id</code> {{glossary("global attribute")}} (صفت سراسری <code>id</code>)</strong> شناسه (ID) ایست که باید در تمام سند بیهمتا باشد. هدف آن شناسایی عنصری خاص به هنگام پیوند دادن (با استفاده از <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment">شناسهی تکه</a>)، اسکریپتنویسی، یا طراحی ( با {{glossary("CSS")}}) است.</div> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<div class="blockIndicator warning"> +<p dir="rtl">مقدار این صفت یک رشتهی مبهم است، به این معنی که نویسندگان وب نباید از آن برای رساندن اطلاعاتی که برای انسان قابل خواندن است استفاده کنند.</p> +</div> + +<p dir="rtl">مقدار <code>id</code> نباید حاوی {{glossary("whitespace")}} (فاصلهها، تبها و مانند آن) باشد. در شناسه هایی که حاوی فاصلهی سفید (whitespace) هستند، مرورگرها فاصلهی سفید را بخشی از شناسه در نظر میگیرند. برخلاف صفت {{htmlattrxref("class")}}، که مقادیر جداشده با فاصله را مجاز میداند، عنصرها تنها میتوانند یک مقدار شناسه داشته باشند. </p> + +<div class="blockIndicator note"> +<p dir="rtl"><strong>پانویس: </strong>استفاده از کاراکترهایی بجز حروف {{glossary("ASCII")}} (اسکی)، ارقام، <code>'_'</code>، <code>'-'</code> و <code>'.'</code> ممکن است موجب مشکلات سازگاری شود؛ چون در HTML 4 مجاز نبودند. اگرچه این محدودیت در{{glossary("HTML5")}} برداشته شدهاست؛ برای سازگاری، شناسه باید با حرف آغاز شود.</p> +</div> + +<h2 id="مشخصات">مشخصات</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">مشخصه</th> + <th scope="col">وضعیت</th> + <th scope="col">توضیح</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, now accept <code>'_'</code>, <code>'-'</code> and <code>'.'</code> if not at the beginning of the id. It is also a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="سازگاری_مرورگر">سازگاری مرورگر</h2> + + + +<p>{{Compat("html.global_attributes.id")}}</p> + +<h2 id="همچنین_ببینید">همچنین ببینید</h2> + +<ul> + <li>.همهی <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">صفتهای سراسری</a></li> + <li>{{domxref("Element.id")}} که بازتاب کنندهی این صفت است.</li> +</ul> diff --git a/files/fa/web/html/global_attributes/index.html b/files/fa/web/html/global_attributes/index.html new file mode 100644 index 0000000000..067b89b21c --- /dev/null +++ b/files/fa/web/html/global_attributes/index.html @@ -0,0 +1,201 @@ +--- +title: Global attributes +slug: Web/HTML/Global_attributes +tags: + - Attribute + - HTML + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/HTML/Global_attributes +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong>Global attributes</strong> are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.</p> + +<p>Global attributes may be specified on all <a href="/en-US/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <code><foo hidden>...</foo></code>, even though <code><foo></code> is not a valid HTML element.</p> + +<p>In addition to the basic HTML global attributes, the following global attributes also exist:</p> + +<ul> + <li>{{HTMLAttrDef("xml:lang")}} and {{HTMLAttrDef("xml:base")}} — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.</li> + <li>The multiple <code><strong><a href="/en-US/docs/Web/Accessibility/ARIA">aria-*</a></strong></code> attributes, used for improving accessibility.</li> + <li>The <a href="/en-US/docs/Web/Guide/Events/Event_handlers">event handler</a> attributes: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="List_of_global_attributes">List of global attributes</h2> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">{{HTMLAttrDef("accesskey")}}</a></dt> + <dd>Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/autocapitalize">{{HTMLAttrDef("autocapitalize")}}</a></dt> + <dd>Controls whether and how text input is automatically capitalized as it is entered/edited by the user. It can have the following values: + <ul> + <li><code>off</code> or <code>none</code>, no autocapitalization is applied (all letters default to lowercase)</li> + <li><code>on</code> or <code>sentences</code>, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase</li> + <li><code>words</code>, the first letter of each word defaults to a capital letter; all other letters default to lowercase</li> + <li><code>characters</code>, all letters should default to uppercase</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/class">{{HTMLAttrDef("class")}}</a></dt> + <dd>A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the <a href="/en-US/docs/Web/CSS/Class_selectors">class selectors</a> or functions like the method {{DOMxRef("Document.getElementsByClassName()")}}.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">{{HTMLAttrDef("contenteditable")}}</a></dt> + <dd>An enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values: + <ul> + <li><code>true</code> or the <em>empty string</em>, which indicates that the element must be editable;</li> + <li><code>false</code>, which indicates that the element must not be editable.</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu">{{HTMLAttrDef("contextmenu")}}{{Obsolete_Inline}}</a></dt> + <dd>The <code><a href="#attr-id"><strong>id</strong></a></code> of a {{HTMLElement("menu")}} to use as the contextual menu for this element.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">{{HTMLAttrDef("data-*")}}</a></dt> + <dd>Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the <a href="/en-US/docs/Web/HTML">HTML</a> and its {{glossary("DOM")}} representation that may be used by scripts. All such custom data are available via the {{DOMxRef("HTMLElement")}} interface of the element the attribute is set on. The {{DOMxRef("HTMLElement.dataset")}} property gives access to them.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/dir">{{HTMLAttrDef("dir")}}</a></dt> + <dd>An enumerated attribute indicating the directionality of the element's text. It can have the following values: + <ul> + <li><code>ltr</code>, which means <em>left to right </em>and is to be used for languages that are written from the left to the right (like English);</li> + <li><code>rtl</code>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li> + <li><code>auto</code>, which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then it applies that directionality to the whole element.</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/draggable">{{HTMLAttrDef("draggable")}}</a></dt> + <dd>An enumerated attribute indicating whether the element can be dragged, using the <a href="/en-us/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: + <ul> + <li><code>true</code>, which indicates that the element may be dragged</li> + <li><code>false</code>, which indicates that the element may not be dragged.</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/dropzone">{{HTMLAttrDef("dropzone")}}</a> {{deprecated_inline}}</dt> + <dd>An enumerated attribute indicating what types of content can be dropped on an element, using the <a href="/en-US/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: + <ul> + <li><code>copy</code>, which indicates that dropping will create a copy of the element that was dragged</li> + <li><code>move</code>, which indicates that the element that was dragged will be moved to this new location.</li> + <li><code>link</code>, will create a link to the dragged data.</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/exportparts">{{HTMLAttrDef("exportparts")}}</a> {{Experimental_Inline}}</dt> + <dd>Used to transitively export shadow parts from a nested shadow tree into a containing light tree.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">{{HTMLAttrDef("hidden")}}</a></dt> + <dd>A Boolean attribute indicates that the element is not yet, or is no longer, <em>relevant</em>. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/id">{{HTMLAttrDef("id")}}</a></dt> + <dd>Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/inputmode">{{HTMLAttrDef("inputmode")}}</a></dt> + <dd>Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Used primarily on {{HTMLElement("input")}} elements, but is usable on any element while in {{HTMLAttrxRef("contenteditable")}} mode.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/is">{{HTMLAttrDef("is")}}</a></dt> + <dd>Allows you to specify that a standard HTML element should behave like a registered custom built-in element (see <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a> for more details).</dd> +</dl> + +<div class="note"> +<p><strong>Note: </strong>The <code>item*</code> attributes are part of the <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">WHATWG HTML Microdata feature</a>.</p> +</div> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/itemid">{{HTMLAttrDef("itemid")}}</a></dt> + <dd>The unique, global identifier of an item.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">{{HTMLAttrDef("itemprop")}}</a></dt> + <dd>Used to add properties to an item. Every HTML element may have an <code>itemprop</code> attribute specified, where an <code>itemprop</code> consists of a name and value pair.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/itemref">{{HTMLAttrDef("itemref")}}</a></dt> + <dd>Properties that are not descendants of an element with the <code>itemscope</code> attribute can be associated with the item using an <code>itemref</code>. It provides a list of element ids (not <code>itemid</code>s) with additional properties elsewhere in the document.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">{{HTMLAttrDef("itemscope")}}</a></dt> + <dd><code>itemscope</code> (usually) works along with {{HTMLAttrxRef("itemtype")}} to specify that the HTML contained in a block is about a particular item. <code>itemscope</code> creates the Item and defines the scope of the <code>itemtype</code> associated with it. <code>itemtype</code> is a valid URL of a vocabulary (such as <a class="external external-icon" href="https://schema.org/">schema.org</a>) that describes the item and its properties context.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">{{HTMLAttrDef("itemtype")}}</a></dt> + <dd>Specifies the URL of the vocabulary that will be used to define <code>itemprop</code>s (item properties) in the data structure. {{HTMLAttrxRef("itemscope")}} is used to set the scope of where in the data structure the vocabulary set by <code>itemtype</code> will be active.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/lang">{{HTMLAttrDef("lang")}}</a></dt> + <dd>Helps define the language of an element: the language that non-editable elements are in, or the language that editable elements should be written in by the user. The attribute contains one “language tag” (made of hyphen-separated “language subtags”) in the format defined in <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a>. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> has priority over it.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/part">{{HTMLAttrDef("part")}}</a></dt> + <dd>A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the {{CSSxRef("::part")}} pseudo-element.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/slot">{{HTMLAttrDef("slot")}}</a></dt> + <dd>Assigns a slot in a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> shadow tree to an element: An element with a <code>slot</code> attribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose {{HTMLAttrxRef("name", "slot")}} attribute's value matches that <code>slot</code> attribute's value.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/spellcheck">{{HTMLAttrDef("spellcheck")}}</a></dt> + <dd>An enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values: + <ul> + <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> + <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/style">{{HTMLAttrDef("style")}}</a></dt> + <dd>Contains <a href="/en-US/docs/Web/CSS">CSS</a> styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{HTMLElement("style")}} element have mainly the purpose of allowing for quick styling, for example for testing purposes.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">{{HTMLAttrDef("tabindex")}}</a></dt> + <dd>An integer attribute indicating if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values: + <ul> + <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li> + <li><code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li> + <li>a <em>positive value</em> means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the <a href="#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative positions in the document.</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/title">{{HTMLAttrDef("title")}}</a></dt> + <dd>Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/translate">{{HTMLAttrDef("translate")}}</a> {{Experimental_Inline}}</dt> + <dd>An enumerated attribute that is used to specify whether an element's attribute values and the values of its {{DOMxRef("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values: + <ul> + <li>empty string and <code>yes</code>, which indicates that the element will be translated.</li> + <li><code>no</code>, which indicates that the element will not be translated.</li> + </ul> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS Shadow Parts", "#exposing")}}</td> + <td>{{Spec2("CSS Shadow Parts")}}</td> + <td>Added the <code>part</code> and <code>exportparts</code> global attributes.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5.1")}}, <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, and <code>itemtype</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5 W3C")}}, <code>contextmenu</code>, <code>draggable</code>, <code>dropzone</code>, and <code>spellcheck</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, and <code>title</code> are now true global attributes.<br> + <code>xml:lang</code> which was initially part of XHTML, is now also part of HTML.<br> + <code>hidden</code>, <code>data-*</code>, <code>contenteditable</code>, and <code>translate</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br> + <code>class</code> and <code>style</code> are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>dir</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>id</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>lang</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>tabindex</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br> + <code>accesskey</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.<br> + <code>title</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.global_attributes")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{DOMxRef("Element")}} and {{DOMxRef("GlobalEventHandlers")}} interfaces that allow to query most global attributes.</li> +</ul> diff --git a/files/fa/web/html/index.html b/files/fa/web/html/index.html new file mode 100644 index 0000000000..5d9c861feb --- /dev/null +++ b/files/fa/web/html/index.html @@ -0,0 +1,64 @@ +--- +title: HTML +slug: Web/HTML +tags: + - HTML + - HTML5 + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary" dir="rtl"><span class="seoSummary">HTML </span>(زبان نشانه گذاری متنی مضاعف یا Hyper Text Markup Languge) بوده و <span class="seoSummary">نخستین زبانی است که برای ساخت بخش های مختلف وب استفاده می شود.. آن برای معنادادن و ساختاربندی کردن محتوای وب به کار می رود. فناوریهایی دیگری در صفحات وب در کنار HTML به کار گرفته می شوند تا ظاهر یا نحوه نمایش یک صفحه وب (مانند CSS) یا عملکرد/رفتار آن (مانندJavaScript) را ایجاد و کنترل کنند.</span></p> + +<p dir="rtl"><span class="seoSummary">"متن مضاعف یا همان Hyper text" به اتصال صفحات وب به هم، اتصال بخش های یک صفحه وب به یکدیگر و یا در نگاه بالاتر اتصال چندین وب سایت به یکدیگر اشاره دارد. لینک ها یکی از بنیادی ترین بخش های وبسایت ها هستند. با با بارگذاری محتواهایتان بر روی وب و سپس اضافه کردن لینک های معنادار بین آن ها شما یکی از اصول اساسی در مشارکت فعال دنیای وب را به اجرا درآورده اید. </span></p> + +<p dir="rtl"><span class="seoSummary">زبان HTML از «نشانه گذاری یا Markup» برای تعریف نوشته، تصویر و یا دیگر محتواها در یک مرورگر وب استفاده می کند. نشانه گذاریی که در زبان HTML به کار می رود از «عناصر یا ELement ها ویژه ای مانند:</span></p> + +<p dir="rtl" style="direction: ltr;"> {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}</p> + +<p dir="rtl">و موارد بسیار دیگر استفاده می کند..</p> + +<p dir="rtl">عناصر HTML با استفاده از «تگ ها Tage» از متن های ساده نوشتاری جدا می شوند، این عناصر با یک جفت علامت شکسته «<» و «>» احاطه می شوند. نام عناصر در میان این تگ ها وارد می شوند و مهم نیست که با حروف بزرگ و یا کوچک نوشته شوند. به همین خاطر می توان آن ها را به صورت با حروف کوچک و یا حروف بزرگ نوشت. برای مثال تگ <title> می تواند به صورت <Title> ، <TITLE> و یا هر شکل دیگری نوشته شود.</p> + +<p dir="rtl">در مقالات زیر می تواند مطالب بیشتری را درباره HTML بخوانید و بیاموزید.</p> + +<ul class="card-grid" dir="rtl"> + <li> + <h2 id="معرفی_HTML">معرفی HTML</h2> + + <p>اگر به تازگی برنامه نویسی وب را شروع کرده این بخش می تواند به شما کمک کند که بهتر با <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">اصول HTML</a> آشنا شوید.</p> + </li> + <li> + <h2 id="آموزش_HTM"><span>آموزش HTM</span></h2> + + <p><span>در این قسمت مقالاتی ارائه شده است که به شما استفاده کردن از HTML و تگ های آن را یاد می دهد همچنین در کنار آن ها آموزش ها و مثال هایی نیز آمده شده است که می تواند به شناخت<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML"> زمینه HTML</a> کمک شایانی برایتان فراهم آورد.</span></p> + </li> + <li><span>منابع HTML</span> + <p>در <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference">مراجع متعدد</a> می توانید انبوهی از مطالب مفید درباره عناصر را بیابید که هر کدام از این مقالات نیز دارای زیرمجموعه های مفصلی هستند. در کنار آن <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Link_types">لینک</a> هایی قرار داشته است که شما را به مطالب مرتبط راهنمایی می کند.</p> + </li> +</ul> + +<div class="row topicpage-table" dir="rtl"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">منابع</h2> + +<p>{{SubpagesWithSummaries}}</p> + +<p><a href="https://developer.mozilla.org/en-US/docs/tag/HTML" title="Article tagged: HTML"><span class="alllinks">نمایش همه...</span></a></p> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">راهنمایی ها و آموزشها</h2> + +<dl> + <dt>راهنمای توسعه دهندهی HTML</dt> + <dd>مقالههای MDN تکنیکهای خاصی که در هنگام ساخت محتوی وب با HTML میتوانید استفاده کنید، همچنین آموزشها و اصولی که ممکن است برای شما مفید باشند را نمایش میدهند.</dd> +</dl> +</div> +</div> + +<p dir="rtl"></p> diff --git a/files/fa/web/html/tips_for_authoring_fast-loading_html_pages/index.html b/files/fa/web/html/tips_for_authoring_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..94048c4ba7 --- /dev/null +++ b/files/fa/web/html/tips_for_authoring_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 +--- +<p dir="rtl">نکات زیر بر اساس دانش و تجربه به دست آمدهاند.</p> +<p dir="rtl">یک صفحهی وب بهینه نه تنها برای مخاطبهای شما تعاملیتر است، بلکه روی وبسرور و اتصال اینترنت شما نیز تاثیرگذار است. این امر میتواند برای سایتهایی که ترافیک بالایی دارند مانند سایتهای خبری، مسالهای اساسی باشد.</p> +<p dir="rtl">بهینهسازی عملکرد یک صفحه فقط برای کاربران با اینترنت کم سرعت مطرح نیست. بلکه برای آن دسته از کاربران با اینترنت پرسرعت نیز تاثیر به سزایی دارد.</p> +<h2 dir="rtl" id="Tips" name="Tips">نکتهها</h2> +<h3 dir="rtl" id="Reduce_page_weight" name="Reduce_page_weight">کاهش دادن وزن صفحه</h3> +<p dir="rtl">وزن صفحه، یکی از مهمترین فاکتورهای بارگیری یک صفحه است.</p> +<p dir="rtl">کاهش وزن صفحه به این معنا است که با حذف کردن جاهای خالی و خطوط کمکی (comment) و با انتقال اسکریپتها و برگههای سبک سلسلهمراتبی به فایلهای خارجی، سرعت بارگیری صفحه را تا حد امکان افزایش دهیم.</p> +<p dir="rtl">ابزاری مانند <a href="http://tidy.sourceforge.net/" title="http://tidy.sourceforge.net/">HTML Tidy</a> میتوانند به صورت خودکار جاهای خالی اضافی را از یک سند HTML حذف کنند. ابزار دیگری نیز وجود دارند که فایلهای جاوااسکریپت را با تکنیکهای فشردهسازی، فشرده کرده و با کاهش حجم آنها باعث افزایش سرعت بارگیری صفحه میشوند.</p> +<h3 dir="rtl" id="Minimize_the_number_of_files" name="Minimize_the_number_of_files">کاهش تعداد فایلها</h3> +<p dir="rtl">با کاهش یافتن تعداد فایلهای مورد نیاز یک صفحه، تعداد درخواستهای <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP</a> جهت بارگیری صفحه نیز کاهش مییابد.</p> +<p dir="rtl">بسته به تنظیمات حافظهی نهان مرورگر، ممکن است درخواست <code>If-Modified-Since</code> به وبسرور برای هر فایل CSS، جاوااسکریپت یا تصویر فرستاده شود که در آن مشخص میشود آیا فایل نسبت به آخرین باری که دانلود شده، تغییر کرده است یا خیر.</p> +<p dir="rtl">با کاهش تعداد فایلهایی که در یک صفحه به آنها ارجاع داده میشود، تعداد درخواستها به سرور و پاسخهایی که از سرور ارسال میشود نیز کاهش مییابد.</p> +<p dir="rtl">اگر از تصاویر پسزمینه در فایل CSS خود به نسبت زیادی استفاده میکنید میتوانید با استفاده از تکینیکی به نام image sprite این تصاویر را با هم ترکیب کنید تا تعداد درخواستهای ارسالی به سرور کاهش یابد. تنها کافی است با تغییر موقعیت تصویر در صفحه نحوهی نمایش آن را در حالتهای مختلف تنظیم کنید. این تکنیک برای عنصرهایی که ابعاد محدودی در صفحه دارند به خوبی کار میکند. اگرچه تعداد درخواستهای http کمتر و cache کردن هر تصویر نیز میتواند به عنوان راه حل جایگزین مطرح باشد.</p> +<p dir="rtl">زمان زیادی که صرف میشود تا آخرین تاریخ تغییر یک فایل مشخص شود، میتواند منجر به تاخیر در نمایش اولیه از یک صفحه شود، چرا که مرورگر قبل از اینکه صفحه را پردازش کند باید زمان تغییر یا modification هر فایل CSS یا جاوااسکریپت را بررسی کند.</p> +<h3 dir="rtl" id="Reduce_domain_lookups" name="Reduce_domain_lookups">کاهش تعداد ارجاعها به دامنههای مختلف</h3> +<p dir="rtl">از آنجایی که هر دامنهی منحصر به فرد در فرآیند DNS Lookup هزینهی زمانی دارد، زمان بارگذاری صفحه با توجه به تعداد دامنههای مختلف در فایلهای CSS ،جاوااسکریپت و تصویرها افزایش مییابد.</p> +<p dir="rtl">با این حال همیشه به یاد داشته باشید تا آنجا که ممکن است از حداقل تعداد دامنههای مختلف در صفحات سایت استفاده کنید.</p> +<h3 dir="rtl" id="Cache_reused_content" name="Cache_reused_content">محتوای کاربردی را Cache کنید</h3> +<p dir="rtl">اطمینان یابید هر محتوایی که قابل cache شدن است، این اتفاق برایش افتاده باشد و زمان پایانی cache نیز دارا باشد.</p> +<p dir="rtl">در حقیقت باید به فایل سرآیند (header) با نام <code>Last-Modified</code> توجه خاصی داشت. کار این فایل ذخیرهسازی آخرین زمانی است که به صفحات ثابت (<code>html و css و ...</code>) از طریق user agent یا همان مرورگر بر اساس زمان موجود در وب سرور، ارجاع شده است. البته این موضوع در رابطه با صفحات پویا (php و aspx و ...) اتفاق نمیافتد، یعنی این فایل سرآیند ارسال نمیشود.</p> +<p dir="rtl">دربارهی صفحاتی که به صورت پویا ایجاد میشوند، اندکی تحقیق در این باره میتواند بسیار مفید باشد. با استفاده از پیوندهای زیر اطلاعات بیشتری دربارهی cache کردن صفحات پویا کسب کنید:</p> +<ol dir="rtl"> + <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li> + <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> + <li><a class="external" href="http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html">On HTTP Last-Modified and ETag</a></li> +</ol> +<h3 dir="rtl" id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">ترتیب بهینهی اجزای تشکیل دهندهی صفحه</h3> +<p dir="rtl">ابتدا محتوای صفحه بارگذاری شود، همراه با هرفایل CSS یا JavaScript که در نمایش اولیهی آن تاثیر دارد، تا کاربر بتواند در کوتاهترین زمان ممکن به محتوای صفحه دسترسی داشته باشد. این محتوا معمولا از متن تشکیل میشود که در زمان کوتاهی میتواند در اختیار کاربر قرار گیرد.</p> +<p dir="rtl">هرگونه ویژگی پویا که پس از بارگذاری کامل صفحه مورد نیاز هستند، در مرحلهی اول باید غیرفعال گردد و تنها زمانی فعال شود که تمام محتوای صفحه بارگذاری شده باشد. از جملهی این ویژگیها میتوان به فایلهای JavaScript اشاره کرد که در انتهای سند قرار میگیرند که این امر موجب بارگذاری سریع صفحات میشود.</p> +<h3 dir="rtl" id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">کاهش تعداد اسکریپتهای برخط (inline)</h3> +<p dir="rtl">این نوع اسکریپتها میتوانند زمان زیادی را به خود اختصاص دهند، چرا که parser باید در نظر بگیرد که یک اسکریپت برخط میتواند ساختار صفحه را هنگامی که خود صفحه در حال parse شدن است، تغییر دهد. کاهش تعداد این اسکریپتها به صورت عمومی، و کاهش استفاده از <code>document.write</code> به صورت اختصاصی، میتواند منجر به افزایش سرعت در بارگذاری صفحات شود. همچنین استفاده از روشهای پیشرفته در <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a> جهت تغییر در محتوای صفحه به جای استفاده از <code>document.write</code> توصیه میشود.</p> +<h3 dir="rtl" id="Use_modern_CSS_and_valid_markup" name="Use_modern_CSS_and_valid_markup">استفاده از CSS پیشرفته و عنصرهای معتبر</h3> +<p dir="rtl">استفاده از CSS به صورت صحیح میتواند تعداد عنصرهای مورد نیاز در صفحه را به شکل قابل ملاحظهای کاهش دهد. از جمله این تکنیکها میتوان به جایگزین کردن برخی تصاویر (که به spacer معروف هستند) با معادل CSS آنها جهت قالببندی صفحه اشاره کرد.</p> +<p dir="rtl">استفاده از عنصرهای معتبر نیز مزایای خود را دارد. اول از همه، مرورگرها دیگر نیازی ندارند تا فرآیند بررسی خطا در کد HTML را انجام دهند. ((البته این موضوع با بحث فلسفی آن که ابتدا کاربر محتوای خود را وارد میکند سپس به صورت منطقی فرآیند بررسی آن محتوا آغار میشود، متفاوت است)).</p> +<p dir="rtl">به علاوه، استفاده از عنصرهای معتبر این امکان را در اختیار سایر ابزار میگذارد تا صفحات سایت شما را بررسی (<em>pre-process</em>) کنند. برای نمونه، <a href="http://tidy.sourceforge.net/" title="http://tidy.sourceforge.net/">HTML Tidy</a> میتواند فضای خالی در صفحات و تگهای پایانی اختیاری را حذف کند; اگرچه این ابزار در صفحاتی که دارای خطاهای بسیار در عنصرها باشند، اجرا نمیشود.</p> +<h3 dir="rtl" id="Chunk_your_content" name="Chunk_your_content">محتوا را طبقهبندی کنید</h3> +<p dir="rtl">استفاده از جدولها در قالببندی صفحات یک روش منسوخ است که دیگر نباید استفاده شود. در عوض از عنصر {{ HTMLElement("div") }} و در آیندهی نزدیک از <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="/en-US/docs/CSS/Using_CSS_multi-column_layouts">ساختار چند ستونی CSS3</a> یا <a href="/en-US/docs/Using_flexbox" title="/en-US/docs/Using_flexbox">ساختار منعطف جعبهای CSS3</a> باید استفاده شود.</p> +<p dir="rtl">جدولها هنوز هم به عنوان عنصرهای معتبر در صفحه شناخته میشوند اما تنها باید برای نمایش دادههای جدولی استفاده گردند. برای این که مرورگرها صفحهی شما را سریعتر پردازش کنند باید از جدولهای تودرتو خودداری کنید.</p> +<p dir="rtl">به جای اینکه از ساختاری مانند این استفاده کنید:</p> +<pre><TABLE> + <TABLE> + <TABLE> + ... + </TABLE> + </TABLE> +</TABLE></pre> +<p dir="rtl">در عوض از جدولهایی که جداگانه هستند یا divها استفاده کنید.</p> +<pre><TABLE>...</TABLE> +<TABLE>...</TABLE> +<TABLE>...</TABLE> +</pre> +<p dir="rtl">همچنین میتوانید مستندات <a href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Layout</a> یا <a href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">CSS3 Flexible Box Layout</a> را مشاهده کنید.</p> +<h3 dir="rtl" id="Specify_sizes_for_images_and_tables" name="Specify_sizes_for_images_and_tables">مشخص کردن اندازهی تصویرها و جدولها</h3> +<p dir="rtl">اگر مرورگر به محض دریافت تصویر یا جدول بتواند اندازهی آن را تشخیص دهد، این امر موجب نمایش هر چه بهتر محتوای صفحه در زمان بارگذاری خواهد شد. به همین منظور استفاده از <code>height</code> و <code>width</code> برای تصویرها در هر جایی که ممکن است باید استفاده گردند.</p> +<p dir="rtl">برای جدولها نیز میتوان از قطعه کد CSS زیر استفاده کرد:</p> +<pre> table-layout: fixed; +</pre> +<p dir="rtl">همچنین باید از تگهای <code>COL</code> و <code>COLGROUP</code> برای مشخص کردن عرض جدولهای استفاده کرد.</p> +<h3 dir="rtl" id="Choose_your_user-agent_requirements_wisely" name="Choose_your_user-agent_requirements_wisely">حداقل محدودیتهای مرورگر را در نظر بگیرید</h3> +<p dir="rtl">برای اینکه صفحهی شما در مرورگرهای مختلف با کمترین اختلاف ممکن نمایش داده شود، اطمینان یابید که حداقل استانداردهای مورد نیاز مرورگرها در پروژههایتان رعایت شده باشند. این بدان معنا نیست که محتوای شما باید در تمامی مرورگرها دقیقا به یک شکل نمایش یابد، به خصوص مرورگرهای قدیمی.</p> +<p dir="rtl">در حقیقت، حداقل پیشنیازهای شما باید منطبق با مرورگرهای پیشرفتهای باشند که استانداردهای وب را رعایت میکنند که این مرورگرها شامل Firefox 3.6 به بالا برای تمامی پلتفرمها، Internet Explorer 8 به بالا در ویندوز، Opera 10 به بالا در ویندوز و Safari 4 به بالا در Mac OS X هستند.</p> +<p dir="rtl">اگرچه، بسیاری از نکاتی که در این مقاله فهرست شدهاند، تکنیکهای عمومی هستند که میتوان برای هر مرورگری و برای هر صفحهی وب به کار برد، جدا از پشتیبانی مرورگرها.</p> +<h2 dir="rtl" id="Example_page_structure" name="Example_page_structure">ساختار صفحهی مورد نظر ما</h2> +<p>· <code>HTML</code></p> +<dl> + <dd> + · <code>HEAD</code></dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>LINK </code>...</dd> + <dd dir="rtl"> + فایلهای CSS که جهت نمایش صفحه مورد نیاز هستند. تعداد این فایلها را پایین نگه دارید تا عملکرد صفحه افزایش یابد. همچنین میتوان سایر فایلهای CSS نامربتط با این صفحه را در فایلهای دیگر قرار داد.</dd> + </dl> + </dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>SCRIPT </code>...</dd> + <dd dir="rtl"> + فایلهای JavaScript که <strong>موردنیاز</strong> توابعی هستند که در زمان بارگذاری صفحه فراخوانی میشوند. تعداد این فایلها را جهت عملکرد بهتر صفحه، پایین نگه دارید.</dd> + </dl> + </dd> +</dl> +<dl> + <dd> + · <code>BODY</code></dd> + <dd dir="rtl"> + محتوای مورد نظر صفحه که در قالب جدولها یا divها گردآوری شدهاند. این محتوا میتواند جدا از سایر اجزای صفحه نمایش یابد.</dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>SCRIPT </code>...</dd> + <dd dir="rtl"> + هر اسکریپتی که در ساختار صفحه (DHTML) تغییر ایجاد میکند. این اسکریپتها میتوانند پس از بارگذاری تمام صفحه و نمایش محتوا به کاربر، اجرا شوند. بنابراین دلیلی ندارد که بارگذاری آنها قبل از محتوا صورت گیرد که در این صورت نمایش محتوا به کاربر با تاخیر همراه میشود.</dd> + <dd dir="rtl"> + اگر تصویری جهت حرکتهای rollover در نظر گرفتهاید، باید در این قسمت از صفحه preload یا پیشبارگذاری شوند، جایی که محتوای صفحه قبل از آن نمایش داده شده است.</dd> + </dl> + </dd> +</dl> +<h2 dir="rtl" id="Related_Links" name="Related_Links">پیوندهای مرتبط</h2> +<ul> + <li dir="rtl">کتاب: <a href="http://www.websiteoptimization.com/" title="http://www.websiteoptimization.com/">"Speed Up Your Site" نوشتهی Andy King</a></li> + <li dir="rtl"><a href="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html" title="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html">آموزش بهینهسازی سایت</a> (WebMonkey)</li> + <li dir="rtl">مقالهی عالی و کامل <a href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> از (Yahoo)</li> +</ul> +<div class="originaldocinfo"> + <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + <ul> + <li>Author(s): Bob Clary, Technology Evangelist, Netscape Communications</li> + <li>Last Updated Date: Published 04 Apr 2003</li> + <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>Note: This reprinted article was originally part of the DevEdge site.</li> + </ul> +</div> +<p> </p> diff --git a/files/fa/web/html/افزودن_رنگ/index.html b/files/fa/web/html/افزودن_رنگ/index.html new file mode 100644 index 0000000000..99f2d980cf --- /dev/null +++ b/files/fa/web/html/افزودن_رنگ/index.html @@ -0,0 +1,502 @@ +--- +title: اضافه کردن رنگ به عناصر با استفاده از سی اس اس +slug: Web/HTML/افزودن_رنگ +translation_of: Web/HTML/Applying_color +--- +<div>{{HTMLRef}}</div> + +<p>The use of color is a fundamental form of human expression. Children experiment with color before they even have the manual dexterity to draw. Maybe that's why color is one of the first things people often want to experiment with when learning to develop web sites. <span class="seoSummary">With <a href="/en-US/docs/Web/CSS">CSS</a>, there are lots of ways to add color to your <a href="/en-US/docs/Web/HTML">HTML</a> <a href="/en-US/docs/Web/HTML/Element">elements</a> to create just the look you want. This article is a primer introducing each of the ways CSS color can be used in HTML.</span></p> + +<p>Fortunately, adding color to your HTML is actually really easy to do, and you can add color to nearly anything.</p> + +<p>We're going to touch on most of what you'll need to know when using color, including a {{anch("Things that can have color", "list of what you can color and what CSS properties are involved")}}, {{anch("How to describe a color", "how you describe colors")}}, and how to actually {{anch("Using color", "use colors both in stylesheets and in scripts")}}. We'll also take a look at how to {{anch("Letting the user picka color", "let the user pick a color")}}.</p> + +<p>Then we'll wrap things up with a brief discussion of how to {{anch("Using color wisely", "use color wisely")}}: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities.</p> + +<h2 id="Things_that_can_have_color">Things that can have color</h2> + +<p>At the element level, everything in HTML can have color applied to it. Instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. For each, we'll see a list of the CSS properties that apply color to them.</p> + +<p>At a fundamental level, the {{cssxref("color")}} property defines the foreground color of an HTML element's content and the {{cssxref("background-color")}} property defines the element's background color. These can be used on just about any element.</p> + +<h3 id="Text">Text</h3> + +<p>Whenever an element is rendered, these properties are used to determine the color of the text, its background, and any decorations on the text.</p> + +<dl> + <dt>{{cssxref("color")}}</dt> + <dd>The color to use when drawing the text and any <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration">text decorations</a> (such as the addition of under- or overlines, strike-through lines, and so forth.</dd> + <dt>{{cssxref("background-color")}}</dt> + <dd>The text's background color.</dd> + <dt>{{cssxref("text-shadow")}}</dt> + <dd>Configures a shadow effect to apply to text. Among the options for the shadow is the shadow's base color (which is then blurred and blended with the background based on the other parameters). See {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}} to learn more.</dd> + <dt>{{cssxref("text-decoration-color")}}</dt> + <dd>By default, text decorations (such as underlines, strikethroughs, etc) use the <code>color</code> property as their colors. However, you can override that behavior and use a different color for them with the <code>text-decoration-color</code> property.</dd> + <dt>{{cssxref("text-emphasis-color")}}</dt> + <dd>The color to use when drawing emphasis symbols adjacent to each character in the text. This is used primarily when drawing text for East Asian languages.</dd> + <dt>{{cssxref("caret-color")}}</dt> + <dd>The color to use when drawing the {{Glossary("caret")}} (sometimes referred to as the text input cursor) within the element. This is only useful in elements that are editable, such as {{HTMLElement("input")}} and {{HTMLElement("textarea")}} or elements whose HTML {{htmlattrxref("contenteditable")}} attribute is set.</dd> +</dl> + +<h3 id="Boxes">Boxes</h3> + +<p>Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.</p> + +<dl> + <dt>{{anch("Borders")}}</dt> + <dd>See the section {{anch("Borders")}} for a list of the CSS properties you can use to set the colors of a box's borders.</dd> + <dt>{{cssxref("background-color")}}</dt> + <dd>The background color to use in areas of the element that have no foreground content.</dd> + <dt>{{cssxref("column-rule-color")}}</dt> + <dd>The color to use when drawing the line separating columns of text.</dd> + <dt>{{cssxref("outline-color")}}</dt> + <dd>The color to use when drawing an outline around the outside of the element. This outline is different from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). It's generally used as a focus indicator, to show which element will receive input events.</dd> +</dl> + +<h3 id="Borders">Borders</h3> + +<p>Any element can have a <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">border</a> drawn around it. A basic element border is a line drawn around the edges of the element's content. See {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} to learn about the relationship between elements and their borders, and the article <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Styling borders using CSS</a> to learn more about applying styles to borders.</p> + +<p>You can use the {{cssxref("border")}} shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its <a href="/en-US/docs/Web/CSS/border-width">width</a>, <a href="/en-US/docs/Web/CSS/border-style">style</a> (solid, dashed, etc.), and so forth.</p> + +<dl> + <dt>{{cssxref("border-color")}}</dt> + <dd>Specifies a single color to use for every side of the element's border.</dd> + <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}</dt> + <dd>Lets you set the color of the corresponding side of the element's border.</dd> + <dt>{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}</dt> + <dd>With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).</dd> + <dt>{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}</dt> + <dd>These let you color the edges of the border closest to to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the <code>border-inline-start-color</code> is applied to the right side of the border.</dd> +</dl> + +<h3 id="Other_ways_to_use_color">Other ways to use color</h3> + +<p>CSS isn't the only web technology that supports color. There are graphics technologies that are available on the web which also support color.</p> + +<dl> + <dt>The HTML <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></dt> + <dd>Lets you draw 2D bitmapped graphics in a {{HTMLElement("canvas")}} element. See our <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> to learn more.</dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a> (Scalable Vector Graphics)</dt> + <dd>Lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image. SVG commands are formatted as XML, and can be embedded directly into a web page or can be placed in he page using the {{HTMLElement("img")}} element, just like any other type of image.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt> + <dd>The Web Graphics Library is an OpenGL ES-based API for drawing high-performance 2D and 3D graphics on the Web. See <a href="/en-US/docs/Learn/WebGL">Learn WebGL for 2D and 3D</a> graphics to find out more.</dd> +</dl> + +<h2 id="How_to_describe_a_color">How to describe a color</h2> + +<p>In order to represent a color in CSS, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. This is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. As such, there are several ways you can describe color in CSS.</p> + +<p>For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("<color>")}} unit.</p> + +<h3 id="Keywords">Keywords</h3> + +<p>A set of standard color names have been defined, letting you use these keywords instead of numeric representations of colors if you choose to do so and there's a keyword representing the exact color you want to use. Color keywords include the standard primary and secondary colors (such as <code>red</code>, <code>blue</code>, or <code>orange</code>), shades of gray (from <code>black</code> to <code>white</code>, including colors like <code>darkgray</code> and <code>lightgrey</code>), and a variety of other blended colors including <code>lightseagreen</code>, <code>cornflowerblue</code>, and <code>rebeccapurple</code>.</p> + +<p>See {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.</p> + +<h3 id="RGB_values">RGB values</h3> + +<p>There are three ways to represent an RGB color in CSS.</p> + +<h4 id="Hexadecimal_string_notation">Hexadecimal string notation</h4> + +<p>Hexadecimal string notation represents a color using hexadecimal digits to represent each of the color components (red, green, and blue). It may also include a fourth component: the alpha channel (or opacity). Each color component can be represented as a number between 0 and 255 (0x00 and 0xFF) or, optionally, as a number between 0 and 15 (0x0 and 0xF). All components <em>must</em> be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, <code>"#D"</code> becomes <code>"#DD"</code> when drawing.</p> + +<p>A color in hexadecimal string notation always begins with the character <code>"#"</code>. After that come the hexadecimal digits of the color code. The string is case-insensitive.</p> + +<dl> + <dt><code>"#rrggbb"</code></dt> + <dd>Specifies a fully-opaque color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd> + <dt><code>"#rrggbbaa"</code></dt> + <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd> + <dt><code>"#rgb"</code></dt> + <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd> + <dt><code>"#rgba"</code></dt> + <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd> +</dl> + +<p>As an example, you can represent the opaque color bright blue as <code>"#0000ff"</code> or <code>"#00f"</code>. To make it 25% opaque, you can use <code>"#0000ff44"</code> or <code>"#00f4"</code>.</p> + +<h4 id="RGB_functional_notation">RGB functional notation</h4> + +<p>RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function {{cssxref("color_value", "rgb()", "#rgb()")}}. This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel.</p> + +<p>Legal values for each of these parameters are:</p> + +<dl> + <dt><code>red</code>, <code>green</code>, and <code>blue</code></dt> + <dd>Each must be an {{cssxref("<integer>")}} value between 0 and 255 (inclusive), or a {{cssxref("<percentage>")}} from 0% to 100%.</dd> + <dt><code>alpha</code></dt> + <dd>The alpha channel is a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0.</dd> +</dl> + +<p>For example, a bright red that's 50% opaque can be represented as <code>rgb(255, 0, 0, 0.5)</code> or <code>rgb(100%, 0, 0, 50%)</code>.</p> + +<h3 id="HSL_functional_notation">HSL functional notation</h3> + +<p>Designers and artists often prefer to work using the {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) color method. On the web, HSL colors are represented using HSL functional notation. The <code>hsl()</code> CSS function is very similar to the <code>rgb()</code> function in usage otherwise.</p> + +<div style="padding-bottom: 20px;"> +<figure style="width: 500px;"><img alt="HSL color cylinder" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;"> +<figcaption><em><strong>Figure 1. An HSL color cylinder.</strong> Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Image courtesy of user <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> on <a href="https://www.wikipedia.org/">Wikipedia</a>, distributed under the <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> license.</em></figcaption> +</figure> +</div> + +<p>The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any {{cssxref("<angle>")}} unit supported by CSS, including degrees (<code>deg</code>), radians (<code>rad</code>), gradians (<code>grad</code>), or turns (<code>turn</code>). But this doesn't control how vivid or dull, or how bright or dark the color is.</p> + +<p>The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.</p> + +<p>Think of it like creating the perfect paint color:</p> + +<ol> + <li>You start with base paint that's the maximum intensity possible for a given color, such as the most intense blue that can be represented by the user's screen. This is the <strong>hue</strong> (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.</li> + <li>Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). In between values are a literal grey area.</li> + <li>Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.</li> +</ol> + +<p>You can also optionally include an alpha channel, to make the color less than 100% opaque.</p> + +<p>Here are some sample colors in HSL notation:</p> + +<div id="hsl-swatches"> +<div class="hidden"> +<pre class="brush: css">table { + border: 1px solid black; + font: 16px "Open Sans", Helvetica, Arial, sans-serif; + border-spacing: 0; + border-collapse: collapse; +} + +th, td { + border: 1px solid black; + padding:4px 6px; + text-align: left; +} + +th { + background-color: hsl(0, 0%, 75%); +}</pre> + +<pre class="brush: html"><table> + <thead> + <tr> + <th scope="col">Color in HSL notation</th> + <th scope="col">Example</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>hsl(90deg, 100%, 50%)</code></td> + <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(90, 100%, 50%)</code></td> + <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 50%, 75%)</code></td> + <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 90%, 75%)</code></td> + <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 90%, 50%)</code></td> + <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(270deg, 90%, 50%)</code></td> + <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td> + </tr> + </tbody> +</table></pre> +</div> + +<p>{{EmbedLiveSample("hsl-swatches", 300, 260)}}</p> +</div> + +<div class="note"> +<p>Note that when you omit the hue's unit, it's assumed to be in degrees (<code>deg</code>).</p> +</div> + +<h2 id="Using_color">Using color</h2> + +<p>Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.</p> + +<h3 id="Specifying_colors_in_stylesheets">Specifying colors in stylesheets</h3> + +<p>The easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.</p> + +<p>Let's take a look at an example, starting by looking at the results we're trying to achieve:</p> + +<div>{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}</div> + +<h4 id="HTML">HTML</h4> + +<p>The HTML responsible for creating the above example is shown here:</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="box boxLeft"> + <p> + This is the first box. + </p> + </div> + <div class="box boxRight"> + <p> + This is the second box. + </p> + </div> +</div></pre> + +<p>This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <code><div></code>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.</p> + +<p>The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.</p> + +<h4 id="CSS">CSS</h4> + +<p>We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.</p> + +<pre class="brush: css">.wrapper { + width: 620px; + height: 110px; + margin: 0; + padding: 10px; + border: 6px solid mediumturquoise; +}</pre> + +<p>The <code>.wrapper</code> class is used to assign styles to the {{HTMLElement("div")}} that encloses all of our other content. This establishes thesize of the container using {{cssxref("width")}} and {{cssxref("height")}} as well as its {{cssxref("margin")}} and {{cssxref("padding")}}.</p> + +<p>Of more interest to our discussion here is the use of the {{cssxref("border")}} property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color <code>mediumturquoise</code>.</p> + +<p>Our two colored boxes share a number of properties in common, so next we establish a class, <code>.box</code>, that defines those shared properties:</p> + +<pre class="brush: css">.box { + width: 290px; + height: 100px; + margin: 0; + padding: 4px 6px; + font: 28px "Marker Felt", "Zapfino", cursive; + display: flex; + justify-content: center; + align-items: center; +}</pre> + +<p>In brief, <code>.box</code> establishes the size of each box, as well as the configuration of the font used within. We also take advantage of <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a> to easily center the contents of each box. We enable <code>flex</code> mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to <code>center</code>. Then we can create a class for each of the two boxes that defines the propeties that differ between the two.</p> + +<pre class="brush: css">.boxLeft { + float: left; + background-color: rgb(245, 130, 130); + outline: 2px solid darkred; +}</pre> + +<p>The <code>.boxLeft</code> class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:</p> + +<ul> + <li>The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to <code>rgb(245, 130, 130)</code>.</li> + <li>An outline is defined for the box. Unlike the more commonly used <code>border</code>, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as <code>border</code> does. This outline is a solid, dark red line that's two pixels thick. Note the use of the <code>darkred</code> keyword when specifying the color.</li> + <li>Notice that we're not explicitly setting the text color. That means the value of {{cssxref("color")}} will be inherited from the nearest containing element that defines it. By default, that's black.</li> +</ul> + +<pre class="brush: css">.boxRight { + float: right; + background-color: hsl(270deg, 50%, 75%); + outline: 4px dashed rgb(110, 20, 120); + color: hsl(0deg, 100%, 100%); + text-decoration: underline wavy #88ff88; + text-shadow: 2px 2px 3px black; +}</pre> + +<p>Finally, the <code>.boxRight</code> class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:</p> + +<ul> + <li>The <code>background-color</code> is set using the HSL value specified using <code>hsl(270deg, 50%, 75%)</code>. This is a medium purple color.</li> + <li>The box's <code>outline</code> is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (<code>rgb(110, 20, 120)</code>).</li> + <li>The foreground (text) color is specified by setting the {{cssxref("color")}} property to <code>hsl(0deg, 100%, 100%)</code>. This is one of many ways to specify the color white.</li> + <li>We add a green wavy line under the text with {{cssxref("text-decoration")}}.</li> + <li>Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its <code>color</code> parameter is set to <code>black</code>.</li> +</ul> + +<h2 id="Letting_the_user_pick_a_color">Letting the user pick a color</h2> + +<p>There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using <code>"color"</code> as the value of its {{htmlattrxref("type", "input")}} attribute.</p> + +<p>The <code><input></code> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.</p> + +<h3 id="Example_Picking_a_color">Example: Picking a color</h3> + +<p>Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.</p> + +<p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p> + +<div class="note"> +<p>On macOS, you indicate that you've finalized selection of the color by closing the color picker window.</p> +</div> + +<h4 id="HTML_2">HTML</h4> + +<p>The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.</p> + +<pre class="brush: html"><div id="box"> + <label for="colorPicker">Border color:</label> + <input type="color" value="#8888ff" id="colorPicker"> + <p id="output"></p> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<p>The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...</p> + +<pre class="brush: css">#box { + width: 500px; + height: 200px; + border: 2px solid rgb(245, 220, 225); + padding: 4px 6px; + font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif" +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <code><a href="/en-US/docs/Web/HTML/Element/input/color"><input type="color"></a></code> element.</p> + +<pre class="brush: js">let colorPicker = document.getElementById("colorPicker"); +let box = document.getElementById("box"); +let output = document.getElementById("output"); + +box.style.borderColor = colorPicker.value; + +colorPicker.addEventListener("input", function(event) { + box.style.borderColor = event.target.value; +}, false); + +colorPicker.addEventListener("change", function(event) { + output.innerText = "Color set to " + colorPicker.value + "."; +}, false);</pre> + +<p>The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.</p> + +<p>The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <code><p></code> element with the ID <code>"output"</code> to a string describing the finally selected color.</p> + +<h2 id="Using_color_wisely">Using color wisely</h2> + +<p>Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.</p> + +<h3 id="Finding_the_right_colors">Finding the right colors</h3> + +<p>Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.</p> + +<h4 id="Base_color">Base color</h4> + +<p>The first step is to choose your <strong>base color</strong>. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:</p> + +<ul> + <li>A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.</li> + <li>A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.</li> + <li>Browse web sites that let you look at lots of existing color palettes and images to find inspiration.</li> +</ul> + +<p>When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site <a href="http://www.colorzilla.com/">ColorZilla</a> offers an extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.</p> + +<div class="note"> +<p>The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.</p> +</div> + +<h4 id="Fleshing_out_the_palette">Fleshing out the palette</h4> + +<p>Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.</p> + +<p>A few examples (all free to use as of the time this list was last revised):</p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li> + <li><a href="http://paletton.com">Paletton</a></li> + <li><a href="https://color.adobe.com/create/color-wheel">Adobe Color CC online color wheel</a></li> +</ul> + +<p>When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.</p> + +<div class="note"> +<p>Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.</p> +</div> + +<h3 id="Color_theory_resources">Color theory resources</h3> + +<p>A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:</p> + +<dl> + <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">Color Science</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> in association with <a href="https://www.pixar.com/">Pixar</a>)</dt> + <dd>An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.</dd> + <dt>{{interwiki("wikipedia", "Color theory")}} on Wikipedia</dt> + <dd>Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color sleection process, but is still full of useful information.</dd> +</dl> + +<h3 id="Color_and_accessibility">Color and accessibility</h3> + +<p>There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.</p> + +<p>You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.</p> + +<div class="note"> +<p>The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.</p> +</div> + +<p>For more information about color blindness, see the following articles:</p> + +<ul> + <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (United States National Institute of Health)</li> + <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li> + <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness & Web Design</a> (Usability.gov: United States Department of Health and Human Services)</li> +</ul> + +<h3 id="Palette_design_example">Palette design example</h3> + +<p>Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a <a href="https://www.google.com/search?q=Mars&tbm=isch">Google search for photos of Mars</a>. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.</p> + +<p>Using an eyedropper tool, we identify a color we like and determine that the color in question is <code>#D79C7A</code>, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.</p> + +<p>Having selected our base color, we need to build out our palette. We decide to use <a href="http://www.paletton.com/">Paletton</a> to come up with the other colors we need. Upon opening Paletton, we see:</p> + +<p><img alt="Right after loading Paletton." src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p> + +<p>Next, we enter our color's hex code (<code>D79C7A</code>) into the "Base RGB" box at the bottom-left corner of the tool:</p> + +<p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p> + +<p>We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is <code>#508D7C</code>.</p> + +<p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p> + +<p>If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:</p> + +<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p> + +<p>That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's <code>#556E8D</code>. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:</p> + +<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p> + +<p>Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.</p> + +<p>Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.</p> + +<h3 id="Color_backgrounds_contrast_and_printing">Color, backgrounds, contrast, and printing</h3> + +<p>What looks good on screen may look very different on paper. In addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. Most browsers, by default, remove background images when printing documents.</p> + +<p>If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS {{cssxref("color-adjust")}} property to tell the browser that it should not make adjustments to the appearance of content.</p> + +<p>The default value of <code>color-adjust</code>, <code>economy</code>, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the document is being drawn onto.</p> + +<p>You can set <code>color-adjust</code> to <code>exact</code> to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are. With this set, the browser won't tamper with the appearance of the element, and will draw it as indicated by your CSS.</p> + +<div class="note"> +<p><strong>Note:</strong> There is no guarantee, though, that <code>color-adjust: exact</code> will result in your CSS being used exactly as given. If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of <code>color-adjust</code>.</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> + <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li> + <li><a href="/en-US/docs/Tools/DevToolsColors">MDN's color picker tool</a></li> +</ul> diff --git a/files/fa/web/http/index.html b/files/fa/web/http/index.html new file mode 100644 index 0000000000..934464e4d7 --- /dev/null +++ b/files/fa/web/http/index.html @@ -0,0 +1,84 @@ +--- +title: HTTP +slug: Web/HTTP +translation_of: Web/HTTP +--- +<p>Mohamad</p> + +<div class="hidden"> +<h5 id="en-USdocsHTTPSidebar"><a href="/en-US/docs/">/en-US/docs/</a>{{HTTPSidebar}}</h5> +</div> + +<p class="summary"><strong><dfn>Hypertext Transfer Protocol (HTTP)</dfn></strong> is an <a href="https://en.wikipedia.org/wiki/Application_Layer">application-layer</a> protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but it can also be used for other purposes. HTTP follows a classical <a href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model">client-server model</a>, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a <a href="https://en.wikipedia.org/wiki/Stateless_protocol">stateless protocol</a>, meaning that the server does not keep any data (state) between two requests. Though often based on a TCP/IP layer, it can be used on any reliable <a href="http://en.wikipedia.org/wiki/Transport_Layer">transport layer</a>; that is, a protocol that doesn't lose messages silently, such as UDP.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Tutorials">Tutorials</h2> + +<p>Learn how to use HTTP with guides and tutorials.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt> + <dd>The basic features of the client-server protocol: what it can do and its intended uses.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching">HTTP Cache</a></dt> + <dd>Caching is very important for fast Web sites. This article describes different methods of caching and how to use HTTP Headers to control them.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies">HTTP Cookies</a></dt> + <dd>How cookies work is defined by <a href="http://tools.ietf.org/html/rfc6265">RFC 6265</a>. When serving an HTTP request, a server can send a <code>Set-Cookie</code> HTTP header with the response. The client then returns the cookie's value with every request to the same server in the form of a <code>Cookie</code> request header. The cookie can also be set to expire on a certain date, or restricted to a specific domain and path.</dd> + <dt><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></dt> + <dd><strong>Cross-site HTTP requests</strong> are HTTP requests for resources from a <strong>different domain</strong> than the domain of the resource making the request. For instance, an HTML page from Domain A (<code>http://domaina.example/</code>) makes a request for an image on Domain B (<code>http://domainb.foo/image.jpg</code>) via the <code>img</code> element. Web pages today very commonly load cross-site resources, including CSS stylesheets, images, scripts, and other resources. CORS allows web developers to control how their site reacts to cross-site requests.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt> + <dd>A brief description of the changes between the early versions of HTTP, to the modern HTTP/2 and beyond.</dd> + <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Mozilla web security guidelines</a></dt> + <dd>A collection of tips to help operational teams with creating secure web applications.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt> + <dd>Describes the type and structure of the different kind of messages of HTTP/1.x and HTTP/2.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Session">A typical HTTP session</a></dt> + <dd>Shows and explains the flow of a usual HTTP session.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt> + <dd>Describes the three connection management models available in HTTP/1.x, their strengths, and their weaknesses.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Reference">Reference</h2> + +<p>Browse through detailed HTTP reference documentation.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers">HTTP Headers</a></dt> + <dd>HTTP message headers are used to describe a resource, or the behavior of the server or the client. Custom proprietary headers can be added using the <code>X-</code> prefix; others in an <a href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, whose original content was defined in <a href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a href="http://www.iana.org/assignments/message-headers/prov-headers.html">registry of proposed new HTTP message headers</a>.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">HTTP Request Methods</a></dt> + <dd>The different operations that can be done with HTTP: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, and also less common requests like {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, or {{HTTPMethod("TRACE")}}.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes">HTTP Status Response Codes</a></dt> + <dd>HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">CSP directives</a></dt> + <dd>The {{HTTPHeader("Content-Security-Policy")}} response header fields allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.</dd> +</dl> + +<h2 id="Tools_resources">Tools & resources</h2> + +<p>Helpful tools and resources for understanding and debugging HTTP.</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="/en-US/docs/Tools/Network_Monitor">Network monitor</a></dd> + <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt> + <dd> + <p>A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.</p> + </dd> + <dt><a class="external" href="https://redbot.org/">RedBot</a></dt> + <dd>Tools to check your cache-related headers</dd> + <dt><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt> + <dd>A very comprehensive article on browser internals and request flow through HTTP protocol. A MUST-READ for any web developer.</dd> +</dl> +</div> +</div> diff --git a/files/fa/web/http/status/index.html b/files/fa/web/http/status/index.html new file mode 100644 index 0000000000..b39296ce25 --- /dev/null +++ b/files/fa/web/http/status/index.html @@ -0,0 +1,202 @@ +--- +title: HTTP response status codes +slug: Web/HTTP/Status +tags: + - HTTP + - Landing + - NeedsTranslation + - Overview + - Reference + - Status code + - TopicStub + - Web +translation_of: Web/HTTP/Status +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><span class="seoSummary">HTTP response status codes indicate whether a specific <a href="/en-US/docs/Web/HTTP">HTTP</a> request has been successfully completed. Responses are grouped in five classes: </span></p> + +<ol> + <li><span class="seoSummary">Informational responses (<code>100</code>–<code>199</code>),</span></li> + <li><span class="seoSummary">Successful responses (<code>200</code>–<code>299</code>),</span></li> + <li><span class="seoSummary">Redirects (<code>300</code>–<code>399</code>),</span></li> + <li><span class="seoSummary">Client errors (<code>400</code>–<code>499</code>),</span></li> + <li><span class="seoSummary">and Server errors (<code>500</code>–<code>599</code>).</span></li> +</ol> + +<p>The below status codes are defined by <a href="https://tools.ietf.org/html/rfc2616#section-10">section 10 of RFC 2616</a>. You can find an updated specification in <a href="https://tools.ietf.org/html/rfc7231#section-6.5.1">RFC 7231</a>.</p> + +<div class="blockIndicator note"> +<p>If you receive a response that is not in this list, it is a non-standard response, possibly custom to the server's software.</p> +</div> + +<h2 id="Information_responses">Information responses</h2> + +<dl> + <dt>{{HTTPStatus(100, "100 Continue")}}</dt> + <dd>This interim response indicates that everything so far is OK and that the client should continue the request, or ignore the response if the request is already finished.</dd> + <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt> + <dd>This code is sent in response to an {{HTTPHeader("Upgrade")}} request header from the client, and indicates the protocol the server is switching to.</dd> + <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt> + <dd>This code indicates that the server has received and is processing the request, but no response is available yet.</dd> + <dt>{{HTTPStatus(103, "103 Early Hints")}}</dt> + <dd>This status code is primarily intended to be used with the {{HTTPHeader("Link")}} header, letting the user agent start <a href="/en-US/docs/Web/HTML/Preloading_content">preloading</a> resources while the server prepares a response.</dd> +</dl> + +<h2 id="Successful_responses">Successful responses</h2> + +<dl> + <dt>{{HTTPStatus(200, "200 OK")}}</dt> + <dd>The request has succeeded. The meaning of the success depends on the HTTP method: + <ul> + <li><code>GET</code>: The resource has been fetched and is transmitted in the message body.</li> + <li><code>HEAD</code>: The entity headers are in the message body.</li> + <li><code>PUT</code> or <code>POST</code>: The resource describing the result of the action is transmitted in the message body.</li> + <li><code>TRACE</code>: The message body contains the request message as received by the server</li> + </ul> + </dd> + <dt>{{HTTPStatus(201, "201 Created")}}</dt> + <dd>The request has succeeded and a new resource has been created as a result. This is typically the response sent after <code>POST</code> requests, or some <code>PUT</code> requests.</dd> + <dt>{{HTTPStatus(202, "202 Accepted")}}</dt> + <dd>The request has been received but not yet acted upon. It is noncommittal, since there is no way in HTTP to later send an asynchronous response indicating the outcome of the request. It is intended for cases where another process or server handles the request, or for batch processing.</dd> + <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt> + <dd>This response code means the returned meta-information is not exactly the same as is available from the origin server, but is collected from a local or a third-party copy. This is mostly used for mirrors or backups of another resource. Except for that specific case, the "200 OK" response is preferred to this status.</dd> + <dt>{{HTTPStatus(204, "204 No Content")}}</dt> + <dd>There is no content to send for this request, but the headers may be useful. The user-agent may update its cached headers for this resource with the new ones.</dd> + <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt> + <dd>Tells the user-agent to reset the document which sent this request.</dd> + <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt> + <dd>This response code is used when the {{HTTPHeader("Range")}} header is sent from the client to request only part of a resource.</dd> + <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})</dt> + <dd>Conveys information about multiple resources, for situations where multiple status codes might be appropriate.</dd> + <dt>{{HTTPStatus(208, "208 Already Reported")}} ({{Glossary("WebDAV")}})</dt> + <dd>Used inside a <code><dav:propstat></code> response element to avoid repeatedly enumerating the internal members of multiple bindings to the same collection.</dd> + <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt> + <dd>The server has fulfilled a <code>GET</code> request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.</dd> +</dl> + +<h2 id="Redirection_messages">Redirection messages</h2> + +<dl> + <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt> + <dd>The request has more than one possible response. The user-agent or user should choose one of them. (There is no standardized way of choosing one of the responses, but HTML links to the possibilities are recommended so the user can pick.)</dd> + <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt> + <dd>The URL of the requested resource has been changed permanently. The new URL is given in the response.</dd> + <dt>{{HTTPStatus(302, "302 Found")}}</dt> + <dd>This response code means that the URI of requested resource has been changed <em>temporarily</em>. Further changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.</dd> + <dt>{{HTTPStatus(303, "303 See Other")}}</dt> + <dd>The server sent this response to direct the client to get the requested resource at another URI with a GET request.</dd> + <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt> + <dd>This is used for caching purposes. It tells the client that the response has not been modified, so the client can continue to use the same cached version of the response.</dd> + <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt> + <dd>Defined in a previous version of the HTTP specification to indicate that a requested response must be accessed by a proxy. It has been deprecated due to security concerns regarding in-band configuration of a proxy.</dd> + <dt><code>306 unused</code></dt> + <dd>This response code is no longer used; it is just reserved. It was used in a previous version of the HTTP/1.1 specification.</dd> + <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt> + <dd>The server sends this response to direct the client to get the requested resource at another URI with same method that was used in the prior request. This has the same semantics as the <code>302 Found</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: If a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> + <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt> + <dd>This means that the resource is now permanently located at another URI, specified by the <code>Location:</code> HTTP Response header. This has the same semantics as the <code>301 Moved Permanently</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: If a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> +</dl> + +<h2 id="Client_error_responses">Client error responses</h2> + +<dl> + <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt> + <dd>The server could not understand the request due to invalid syntax.</dd> + <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt> + <dd>Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.</dd> + <dt>{{HTTPStatus(402, "402 Payment Required")}} {{experimental_inline}}</dt> + <dd>This response code is reserved for future use. The initial aim for creating this code was using it for digital payment systems, however this status code is used very rarely and no standard convention exists.</dd> + <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt> + <dd>The client does not have access rights to the content; that is, it is unauthorized, so the server is refusing to give the requested resource. Unlike 401, the client's identity is known to the server.</dd> + <dt>{{HTTPStatus(404, "404 Not Found")}}</dt> + <dd>The server can not find the requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 to hide the existence of a resource from an unauthorized client. This response code is probably the most famous one due to its frequent occurrence on the web.</dd> + <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt> + <dd>The request method is known by the server but has been disabled and cannot be used. For example, an API may forbid DELETE-ing a resource. The two mandatory methods, <code>GET</code> and <code>HEAD</code>, must never be disabled and should not return this error code.</dd> + <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt> + <dd>This response is sent when the web server, after performing <a href="/en-US/docs/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, doesn't find any content that conforms to the criteria given by the user agent.</dd> + <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt> + <dd>This is similar to 401 but authentication is needed to be done by a proxy.</dd> + <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt> + <dd>This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome, Firefox 27+, or IE9, use HTTP pre-connection mechanisms to speed up surfing. Also note that some servers merely shut down the connection without sending this message.</dd> + <dt>{{HTTPStatus(409, "409 Conflict")}}</dt> + <dd>This response is sent when a request conflicts with the current state of the server.</dd> + <dt>{{HTTPStatus(410, "410 Gone")}}</dt> + <dd>This response is sent when the requested content has been permanently deleted from server, with no forwarding address. Clients are expected to remove their caches and links to the resource. The HTTP specification intends this status code to be used for "limited-time, promotional services". APIs should not feel compelled to indicate resources that have been deleted with this status code.</dd> + <dt>{{HTTPStatus(411, "411 Length Required")}}</dt> + <dd>Server rejected the request because the <code>Content-Length</code> header field is not defined and the server requires it.</dd> + <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt> + <dd>The client has indicated preconditions in its headers which the server does not meet.</dd> + <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt> + <dd>Request entity is larger than limits defined by server; the server might close the connection or return an <code>Retry-After</code> header field.</dd> + <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt> + <dd>The URI requested by the client is longer than the server is willing to interpret.</dd> + <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt> + <dd>The media format of the requested data is not supported by the server, so the server is rejecting the request.</dd> + <dt>{{HTTPStatus(416, "416 Range Not Satisfiable")}}</dt> + <dd>The range specified by the <code>Range</code> header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.</dd> + <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt> + <dd>This response code means the expectation indicated by the <code>Expect</code> request header field can't be met by the server.</dd> + <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt> + <dd>The server refuses the attempt to brew coffee with a teapot.</dd> + <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt> + <dd>The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.</dd> + <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt> + <dd>The request was well-formed but was unable to be followed due to semantic errors.</dd> + <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt> + <dd>The resource that is being accessed is locked.</dd> + <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt> + <dd>The request failed due to failure of a previous request.</dd> + <dt>{{HTTPStatus(425, "425 Too Early")}}</dt> + <dd>Indicates that the server is unwilling to risk processing a request that might be replayed.</dd> + <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt> + <dd>The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server sends an {{HTTPHeader("Upgrade")}} header in a 426 response to indicate the required protocol(s).</dd> + <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt> + <dd>The origin server requires the request to be conditional. This response is intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.</dd> + <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt> + <dd>The user has sent too many requests in a given amount of time ("rate limiting").</dd> + <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt> + <dd>The server is unwilling to process the request because its header fields are too large. The request may be resubmitted after reducing the size of the request header fields.</dd> + <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt> + <dd>The user-agent requested a resource that cannot legally be provided, such as a web page censored by a government.</dd> +</dl> + +<h2 id="Server_error_responses">Server error responses</h2> + +<dl> + <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt> + <dd>The server has encountered a situation it doesn't know how to handle.</dd> + <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt> + <dd>The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are <code>GET</code> and <code>HEAD</code>.</dd> + <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt> + <dd>This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.</dd> + <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt> + <dd>The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the <code>Retry-After:</code> HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.</dd> + <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt> + <dd>This error response is given when the server is acting as a gateway and cannot get a response in time.</dd> + <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt> + <dd>The HTTP version used in the request is not supported by the server.</dd> + <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt> + <dd>The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.</dd> + <dt>{{HTTPStatus(507, "507 Insufficient Storage")}} ({{Glossary("WebDAV")}})</dt> + <dd>The method could not be performed on the resource because the server is unable to store the representation needed to successfully complete the request.</dd> + <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt> + <dd>The server detected an infinite loop while processing the request.</dd> + <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt> + <dd>Further extensions to the request are required for the server to fulfil it.</dd> + <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt> + <dd>The 511 status code indicates that the client needs to authenticate to gain network access.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("http.status")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">List of HTTP status codes on Wikipedia</a></li> + <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">IANA official registry of HTTP status codes</a></li> +</ul> diff --git a/files/fa/web/index.html b/files/fa/web/index.html new file mode 100644 index 0000000000..fdf74108ac --- /dev/null +++ b/files/fa/web/index.html @@ -0,0 +1,53 @@ +--- +title: تکنولوژی های وب برای توسعه دهندگان +slug: Web +tags: + - تکنولوژی های وب + - رابط های کاربردی + - رابط های کاربری + - وب +translation_of: Web +--- +<p dir="rtl"><strong>وب باز ، فرصتی باورنکردنی برای بادگیری این تکنولوژی. شما باید یاد بگیرید چگونه از آنها (تکنولوژِی ها) استفاده کنید. در زیر پیوند هایی به اسناد تکنولوژی های ما وجود دارد.</strong></p> + +<div class="row topicpage-table" dir="rtl"> +<div class="section"> +<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">مستندات برای توسعه دهندگان</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">منابع توسعه دهنده وب</a></dt> + <dd><strong>یک لیست از تمام منابع تکنولوژی های وب از جمله HTML , CSS و غیره.</strong></dd> + <dt><a href="/en-US/docs/Web/Guide" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/">راهنمای توسعه دهنده</a></dt> + <dd><strong>راهنمای توسعه دهنده وب محیطی را فراهم میکند که شما بتوانید چگونگی استفاده از تمامی تکنولوژی های وب را فرابگیرید.</strong></dd> + <dt><a href="/en-US/docs/Web/Tutorials" title="/en-US/docs/Web/Tutorials">خودآموز هایی برای توسعه دهندگان وب</a></dt> + <dd><strong>یک لیست از تمامی خودآموزها برای یادگیری قدم به قدم رابط های کاربری (APIs) وب ، اکنولوژی ها و غیره.</strong></dd> + <dt><a href="/en-US/docs/Web/Apps" title="/en-US/docs/Web/Apps">توسعه برنامه های وب</a></dt> + <dd><strong>مستندات برای توسعه دهندگان نرم افزار های تحت وب ، نرم افزارهای تحت وب را یک بار و برای همیشه بنویسید و در همه جا استفاده کنید، از جمله موبایل ، رایانه رومیزی ، سیستم عامل فایرفاکس و غیره...</strong></dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Web">نمایش همه . . .</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">منابع تکنولوژی های وب</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API" title="/en-US/docs/Web/API">رابط های کاربردی (APIs) وب</a></dt> + <dd><strong>منابع کامل از هر یک از رابط های کاربردی و کاربری وب شامل DOM و تمام رابط های کاربردی و کاربری که شما میتوانید از آنها در نرم افزار های تحت وب خود استفاده کنید.</strong></dd> + <dt><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></dt> + <dd><strong>زبان نشانه گذاری ابر متن <span id="result_box" lang="fa"><span class="hps">زبان مورد استفاده</span> <span class="hps">برای توصیف</span> <span class="hps">و تعریف</span> <span class="hps">محتوای</span> <span class="hps">یک صفحه وب</span> <span class="hps">است</span><span>.</span></span></strong></dd> + <dt><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></dt> + <dd><strong>شیوه نامه های آبشاری (Cascading Style Sheets) برای توصیف ظاهر محتوای وب استفاده میشوند.</strong></dd> + <dt><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></dt> + <dd><strong>گرافیک برداری مقیاس پذیر (Scalable Vector Graphics) به شما اجازه میدهد بجای استفاده از تصاویر با رسم بردارهایی هموار شکل مورد نظر خود را رسم و توصیف کنید.</strong></dd> + <dt><a href="/en-US/docs/Web/MathML" title="/en-US/docs/Web/MathML">MathML</a></dt> + <dd><strong>زبان نشانه گذاری ریاضی (Mathematical Markup Language) به شما امکان نمایش معادلات ساده و پیچیده ی ریاضی را میدهد.</strong></dd> +</dl> +</div> +</div> + +<h3 dir="rtl" id="موقت">موقت</h3> + +<p dir="rtl"><strong>مواردی که در حال حاضر سازمان در آنها فعالیت دارد.</strong></p> + +<p dir="rtl">{{ListSubpages}}</p> diff --git a/files/fa/web/javascript/a_re-introduction_to_javascript/index.html b/files/fa/web/javascript/a_re-introduction_to_javascript/index.html new file mode 100644 index 0000000000..4811a5e430 --- /dev/null +++ b/files/fa/web/javascript/a_re-introduction_to_javascript/index.html @@ -0,0 +1,951 @@ +--- +title: A re-introduction to JavaScript (JS tutorial) +slug: Web/JavaScript/A_re-introduction_to_JavaScript +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +<div>{{jsSidebar}}</div> + +<p>چرا دوباره معرفی شود؟ زیرا جاوااسکریپت از لحاظ ایجاد سوتفاهم در جهان مشهور است. این اغلب به عنوان یک اسباب بازی مورد تمسخر قرار می گیرد ، اما در زیر لایه ساده فریبنده آن ، ویژگی های قدرتمند زبان در انتظار است. جاوا اسکریپت اکنون توسط تعداد باورنکردنی از برنامه های با مشخصات بالا استفاده می شود ، نشان می دهد که دانش عمیق تر از این فن آوری مهارت مهمی برای هر توسعه دهنده وب یا تلفن همراه است.</p> + +<p>It's useful to start with an overview of the language's history. JavaScript was created in 1995 by Brendan Eich while he was an engineer at Netscape. JavaScript was first released with Netscape 2 early in 1996. It was originally going to be called LiveScript, but it was renamed in an ill-fated marketing decision that attempted to capitalize on the popularity of Sun Microsystem's Java language — despite the two having very little in common. This has been a source of confusion ever since.</p> + +<p>Several months later, Microsoft released JScript with Internet Explorer 3. It was a mostly-compatible JavaScript work-alike. Several months after that, Netscape submitted JavaScript to <a class="external" href="http://www.ecma-international.org/">Ecma International</a>, a European standards organization, which resulted in the first edition of the <a href="/en-US/docs/Glossary/ECMAScript">ECMAScript</a> standard that year. The standard received a significant update as <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edition 3</a> in 1999, and it has stayed pretty much stable ever since. The fourth edition was abandoned, due to political differences concerning language complexity. Many parts of the fourth edition formed the basis for ECMAScript edition 5, published in December of 2009, and for the 6th major edition of the standard, published in June of 2015.</p> + +<div class="note"> +<p>Because it is more familiar, we will refer to ECMAScript as "JavaScript" from this point on.</p> +</div> + +<p>Unlike most programming languages, the JavaScript language has no concept of input or output. It is designed to run as a scripting language in a host environment, and it is up to the host environment to provide mechanisms for communicating with the outside world. The most common host environment is the browser, but JavaScript interpreters can also be found in a huge list of other places, including Adobe Acrobat, Adobe Photoshop, SVG images, Yahoo's Widget engine, server-side environments such as <a href="http://nodejs.org/">Node.js</a>, NoSQL databases like the open source <a href="http://couchdb.apache.org/">Apache CouchDB</a>, embedded computers, complete desktop environments like <a href="http://www.gnome.org/">GNOME</a> (one of the most popular GUIs for GNU/Linux operating systems), and others.</p> + +<h2 id="Overview">Overview</h2> + +<p>JavaScript is a multi-paradigm, dynamic language with types and operators, standard built-in objects, and methods. Its syntax is based on the Java and C languages — many structures from those languages apply to JavaScript as well. JavaScript supports object-oriented programming with object prototypes, instead of classes (see more about <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain" title="prototypical inheritance">prototypical inheritance</a> and ES2015 <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a>). JavaScript also supports functional programming — because they are objects, functions may be stored in variables and passed around like any other object.</p> + +<p>Let's start off by looking at the building blocks of any language: the types. JavaScript programs manipulate values, and those values all belong to a type. JavaScript's types are:</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Symbol")}} (new in ES2015)</li> +</ul> + +<p>... oh, and {{jsxref("undefined")}} and {{jsxref("null")}}, which are ... slightly odd. And {{jsxref("Array")}}, which is a special kind of object. And {{jsxref("Date")}} and {{jsxref("RegExp")}}, which are objects that you get for free. And to be technically accurate, functions are just a special type of object. So the type diagram looks more like this:</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}} (new in ES2015)</li> + <li>{{jsxref("Object")}} + <ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Date")}}</li> + <li>{{jsxref("RegExp")}}</li> + </ul> + </li> + <li>{{jsxref("null")}}</li> + <li>{{jsxref("undefined")}}</li> +</ul> + +<p>And there are some built-in {{jsxref("Error")}} types as well. Things are a lot easier if we stick with the first diagram, however, so we'll discuss the types listed there for now.</p> + +<h2 id="Numbers">Numbers</h2> + +<p>Numbers in JavaScript are "double-precision 64-bit format IEEE 754 values", according to the spec — There's <strong><em>no such thing as an integer</em></strong> in JavaScript (except {{jsxref("BigInt")}}), so you have to be a little careful. See this example:</p> + +<pre class="syntaxbox notranslate">console.log(3 / 2); // 1.5, <em>not</em> 1 +console.log(Math.floor(3 / 2)); // 1</pre> + +<p>So an <em>apparent integer</em> is in fact <em>implicitly a float</em>.</p> + +<p>Also, watch out for stuff like:</p> + +<pre class="brush: js notranslate">0.1 + 0.2 == 0.30000000000000004; +</pre> + +<p>In practice, integer values are treated as 32-bit ints, and some implementations even store it that way until they are asked to perform an instruction that's valid on a Number but not on a 32-bit integer. This can be important for bit-wise operations.</p> + +<p>The standard <a href="/en-US/docs/Web/JavaScript/Reference/Operators#Arithmetic_operators">arithmetic operators</a> are supported, including addition, subtraction, modulus (or remainder) arithmetic, and so forth. There's also a built-in object that we did not mention earlier called {{jsxref("Math")}} that provides advanced mathematical functions and constants:</p> + +<pre class="brush: js notranslate">Math.sin(3.5); +var circumference = 2 * Math.PI * r; +</pre> + +<p>You can convert a string to an integer using the built-in {{jsxref("Global_Objects/parseInt", "parseInt()")}} function. This takes the base for the conversion as an optional second argument, which you should always provide:</p> + +<pre class="brush: js notranslate">parseInt('123', 10); // 123 +parseInt('010', 10); // 10 +</pre> + +<p>In older browsers, strings beginning with a "0" are assumed to be in octal (radix 8), but this hasn't been the case since 2013 or so. Unless you're certain of your string format, you can get surprising results on those older browsers:</p> + +<pre class="brush: js notranslate">parseInt('010'); // 8 +parseInt('0x10'); // 16 +</pre> + +<p>Here, we see the {{jsxref("Global_Objects/parseInt", "parseInt()")}} function treat the first string as octal due to the leading 0, and the second string as hexadecimal due to the leading "0x". The <em>hexadecimal notation is still in place</em>; only octal has been removed.</p> + +<p>If you want to convert a binary number to an integer, just change the base:</p> + +<pre class="brush: js notranslate">parseInt('11', 2); // 3 +</pre> + +<p>Similarly, you can parse floating point numbers using the built-in {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} function. Unlike its {{jsxref("Global_Objects/parseInt", "parseInt()")}} cousin, <code>parseFloat()</code> always uses base 10.</p> + +<p>You can also use the unary <code>+</code> operator to convert values to numbers:</p> + +<pre class="brush: js notranslate">+ '42'; // 42 ++ '010'; // 10 ++ '0x10'; // 16 +</pre> + +<p>A special value called {{jsxref("NaN")}} (short for "Not a Number") is returned if the string is non-numeric:</p> + +<pre class="brush: js notranslate">parseInt('hello', 10); // NaN +</pre> + +<p><code>NaN</code> is toxic: if you provide it as an operand to any mathematical operation, the result will also be <code>NaN</code>:</p> + +<pre class="brush: js notranslate">NaN + 5; // NaN +</pre> + +<p>You can test for <code>NaN</code> using the built-in {{jsxref("Global_Objects/isNaN", "isNaN()")}} function:</p> + +<pre class="brush: js notranslate">isNaN(NaN); // true +</pre> + +<p>JavaScript also has the special values {{jsxref("Infinity")}} and <code>-Infinity</code>:</p> + +<pre class="brush: js notranslate"> 1 / 0; // Infinity +-1 / 0; // -Infinity +</pre> + +<p>You can test for <code>Infinity</code>, <code>-Infinity</code> and <code>NaN</code> values using the built-in {{jsxref("Global_Objects/isFinite", "isFinite()")}} function:</p> + +<pre class="brush: js notranslate">isFinite(1 / 0); // false +isFinite(-Infinity); // false +isFinite(NaN); // false +</pre> + +<div class="note">The {{jsxref("Global_Objects/parseInt", "parseInt()")}} and {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} functions parse a string until they reach a character that isn't valid for the specified number format, then return the number parsed up to that point. However the "+" operator simply converts the string to <code>NaN</code> if there is an invalid character contained within it. Just try parsing the string "10.2abc" with each method by yourself in the console and you'll understand the differences better.</div> + +<h2 id="Strings">Strings</h2> + +<p>Strings in JavaScript are sequences of <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode characters</a>. This should be welcome news to anyone who has had to deal with internationalization. More accurately, they are sequences of UTF-16 code units; each code unit is represented by a 16-bit number. Each Unicode character is represented by either 1 or 2 code units.</p> + +<p>If you want to represent a single character, you just use a string consisting of that single character.</p> + +<p>To find the length of a string (in code units), access its <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length">length</a></code> property:</p> + +<pre class="brush: js notranslate">'hello'.length; // 5 +</pre> + +<p>There's our first brush with JavaScript objects! Did we mention that you can use strings like {{jsxref("Object", "objects", "", 1)}} too? They have {{jsxref("String", "methods", "#Methods", 1)}} as well that allow you to manipulate the string and access information about the string:</p> + +<pre class="brush: js notranslate">'hello'.charAt(0); // "h" +'hello, world'.replace('world', 'mars'); // "hello, mars" +'hello'.toUpperCase(); // "HELLO" +</pre> + +<h2 id="Other_types">Other types</h2> + +<p>JavaScript distinguishes between {{jsxref("null")}}, which is a value that indicates a deliberate non-value (and is only accessible through the <code>null</code> keyword), and {{jsxref("undefined")}}, which is a value of type <code>undefined</code> that indicates an uninitialized variable — that is, a value hasn't even been assigned yet. We'll talk about variables later, but in JavaScript it is possible to declare a variable without assigning a value to it. If you do this, the variable's type is <code>undefined</code>. <code>undefined</code> is actually a constant.</p> + +<p>JavaScript has a boolean type, with possible values <code>true</code> and <code>false</code> (both of which are keywords.) Any value can be converted to a boolean according to the following rules:</p> + +<ol> + <li><code>false</code>, <code>0</code>, empty strings (<code>""</code>), <code>NaN</code>, <code>null</code>, and <code>undefined</code> all become <code>false.</code></li> + <li>All other values become <code>true.</code></li> +</ol> + +<p>You can perform this conversion explicitly using the <code>Boolean()</code> function:</p> + +<pre class="brush: js notranslate">Boolean(''); // false +Boolean(234); // true +</pre> + +<p>However, this is rarely necessary, as JavaScript will silently perform this conversion when it expects a boolean, such as in an <code>if</code> statement (see below). For this reason, we sometimes speak simply of "true values" and "false values," meaning values that become <code>true</code> and <code>false</code>, respectively, when converted to booleans. Alternatively, such values can be called "truthy" and "falsy", respectively.</p> + +<p>Boolean operations such as <code>&&</code> (logical <em>and</em>), <code>||</code> (logical <em>or</em>), and <code>!</code> (logical <em>not</em>) are supported; see below.</p> + +<h2 id="Variables">Variables</h2> + +<p>New variables in JavaScript are declared using one of three keywords: <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, or <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var" title="/en/JavaScript/Reference/Statements/var">var</a></code>.<br> + <br> + <strong><code>let</code> </strong>allows you to declare block-level variables. The declared variable is available from the <em>block</em> it is enclosed in.</p> + +<pre class="brush: js notranslate">let a; +let name = 'Simon'; +</pre> + +<p>The following is an example of scope with a variable declared with <code><strong>let</strong></code>:</p> + +<pre class="brush: js notranslate">// myLetVariable is *not* visible out here + +for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { + // myLetVariable is only visible in here +} + +// myLetVariable is *not* visible out here + +</pre> + +<p><code><strong>const</strong></code> allows you to declare variables whose values are never intended to change. The variable is available from the <em>block</em> it is declared in.</p> + +<pre class="brush: js notranslate">const Pi = 3.14; // variable Pi is set +Pi = 1; // will throw an error because you cannot change a constant variable.</pre> + +<p><br> + <code><strong>var</strong></code> is the most common declarative keyword. It does not have the restrictions that the other two keywords have. This is because it was traditionally the only way to declare a variable in JavaScript. A variable declared with the <strong><code>var</code> </strong>keyword is available from the <em>function</em> it is declared in.</p> + +<pre class="brush: js notranslate">var a; +var name = 'Simon';</pre> + +<p>An example of scope with a variable declared with <strong><code>var</code>:</strong></p> + +<pre class="brush: js notranslate">// myVarVariable *is* visible out here + +for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) { + // myVarVariable is visible to the whole function +} + +// myVarVariable *is* visible out here +</pre> + +<p>If you declare a variable without assigning any value to it, its type is <code>undefined</code>.</p> + +<p>An important difference between JavaScript and other languages like Java is that in JavaScript, blocks do not have scope; only functions have a scope. So if a variable is defined using <code>var</code> in a compound statement (for example inside an <code>if</code> control structure), it will be visible to the entire function. However, starting with ECMAScript 2015, <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> and <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> declarations allow you to create block-scoped variables.</p> + +<h2 id="Operators">Operators</h2> + +<p>JavaScript's numeric operators are <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> and <code>%</code> which is the remainder operator (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_%28%29">which is the same as modulo</a>.) Values are assigned using <code>=</code>, and there are also compound assignment statements such as <code>+=</code> and <code>-=</code>. These extend out to <code>x = x <em>operator</em> y</code>.</p> + +<pre class="brush: js notranslate">x += 5; +x = x + 5; +</pre> + +<p>You can use <code>++</code> and <code>--</code> to increment and decrement respectively. These can be used as a prefix or postfix operators.</p> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="/en/JavaScript/Reference/Operators/String_Operators"><code>+</code> operator</a> also does string concatenation:</p> + +<pre class="brush: js notranslate">'hello' + ' world'; // "hello world" +</pre> + +<p>If you add a string to a number (or other value) everything is converted into a string first. This might trip you up:</p> + +<pre class="brush: js notranslate">'3' + 4 + 5; // "345" + 3 + 4 + '5'; // "75" +</pre> + +<p>Adding an empty string to something is a useful way of converting it to a string itself.</p> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en/JavaScript/Reference/Operators/Comparison_Operators">Comparisons</a> in JavaScript can be made using <code><</code>, <code>></code>, <code><=</code> and <code>>=</code>. These work for both strings and numbers. Equality is a little less straightforward. The double-equals operator performs type coercion if you give it different types, with sometimes interesting results:</p> + +<pre class="brush: js notranslate">123 == '123'; // true +1 == true; // true +</pre> + +<p>To avoid type coercion, use the triple-equals operator:</p> + +<pre class="brush: js notranslate">123 === '123'; // false +1 === true; // false +</pre> + +<p>There are also <code>!=</code> and <code>!==</code> operators.</p> + +<p>JavaScript also has <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en/JavaScript/Reference/Operators/Bitwise_Operators">bitwise operations</a>. If you want to use them, they're there.</p> + +<h2 id="Control_structures">Control structures</h2> + +<p>JavaScript has a similar set of control structures to other languages in the C family. Conditional statements are supported by <code>if</code> and <code>else</code>; you can chain them together if you like:</p> + +<pre class="brush: js notranslate">var name = 'kittens'; +if (name == 'puppies') { + name += ' woof'; +} else if (name == 'kittens') { + name += ' meow'; +} else { + name += '!'; +} +name == 'kittens meow'; +</pre> + +<p>JavaScript has <code>while</code> loops and <code>do-while</code> loops. The first is good for basic looping; the second for loops where you wish to ensure that the body of the loop is executed at least once:</p> + +<pre class="brush: js notranslate">while (true) { + // an infinite loop! +} + +var input; +do { + input = get_input(); +} while (inputIsNotValid(input)); +</pre> + +<p>JavaScript's <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> loop</a> is the same as that in C and Java: it lets you provide the control information for your loop on a single line.</p> + +<pre class="brush: js notranslate">for (var i = 0; i < 5; i++) { + // Will execute 5 times +} +</pre> + +<p>JavaScript also contains two other prominent for loops: <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a></p> + +<pre class="brush: js notranslate">for (let value of array) { + // do something with value +} +</pre> + +<p>and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a>:</p> + +<pre class="brush: js notranslate">for (let property in object) { + // do something with object property +} +</pre> + +<p>The <code>&&</code> and <code>||</code> operators use short-circuit logic, which means whether they will execute their second operand is dependent on the first. This is useful for checking for null objects before accessing their attributes:</p> + +<pre class="brush: js notranslate">var name = o && o.getName(); +</pre> + +<p>Or for caching values (when falsy values are invalid):</p> + +<pre class="brush: js notranslate">var name = cachedName || (cachedName = getName()); +</pre> + +<p>JavaScript has a ternary operator for conditional expressions:</p> + +<pre class="brush: js notranslate">var allowed = (age > 18) ? 'yes' : 'no'; +</pre> + +<p>The <code>switch</code> statement can be used for multiple branches based on a number or string:</p> + +<pre class="brush: js notranslate">switch (action) { + case 'draw': + drawIt(); + break; + case 'eat': + eatIt(); + break; + default: + doNothing(); +} +</pre> + +<p>If you don't add a <code>break</code> statement, execution will "fall through" to the next level. This is very rarely what you want — in fact it's worth specifically labeling deliberate fallthrough with a comment if you really meant it to aid debugging:</p> + +<pre class="brush: js notranslate">switch (a) { + case 1: // fallthrough + case 2: + eatIt(); + break; + default: + doNothing(); +} +</pre> + +<p>The default clause is optional. You can have expressions in both the switch part and the cases if you like; comparisons take place between the two using the <code>===</code> operator:</p> + +<pre class="brush: js notranslate">switch (1 + 3) { + case 2 + 2: + yay(); + break; + default: + neverhappens(); +} +</pre> + +<h2 id="Objects">Objects</h2> + +<p>JavaScript objects can be thought of as simple collections of name-value pairs. As such, they are similar to:</p> + +<ul> + <li>Dictionaries in Python.</li> + <li>Hashes in Perl and Ruby.</li> + <li>Hash tables in C and C++.</li> + <li>HashMaps in Java.</li> + <li>Associative arrays in PHP.</li> +</ul> + +<p>The fact that this data structure is so widely used is a testament to its versatility. Since everything (bar core types) in JavaScript is an object, any JavaScript program naturally involves a great deal of hash table lookups. It's a good thing they're so fast!</p> + +<p>The "name" part is a JavaScript string, while the value can be any JavaScript value — including more objects. This allows you to build data structures of arbitrary complexity.</p> + +<p>There are two basic ways to create an empty object:</p> + +<pre class="brush: js notranslate">var obj = new Object(); +</pre> + +<p>And:</p> + +<pre class="brush: js notranslate">var obj = {}; +</pre> + +<p>These are semantically equivalent; the second is called object literal syntax and is more convenient. This syntax is also the core of JSON format and should be preferred at all times.</p> + +<p>Object literal syntax can be used to initialize an object in its entirety:</p> + +<pre class="brush: js notranslate">var obj = { + name: 'Carrot', + for: 'Max', // 'for' is a reserved word, use '_for' instead. + details: { + color: 'orange', + size: 12 + } +}; +</pre> + +<p>Attribute access can be chained together:</p> + +<pre class="brush: js notranslate">obj.details.color; // orange +obj['details']['size']; // 12 +</pre> + +<p>The following example creates an object prototype(<code>Person</code>) and an instance of that prototype(<code>you</code>).</p> + +<pre class="brush: js notranslate">function Person(name, age) { + this.name = name; + this.age = age; +} + +// Define an object +var you = new Person('You', 24); +// We are creating a new person named "You" aged 24. + +</pre> + +<p><strong>Once created</strong>, an object's properties can again be accessed in one of two ways:</p> + +<pre class="brush: js notranslate">// dot notation +obj.name = 'Simon'; +var name = obj.name; +</pre> + +<p>And...</p> + +<pre class="brush: js notranslate">// bracket notation +obj['name'] = 'Simon'; +var name = obj['name']; +// can use a variable to define a key +var user = prompt('what is your key?') +obj[user] = prompt('what is its value?') +</pre> + +<p>These are also semantically equivalent. The second method has the advantage that the name of the property is provided as a string, which means it can be calculated at run-time. However, using this method prevents some JavaScript engine and minifier optimizations being applied. It can also be used to set and get properties with names that are <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords" title="/en/JavaScript/Reference/Reserved_Words">reserved words</a>:</p> + +<pre class="brush: js notranslate">obj.for = 'Simon'; // Syntax error, because 'for' is a reserved word +obj['for'] = 'Simon'; // works fine +</pre> + +<div class="note"> +<p>Starting in ECMAScript 5, reserved words may be used as object property names "in the buff". This means that they don't need to be "clothed" in quotes when defining object literals. See the ES5 <a href="http://es5.github.io/#x7.6.1">Spec</a>.</p> +</div> + +<p>For more on objects and prototypes see <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>. For an explanation of object prototypes and the object prototype chains see <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a>.</p> + +<div class="note"> +<p>Starting in ECMAScript 2015, object keys can be defined by the variable using bracket notation upon being created. <code>{[phoneType]: 12345}</code> is possible instead of just <code>var userPhone = {}; userPhone[phoneType] = 12345</code>.</p> +</div> + +<h2 id="Arrays">Arrays</h2> + +<p>Arrays in JavaScript are actually a special type of object. They work very much like regular objects (numerical properties can naturally be accessed only using <code>[]</code> syntax) but they have one magic property called '<code>length</code>'. This is always one more than the highest index in the array.</p> + +<p>One way of creating arrays is as follows:</p> + +<pre class="brush: js notranslate">var a = new Array(); +a[0] = 'dog'; +a[1] = 'cat'; +a[2] = 'hen'; +a.length; // 3 +</pre> + +<p>A more convenient notation is to use an array literal:</p> + +<pre class="brush: js notranslate">var a = ['dog', 'cat', 'hen']; +a.length; // 3 +</pre> + +<p>Note that <code>array.length</code> isn't necessarily the number of items in the array. Consider the following:</p> + +<pre class="brush: js notranslate">var a = ['dog', 'cat', 'hen']; +a[100] = 'fox'; +a.length; // 101 +</pre> + +<p>Remember — the length of the array is one more than the highest index.</p> + +<p>If you query a non-existent array index, you'll get a value of <code>undefined</code> in return:</p> + +<pre class="brush: js notranslate">typeof a[90]; // undefined +</pre> + +<p>If you take the above about <code>[]</code> and <code>length</code> into account, you can iterate over an array using the following <code>for</code> loop:</p> + +<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { + // Do something with a[i] +} +</pre> + +<p>ES2015 introduced the more concise <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a> loop for iterable objects such as arrays:</p> + +<pre class="brush:js notranslate">for (const currentValue of a) { + // Do something with currentValue +}</pre> + +<p>You could also iterate over an array using a <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="/en/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a> loop, however this does not iterate over the array elements, but the array indices. Furthermore, if someone added new properties to <code>Array.prototype</code>, they would also be iterated over by such a loop. Therefore this loop type is not recommended for arrays.</p> + +<p>Another way of iterating over an array that was added with ECMAScript 5 is <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a></code>:</p> + +<pre class="brush: js notranslate">['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) { + // Do something with currentValue or array[index] +}); +</pre> + +<p>If you want to append an item to an array simply do it like this:</p> + +<pre class="brush: js notranslate">a.push(item);</pre> + +<p>Arrays come with a number of methods. See also the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">full documentation for array methods</a>.</p> + +<table> + <thead> + <tr> + <th scope="col">Method name</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>a.toString()</code></td> + <td>Returns a string with the <code>toString()</code> of each element separated by commas.</td> + </tr> + <tr> + <td><code>a.toLocaleString()</code></td> + <td>Returns a string with the <code>toLocaleString()</code> of each element separated by commas.</td> + </tr> + <tr> + <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td> + <td>Returns a new array with the items added on to it.</td> + </tr> + <tr> + <td><code>a.join(sep)</code></td> + <td>Converts the array to a string — with values delimited by the <code>sep</code> param</td> + </tr> + <tr> + <td><code>a.pop()</code></td> + <td>Removes and returns the last item.</td> + </tr> + <tr> + <td><code>a.push(item1, ..., itemN)</code></td> + <td>Appends items to the end of the array.</td> + </tr> + <tr> + <td><code>a.shift()</code></td> + <td>Removes and returns the first item.</td> + </tr> + <tr> + <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td> + <td>Prepends items to the start of the array.</td> + </tr> + <tr> + <td><code>a.slice(start[, end])</code></td> + <td>Returns a sub-array.</td> + </tr> + <tr> + <td><code>a.sort([cmpfn])</code></td> + <td>Takes an optional comparison function.</td> + </tr> + <tr> + <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td> + <td>Lets you modify an array by deleting a section and replacing it with more items.</td> + </tr> + <tr> + <td><code>a.reverse()</code></td> + <td>Reverses the array.</td> + </tr> + </tbody> +</table> + +<h2 id="Functions">Functions</h2> + +<p>Along with objects, functions are the core component in understanding JavaScript. The most basic function couldn't be much simpler:</p> + +<pre class="brush: js notranslate">function add(x, y) { + var total = x + y; + return total; +} +</pre> + +<p>This demonstrates a basic function. A JavaScript function can take 0 or more named parameters. The function body can contain as many statements as you like and can declare its own variables which are local to that function. The <code>return</code> statement can be used to return a value at any time, terminating the function. If no return statement is used (or an empty return with no value), JavaScript returns <code>undefined</code>.</p> + +<p>The named parameters turn out to be more like guidelines than anything else. You can call a function without passing the parameters it expects, in which case they will be set to <code>undefined</code>.</p> + +<pre class="brush: js notranslate">add(); // NaN +// You can't perform addition on undefined +</pre> + +<p>You can also pass in more arguments than the function is expecting:</p> + +<pre class="brush: js notranslate">add(2, 3, 4); // 5 +// added the first two; 4 was ignored +</pre> + +<p>That may seem a little silly, but functions have access to an additional variable inside their body called <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="/en/JavaScript/Reference/Functions_and_function_scope/arguments"><code>arguments</code></a>, which is an array-like object holding all of the values passed to the function. Let's re-write the add function to take as many values as we want:</p> + +<pre class="brush: js notranslate">function add() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum; +} + +add(2, 3, 4, 5); // 14 +</pre> + +<p>That's really not any more useful than writing <code>2 + 3 + 4 + 5</code> though. Let's create an averaging function:</p> + +<pre class="brush: js notranslate">function avg() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +} + +avg(2, 3, 4, 5); // 3.5 +</pre> + +<p>This is pretty useful, but it does seem a little verbose. To reduce this code a bit more we can look at substituting the use of the arguments array through <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameter syntax</a>. In this way, we can pass in any number of arguments into the function while keeping our code minimal. The <strong>rest parameter operator</strong> is used in function parameter lists with the format: <strong>...variable</strong> and it will include within that variable the entire list of uncaptured arguments that the function was called with. We will also replace the <strong>for</strong> loop with a <strong>for...of</strong> loop to return the values within our variable.</p> + +<pre class="brush: js notranslate">function avg(...args) { + var sum = 0; + for (let value of args) { + sum += value; + } + return sum / args.length; +} + +avg(2, 3, 4, 5); // 3.5 +</pre> + +<div class="note">In the above code, the variable <strong>args</strong> holds all the values that were passed into the function.<br> +<br> +It is important to note that wherever the rest parameter operator is placed in a function declaration it will store all arguments <em>after</em> its declaration, but not before. <em>i.e. function</em> <em>avg(</em><strong>firstValue, </strong><em>...args)</em><strong> </strong>will store the first value passed into the function in the <strong>firstValue </strong>variable and the remaining arguments in <strong>args</strong>. That's another useful language feature but it does lead us to a new problem. The <code>avg()</code> function takes a comma-separated list of arguments — but what if you want to find the average of an array? You could just rewrite the function as follows:</div> + +<pre class="brush: js notranslate">function avgArray(arr) { + var sum = 0; + for (var i = 0, j = arr.length; i < j; i++) { + sum += arr[i]; + } + return sum / arr.length; +} + +avgArray([2, 3, 4, 5]); // 3.5 +</pre> + +<p>But it would be nice to be able to reuse the function that we've already created. Luckily, JavaScript lets you call a function with an arbitrary array of arguments, using the {{jsxref("Function.apply", "apply()")}} method of any function object.</p> + +<pre class="brush: js notranslate">avg.apply(null, [2, 3, 4, 5]); // 3.5 +</pre> + +<p>The second argument to <code>apply()</code> is the array to use as arguments; the first will be discussed later on. This emphasizes the fact that functions are objects too.</p> + +<div class="note"> +<p>You can achieve the same result using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a> in the function call.</p> + +<p>For instance: <code>avg(...numbers)</code></p> +</div> + +<p>JavaScript lets you create anonymous functions.</p> + +<pre class="brush: js notranslate">var avg = function() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +}; +</pre> + +<p>This is semantically equivalent to the <code>function avg()</code> form. It's extremely powerful, as it lets you put a full function definition anywhere that you would normally put an expression. This enables all sorts of clever tricks. Here's a way of "hiding" some local variables — like block scope in C:</p> + +<pre class="brush: js notranslate">var a = 1; +var b = 2; + +(function() { + var b = 3; + a += b; +})(); + +a; // 4 +b; // 2 +</pre> + +<p>JavaScript allows you to call functions recursively. This is particularly useful for dealing with tree structures, such as those found in the browser DOM.</p> + +<pre class="brush: js notranslate">function countChars(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += countChars(child); + } + return count; +} +</pre> + +<p>This highlights a potential problem with anonymous functions: how do you call them recursively if they don't have a name? JavaScript lets you name function expressions for this. You can use named <a href="/en-US/docs/Glossary/IIFE">IIFEs (Immediately Invoked Function Expressions)</a> as shown below:</p> + +<pre class="brush: js notranslate">var charsInBody = (function counter(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += counter(child); + } + return count; +})(document.body); +</pre> + +<p>The name provided to a function expression as above is only available to the function's own scope. This allows more optimizations to be done by the engine and results in more readable code. The name also shows up in the debugger and some stack traces, which can save you time when debugging.</p> + +<p>Note that JavaScript functions are themselves objects — like everything else in JavaScript — and you can add or change properties on them just like we've seen earlier in the Objects section.</p> + +<h2 id="Custom_objects">Custom objects</h2> + +<div class="note">For a more detailed discussion of object-oriented programming in JavaScript, see <a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a>.</div> + +<p>In classic Object Oriented Programming, objects are collections of data and methods that operate on that data. JavaScript is a prototype-based language that contains no class statement, as you'd find in C++ or Java (this is sometimes confusing for programmers accustomed to languages with a class statement). Instead, JavaScript uses functions as classes. Let's consider a person object with first and last name fields. There are two ways in which the name might be displayed: as "first last" or as "last, first". Using the functions and objects that we've discussed previously, we could display the data like this:</p> + +<pre class="brush: js notranslate">function makePerson(first, last) { + return { + first: first, + last: last + }; +} +function personFullName(person) { + return person.first + ' ' + person.last; +} +function personFullNameReversed(person) { + return person.last + ', ' + person.first; +} + +var s = makePerson('Simon', 'Willison'); +personFullName(s); // "Simon Willison" +personFullNameReversed(s); // "Willison, Simon" +</pre> + +<p>This works, but it's pretty ugly. You end up with dozens of functions in your global namespace. What we really need is a way to attach a function to an object. Since functions are objects, this is easy:</p> + +<pre class="brush: js notranslate">function makePerson(first, last) { + return { + first: first, + last: last, + fullName: function() { + return this.first + ' ' + this.last; + }, + fullNameReversed: function() { + return this.last + ', ' + this.first; + } + }; +} + +var s = makePerson('Simon', 'Willison'); +s.fullName(); // "Simon Willison" +s.fullNameReversed(); // "Willison, Simon" +</pre> + +<p>Note on the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this" title="/en/JavaScript/Reference/Operators/this">this</a></code> keyword. Used inside a function, <code>this</code> refers to the current object. What that actually means is specified by the way in which you called that function. If you called it using <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Accessing_properties" title="/en/JavaScript/Reference/Operators/Member_Operators">dot notation or bracket notation</a> on an object, that object becomes <code>this</code>. If dot notation wasn't used for the call, <code>this</code> refers to the global object.</p> + +<p>Note that <code>this</code> is a frequent cause of mistakes. For example:</p> + +<pre class="brush: js notranslate">var s = makePerson('Simon', 'Willison'); +var fullName = s.fullName; +fullName(); // undefined undefined +</pre> + +<p>When we call <code>fullName()</code> alone, without using <code>s.fullName()</code>, <code>this</code> is bound to the global object. Since there are no global variables called <code>first</code> or <code>last</code> we get <code>undefined</code> for each one.</p> + +<p>We can take advantage of the <code>this</code> keyword to improve our <code>makePerson</code> function:</p> + +<pre class="brush: js notranslate">function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = function() { + return this.first + ' ' + this.last; + }; + this.fullNameReversed = function() { + return this.last + ', ' + this.first; + }; +} +var s = new Person('Simon', 'Willison'); +</pre> + +<p>We have introduced another keyword: <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new" title="/en/JavaScript/Reference/Operators/new">new</a></code>. <code>new</code> is strongly related to <code>this</code>. It creates a brand new empty object, and then calls the function specified, with <code>this</code> set to that new object. Notice though that the function specified with <code>this</code> does not return a value but merely modifies the <code>this</code> object. It's <code>new</code> that returns the <code>this</code> object to the calling site. Functions that are designed to be called by <code>new</code> are called constructor functions. Common practice is to capitalize these functions as a reminder to call them with <code>new</code>.</p> + +<p>The improved function still has the same pitfall with calling <code>fullName()</code> alone.</p> + +<p>Our person objects are getting better, but there are still some ugly edges to them. Every time we create a person object we are creating two brand new function objects within it — wouldn't it be better if this code was shared?</p> + +<pre class="brush: js notranslate">function personFullName() { + return this.first + ' ' + this.last; +} +function personFullNameReversed() { + return this.last + ', ' + this.first; +} +function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = personFullName; + this.fullNameReversed = personFullNameReversed; +} +</pre> + +<p>That's better: we are creating the method functions only once, and assigning references to them inside the constructor. Can we do any better than that? The answer is yes:</p> + +<pre class="brush: js notranslate">function Person(first, last) { + this.first = first; + this.last = last; +} +Person.prototype.fullName = function() { + return this.first + ' ' + this.last; +}; +Person.prototype.fullNameReversed = function() { + return this.last + ', ' + this.first; +}; +</pre> + +<p><code>Person.prototype</code> is an object shared by all instances of <code>Person</code>. It forms part of a lookup chain (that has a special name, "prototype chain"): any time you attempt to access a property of <code>Person</code> that isn't set, JavaScript will check <code>Person.prototype</code> to see if that property exists there instead. As a result, anything assigned to <code>Person.prototype</code> becomes available to all instances of that constructor via the <code>this</code> object.</p> + +<p>This is an incredibly powerful tool. JavaScript lets you modify something's prototype at any time in your program, which means you can add extra methods to existing objects at runtime:</p> + +<pre class="brush: js notranslate">var s = new Person('Simon', 'Willison'); +s.firstNameCaps(); // TypeError on line 1: s.firstNameCaps is not a function + +Person.prototype.firstNameCaps = function() { + return this.first.toUpperCase(); +}; +s.firstNameCaps(); // "SIMON" +</pre> + +<p>Interestingly, you can also add things to the prototype of built-in JavaScript objects. Let's add a method to <code>String</code> that returns that string in reverse:</p> + +<pre class="brush: js notranslate">var s = 'Simon'; +s.reversed(); // TypeError on line 1: s.reversed is not a function + +String.prototype.reversed = function() { + var r = ''; + for (var i = this.length - 1; i >= 0; i--) { + r += this[i]; + } + return r; +}; + +s.reversed(); // nomiS +</pre> + +<p>Our new method even works on string literals!</p> + +<pre class="brush: js notranslate">'This can now be reversed'.reversed(); // desrever eb won nac sihT +</pre> + +<p>As mentioned before, the prototype forms part of a chain. The root of that chain is <code>Object.prototype</code>, whose methods include <code>toString()</code> — it is this method that is called when you try to represent an object as a string. This is useful for debugging our <code>Person</code> objects:</p> + +<pre class="brush: js notranslate">var s = new Person('Simon', 'Willison'); +s.toString(); // [object Object] + +Person.prototype.toString = function() { + return '<Person: ' + this.fullName() + '>'; +} + +s.toString(); // "<Person: Simon Willison>" +</pre> + +<p>Remember how <code>avg.apply()</code> had a null first argument? We can revisit that now. The first argument to <code>apply()</code> is the object that should be treated as '<code>this</code>'. For example, here's a trivial implementation of <code>new</code>:</p> + +<pre class="brush: js notranslate">function trivialNew(constructor, ...args) { + var o = {}; // Create an object + constructor.apply(o, args); + return o; +} +</pre> + +<p>This isn't an exact replica of <code>new</code> as it doesn't set up the prototype chain (it would be difficult to illustrate). This is not something you use very often, but it's useful to know about. In this snippet, <code>...args</code> (including the ellipsis) is called the "<a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest arguments</a>" — as the name implies, this contains the rest of the arguments.</p> + +<p>Calling</p> + +<pre class="brush: js notranslate">var bill = trivialNew(Person, 'William', 'Orange');</pre> + +<p>is therefore almost equivalent to</p> + +<pre class="brush: js notranslate">var bill = new Person('William', 'Orange');</pre> + +<p><code>apply()</code> has a sister function named <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="/en/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>, which again lets you set <code>this</code> but takes an expanded argument list as opposed to an array.</p> + +<pre class="brush: js notranslate">function lastNameCaps() { + return this.last.toUpperCase(); +} +var s = new Person('Simon', 'Willison'); +lastNameCaps.call(s); +// Is the same as: +s.lastNameCaps = lastNameCaps; +s.lastNameCaps(); // WILLISON +</pre> + +<h3 id="Inner_functions">Inner functions</h3> + +<p>JavaScript function declarations are allowed inside other functions. We've seen this once before, with an earlier <code>makePerson()</code> function. An important detail of nested functions in JavaScript is that they can access variables in their parent function's scope:</p> + +<pre class="brush: js notranslate">function parentFunc() { + var a = 1; + + function nestedFunc() { + var b = 4; // parentFunc can't use this + return a + b; + } + return nestedFunc(); // 5 +} +</pre> + +<p>This provides a great deal of utility in writing more maintainable code. If a called function relies on one or two other functions that are not useful to any other part of your code, you can nest those utility functions inside it. This keeps the number of functions that are in the global scope down, which is always a good thing.</p> + +<p>This is also a great counter to the lure of global variables. When writing complex code it is often tempting to use global variables to share values between multiple functions — which leads to code that is hard to maintain. Nested functions can share variables in their parent, so you can use that mechanism to couple functions together when it makes sense without polluting your global namespace — "local globals" if you like. This technique should be used with caution, but it's a useful ability to have.</p> + +<h2 id="Closures">Closures</h2> + +<p>This leads us to one of the most powerful abstractions that JavaScript has to offer — but also the most potentially confusing. What does this do?</p> + +<pre class="brush: js notranslate">function makeAdder(a) { + return function(b) { + return a + b; + }; +} +var add5 = makeAdder(5); +var add20 = makeAdder(20); +add5(6); // ? +add20(7); // ? +</pre> + +<p>The name of the <code>makeAdder()</code> function should give it away: it creates new 'adder' functions, each of which, when called with one argument, adds it to the argument that it was created with.</p> + +<p>What's happening here is pretty much the same as was happening with the inner functions earlier on: a function defined inside another function has access to the outer function's variables. The only difference here is that the outer function has returned, and hence common sense would seem to dictate that its local variables no longer exist. But they <em>do</em> still exist — otherwise, the adder functions would be unable to work. What's more, there are two different "copies" of <code>makeAdder()</code>'s local variables — one in which <code>a</code> is 5 and the other one where <code>a</code> is 20. So the result of that function calls is as follows:</p> + +<pre class="brush: js notranslate">add5(6); // returns 11 +add20(7); // returns 27 +</pre> + +<p>Here's what's actually happening. Whenever JavaScript executes a function, a 'scope' object is created to hold the local variables created within that function. It is initialized with any variables passed in as function parameters. This is similar to the global object that all global variables and functions live in, but with a couple of important differences: firstly, a brand new scope object is created every time a function starts executing, and secondly, unlike the global object (which is accessible as <code>this</code> and in browsers as <code>window</code>) these scope objects cannot be directly accessed from your JavaScript code. There is no mechanism for iterating over the properties of the current scope object, for example.</p> + +<p>So when <code>makeAdder()</code> is called, a scope object is created with one property: <code>a</code>, which is the argument passed to the <code>makeAdder()</code> function. <code>makeAdder()</code> then returns a newly created function. Normally JavaScript's garbage collector would clean up the scope object created for <code>makeAdder()</code> at this point, but the returned function maintains a reference back to that scope object. As a result, the scope object will not be garbage-collected until there are no more references to the function object that <code>makeAdder()</code> returned.</p> + +<p>Scope objects form a chain called the scope chain, similar to the prototype chain used by JavaScript's object system.</p> + +<p>A <strong>closure</strong> is the combination of a function and the scope object in which it was created. Closures let you save state — as such, they can often be used in place of objects. You can find <a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work">several excellent introductions to closures</a>.</p> diff --git a/files/fa/web/javascript/index.html b/files/fa/web/javascript/index.html new file mode 100644 index 0000000000..2d8a11b00f --- /dev/null +++ b/files/fa/web/javascript/index.html @@ -0,0 +1,128 @@ +--- +title: جاوا اسکریپت +slug: Web/JavaScript +tags: + - JavaScript + - Landing + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript +--- +<div class="callout-box"><strong><a href="/fa/docs/Web/JavaScript/A_re-introduction_to_JavaScript">یک معرفی مجدد برای جاوااسکریپت</a></strong><br> +یک بررسی کلی برا آنهایی که <em>فکر میکنند</em> در مورد جاوااسکریپت میدانند</div> + +<p dir="rtl">{{JsSidebar}}</p> + +<p dir="rtl"><strong>JavaScript</strong><sup>®</sup> (اغلب به <strong>JS</strong> مخفف میشود) سبک، مفسر، زبان شیگرا شده با <a href="https://en.wikipedia.org/wiki/First-class_functions" title="https://en.wikipedia.org/wiki/First-class_functions">first-class functions</a>، به عنوان زبان اسکریپت نویسی برای صفحات وب شناخته شده است، اما <a class="external" href="http://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">در خیلی از محیطهای غیر مرورگری</a> مانند <a class="external" href="http://nodejs.org/">node.js</a> یا <a href="http://couchdb.apache.org">Apache CouchDB</a> نیز استفاده شده است. زبان اسکریت نویسی آن <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Prototype-based" title="Prototype-based">مبتنی بر نمونه</a> است، <a href="/en-US/docs/multiparadigmlanguage.html" title="/en-US/docs/multiparadigmlanguage.html">چند نمونه</a> که پویا است،<span style="color: #666666; line-height: 21px;"> </span><a href="https://en.wikipedia.org/wiki/Type_safety" style="line-height: 21px;" title="Type safety">نوع امن</a><span style="line-height: 1.572;"> و از شی گرایی پشتیبانی میکند، سبک های برنامه نویسی تابعی را دارد. اطلاعات بیشتر را میتوانید از صفحه <a href="/fa/docs/docs/Web/JavaScript/About_JavaScript">درباره جاوااسکریپت</a></span><span style="line-height: 1.572;"> مشاهده نمایید.</span></p> + +<p dir="rtl">استاندارد جاوااسکریپت <a href="/fa/docs/JavaScript/Language_Resources">اکمااسکریپت</a> (<a href="/fa/docs/JavaScript/Language_Resources">ECMAScript</a>) است که از سال ۲۰۱۲ تمامی مرورگرهای مدرن استاندارد اکمااسکریپت نسخه ۵.۱ را به صورت کامل پشتیبانی میکنند، همچنین مرورگرهای قدیمیتر نسخه ۳ از اکمااسکریپت را پشتیبانی میکنند. از ماه June سال ۲۰۱۵ اکمااسکریپت ۶ (ES6) یا همان اکمااسکریپت ۲۰۱۵ (ES2015) مورد قبول واقع شده است. توضیحات تکمیلی در مورد اکمااسکریپت ۶ را می توانید در <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proposals">dedicated wiki</a> مشاهده نمایید.</p> + +<p dir="rtl">این بخش از سایت به زبان جاوااسکریپت اختصاص داده شده است، قسمتهایی که مختص به صفحات وب، یا دیگر محیطهای میزبانی نیست. برای اطلاعات در مورد APIهای خاص برای صفحات وب، لطفا <a href="/fa/docs/DOM">DOM</a> را ببینید. در مورد اینکه چگونه DOM وJavaScript با همدیگر مناسب هستند در <a href="/fa/docs/Gecko_DOM_Reference/Introduction#DOM_and_JavaScript">مرجع DOM</a> اطلاعات بیشتری را بخوانید.</p> + +<p dir="rtl">JavaScript به صورت <strong>«جاواسکریپت»</strong> خوانده میشود، ولی در فارسی به صورت <strong>«جاوااسکریپت»</strong> ترجمه میشود و اگر به صورت «جاوا اسکریپت» ترجمه شود اشتباه است چون دو کلمه جدا از هم نیست و اگر به صورت دو کلمه جدا نوشته شود خطلاهای نگارشی ایجاد میشود، به طور مثال ممکن است کلمه جاوا در انتهای خط و کلمه اسکریپت در ابتدای خط بعدی نوشته شود.</p> + +<div class="row topicpage-table" dir="rtl"> +<div class="section"> +<h2 class="Documentation" id="مستندات">مستندات</h2> + +<dl> + <dt><a href="/fa/docs/Web/JavaScript/Guide">راهنمای جاوااسکریپت</a></dt> + <dd>اگر شما در جاوااسکریپت تازهکار هستید، باید این راهنما را بخوانید.</dd> + <dt><a href="/fa/docs/Web/JavaScript/Reference">مرجع جاوااسکریپت</a></dt> + <dd>این مرجع جاوااسکریپت شامل مستندات کاملی برای جاوااسکریپت نسخه ۱.۵ و بهروزرسانیهای آن است.</dd> +</dl> + +<h3 id="مقالات_معرفی">مقالات معرفی</h3> + +<dl> + <dt><a href="/fa/docs/Web/JavaScript/JavaScript_technologies_overview">نمای کلی تکنولوژیهای جاوااسکریپت</a></dt> + <dd>آشنایی با چشم انداز جاوااسکریپت برای مرورگر</dd> +</dl> + +<h3 id="مقالات_پیشرفته">مقالات پیشرفته</h3> + +<dl> + <dt><a href="/fa/docs/Web/JavaScript/Data_structures">ساختارهای دادهای جاوااسکریپت</a></dt> + <dd>نمای کلی ساختارهای دادهای قابل دسترس در جاپااسکریپت</dd> + <dt><a href="/fa/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">وراثت و زنجیره نمونه</a></dt> + <dd>توضیح ارثبری مبتنی بر نمونه که بهصورت گستردهای اشتباده و ناچیز شمرده شده است</dd> +</dl> + +<h3 id="مقالات_دیگر">مقالات دیگر</h3> + +<dl> + <dt><a href="/fa/docs/Web/Guide/HTML/Canvas_tutorial">آموزش بوم نقاشی</a></dt> + <dd><canvas> یک المان HTML5 است که برای رسم گرافیکها با استفاده از اسکریپت نویسی استفاده میشود. آن میتواند، برای مثال برای رسم گرافیکها، ترکیب عکس و یا انجام ساده (و نه خیلی ساده) انیمیشنها استفاده شود.</dd> + <dt><a href="/fa/docs/Web/JavaScript/Language_Resources">مراجع زبان جاوااسکریپت</a></dt> + <dd>شرح زبان جاوااسکریپت استاندارد.</dd> + <dt><a class="external" href="http://msdn.microsoft.com/en-us/library/ff405926.aspx">مستندات پشتیبانی استانداردهای اینترنت اکسپلورر</a></dt> + <dd>مایکروسافت مستنداتی منتشر کرده است که "تغییرات، توضیحات، و الحاقیات برخی استانداردهای مورد تایید پشتیبانی شده توسط اینترنت اکسپلورر." را شرح میدهد، بعضی از آنها مربوط به جاوااسکریپت هستند:</dd> + <dd> + <ul> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff520996.aspx">[MS-ES3]: Internet Explorer ECMA-262 ECMAScript Language Specification Standards Support Document </a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff521046.aspx">[MS-ES3EX]: Microsoft JScript Extensions to the ECMAScript Language Specification Third Edition </a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff960769.aspx">[MS-ES5]: Internet Explorer ECMA-262 ECMAScript Language Specification (Fifth Edition) Standards Support Document </a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff955363.aspx">[MS-ES5EX]: Internet Explorer Extensions to the ECMA-262 ECMAScript Language Specification (Fifth Edition)</a></li> + </ul> + </dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/JavaScript">View All...</a></span></p> +</div> + +<div class="section"> +<h2 class="Tools" id="ابزارها_منابع_پیشرفته">ابزارها & منابع پیشرفته</h2> + +<ul> + <li><a href="/fa/docs/Tools">ابزارهای توسعه فایرفاکس</a> - ابزارهای عالی تعبیه شده در فایرفاکس.</li> + <li><a href="http://koding.com">Koding</a> پلت فرم توسعه آنلاین با پشتیبانی جاوااسکریپت</li> + <li><a href="http://www.learnstreet.com/">LearnStreet</a> - آموزشها و تمرینهای عملی رایگان آنلاین.</li> + <li><a href="http://www.codecademy.com/">Codecademy</a> - دوره جاوااسکریپت رایگان با مشکلات تعاملی</li> + <li><a href="http://codeschool.com">Code School </a>- یادگیری بوسیله انجام دادن، چندین دوره جاو.ا اسکریپت</li> + <li><a href="http://frontendmasters.com/" title="http://frontendmasters.com/">Frontend Masters</a> - فیلمهای کارگاه آموزشی جاوااسکریپت و توسعه وب نهایی</li> + <li><a href="http://www.letscodejavascript.com/" title="http://www.letscodejavascript.com/">Let’s Code: Test-Driven JavaScript</a> - سریهای ضبط خیلی دقیق صفحه، توسعه حرفهای جاوااسکریپت</li> + <li><a class="link-https" href="https://github.com/rwldrn/idiomatic.js">Idiomatic.js</a> - اصول نوشتن جاوااسکریپت استوار، اصطلاحی</li> + <li><a href="/en-US/docs/JavaScript/Memory_Management">Memory Management in JavaScript</a> . نمای کلی از چگونگی عملکرد حافظه در جاوااسکریپت</li> + <li><a class="external" href="http://www.getfirebug.com/">Firebug</a> - اشکالزدایی و پروفایلینگ جاوااسکریپت</li> + <li><a href="/en-US/docs/Venkman">Venkman</a> - دیباگر جاوااسکریپت</li> + <li><a href="/en-US/docs/JavaScript/Shells">JavaScript Shells</a> - تست قطعه کدهای کوچک</li> + <li><a class="external" href="http://jshint.com">JSHint</a> - ابزاری که در تشخیص خطا و مشکلات بالقوه در کد جاوااسکریپت شما کمک میکند</li> + <li><a class="external" href="http://www.jslint.com/lint.html">JSLint</a> - چک کننده نحو، در برابر اعمال بد هشدار میدهد</li> + <li><a class="external" href="http://usejsdoc.org/">JSDoc</a> - تولید مستندات از کد</li> + <li><a class="external" href="http://online-marketing-technologies.com/tools/javascript-redirection-generator.html" title="JavaScript Redirect">JavaScript Redirect</a> - ابزار تغییر مسیر پیشرفته جاوااسکریپت</li> + <li><a class="external" href="http://www.aptana.com">Aptana Studio</a> - <span id="result_box" lang="fa"><span class="hps">IDE</span> <span class="hps">متن باز</span> <span class="hps">با</span> پشتیبانی <span class="hps">آژاکس</span> <span class="hps">و</span> <span class="hps">جاوااسکریپت</span> <span class="atn hps">(</span><span>بر اساس</span> eclipse<span>)</span></span></li> + <li><a class="external" href="http://netbeans.org/features/javascript/">Netbeans</a> - IDE متن باز شامل پشتیبانی پیچیده از جاوااسکریپت</li> + <li><a class="external" href="http://www.eclipse.org/downloads/packages/eclipse-ide-javascript-web-developers/heliossr1">Eclipse</a> - IDE متن باز شامل جعبه ابزار توسعه جاوااسکریپت</li> + <li><a class="external" href="http://www.c9.io">Cloud9 IDE</a> - IDE متن باز که در مرورگر اجرا شده با قابلیت پشتیبانی از جاوااسکریپت و Node.js</li> + <li><a class="external" href="http://prettydiff.com/">Pretty Diff </a>- یک ابزار متفاوت برای مقایسه کد خرد شده با کد معمولی</li> + <li><a href="http://www.objectplayground.com/" title="http://www.objectplayground.com/">Object Playground</a> - ابزاری برای درک شیگرایی جاوااسکریپت</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434">Extension Developer's Extension</a> - محیط و شل JS را ارایه میدهد</li> + <li><a href="http://boilerplatejs.org/">BoilerplateJS</a> - مرجع معماری برای پروژههای جاوااسکریپت در مقیاس بزرگ</li> + <li><a href="http://www.jsfiddle.net/">JSFiddle</a> - مورد استفاده برای آزمایش و اصلاح وب سایت با جاوااسکریپت آنلاین. </li> + <li><a href="/fa/docs/JavaScript/Other_JavaScript_tools">دیگر ابزارهای جاوااسکریپت</a></li> +</ul> + +<p><span class="alllinks"><a href="/en-US/docs/tag/JavaScript:Tools">نمایش همه...</a></span></p> + +<h2 class="Community" id="Other_resources" name="Other resources">دیگر منابع</h2> + +<dl> + <dt><a class="external" href="http://bonsaiden.github.com/JavaScript-Garden">JavaScript Garden</a></dt> + <dd>سایتی با اطلاعات مفید در مورد قطعات داخلیتر جاوااسکریپت.</dd> + <dt><a class="link-https" href="https://github.com/bebraw/jswiki/wiki">JSWiki</a></dt> + <dd>یک ویکی مبتنی بر Githubکه منابع و کتابخانهها را ایندکس گذاری کرده است.</dd> + <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> + <dd>یک سایت همکاری ساخته و نگهداری شده Q&A و میتوانید برای جواب سوال خودرا در آن جستجو کنید. اگر جواب سوال خودرا پیدا نکردید میتوانید سوال خودرا در آنجا مطرح کنید.</dd> + <dt><a href="http://pineapple.io/resources/tagged/javascript?type=tutorials&sort=all_time">Pineapple · JavaScript</a></dt> + <dd>یک پایگاه داده بزرگ از آموزش و منابع حال حاضر جاوااسکریپت.</dd> + <dt><a href="http://lifeofjs.com">Life of JavaScript</a></dt> + <dd>منابع عالی در مورد جاوااسکریپت شامل کتاب، ارایهها، فیلمها، فیدها، سایتها، کتابخانهها، محیطهای کاری، ابزارها که در یکجا جمع آموری شده است.</dd> +</dl> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">موضوعات مرتبط</h2> + +<ul> + <li><a href="/fa/docs/AJAX">AJAX</a>, <a href="/fa/docs/DOM">DOM</a>, <a class="internal" href="/fa/docs/JavaScript/Server-Side_JavaScript">Server-Side JavaScript</a>, <a href="/fa/docs/DHTML">DHTML</a>, <a href="/fa/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, <a href="/fa/docs/HTML/Canvas">Canvas</a>, <a href="/fa/docs/JavaScript/JQuery">JQuery</a></li> +</ul> +</div> +</div> diff --git a/files/fa/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/fa/web/javascript/inheritance_and_the_prototype_chain/index.html new file mode 100644 index 0000000000..73aac306f7 --- /dev/null +++ b/files/fa/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -0,0 +1,533 @@ +--- +title: ارث بری و پروتوتایپ در جاوا اسکریپت +slug: Web/JavaScript/Inheritance_and_the_prototype_chain +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +--- +<div>{{jsSidebar("Advanced")}}</div> + +<p>جاوا اسکریپت ممکن است برای کسانی که با زبانهای شی گرا آشنایی دارند کمی گیج کننده باشد (زبانهایی مثل Java یاC++), بدلیل اینکه این زبان پویاست و کمپایل نمیشود و همچنین مفهومی به نام <code>class</code> را ندارد (البته واژه<code>class</code> در نسخه ES2015 معرفی شد, ولی در واقع فقط ظاهر قضیه عوض شده و در باطن کماکان ارث بری در جاوااسکریپت همان سیستم پروتوتایپ است).</p> + +<p>وقتی صحبت از وراثت باشد جاوا اسکریپت فقط یک شی دارد : objects.</p> + +<p>هر آبجکت در جاوااسکریپت یک مشخصه (<strong>property </strong>) مخفی دارد که به یک شی دیگر در رم اشاره میکند که این شی دوم همان <strong>پروتوتایپِ </strong>شی اول است. </p> + +<p> ، این پروتوتایپ هم برای خودش یک پروتوتایپ دارد و ... الی آخر . تا جایی که بالاترین شی در زنجیره پروتوتایپش <code>null</code> است . از آنجایی که <code>null</code> پروتوتایپ ندارد لذا این شی آخر حلقه در این زنجیره است . به این زنجیره ، <strong>زنجیره پروتوتایپ</strong> میگویند</p> + +<p>تقریبا همه اشیا در جاوا اسکریپت فرزند {{jsxref("Object")}} هستند که این شیء ، بالاترین شی در زنجیره پروتوتایپ است</p> + +<p>در حالیکه ممکن است این به عنوان یکی از ضعف های جاوااسکریپت به نظر بیاد ولی در واقع مدل ارث بری پروتوتایپی از مدل سنتی قدرتمند تر است . به طور مثال ساختن مدل سنتی ارث بری با استفاده از مدل پروتوتایپی کار بسیار ساده ای است.</p> + +<h2 id="ارث_بری_با_زنجیره_پروتوتایپ">ارث بری با زنجیره پروتوتایپ</h2> + +<h3 id="ارث_بری_خصوصیات_(properties)">ارث بری خصوصیات (properties)</h3> + +<p>اشیا در جاوا اسکریپت مثل کیف هایی پر از خصوصیات(properties) هستند . اشیا در این زبان همونطور که گفته شد یک لینک به پروتوتایپ خودشون هم دران . وقتی میخواهیم به یک خصوصیت از یک شی دسترسی پیدا کنیم اگر آن خصوصیت در خود شی پیدا نشد جاوا اسکریپت در پروتوتایپ دنبال آن خصوصیت میگردد ، اگر در آنجاهم نشد در پروتوتایپِ مربوط به آن پروتوتایپ و به همین ترتیب تا آخر زنجیره پروتوتایپ پیش میرود که یا property فراخوانی شده پیدا شود یا به انتهای زنجیره برسیم و جستجو تمام شود.</p> + +<div class="note"> +<p> در کدهای اکمااسکریپت زیر منظور از <code>someObject.[[Prototype]]</code> پروتوتایپِ <code>someObject</code> است . از ECMAScript 2015 پروتوتایپ )<code>[[Prototype]](</code> از طریق {{jsxref("Object.getPrototypeOf()")}} و یا {{jsxref("Object.setPrototypeOf()")}} قابل دسترسی است . این روش معادل است با استفاده از <code>__proto__</code> که روشی استاندارد نیست ولی در اکثر مرورگرها پیاده سازی شده و قابل استفاده است.</p> + +<p>این رو نباید با <code><em>func</em>.prototype</code> که در حقیقت یک property از توابع هست اشتباه کنیم ، که کاربردش هم جایی هست که بخواهیم همه اشیایی که توسط function مورد نظر ساخته شدن ، همه دارای پروتایپ دلخواه ما باشن</p> + +<p><code><strong>Object.prototype</strong></code> در واقع {{jsxref("Object")}} در زنجیره پروتوتایپ است</p> +</div> + +<p>وقتی ما یک propertyاز یک شی رو فراخونی میکنیم اتفاقی که میافته به این صورته :</p> + +<pre class="brush: js">// Let's create an object o from function f with its own properties a and b: +let f = function () { + this.a = 1; + this.b = 2; +} +let o = new f(); // {a: 1, b: 2} + +// add properties in f function's prototype +f.prototype.b = 3; +f.prototype.c = 4; + +// do not set the prototype f.prototype = {b:3,c:4}; this will break the prototype chain +// o.[[Prototype]] has properties b and c. +// o.[[Prototype]].[[Prototype]] is Object.prototype. +// Finally, o.[[Prototype]].[[Prototype]].[[Prototype]] is null. +// This is the end of the prototype chain, as null, +// by definition, has no [[Prototype]]. +// Thus, the full prototype chain looks like: +// {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null + +console.log(o.a); // 1 +// Is there an 'a' own property on o? Yes, and its value is 1. + +console.log(o.b); // 2 +// Is there a 'b' own property on o? Yes, and its value is 2. +// The prototype also has a 'b' property, but it's not visited. +// This is called "property shadowing." + +console.log(o.c); // 4 +// Is there a 'c' own property on o? No, check its prototype. +// Is there a 'c' own property on o.[[Prototype]]? Yes, its value is 4. + +console.log(o.d); // undefined +// Is there a 'd' own property on o? No, check its prototype. +// Is there a 'd' own property on o.[[Prototype]]? No, check its prototype. +// o.[[Prototype]].[[Prototype]] is null, stop searching, +// no property found, return undefined. +</pre> + +<p><a href="https://repl.it/@khaled_hossain_code/prototype">Code Link</a></p> + +<p>Setting a property to an object creates an own property. The only exception to the getting and setting behavior rules is when there is an inherited property with a <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">getter or a setter</a>.</p> + +<h3 id="Inheriting_methods">Inheriting "methods"</h3> + +<p>JavaScript does not have "methods" in the form that class-based languages define them. In JavaScript, any function can be added to an object in the form of a property. An inherited function acts just as any other property, including property shadowing as shown above (in this case, a form of <em>method overriding</em>).</p> + +<p>When an inherited function is executed, the value of <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> points to the inheriting object, not to the prototype object where the function is an own property.</p> + +<pre class="brush: js">var o = { + a: 2, + m: function() { + return this.a + 1; + } +}; + +console.log(o.m()); // 3 +// When calling o.m in this case, 'this' refers to o + +var p = Object.create(o); +// p is an object that inherits from o + +p.a = 4; // creates a property 'a' on p +console.log(p.m()); // 5 +// when p.m is called, 'this' refers to p. +// So when p inherits the function m of o, +// 'this.a' means p.a, the property 'a' of p + + +</pre> + +<h2 id="Using_prototypes_in_JavaScript">Using prototypes in JavaScript</h2> + +<p>Let's look at what happens behind the scenes in a bit more detail.</p> + +<p>In JavaScript, as mentioned above, functions are able to have properties. All functions have a special property named <code>prototype</code>. Please note that the code below is free-standing (it is safe to assume there is no other JavaScript on the webpage other than the below code). For the best learning experience, it is highly reccomended that you open a console (which, in Chrome and Firefox, can be done by pressing Ctrl+Shift+I), navigating to the "console" tab, copying-and-pasting in the below JavaScript code, and run it by pressing the Enter/Return key.</p> + +<pre class="brush: js">function doSomething(){} +console.log( doSomething.prototype ); +// It does not matter how you declare the function, a +// function in javascript will always have a default +// prototype property. +var doSomething = function(){}; +console.log( doSomething.prototype ); +</pre> + +<p>As seen above, <code>doSomething()</code> has a default <code>prototype</code> property, as demonstrated by the console. After running this code, the console should have displayed an object that looks similar to this.</p> + +<pre class="brush: js">{ + constructor: ƒ doSomething(), + __proto__: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } +}</pre> + +<p>We can add properties to the prototype of <code>doSomething()</code>, as shown below.</p> + +<pre class="brush: js">function doSomething(){} +doSomething.prototype.foo = "bar"; +console.log( doSomething.prototype );</pre> + +<p>This results in:</p> + +<pre class="brush: js">{ + foo: "bar", + constructor: ƒ doSomething(), + __proto__: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } +} +</pre> + +<p>We can now use the <code>new</code> operator to create an instance of <code>doSomething()</code> based on this prototype. To use the new operator, simply call the function normally except prefix it with <code>new</code>. Calling a function with the <code>new</code> operator returns an object that is an instance of the function. Properties can then be added onto this object.</p> + +<p>Try the following code:</p> + +<pre class="brush: js">function doSomething(){} +doSomething.prototype.foo = "bar"; // add a property onto the prototype +var doSomeInstancing = new doSomething(); +doSomeInstancing.prop = "some value"; // add a property onto the object +console.log( doSomeInstancing );</pre> + +<p>This results in an output similar to the following:</p> + +<pre class="brush: js">{ + prop: "some value", + __proto__: { + foo: "bar", + constructor: ƒ doSomething(), + __proto__: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } + } +}</pre> + +<p>As seen above, the <code>__proto__</code> of <code>doSomeInstancing</code> is <code>doSomething.prototype</code>. But, what does this do? When you access a property of <code>doSomeInstancing</code>, the browser first looks to see if <code>doSomeInstancing</code> has that property.</p> + +<p>If <code>doSomeInstancing</code> does not have the property, then the browser looks for the property in the <code>__proto__</code> of <code>doSomeInstancing</code> (a.k.a. doSomething.prototype). If the <code>__proto__</code> of doSomeInstancing has the property being looked for, then that property on the <code>__proto__</code> of doSomeInstancing is used.</p> + +<p>Otherwise, if the <code>__proto__</code> of doSomeInstancing does not have the property, then the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing is checked for the property. By default, the <code>__proto__</code> of any function's prototype property is <code>window.Object.prototype</code>. So, the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing (a.k.a. the <code>__proto__</code> of doSomething.prototype (a.k.a. <code>Object.prototype</code>)) is then looked through for the property being searched for.</p> + +<p>If the property is not found in the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing, then the <code>__proto__</code> of the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing is looked through. However, there is a problem: the <code>__proto__</code> of the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing does not exist. Then, and only then, after the entire prototype chain of <code>__proto__</code>'s is looked through, and there are no more <code>__proto__</code>s does the browser assert that the property does not exist and conclude that the value at the property is <code>undefined</code>.</p> + +<p>Let's try entering some more code into the console:</p> + +<pre class="brush: js">function doSomething(){} +doSomething.prototype.foo = "bar"; +var doSomeInstancing = new doSomething(); +doSomeInstancing.prop = "some value"; +console.log("doSomeInstancing.prop: " + doSomeInstancing.prop); +console.log("doSomeInstancing.foo: " + doSomeInstancing.foo); +console.log("doSomething.prop: " + doSomething.prop); +console.log("doSomething.foo: " + doSomething.foo); +console.log("doSomething.prototype.prop: " + doSomething.prototype.prop); +console.log("doSomething.prototype.foo: " + doSomething.prototype.foo);</pre> + +<p>This results in the following:</p> + +<pre class="brush: js">doSomeInstancing.prop: some value +doSomeInstancing.foo: bar +doSomething.prop: undefined +doSomething.foo: undefined +doSomething.prototype.prop: undefined +doSomething.prototype.foo: bar</pre> + +<h2 id="Different_ways_to_create_objects_and_the_resulting_prototype_chain">Different ways to create objects and the resulting prototype chain</h2> + +<h3 id="Objects_created_with_syntax_constructs">Objects created with syntax constructs</h3> + +<pre class="brush: js">var o = {a: 1}; + +// The newly created object o has Object.prototype as its [[Prototype]] +// o has no own property named 'hasOwnProperty' +// hasOwnProperty is an own property of Object.prototype. +// So o inherits hasOwnProperty from Object.prototype +// Object.prototype has null as its prototype. +// o ---> Object.prototype ---> null + +var b = ['yo', 'whadup', '?']; + +// Arrays inherit from Array.prototype +// (which has methods indexOf, forEach, etc.) +// The prototype chain looks like: +// b ---> Array.prototype ---> Object.prototype ---> null + +function f() { + return 2; +} + +// Functions inherit from Function.prototype +// (which has methods call, bind, etc.) +// f ---> Function.prototype ---> Object.prototype ---> null +</pre> + +<h3 id="With_a_constructor">With a constructor</h3> + +<p>A "constructor" in JavaScript is "just" a function that happens to be called with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new operator</a>.</p> + +<pre class="brush: js">function Graph() { + this.vertices = []; + this.edges = []; +} + +Graph.prototype = { + addVertex: function(v) { + this.vertices.push(v); + } +}; + +var g = new Graph(); +// g is an object with own properties 'vertices' and 'edges'. +// g.[[Prototype]] is the value of Graph.prototype when new Graph() is executed. +</pre> + +<h3 id="With_Object.create">With <code>Object.create</code></h3> + +<p>ECMAScript 5 introduced a new method: {{jsxref("Object.create()")}}. Calling this method creates a new object. The prototype of this object is the first argument of the function:</p> + +<pre class="brush: js">var a = {a: 1}; +// a ---> Object.prototype ---> null + +var b = Object.create(a); +// b ---> a ---> Object.prototype ---> null +console.log(b.a); // 1 (inherited) + +var c = Object.create(b); +// c ---> b ---> a ---> Object.prototype ---> null + +var d = Object.create(null); +// d ---> null +console.log(d.hasOwnProperty); +// undefined, because d doesn't inherit from Object.prototype +</pre> + +<div> +<h3 id="With_the_class_keyword">With the <code>class</code> keyword</h3> + +<p>ECMAScript 2015 introduced a new set of keywords implementing <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a>. The new keywords include {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, and {{jsxref("Operators/super", "super")}}.</p> + +<pre class="brush: js">'use strict'; + +class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(sideLength) { + super(sideLength, sideLength); + } + get area() { + return this.height * this.width; + } + set sideLength(newLength) { + this.height = newLength; + this.width = newLength; + } +} + +var square = new Square(2); +</pre> + +<h3 id="Performance">Performance</h3> + +<p>The lookup time for properties that are high up on the prototype chain can have a negative impact on the performance, and this may be significant in the code where performance is critical. Additionally, trying to access nonexistent properties will always traverse the full prototype chain.</p> + +<p>Also, when iterating over the properties of an object, <strong>every</strong> enumerable property that is on the prototype chain will be enumerated. To check whether an object has a property defined on <em>itself</em> and not somewhere on its prototype chain, it is necessary to use the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> method which all objects inherit from <code>Object.prototype</code>. To give you a concrete example, let's take the above graph example code to illustrate it:</p> + +<pre class="brush: js">console.log(g.hasOwnProperty('vertices')); +// true + +console.log(g.hasOwnProperty('nope')); +// false + +console.log(g.hasOwnProperty('addVertex')); +// false + +console.log(g.__proto__.hasOwnProperty('addVertex')); +// true +</pre> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> is the only thing in JavaScript which deals with properties and does <strong>not</strong> traverse the prototype chain.</p> + +<p>Note: It is <strong>not</strong> enough to check whether a property is <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>. The property might very well exist, but its value just happens to be set to <code>undefined</code>.</p> +</div> + +<h3 id="Bad_practice_Extension_of_native_prototypes">Bad practice: Extension of native prototypes</h3> + +<p>One misfeature that is often used is to extend <code>Object.prototype</code> or one of the other built-in prototypes.</p> + +<p>This technique is called monkey patching and breaks <em>encapsulation</em>. While used by popular frameworks such as Prototype.js, there is still no good reason for cluttering built-in types with additional <em>non-standard</em> functionality.</p> + +<p>The <strong>only</strong> good reason for extending a built-in prototype is to backport the features of newer JavaScript engines, like <code>Array.forEach</code>.</p> + +<h3 id="Summary_of_methods_for_extending_the_protoype_chain">Summary of methods for extending the protoype chain</h3> + +<p>Here are all 5 ways and their pros/cons. All of the examples listed below create exactly the same resulting <code>inst</code> object (thus logging the same results to the console), except in different ways for the purpose of illustration.</p> + +<table class="standard-table" style="text-align: top;"> + <tbody> + <tr> + <td style="width: 1%;">Name</td> + <td style="vertical-align: top; width: 1%;">Example(s)</td> + <td style="vertical-align: top;">Pro(s)</td> + <td style="vertical-align: top; width: 60%;">Con(s)</td> + </tr> + <tr> + <td>New-initialization</td> + <td style="vertical-align: top;"> + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = new foo; +proto.bar_prop = "bar val"; +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop); +</pre> + </td> + <td style="vertical-align: top;">Supported in every browser imaginable (support goes all the way back to IE 5.5!). Also, it is very fast, very standard, and very JIST-optimizable.</td> + <td style="vertical-align: top;">In order to use this method, the function in question must be initialized. During this initialization, the constructor may store unique information that must be generated per-object. However, this unique information would only be generated once, potentially leading to problems. Additionally, the initialization of the constructor may put unwanted methods onto the object. However, both these are generally not problems at all (in fact, usually beneficial) if it is all your own code and you know what does what where.</td> + </tr> + <tr> + <td>Object.create</td> + <td style="vertical-align: top;"> + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = Object.create( + foo.prototype +); +proto.bar_prop = "bar val"; +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop); +</pre> + + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = Object.create( + foo.prototype, + { + bar_prop: { + value: "bar val" + } + } +); +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop)</pre> + </td> + <td style="vertical-align: top;">Support in all in-use-today browsers which are all non-microsoft browsers plus IE9 and up. Allows the direct setting of __proto__ in a way that is one-time-only so that the browser can better optimize the object. Also allows the creation of objects without a prototype via <code>Object.create(null)</code>.</td> + <td style="vertical-align: top;">Not supported in IE8 and below. However, as Microsoft has discontinued extended support for systems running theses old browsers, this should not be a concern for most applications. Additionally, the slow object initialization can be a performance black hole if using the second argument because each object-descriptor property has its own separate descriptor object. When dealing with hundreds of thousands of object descriptors in the form of object, there can arise a serious issue with lag.</td> + </tr> + <tr> + <td> + <p>Object.setPrototypeOf</p> + </td> + <td style="vertical-align: top;"> + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = { + bar_prop: "bar val" +}; +Object.setPrototypeOf( + proto, foo.prototype +); +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop); +</pre> + + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto; +proto=Object.setPrototypeOf( + { bar_prop: "bar val" }, + foo.prototype +); +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop)</pre> + </td> + <td style="vertical-align: top;">Support in all in-use-today browsers which are all non-microsoft browsers plus IE9 and up. Allows the dynamic manipulation of an objects prototype and can even force a prototype on a prototype-less object created with <code>Object.create(null)</code>.</td> + <td style="vertical-align: top;">Should-be-depredicated and ill-performant. Making your Javascript run fast is completely out of the question if you dare use this in the final production code because many browsers optimize the prototype and try to guess the location of the method in the memory when calling an instance in advance, but setting the prototype dynamically disrupts all these optimizations and can even force some browsers to recompile for deoptimization your code just to make it work according to the specs. Not supported in IE8 and below.</td> + </tr> + <tr> + <td>__proto__</td> + <td style="vertical-align: top;"> + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = { + bar_prop: "bar val"; + __proto__: foo.prototype +}; +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop); +</pre> + + <pre class="brush: js"> +var inst = { + __proto__: { + bar_prop: "bar val", + __proto__: { + foo_prop: "foo val", + __proto__: Object + } + } +}; +console.log(inst.foo_prop); +console.log(inst.bar_prop)</pre> + </td> + <td style="vertical-align: top;">Support in all in-use-today browsers which are all non-microsoft browsers plus IE11 and up. Setting __proto__ to something that is not an object only fails silently. It does not throw an exception.</td> + <td style="vertical-align: top;">Grossly depredicated and non-performant. Making your Javascript run fast is completely out of the question if you dare use this in the final production code because many browsers optimize the prototype and try to guess the location of the method in the memory when calling an instance in advance, but setting the prototype dynamically disrupts all these optimizations and can even force some browsers to recompile for deoptimization your code just to make it work according to the specs. Not supported in IE10 and below.</td> + </tr> + </tbody> +</table> + +<h2 id="prototype_and_Object.getPrototypeOf"><code>prototype</code> and <code>Object.getPrototypeOf</code></h2> + +<p>JavaScript is a bit confusing for developers coming from Java or C++, as it's all dynamic, all runtime, and it has no classes at all. It's all just instances (objects). Even the "classes" we simulate are just a function object.</p> + +<p>You probably already noticed that our <code>function A</code> has a special property called <code>prototype</code>. This special property works with the JavaScript <code>new </code>operator. The reference to the prototype object is copied to the internal <code>[[Prototype]]</code> property of the new instance. For example, when you do <code>var a1 = new A()</code>, JavaScript (after creating the object in memory and before running function <code>A()</code> with <code>this</code> defined to it) sets <code>a1.[[Prototype]] = A.prototype</code>. When you then access properties of the instance, JavaScript first checks whether they exist on that object directly, and if not, it looks in <code>[[Prototype]]</code>. This means that all the stuff you define in <code>prototype</code> is effectively shared by all instances, and you can even later change parts of <code>prototype</code> and have the changes appear in all existing instances, if you wanted to.</p> + +<p>If, in the example above, you do <code>var a1 = new A(); var a2 = new A();</code> then <code>a1.doSomething</code> would actually refer to <code>Object.getPrototypeOf(a1).doSomething</code>, which is the same as the <code>A.prototype.doSomething</code> you defined, i.e. <code>Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething</code>.</p> + +<p>In short, <code>prototype</code> is for types, while <code>Object.getPrototypeOf()</code> is the same for instances.</p> + +<p><code>[[Prototype]]</code> is looked at <em>recursively</em>, i.e. <code>a1.doSomething</code>, <code>Object.getPrototypeOf(a1).doSomething</code>, <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething</code> etc., until it's found or <code>Object.getPrototypeOf </code>returns null.</p> + +<p>So, when you call</p> + +<pre class="brush: js">var o = new Foo();</pre> + +<p>JavaScript actually just does</p> + +<pre class="brush: js">var o = new Object(); +o.[[Prototype]] = Foo.prototype; +Foo.call(o);</pre> + +<p>(or something like that) and when you later do</p> + +<pre class="brush: js">o.someProp;</pre> + +<p>it checks whether <code>o</code> has a property <code>someProp</code>. If not, it checks <code>Object.getPrototypeOf(o).someProp</code>, and if that doesn't exist it checks <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp</code>, and so on.</p> + +<h2 id="In_conclusion">In conclusion</h2> + +<p>It is <strong>essential</strong> to understand the prototypal inheritance model before writing complex code that makes use of it. Also, be aware of the length of the prototype chains in your code and break them up if necessary to avoid possible performance problems. Further, the native prototypes should <strong>never</strong> be extended unless it is for the sake of compatibility with newer JavaScript features.</p> diff --git a/files/fa/web/javascript/reference/classes/index.html b/files/fa/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..e031309f9f --- /dev/null +++ b/files/fa/web/javascript/reference/classes/index.html @@ -0,0 +1,418 @@ +--- +title: Classes +slug: Web/JavaScript/Reference/Classes +tags: + - Classes + - Constructors + - ECMAScript 2015 + - Guide + - Inheritance + - Intermediate + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Classes +--- +<div>{{JsSidebar("Classes")}}</div> + +<p>Classes are a template for creating objects. They encapsulate data with code to work on that data. Classes in JS are built on prototypes but also have some syntax and semantics that are not shared with ES5 classalike semantics.</p> + +<h2 id="Defining_classes">Defining classes</h2> + +<p>Classes are in fact "special <a href="/en-US/docs/Web/JavaScript/Reference/Functions">functions</a>", and just as you can define <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expressions</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>, the class syntax has two components: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressions</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declarations</a>.</p> + +<h3 id="Class_declarations">Class declarations</h3> + +<p>One way to define a class is using a <strong>class declaration</strong>. To declare a class, you use the <code>class</code> keyword with the name of the class ("Rectangle" here).</p> + +<pre class="brush: js notranslate">class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<h4 id="Hoisting">Hoisting</h4> + +<p>An important difference between <strong>function declarations</strong> and <strong>class declarations</strong> is that function declarations are <a href="/en-US/docs/Glossary/Hoisting">hoisted</a> and class declarations are not. You first need to declare your class and then access it, otherwise code like the following will throw a {{jsxref("ReferenceError")}}:</p> + +<pre class="brush: js example-bad notranslate">const p = new Rectangle(); // ReferenceError + +class Rectangle {} +</pre> + +<h3 id="Class_expressions">Class expressions</h3> + +<p>A <strong>class expression</strong> is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class's body. (it can be retrieved through the class's (not an instance's) {{jsxref("Function.name", "name")}} property, though).</p> + +<pre class="brush: js notranslate">// unnamed +let Rectangle = class { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; +console.log(Rectangle.name); +// output: "Rectangle" + +// named +let Rectangle = class Rectangle2 { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; +console.log(Rectangle.name); +// output: "Rectangle2" +</pre> + +<div class="note"> +<p><strong>Note:</strong> Class <strong>expressions</strong> are subject to the same hoisting restrictions as described in the <a href="#Class_declarations">Class declarations</a> section.</p> +</div> + +<h2 id="Class_body_and_method_definitions">Class body and method definitions</h2> + +<p>The body of a class is the part that is in curly brackets <code>{}</code>. This is where you define class members, such as methods or constructor.</p> + +<h3 id="Strict_mode">Strict mode</h3> + +<p>The body of a class is executed in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, i.e., code written here is subject to stricter syntax for increased performance, some otherwise silent errors will be thrown, and certain keywords are reserved for future versions of ECMAScript.</p> + +<h3 id="Constructor">Constructor</h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> method is a special method for creating and initializing an object created with a <code>class</code>. There can only be one special method with the name "constructor" in a class. A {{jsxref("SyntaxError")}} will be thrown if the class contains more than one occurrence of a <code>constructor</code> method.</p> + +<p>A constructor can use the <code>super</code> keyword to call the constructor of the super class.</p> + +<h3 id="Prototype_methods">Prototype methods</h3> + +<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p> + +<pre class="brush: js notranslate">class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } + // Getter + get area() { + return this.calcArea(); + } + // Method + calcArea() { + return this.height * this.width; + } +} + +const square = new Rectangle(10, 10); + +console.log(square.area); // 100</pre> + +<h3 id="Static_methods">Static methods</h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> keyword defines a static method for a class. Static methods are called without <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_object_(class_instance)" title='An example of class instance is "var john = new Person();"'>instantiating </a>their class and <strong>cannot </strong>be called through a class instance. Static methods are often used to create utility functions for an application.</p> + +<pre class="brush: js notranslate">class Point { + constructor(x, y) { + this.x = x; + this.y = y; + } + + static distance(a, b) { + const dx = a.x - b.x; + const dy = a.y - b.y; + + return Math.hypot(dx, dy); + } +} + +const p1 = new Point(5, 5); +const p2 = new Point(10, 10); +p1.distance; //undefined +p2.distance; //undefined + +console.log(Point.distance(p1, p2)); // 7.0710678118654755 +</pre> + +<h3 id="Binding_this_with_prototype_and_static_methods">Binding <code>this</code> with prototype and static methods</h3> + +<p>When a static or prototype method is called without a value for <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, such as by assigning a variable to the method and then calling it, the <code>this</code> value will be <code>undefined</code> inside the method. This behavior will be the same even if the <code><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">"use strict"</a></code> directive isn't present, because code within the <code>class</code> body's syntactic boundary is always executed in strict mode.</p> + +<pre class="brush: js notranslate">class Animal { + speak() { + return this; + } + static eat() { + return this; + } +} + +let obj = new Animal(); +obj.speak(); // the Animal object +let speak = obj.speak; +speak(); // undefined + +Animal.eat() // class Animal +let eat = Animal.eat; +eat(); // undefined</pre> + +<p>If we rewrite the above using traditional function-based syntax in non–strict mode, then <code>this</code> method calls is automatically bound to the initial <code>this</code> value, which by default is the <a href="/en-US/docs/Glossary/Global_object">global object</a>. In strict mode, autobinding will not happen; the value of <code>this</code> remains as passed.</p> + +<pre class="brush: js notranslate">function Animal() { } + +Animal.prototype.speak = function() { + return this; +} + +Animal.eat = function() { + return this; +} + +let obj = new Animal(); +let speak = obj.speak; +speak(); // global object (in non–strict mode) + +let eat = Animal.eat; +eat(); // global object (in non-strict mode) +</pre> + +<h3 id="Instance_properties">Instance properties</h3> + +<p>Instance properties must be defined inside of class methods:</p> + +<pre class="brush: js notranslate">class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<p>Static (class-side) data properties and prototype data properties must be defined outside of the ClassBody declaration:</p> + +<pre class="brush: js notranslate">Rectangle.staticWidth = 20; +Rectangle.prototype.prototypeWidth = 25; +</pre> + +<h3 id="Field_declarations">Field declarations</h3> + +<div class="warning"> +<p>Public and private field declarations are an <a href="https://github.com/tc39/proposal-class-fields">experimental feature (stage 3)</a> proposed at <a href="https://tc39.es">TC39</a>, the JavaScript standards committee. Support in browsers is limited, but the feature can be used through a build step with systems like <a href="https://babeljs.io/">Babel</a>.</p> +</div> + +<h4 id="Public_field_declarations">Public field declarations</h4> + +<p>With the JavaScript field declaration syntax, the above example can be written as:</p> + +<pre class="brush: js notranslate">class Rectangle { + height = 0; + width; + constructor(height, width) { + this.height = height; + this.width = width; + } +} +</pre> + +<p>By declaring fields up-front, class definitions become more self-documenting, and the fields are always present.</p> + +<p>As seen above, the fields can be declared with or without a default value.</p> + +<p>See <a href="/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields">public class fields</a> for more information.</p> + +<h4 id="Private_field_declarations">Private field declarations</h4> + +<p>Using private fields, the definition can be refined as below.</p> + +<pre class="brush: js notranslate">class Rectangle { + #height = 0; + #width; + constructor(height, width) { + this.#height = height; + this.#width = width; + } +} +</pre> + +<p>It's an error to reference private fields from outside of the class; they can only be read or written within the class body. By defining things which are not visible outside of the class, you ensure that your classes' users can't depend on internals, which may change version to version.</p> + +<div class="note"> +<p>Private fields can only be declared up-front in a field declaration.</p> +</div> + +<p>Private fields cannot be created later through assigning to them, the way that normal properties can.</p> + +<p>For more information, see <a href="/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields">private class fields</a>.</p> + +<h2 id="Sub_classing_with_extends">Sub classing with <code>extends</code></h2> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> keyword is used in <em>class declarations</em> or <em>class expressions</em> to create a class as a child of another class.</p> + +<pre class="brush: js notranslate">class Animal { + constructor(name) { + this.name = name; + } + + speak() { + console.log(`${this.name} makes a noise.`); + } +} + +class Dog extends Animal { + constructor(name) { + super(name); // call the super class constructor and pass in the name parameter + } + + speak() { + console.log(`${this.name} barks.`); + } +} + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie barks. +</pre> + +<p>If there is a constructor present in the subclass, it needs to first call super() before using "this".</p> + +<p>One may also extend traditional function-based "classes":</p> + +<pre class="brush: js notranslate">function Animal (name) { + this.name = name; +} + +Animal.prototype.speak = function () { + console.log(`${this.name} makes a noise.`); +} + +class Dog extends Animal { + speak() { + console.log(`${this.name} barks.`); + } +} + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie barks. + +// For similar methods, the child's method takes precedence over parent's method</pre> + +<p>Note that classes cannot extend regular (non-constructible) objects. If you want to inherit from a regular object, you can instead use {{jsxref("Object.setPrototypeOf()")}}:</p> + +<pre class="brush: js notranslate">const Animal = { + speak() { + console.log(`${this.name} makes a noise.`); + } +}; + +class Dog { + constructor(name) { + this.name = name; + } +} + +// If you do not do this you will get a TypeError when you invoke speak +Object.setPrototypeOf(Dog.prototype, Animal); + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie makes a noise. +</pre> + +<h2 id="Species">Species</h2> + +<p>You might want to return {{jsxref("Array")}} objects in your derived array class <code>MyArray</code>. The species pattern lets you override default constructors.</p> + +<p>For example, when using methods such as {{jsxref("Array.map", "map()")}} that returns the default constructor, you want these methods to return a parent <code>Array</code> object, instead of the <code>MyArray</code> object. The {{jsxref("Symbol.species")}} symbol lets you do this:</p> + +<pre class="brush: js notranslate">class MyArray extends Array { + // Overwrite species to the parent Array constructor + static get [Symbol.species]() { return Array; } +} + +let a = new MyArray(1,2,3); +let mapped = a.map(x => x * x); + +console.log(mapped instanceof MyArray); // false +console.log(mapped instanceof Array); // true +</pre> + +<h2 id="Super_class_calls_with_super">Super class calls with <code>super</code></h2> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> keyword is used to call corresponding methods of super class. This is one advantage over prototype-based inheritance.</p> + +<pre class="brush: js notranslate">class Cat { + constructor(name) { + this.name = name; + } + + speak() { + console.log(`${this.name} makes a noise.`); + } +} + +class Lion extends Cat { + speak() { + super.speak(); + console.log(`${this.name} roars.`); + } +} + +let l = new Lion('Fuzzy'); +l.speak(); +// Fuzzy makes a noise. +// Fuzzy roars. +</pre> + +<h2 id="Mix-ins">Mix-ins</h2> + +<p>Abstract subclasses or <em>mix-ins</em> are templates for classes. An ECMAScript class can only have a single superclass, so multiple inheritance from tooling classes, for example, is not possible. The functionality must be provided by the superclass.</p> + +<p>A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:</p> + +<pre class="brush: js notranslate">let calculatorMixin = Base => class extends Base { + calc() { } +}; + +let randomizerMixin = Base => class extends Base { + randomize() { } +}; +</pre> + +<p>A class that uses these mix-ins can then be written like this:</p> + +<pre class="brush: js notranslate">class Foo { } +class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.classes")}}</p> + +<h2 id="Re-running_a_class_definition">Re-running a class definition</h2> + +<p>A class can't be redefined. Attempting to do so produces a <code>SyntaxError</code>.</p> + +<p>If you're experimenting with code in a web browser, such as the Firefox Web Console (<strong>Tools </strong>><strong> Web Developer </strong>><strong> Web Console</strong>) and you 'Run' a definition of a class with the same name twice, you'll get a <code>SyntaxError: redeclaration of let <em>ClassName</em>;</code>. (See further discussion of this issue in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1428672">bug 1428672</a>.) Doing something similar in Chrome Developer Tools gives you a message like <code>Uncaught SyntaxError: Identifier '<em>ClassName</em>' has already been declared at <anonymous>:1:1</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields">Public class fields</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields">Private class fields</a></li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li> + <li><a href="https://github.com/tc39/proposal-class-fields">Fields and public/private class properties proposal (stage 3)</a></li> +</ul> diff --git a/files/fa/web/javascript/reference/errors/index.html b/files/fa/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..c295fccea6 --- /dev/null +++ b/files/fa/web/javascript/reference/errors/index.html @@ -0,0 +1,31 @@ +--- +title: JavaScript error reference +slug: Web/JavaScript/Reference/Errors +tags: + - Debugging + - Error + - Errors + - Exception + - JavaScript + - NeedsTranslation + - TopicStub + - exceptions +translation_of: Web/JavaScript/Reference/Errors +--- +<p>{{jsSidebar("Errors")}}</p> + +<p>Below, you'll find a list of errors which are thrown by JavaScript. These errors can be a helpful debugging aid, but the reported problem isn't always immediately clear. The pages below will provide additional details about these errors. Each error is an object based upon the {{jsxref("Error")}} object, and has a <code>name</code> and a <code>message</code>.</p> + +<p>Errors displayed in the Web console may include a link to the corresponding page below to help you quickly comprehend the problem in your code.</p> + +<h2 id="List_of_errors">List of errors</h2> + +<p>In this list, each page is listed by name (the type of error) and message (a more detailed human-readable error message). Together, these two properties provide a starting point toward understanding and resolving the error. For more information, follow the links below!</p> + +<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>: Beginner's introductory tutorial on fixing JavaScript errors.</li> +</ul> diff --git a/files/fa/web/javascript/reference/errors/too_much_recursion/index.html b/files/fa/web/javascript/reference/errors/too_much_recursion/index.html new file mode 100644 index 0000000000..02a8d54c45 --- /dev/null +++ b/files/fa/web/javascript/reference/errors/too_much_recursion/index.html @@ -0,0 +1,114 @@ +--- +title: 'InternalError: too much recursion' +slug: Web/JavaScript/Reference/Errors/Too_much_recursion +translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Message">Message</h2> + +<pre class="syntaxbox">Error: Out of stack space (Edge) +InternalError: too much recursion (Firefox) +RangeError: Maximum call stack size exceeded (Chrome) +</pre> + +<h2 id="Error_type">Error type</h2> + +<p>{{jsxref("InternalError")}}.</p> + +<h2 id="What_went_wrong">What went wrong?</h2> + +<p>A function that calls itself is called a <em>recursive function</em>. Once a condition is met, the function stops calling itself. This is called a <em>base case</em>.</p> + +<p>In some ways, recursion is analogous to a loop. Both execute the same code multiple times, and both require a condition (to avoid an infinite loop, or rather, infinite recursion in this case). <span class="seoSummary">When there are too many function calls, or a function is missing a base case, JavaScript will throw this error.</span></p> + +<h2 id="Examples">Examples</h2> + +<p>This recursive function runs 10 times, as per the exit condition.</p> + +<pre class="brush: js">function loop(x) { + if (x >= 10) // "x >= 10" is the exit condition + return; + // do stuff + loop(x + 1); // the recursive call +} +loop(0);</pre> + +<p>Setting this condition to an extremely high value, won't work:</p> + +<pre class="brush: js example-bad">function loop(x) { + if (x >= 1000000000000) + return; + // do stuff + loop(x + 1); +} +loop(0); + +// InternalError: too much recursion</pre> + +<p>This recursive function is missing a base case. As there is no exit condition, the function will call itself infinitely.</p> + +<pre class="brush: js example-bad">function loop(x) { + // The base case is missing + +loop(x + 1); // Recursive call +} + +loop(0); + +// InternalError: too much recursion</pre> + +<h3 id="Class_error_too_much_recursion">Class error: too much recursion</h3> + +<pre class="brush: js example-bad">class Person{ + constructor(){} + set name(name){ + this.name = name; // Recursive call + } +} + + +const tony = new Person(); +tony.name = "Tonisha"; // InternalError: too much recursion +</pre> + +<p>When a value is assigned to the property name (this.name = name;) JavaScript needs to set that property. When this happens, the setter function is triggered.</p> + +<pre class="brush: js example-bad">set name(name){ + this.name = name; // Recursive call +} +</pre> + +<div class="note"> +<p>In this example when the setter is triggered, it is told to do the same thing again: <em>to set the same property that it is meant to handle.</em> This causes the function to call itself, again and again, making it infinitely recursive.</p> +</div> + +<p>This issue also appears if the same variable is used in the getter.</p> + +<pre class="brush: js example-bad">get name(){ + return this.name; // Recursive call +} +</pre> + +<p>To avoid this problem, make sure that the property being assigned to inside the setter function is different from the one that initially triggered the setter.The same goes for the getter.</p> + +<pre class="brush: js">class Person{ + constructor(){} + set name(name){ + this._name = name; + } + get name(){ + return this._name; + } +} +const tony = new Person(); +tony.name = "Tonisha"; +console.log(tony); +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{Glossary("Recursion")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Recursion">Recursive functions</a></li> +</ul> diff --git a/files/fa/web/javascript/reference/errors/unexpected_token/index.html b/files/fa/web/javascript/reference/errors/unexpected_token/index.html new file mode 100644 index 0000000000..77fa2e06c5 --- /dev/null +++ b/files/fa/web/javascript/reference/errors/unexpected_token/index.html @@ -0,0 +1,84 @@ +--- +title: 'SyntaxError: Unexpected token' +slug: Web/JavaScript/Reference/Errors/Unexpected_token +translation_of: Web/JavaScript/Reference/Errors/Unexpected_token +--- +<div class="twocolumns"> + +</div> + +<div class="threecolumns"> +<p>{{jsSidebar("Errors")}}</p> +</div> + +<p>The JavaScript exceptions "unexpected token" occur when a specific language construct was expected, but something else was provided. This might be a simple typo.</p> + +<h2 id="Message">Message</h2> + +<pre class="syntaxbox notranslate">SyntaxError: expected expression, got "x" +SyntaxError: expected property name, got "x" +SyntaxError: expected target, got "x" +SyntaxError: expected rest argument name, got "x" +SyntaxError: expected closing parenthesis, got "x" +SyntaxError: expected '=>' after argument list, got "x" +</pre> + +<h2 id="Error_type">Error type</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="What_went_wrong">What went wrong?</h2> + +<p>A specific language construct was expected, but something else was provided. This might be a simple typo.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Expression_expected">Expression expected</h3> + +<p>For example, when chaining expressions, trailing commas are not allowed.</p> + +<pre class="brush: js example-bad notranslate">for (let i = 0; i < 5,; ++i) { + console.log(i); +} +// SyntaxError: expected expression, got ')' +</pre> + +<p>Correct would be omitting the comma or adding another expression:</p> + +<pre class="brush: js example-good notranslate">for (let i = 0; i < 5; ++i) { + console.log(i); +} +</pre> + +<h3 id="Not_enough_brackets">Not enough brackets</h3> + +<p>Sometimes, you leave out brackets around <code>if</code> statements:</p> + +<pre class="brush: js example-bad line-numbers language-js notranslate">function round(n, upperBound, lowerBound){ + if(n > upperBound) || (n < lowerBound){ + throw 'Number ' + String(n) + ' is more than ' + String(upperBound) + ' or less than ' + String(lowerBound); + }else if(n < ((upperBound + lowerBound)/2)){ + return lowerBound; + }else{ + return upperBound; + } +} // SyntaxError: expected expression, got '||'</pre> + +<p>The brackets may look correct at first, but note how the <code>||</code> is outside the brackets. Correct would be putting brackets around the <code>||</code>:</p> + +<pre class="brush: js example-good notranslate">function round(n, upperBound, lowerBound){ + if((n > upperBound) || (n < lowerBound)){ + throw 'Number ' + String(n) + ' is more than ' + String(upperBound) + ' or less than ' + String(lowerBound); + }else if(n < ((upperBound + lowerBound)/2)){ + return lowerBound; + }else{ + return upperBound; + } +} +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("SyntaxError")}}</li> +</ul> diff --git a/files/fa/web/javascript/reference/functions/index.html b/files/fa/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..4f1c4136cc --- /dev/null +++ b/files/fa/web/javascript/reference/functions/index.html @@ -0,0 +1,596 @@ +--- +title: Functions +slug: Web/JavaScript/Reference/Functions +tags: + - Constructor + - Function + - Functions + - JavaScript + - NeedsTranslation + - Parameter + - TopicStub + - parameters +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Generally speaking, a function is a "subprogram" that can be <em>called</em> by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the <em>function body</em>. Values can be <em>passed</em> to a function, and the function will <em>return</em> a value.</p> + +<p>In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> objects.</p> + +<p>For more examples and explanations, see also the <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript guide about functions</a>.</p> + +<h2 id="Description">Description</h2> + +<p>Every function in JavaScript is a <code>Function</code> object. See {{jsxref("Function")}} for information on properties and methods of <code>Function</code> objects.</p> + +<p>To return a value other than the default, a function must have a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> statement that specifies the value to return. A function without a return statement will return a default value. In the case of a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a> called with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword, the default value is the value of its <code>this</code> parameter. For all other functions, the default return value is {{jsxref("undefined")}}.</p> + +<p>The parameters of a function call are the function's <em>arguments</em>. Arguments are passed to functions <em>by value</em>. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:</p> + +<pre class="brush: js">/* Declare the function 'myFunc' */ +function myFunc(theObject) { + theObject.brand = "Toyota"; + } + + /* + * Declare variable 'mycar'; + * create and initialize a new Object; + * assign reference to it to 'mycar' + */ + var mycar = { + brand: "Honda", + model: "Accord", + year: 1998 + }; + + /* Logs 'Honda' */ + console.log(mycar.brand); + + /* Pass object reference to the function */ + myFunc(mycar); + + /* + * Logs 'Toyota' as the value of the 'brand' property + * of the object, as changed to by the function. + */ + console.log(mycar.brand); +</pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> does not refer to the currently executing function, so you must refer to <code>Function</code> objects by name, even within the function body.</p> + +<h2 id="Defining_functions">Defining functions</h2> + +<p>There are several ways to define functions:</p> + +<h3 id="The_function_declaration_(function_statement)">The function declaration (<code>function</code> statement)</h3> + +<p>There is a special syntax for declaring functions (see <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> for details):</p> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_function_expression_(function_expression)">The function expression (<code>function</code> expression)</h3> + +<p>A function expression is similar to and has the same syntax as a function declaration (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> for details). A function expression may be a part of a larger expression. One can define "named" function expressions (where the name of the expression might be used in the call stack for example) or "anonymous" function expressions. Function expressions are not <em>hoisted</em> onto the beginning of the scope, therefore they cannot be used before they appear in the code.</p> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<p>Here is an example of an <strong>anonymous</strong> function expression (the <code>name</code> is not used):</p> + +<pre class="brush: js">var myFunction = function() { + statements +}</pre> + +<p>It is also possible to provide a name inside the definition in order to create a <strong>named</strong> function expression:</p> + +<pre class="brush: js">var myFunction = function namedFunction(){ + statements +} +</pre> + +<p>One of the benefit of creating a named function expression is that in case we encounted an error, the stack trace will contain the name of the function, making it easier to find the origin of the error.</p> + +<p>As we can see, both examples do not start with the <code>function</code> keyword. Statements involving functions which do not start with <code>function</code> are function expressions.</p> + +<p>When functions are used only once, a common pattern is an <strong>IIFE (<em>Immediately Invokable Function Expression</em>)</strong>.</p> + +<pre class="brush: js">(function() { + statements +})();</pre> + +<p>IIFE are function expressions that are invoked as soon as the function is declared.</p> + +<h3 id="The_generator_function_declaration_(function*_statement)">The generator function declaration (<code>function*</code> statement)</h3> + +<p>There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):</p> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_expression_(function*_expression)">The generator function expression (<code>function*</code> expression)</h3> + +<p>A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):</p> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_arrow_function_expression_(>)">The arrow function expression (=>)</h3> + +<p>An arrow function expression has a shorter syntax and lexically binds its <code>this</code> value (see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> for details):</p> + +<pre class="syntaxbox">([param[, param]]) => { + statements +} + +param => expression +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument. Zero arguments need to be indicated with <code>()</code>. For only one argument, the parentheses are not required. (like <code>foo => 1</code>)</dd> + <dt><code>statements or expression</code></dt> + <dd>Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.</dd> +</dl> + +<h3 id="The_Function_constructor">The <code>Function</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>Function</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("Function")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function body.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h3 id="The_GeneratorFunction_constructor">The <code>GeneratorFunction</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> <code>GeneratorFunction</code> is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>GeneratorFunction</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Function_parameters">Function parameters</h2> + +<h3 id="Default_parameters">Default parameters</h3> + +<p>Default function parameters allow formal parameters to be initialized with default values if no value or <code>undefined</code> is passed. For more details, see<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p> + +<h3 id="Rest_parameters">Rest parameters</h3> + +<p>The rest parameter syntax allows to represent an indefinite number of arguments as an array. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p> + +<h2 id="The_arguments_object">The <code>arguments</code> object</h2> + +<p>You can refer to a function's arguments within the function by using the <code>arguments</code> object. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p> + +<ul> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: An array-like object containing the arguments passed to the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: The currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : The function that invoked the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: The number of arguments passed to the function.</li> +</ul> + +<h2 id="Defining_method_functions">Defining method functions</h2> + +<h3 id="Getter_and_setter_functions">Getter and setter functions</h3> + +<p>You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>Binds an object property to a function that will be called when that property is looked up.</p> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>Binds an object property to a function to be called when there is an attempt to set that property.</dd> +</dl> + +<h3 id="Method_definition_syntax">Method definition syntax</h3> + +<p>Starting with ECMAScript 2015, you are able to define own methods in a shorter syntax, similar to the getters and setters. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more information.</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="Function_constructor_vs._function_declaration_vs._function_expression"><code>Function</code> constructor vs. function declaration vs. function expression</h2> + +<p>Compare the following:</p> + +<p>A function defined with the <code>Function</code> constructor assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = new Function('x', 'y', 'return x * y');</pre> + +<p>A <em>function declaration</em> of a function named <code>multiply</code>:</p> + +<pre class="brush: js">function multiply(x, y) { + return x * y; +} // there is no semicolon here +</pre> + +<p>A <em>function expression</em> of an anonymous function assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p>A <em>function expression</em> of a function named <code>func_name</code> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="Differences">Differences</h3> + +<p>All do approximately the same thing, with a few subtle differences:</p> + +<p>There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or <code>undefined</code> if the function name was previously declared via a <code>var</code> statement). For example:</p> + +<pre class="brush: js">var y = function x() {}; +alert(x); // throws an error +</pre> + +<p>The function name also appears when the function is serialized via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>.</p> + +<p>On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope in which the function is declared.</p> + +<p>As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other. A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:</p> + +<p>A function defined by '<code>new Function'</code> does not have a function name. However, in the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, <code>alert(new Function())</code> outputs:</p> + +<pre class="brush: js">function anonymous() { +} +</pre> + +<p>Since the function actually does not have a name, <code>anonymous</code> is not a variable that can be accessed within the function. For example, the following would result in an error:</p> + +<pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>Unlike functions defined by function expressions or by the <code>Function</code> constructor, a function defined by a function declaration can be used before the function declaration itself. For example:</p> + +<pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + +<p>A function defined by a function expression or by a function declaration inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a <code>Function</code> constructor does not inherit any scope other than the global scope (which all functions inherit).</p> + +<pre class="brush: js">/* + * Declare and initialize a variable 'p' (global) + * and a function 'myFunc' (to change the scope) inside which + * declare a varible with same name 'p' (current) and + * define three functions using three different ways:- + * 1. function declaration + * 2. function expression + * 3. function constructor + * each of which will log 'p' + */ +var p = 5; +function myFunc() { + var p = 9; + + function decl() { + console.log(p); + } + var expr = function() { + console.log(p); + }; + var cons = new Function('\tconsole.log(p);'); + + decl(); + expr(); + cons(); +} +myFunc(); + +/* + * Logs:- + * 9 - for 'decl' by function declaration (current scope) + * 9 - for 'expr' by function expression (current scope) + * 5 - for 'cons' by Function constructor (global scope) + */ +</pre> + +<p>Functions defined by function expressions and function declarations are parsed only once, while those defined by the <code>Function</code> constructor are not. That is, the function body string passed to the <code>Function</code> constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "<code>new Function(...)</code>". Therefore the <code>Function</code> constructor should generally be avoided whenever possible.</p> + +<p>It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a <code>Function constructor</code> 's string aren't parsed repeatedly. For example:</p> + +<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre> + +<p>A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:</p> + +<ul> + <li>becomes part of an expression</li> + <li>is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:</li> +</ul> + +<pre class="brush: js">var x = 0; // source element +if (x === 0) { // source element + x = 10; // not a source element + function boo() {} // not a source element +} +function foo() { // source element + var y = 20; // source element + function bar() {} // source element + while (y === 10) { // source element + function blah() {} // not a source element + y++; // not a source element + } +} +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">// function declaration +function foo() {} + +// function expression +(function bar() {}) + +// function expression +x = function hello() {} + + +if (x) { + // function expression + function world() {} +} + + +// function declaration +function a() { + // function declaration + function b() {} + if (0) { + // function expression + function c() {} + } +} +</pre> + +<h2 id="Block-level_functions">Block-level functions</h2> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, starting with ES2015, functions inside blocks are now scoped to that block. Prior to ES2015, block-level functions were forbidden in strict mode.</p> + +<pre class="brush: js">'use strict'; + +function f() { + return 1; +} + +{ + function f() { + return 2; + } +} + +f() === 1; // true + +// f() === 2 in non-strict mode +</pre> + +<h3 id="Block-level_functions_in_non-strict_code">Block-level functions in non-strict code</h3> + +<p>In a word: Don't.</p> + +<p>In non-strict code, function declarations inside blocks behave strangely. For example:</p> + +<pre class="brush: js">if (shouldDefineZero) { + function zero() { // DANGER: compatibility risk + console.log("This is zero."); + } +} +</pre> + +<p>ES2015 says that if <code>shouldDefineZero</code> is false, then <code>zero</code> should never be defined, since the block never executes. However, it's a new part of the standard. Historically, this was left unspecified, and some browsers would define <code>zero</code> whether the block executed or not.</p> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, all browsers that support ES2015 handle this the same way: <code>zero</code> is defined only if <code>shouldDefineZero</code> is true, and only in the scope of the <code>if</code>-block.</p> + +<p>A safer way to define functions conditionally is to assign a function expression to a variable:</p> + +<pre class="brush: js">var zero; +if (shouldDefineZero) { + zero = function() { + console.log("This is zero."); + }; +} +</pre> + +<h2 id="Examples_2">Examples</h2> + +<h3 id="Returning_a_formatted_number">Returning a formatted number</h3> + +<p>The following function returns a string containing the formatted representation of a number padded with leading zeros.</p> + +<pre class="brush: js">// This function returns a string padded with leading zeros +function padZeros(num, totalLen) { + var numStr = num.toString(); // Initialize return value as string + var numZeros = totalLen - numStr.length; // Calculate no. of zeros + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>The following statements call the padZeros function.</p> + +<pre class="brush: js">var result; +result = padZeros(42,4); // returns "0042" +result = padZeros(42,2); // returns "42" +result = padZeros(5,4); // returns "0005" +</pre> + +<h3 id="Determining_whether_a_function_exists">Determining whether a function exists</h3> + +<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is performed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise some other action is taken.</p> + +<pre class="brush: js"> if ('function' === typeof window.noFunc) { + // use noFunc() + } else { + // do something else + } +</pre> + +<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Arrow functions, Generator functions, default parameters, rest parameters.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.functions")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> + <li>{{jsxref("Functions/arguments", "Arguments object")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li> +</ul> diff --git a/files/fa/web/javascript/reference/global_objects/array/index.html b/files/fa/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..8780c0cb7b --- /dev/null +++ b/files/fa/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,464 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - Example + - Global Objects + - JavaScript + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<div>{{JSRef}}</div> + +<div dir="rtl">شیء <strong><code>Array</code></strong> در جاوااسکریپت یک شیء عمومی است که در ساخت آرایه ها استفاده می شود که اشیائی سطح بالا شبیه فهرست هستند.</div> + +<div dir="rtl"></div> + +<p dir="rtl"><strong>ساخت یک آرایه</strong></p> + +<pre class="brush: js">var fruits = ['Apple', 'Banana']; + +console.log(fruits.length); +// 2 +</pre> + +<p dir="rtl"><strong>دسترسی به یک آیتم در آرایه (بر اساس نمایه)</strong></p> + +<pre class="brush: js">var first = fruits[0]; +// Apple + +var last = fruits[fruits.length - 1]; +// Banana +</pre> + +<p dir="rtl"><strong>اجرای حلقه روی آرایه</strong></p> + +<pre class="brush: js">fruits.forEach(function(item, index, array) { + console.log(item, index); +}); +// Apple 0 +// Banana 1 +</pre> + +<p dir="rtl"><strong>اضافه کردن به انتهای آرایه</strong></p> + +<pre class="brush: js">var newLength = fruits.push('Orange'); +// ["Apple", "Banana", "Orange"] +</pre> + +<p dir="rtl"><strong>حذف کردن از انتهای آرایه</strong></p> + +<pre class="brush: js">var last = fruits.pop(); // remove Orange (from the end) +// ["Apple", "Banana"]; +</pre> + +<p dir="rtl"><strong>حذف کردن از ابتدای آرایه</strong></p> + +<pre class="brush: js">var first = fruits.shift(); // remove Apple from the front +// ["Banana"]; +</pre> + +<p dir="rtl"><strong>اضافه کردن به ابتدای آرایه</strong></p> + +<pre class="brush: js">var newLength = fruits.unshift('Strawberry') // add to the front +// ["Strawberry", "Banana"]; +</pre> + +<p dir="rtl"><strong>پیدا کردن نمایه یک آیتم در یک آرایه</strong></p> + +<pre class="brush: js">fruits.push('Mango'); +// ["Strawberry", "Banana", "Mango"] + +var pos = fruits.indexOf('Banana'); +// 1 +</pre> + +<p dir="rtl"><strong>پاک کردن یک آیتم بر اساس موقعیت نمایه</strong></p> + +<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // this is how to remove an item + +// ["Strawberry", "Mango"]</pre> + +<p dir="rtl"><strong>پاک کردن آیتم ها بر اساس موقعیت نمایه</strong></p> + +<pre class="brush: js">var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot']; +console.log(vegetables); +// ["Cabbage", "Turnip", "Radish", "Carrot"] + +var pos = 1, n = 2; + +var removedItems = vegetables.splice(pos, n); +// this is how to remove items, n defines the number of items to be removed, +// from that position(pos) onward to the end of array. + +console.log(vegetables); +// ["Cabbage", "Carrot"] (the original array is changed) + +console.log(removedItems); +// ["Turnip", "Radish"]</pre> + +<p dir="rtl"><strong>کپی کردن یک آرایه</strong></p> + +<pre class="brush: js">var shallowCopy = fruits.slice(); // this is how to make a copy +// ["Strawberry", "Mango"] +</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>arrayLength</var>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>A JavaScript array is initialized with the given elements, except in the case where a single argument is passed to the <code>Array</code> constructor and that argument is a number (see the arrayLength parameter below). Note that this special case only applies to JavaScript arrays created with the <code>Array</code> constructor, not array literals created with the bracket syntax.</dd> + <dt><code>arrayLength</code></dt> + <dd>If the only argument passed to the <code>Array</code> constructor is an integer between 0 and 2<sup>32</sup>-1 (inclusive), this returns a new JavaScript array with its <code>length</code> property set to that number (<strong>Note:</strong> this implies an array of <code>arrayLength</code> empty slots, not slots with actual <code>undefined</code> values). If the argument is any other number, a {{jsxref("RangeError")}} exception is thrown.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array's length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them. In general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays.</p> + +<p>Arrays cannot use strings as element indexes (as in an <a href="https://en.wikipedia.org/wiki/Associative_array">associative array</a>) but must use integers. Setting or accessing via non-integers using <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">bracket notation</a> (or <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">dot notation</a>) will not set or retrieve an element from the array list itself, but will set or access a variable associated with that array's <a href="/en-US/docs/Web/JavaScript/Data_structures#Properties">object property collection</a>. The array's object properties and list of array elements are separate, and the array's <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_methods">traversal and mutation operations</a> cannot be applied to these named properties.</p> + +<h3 id="Accessing_array_elements">Accessing array elements</h3> + +<p>JavaScript arrays are zero-indexed: the first element of an array is at index <code>0</code>, and the last element is at the index equal to the value of the array's {{jsxref("Array.length", "length")}} property minus 1. Using an invalid index number returns <code>undefined</code>.</p> + +<pre class="brush: js">var arr = ['this is the first element', 'this is the second element', 'this is the last element']; +console.log(arr[0]); // logs 'this is the first element' +console.log(arr[1]); // logs 'this is the second element' +console.log(arr[arr.length - 1]); // logs 'this is the last element' +</pre> + +<p>Array elements are object properties in the same way that <code>toString</code> is a property, but trying to access an element of an array as follows throws a syntax error because the property name is not valid:</p> + +<pre class="brush: js">console.log(arr.0); // a syntax error +</pre> + +<p>There is nothing special about JavaScript arrays and the properties that cause this. JavaScript properties that begin with a digit cannot be referenced with dot notation; and must be accessed using bracket notation. For example, if you had an object with a property named <code>'3d'</code>, it can only be referenced using bracket notation. E.g.:</p> + +<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +console.log(years.0); // a syntax error +console.log(years[0]); // works properly +</pre> + +<pre class="brush: js">renderer.3d.setTexture(model, 'character.png'); // a syntax error +renderer['3d'].setTexture(model, 'character.png'); // works properly +</pre> + +<p>Note that in the <code>3d</code> example, <code>'3d'</code> had to be quoted. It's possible to quote the JavaScript array indexes as well (e.g., <code>years['2']</code> instead of <code>years[2]</code>), although it's not necessary. The 2 in <code>years[2]</code> is coerced into a string by the JavaScript engine through an implicit <code>toString</code> conversion. It is, for this reason, that <code>'2'</code> and <code>'02'</code> would refer to two different slots on the <code>years</code> object and the following example could be <code>true</code>:</p> + +<pre class="brush: js">console.log(years['2'] != years['02']); +</pre> + +<p>Similarly, object properties which happen to be reserved words(!) can only be accessed as string literals in bracket notation (but it can be accessed by dot notation in firefox 40.0a2 at least):</p> + +<pre class="brush: js">var promise = { + 'var' : 'text', + 'array': [1, 2, 3, 4] +}; + +console.log(promise['var']); +</pre> + +<h3 id="Relationship_between_length_and_numerical_properties">Relationship between <code>length</code> and numerical properties</h3> + +<p>A JavaScript array's {{jsxref("Array.length", "length")}} property and numerical properties are connected. Several of the built-in array methods (e.g., {{jsxref("Array.join", "join()")}}, {{jsxref("Array.slice", "slice()")}}, {{jsxref("Array.indexOf", "indexOf()")}}, etc.) take into account the value of an array's {{jsxref("Array.length", "length")}} property when they're called. Other methods (e.g., {{jsxref("Array.push", "push()")}}, {{jsxref("Array.splice", "splice()")}}, etc.) also result in updates to an array's {{jsxref("Array.length", "length")}} property.</p> + +<pre class="brush: js">var fruits = []; +fruits.push('banana', 'apple', 'peach'); + +console.log(fruits.length); // 3 +</pre> + +<p>When setting a property on a JavaScript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's {{jsxref("Array.length", "length")}} property accordingly:</p> + +<pre class="brush: js">fruits[5] = 'mango'; +console.log(fruits[5]); // 'mango' +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 6 +</pre> + +<p>Increasing the {{jsxref("Array.length", "length")}}.</p> + +<pre class="brush: js">fruits.length = 10; +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 10 +</pre> + +<p>Decreasing the {{jsxref("Array.length", "length")}} property does, however, delete elements.</p> + +<pre class="brush: js">fruits.length = 2; +console.log(Object.keys(fruits)); // ['0', '1'] +console.log(fruits.length); // 2 +</pre> + +<p>This is explained further on the {{jsxref("Array.length")}} page.</p> + +<h3 id="Creating_an_array_using_the_result_of_a_match">Creating an array using the result of a match</h3> + +<p>The result of a match between a regular expression and a string can create a JavaScript array. This array has properties and elements which provide information about the match. Such an array is returned by {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. To help explain these properties and elements, look at the following example and then refer to the table below:</p> + +<pre class="brush: js">// Match one d followed by one or more b's followed by one d +// Remember matched b's and the following d +// Ignore case + +var myRe = /d(b+)(d)/i; +var myArray = myRe.exec('cdbBdbsbz'); +</pre> + +<p>The properties and elements returned from this match are as follows:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Property/Element</td> + <td class="header">Description</td> + <td class="header">Example</td> + </tr> + <tr> + <td><code>input</code></td> + <td>A read-only property that reflects the original string against which the regular expression was matched.</td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>A read-only property that is the zero-based index of the match in the string.</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>A read-only element that specifies the last matched characters.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ...[n]</code></td> + <td>Read-only elements that specify the parenthesized substring matches, if included in the regular expression. The number of possible parenthesized substrings is unlimited.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Array.length</code></dt> + <dd>The <code>Array</code> constructor's length property whose value is 1.</dd> + <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Allows the addition of properties to all array objects.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Array.from()")}}</dt> + <dd>Creates a new <code>Array</code> instance from an array-like or iterable object.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Returns true if a variable is an array, if not false.</dd> + <dt>{{jsxref("Array.of()")}}</dt> + <dd>Creates a new <code>Array</code> instance with a variable number of arguments, regardless of number or type of the arguments.</dd> +</dl> + +<h2 id="Array_instances"><code>Array</code> instances</h2> + +<p>All <code>Array</code> instances inherit from {{jsxref("Array.prototype")}}. The prototype object of the <code>Array</code> constructor can be modified to affect all <code>Array</code> instances.</p> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<h4 id="Mutator_methods">Mutator methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div> + +<h4 id="Accessor_methods">Accessor methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div> + +<h4 id="Iteration_methods">Iteration methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div> + +<h2 id="Array_generic_methods"><code>Array</code> generic methods</h2> + +<div class="warning"> +<p><strong>Array generics are non-standard, deprecated and will get removed in the near future</strong>.</p> +</div> + +<p>{{Obsolete_Header("Gecko71")}}</p> + +<p>Sometimes you would like to apply array methods to strings or other array-like objects (such as function {{jsxref("Functions/arguments", "arguments", "", 1)}}). By doing this, you treat a string as an array of characters (or otherwise treat a non-array as an array). For example, in order to check that every character in the variable <var>str</var> is a letter, you would write:</p> + +<pre class="brush: js">function isLetter(character) { + return character >= 'a' && character <= 'z'; +} + +if (Array.prototype.every.call(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>This notation is rather wasteful and JavaScript 1.6 introduced a generic shorthand:</p> + +<pre class="brush: js">if (Array.every(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} are also available on {{jsxref("String")}}.</p> + +<p>These are <strong>not</strong> part of ECMAScript standards and they are not supported by non-Gecko browsers. As a standard alternative, you can convert your object to a proper array using {{jsxref("Array.from()")}}; although that method may not be supported in old browsers:</p> + +<pre class="brush: js">if (Array.from(str).every(isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Creating_an_array">Creating an array</h3> + +<p>The following example creates an array, <code>msgArray</code>, with a length of 0, then assigns values to <code>msgArray[0]</code> and <code>msgArray[99]</code>, changing the length of the array to 100.</p> + +<pre class="brush: js">var msgArray = []; +msgArray[0] = 'Hello'; +msgArray[99] = 'world'; + +if (msgArray.length === 100) { + console.log('The length is 100.'); +} +</pre> + +<h3 id="Creating_a_two-dimensional_array">Creating a two-dimensional array</h3> + +<p>The following creates a chess board as a two-dimensional array of strings. The first move is made by copying the 'p' in (6,4) to (4,4). The old position (6,4) is made blank.</p> + +<pre class="brush: js">var board = [ + ['R','N','B','Q','K','B','N','R'], + ['P','P','P','P','P','P','P','P'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['p','p','p','p','p','p','p','p'], + ['r','n','b','q','k','b','n','r'] ]; + +console.log(board.join('\n') + '\n\n'); + +// Move King's Pawn forward 2 +board[4][4] = board[6][4]; +board[6][4] = ' '; +console.log(board.join('\n')); +</pre> + +<p>Here is the output:</p> + +<pre class="eval">R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +p,p,p,p,p,p,p,p +r,n,b,q,k,b,n,r + +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +r,n,b,q,k,b,n,r +</pre> + +<h3 id="Using_an_array_to_tabulate_a_set_of_values">Using an array to tabulate a set of values</h3> + +<pre class="brush: js">values = []; +for (var x = 0; x < 10; x++){ + values.push([ + 2 ** x, + 2 * x ** 2 + ]) +}; +console.table(values)</pre> + +<p>Results in</p> + +<pre class="eval">0 1 0 +1 2 2 +2 4 8 +3 8 18 +4 16 32 +5 32 50 +6 64 72 +7 128 98 +8 256 128 +9 512 162</pre> + +<p>(First column is the (index))</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>New methods added: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New methods added: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>New method added: {{jsxref("Array.prototype.includes()")}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Array")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">JavaScript Guide: “Indexed collections: <code>Array</code> object”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li> + <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li> + <li><a href="/en-US/docs/JavaScript_typed_arrays">Typed Arrays</a></li> +</ul> diff --git a/files/fa/web/javascript/reference/global_objects/array/of/index.html b/files/fa/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..0c5aa6d2fa --- /dev/null +++ b/files/fa/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,102 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Global_Objects/Array/of +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +<div>{{JSRef}}</div> + +<div>متد Array.of() یک آرایه ی جدید شامل آرگومان های ارسال شده به آن میباشد میسازد، صرفنظر از تعداد و نوع آرگومان ها. </div> + +<p>تفاوت متد Array.of() و متد سازنده ی Array() در این میباشد که Array.of(7) یک آرایه با یک المنت که مقدارش 7 میباشد میسازد. در حالیکه Array(7) یک آرایه ی جدید با طول 7 که شامل 7 المنت یا slot با مقدار empty میسازد نه با مقدار undefined.</p> + +<pre class="brush: js">Array.of(7); // [7] +Array.of(1, 2, 3); // [1, 2, 3] + +Array(7); // array of 7 empty slots +Array(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="نحوه_استفاده">نحوه استفاده</h2> + +<pre class="syntaxbox">Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</pre> + +<h3 id="پارامترها">پارامترها</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>لیست المنت هایی که باید درون آرایه قرار بگیرند.</dd> +</dl> + +<h3 id="مقدار_بازگشتی">مقدار بازگشتی</h3> + +<p>یک نمونه جدید از {{jsxref("Array")}} .</p> + +<h2 id="توضیحات">توضیحات</h2> + +<p>این تابع بخشی از ECMAScript 2015 استاندارد است. برای اطلاعات بیشتر لینک های زیر مراجعه کنید:</p> + +<p dir="ltr"><a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code></a> و <a href="https://gist.github.com/rwaldron/1074126"><code>Array.from</code> proposal</a> و <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> polyfill</a>.</p> + +<h2 id="مثال">مثال</h2> + +<pre class="brush: js">Array.of(1); // [1] +Array.of(1, 2, 3); // [1, 2, 3] +Array.of(undefined); // [undefined] +</pre> + +<h2 id="چند_کاره_سازی">چند کاره سازی</h2> + +<p>در صورت عدم وجود <code>Array.of()</code> به صورت پیشفرض، با اجرای کد زیر قبل اجرای سایر کدها، تابع <code>Array.of()</code> را برای شما در کلاس Array پیاده سازی و قابل استفاده می نماید. برید حالشو ببرید.</p> + +<pre class="brush: js">if (!Array.of) { + Array.of = function() { + return Array.prototype.slice.call(arguments); + // Or + let vals = []; + for(let prop in arguments){ + vals.push(arguments[prop]); + } + return vals; + } +} +</pre> + +<h2 id="مشخصه_ها">مشخصه ها</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">مشخصه</th> + <th scope="col">وضعیت</th> + <th scope="col">توضیح</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="سازگاری_با_سایر_مرورگرها">سازگاری با سایر مرورگرها</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.of")}}</p> +</div> + +<h2 id="همچنین_ببینید"><strong>همچنین ببینید</strong></h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.from()")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> diff --git a/files/fa/web/javascript/reference/global_objects/array/reduce/index.html b/files/fa/web/javascript/reference/global_objects/array/reduce/index.html new file mode 100644 index 0000000000..6145fa772e --- /dev/null +++ b/files/fa/web/javascript/reference/global_objects/array/reduce/index.html @@ -0,0 +1,579 @@ +--- +title: Array.prototype.reduce() +slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce +--- +<div>{{JSRef}}</div> + +<p> The <code><strong>reduce()</strong></code> method executes a <strong>reducer</strong> function (that you provide) on each element of the array, resulting in a single output value.</p> + +<p style="direction: rtl;">متد reduce یک تابع reducer (کاهش دهنده) را بر روی هر کدام از المانهای آرایه اجرا میکند و در خروجی یک آرایه برمیگرداند. توجه داشته باشید که تابع reducer را شما باید بنویسید.</p> + +<div style="direction: rtl;">{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div> + + + +<p style="direction: rtl;">یک تابع کاهش دهنده 4 آرگومان دریافت میکند</p> + +<p>The <strong>reducer</strong> function takes four arguments:</p> + +<ol> + <li>Accumulator (acc) (انباشت کننده)</li> + <li>Current Value (cur) (مقدار فعلی)</li> + <li>Current Index (idx) (اندیس فعلی)</li> + <li>Source Array (src) (آرایهی مبدا)</li> +</ol> + +<p>Your <strong>reducer</strong> function's returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array and ultimately becomes the final, single resulting value.</p> + +<p style="direction: rtl;">بنابراین آرگومان اول تابع reduce، کاهش دهنده، و آرگومان دوم، انباشتگر میباشد. به این ترتیب پس از اعمال کاهش دهنده بر روی هر کدام از المانهای آرایه، انباشت کننده یا اکیومیولیتور نیز اعمال اثر میکند.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</var></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>A function to execute on each element in the array (except for the first, if no <code>initialValue</code> is supplied), taking four arguments: + <dl> + <dt><code>accumulator</code></dt> + <dd>The accumulator accumulates the callback's return values. It is the accumulated value previously returned in the last invocation of the callback, or <code>initialValue</code>, if supplied (see below).</dd> + <dt><code>currentValue</code></dt> + <dd>The current element being processed in the array.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>The index of the current element being processed in the array. Starts from index 0 if an <code>initialValue</code> is provided. Otherwise, starts from index 1.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd>The array <code>reduce()</code> was called upon.</dd> + </dl> + </dd> + <dt><code>initialValue</code> {{optional_inline}}</dt> + <dd>A value to use as the first argument to the first call of the <code>callback</code>. If no <code>initialValue</code> is supplied, the first element in the array will be used and skipped. Calling <code>reduce()</code> on an empty array without an <code>initialValue</code> will throw a <code>TypeError</code>.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>The single value that results from the reduction.</p> + +<p style="direction: rtl;">مقدار بازگشتی مقداری واحد است.</p> + +<h2 id="Description">Description</h2> + +<p>The <code>reduce()</code> method executes the <code>callback</code> once for each assigned value present in the array, taking four arguments:</p> + +<p style="direction: rtl;">تابع reduce، کال بک را یک بار بر روی مقدارهای الصاق شده در ارایه اعمال می کند و چهار ارگومان (ورودی) زیر را می پذیرد.</p> + +<ul> + <li><code>accumulator</code></li> + <li><code>currentValue</code></li> + <li><code>currentIndex</code></li> + <li><code>array</code></li> +</ul> + +<p>The first time the callback is called, <code>accumulator</code> and <code>currentValue</code> can be one of two values. If <code>initialValue</code> is provided in the call to <code>reduce()</code>, then <code>accumulator</code> will be equal to <code>initialValue</code>, and <code>currentValue</code> will be equal to the first value in the array. If no <code>initialValue</code> is provided, then <code>accumulator</code> will be equal to the first value in the array, and <code>currentValue</code> will be equal to the second.</p> + +<div class="note"> +<p><strong>Note:</strong> If <code>initialValue</code> is not provided, <code>reduce()</code> will execute the callback function starting at index 1, skipping the first index. If <code>initialValue</code> is provided, it will start at index 0.</p> +</div> + +<p>If the array is empty and no <code>initialValue</code> is provided, {{jsxref("TypeError")}} will be thrown. If the array only has one element (regardless of position) and no <code>initialValue</code> is provided, or if <code>initialValue</code> is provided but the array is empty, the solo value will be returned <em>without </em>calling<em> <code>callback</code>.</em></p> + +<p>It is usually safer to provide an <code>initialValue</code> because there are three possible outputs without <code>initialValue</code>, as shown in the following example.</p> + +<p style="direction: rtl;">برای احتیاط بهتر است که همیشه یک initialValue یا مقدار اولیه درنظر گرفت زیرا در صورت در نظر نگرفتن مقدار اولیه سه حالت ممکن است رخ دهد که در مثال زیر توضیح داده شده است.</p> + +<pre class="brush: js">var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x ); +var maxCallback2 = ( max, cur ) => Math.max( max, cur ); + +// reduce() without initialValue +[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42 +[ { x: 22 } ].reduce( maxCallback ); // { x: 22 } +[ ].reduce( maxCallback ); // TypeError + +// map/reduce; better solution, also works for empty or larger arrays +[ { x: 22 }, { x: 42 } ].map( el => el.x ) + .reduce( maxCallback2, -Infinity ); +</pre> + +<h3 id="How_reduce_works">How reduce() works</h3> + +<p>Suppose the following use of <code>reduce()</code> occurred:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) { + return accumulator + currentValue; +}); +</pre> + +<p>The callback would be invoked four times, with the arguments and return values in each call being as follows:</p> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>currentIndex</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">return value</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">first call</th> + <td><code>0</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">second call</th> + <td><code>1</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>3</code></td> + </tr> + <tr> + <th scope="row">third call</th> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>6</code></td> + </tr> + <tr> + <th scope="row">fourth call</th> + <td><code>6</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p>The value returned by <code>reduce()</code> would be that of the last callback invocation (<code>10</code>).</p> + +<p>You can also provide an {{jsxref("Functions/Arrow_functions", "Arrow Function","",1)}} instead of a full function. The code below will produce the same output as the code in the block above:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduce( (accumulator, currentValue, currentIndex, array) => accumulator + currentValue ); +</pre> + +<p>If you were to provide an <code>initialValue</code> as the second argument to <code>reduce()</code>, the result would look like this:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => { + return accumulator + currentValue; +}, 10); +</pre> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>currentIndex</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">return value</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">first call</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">second call</th> + <td><code>10</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>11</code></td> + </tr> + <tr> + <th scope="row">third call</th> + <td><code>11</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>13</code></td> + </tr> + <tr> + <th scope="row">fourth call</th> + <td><code>13</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>16</code></td> + </tr> + <tr> + <th scope="row">fifth call</th> + <td><code>16</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>The value returned by <code>reduce()</code> in this case would be <code>20</code>.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Sum_all_the_values_of_an_array">Sum all the values of an array</h3> + +<pre class="brush: js">var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { + return accumulator + currentValue; +}, 0); +// sum is 6 + +</pre> + +<p>Alternatively written with an arrow function:</p> + +<pre class="brush: js">var total = [ 0, 1, 2, 3 ].reduce( + ( accumulator, currentValue ) => accumulator + currentValue, + 0 +);</pre> + +<h3 id="Sum_of_values_in_an_object_array">Sum of values in an object array</h3> + +<p>To sum up the values contained in an array of objects, you <strong>must</strong> supply an <code>initialValue</code>, so that each item passes through your function.</p> + +<pre class="brush: js">var initialValue = 0; +var sum = [{x: 1}, {x: 2}, {x: 3}].reduce(function (accumulator, currentValue) { + return accumulator + currentValue.x; +},initialValue) + +console.log(sum) // logs 6 +</pre> + +<p>Alternatively written with an arrow function:</p> + +<pre class="brush: js">var initialValue = 0; +var sum = [{x: 1}, {x: 2}, {x: 3}].reduce( + (accumulator, currentValue) => accumulator + currentValue.x + ,initialValue +); + +console.log(sum) // logs 6</pre> + +<h3 id="Flatten_an_array_of_arrays">Flatten an array of arrays</h3> + +<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce( + function(accumulator, currentValue) { + return accumulator.concat(currentValue); + }, + [] +); +// flattened is [0, 1, 2, 3, 4, 5] +</pre> + +<p>Alternatively written with an arrow function:</p> + +<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce( + ( accumulator, currentValue ) => accumulator.concat(currentValue), + [] +); +</pre> + +<h3 id="Counting_instances_of_values_in_an_object">Counting instances of values in an object</h3> + +<pre class="brush: js">var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; + +var countedNames = names.reduce(function (allNames, name) { + if (name in allNames) { + allNames[name]++; + } + else { + allNames[name] = 1; + } + return allNames; +}, {}); +// countedNames is: +// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 } +</pre> + +<h3 id="Grouping_objects_by_a_property">Grouping objects by a property</h3> + +<pre class="brush: js">var people = [ + { name: 'Alice', age: 21 }, + { name: 'Max', age: 20 }, + { name: 'Jane', age: 20 } +]; + +function groupBy(objectArray, property) { + return objectArray.reduce(function (acc, obj) { + var key = obj[property]; + if (!acc[key]) { + acc[key] = []; + } + acc[key].push(obj); + return acc; + }, {}); +} + +var groupedPeople = groupBy(people, 'age'); +// groupedPeople is: +// { +// 20: [ +// { name: 'Max', age: 20 }, +// { name: 'Jane', age: 20 } +// ], +// 21: [{ name: 'Alice', age: 21 }] +// } +</pre> + +<h3 id="Bonding_arrays_contained_in_an_array_of_objects_using_the_spread_operator_and_initialValue">Bonding arrays contained in an array of objects using the spread operator and initialValue</h3> + +<pre class="brush: js">// friends - an array of objects +// where object field "books" - list of favorite books +var friends = [{ + name: 'Anna', + books: ['Bible', 'Harry Potter'], + age: 21 +}, { + name: 'Bob', + books: ['War and peace', 'Romeo and Juliet'], + age: 26 +}, { + name: 'Alice', + books: ['The Lord of the Rings', 'The Shining'], + age: 18 +}]; + +// allbooks - list which will contain all friends' books + +// additional list contained in initialValue +var allbooks = friends.reduce(function(accumulator, currentValue) { + return [...accumulator, ...currentValue.books]; +}, ['Alphabet']); + +// allbooks = [ +// 'Alphabet', 'Bible', 'Harry Potter', 'War and peace', +// 'Romeo and Juliet', 'The Lord of the Rings', +// 'The Shining' +// ]</pre> + +<h3 id="Remove_duplicate_items_in_array">Remove duplicate items in array</h3> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> If you are using an environment compatible with {{jsxref("Set")}} and {{jsxref("Array.from()")}}, you could use <code>let orderedArray = Array.from(new Set(myArray));</code> to get an array where duplicate items have been removed.</p> +</div> + +<pre class="brush: js">var myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']; +var myOrderedArray = myArray.reduce(function (accumulator, currentValue) { + if (accumulator.indexOf(currentValue) === -1) { + accumulator.push(currentValue); + } + return accumulator +}, []) + +console.log(myOrderedArray);</pre> + +<h3 id="Running_Promises_in_Sequence">Running Promises in Sequence</h3> + +<pre class="brush: js">/** + * Runs promises from array of functions that can return promises + * in chained manner + * + * @param {array} arr - promise arr + * @return {Object} promise object + */ +function runPromiseInSequence(arr, input) { + return arr.reduce( + (promiseChain, currentFunction) => promiseChain.then(currentFunction), + Promise.resolve(input) + ); +} + +// promise function 1 +function p1(a) { + return new Promise((resolve, reject) => { + resolve(a * 5); + }); +} + +// promise function 2 +function p2(a) { + return new Promise((resolve, reject) => { + resolve(a * 2); + }); +} + +// function 3 - will be wrapped in a resolved promise by .then() +function f3(a) { + return a * 3; +} + +// promise function 4 +function p4(a) { + return new Promise((resolve, reject) => { + resolve(a * 4); + }); +} + +const promiseArr = [p1, p2, f3, p4]; +runPromiseInSequence(promiseArr, 10) + .then(console.log); // 1200 +</pre> + +<h3 id="Function_composition_enabling_piping">Function composition enabling piping</h3> + +<pre class="brush: js">// Building-blocks to use for composition +const double = x => x + x; +const triple = x => 3 * x; +const quadruple = x => 4 * x; + +// Function composition enabling pipe functionality +const pipe = (...functions) => input => functions.reduce( + (acc, fn) => fn(acc), + input +); + +// Composed functions for multiplication of specific values +const multiply6 = pipe(double, triple); +const multiply9 = pipe(triple, triple); +const multiply16 = pipe(quadruple, quadruple); +const multiply24 = pipe(double, triple, quadruple); + +// Usage +multiply6(6); // 36 +multiply9(9); // 81 +multiply16(16); // 256 +multiply24(10); // 240 + +</pre> + +<h3 id="write_map_using_reduce">write map using reduce</h3> + +<pre class="brush: js">if (!Array.prototype.mapUsingReduce) { + Array.prototype.mapUsingReduce = function(callback, thisArg) { + return this.reduce(function(mappedArray, currentValue, index, array) { + mappedArray[index] = callback.call(thisArg, currentValue, index, array); + return mappedArray; + }, []); + }; +} + +[1, 2, , 3].mapUsingReduce( + (currentValue, index, array) => currentValue + index + array.length +); // [5, 7, , 10] + +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.21 +// Reference: http://es5.github.io/#x15.4.4.21 +// https://tc39.github.io/ecma262/#sec-array.prototype.reduce +if (!Array.prototype.reduce) { + Object.defineProperty(Array.prototype, 'reduce', { + value: function(callback /*, initialValue*/) { + if (this === null) { + throw new TypeError( 'Array.prototype.reduce ' + + 'called on null or undefined' ); + } + if (typeof callback !== 'function') { + throw new TypeError( callback + + ' is not a function'); + } + + // 1. Let O be ? ToObject(this value). + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // Steps 3, 4, 5, 6, 7 + var k = 0; + var value; + + if (arguments.length >= 2) { + value = arguments[1]; + } else { + while (k < len && !(k in o)) { + k++; + } + + // 3. If len is 0 and initialValue is not present, + // throw a TypeError exception. + if (k >= len) { + throw new TypeError( 'Reduce of empty array ' + + 'with no initial value' ); + } + value = o[k++]; + } + + // 8. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kPresent be ? HasProperty(O, Pk). + // c. If kPresent is true, then + // i. Let kValue be ? Get(O, Pk). + // ii. Let accumulator be ? Call( + // callbackfn, undefined, + // « accumulator, kValue, k, O »). + if (k in o) { + value = callback(value, o[k], k, o); + } + + // d. Increase k by 1. + k++; + } + + // 9. Return accumulator. + return value; + } + }); +} +</pre> + +<p>If you need to support truly obsolete JavaScript engines that do not support <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a></code>, it is best not to polyfill <code>Array.prototype</code> methods at all, as you cannot make them <strong>non-enumerable</strong>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.reduce")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduceRight()")}}</li> +</ul> diff --git a/files/fa/web/javascript/reference/global_objects/function/index.html b/files/fa/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..4c80478bda --- /dev/null +++ b/files/fa/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,156 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Global_Objects/Function +tags: + - Constructor + - Function + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>Function</code> constructor</strong> creates a new <code>Function</code> object. Calling the constructor directly can create functions dynamically, but suffers from security and similar (but far less significant) performance issues to {{jsxref("eval")}}. However, unlike eval, the Function constructor creates functions which execute in the global scope only.</p> + +<div>{{EmbedInteractiveExample("pages/js/function-constructor.html")}}</div> + + + +<p>Every JavaScript function is actually a <code>Function</code> object. This can be seen with the code <code>(function(){}).constructor === Function</code> which returns true.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Names to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p><code>Function</code> objects created with the <code>Function</code> constructor are parsed when the function is created. This is less efficient than declaring a function with a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> and calling it within your code because such functions are parsed with the rest of the code.</p> + +<p>All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed. Omitting an argument will result in the value of that parameter being <code>undefined</code>.</p> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Properties_and_Methods_of_Function">Properties and Methods of <code>Function</code></h2> + +<p>The global <code>Function</code> object has no methods or properties of its own. However, since it is a function itself, it does inherit some methods and properties through the prototype chain from {{jsxref("Function.prototype")}}.</p> + +<h2 id="Function_prototype_object"><code>Function</code> prototype object</h2> + +<h3 id="Properties">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div> + +<h3 id="Methods">Methods</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}</div> + +<h2 id="Function_instances"><code>Function</code> instances</h2> + +<p><code>Function</code> instances inherit methods and properties from {{jsxref("Function.prototype")}}. As with all constructors, you can change the constructor's prototype object to make changes to all <code>Function</code> instances.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Specifying_arguments_with_the_Function_constructor">Specifying arguments with the <code>Function</code> constructor</h3> + +<p>The following code creates a <code>Function</code> object that takes two arguments.</p> + +<pre class="brush: js">// Example can be run directly in your JavaScript console + +// Create a function that takes two arguments and returns the sum of those arguments +var adder = new Function('a', 'b', 'return a + b'); + +// Call the function +adder(2, 6); +// > 8 +</pre> + +<p>The arguments "<code>a</code>" and "<code>b</code>" are formal argument names that are used in the function body, "<code>return a + b</code>".</p> + +<h3 id="Difference_between_Function_constructor_and_function_declaration">Difference between Function constructor and function declaration</h3> + +<p>Functions created with the <code>Function</code> constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the <code>Function</code> constructor was created. This is different from using {{jsxref("eval")}} with code for a function expression.</p> + +<pre class="brush: js">var x = 10; + +function createFunction1() { + var x = 20; + return new Function('return x;'); // this |x| refers global |x| +} + +function createFunction2() { + var x = 20; + function f() { + return x; // this |x| refers local |x| above + } + return f; +} + +var f1 = createFunction1(); +console.log(f1()); // 10 +var f2 = createFunction2(); +console.log(f2()); // 20<code> +</code></pre> + +<p>While this code works in web browsers, <code>f1()</code> will produce a <code>ReferenceError</code> in Node.js, as <code>x</code> will not be found. This is because the top-level scope in Node is not the global scope, and <code>x</code> will be local to the module.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Functions", "Functions and function scope")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/fa/web/javascript/reference/global_objects/index.html b/files/fa/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..4db59a377c --- /dev/null +++ b/files/fa/web/javascript/reference/global_objects/index.html @@ -0,0 +1,128 @@ +--- +title: Standard built-in objects +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects +--- +<div> + <div> + {{jsSidebar("Objects")}}</div> +</div> +<h2 id="Summary" name="Summary">Summary</h2> +<p>This chapter documents all the JavaScript standard built-in objects, along with their methods and properties.</p> +<div class="onlyinclude"> + <p>The term "global objects" (or standard built-in objects) here is not to be confused with the <em>global object</em>. Here, global objects refer to <em>objects in the global scope</em> (but only if ECMAScript 5 strict mode is not used! Otherwise it returns <code>undefined</code>). The <em>global object</em> itself can be accessed by the {{jsxref("Operators/this", "this")}} operator in the global scope. In fact, the global scope <em>consists</em><em> of</em> the properties of the global object (including inherited properties, if any).</p> + <p>Other objects in the global scope are either <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">created by the user script</a> or provided by the host application. The host objects available in browser contexts are documented in the <a href="/en-US/docs/Web/API/Reference">API reference</a>. For more information about the distinction between the <a href="/en-US/docs/DOM/DOM_Reference">DOM</a> and core <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, see <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + <h2 id="Standard_objects_(by_category)">Standard objects (by category)</h2> + <h3 id="Value_properties">Value properties</h3> + <p>Global properties returning a simple value.</p> + <ul> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}} literal</li> + </ul> + <h3 id="Function_properties">Function properties</h3> + <p>Global functions returning the result of a specific routine.</p> + <ul> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline()}}</li> + <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline()}}</li> + <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline()}}</li> + </ul> + <h3 id="Fundamental_objects">Fundamental objects</h3> + <p>General language objects, functions and errors.</p> + <ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}} {{experimental_inline()}}</li> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("EvalError")}}</li> + <li>{{jsxref("InternalError")}}</li> + <li>{{jsxref("RangeError")}}</li> + <li>{{jsxref("ReferenceError")}}</li> + <li>{{jsxref("StopIteration")}}</li> + <li>{{jsxref("SyntaxError")}}</li> + <li>{{jsxref("TypeError")}}</li> + <li>{{jsxref("URIError")}}</li> + </ul> + <h3 id="Numbers_and_dates">Numbers and dates</h3> + <p>Objects dealing with numbers, dates and mathematical calculations.</p> + <ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("Math")}}</li> + <li>{{jsxref("Date")}}</li> + </ul> + <h3 id="Text_processing">Text processing</h3> + <p>Objects for manipulating texts.</p> + <ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("RegExp")}}</li> + </ul> + <h3 id="Indexed_collections">Indexed collections</h3> + <p>Collections ordered by an index. Array-type objects.</p> + <ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Int8Array")}}</li> + <li>{{jsxref("Uint8Array")}}</li> + <li>{{jsxref("Uint8ClampedArray")}}</li> + <li>{{jsxref("Int16Array")}}</li> + <li>{{jsxref("Uint16Array")}}</li> + <li>{{jsxref("Int32Array")}}</li> + <li>{{jsxref("Uint32Array")}}</li> + <li>{{jsxref("Float32Array")}}</li> + <li>{{jsxref("Float64Array")}}</li> + <li>{{jsxref("ParallelArray")}} {{non-standard_inline()}}</li> + </ul> + <h3 id="Keyed_collections">Keyed collections</h3> + <p>Collections of objects as keys. Elements iterable in insertion order.</p> + <ul> + <li>{{jsxref("Map")}} {{experimental_inline()}}</li> + <li>{{jsxref("Set")}} {{experimental_inline()}}</li> + <li>{{jsxref("WeakMap")}} {{experimental_inline()}}</li> + <li>{{jsxref("WeakSet")}} {{experimental_inline()}}</li> + </ul> + <h3 id="Structured_data">Structured data</h3> + <p>Data buffers and <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation.</p> + <ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("DataView")}}</li> + <li>{{jsxref("JSON")}}</li> + </ul> + <h3 id="Control_abstraction_objects">Control abstraction objects</h3> + <ul> + <li>{{jsxref("Iterator")}} {{non-standard_inline()}}</li> + <li>{{jsxref("Generator")}} {{experimental_inline()}}</li> + <li>{{jsxref("Promise")}} {{experimental_inline()}}</li> + </ul> + <h3 id="Reflection">Reflection</h3> + <ul> + <li>{{jsxref("Reflect")}} {{experimental_inline()}}</li> + <li>{{jsxref("Proxy")}} {{experimental_inline()}}</li> + </ul> + <h3 id="Internationalization">Internationalization</h3> + <p>Additions to the ECMAScript core for language-sensitive functionalities.</p> + <ul> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> + </ul> + <h3 id="Other">Other</h3> + <ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li> + </ul> +</div> +<p> </p> diff --git a/files/fa/web/javascript/reference/global_objects/null/index.html b/files/fa/web/javascript/reference/global_objects/null/index.html new file mode 100644 index 0000000000..b90e55a245 --- /dev/null +++ b/files/fa/web/javascript/reference/global_objects/null/index.html @@ -0,0 +1,126 @@ +--- +title: 'null' +slug: Web/JavaScript/Reference/Global_Objects/null +translation_of: Web/JavaScript/Reference/Global_Objects/null +--- +<div> </div> + +<p dir="rtl">مقدار null نمایان گر مقداری هست که به صورت دستی (عمدی) می توانیم به یک متغییر نسبت دهیم،null یکی از {{Glossary("Primitive", "نوع های اولیه")}}. جاوا اسکریپت می باشد.</p> + +<h2 dir="rtl" id="شیوه_ی_نوشتن">شیوه ی نوشتن</h2> + +<pre dir="rtl"><code>null</code></pre> + +<h2 dir="rtl" id="توضیح">توضیح</h2> + +<p dir="rtl" id="Syntax">null باید به صورت حروف کوچک نوشته شود،null اقلب برای مشخص کردن مکان object به کار برده می شود و به هیچ object وابسته نمی باشد</p> + +<p dir="rtl">زمانی که می خواهید مقدار null یا undefined را بررسی کنید به <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">تفاوت مابین عملگر های بررسی (==) و (===) اگاه باشید</a>.</p> + +<pre class="brush: js">// foo does not exist. It is not defined and has never been initialized: +> foo +"ReferenceError: foo is not defined" + +// foo is known to exist now but it has no type or value: +> var foo = null; foo +"null" +</pre> + +<h3 dir="rtl" id="تفاوت_بین_null_و_undefined">تفاوت بین null و undefined</h3> + +<pre class="brush: js">typeof null // object (bug in ECMAScript, should be null) +typeof undefined // undefined +null === undefined // false +null == undefined // true +</pre> + +<h2 dir="rtl" id="مشخصات">مشخصات</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">مشخصات</th> + <th scope="col">وضعیت</th> + <th scope="col">توضیحات</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-null-value', 'null value')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-null-value', 'null value')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="سازگاری_مرورگرها">سازگاری مرورگرها</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 dir="rtl" id="بیشتر_بخوانید">بیشتر بخوانید</h2> + +<ul> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("NaN")}}</li> +</ul> diff --git a/files/fa/web/javascript/reference/global_objects/regexp/index.html b/files/fa/web/javascript/reference/global_objects/regexp/index.html new file mode 100644 index 0000000000..3419d5977b --- /dev/null +++ b/files/fa/web/javascript/reference/global_objects/regexp/index.html @@ -0,0 +1,597 @@ +--- +title: RegExp +slug: Web/JavaScript/Reference/Global_Objects/RegExp +tags: + - Constructor + - JavaScript + - NeedsTranslation + - RegExp + - Regular Expressions + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp +--- +<div>{{JSRef("Global_Objects", "RegExp")}}</div> + +<h2 id="Summary">Summary</h2> + +<p>The <code><strong>RegExp</strong></code> constructor creates a regular expression object for matching text with a pattern.</p> + +<p>For an introduction on what regular expressions are, read the <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions chapter in the JavaScript Guide</a>.</p> + +<h2 id="Constructor">Constructor</h2> + +<p>Literal and constructor notations are possible:</p> + +<pre class="syntaxbox"><code>/<em>pattern</em>/<em>flags; +</em></code> +new <code>RegExp(<em>pattern</em> <em>[, flags]</em>)</code>; +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>pattern</code></dt> + <dd>The text of the regular expression.</dd> + <dt><code>flags</code></dt> + <dd> + <p>If specified, flags can have any combination of the following values:</p> + + <dl> + <dt><code>g</code></dt> + <dd>global match</dd> + <dt><code>i</code></dt> + <dd>ignore case</dd> + <dt><code>m</code></dt> + <dd>multiline; treat beginning and end characters (^ and $) as working over multiple lines (i.e., match the beginning or end of <em>each</em> line (delimited by \n or \r), not only the very beginning or end of the whole input string)</dd> + <dt><code>y</code></dt> + <dd>sticky; matches only from the index indicated by the <code>lastIndex</code> property of this regular expression in the target string (and does not attempt to match from any later indexes).</dd> + </dl> + </dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>There are 2 ways to create a RegExp object: a literal notation and a constructor. To indicate strings, the parameters to the literal notation do not use quotation marks while the parameters to the constructor function do use quotation marks. So the following expressions create the same regular expression:</p> + +<pre class="brush: js">/ab+c/i; +new RegExp("ab+c", "i"); +</pre> + +<p>The literal notation provides compilation of the regular expression when the expression is evaluated. Use literal notation when the regular expression will remain constant. For example, if you use literal notation to construct a regular expression used in a loop, the regular expression won't be recompiled on each iteration.</p> + +<p>The constructor of the regular expression object, for example, <code>new RegExp("ab+c")</code>, provides runtime compilation of the regular expression. Use the constructor function when you know the regular expression pattern will be changing, or you don't know the pattern and are getting it from another source, such as user input.</p> + +<p>When using the constructor function, the normal string escape rules (preceding special characters with \ when included in a string) are necessary. For example, the following are equivalent:</p> + +<pre class="brush: js">var re = /\w+/; +var re = new RegExp("\\w+"); +</pre> + +<h2 id="Special_characters_meaning_in_regular_expressions">Special characters meaning in regular expressions</h2> + +<ul> + <li><a href="#character-classes">Character Classes</a></li> + <li><a href="#character-sets">Character Sets</a></li> + <li><a href="#boundaries">Boundaries</a></li> + <li><a href="#grouping-back-references">Grouping and back references</a></li> + <li><a href="#quantifiers">Quantifiers</a></li> +</ul> + +<table class="fullwidth-table"> + <tbody> + <tr id="character-classes"> + <th colspan="2">Character Classes</th> + </tr> + <tr> + <th>Character</th> + <th>Meaning</th> + </tr> + <tr> + <td><code>.</code></td> + <td> + <p>(The dot, the decimal point) matches any single character <em>except</em> the newline characters: <code>\n</code> <code>\r</code> <code>\u2028</code> or <code>\u2029</code>.</p> + + <p>Note that the <code>m</code> multiline flag doesn't change the dot behavior. So to match a pattern across multiple lines the character set <code>[^]</code> can be used (if you don't mean an old version of IE, of course), it will match any character including newlines.</p> + + <p>For example, <code>/.y/</code> matches "my" and "ay", but not "yes", in "yes make my day".</p> + </td> + </tr> + <tr> + <td><code>\d</code></td> + <td> + <p>Matches a digit character in the basic Latin alphabet. Equivalent to <code>[0-9]</code>.</p> + + <p>For example, <code>/\d/</code> or <code>/[0-9]/</code> matches '2' in "B2 is the suite number."</p> + </td> + </tr> + <tr> + <td><code>\D</code></td> + <td> + <p>Matches any character that is not a digit in the basic Latin alphabet. Equivalent to <code>[^0-9]</code>.</p> + + <p>For example, <code>/\D/</code> or <code>/[^0-9]/</code> matches 'B' in "B2 is the suite number."</p> + </td> + </tr> + <tr> + <td><code>\w</code></td> + <td> + <p>Matches any alphanumeric character from the basic Latin alphabet, including the underscore. Equivalent to <code>[A-Za-z0-9_]</code>.</p> + + <p>For example, <code>/\w/</code> matches 'a' in "apple," '5' in "$5.28," and '3' in "3D."</p> + </td> + </tr> + <tr> + <td><code>\W</code></td> + <td> + <p>Matches any character that is not a word character from the basic Latin alphabet. Equivalent to <code>[^A-Za-z0-9_]</code>.</p> + + <p>For example, <code>/\W/</code> or <code>/[^A-Za-z0-9_]/</code> matches '%' in "50%."</p> + </td> + </tr> + <tr> + <td><code>\s</code></td> + <td> + <p>Matches a single white space character, including space, tab, form feed, line feed and other Unicode spaces. Equivalent to <code>[ \f\n\r\t\v\u00a0\u1680\u180e\u2000\u2001\u2002\u2003\u2004 \u2005\u2006\u2007\u2008\u2009\u200a\u2028\u2029\u202f\u205f \u3000]</code>.</p> + + <p>For example, <code>/\s\w*/</code> matches ' bar' in "foo bar."</p> + </td> + </tr> + <tr> + <td><code>\S</code></td> + <td> + <p>Matches a single character other than white space. Equivalent to <code><code>[^ \f\n\r\t\v\u00a0\u1680\u180e\u2000\u2001\u2002\u2003\u2004 \u2005\u2006\u2007\u2008\u2009\u200a\u2028\u2029\u202f\u205f\u3000]</code></code>.</p> + + <p>For example, <code>/\S\w*/</code> matches 'foo' in "foo bar."</p> + </td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Matches a tab.</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Matches a carriage return.</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>Matches a linefeed.</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Matches a vertical tab.</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Matches a form-feed.</td> + </tr> + <tr> + <td><code>[\b]</code></td> + <td>Matches a backspace. (Not to be confused with <code>\b</code>)</td> + </tr> + <tr> + <td><code>\0</code></td> + <td>Matches a NUL character. Do not follow this with another digit.</td> + </tr> + <tr> + <td><code>\c<em>X</em></code></td> + <td> + <p>Where <code><em>X</em></code> is a letter from A - Z. Matches a control character in a string.</p> + + <p>For example, <code>/\cM/</code> matches control-M in a string.</p> + </td> + </tr> + <tr> + <td><code>\x<em>hh</em></code></td> + <td>Matches the character with the code <code><em>hh</em></code> (two hexadecimal digits)</td> + </tr> + <tr> + <td><code>\u<em>hhhh</em></code></td> + <td>Matches the character with the Unicode value <code><em>hhhh</em></code> (four hexadecimal digits).</td> + </tr> + <tr> + <td><code>\</code></td> + <td> + <p>For characters that are usually treated literally, indicates that the next character is special and not to be interpreted literally.</p> + + <p>For example, <code>/b/</code> matches the character 'b'. By placing a backslash in front of b, that is by using <code>/\b/</code>, the character becomes special to mean match a word boundary.</p> + + <p><em>or</em></p> + + <p>For characters that are usually treated specially, indicates that the next character is not special and should be interpreted literally.</p> + + <p>For example, * is a special character that means 0 or more occurrences of the preceding character should be matched; for example, <code>/a*/</code> means match 0 or more "a"s. To match <code>*</code> literally, precede it with a backslash; for example, <code>/a\*/</code> matches 'a*'.</p> + </td> + </tr> + </tbody> + <tbody> + <tr id="character-sets"> + <th colspan="2"> + <p>Character Sets</p> + </th> + </tr> + <tr> + <th>Character</th> + <th>Meaning</th> + </tr> + <tr> + <td><code>[xyz]</code></td> + <td> + <p>A character set. Matches any one of the enclosed characters. You can specify a range of characters by using a hyphen.</p> + + <p>For example, <code>[abcd]</code> is the same as <code>[a-d]</code>. They match the 'b' in "brisket" and the 'c' in "chop".</p> + </td> + </tr> + <tr> + <td><code>[^xyz]</code></td> + <td> + <p>A negated or complemented character set. That is, it matches anything that is not enclosed in the brackets. You can specify a range of characters by using a hyphen.</p> + + <p>For example, <code>[^abc]</code> is the same as <code>[^a-c]</code>. They initially match 'o' in "bacon" and 'h' in "chop."</p> + </td> + </tr> + </tbody> + <tbody> + <tr id="boundaries"> + <th colspan="2">Boundaries</th> + </tr> + <tr> + <th>Character</th> + <th>Meaning</th> + </tr> + <tr> + <td><code>^</code></td> + <td> + <p>Matches beginning of input. If the multiline flag is set to true, also matches immediately after a line break character.</p> + + <p>For example, <code>/^A/</code> does not match the 'A' in "an A", but does match the first 'A' in "An A."</p> + </td> + </tr> + <tr> + <td><code>$</code></td> + <td> + <p>Matches end of input. If the multiline flag is set to true, also matches immediately before a line break character.</p> + + <p>For example, <code>/t$/</code> does not match the 't' in "eater", but does match it in "eat".</p> + </td> + </tr> + <tr> + <td><code>\b</code></td> + <td> + <p>Matches a zero-width word boundary, such as between a letter and a space. (Not to be confused with <code>[\b]</code>)</p> + + <p>For example, <code>/\bno/</code> matches the 'no' in "at noon"; <code>/ly\b/</code> matches the 'ly' in "possibly yesterday."</p> + </td> + </tr> + <tr> + <td><code>\B</code></td> + <td> + <p>Matches a zero-width non-word boundary, such as between two letters or between two spaces.</p> + + <p>For example, <code>/\Bon/</code> matches 'on' in "at noon", and <code>/ye\B/</code> matches 'ye' in "possibly yesterday."</p> + </td> + </tr> + </tbody> + <tbody> + <tr id="grouping-back-references"> + <th colspan="2">Grouping and back references</th> + </tr> + <tr> + <th>Character</th> + <th>Meaning</th> + </tr> + <tr> + <td><code>(<em>x</em>)</code></td> + <td> + <p>Matches <code><em>x</em></code> and remembers the match. These are called capturing parentheses.</p> + + <p>For example, <code>/(foo)/</code> matches and remembers 'foo' in "foo bar." The matched substring can be recalled from the resulting array's elements <code>[1], ..., [n]</code> or from the predefined <code>RegExp</code> object's properties <code>$1, ..., $9</code>.</p> + + <p>Capturing groups have a performance penalty. If you don't need the matched substring to be recalled, prefer non-capturing parentheses (see below).</p> + </td> + </tr> + <tr> + <td><code>\<em>n</em></code></td> + <td> + <p>Where <code><em>n</em></code> is a positive integer. A back reference to the last substring matching the n parenthetical in the regular expression (counting left parentheses).</p> + + <p>For example, <code>/apple(,)\sorange\1/</code> matches 'apple, orange,' in "apple, orange, cherry, peach." A more complete example follows this table.</p> + </td> + </tr> + <tr> + <td><code>(?:<em>x</em>)</code></td> + <td>Matches <code><em>x</em></code> but does not remember the match. These are called non-capturing parentheses. The matched substring can not be recalled from the resulting array's elements <code>[1], ..., [n]</code> or from the predefined <code>RegExp</code> object's properties <code>$1, ..., $9</code>.</td> + </tr> + </tbody> + <tbody> + <tr id="quantifiers"> + <th colspan="2">Quantifiers</th> + </tr> + <tr> + <th>Character</th> + <th>Meaning</th> + </tr> + <tr> + <td><code><em>x</em>*</code></td> + <td> + <p>Matches the preceding item <em>x</em> 0 or more times.</p> + + <p>For example, <code>/bo*/</code> matches 'boooo' in "A ghost booooed" and 'b' in "A bird warbled", but nothing in "A goat grunted".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>+</code></td> + <td> + <p>Matches the preceding item <em>x</em> 1 or more times. Equivalent to <code>{1,}</code>.</p> + + <p>For example, <code>/a+/</code> matches the 'a' in "candy" and all the a's in "caaaaaaandy".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>*?</code><br> + <code><em>x</em>+?</code></td> + <td> + <p>Matches the preceding item <em>x</em> like <code>*</code> and <code>+</code> from above, however the match is the smallest possible match.</p> + + <p>For example, <code>/".*?"/</code> matches '"foo"' in '"foo" "bar"' and does not match '"foo" "bar"' as without the <code>?</code> behind the <code>*</code>.</p> + </td> + </tr> + <tr> + <td><code><em>x</em>?</code></td> + <td> + <p>Matches the preceding item <em>x</em> 0 or 1 time.</p> + + <p>For example, <code>/e?le?/</code> matches the 'el' in "angel" and the 'le' in "angle."</p> + + <p>If used immediately after any of the quantifiers <code>*</code>, <code>+</code>, <code>?</code>, or <code>{}</code>, makes the quantifier non-greedy (matching the minimum number of times), as opposed to the default, which is greedy (matching the maximum number of times).</p> + + <p>Also used in lookahead assertions, described under <code>(?=)</code>, <code>(?!)</code>, and <code>(?:)</code> in this table.</p> + </td> + </tr> + <tr> + <td><code><em>x</em>(?=<em>y</em>)</code></td> + <td>Matches <code><em>x</em></code> only if <code><em>x</em></code> is followed by <code><em>y</em></code>. For example, <code>/Jack(?=Sprat)/</code> matches 'Jack' only if it is followed by 'Sprat'. <code>/Jack(?=Sprat|Frost)/</code> matches 'Jack' only if it is followed by 'Sprat' or 'Frost'. However, neither 'Sprat' nor 'Frost' is part of the match results.</td> + </tr> + <tr> + <td><code><em>x</em>(?!<em>y</em>)</code></td> + <td> + <p>Matches <code><em>x</em></code> only if <code><em>x</em></code> is not followed by <code><em>y</em></code>. For example, <code>/\d+(?!\.)/</code> matches a number only if it is not followed by a decimal point.</p> + + <p><code>/\d+(?!\.)/.exec("3.141")</code> matches 141 but not 3.141.</p> + </td> + </tr> + <tr> + <td><code><em>x</em>|<em>y</em></code></td> + <td> + <p>Matches either <code><em>x</em></code> or <code><em>y</em></code>.</p> + + <p>For example, <code>/green|red/</code> matches 'green' in "green apple" and 'red' in "red apple."</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>}</code></td> + <td> + <p>Where <code><em>n</em></code> is a positive integer. Matches exactly <code><em>n</em></code> occurrences of the preceding item <em>x</em>.</p> + + <p>For example, <code>/a{2}/</code> doesn't match the 'a' in "candy," but it matches all of the a's in "caandy," and the first two a's in "caaandy."</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>,}</code></td> + <td> + <p>Where <code><em>n</em></code> is a positive integer. Matches at least <code><em>n</em></code> occurrences of the preceding item <em>x</em>.</p> + + <p>For example, <code>/a{2,}/</code> doesn't match the 'a' in "candy", but matches all of the a's in "caandy" and in "caaaaaaandy."</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>,<em>m</em>}</code></td> + <td> + <p>Where <code><em>n</em></code> and <code><em>m</em></code> are positive integers. Matches at least <code><em>n</em></code> and at most <code><em>m</em></code> occurrences of the preceding item <em>x</em>.</p> + + <p>For example, <code>/a{1,3}/</code> matches nothing in "cndy", the 'a' in "candy," the two a's in "caandy," and the first three a's in "caaaaaaandy". Notice that when matching "caaaaaaandy", the match is "aaa", even though the original string had more a's in it.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Properties"><span style="font-size: 1.714285714285714rem;">Properties</span></h3> + +<dl> + <dt>{{jsxref("RegExp.prototype")}}</dt> + <dd>Allows the addition of properties to all objects.</dd> + <dt>RegExp.length</dt> + <dd>The value of <code>RegExp.length</code> is 2.</dd> +</dl> + +<div>{{jsOverrides("Function", "Properties", "prototype")}}</div> + +<h3 id="Methods">Methods</h3> + +<p>The global <code>RegExp</code> object has no methods of its own, however, it does inherit some methods through the prototype chain.</p> + +<div>{{jsOverrides("Function", "Methods", "prototype")}}</div> + +<h2 id="RegExp_prototype_objects_and_instances"><code>RegExp</code> prototype objects and instances</h2> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype','Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype','Methods')}}</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Example_Using_a_regular_expression_to_change_data_format">Example: Using a regular expression to change data format</h3> + +<p>The following script uses the {{jsxref("String.replace", "replace")}} method of the {{jsxref("Global_Objects/String", "String")}} instance to match a name in the format <em>first last</em> and output it in the format <em>last</em>, <em>first</em>. In the replacement text, the script uses <code>$1</code> and <code>$2</code> to indicate the results of the corresponding matching parentheses in the regular expression pattern.</p> + +<pre class="brush: js">var re = /(\w+)\s(\w+)/; +var str = "John Smith"; +var newstr = str.replace(re, "$2, $1"); +console.log(newstr);</pre> + +<p>This displays "Smith, John".</p> + +<h3 id="Example_Using_regular_expression_on_multiple_lines">Example: Using regular expression on multiple lines</h3> + +<pre class="brush: js">var s = "Please yes\nmake my day!"; +s.match(/yes.*day/); +// Returns null +s.match(/yes[^]*day/); +// Returns 'yes\nmake my day' +</pre> + +<h3 id="Example_Using_a_regular_expression_with_the_sticky_flag">Example: Using a regular expression with the "sticky" flag</h3> + +<p>This example demonstrates how one could use the sticky flag on regular expressions to match individual lines of multiline input.</p> + +<pre class="brush: js">var text = "First line\nSecond line"; +var regex = /(\S+) line\n?/y; + +var match = regex.exec(text); +<span style="font-size: 1rem;">console.log</span>(match[1]); // prints "First" +<span style="font-size: 1rem;">console.log</span>(regex.lastIndex); // prints 11 + +var match2 = regex.exec(text); +<span style="font-size: 1rem;">console.log</span>(match2[1]); // prints "Second" +<span style="font-size: 1rem;">console.log</span>(regex.lastIndex); // prints "22" + +var match3 = regex.exec(text); +<span style="font-size: 1rem;">console.log</span>(match3 === null); // prints "true"</pre> + +<p>One can test at run-time whether the sticky flag is supported, using <code>try { … } catch { … }</code>. For this, either an <code>eval(…)</code> expression or the <code>RegExp(<var>regex-string</var>, <var>flags-string</var>)</code> syntax must be used (since the <code>/<var>regex</var>/<var>flags</var></code> notation is processed at compile-time, so throws an exception before the <code>catch</code> block is encountered). For example:</p> + +<pre class="brush: js">var supports_sticky; +try { RegExp('','y'); supports_sticky = true; } +catch(e) { supports_sticky = false; } +alert(supports_sticky); // alerts "true"</pre> + +<h3 id="Example_Regular_expression_and_Unicode_characters">Example: Regular expression and Unicode characters</h3> + +<p>As mentioned above, <code>\w</code> or <code>\W</code> only matches ASCII based characters; for example, 'a' to 'z', 'A' to 'Z', 0 to 9 and '_'. To match characters from other languages such as Cyrillic or Hebrew, use <code>\uhhhh</code>., where "hhhh" is the character's Unicode value in hexadecimal. This example demonstrates how one can separate out Unicode characters from a word.</p> + +<pre class="brush: js">var text = "Образец text на русском языке"; +var regex = /[\u0400-\u04FF]+/g; + +var match = regex.exec(text); +<span style="font-size: 1rem;">console.log</span>(match[0]); // prints "Образец" +<span style="font-size: 1rem;">console.log</span>(regex.lastIndex); // prints "7" + +var match2 = regex.exec(text); +<span style="font-size: 1rem;">console.log</span>(match2[0]); // prints "на" [did not print "text"] +<span style="font-size: 1rem;">console.log</span>(regex.lastIndex); // prints "15" + +// and so on</pre> + +<p>Here's an external resource for getting the complete Unicode block range for different scripts: <a href="http://kourge.net/projects/regexp-unicode-block" title="http://kourge.net/projects/regexp-unicode-block">Regexp-unicode-block</a></p> + +<h3 id="Example_Extracting_subdomain_name_from_URL">Example: Extracting subdomain name from URL</h3> + +<pre class="brush: js">var url = "http://xxx.domain.com"; +<span style="font-size: 1rem;">console.log</span>(/[^.]+/.exec(url)[0].substr(7)); // prints "xxx"</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition. Implemented in JavaScript 1.1</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.10', 'RegExp')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Sticky flag ("y")</td> + <td>39 (behind flag)</td> + <td>{{ CompatGeckoDesktop("1.9") }} ES4-Style {{bug(773687)}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Sticky flag ("y")</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop("1.9") }} ES4-Style {{bug(773687)}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions" title="JavaScript/Guide/Regular_Expressions">Regular Expressions</a> chapter in the <a href="/en-US/docs/Web/JavaScript/Guide" title="JavaScript/Guide">JavaScript Guide</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match">String.prototype.match()</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">String.prototype.replace()</a></li> +</ul> diff --git a/files/fa/web/javascript/reference/global_objects/regexp/test/index.html b/files/fa/web/javascript/reference/global_objects/regexp/test/index.html new file mode 100644 index 0000000000..1690ceb375 --- /dev/null +++ b/files/fa/web/javascript/reference/global_objects/regexp/test/index.html @@ -0,0 +1,123 @@ +--- +title: RegExp.prototype.test() +slug: Web/JavaScript/Reference/Global_Objects/RegExp/test +tags: + - جاوا اسکریپت + - جستجو + - متد +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/test +--- +<div dir="rtl"> + {{JSRef("Global_Objects", "RegExp")}}</div> +<h2 dir="rtl" id="Summary" name="Summary">خلاصه</h2> +<p dir="rtl"><strong>متد test یک جستجو برای یافتن رشته خاص در متن یا رشته مورد نظر انجام میدهد و True یا False برمیگرداند.</strong></p> +<h2 dir="rtl" id="Syntax" name="Syntax">ساختار</h2> +<pre dir="rtl"><var>regexObj</var>.test(str)</pre> +<h3 dir="rtl" id="Parameters" name="Parameters"><strong>پارامتر ها</strong></h3> +<dl> + <dt dir="rtl"> + <code>str</code></dt> + <dd dir="rtl"> + <strong>رشته ای که میخواهید با متن مورد نظر تطابق دهید.</strong></dd> +</dl> +<h3 dir="rtl" id="مقدار_بازگشتی"><strong>مقدار بازگشتی</strong></h3> +<p dir="rtl"><strong>مقدار بازگشتی از نوع Boolean بوده و True یا False میباشد.</strong></p> +<h2 dir="rtl" id="Description" name="Description">توضیحات</h2> +<p dir="rtl"><strong>متد test() زمانی استفاده میشود که میخواهید الگو مورد نظر خود را در یک متن جستجو کنید و از وجود آن در متن مورد نظر با خبر شوید.</strong></p> +<p dir="rtl"><strong>متدهای مرتبط :</strong> {jsxref("String.search") , {jsxref("RegExp.exec", "exec")</p> +<h2 dir="rtl" id="Examples" name="Examples">مثال</h2> +<h3 dir="rtl" id="Example:_Using_test" name="Example:_Using_test"><code>مثال: استفاده از test</code></h3> +<p dir="rtl"><strong>مثال زیر یک خروجی را چاپ میکند که اشاره به موفقیت آمیز بودن جستجو دارد:</strong></p> +<pre class="brush: js" dir="rtl">function testinput(re, str){ + var midstring; + if (re.test(str)) { + midstring = " contains "; + } else { + midstring = " does not contain "; + } + console.log(str + midstring + re.source); +} +</pre> +<h2 dir="rtl" id="خصوصیات">خصوصیات</h2> +<table class="standard-table" dir="rtl"> + <tbody> + <tr> + <th scope="col">خصوصیت</th> + <th scope="col">وضعیت</th> + <th scope="col">یاداشت</th> + </tr> + <tr> + <td>ECMAScript 3rd Edition. Implemented in JavaScript 1.2</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.10.6.3', 'RegExp.test')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-regexp.prototype.test', 'RegExp.test')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 dir="rtl" id="سازگاری_با_مرورگرها">سازگاری با مرورگرها</h2> +<p dir="rtl">{{ CompatibilityTable() }}</p> +<div dir="rtl" id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>خصوصیات</th> + <th>گوگل کروم</th> + <th>فایرفاکس</th> + <th>اینترنت اکسپلورر</th> + <th>اپرا</th> + <th>سافاری</th> + </tr> + <tr> + <td>پشتیبانی ابتدایی</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<div dir="rtl" id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>خصوصیات</th> + <th>اندروید</th> + <th>گوگل کروم برای اندروید</th> + <th>فایرفاکس موبایل</th> + <th>اینترنت اکسپلورر موبایل</th> + <th>اپرا موبایل</th> + <th>سافاری موبایل</th> + </tr> + <tr> + <td>پشتیبانی ابتدایی</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h3 dir="rtl" id="sect1"> </h3> +<h3 dir="rtl" id="یادداشتی_برای_Gecko-specific"><strong>یادداشتی برای Gecko-specific</strong></h3> +<p dir="rtl"><strong>قبل از نسخه Gecko 8.0 {{ geckoRelease("8.0") }} تابع test() مشکلاتی به همراه داشت ، زمانی که این تابع بدون پارامتر ورودی فراخوانی میشد الگو را با متن قبلی مطابقت میداد (RegExp.input property) در حالی که بایستی رشته "undefined" را قرار میداد. در حال حاضر این مشکل برطرف شده است و <code>این تابع به درستی کار میکند.</code></strong></p> +<p dir="rtl"> </p> +<p dir="rtl"> </p> +<h2 dir="rtl" id="همچنین_سری_بزنید_به">همچنین سری بزنید به :</h2> +<ul dir="rtl"> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions" title="JavaScript/Guide/Regular_Expressions">Regular Expressions</a> chapter in the <a href="/en-US/docs/Web/JavaScript/Guide" title="JavaScript/Guide">JavaScript Guide</a></li> + <li>{{jsxref("Global_Objects/RegExp", "RegExp")}}</li> +</ul> diff --git a/files/fa/web/javascript/reference/global_objects/set/index.html b/files/fa/web/javascript/reference/global_objects/set/index.html new file mode 100644 index 0000000000..c756b38195 --- /dev/null +++ b/files/fa/web/javascript/reference/global_objects/set/index.html @@ -0,0 +1,459 @@ +--- +title: مجموعه | Set +slug: Web/JavaScript/Reference/Global_Objects/Set +tags: + - جاوااسکریپت + - مجموعه +translation_of: Web/JavaScript/Reference/Global_Objects/Set +--- +<div dir="rtl" style="font-family: sahel,iransans,tahoma,sans-serif;"> +<div>{{JSRef}}</div> + +<div>شیء Set به شما اجازه میدهد مجموعهای از مقادیر منحصر به فرد را از هر نوعی که باشند ذخیره کنید، چه {{Glossary("Primitive", "مقادیر اوّلیّه (Primitive)")}} باشند، چه ارجاعهایی به اشیاء.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new Set([iterable]);</pre> + +<h3 id="پارامترها">پارامترها</h3> + +<dl> + <dt>iterable</dt> + <dd>اگر یک شیء <a href="/fa-IR/docs/Web/JavaScript/Reference/Statements/for...of">قابل شمارش</a> (iterable) باشد، همهی عناصر آن به مجموعهی جدید ما اضافه میشوند. null نیز در اینجا به منزلهی undefined است.</dd> +</dl> + +<h2 id="توضیح">توضیح</h2> + +<p>هر شیء Set مجموعهای از مقادیر است. این مقادیر به ترتیبی که به مجموعه اضافه شدند شمارش میشوند. یک مقدار در مجموعه فقط میتواند یک بار بیاید (مهمترین تفاوت مجموعه و آرایه در همین است که در مجموعه مقدار تکراری نداریم ولی در آرایه میتوانیم داشته باشیم).</p> + +<h3 id="برابر_بودن_مقدارها">برابر بودن مقدارها</h3> + +<p>از آن جایی که در هر مجموعه باید مقادیر منحصر به فرد داشته باشیم، به صورت خودکار هنگام اضافه شدن عضو جدید به مجموعه برابری مقدارها بررسی میشود. در نسخههای قبلی ECMAScript، الگوریتمی که این بررسی استفاده میکرد با الگوریتم عملگر === فرق داشت. مخصوصا برای مجموعهها عدد صفر مثبت <bdi>+0</bdi> با صفر منفی <bdi>-0</bdi> متفاوت در نظر گرفته میشدند. با این حال در مشخّصاتی که برای ECMAScript 2015 در نظر گرفته شد این مورد تغییر کرد. برای اطّلاعات بیشتر <a href="#Browser compatibility">جدول پشتیبانی مرورگرها</a> از برابری صفر مثبت و منفی را ببینید.</p> + +<p>ضمناً NaN و undefined نیز میتوانند در یک مجموعه ذخیره شوند. در این مورد NaN با NaN برابر در نظر گرفته میشود (در حالی که به صورت عادی NaN !== NaN است).</p> + +<h2 id="خصیصهها">خصیصهها</h2> + +<dl> + <dt><code>Set.length</code></dt> + <dd>مقدار خصیصهی length همیشه 0 است!</dd> + <dt><bdi>{{jsxref("Set.@@species", "get Set[@@species]")}}</bdi></dt> + <dd>تابع سازندهای است که برای اشیاء مشتق شده به کار میرود.</dd> + <dt>{{jsxref("Set.prototype")}}</dt> + <dd>نشاندهندهی prototype تابع سازندهی Set است که اجازه میدهد خصیصههای جدیدی را به تمام اشیائی که از نوع مجموعه هستند اضافه کنید.</dd> +</dl> + +<h2 id="Set_instances"><code>Set</code> instances</h2> + +<p>تمام نمونههای کلاس Set از {{jsxref("Set.prototype")}} ارثبری میکنند.</p> + +<h3 id="خصیصهها_2">خصیصهها</h3> + +<bdi><p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Properties')}}</p></bdi> + +<h3 id="متُدها">متُدها</h3> + +<bdi><p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Methods')}}</p></bdi> + +<h2 id="مثالها">مثالها</h2> + +<h3 id="استفاده_از_شیء_Set">استفاده از شیء Set</h3> + +<pre class="brush: js">var mySet = new Set(); + +mySet.add(1); +mySet.add(5); +mySet.add("some text"); +var o = {a: 1, b: 2}; +mySet.add(o); + +mySet.add({a: 1, b: 2}); // o is referencing a different object so this is okay + +mySet.has(1); // true +mySet.has(3); // false, 3 has not been added to the set +mySet.has(5); // true +mySet.has(Math.sqrt(25)); // true +mySet.has("Some Text".toLowerCase()); // true +mySet.has(o); // true + +mySet.size; // 4 + +mySet.delete(5); // removes 5 from the set +mySet.has(5); // false, 5 has been removed + +mySet.size; // 3, we just removed one value +</pre> + +<h3 id="شمارش_عناصر_مجموعه">شمارش عناصر مجموعه</h3> + +<pre class="brush: js">// iterate over items in set +// logs the items in the order: 1, "some text", {"a": 1, "b": 2} +for (let item of mySet) console.log(item); + +// logs the items in the order: 1, "some text", {"a": 1, "b": 2} +for (let item of mySet.keys()) console.log(item); + +// logs the items in the order: 1, "some text", {"a": 1, "b": 2} +for (let item of mySet.values()) console.log(item); + +// logs the items in the order: 1, "some text", {"a": 1, "b": 2} +//(key and value are the same here) +for (let [key, value] of mySet.entries()) console.log(key); + +// convert Set object to an Array object, with <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from">Array.from</a> +var myArr = Array.from(mySet); // [1, "some text", {"a": 1, "b": 2}] + +// the following will also work if run in an HTML document +mySet.add(document.body); +mySet.has(document.querySelector("body")); // true + +// converting between Set and Array +mySet2 = new Set([1,2,3,4]); +mySet2.size; // 4 +[...mySet2]; // [1,2,3,4] + +// intersect can be simulated via +var intersection = new Set([...set1].filter(x => set2.has(x))); + +// difference can be simulated via +var difference = new Set([...set1].filter(x => !set2.has(x))); + +// Iterate set entries with forEach +mySet.forEach(function(value) { + console.log(value); +}); + +// 1 +// 2 +// 3 +// 4</pre> + +<h3 id="پیادهسازی_عملهای_اصلی_در_مجموعهها">پیادهسازی عملهای اصلی در مجموعهها</h3> + +<pre class="brush: js">Set.prototype.isSuperset = function(subset) { + for (var elem of subset) { + if (!this.has(elem)) { + return false; + } + } + return true; +} + +Set.prototype.union = function(setB) { + var union = new Set(this); + for (var elem of setB) { + union.add(elem); + } + return union; +} + +Set.prototype.intersection = function(setB) { + var intersection = new Set(); + for (var elem of setB) { + if (this.has(elem)) { + intersection.add(elem); + } + } + return intersection; +} + +Set.prototype.difference = function(setB) { + var difference = new Set(this); + for (var elem of setB) { + difference.delete(elem); + } + return difference; +} + +//Examples +var setA = new Set([1,2,3,4]), + setB = new Set([2,3]), + setC = new Set([3,4,5,6]); + +setA.isSuperset(setB); // => true +setA.union(setC); // => Set [1, 2, 3, 4, 5, 6] +setA.intersection(setC); // => Set [3, 4] +setA.difference(setC); // => Set [1, 2] + +</pre> + +<h3 id="ارتباط_مجموعه_و_آرایه">ارتباط مجموعه و آرایه</h3> + +<pre class="brush: js">var myArray = ["value1", "value2", "value3"]; + +// Use the regular Set constructor to transform an Array into a Set +var mySet = new Set(myArray); + +mySet.has("value1"); // returns true + +// Use the spread operator to transform a set into an Array. +console.log([...mySet]); // Will show you exactly the same Array as myArray</pre> + +<h2 id="مشخّصات">مشخّصات</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-set-objects', 'Set')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="سازگاری_با_مرورگرها"><a id="سازگاری با مرورگرها" name="سازگاری با مرورگرها">سازگاری با مرورگرها</a></h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>ویژگی</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>پشتیبانی ساده</td> + <td> + <p>{{ CompatChrome(38) }} [1]</p> + </td> + <td>12</td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>{{ CompatIE("11") }}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td>Constructor argument: <code>new Set(iterable)</code></td> + <td>{{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9.0</td> + </tr> + <tr> + <td>iterable</td> + <td>{{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{ CompatGeckoDesktop("17") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Set.clear()</code></td> + <td>{{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>{{ CompatIE("11") }}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Set.keys(), Set.values(), Set.entries()</code></td> + <td>{{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("24")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Set.forEach()</code></td> + <td>{{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>{{ CompatIE("11") }}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td>Value equality for -0 and 0</td> + <td>{{ CompatChrome(38) }}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatSafari(9)}}</td> + </tr> + <tr> + <td>Constructor argument: <code>new Set(null)</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatIE(11)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari(7.1)}}</td> + </tr> + <tr> + <td>Monkey-patched <code>add()</code> in Constructor</td> + <td>{{CompatVersionUnknown}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + <tr> + <td><code>Set[@@species]</code></td> + <td>{{ CompatChrome(51) }}</td> + <td>13</td> + <td>{{CompatGeckoDesktop("41")}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatOpera(38) }}</td> + <td>{{CompatSafari(10)}}</td> + </tr> + <tr> + <td><code>Set()</code> without <code>new</code> throws</td> + <td>{{CompatVersionUnknown}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("42")}}</td> + <td>{{CompatIE(11)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(38)}} [1]</td> + <td>{{ CompatGeckoMobile("13") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Constructor argument: <code>new Set(iterable)</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(38)}}</td> + <td>{{ CompatGeckoMobile("13") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9</td> + </tr> + <tr> + <td>iterable</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("17") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Set.clear()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Set.keys(), Set.values(), Set.entries()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("24")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Set.forEach()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Value equality for -0 and 0</td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("29")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9</td> + </tr> + <tr> + <td>Constructor argument: <code>new Set(null)</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + </tr> + <tr> + <td>Monkey-patched <code>add()</code> in Constructor</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9</td> + </tr> + <tr> + <td><code>Set[@@species]</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("41")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>10</td> + </tr> + <tr> + <td><code>Set()</code> without <code>new</code> throws</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("42")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] The feature was available behind a preference from Chrome 31. In <code>chrome://flags</code>, activate the entry “Enable Experimental JavaScript”.</p> + +<h2 id="مطالب_مرتبط">مطالب مرتبط</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> +</div> diff --git a/files/fa/web/javascript/reference/index.html b/files/fa/web/javascript/reference/index.html new file mode 100644 index 0000000000..d78299497a --- /dev/null +++ b/files/fa/web/javascript/reference/index.html @@ -0,0 +1,50 @@ +--- +title: مرجع جاوا اسکریپت +slug: Web/JavaScript/Reference +tags: + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference +--- +<div>{{JsSidebar}}</div> + +<p>This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more <a href="/en-US/docs/Web/JavaScript/Reference/About">about this reference</a>.</p> + +<h2 id="Global_Objects">Global Objects</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript standard built-in objects</a>, along with their methods and properties.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard objects (by category)')}}</div> + +<h2 id="Statements">Statements</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements and declarations</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div> + +<h2 id="Expressions_and_operators">Expressions and operators</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript expressions and operators</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div> + +<h2 id="Functions">Functions</h2> + +<p>This chapter documents how to work with <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope">JavaScript functions</a> to develop your applications.</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments"><code>arguments</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/arrow_functions">Arrow functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/default_parameters">Default parameters</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li> +</ul> + +<h2 id="Additional_reference_pages">Additional reference pages</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li> +</ul> diff --git a/files/fa/web/javascript/reference/operators/index.html b/files/fa/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..636cb3acca --- /dev/null +++ b/files/fa/web/javascript/reference/operators/index.html @@ -0,0 +1,302 @@ +--- +title: Expressions and operators +slug: Web/JavaScript/Reference/Operators +tags: + - بازبینی + - جاوااسکریپت + - عملوند + - منابع +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<div>این بخش از سند شامل تمامی عمل ها و عبارت و کلمات کلیدی بکار رفته در زبان برنامه نویسی جاوااسکریپت می باشد.</div> + +<h2 id="دسته_بندی_عبارت_و_عمل_ها">دسته بندی عبارت و عمل ها</h2> + +<p>لیست زیر براساس الفابت انگلیسی مرتب شده است</p> + +<h3 id="عبارات_اصلی">عبارات اصلی</h3> + +<p>عبارت عمومی و کلمات کلیدی اصلی در جاوا اسکریپت.</p> + +<dl> + <dt>{{jsxref("Operators/this", "this")}}</dt> + <dd dir="rtl">کلمه کلیدی <code>this</code> به محتوایی در درون تابعی که در آن نوشته شده است اشاره می کند.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd dir="rtl">کلمه کلیدی <code>function</code> ٫ تعریف کننده یک تابع است.</dd> + <dt>{{jsxref("Operators/class", "class")}}</dt> + <dd dir="rtl">کلمه کلیدی <code>class</code> ٫ تعریف کننده یک کلاس است.</dd> + <dt>{{jsxref("Operators/function*", "function*")}}</dt> + <dd dir="rtl">کلمه کلیدی <code>function*</code> تعریف کننده یک سازنده کلاس است.</dd> + <dt>{{jsxref("Operators/yield", "yield")}}</dt> + <dd style="direction: rtl;">مکث و از سرگیری می کند تابعی که تولید شده است.</dd> + <dt>{{jsxref("Operators/yield*", "yield*")}}</dt> + <dd dir="rtl">محول می کند به تابع یا آبجکت تولید شده دیگر.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/async_function", "async function*")}}</dt> + <dd dir="rtl"><code>async function</code> یک تابع async تعریف می کند</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/await", "await")}}</dt> + <dd dir="rtl">مکث و از سرگیری می کند و تابع اسینک (async ) و منتظر اجازه برای تایید را رد می ماند</dd> + <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> + <dd style="direction: rtl;">تعریف کننده /سازنده یک آرایه .</dd> + <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> + <dd dir="rtl">تعریف کننده / سازنده یک آبجکت ( شئی) .</dd> + <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd dir="rtl">یک ترکیب صحیح از عبارتها</dd> + <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> + <dd dir="rtl">دسته بندی عمل ها</dd> +</dl> + +<h3 dir="rtl" id="عبارت_های_سمت_چپ">عبارت های سمت چپ</h3> + +<p dir="rtl">مقدارهای سمت چپ مشخص کردن هدف هستند </p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> + <dd>عمل های شامل درستی به یک ویژگی یا متد از یک آبجکت(شئی) از قبل تعریف شده<br> + (<code>object.property</code> و <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd dir="rtl">عمل <code>new</code> یک سازنده از الگو یا موجودیت از قبل تعریف شده مثل آبجکت </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></dt> + <dd>In constructors, <code>new.target</code> refers to the constructor that was invoked by {{jsxref("Operators/new", "new")}}.</dd> + <dt>{{jsxref("Operators/super", "super")}}</dt> + <dd style="direction: rtl;">کلیدواژه <code>super</code> والد سازنده را صدا می زند</dd> + <dt>{{jsxref("Operators/Spread_operator", "...obj")}}</dt> + <dd>The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.</dd> +</dl> + +<h3 id="افزایش_و_کاهش">افزایش و کاهش</h3> + +<p>عملوند پیشوندی/ پسوندی افزایشی و عملوند پیشوندی/پسوندی کاهشی</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> + <dd>عملوند پسوندی افزایشی.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> + <dd>عملوند پسوندی کاهشی.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> + <dd>عملوند پیشوندی افزایشی.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> + <dd>عملوند پیشوند کاهشی</dd> +</dl> + +<h3 id="عملوند_های_یکتا">عملوند های یکتا</h3> + +<p>A unary operation is operation with only one operand.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd dir="rtl">عملوند <code>delete</code> ویژگی /ها را از یک آبجکت حذف می کند.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd dir="rtl">در عمل کننده <code>void</code> مقداری برای بازگشت از یک عبارت وجود ندارد.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd dir="rtl"><code>typeof</code> نوع آبجکت (شئی )دریافتی را مشخص می کند.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt> + <dd>The unary plus operator converts its operand to Number type.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt> + <dd>The unary negation operator converts its operand to Number type and then negates it.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Bitwise NOT operator.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Logical NOT operator.</dd> +</dl> + +<h3 id="عملوند_های_منطقی">عملوند های منطقی</h3> + +<p>عملوندهای منطقی روی مقدار عددی اعمال می شوند و یک عدد به عنوان نتیجه منطقی عملوند منطقی خواهد بود</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> + <dd>عمل جمع.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> + <dd>عمل تفریق/منها</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> + <dd>عمل تقسیم</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> + <dd>عمل ضرب</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> + <dd>عمل تقسیم / خروجی باقیماند تقسیم</dd> +</dl> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</dt> + <dd>عمل توان</dd> +</dl> + +<h3 id="Relational_operators">Relational operators</h3> + +<p>A comparison operator compares its operands and returns a <code>Boolean</code> value based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>The <code>in</code> operator determines whether an object has a given property.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>The <code>instanceof</code> operator determines whether an object is an instance of another object.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Less than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Greater than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>Less than or equal operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>Greater than or equal operator.</dd> +</dl> + +<div class="note"> +<p><strong>Note: =></strong> is not an operator, but the notation for <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>.</p> +</div> + +<h3 id="Equality_operators">Equality operators</h3> + +<p>The result of evaluating an equality operator is always of type <code>Boolean</code> based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt> + <dd>Equality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Inequality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Identity operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>Nonidentity operator.</dd> +</dl> + +<h3 id="Bitwise_shift_operators">Bitwise shift operators</h3> + +<p>Operations to shift all bits of the operand.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Bitwise left shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Bitwise right shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Bitwise unsigned right shift operator.</dd> +</dl> + +<h3 id="Binary_bitwise_operators">Binary bitwise operators</h3> + +<p>Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Bitwise AND.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Bitwise OR.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Bitwise XOR.</dd> +</dl> + +<h3 id="Binary_logical_operators">Binary logical operators</h3> + +<p>Logical operators are typically used with boolean (logical) values, and when they are, they return a boolean value.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>Logical AND.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd>Logical OR.</dd> +</dl> + +<h3 id="Conditional_ternary_operator">Conditional (ternary) operator</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>The conditional operator returns one of two values based on the logical value of the condition.</p> + </dd> +</dl> + +<h3 id="Assignment_operators">Assignment operators</h3> + +<p>An assignment operator assigns a value to its left operand based on the value of its right operand.</p> + +<dl> + <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Assignment operator.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Multiplication assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Division assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Remainder assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Addition assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Subtraction assignment</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Left shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Unsigned right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Bitwise AND assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Bitwise XOR assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Bitwise OR assignment.</dd> + <dt>{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.</p> + </dd> +</dl> + +<h3 id="Comma_operator">Comma operator</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd>The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.</dd> +</dl> + +<h3 id="Non-standard_features">Non-standard features</h3> + +<dl> + <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt> + <dd>The <code>function</code> keyword can be used to define a legacy generator function inside an expression. To make the function a legacy generator, the function body should contains at least one {{jsxref("Operators/yield", "yield")}} expression.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt> + <dd>The expression closure syntax is a shorthand for writing simple function.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> + <dd>Array comprehensions.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> + <dd>Generator comprehensions.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Spread operator, destructuring assignment, <code>super</code> keyword.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li> +</ul> diff --git a/files/fa/web/javascript/reference/statements/index.html b/files/fa/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..368977efc8 --- /dev/null +++ b/files/fa/web/javascript/reference/statements/index.html @@ -0,0 +1,131 @@ +--- +title: Statements and declarations +slug: Web/JavaScript/Reference/Statements +tags: + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - statements +translation_of: Web/JavaScript/Reference/Statements +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.</p> + +<h2 id="Statements_and_declarations_by_category">Statements and declarations by category</h2> + +<p>For an alphabetical listing see the sidebar on the left.</p> + +<h3 id="Control_flow">Control flow</h3> + +<dl> + <dt>{{jsxref("Statements/block", "Block")}}</dt> + <dd>A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.</dd> + <dt>{{jsxref("Statements/break", "break")}}</dt> + <dd>Terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.</dd> + <dt>{{jsxref("Statements/continue", "continue")}}</dt> + <dd>Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.</dd> + <dt>{{jsxref("Statements/Empty", "Empty")}}</dt> + <dd>An empty statement is used to provide no statement, although the JavaScript syntax would expect one.</dd> + <dt>{{jsxref("Statements/if...else", "if...else")}}</dt> + <dd>Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.</dd> + <dt>{{jsxref("Statements/switch", "switch")}}</dt> + <dd>Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.</dd> + <dt>{{jsxref("Statements/throw", "throw")}}</dt> + <dd>Throws a user-defined exception.</dd> + <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd>Marks a block of statements to try, and specifies a response, should an exception be thrown.</dd> +</dl> + +<h3 id="Declarations">Declarations</h3> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Declares a variable, optionally initializing it to a value.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt> + <dd>Declares a block scope local variable, optionally initializing it to a value.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt> + <dd>Declares a read-only named constant.</dd> +</dl> + +<h3 id="Functions_and_classes">Functions and classes</h3> + +<dl> + <dt>{{jsxref("Statements/function", "function")}}</dt> + <dd>Declares a function with the specified parameters.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/function*", "function*")}}</dt> + <dd>Generators functions enable writing <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterators</a> more easily.</dd> + <dt>{{jsxref("Statements/return", "return")}}</dt> + <dd>Specifies the value to be returned by a function.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/class", "class")}}</dt> + <dd>Declares a class.</dd> +</dl> + +<h3 id="Iterations">Iterations</h3> + +<dl> + <dt>{{jsxref("Statements/do...while", "do...while")}}</dt> + <dd>Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.</dd> + <dt>{{jsxref("Statements/for", "for")}}</dt> + <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd> + <dt>{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt> + <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd> + <dt>{{jsxref("Statements/for...in", "for...in")}}</dt> + <dd>Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/for...of", "for...of")}}</dt> + <dd>Iterates over iterable objects (including <a href="https://developer.mozilla.org/en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="Array">arrays</a>, array-like objects, <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Iterators_and_Generators" title="Iterators and generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd> + <dt>{{jsxref("Statements/while", "while")}}</dt> + <dd>Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.</dd> +</dl> + +<h3 id="Others">Others</h3> + +<dl> + <dt>{{jsxref("Statements/debugger", "debugger")}}</dt> + <dd>Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/export", "export")}}</dt> + <dd>Used to export functions to make them available for imports in external modules, another scripts.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/import", "import")}}</dt> + <dd>Used to import functions exported from an external module, another script.</dd> + <dt>{{jsxref("Statements/label", "label")}}</dt> + <dd>Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd> +</dl> + +<dl> + <dt>{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt> + <dd>Extends the scope chain for a statement.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: function*, let, for...of, yield, class</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li> +</ul> diff --git a/files/fa/web/javascript/راهنما/control_flow_and_error_handling/index.html b/files/fa/web/javascript/راهنما/control_flow_and_error_handling/index.html new file mode 100644 index 0000000000..1b3edc9c8a --- /dev/null +++ b/files/fa/web/javascript/راهنما/control_flow_and_error_handling/index.html @@ -0,0 +1,424 @@ +--- +title: Control flow and error handling +slug: Web/JavaScript/راهنما/Control_flow_and_error_handling +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +<pre>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</pre> + +<p class="summary">JavaScript supports a compact set of statements, specifically control flow statements, that you can use to incorporate a great deal of interactivity in your application. This chapter provides an overview of these statements.</p> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript reference</a> contains exhaustive details about the statements in this chapter. The semicolon (<code>;</code>) character is used to separate statements in JavaScript code.</p> + +<p>Any JavaScript expression is also a statement. See <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a> for complete information about expressions.</p> + +<h2 id="Block_statement">Block statement</h2> + +<p>The most basic statement is a block statement that is used to group statements. The block is delimited by a pair of curly brackets:</p> + +<pre class="syntaxbox">{ + statement_1; + statement_2; + . + . + . + statement_n; +} +</pre> + +<h3 id="Example"><strong>Example</strong></h3> + +<p>Block statements are commonly used with control flow statements (e.g. <code>if</code>, <code>for</code>, <code>while</code>).</p> + +<pre class="brush: js">while (x < 10) { + x++; +} +</pre> + +<p>Here, <code>{ x++; }</code> is the block statement.</p> + +<p><strong>Important</strong>: JavaScript prior to ECMAScript2015 does <strong>not</strong> have block scope. Variables introduced within a block are scoped to the containing function or script, and the effects of setting them persist beyond the block itself. In other words, block statements do not define a scope. "Standalone" blocks in JavaScript can produce completely different results from what they would produce in C or Java. For example:</p> + +<pre class="brush: js">var x = 1; +{ + var x = 2; +} +console.log(x); // outputs 2 +</pre> + +<p>This outputs 2 because the <code>var x</code> statement within the block is in the same scope as the <code>var x</code> statement before the block. In C or Java, the equivalent code would have outputted 1.</p> + +<p>Starting with ECMAScript2015, the <code>let</code> variable declaration is block scoped. See the {{jsxref("Statements/let", "let")}} reference page for more information.</p> + +<h2 id="Conditional_statements">Conditional statements</h2> + +<p>A conditional statement is a set of commands that executes if a specified condition is true. JavaScript supports two conditional statements: <code>if...else</code> and <code>switch</code>.</p> + +<h3 id="if...else_statement"><code>if...else</code> statement</h3> + +<p>Use the <code>if</code> statement to execute a statement if a logical condition is true. Use the optional <code>else</code> clause to execute a statement if the condition is false. An <code>if</code> statement looks as follows:</p> + +<p>if (condition) {<br> + statement_1;<br> + } else {<br> + statement_2;<br> + }</p> + +<p>Here the<code> condition</code> can be any expression that evaluates to true or false. See <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean#Description">Boolean</a> for an explanation of what evaluates to <code>true</code> and <code>false</code>. If <code>condition</code> evaluates to true, <code>statement_1</code> is executed; otherwise, <code>statement_2</code> is executed. <code>statement_1</code> and <code>statement_2</code> can be any statement, including further nested <code>if</code> statements.</p> + +<p>You may also compound the statements using <code>else if</code> to have multiple conditions tested in sequence, as follows:</p> + +<pre class="syntaxbox">if (condition_1) { + statement_1; +} else if (condition_2) { + statement_2; +} else if (condition_n) { + statement_n; +} else { + statement_last; +} +</pre> + +<p>In the case of multiple conditions only the first logical condition which evaluates to true will be executed. To execute multiple statements, group them within a block statement (<code>{ ... }</code>) . In general, it's good practice to always use block statements, especially when nesting <code>if</code> statements:</p> + +<pre class="syntaxbox">if (condition) { + statement_1_runs_if_condition_is_true; + statement_2_runs_if_condition_is_true; +} else { + statement_3_runs_if_condition_is_false; + statement_4_runs_if_condition_is_false; +} +</pre> + +<div>It is advisable to not use simple assignments in a conditional expression, because the assignment can be confused with equality when glancing over the code. For example, do not use the following code:</div> + +<pre class="example-bad brush: js">if (x = y) { + /* statements here */ +} +</pre> + +<p>If you need to use an assignment in a conditional expression, a common practice is to put additional parentheses around the assignment. For example:</p> + +<pre class="brush: js">if ((x = y)) { + /* statements here */ +} +</pre> + +<h4 id="Falsy_values">Falsy values</h4> + +<p>The following values evaluate to false (also known as {{Glossary("Falsy")}} values):</p> + +<ul> + <li><code>false</code></li> + <li><code>undefined</code></li> + <li><code>null</code></li> + <li><code>0</code></li> + <li><code>NaN</code></li> + <li>the empty string (<code>""</code>)</li> +</ul> + +<p>All other values, including all objects, evaluate to true when passed to a conditional statement.</p> + +<p>Do not confuse the primitive boolean values <code>true</code> and <code>false</code> with the true and false values of the {{jsxref("Boolean")}} object. For example:</p> + +<pre class="brush: js">var b = new Boolean(false); +if (b) // this condition evaluates to true +if (b == true) // this condition evaluates to false +</pre> + +<h4 id="Example_2"><strong>Example</strong></h4> + +<p>In the following example, the function <code>checkData</code> returns <code>true</code> if the number of characters in a <code>Text</code> object is three; otherwise, it displays an alert and returns <code>false</code>.</p> + +<pre class="brush: js">function checkData() { + if (document.form1.threeChar.value.length == 3) { + return true; + } else { + alert("Enter exactly three characters. " + + document.form1.threeChar.value + " is not valid."); + return false; + } +} +</pre> + +<h3 id="switch_statement"><code>switch</code> statement</h3> + +<p>A <code>switch</code> statement allows a program to evaluate an expression and attempt to match the expression's value to a case label. If a match is found, the program executes the associated statement. A <code>switch</code> statement looks as follows:</p> + +<pre class="syntaxbox">switch (expression) { + case label_1: + statements_1 + [break;] + case label_2: + statements_2 + [break;] + ... + default: + statements_def + [break;] +} +</pre> + +<p>The program first looks for a <code>case</code> clause with a label matching the value of expression and then transfers control to that clause, executing the associated statements. If no matching label is found, the program looks for the optional <code>default</code> clause, and if found, transfers control to that clause, executing the associated statements. If no <code>default</code> clause is found, the program continues execution at the statement following the end of <code>switch</code>. By convention, the <code>default</code> clause is the last clause, but it does not need to be so.</p> + +<p>The optional <code>break</code> statement associated with each <code>case</code> clause ensures that the program breaks out of <code>switch</code> once the matched statement is executed and continues execution at the statement following switch. If <code>break</code> is omitted, the program continues execution at the next statement in the <code>switch</code> statement.</p> + +<h4 id="Example_3"><strong>Example</strong></h4> + +<p>In the following example, if <code>fruittype</code> evaluates to "Bananas", the program matches the value with case "Bananas" and executes the associated statement. When <code>break</code> is encountered, the program terminates <code>switch</code> and executes the statement following <code>switch</code>. If <code>break</code> were omitted, the statement for case "Cherries" would also be executed.</p> + +<pre class="brush: js">switch (fruittype) { + case "Oranges": + console.log("Oranges are $0.59 a pound."); + break; + case "Apples": + console.log("Apples are $0.32 a pound."); + break; + case "Bananas": + console.log("Bananas are $0.48 a pound."); + break; + case "Cherries": + console.log("Cherries are $3.00 a pound."); + break; + case "Mangoes": + console.log("Mangoes are $0.56 a pound."); + break; + case "Papayas": + console.log("Mangoes and papayas are $2.79 a pound."); + break; + default: + console.log("Sorry, we are out of " + fruittype + "."); +} +console.log("Is there anything else you'd like?");</pre> + +<h2 id="Exception_handling_statements">Exception handling statements</h2> + +<p>You can throw exceptions using the <code>throw</code> statement and handle them using the <code>try...catch</code> statements.</p> + +<ul> + <li><a href="#throw_statement"><code>throw</code> statement</a></li> + <li><a href="#try...catch_statement"><code>try...catch</code> statement</a></li> +</ul> + +<h3 id="Exception_types">Exception types</h3> + +<p>Just about any object can be thrown in JavaScript. Nevertheless, not all thrown objects are created equal. While it is fairly common to throw numbers or strings as errors it is frequently more effective to use one of the exception types specifically created for this purpose:</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects#Fundamental_objects">ECMAScript exceptions</a></li> + <li>{{domxref("DOMException")}} and {{domxref("DOMError")}}</li> +</ul> + +<h3 id="throw_statement"><code>throw</code> statement</h3> + +<p>Use the <code>throw</code> statement to throw an exception. When you throw an exception, you specify the expression containing the value to be thrown:</p> + +<pre class="syntaxbox">throw expression; +</pre> + +<p>You may throw any expression, not just expressions of a specific type. The following code throws several exceptions of varying types:</p> + +<pre class="brush: js">throw "Error2"; // String type +throw 42; // Number type +throw true; // Boolean type +throw {toString: function() { return "I'm an object!"; } }; +</pre> + +<div class="note"><strong>Note:</strong> You can specify an object when you throw an exception. You can then reference the object's properties in the <code>catch</code> block. The following example creates an object <code>myUserException</code> of type <code>UserException</code> and uses it in a throw statement.</div> + +<pre class="brush: js">// Create an object type UserException +function UserException(message) { + this.message = message; + this.name = "UserException"; +} + +// Make the exception convert to a pretty string when used as a string +// (e.g. by the error console) +UserException.prototype.toString = function() { + return this.name + ': "' + this.message + '"'; +} + +// Create an instance of the object type and throw it +throw new UserException("Value too high");</pre> + +<h3 id="try...catch_statement"><code>try...catch</code> statement</h3> + +<p>The <code>try...catch</code> statement marks a block of statements to try, and specifies one or more responses should an exception be thrown. If an exception is thrown, the <code>try...catch</code> statement catches it.</p> + +<p>The <code>try...catch</code> statement consists of a <code>try</code> block, which contains one or more statements, and a <code>catch</code> block, containing statements that specify what to do if an exception is thrown in the <code>try</code> block. That is, you want the <code>try</code> block to succeed, and if it does not succeed, you want control to pass to the <code>catch</code> block. If any statement within the <code>try</code> block (or in a function called from within the <code>try</code> block) throws an exception, control immediately shifts to the <code>catch</code> block. If no exception is thrown in the <code>try</code> block, the <code>catch</code> block is skipped. The <code>finally</code> block executes after the <code>try</code> and <code>catch</code> blocks execute but before the statements following the <code>try...catch</code> statement.</p> + +<p>The following example uses a <code>try...catch</code> statement. The example calls a function that retrieves a month name from an array based on the value passed to the function. If the value does not correspond to a month number (1-12), an exception is thrown with the value <code>"InvalidMonthNo"</code> and the statements in the <code>catch</code> block set the <code>monthName</code> variable to <code>unknown</code>.</p> + +<pre class="brush: js">function getMonthName(mo) { + mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec) + var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul", + "Aug","Sep","Oct","Nov","Dec"]; + if (months[mo]) { + return months[mo]; + } else { + throw "InvalidMonthNo"; //throw keyword is used here + } +} + +try { // statements to try + monthName = getMonthName(myMonth); // function could throw exception +} +catch (e) { + monthName = "unknown"; + logMyErrors(e); // pass exception object to error handler -> your own function +} +</pre> + +<h4 id="The_catch_block">The <code>catch</code> block</h4> + +<p>You can use a <code>catch</code> block to handle all exceptions that may be generated in the <code>try</code> block.</p> + +<pre class="syntaxbox">catch (catchID) { + statements +} +</pre> + +<p>The <code>catch</code> block specifies an identifier (<code>catchID</code> in the preceding syntax) that holds the value specified by the <code>throw</code> statement; you can use this identifier to get information about the exception that was thrown. JavaScript creates this identifier when the <code>catch</code> block is entered; the identifier lasts only for the duration of the <code>catch</code> block; after the <code>catch</code> block finishes executing, the identifier is no longer available.</p> + +<p>For example, the following code throws an exception. When the exception occurs, control transfers to the <code>catch</code> block.</p> + +<pre class="brush: js">try { + throw "myException"; // generates an exception +} +catch (e) { + // statements to handle any exceptions + logMyErrors(e); // pass exception object to error handler +} +</pre> + +<h4 id="The_finally_block">The <code>finally</code> block</h4> + +<p>The <code>finally</code> block contains statements to execute after the <code>try</code> and <code>catch</code> blocks execute but before the statements following the <code>try...catch</code> statement. The <code>finally</code> block executes whether or not an exception is thrown. If an exception is thrown, the statements in the <code>finally</code> block execute even if no <code>catch</code> block handles the exception.</p> + +<p>You can use the <code>finally</code> block to make your script fail gracefully when an exception occurs; for example, you may need to release a resource that your script has tied up. The following example opens a file and then executes statements that use the file (server-side JavaScript allows you to access files). If an exception is thrown while the file is open, the <code>finally</code> block closes the file before the script fails.</p> + +<pre class="brush: js">openMyFile(); +try { + writeMyFile(theData); //This may throw a error +} catch(e) { + handleError(e); // If we got a error we handle it +} finally { + closeMyFile(); // always close the resource +} +</pre> + +<p>If the <code>finally</code> block returns a value, this value becomes the return value of the entire <code>try-catch-finally</code> production, regardless of any <code>return</code> statements in the <code>try</code> and <code>catch</code> blocks:</p> + +<pre class="brush: js">function f() { + try { + console.log(0); + throw "bogus"; + } catch(e) { + console.log(1); + return true; // this return statement is suspended + // until finally block has completed + console.log(2); // not reachable + } finally { + console.log(3); + return false; // overwrites the previous "return" + console.log(4); // not reachable + } + // "return false" is executed now + console.log(5); // not reachable +} +f(); // console 0, 1, 3; returns false +</pre> + +<p>Overwriting of return values by the <code>finally</code> block also applies to exceptions thrown or re-thrown inside of the <code>catch</code> block:</p> + +<pre class="brush: js">function f() { + try { + throw "bogus"; + } catch(e) { + console.log('caught inner "bogus"'); + throw e; // this throw statement is suspended until + // finally block has completed + } finally { + return false; // overwrites the previous "throw" + } + // "return false" is executed now +} + +try { + f(); +} catch(e) { + // this is never reached because the throw inside + // the catch is overwritten + // by the return in finally + console.log('caught outer "bogus"'); +} + +// OUTPUT +// caught inner "bogus"</pre> + +<h4 id="Nesting_try...catch_statements">Nesting try...catch statements</h4> + +<p>You can nest one or more <code>try...catch</code> statements. If an inner <code>try...catch</code> statement does not have a <code>catch</code> block, it needs to have a <code>finally</code> block and the enclosing <code>try...catch</code> statement's <code>catch</code> block is checked for a match. For more information, see <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#Nested_try-blocks">nested try-blocks</a> on the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> reference page.</p> + +<h3 id="Utilizing_Error_objects">Utilizing <code>Error</code> objects</h3> + +<p>Depending on the type of error, you may be able to use the 'name' and 'message' properties to get a more refined message. 'name' provides the general class of Error (e.g., 'DOMException' or 'Error'), while 'message' generally provides a more succinct message than one would get by converting the error object to a string.</p> + +<p>If you are throwing your own exceptions, in order to take advantage of these properties (such as if your catch block doesn't discriminate between your own exceptions and system ones), you can use the Error constructor. For example:</p> + +<pre class="brush: js">function doSomethingErrorProne () { + if (ourCodeMakesAMistake()) { + throw (new Error('The message')); + } else { + doSomethingToGetAJavascriptError(); + } +} +.... +try { + doSomethingErrorProne(); +} catch (e) { + console.log(e.name); // logs 'Error' + console.log(e.message); // logs 'The message' or a JavaScript error message) +}</pre> + +<h2 id="Promises">Promises</h2> + +<p>Starting with ECMAScript2015, JavaScript gains support for {{jsxref("Promise")}} objects allowing you to control the flow of deferred and asynchronous operations.</p> + +<p>A <code>Promise</code> is in one of these states:</p> + +<ul> + <li><em>pending</em>: initial state, not fulfilled or rejected.</li> + <li><em>fulfilled</em>: successful operation</li> + <li><em>rejected</em>: failed operation.</li> + <li><em>settled</em>: the Promise is either fulfilled or rejected, but not pending.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p> + +<h3 id="Loading_an_image_with_XHR">Loading an image with XHR</h3> + +<p>A simple example using <code>Promise</code> and <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> to load an image is available at the MDN GitHub<a href="https://github.com/mdn/promises-test/blob/gh-pages/index.html"> promise-test</a> repository. You can also <a href="http://mdn.github.io/promises-test/">see it in action</a>. Each step is commented and allows you to follow the Promise and XHR architecture closely. Here is the uncommented version, showing the <code>Promise</code> flow so that you can get an idea:</p> + +<pre class="brush: js">function imgLoad(url) { + return new Promise(function(resolve, reject) { + var request = new XMLHttpRequest(); + request.open('GET', url); + request.responseType = 'blob'; + request.onload = function() { + if (request.status === 200) { + resolve(request.response); + } else { + reject(Error('Image didn\'t load successfully; error code:' + + request.statusText)); + } + }; + request.onerror = function() { + reject(Error('There was a network error.')); + }; + request.send(); + }); +}</pre> + +<p>For more detailed information, see the {{jsxref("Promise")}} reference page.</p> + +<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> diff --git a/files/fa/web/javascript/راهنما/details_of_the_object_model/index.html b/files/fa/web/javascript/راهنما/details_of_the_object_model/index.html new file mode 100644 index 0000000000..5e523e9124 --- /dev/null +++ b/files/fa/web/javascript/راهنما/details_of_the_object_model/index.html @@ -0,0 +1,718 @@ +--- +title: Details of the object model +slug: Web/JavaScript/راهنما/Details_of_the_Object_Model +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div> + +<p class="summary">JavaScript is an object-based language based on prototypes, rather than being class-based. Because of this different basis, it can be less apparent how JavaScript allows you to create hierarchies of objects and to have inheritance of properties and their values. This chapter attempts to clarify the situation.</p> + +<p>This chapter assumes that you are already somewhat familiar with JavaScript and that you have used JavaScript functions to create simple objects.</p> + +<h2 id="Class-based_vs._prototype-based_languages">Class-based vs. prototype-based languages</h2> + +<p>Class-based object-oriented languages, such as Java and C++, are founded on the concept of two distinct entities: classes and instances.</p> + +<ul> + <li>A <em>class</em> defines all of the properties that characterize a certain set of objects (considering methods and fields in Java, or members in C++, to be properties). A class is abstract rather than any particular member in a set of objects it describes. For example, the <code>Employee</code> class could represent the set of all employees.</li> + <li>An <em>instance</em>, on the other hand, is the instantiation of a class; that is. For example, <code>Victoria</code> could be an instance of the <code>Employee</code> class, representing a particular individual as an employee. An instance has exactly the same properties of its parent class (no more, no less).</li> +</ul> + +<p>A prototype-based language, such as JavaScript, does not make this distinction: it simply has objects. A prototype-based language has the notion of a <em>prototypical object</em>, an object used as a template from which to get the initial properties for a new object. Any object can specify its own properties, either when you create it or at run time. In addition, any object can be associated as the <em>prototype</em> for another object, allowing the second object to share the first object's properties.</p> + +<h3 dir="rtl" id="تعریف_یک_کلاس">تعریف یک کلاس</h3> + +<p>In class-based languages, you define a class in a separate <em>class definition</em>. In that definition you can specify special methods, called <em>constructors</em>, to create instances of the class. A constructor method can specify initial values for the instance's properties and perform other processing appropriate at creation time. You use the <code>new</code> operator in association with the constructor method to create class instances.</p> + +<p>JavaScript follows a similar model, but does not have a class definition separate from the constructor. Instead, you define a constructor function to create objects with a particular initial set of properties and values. Any JavaScript function can be used as a constructor. You use the <code>new</code> operator with a constructor function to create a new object.</p> + +<div class="blockIndicator note"> +<p>Note that ECMAScript 2015 introduces a <a href="/en-US/docs/Web/JavaScript/Reference/Classes">class declaration</a>:</p> + +<blockquote> +<p>JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax <em>does not</em> introduce a new object-oriented inheritance model to JavaScript.</p> +</blockquote> +</div> + +<h3 id="Subclasses_and_inheritance">Subclasses and inheritance</h3> + +<p>In a class-based language, you create a hierarchy of classes through the class definitions. In a class definition, you can specify that the new class is a <em>subclass</em> of an already existing class. The subclass inherits all the properties of the superclass and additionally can add new properties or modify the inherited ones. For example, assume the <code>Employee</code> class includes only the <code>name</code> and <code>dept</code> properties, and <code>Manager</code> is a subclass of <code>Employee</code> that adds the <code>reports</code> property. In this case, an instance of the <code>Manager</code> class would have all three properties: <code>name</code>, <code>dept</code>, and <code>reports</code>.</p> + +<p>JavaScript implements inheritance by allowing you to associate a prototypical object with any constructor function. So, you can create exactly the <code>Employee</code> — <code>Manager</code> example, but you use slightly different terminology. First you define the <code>Employee</code> constructor function, specifying the <code>name</code> and <code>dept</code> properties. Next, you define the <code>Manager</code> constructor function, calling the <code>Employee</code> constructor and specifying the <code>reports</code> property. Finally, you assign a new object derived from <code>Employee.prototype</code> as the <code>prototype</code> for the <code>Manager</code> constructor function. Then, when you create a new <code>Manager</code>, it inherits the <code>name</code> and <code>dept</code> properties from the <code>Employee</code> object.</p> + +<h3 id="Adding_and_removing_properties">Adding and removing properties</h3> + +<p>In class-based languages, you typically create a class at compile time and then you instantiate instances of the class either at compile time or at run time. You cannot change the number or the type of properties of a class after you define the class. In JavaScript, however, at run time you can add or remove properties of any object. If you add a property to an object that is used as the prototype for a set of objects, the objects for which it is the prototype also get the new property.</p> + +<h3 id="Summary_of_differences">Summary of differences</h3> + +<p>The following table gives a short summary of some of these differences. The rest of this chapter describes the details of using JavaScript constructors and prototypes to create an object hierarchy and compares this to how you would do it in Java.</p> + +<table class="standard-table"> + <caption>Comparison of class-based (Java) and prototype-based (JavaScript) object systems</caption> + <thead> + <tr> + <th scope="row">Category</th> + <th scope="col">Class-based (Java)</th> + <th scope="col">Prototype-based (JavaScript)</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Class vs. Instance</th> + <td>Class and instance are distinct entities.</td> + <td>All objects can inherit from another object.</td> + </tr> + <tr> + <th scope="row">Definition</th> + <td>Define a class with a class definition; instantiate a class with constructor methods.</td> + <td>Define and create a set of objects with constructor functions.</td> + </tr> + <tr> + <th scope="row">Creation of new object</th> + <td>Create a single object with the <code>new</code> operator.</td> + <td>Same.</td> + </tr> + <tr> + <th scope="row">Construction of object hierarchy</th> + <td>Construct an object hierarchy by using class definitions to define subclasses of existing classes.</td> + <td>Construct an object hierarchy by assigning an object as the prototype associated with a constructor function.</td> + </tr> + <tr> + <th scope="row">Inheritance model</th> + <td>Inherit properties by following the class chain.</td> + <td>Inherit properties by following the prototype chain.</td> + </tr> + <tr> + <th scope="row">Extension of properties</th> + <td>Class definition specifies <em>all</em> properties of all instances of a class. Cannot add properties dynamically at run time.</td> + <td>Constructor function or prototype specifies an <em>initial set</em> of properties. Can add or remove properties dynamically to individual objects or to the entire set of objects.</td> + </tr> + </tbody> +</table> + +<h2 id="The_employee_example">The employee example</h2> + +<p>The remainder of this chapter uses the employee hierarchy shown in the following figure.</p> + +<div style="display: table-row;"> +<div style="display: table-cell; width: 350px; text-align: center; vertical-align: middle; padding: 10px;"> +<p>A simple object hierarchy with the following objects:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/3060/figure8.1.png"></p> +</div> + +<div style="display: table-cell; vertical-align: middle; padding: 10px;"> +<ul> + <li><code>Employee</code> has the properties <code>name</code> (whose value defaults to the empty string) and <code>dept</code> (whose value defaults to "general").</li> + <li><code>Manager</code> is based on <code>Employee</code>. It adds the <code>reports</code> property (whose value defaults to an empty array, intended to have an array of <code>Employee</code> objects as its value).</li> + <li><code>WorkerBee</code> is also based on <code>Employee</code>. It adds the <code>projects</code> property (whose value defaults to an empty array, intended to have an array of strings as its value).</li> + <li><code>SalesPerson</code> is based on <code>WorkerBee</code>. It adds the <code>quota</code> property (whose value defaults to 100). It also overrides the <code>dept</code> property with the value "sales", indicating that all salespersons are in the same department.</li> + <li><code>Engineer</code> is based on <code>WorkerBee</code>. It adds the <code>machine</code> property (whose value defaults to the empty string) and also overrides the <code>dept</code> property with the value "engineering".</li> +</ul> +</div> +</div> + +<h2 id="Creating_the_hierarchy">Creating the hierarchy</h2> + +<p>There are several ways to define appropriate constructor functions to implement the Employee hierarchy. How you choose to define them depends largely on what you want to be able to do in your application.</p> + +<p>This section shows how to use very simple (and comparatively inflexible) definitions to demonstrate how to get the inheritance to work. In these definitions, you cannot specify any property values when you create an object. The newly-created object simply gets the default values, which you can change at a later time.</p> + +<p>In a real application, you would probably define constructors that allow you to provide property values at object creation time (see <a href="#More_flexible_constructors">More flexible constructors</a> for information). For now, these simple definitions demonstrate how the inheritance occurs.</p> + +<p>The following Java and JavaScript <code>Employee</code> definitions are similar. The only difference is that you need to specify the type for each property in Java but not in JavaScript (this is due to Java being a <a href="https://en.wikipedia.org/wiki/Strong_and_weak_typing">strongly typed language</a> while JavaScript is a weakly typed language).</p> + +<h4 id="JavaScript_using_this_may_cause_an_error_for_the_following_examples">JavaScript (using this may cause an error for the following examples)</h4> + +<pre class="brush: js notranslate">class Employee { + constructor() { + this.name = ''; + this.dept = 'general'; + } +} + +</pre> + +<h4 id="JavaScript_**_use_this_instead">JavaScript ** (use this instead)</h4> + +<pre class="brush: js notranslate">function Employee() { + this.name = ''; + this.dept = 'general'; +} + +</pre> + +<h4 id="Java">Java</h4> + +<pre class="brush: java notranslate">public class Employee { + public String name = ""; + public String dept = "general"; +} +</pre> + +<p>The <code>Manager</code> and <code>WorkerBee</code> definitions show the difference in how to specify the next object higher in the inheritance chain. In JavaScript, you add a prototypical instance as the value of the <code>prototype</code> property of the constructor function, then override the <code>prototype.constructor</code> to the constructor function. You can do so at any time after you define the constructor. In Java, you specify the superclass within the class definition. You cannot change the superclass outside the class definition.</p> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">function Manager() { + Employee.call(this); + this.reports = []; +} +Manager.prototype = Object.create(Employee.prototype); +Manager.prototype.constructor = Manager; + +function WorkerBee() { + Employee.call(this); + this.projects = []; +} +WorkerBee.prototype = Object.create(Employee.prototype); +WorkerBee.prototype.constructor = WorkerBee; +</pre> + +<h4 id="Java_2">Java</h4> + +<pre class="brush: java notranslate">public class Manager extends Employee { + public Employee[] reports = + new Employee[0]; +} + + + +public class WorkerBee extends Employee { + public String[] projects = new String[0]; +} + + +</pre> + +<p>The <code>Engineer</code> and <code>SalesPerson</code> definitions create objects that descend from <code>WorkerBee</code> and hence from <code>Employee</code>. An object of these types has properties of all the objects above it in the chain. In addition, these definitions override the inherited value of the <code>dept</code> property with new values specific to these objects.</p> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js notranslate">function SalesPerson() { + WorkerBee.call(this); + this.dept = 'sales'; + this.quota = 100; +} +SalesPerson.prototype = Object.create(WorkerBee.prototype); +SalesPerson.prototype.constructor = SalesPerson; + +function Engineer() { + WorkerBee.call(this); + this.dept = 'engineering'; + this.machine = ''; +} +Engineer.prototype = Object.create(WorkerBee.prototype) +Engineer.prototype.constructor = Engineer; +</pre> + +<h4 id="Java_3">Java</h4> + +<pre class="brush: java notranslate">public class SalesPerson extends WorkerBee { + public String dept = "sales"; + public double quota = 100.0; +} + + +public class Engineer extends WorkerBee { + public String dept = "engineering"; + public String machine = ""; +} + +</pre> + +<p>Using these definitions, you can create instances of these objects that get the default values for their properties. The next figure illustrates using these JavaScript definitions to create new objects and shows the property values for the new objects.</p> + +<div class="note"> +<p><strong>Note:</strong> The term <em><em>instance</em></em> has a specific technical meaning in class-based languages. In these languages, an instance is an individual instantiation of a class and is fundamentally different from a class. In JavaScript, "instance" does not have this technical meaning because JavaScript does not have this difference between classes and instances. However, in talking about JavaScript, "instance" can be used informally to mean an object created using a particular constructor function. So, in this example, you could informally say that <code><code>jane</code></code> is an instance of <code><code>Engineer</code></code>. Similarly, although the terms <em><em>parent</em>, <em>child</em>, <em>ancestor</em></em>, and <em><em>descendant</em></em> do not have formal meanings in JavaScript; you can use them informally to refer to objects higher or lower in the prototype chain.</p> +</div> + +<h3 id="Creating_objects_with_simple_definitions">Creating objects with simple definitions</h3> + +<div class="twocolumns"> +<h4 id="Object_hierarchy">Object hierarchy</h4> + +<p>The following hierarchy is created using the code on the right side.</p> + +<p><img src="https://mdn.mozillademos.org/files/10412/=figure8.3.png"></p> + +<h4 id="Individual_objects_Jim_Sally_Mark_Fred_Jane_etc._Instances_created_from_constructor">Individual objects = Jim, Sally, Mark, Fred, Jane, etc.<br> + "Instances" created from constructor</h4> + +<pre class="brush: js notranslate">var jim = new Employee; +// Parentheses can be omitted if the +// constructor takes no arguments. +// jim.name is '' +// jim.dept is 'general' + +var sally = new Manager; +// sally.name is '' +// sally.dept is 'general' +// sally.reports is [] + +var mark = new WorkerBee; +// mark.name is '' +// mark.dept is 'general' +// mark.projects is [] + +var fred = new SalesPerson; +// fred.name is '' +// fred.dept is 'sales' +// fred.projects is [] +// fred.quota is 100 + +var jane = new Engineer; +// jane.name is '' +// jane.dept is 'engineering' +// jane.projects is [] +// jane.machine is '' +</pre> +</div> + +<h2 id="Object_properties">Object properties</h2> + +<p>This section discusses how objects inherit properties from other objects in the prototype chain and what happens when you add a property at run time.</p> + +<h3 id="Inheriting_properties">Inheriting properties</h3> + +<p>Suppose you create the <code>mark</code> object as a <code>WorkerBee</code> with the following statement:</p> + +<pre class="brush: js notranslate">var mark = new WorkerBee; +</pre> + +<p>When JavaScript sees the <code>new</code> operator, it creates a new generic object and implicitly sets the value of the internal property [[Prototype]] to the value of <code>WorkerBee.prototype</code> and passes this new object as the value of the <em><code>this</code></em> keyword to the <code>WorkerBee</code> constructor function. The internal [[Prototype]] property determines the prototype chain used to return property values. Once these properties are set, JavaScript returns the new object and the assignment statement sets the variable <code>mark</code> to that object.</p> + +<p>This process does not explicitly put values in the <code>mark</code> object (<em>local</em> values) for the properties that <code>mark</code> inherits from the prototype chain. When you ask for the value of a property, JavaScript first checks to see if the value exists in that object. If it does, that value is returned. If the value is not there locally, JavaScript checks the prototype chain (using the internal [[Prototype]] property). If an object in the prototype chain has a value for the property, that value is returned. If no such property is found, JavaScript says the object does not have the property. In this way, the <code>mark</code> object has the following properties and values:</p> + +<pre class="brush: js notranslate">mark.name = ''; +mark.dept = 'general'; +mark.projects = []; +</pre> + +<p>The <code>mark</code> object is assigned local values for the <code>name</code> and <code>dept</code> properties by the Employee constructor. It is assigned a local value for the <code>projects</code> property by the <code>WorkerBee</code> constructor. This gives you inheritance of properties and their values in JavaScript. Some subtleties of this process are discussed in <a href="#Property_inheritance_revisited">Property inheritance revisited</a>.</p> + +<p>Because these constructors do not let you supply instance-specific values, this information is generic. The property values are the default ones shared by all new objects created from <code>WorkerBee</code>. You can, of course, change the values of any of these properties. So, you could give specific information for <code>mark</code> as follows:</p> + +<pre class="brush: js notranslate">mark.name = 'Doe, Mark'; +mark.dept = 'admin'; +mark.projects = ['navigator'];</pre> + +<h3 id="Adding_properties">Adding properties</h3> + +<p>In JavaScript, you can add properties to any object at run time. You are not constrained to use only the properties provided by the constructor function. To add a property that is specific to a single object, you assign a value to the object, as follows:</p> + +<pre class="brush: js notranslate">mark.bonus = 3000; +</pre> + +<p>Now, the <code>mark</code> object has a <code>bonus</code> property, but no other <code>WorkerBee</code> has this property.</p> + +<p>If you add a new property to an object that is being used as the prototype for a constructor function, you add that property to all objects that inherit properties from the prototype. For example, you can add a <code>specialty</code> property to all employees with the following statement:</p> + +<pre class="brush: js notranslate">Employee.prototype.specialty = 'none'; +</pre> + +<p>As soon as JavaScript executes this statement, the <code>mark</code> object also has the <code>specialty</code> property with the value of <code>"none"</code>. The following figure shows the effect of adding this property to the <code>Employee</code> prototype and then overriding it for the <code>Engineer</code> prototype.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br> + <small><strong>Adding properties</strong></small></p> + +<h2 id="More_flexible_constructors">More flexible constructors</h2> + +<p>The constructor functions shown so far do not let you specify property values when you create an instance. As with Java, you can provide arguments to constructors to initialize property values for instances. The following figure shows one way to do this.</p> + +<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br> + <small><strong>Specifying properties in a constructor, take 1</strong></small></p> + +<p>The following pairs of examples show the Java and JavaScript definitions for these objects.</p> + +<pre class="brush: js notranslate">function Employee(name, dept) { + this.name = name || ''; + this.dept = dept || 'general'; +} +</pre> + +<pre class="brush: java notranslate">public class Employee { + public String name; + public String dept; + public Employee () { + this("", "general"); + } + public Employee (String name) { + this(name, "general"); + } + public Employee (String name, String dept) { + this.name = name; + this.dept = dept; + } +} +</pre> + +<pre class="brush: js notranslate">function WorkerBee(projs) { + this.projects = projs || []; +} +WorkerBee.prototype = new Employee; +</pre> + +<pre class="brush: java notranslate">public class WorkerBee extends Employee { + public String[] projects; + public WorkerBee () { + this(new String[0]); + } + public WorkerBee (String[] projs) { + projects = projs; + } +} +</pre> + +<pre class="brush: js notranslate"> +function Engineer(mach) { + this.dept = 'engineering'; + this.machine = mach || ''; +} +Engineer.prototype = new WorkerBee; +</pre> + +<pre class="brush: java notranslate">public class Engineer extends WorkerBee { + public String machine; + public Engineer () { + dept = "engineering"; + machine = ""; + } + public Engineer (String mach) { + dept = "engineering"; + machine = mach; + } +} +</pre> + +<p>These JavaScript definitions use a special idiom for setting default values:</p> + +<pre class="brush: js notranslate">this.name = name || ''; +</pre> + +<p>The JavaScript logical OR operator (<code>||</code>) evaluates its first argument. If that argument converts to true, the operator returns it. Otherwise, the operator returns the value of the second argument. Therefore, this line of code tests to see if <code>name</code> has a useful value for the <code>name</code> property. If it does, it sets <code>this.name</code> to that value. Otherwise, it sets <code>this.name</code> to the empty string. This chapter uses this idiom for brevity; however, it can be puzzling at first glance.</p> + +<div class="note"> +<p><strong>Note:</strong> This may not work as expected if the constructor function is called with arguments which convert to <code><code>false</code></code> (like <code>0</code> (zero) and empty string (<code><code>""</code></code>). In this case the default value will be chosen.</p> +</div> + +<p>With these definitions, when you create an instance of an object, you can specify values for the locally defined properties. You can use the following statement to create a new <code>Engineer</code>:</p> + +<pre class="brush: js notranslate">var jane = new Engineer('belau'); +</pre> + +<p><code>Jane</code>'s properties are now:</p> + +<pre class="brush: js notranslate">jane.name == ''; +jane.dept == 'engineering'; +jane.projects == []; +jane.machine == 'belau'; +</pre> + +<p>Notice that with these definitions, you cannot specify an initial value for an inherited property such as <code>name</code>. If you want to specify an initial value for inherited properties in JavaScript, you need to add more code to the constructor function.</p> + +<p>So far, the constructor function has created a generic object and then specified local properties and values for the new object. You can have the constructor add more properties by directly calling the constructor function for an object higher in the prototype chain. The following figure shows these new definitions.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br> + <small><strong>Specifying properties in a constructor, take 2</strong></small></p> + +<p>Let's look at one of these definitions in detail. Here's the new definition for the <code>Engineer</code> constructor:</p> + +<pre class="brush: js notranslate">function Engineer(name, projs, mach) { + this.base = WorkerBee; + this.base(name, 'engineering', projs); + this.machine = mach || ''; +} +</pre> + +<p>Suppose you create a new <code>Engineer</code> object as follows:</p> + +<pre class="brush: js notranslate">var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau'); +</pre> + +<p>JavaScript follows these steps:</p> + +<ol> + <li>The <code>new</code> operator creates a generic object and sets its <code>__proto__</code> property to <code>Engineer.prototype</code>.</li> + <li>The <code>new</code> operator passes the new object to the <code>Engineer</code> constructor as the value of the <code>this</code> keyword.</li> + <li>The constructor creates a new property called <code>base</code> for that object and assigns the value of the <code>WorkerBee</code> constructor to the <code>base</code> property. This makes the <code>WorkerBee</code> constructor a method of the <code>Engineer</code> object. The name of the <code>base</code> property is not special. You can use any legal property name; <code>base</code> is simply evocative of its purpose.</li> + <li>The constructor calls the <code>base</code> method, passing as its arguments two of the arguments passed to the constructor (<code>"Doe, Jane"</code> and <code>["navigator", "javascript"]</code>) and also the string <code>"engineering"</code>. Explicitly using <code>"engineering"</code> in the constructor indicates that all <code>Engineer</code> objects have the same value for the inherited <code>dept</code> property, and this value overrides the value inherited from <code>Employee</code>.</li> + <li>Because <code>base</code> is a method of <code>Engineer</code>, within the call to <code>base</code>, JavaScript binds the <code>this</code> keyword to the object created in Step 1. Thus, the <code>WorkerBee</code> function in turn passes the <code>"Doe, Jane"</code> and <code>"engineering"</code> arguments to the <code>Employee</code> constructor function. Upon return from the <code>Employee</code> constructor function, the <code>WorkerBee</code> function uses the remaining argument to set the <code>projects</code> property.</li> + <li>Upon return from the <code>base</code> method, the <code>Engineer</code> constructor initializes the object's <code>machine</code> property to <code>"belau"</code>.</li> + <li>Upon return from the constructor, JavaScript assigns the new object to the <code>jane</code> variable.</li> +</ol> + +<p>You might think that, having called the <code>WorkerBee</code> constructor from inside the <code>Engineer</code> constructor, you have set up inheritance appropriately for <code>Engineer</code> objects. This is not the case. Calling the <code>WorkerBee</code> constructor ensures that an <code>Engineer</code> object starts out with the properties specified in all constructor functions that are called. However, if you later add properties to the <code>Employee</code> or <code>WorkerBee</code> prototypes, those properties are not inherited by the <code>Engineer</code> object. For example, assume you have the following statements:</p> + +<pre class="brush: js notranslate">function Engineer(name, projs, mach) { + this.base = WorkerBee; + this.base(name, 'engineering', projs); + this.machine = mach || ''; +} +var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau'); +Employee.prototype.specialty = 'none'; +</pre> + +<p>The <code>jane</code> object does not inherit the <code>specialty</code> property. You still need to explicitly set up the prototype to ensure dynamic inheritance. Assume instead you have these statements:</p> + +<pre class="brush: js notranslate">function Engineer(name, projs, mach) { + this.base = WorkerBee; + this.base(name, 'engineering', projs); + this.machine = mach || ''; +} +Engineer.prototype = new WorkerBee; +var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau'); +Employee.prototype.specialty = 'none'; +</pre> + +<p>Now the value of the <code>jane</code> object's <code>specialty</code> property is "none".</p> + +<p>Another way of inheriting is by using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global Objects/Function/call">call()</a></code> / <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/docs/JavaScript/Reference/Global Objects/Function/apply"><code>apply()</code></a> methods. Below are equivalent:</p> + +<pre class="brush: js notranslate">function Engineer(name, projs, mach) { + this.base = WorkerBee; + this.base(name, 'engineering', projs); + this.machine = mach || ''; +} +</pre> + +<pre class="brush: js notranslate">function Engineer(name, projs, mach) { + WorkerBee.call(this, name, 'engineering', projs); + this.machine = mach || ''; +} +</pre> + +<p>Using the javascript <code>call()</code> method makes a cleaner implementation because the <code>base</code> is not needed anymore.</p> + +<h2 id="Property_inheritance_revisited">Property inheritance revisited</h2> + +<p>The preceding sections described how JavaScript constructors and prototypes provide hierarchies and inheritance. This section discusses some subtleties that were not necessarily apparent in the earlier discussions.</p> + +<h3 id="Local_versus_inherited_values">Local versus inherited values</h3> + +<p>When you access an object property, JavaScript performs these steps, as described earlier in this chapter:</p> + +<ol> + <li>Check to see if the value exists locally. If it does, return that value.</li> + <li>If there is not a local value, check the prototype chain (using the <code>__proto__</code> property).</li> + <li>If an object in the prototype chain has a value for the specified property, return that value.</li> + <li>If no such property is found, the object does not have the property.</li> +</ol> + +<p>The outcome of these steps depends on how you define things along the way. The original example had these definitions:</p> + +<pre class="brush: js notranslate">function Employee() { + this.name = ''; + this.dept = 'general'; +} + +function WorkerBee() { + this.projects = []; +} +WorkerBee.prototype = new Employee; +</pre> + +<p>With these definitions, suppose you create <code>amy</code> as an instance of <code>WorkerBee</code> with the following statement:</p> + +<pre class="brush: js notranslate">var amy = new WorkerBee; +</pre> + +<p>The <code>amy</code> object has one local property, <code>projects</code>. The values for the <code>name</code> and <code>dept</code> properties are not local to <code>amy</code> and so derive from the <code>amy</code> object's <code>__proto__</code> property. Thus, <code>amy</code> has these property values:</p> + +<pre class="brush: js notranslate">amy.name == ''; +amy.dept == 'general'; +amy.projects == []; +</pre> + +<p>Now suppose you change the value of the <code>name</code> property in the prototype associated with <code>Employee</code>:</p> + +<pre class="brush: js notranslate">Employee.prototype.name = 'Unknown'; +</pre> + +<p>At first glance, you might expect that new value to propagate down to all the instances of <code>Employee</code>. However, it does not.</p> + +<p>When you create <em>any</em> instance of the <code>Employee</code> object, that instance gets a <strong>local value</strong> for the <code>name</code> property (the empty string). This means that when you set the <code>WorkerBee</code> prototype by creating a new <code>Employee</code> object, <code>WorkerBee.prototype</code> has a local value for the <code>name</code> property. Therefore, when JavaScript looks up the <code>name</code> property of the <code>amy</code> object (an instance of <code>WorkerBee</code>), JavaScript finds the local value for that property in <code>WorkerBee.prototype</code>. It therefore does not look further up the chain to <code>Employee.prototype</code>.</p> + +<p>If you want to change the value of an object property at run time and have the new value be inherited by all descendants of the object, you cannot define the property in the object's constructor function. Instead, you add it to the constructor's associated prototype. For example, assume you change the preceding code to the following:</p> + +<pre class="brush: js notranslate">function Employee() { + this.dept = 'general'; // Note that this.name (a local variable) does not appear here +} +Employee.prototype.name = ''; // A single copy + +function WorkerBee() { + this.projects = []; +} +WorkerBee.prototype = new Employee; + +var amy = new WorkerBee; + +Employee.prototype.name = 'Unknown'; +</pre> + +<p>In this case, the <code>name</code> property of <code>amy</code> becomes "Unknown".</p> + +<p>As these examples show, if you want to have default values for object properties and you want to be able to change the default values at run time, you should set the properties in the constructor's prototype, not in the constructor function itself.</p> + +<h3 id="Determining_instance_relationships">Determining instance relationships</h3> + +<p>Property lookup in JavaScript looks within an object's own properties and, if the property name is not found, it looks within the special object property <code>__proto__</code>. This continues recursively; the process is called "lookup in the prototype chain".</p> + +<p>The special property <code>__proto__</code> is set when an object is constructed; it is set to the value of the constructor's <code>prototype</code> property. So the expression <code>new Foo()</code> creates an object with <code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code>. Consequently, changes to the properties of <code class="moz-txt-verticalline">Foo.prototype</code> alters the property lookup for all objects that were created by <code>new Foo()</code>.</p> + +<p>Every object has a <code>__proto__</code> object property (except <code>Object</code>); every function has a <code>prototype</code> object property. So objects can be related by 'prototype inheritance' to other objects. You can test for inheritance by comparing an object's <code>__proto__</code> to a function's <code>prototype</code> object. JavaScript provides a shortcut: the <code>instanceof</code> operator tests an object against a function and returns true if the object inherits from the function prototype. For example,</p> + +<pre class="brush: js notranslate">var f = new Foo(); +var isTrue = (f instanceof Foo);</pre> + +<p>For a more detailed example, suppose you have the same set of definitions shown in <a href="#Inheriting_properties">Inheriting properties</a>. Create an <code>Engineer</code> object as follows:</p> + +<pre class="brush: js notranslate">var chris = new Engineer('Pigman, Chris', ['jsd'], 'fiji'); +</pre> + +<p>With this object, the following statements are all true:</p> + +<pre class="brush: js notranslate">chris.__proto__ == Engineer.prototype; +chris.__proto__.__proto__ == WorkerBee.prototype; +chris.__proto__.__proto__.__proto__ == Employee.prototype; +chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype; +chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null; +</pre> + +<p>Given this, you could write an <code>instanceOf</code> function as follows:</p> + +<pre class="brush: js notranslate">function instanceOf(object, constructor) { + object = object.__proto__; + while (object != null) { + if (object == constructor.prototype) + return true; + if (typeof object == 'xml') { + return constructor.prototype == XML.prototype; + } + object = object.__proto__; + } + return false; +} +</pre> + +<div class="note"><strong>Note:</strong> The implementation above checks the type of the object against "xml" in order to work around a quirk of how XML objects are represented in recent versions of JavaScript. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=634150">bug 634150</a> if you want the nitty-gritty details.</div> + +<p>Using the instanceOf function defined above, these expressions are true:</p> + +<pre class="brush: js notranslate">instanceOf(chris, Engineer) +instanceOf(chris, WorkerBee) +instanceOf(chris, Employee) +instanceOf(chris, Object) +</pre> + +<p>But the following expression is false:</p> + +<pre class="brush: js notranslate">instanceOf(chris, SalesPerson) +</pre> + +<h3 id="Global_information_in_constructors">Global information in constructors</h3> + +<p>When you create constructors, you need to be careful if you set global information in the constructor. For example, assume that you want a unique ID to be automatically assigned to each new employee. You could use the following definition for <code>Employee</code>:</p> + +<pre class="brush: js notranslate">var idCounter = 1; + +function Employee(name, dept) { + this.name = name || ''; + this.dept = dept || 'general'; + this.id = idCounter++; +} +</pre> + +<p>With this definition, when you create a new <code>Employee</code>, the constructor assigns it the next ID in sequence and then increments the global ID counter. So, if your next statement is the following, <code>victoria.id</code> is 1 and <code>harry.id</code> is 2:</p> + +<pre class="brush: js notranslate">var victoria = new Employee('Pigbert, Victoria', 'pubs'); +var harry = new Employee('Tschopik, Harry', 'sales'); +</pre> + +<p>At first glance that seems fine. However, <code>idCounter</code> gets incremented every time an <code>Employee</code> object is created, for whatever purpose. If you create the entire <code>Employee</code> hierarchy shown in this chapter, the <code>Employee</code> constructor is called every time you set up a prototype. Suppose you have the following code:</p> + +<pre class="brush: js notranslate">var idCounter = 1; + +function Employee(name, dept) { + this.name = name || ''; + this.dept = dept || 'general'; + this.id = idCounter++; +} + +function Manager(name, dept, reports) {...} +Manager.prototype = new Employee; + +function WorkerBee(name, dept, projs) {...} +WorkerBee.prototype = new Employee; + +function Engineer(name, projs, mach) {...} +Engineer.prototype = new WorkerBee; + +function SalesPerson(name, projs, quota) {...} +SalesPerson.prototype = new WorkerBee; + +var mac = new Engineer('Wood, Mac'); +</pre> + +<p>Further assume that the definitions omitted here have the <code>base</code> property and call the constructor above them in the prototype chain. In this case, by the time the <code>mac</code> object is created, <code>mac.id</code> is 5.</p> + +<p>Depending on the application, it may or may not matter that the counter has been incremented these extra times. If you care about the exact value of this counter, one possible solution involves instead using the following constructor:</p> + +<pre class="brush: js notranslate">function Employee(name, dept) { + this.name = name || ''; + this.dept = dept || 'general'; + if (name) + this.id = idCounter++; +} +</pre> + +<p>When you create an instance of <code>Employee</code> to use as a prototype, you do not supply arguments to the constructor. Using this definition of the constructor, when you do not supply arguments, the constructor does not assign a value to the id and does not update the counter. Therefore, for an <code>Employee</code> to get an assigned id, you must specify a name for the employee. In this example, <code>mac.id</code> would be 1.</p> + +<p>Alternatively, you can create a copy of Employee's prototype object to assign to WorkerBee:</p> + +<pre class="brush: js notranslate">WorkerBee.prototype = Object.create(Employee.prototype); +// instead of WorkerBee.prototype = new Employee +</pre> + +<h3 id="No_multiple_inheritance">No multiple inheritance</h3> + +<p>Some object-oriented languages allow multiple inheritance. That is, an object can inherit the properties and values from unrelated parent objects. JavaScript does not support multiple inheritance.</p> + +<p>Inheritance of property values occurs at run time by JavaScript searching the prototype chain of an object to find a value. Because an object has a single associated prototype, JavaScript cannot dynamically inherit from more than one prototype chain.</p> + +<p>In JavaScript, you can have a constructor function call more than one other constructor function within it. This gives the illusion of multiple inheritance. For example, consider the following statements:</p> + +<pre class="brush: js notranslate">function Hobbyist(hobby) { + this.hobby = hobby || 'scuba'; +} + +function Engineer(name, projs, mach, hobby) { + this.base1 = WorkerBee; + this.base1(name, 'engineering', projs); + this.base2 = Hobbyist; + this.base2(hobby); + this.machine = mach || ''; +} +Engineer.prototype = new WorkerBee; + +var dennis = new Engineer('Doe, Dennis', ['collabra'], 'hugo'); +</pre> + +<p>Further assume that the definition of <code>WorkerBee</code> is as used earlier in this chapter. In this case, the <code>dennis</code> object has these properties:</p> + +<pre class="brush: js notranslate">dennis.name == 'Doe, Dennis'; +dennis.dept == 'engineering'; +dennis.projects == ['collabra']; +dennis.machine == 'hugo'; +dennis.hobby == 'scuba'; +</pre> + +<p>So <code>dennis</code> does get the <code>hobby</code> property from the <code>Hobbyist</code> constructor. However, assume you then add a property to the <code>Hobbyist</code> constructor's prototype:</p> + +<pre class="brush: js notranslate">Hobbyist.prototype.equipment = ['mask', 'fins', 'regulator', 'bcd']; +</pre> + +<p>The <code>dennis</code> object does not inherit this new property.</p> + +<div>{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div> diff --git a/files/fa/web/javascript/راهنما/functions/index.html b/files/fa/web/javascript/راهنما/functions/index.html new file mode 100644 index 0000000000..626ea544bf --- /dev/null +++ b/files/fa/web/javascript/راهنما/functions/index.html @@ -0,0 +1,648 @@ +--- +title: Functions +slug: Web/JavaScript/راهنما/Functions +translation_of: Web/JavaScript/Guide/Functions +--- +<div dir="rtl">{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</div> + +<p class="summary">Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure—a set of statements that performs a task or calculates a value. To use a function, you must define it somewhere in the scope from which you wish to call it.</p> + +<p>See also the <a href="/en-US/docs/Web/JavaScript/Reference/Functions">exhaustive reference chapter about JavaScript functions</a> to get to know the details.</p> + +<h2 id="Defining_functions">Defining functions</h2> + +<h3 id="Function_declarations">Function declarations</h3> + +<p>A <strong>function definition</strong> (also called a <strong>function declaration</strong>, or <strong>function statement</strong>) consists of the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function" title="function"><code>function</code></a> keyword, followed by:</p> + +<ul> + <li>The name of the function.</li> + <li>A list of parameters to the function, enclosed in parentheses and separated by commas.</li> + <li>The JavaScript statements that define the function, enclosed in curly brackets, <code>{ }</code>.</li> +</ul> + +<p>For example, the following code defines a simple function named <code> square</code>:</p> + +<pre class="brush: js">function square(number) { + return number * number; +} +</pre> + +<p>The function <code>square</code> takes one parameter, called <code>number</code>. The function consists of one statement that says to return the parameter of the function (that is, <code>number</code>) multiplied by itself. The <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return" title="return"><code>return</code></a> statement specifies the value returned by the function.</p> + +<pre class="brush: js">return number * number; +</pre> + +<p>Primitive parameters (such as a number) are passed to functions <strong>by value</strong>; the value is passed to the function, but if the function changes the value of the parameter, this change is not reflected globally or in the calling function.</p> + +<p>If you pass an object (i.e. a non-primitive value, such as {{jsxref("Array")}} or a user-defined object) as a parameter and the function changes the object's properties, that change is visible outside the function, as shown in the following example:</p> + +<pre class="brush: js">function myFunc(theObject) { + theObject.make = 'Toyota'; +} + +var mycar = {make: 'Honda', model: 'Accord', year: 1998}; +var x, y; + +x = mycar.make; // x gets the value "Honda" + +myFunc(mycar); +y = mycar.make; // y gets the value "Toyota" + // (the make property was changed by the function) +</pre> + +<h3 id="Function_expressions">Function expressions</h3> + +<p>While the function declaration above is syntactically a statement, functions can also be created by a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a>. Such a function can be <strong>anonymous</strong>; it does not have to have a name. For example, the function <code>square</code> could have been defined as:</p> + +<pre class="brush: js">var square = function(number) { return number * number; }; +var x = square(4); // x gets the value 16</pre> + +<p>However, a name can be provided with a function expression and can be used inside the function to refer to itself, or in a debugger to identify the function in stack traces:</p> + +<pre class="brush: js">var factorial = function fac(n) { return n < 2 ? 1 : n * fac(n - 1); }; + +console.log(factorial(3)); +</pre> + +<p>Function expressions are convenient when passing a function as an argument to another function. The following example shows a <code>map</code> function being defined and then called with an expression function as its first parameter:</p> + +<pre class="brush: js">function map(f, a) { + var result = [], // Create a new Array + i; + for (i = 0; i != a.length; i++) + result[i] = f(a[i]); + return result; +} +</pre> + +<p>The following code:</p> + +<pre class="brush: js">var numbers = [0,1, 2, 5,10]; +var cube= numbers.map(function(x) { + return x * x * x; +}); +console.log(cube);</pre> + +<p>returns [0, 1, 8, 125, 1000].</p> + +<p>In JavaScript, a function can be defined based on a condition. For example, the following function definition defines <code>myFunc</code> only if <code>num</code> equals 0:</p> + +<pre class="brush: js">var myFunc; +if (num === 0) { + myFunc = function(theObject) { + theObject.make = 'Toyota'; + } +}</pre> + +<p>In addition to defining functions as described here, you can also use the {{jsxref("Function")}} constructor to create functions from a string at runtime, much like {{jsxref("eval", "eval()")}}.</p> + +<p>A <strong>method</strong> is a function that is a property of an object. Read more about objects and methods in <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects">Working with objects</a>.</p> + +<h2 id="Calling_functions">Calling functions</h2> + +<p>Defining a function does not execute it. Defining the function simply names the function and specifies what to do when the function is called. <strong>Calling</strong> the function actually performs the specified actions with the indicated parameters. For example, if you define the function <code>square</code>, you could call it as follows:</p> + +<pre class="brush: js">square(5); +</pre> + +<p>The preceding statement calls the function with an argument of 5. The function executes its statements and returns the value 25.</p> + +<p>Functions must be in scope when they are called, but the function declaration can be hoisted (appear below the call in the code), as in this example:</p> + +<pre class="brush: js">console.log(square(5)); +/* ... */ +function square(n) { return n * n; } +</pre> + +<p>The scope of a function is the function in which it is declared, or the entire program if it is declared at the top level.</p> + +<div class="note"> +<p><strong>Note:</strong> This works only when defining the function using the above syntax (i.e. <code>function funcName(){}</code>). The code below will not work. That means, function hoisting only works with function declaration and not with function expression.</p> +</div> + +<pre class="brush: js example-bad">console.log(square); // square is hoisted with an initial value undefined. +console.log(square(5)); // TypeError: square is not a function +var square = function(n) { + return n * n; +} +</pre> + +<p>The arguments of a function are not limited to strings and numbers. You can pass whole objects to a function. The <code>show_props()</code> function (defined in <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_Properties" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">Working with objects</a>) is an example of a function that takes an object as an argument.</p> + +<p>A function can call itself. For example, here is a function that computes factorials recursively:</p> + +<pre class="brush: js">function factorial(n) { + if ((n === 0) || (n === 1)) + return 1; + else + return (n * factorial(n - 1)); +} +</pre> + +<p>You could then compute the factorials of one through five as follows:</p> + +<pre class="brush: js">var a, b, c, d, e; +a = factorial(1); // a gets the value 1 +b = factorial(2); // b gets the value 2 +c = factorial(3); // c gets the value 6 +d = factorial(4); // d gets the value 24 +e = factorial(5); // e gets the value 120 +</pre> + +<p>There are other ways to call functions. There are often cases where a function needs to be called dynamically, or the number of arguments to a function vary, or in which the context of the function call needs to be set to a specific object determined at runtime. It turns out that functions are, themselves, objects, and these objects in turn have methods (see the {{jsxref("Function")}} object). One of these, the {{jsxref("Function.apply", "apply()")}} method, can be used to achieve this goal.</p> + +<h2 class="deki-transform" id="Function_scope">Function scope</h2> + +<p>Variables defined inside a function cannot be accessed from anywhere outside the function, because the variable is defined only in the scope of the function. However, a function can access all variables and functions defined inside the scope in which it is defined. In other words, a function defined in the global scope can access all variables defined in the global scope. A function defined inside another function can also access all variables defined in its parent function and any other variable to which the parent function has access.</p> + +<pre class="brush: js">// The following variables are defined in the global scope +var num1 = 20, + num2 = 3, + name = 'Chamahk'; + +// This function is defined in the global scope +function multiply() { + return num1 * num2; +} + +multiply(); // Returns 60 + +// A nested function example +function getScore() { + var num1 = 2, + num2 = 3; + + function add() { + return name + ' scored ' + (num1 + num2); + } + + return add(); +} + +getScore(); // Returns "Chamahk scored 5" +</pre> + +<h2 id="Scope_and_the_function_stack">Scope and the function stack</h2> + +<h3 id="Recursion">Recursion</h3> + +<p>A function can refer to and call itself. There are three ways for a function to refer to itself:</p> + +<ol> + <li>the function's name</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></li> + <li>an in-scope variable that refers to the function</li> +</ol> + +<p>For example, consider the following function definition:</p> + +<pre class="brush: js">var foo = function bar() { + // statements go here +}; +</pre> + +<p>Within the function body, the following are all equivalent:</p> + +<ol> + <li><code>bar()</code></li> + <li><code>arguments.callee()</code></li> + <li><code>foo()</code></li> +</ol> + +<p>A function that calls itself is called a <em>recursive function</em>. In some ways, recursion is analogous to a loop. Both execute the same code multiple times, and both require a condition (to avoid an infinite loop, or rather, infinite recursion in this case). For example, the following loop:</p> + +<pre class="brush: js">var x = 0; +while (x < 10) { // "x < 10" is the loop condition + // do stuff + x++; +} +</pre> + +<p>can be converted into a recursive function and a call to that function:</p> + +<pre class="brush: js">function loop(x) { + if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)") + return; + // do stuff + loop(x + 1); // the recursive call +} +loop(0); +</pre> + +<p>However, some algorithms cannot be simple iterative loops. For example, getting all the nodes of a tree structure (e.g. the <a href="/en-US/docs/DOM">DOM</a>) is more easily done using recursion:</p> + +<pre class="brush: js">function walkTree(node) { + if (node == null) // + return; + // do something with node + for (var i = 0; i < node.childNodes.length; i++) { + walkTree(node.childNodes[i]); + } +} +</pre> + +<p>Compared to the function <code>loop</code>, each recursive call itself makes many recursive calls here.</p> + +<p>It is possible to convert any recursive algorithm to a non-recursive one, but often the logic is much more complex and doing so requires the use of a stack. In fact, recursion itself uses a stack: the function stack.</p> + +<p>The stack-like behavior can be seen in the following example:</p> + +<pre class="brush: js">function foo(i) { + if (i < 0) + return; + console.log('begin: ' + i); + foo(i - 1); + console.log('end: ' + i); +} +foo(3); + +// Output: + +// begin: 3 +// begin: 2 +// begin: 1 +// begin: 0 +// end: 0 +// end: 1 +// end: 2 +// end: 3</pre> + +<h3 id="Nested_functions_and_closures">Nested functions and closures</h3> + +<p>You can nest a function within a function. The nested (inner) function is private to its containing (outer) function. It also forms a <em>closure</em>. A closure is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).</p> + +<p>Since a nested function is a closure, this means that a nested function can "inherit" the arguments and variables of its containing function. In other words, the inner function contains the scope of the outer function.</p> + +<p>To summarize:</p> + +<ul> + <li>The inner function can be accessed only from statements in the outer function.</li> +</ul> + +<ul> + <li>The inner function forms a closure: the inner function can use the arguments and variables of the outer function, while the outer function cannot use the arguments and variables of the inner function.</li> +</ul> + +<p>The following example shows nested functions:</p> + +<pre class="brush: js">function addSquares(a, b) { + function square(x) { + return x * x; + } + return square(a) + square(b); +} +a = addSquares(2, 3); // returns 13 +b = addSquares(3, 4); // returns 25 +c = addSquares(4, 5); // returns 41 +</pre> + +<p>Since the inner function forms a closure, you can call the outer function and specify arguments for both the outer and inner function:</p> + +<pre class="brush: js">function outside(x) { + function inside(y) { + return x + y; + } + return inside; +} +fn_inside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it +result = fn_inside(5); // returns 8 + +result1 = outside(3)(5); // returns 8 +</pre> + +<h3 id="Preservation_of_variables">Preservation of variables</h3> + +<p>Notice how <code>x</code> is preserved when <code>inside</code> is returned. A closure must preserve the arguments and variables in all scopes it references. Since each call provides potentially different arguments, a new closure is created for each call to outside. The memory can be freed only when the returned <code>inside</code> is no longer accessible.</p> + +<p>This is not different from storing references in other objects, but is often less obvious because one does not set the references directly and cannot inspect them.</p> + +<h3 id="Multiply-nested_functions">Multiply-nested functions</h3> + +<p>Functions can be multiply-nested, i.e. a function (A) containing a function (B) containing a function (C). Both functions B and C form closures here, so B can access A and C can access B. In addition, since C can access B which can access A, C can also access A. Thus, the closures can contain multiple scopes; they recursively contain the scope of the functions containing it. This is called <em>scope chaining</em>. (Why it is called "chaining" will be explained later.)</p> + +<p>Consider the following example:</p> + +<pre class="brush: js">function A(x) { + function B(y) { + function C(z) { + console.log(x + y + z); + } + C(3); + } + B(2); +} +A(1); // logs 6 (1 + 2 + 3) +</pre> + +<p>In this example, <code>C</code> accesses <code>B</code>'s <code>y</code> and <code>A</code>'s <code>x</code>. This can be done because:</p> + +<ol> + <li><code>B</code> forms a closure including <code>A</code>, i.e. <code>B</code> can access <code>A</code>'s arguments and variables.</li> + <li><code>C</code> forms a closure including <code>B</code>.</li> + <li>Because <code>B</code>'s closure includes <code>A</code>, <code>C</code>'s closure includes <code>A</code>, <code>C</code> can access both <code>B</code> <em>and</em> <code>A</code>'s arguments and variables. In other words, <code>C</code> <em>chains</em> the scopes of <code>B</code> and <code>A</code> in that order.</li> +</ol> + +<p>The reverse, however, is not true. <code>A</code> cannot access <code>C</code>, because <code>A</code> cannot access any argument or variable of <code>B</code>, which <code>C</code> is a variable of. Thus, <code>C</code> remains private to only <code>B</code>.</p> + +<h3 id="Name_conflicts">Name conflicts</h3> + +<p>When two arguments or variables in the scopes of a closure have the same name, there is a <em>name conflict</em>. More inner scopes take precedence, so the inner-most scope takes the highest precedence, while the outer-most scope takes the lowest. This is the scope chain. The first on the chain is the inner-most scope, and the last is the outer-most scope. Consider the following:</p> + +<pre class="brush: js">function outside() { + var x = 5; + function inside(x) { + return x * 2; + } + return inside; +} + +outside()(10); // returns 20 instead of 10 +</pre> + +<p>The name conflict happens at the statement <code>return x</code> and is between <code>inside</code>'s parameter <code>x</code> and <code>outside</code>'s variable <code>x</code>. The scope chain here is {<code>inside</code>, <code>outside</code>, global object}. Therefore <code>inside</code>'s <code>x</code> takes precedences over <code>outside</code>'s <code>x</code>, and 20 (<code>inside</code>'s <code>x</code>) is returned instead of 10 (<code>outside</code>'s <code>x</code>).</p> + +<h2 id="Closures">Closures</h2> + +<p>Closures are one of the most powerful features of JavaScript. JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to). However, the outer function does not have access to the variables and functions defined inside the inner function. This provides a sort of security for the variables of the inner function. Also, since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the duration of the inner function execution, if the inner function manages to survive beyond the life of the outer function. A closure is created when the inner function is somehow made available to any scope outside the outer function.</p> + +<pre class="brush: js">var pet = function(name) { // The outer function defines a variable called "name" + var getName = function() { + return name; // The inner function has access to the "name" variable of the outer function + } + return getName; // Return the inner function, thereby exposing it to outer scopes +} +myPet = pet('Vivie'); + +myPet(); // Returns "Vivie" +</pre> + +<p>It can be much more complex than the code above. An object containing methods for manipulating the inner variables of the outer function can be returned.</p> + +<pre class="brush: js">var createPet = function(name) { + var sex; + + return { + setName: function(newName) { + name = newName; + }, + + getName: function() { + return name; + }, + + getSex: function() { + return sex; + }, + + setSex: function(newSex) { + if(typeof newSex === 'string' && (newSex.toLowerCase() === 'male' || newSex.toLowerCase() === 'female')) { + sex = newSex; + } + } + } +} + +var pet = createPet('Vivie'); +pet.getName(); // Vivie + +pet.setName('Oliver'); +pet.setSex('male'); +pet.getSex(); // male +pet.getName(); // Oliver +</pre> + +<p>In the code above, the <code>name</code> variable of the outer function is accessible to the inner functions, and there is no other way to access the inner variables except through the inner functions. The inner variables of the inner functions act as safe stores for the outer arguments and variables. They hold "persistent", yet secure, data for the inner functions to work with. The functions do not even have to be assigned to a variable, or have a name.</p> + +<pre class="brush: js">var getCode = (function() { + var secureCode = '0]Eal(eh&2'; // A code we do not want outsiders to be able to modify... + + return function() { + return secureCode; + }; +}()); + +getCode(); // Returns the secureCode +</pre> + +<p>There are, however, a number of pitfalls to watch out for when using closures. If an enclosed function defines a variable with the same name as the name of a variable in the outer scope, there is no way to refer to the variable in the outer scope again.</p> + +<pre class="brush: js">var createPet = function(name) { // Outer function defines a variable called "name" + return { + setName: function(name) { // Enclosed function also defines a variable called "name" + name = name; // ??? How do we access the "name" defined by the outer function ??? + } + } +} +</pre> + +<h2 id="Using_the_arguments_object">Using the arguments object</h2> + +<p>The arguments of a function are maintained in an array-like object. Within a function, you can address the arguments passed to it as follows:</p> + +<pre class="brush: js">arguments[i] +</pre> + +<p>where <code>i</code> is the ordinal number of the argument, starting at zero. So, the first argument passed to a function would be <code>arguments[0]</code>. The total number of arguments is indicated by <code>arguments.length</code>.</p> + +<p>Using the <code>arguments</code> object, you can call a function with more arguments than it is formally declared to accept. This is often useful if you don't know in advance how many arguments will be passed to the function. You can use <code>arguments.length</code> to determine the number of arguments actually passed to the function, and then access each argument using the <code>arguments</code> object.</p> + +<p>For example, consider a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:</p> + +<pre class="brush: js">function myConcat(separator) { + var result = ''; // initialize list + var i; + // iterate through arguments + for (i = 1; i < arguments.length; i++) { + result += arguments[i] + separator; + } + return result; +} +</pre> + +<p>You can pass any number of arguments to this function, and it concatenates each argument into a string "list":</p> + +<pre class="brush: js">// returns "red, orange, blue, " +myConcat(', ', 'red', 'orange', 'blue'); + +// returns "elephant; giraffe; lion; cheetah; " +myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah'); + +// returns "sage. basil. oregano. pepper. parsley. " +myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley'); +</pre> + +<div class="note"> +<p><strong>Note:</strong> The <code>arguments</code> variable is "array-like", but not an array. It is array-like in that it has a numbered index and a <code>length</code> property. However, it does not possess all of the array-manipulation methods.</p> +</div> + +<p>See the {{jsxref("Function")}} object in the JavaScript reference for more information.</p> + +<h2 id="Function_parameters">Function parameters</h2> + +<p>Starting with ECMAScript 2015, there are two new kinds of parameters: default parameters and rest parameters.</p> + +<h3 id="Default_parameters">Default parameters</h3> + +<p>In JavaScript, parameters of functions default to <code>undefined</code>. However, in some situations it might be useful to set a different default value. This is where default parameters can help.</p> + +<p>In the past, the general strategy for setting defaults was to test parameter values in the body of the function and assign a value if they are <code>undefined</code>. If in the following example, no value is provided for <code>b</code> in the call, its value would be <code>undefined</code> when evaluating <code>a*b</code> and the call to <code>multiply</code> would have returned <code>NaN</code>. However, this is caught with the second line in this example:</p> + +<pre class="brush: js">function multiply(a, b) { + b = typeof b !== 'undefined' ? b : 1; + + return a * b; +} + +multiply(5); // 5 +</pre> + +<p>With default parameters, the check in the function body is no longer necessary. Now, you can simply put <code>1</code> as the default value for <code>b</code> in the function head:</p> + +<pre class="brush: js">function multiply(a, b = 1) { + return a * b; +} + +multiply(5); // 5</pre> + +<p>For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> in the reference.</p> + +<h3 id="Rest_parameters">Rest parameters</h3> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameter</a> syntax allows us to represent an indefinite number of arguments as an array. In the example, we use the rest parameters to collect arguments from the second one to the end. We then multiply them by the first one. This example is using an arrow function, which is introduced in the next section.</p> + +<pre class="brush: js">function multiply(multiplier, ...theArgs) { + return theArgs.map(x => multiplier * x); +} + +var arr = multiply(2, 1, 2, 3); +console.log(arr); // [2, 4, 6]</pre> + +<h2 id="Arrow_functions">Arrow functions</h2> + +<p>An <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function expression</a> (previously, and now incorrectly known as <strong>fat arrow function</strong>) has a shorter syntax compared to function expressions and lexically binds the <code>this</code> value. Arrow functions are always anonymous. See also this hacks.mozilla.org blog post: "<a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ES6 In Depth: Arrow functions</a>".</p> + +<p>Two factors influenced the introduction of arrow functions: shorter functions and lexical <code>this</code>.</p> + +<h3 id="Shorter_functions">Shorter functions</h3> + +<p>In some functional patterns, shorter functions are welcome. Compare:</p> + +<pre class="brush: js">var a = [ + 'Hydrogen', + 'Helium', + 'Lithium', + 'Beryllium' +]; + +var a2 = a.map(function(s) { return s.length; }); + +console.log(a2); // logs [8, 6, 7, 9] + +var a3 = a.map(s => s.length); + +console.log(a3); // logs [8, 6, 7, 9] +</pre> + +<h3 id="Lexical_this">Lexical <code>this</code></h3> + +<p>Until arrow functions, every new function defined its own <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a> value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.</p> + +<pre class="brush: js">function Person() { + // The Person() constructor defines `this` as itself. + this.age = 0; + + setInterval(function growUp() { + // In nonstrict mode, the growUp() function defines `this` + // as the global object, which is different from the `this` + // defined by the Person() constructor. + this.age++; + }, 1000); +} + +var p = new Person();</pre> + +<p>In ECMAScript 3/5, this issue was fixed by assigning the value in <code>this</code> to a variable that could be closed over.</p> + +<pre class="brush: js">function Person() { + var self = this; // Some choose `that` instead of `self`. + // Choose one and be consistent. + self.age = 0; + + setInterval(function growUp() { + // The callback refers to the `self` variable of which + // the value is the expected object. + self.age++; + }, 1000); +}</pre> + +<p>Alternatively, a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bound function</a> could be created so that the proper <code>this</code> value would be passed to the <code>growUp()</code> function.</p> + +<p>Arrow functions capture the <code>this</code> value of the enclosing context, so the following code works as expected.</p> + +<pre class="brush: js">function Person() { + this.age = 0; + + setInterval(() => { + this.age++; // |this| properly refers to the person object + }, 1000); +} + +var p = new Person();</pre> + +<h2 id="Predefined_functions">Predefined functions</h2> + +<p>JavaScript has several top-level, built-in functions:</p> + +<dl> + <dt>{{jsxref("Global_Objects/eval", "eval()")}}</dt> + <dd> + <p>The <code><strong>eval()</strong></code> method evaluates JavaScript code represented as a string.</p> + </dd> + <dt>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</dt> + <dd> + <p>The <code><strong>uneval()</strong></code> method creates a string representation of the source code of an {{jsxref("Object")}}.</p> + </dd> + <dt>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</dt> + <dd> + <p>The global <code><strong>isFinite()</strong></code> function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.</p> + </dd> + <dt>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</dt> + <dd> + <p>The <code><strong>isNaN()</strong></code> function determines whether a value is {{jsxref("Global_Objects/NaN", "NaN")}} or not. Note: coercion inside the <code>isNaN</code> function has <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#Description">interesting</a> rules; you may alternatively want to use {{jsxref("Number.isNaN()")}}, as defined in ECMAScript 2015, or you can use <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> to determine if the value is Not-A-Number.</p> + </dd> + <dt>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</dt> + <dd> + <p>The <code><strong>parseFloat()</strong></code> function parses a string argument and returns a floating point number.</p> + </dd> + <dt>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</dt> + <dd> + <p>The <code><strong>parseInt()</strong></code> function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).</p> + </dd> + <dt>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</dt> + <dd> + <p>The <code><strong>decodeURI()</strong></code> function decodes a Uniform Resource Identifier (URI) previously created by {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or by a similar routine.</p> + </dd> + <dt>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</dt> + <dd> + <p>The <code><strong>decodeURIComponent()</strong></code> method decodes a Uniform Resource Identifier (URI) component previously created by {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} or by a similar routine.</p> + </dd> + <dt>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</dt> + <dd> + <p>The <code><strong>encodeURI()</strong></code> method encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p> + </dd> + <dt>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</dt> + <dd> + <p>The <code><strong>encodeURIComponent()</strong></code> method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p> + </dd> + <dt>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</dt> + <dd> + <p>The deprecated <code><strong>escape()</strong></code> method computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} instead.</p> + </dd> + <dt>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</dt> + <dd> + <p>The deprecated <code><strong>unescape()</strong></code> method computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like {{jsxref("Global_Objects/escape", "escape")}}. Because <code>unescape()</code> is deprecated, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} instead.</p> + </dd> +</dl> + +<p>{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</p> diff --git a/files/fa/web/javascript/راهنما/grammar_and_types/index.html b/files/fa/web/javascript/راهنما/grammar_and_types/index.html new file mode 100644 index 0000000000..7ccb432c33 --- /dev/null +++ b/files/fa/web/javascript/راهنما/grammar_and_types/index.html @@ -0,0 +1,673 @@ +--- +title: گرامر و انواع +slug: Web/JavaScript/راهنما/Grammar_and_types +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div> + +<p class="summary" dir="rtl">این فصل در مورد گرامر اولیه جاوااسکریپت، اعلانهای متغیر، انواع داده و لیترالها است.</p> + +<h2 dir="rtl" id="مقدمه">مقدمه</h2> + +<p dir="rtl">جاوااسکریپت قسمت زیادی از نحو خود را از جاوا اقتباس کرده و همچنین از زبانهای پرل، پایتون و Awk تاثیر گرفته است.</p> + +<p dir="rtl">جاوااسکریپت <strong>حساس به</strong> <strong>کوچکی و بزرگی حروف (case-sensetive)</strong> است و از مجموعه کاراکترهای <strong>یونیکد (Unicode)</strong> استفاده میکند.</p> + +<p>In JavaScript, instructions are called {{Glossary("Statement", "statements")}} and are separated by a semicolon (;). Spaces, tabs and newline characters are called whitespace. The source text of JavaScript scripts gets scanned from left to right and is converted into a sequence of input elements which are tokens, control characters, line terminators, comments or whitespace. ECMAScript also defines certain keywords and literals and has rules for automatic insertion of semicolons (<a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">ASI</a>) to end statements. However, it is recommended to always add semicolons to end your statements; it will avoid side effects. For more information, see the detailed reference about JavaScript's <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">lexical grammar</a>.</p> + +<h2 dir="rtl" id="توضیح_(comment)">توضیح (comment)</h2> + +<p dir="rtl">نحو (syntax) یک «توضیح» مشابه با زبان C++ و تعداد زیادی از زبانهای دیگر است.<br> + مثال اول: توضیح تکخطی<br> + مثال دوم: توضیح چندخطی (بلوک)<br> + مثال سوم: اگرچه، برخلاف c++ نمیتوان توضیح تو در تو ساخت. احتمالا خطای نحوی خواهد بود.</p> + +<pre class="brush: js">// a one line comment + +/* this is a longer, + multi-line comment + */ + +/* You can't, however, /* nest comments */ SyntaxError */</pre> + +<h2 dir="rtl" id="اعلانها_(Declarations)">اعلانها (Declarations)</h2> + +<p dir="rtl">سه نوع اعلان در جاوااسکریپت وجود دارد.</p> + +<dl> + <dt dir="rtl">{{jsxref("Statements/var", "var")}}</dt> + <dd dir="rtl">یک متغیر را اعلان میکند. مقداردهی اولیه اختیاری است.</dd> + <dt dir="rtl">{{jsxref("Statements/let", "let")}}</dt> + <dd dir="rtl">یک متغیر محلی را با قلمرو بلوک اعلان میکند. مقداردهی اولیه اختیاری است.</dd> + <dt dir="rtl">{{jsxref("Statements/const", "const")}}</dt> + <dd dir="rtl">یک ثابت «فقط خواندنی» را اعلان میکند.</dd> +</dl> + +<h3 dir="rtl" id="متغیرها">متغیرها</h3> + +<p dir="rtl">You use variables as symbolic names for values in your application. The names of variables, called {{Glossary("Identifier", "identifiers")}}, conform to certain rules.</p> + +<p dir="rtl">A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase).</p> + +<p dir="rtl">You can use most of ISO 8859-1 or Unicode letters such as å and ü in identifiers (for more details see <a href="https://mathiasbynens.be/notes/javascript-identifiers-es6">this blog post</a>). You can also use the <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode escape sequences</a> as characters in identifiers.</p> + +<p dir="rtl">نامهای روبرو مثالهایی معتبر برای نامگذاری هستند: <code>Number_hits</code>, <code>temp99</code>, <code>_name</code></p> + +<h3 dir="rtl" id="اعلان_متغیرها">اعلان متغیرها</h3> + +<p dir="rtl">شما به سه روش میتوانید یک متغیر را اعلان کنید:</p> + +<ul dir="rtl"> + <li>با کلمهکلیدی {{jsxref("Statements/var", "var")}}. برای مثال <code>var x = 42</code>. این نحو میتواند برای اعلان هر دو نوع متغیر محلی و سراسری استفاده شود.</li> + <li>به سادگی و با انتساب یک مقدار به آن. برای مثال <code>x = 42</code>. این شیوه همیشه یک متغیر را به صورت سراسری اعلان میکند. این روش یک هشدار سختگیرانه (strict warning) تولید میکند. بهتر است از این روش استفاده نکنید.</li> + <li>با کلمهکلیدی {{jsxref("Statements/let", "let")}}. برای مثال <code>let y = 13</code>. این نحو میتواند برای اعلان یک متغیر محلی با قلمرو بلوک استفاده شود. بخش <a href="#قلمرو_متغیر_(Variable_Scope)">قلمرو متغیر</a> را در زیر ببینید.</li> +</ul> + +<h3 dir="rtl" id="ارزیابی_متغیرها">ارزیابی متغیرها</h3> + +<p dir="rtl">A variable declared using the <code>var or let</code> statement with no initial value specified has the value {{jsxref("undefined")}}.</p> + +<p dir="rtl">An attempt to access an undeclared variable will result in a {{jsxref("ReferenceError")}} exception being thrown:</p> + +<pre dir="rtl">var a; +console.log("The value of a is " + a); // The value of a is undefined + +var b; +console.log("The value of b is " + b); // The value of b is undefined + +console.log("The value of c is " + c); // Uncaught ReferenceError: c is not defined + +let x; +console.log("The value of x is " + x); // The value of x is undefined + +console.log("The value of y is " + y); // Uncaught ReferenceError: y is not defined +let y; </pre> + +<p dir="rtl">شما میتوانید از <code>undefined</code> برای مشخص کردن اینکه آیا یک متغیر دارای مقدار است استفاده کنید. در کد زیر به متغیر <code>input</code> مقداری انتساب داده نشده است و عبارت منطقی <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"> </a>برابر با <code>true</code> ارزیابی میشود.</p> + +<pre class="brush: js" dir="rtl">var input; +if(input === undefined){ + doThis(); +} else { + doThat(); +} +</pre> + +<p dir="rtl">رفتار مقدار <code>undefined</code> در ارزیابی عبارات منطقی مانند <code>false</code> است. برای مثال، در کد زیر تابع <code>myFunction</code> اجرا خواهد شد چون المان <code>myArray</code> تعریفنشده است:</p> + +<pre class="brush: js" dir="rtl">var myArray = []; +if (!myArray[0]) myFunction(); +</pre> + +<p dir="rtl">در یک عبارت عددی مقدار <code>undefined</code> به <code>NaN</code> تبدیل میشود.</p> + +<pre class="brush: js" dir="rtl">var a; +a + 2; // Evaluates to NaN</pre> + +<p dir="rtl">وقتی یک متغیر {{jsxref("null")}} را ارزیابی میکنید، در یک عبارت عددی دارای مقدارصفر و در یک عبارت منطقی دارای مقدار <code>false</code> خواهد بود. برای مثال:</p> + +<pre class="brush: js" dir="rtl">var n = null; +console.log(n * 32); // Will log 0 to the console +</pre> + +<h3 dir="rtl" id="قلمرو_متغیر_(Variable_Scope)">قلمرو متغیر (Variable Scope)</h3> + +<p dir="rtl">When you declare a variable outside of any function, it is called a <em>global</em> variable, because it is available to any other code in the current document. When you declare a variable within a function, it is called a <em>local</em> variable, because it is available only within that function.</p> + +<p dir="rtl">JavaScript before ECMAScript 2015 does not have <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement">block statement</a> scope; rather, a variable declared within a block is local to the <em>function (or global scope)</em> that the block resides within. For example the following code will log <code>5</code>, because the scope of <code>x</code> is the function (or global context) within which <code>x</code> is declared, not the block, which in this case is an <code>if</code> statement.</p> + +<pre class="brush: js" dir="rtl">if (true) { + var x = 5; +} +console.log(x); // x is 5 +</pre> + +<p dir="rtl">This behavior changes, when using the <code>let</code> declaration introduced in ECMAScript 2015.</p> + +<pre class="brush: js" dir="rtl">if (true) { + let y = 5; +} +console.log(y); // ReferenceError: y is not defined +</pre> + +<h3 dir="rtl" id="Variable_hoisting">Variable hoisting</h3> + +<p dir="rtl">Another unusual thing about variables in JavaScript is that you can refer to a variable declared later, without getting an exception. This concept is known as <strong>hoisting</strong>; variables in JavaScript are in a sense "hoisted" or lifted to the top of the function or statement. However, variables that are hoisted will return a value of <code>undefined</code>. So even if you declare and initialize after you use or refer to this variable, it will still return undefined.</p> + +<pre class="brush: js" dir="rtl">/** + * Example 1 + */ +console.log(x === undefined); // true +var x = 3; + +/** + * Example 2 + */ +// will return a value of undefined +var myvar = "my value"; + +(function() { + console.log(myvar); // undefined + var myvar = "local value"; +})(); +</pre> + +<p dir="rtl">The above examples will be interpreted the same as:</p> + +<pre class="brush: js" dir="rtl">/** + * Example 1 + */ +var x; +console.log(x === undefined); // true +x = 3; + +/** + * Example 2 + */ +var myvar = "my value"; + +(function() { + var myvar; + console.log(myvar); // undefined + myvar = "local value"; +})(); +</pre> + +<p dir="rtl">Because of hoisting, all <code>var</code> statements in a function should be placed as near to the top of the function as possible. This best practice increases the clarity of the code.</p> + +<p dir="rtl">In ECMAScript 2015, <code>let (const)</code> <strong>will not hoist</strong> the variable to the top of the block. However, referencing the variable in the block before the variable declaration results in a {{jsxref("ReferenceError")}}. The variable is in a "temporal dead zone" from the start of the block until the declaration is processed.</p> + +<pre class="brush: js" dir="rtl">console.log(x); // ReferenceError +let x = 3;</pre> + +<h3 dir="rtl" id="Function_hoisting">Function hoisting</h3> + +<p dir="rtl">For functions, only function declaration gets hoisted to the top and not the function expression.</p> + +<pre class="brush: js" dir="rtl">/* Function declaration */ + +foo(); // "bar" + +function foo() { + console.log("bar"); +} + + +/* Function expression */ + +baz(); // TypeError: baz is not a function + +var baz = function() { + console.log("bar2"); +}; +</pre> + +<h3 dir="rtl" id="Global_variables">Global variables</h3> + +<p dir="rtl">Global variables are in fact properties of the <em>global object</em>. In web pages the global object is {{domxref("window")}}, so you can set and access global variables using the <code>window.<em>variable</em></code> syntax.</p> + +<p dir="rtl">Consequently, you can access global variables declared in one window or frame from another window or frame by specifying the window or frame name. For example, if a variable called <code>phoneNumber</code> is declared in a document, you can refer to this variable from an iframe as <code>parent.phoneNumber</code>.</p> + +<h3 dir="rtl" id="Constants">Constants</h3> + +<p dir="rtl">You can create a read-only, named constant with the {{jsxref("Statements/const", "const")}} keyword. The syntax of a constant identifier is the same as for a variable identifier: it must start with a letter, underscore or dollar sign and can contain alphabetic, numeric, or underscore characters.</p> + +<pre class="brush: js" dir="rtl">const PI = 3.14; +</pre> + +<p dir="rtl">A constant cannot change value through assignment or be re-declared while the script is running. It has to be initialized to a value.</p> + +<p dir="rtl">The scope rules for constants are the same as those for <code>let</code> block scope variables. If the <code>const</code> keyword is omitted, the identifier is assumed to represent a variable.</p> + +<p dir="rtl">You cannot declare a constant with the same name as a function or variable in the same scope. For example:</p> + +<pre class="brush: js" dir="rtl">// THIS WILL CAUSE AN ERROR +function f() {}; +const f = 5; + +// THIS WILL CAUSE AN ERROR ALSO +function f() { + const g = 5; + var g; + + //statements +} +</pre> + +<p dir="rtl">However, the properties of objects assigned to constants are not protected, so the following statement is executed without problems.</p> + +<pre class="brush: js" dir="rtl">const MY_OBJECT = {"key": "value"}; +MY_OBJECT.key = "otherValue";</pre> + +<h2 dir="rtl" id="Data_structures_and_types">Data structures and types</h2> + +<h3 dir="rtl" id="Data_types">Data types</h3> + +<p dir="rtl">The latest ECMAScript standard defines seven data types:</p> + +<ul dir="rtl"> + <li>Six data types that are {{Glossary("Primitive", "primitives")}}: + <ul> + <li>{{Glossary("Boolean")}}. <code>true</code> and <code>false</code>.</li> + <li>{{Glossary("null")}}. A special keyword denoting a null value. Because JavaScript is case-sensitive, <code>null</code> is not the same as <code>Null</code>, <code>NULL</code>, or any other variant.</li> + <li>{{Glossary("undefined")}}. A top-level property whose value is undefined.</li> + <li>{{Glossary("Number")}}. <code>42</code> or <code>3.14159</code>.</li> + <li>{{Glossary("String")}}. "Howdy"</li> + <li>{{Glossary("Symbol")}} (new in ECMAScript 2015). A data type whose instances are unique and immutable.</li> + </ul> + </li> + <li>and {{Glossary("Object")}}</li> +</ul> + +<p dir="rtl">Although these data types are a relatively small amount, they enable you to perform useful functions with your applications. {{jsxref("Object", "Objects")}} and {{jsxref("Function", "functions")}} are the other fundamental elements in the language. You can think of objects as named containers for values, and functions as procedures that your application can perform.</p> + +<h3 dir="rtl" id="Data_type_conversion">Data type conversion</h3> + +<p dir="rtl">JavaScript is a dynamically typed language. That means you don't have to specify the data type of a variable when you declare it, and data types are converted automatically as needed during script execution. So, for example, you could define a variable as follows:</p> + +<pre class="brush: js" dir="rtl">var answer = 42; +</pre> + +<p dir="rtl">And later, you could assign the same variable a string value, for example:</p> + +<pre class="brush: js" dir="rtl">answer = "Thanks for all the fish..."; +</pre> + +<p dir="rtl">Because JavaScript is dynamically typed, this assignment does not cause an error message.</p> + +<p dir="rtl">In expressions involving numeric and string values with the + operator, JavaScript converts numeric values to strings. For example, consider the following statements:</p> + +<pre class="brush: js" dir="rtl">x = "The answer is " + 42 // "The answer is 42" +y = 42 + " is the answer" // "42 is the answer" +</pre> + +<p dir="rtl">In statements involving other operators, JavaScript does not convert numeric values to strings. For example:</p> + +<pre class="brush: js" dir="rtl">"37" - 7 // 30 +"37" + 7 // "377" +</pre> + +<h3 dir="rtl" id="Converting_strings_to_numbers">Converting strings to numbers</h3> + +<p dir="rtl">In the case that a value representing a number is in memory as a string, there are methods for conversion.</p> + +<ul dir="rtl"> + <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li> + <li>{{jsxref("parseFloat", "parseFloat()")}}</li> +</ul> + +<p dir="rtl"><code>parseInt</code> will only return whole numbers, so its use is diminished for decimals. Additionally, a best practice for <code>parseInt</code> is to always include the radix parameter. The radix parameter is used to specify which numerical system is to be used.</p> + +<p dir="rtl">An alternative method of retrieving a number from a string is with the <code>+</code> (unary plus) operator:</p> + +<pre class="brush: js" dir="rtl">"1.1" + "1.1" = "1.11.1" +(+"1.1") + (+"1.1") = 2.2 +// Note: the parentheses are added for clarity, not required.</pre> + +<h2 dir="rtl" id="Literals">Literals</h2> + +<p dir="rtl">You use literals to represent values in JavaScript. These are fixed values, not variables, that you <em>literally</em> provide in your script. This section describes the following types of literals:</p> + +<ul dir="rtl"> + <li>{{anch("Array literals")}}</li> + <li>{{anch("Boolean literals")}}</li> + <li>{{anch("Floating-point literals")}}</li> + <li>{{anch("Integers")}}</li> + <li>{{anch("Object literals")}}</li> + <li>{{anch("RegExp literals")}}</li> + <li>{{anch("String literals")}}</li> +</ul> + +<h3 dir="rtl" id="Array_literals">Array literals</h3> + +<p dir="rtl">An array literal is a list of zero or more expressions, each of which represents an array element, enclosed in square brackets (<code>[]</code>). When you create an array using an array literal, it is initialized with the specified values as its elements, and its length is set to the number of arguments specified.</p> + +<p dir="rtl">The following example creates the <code>coffees</code> array with three elements and a length of three:</p> + +<pre class="brush: js" dir="rtl">var coffees = ["French Roast", "Colombian", "Kona"]; +</pre> + +<div class="note" dir="rtl"> +<p><strong>Note :</strong> An array literal is a type of object initializer. See <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers">Using Object Initializers</a>.</p> +</div> + +<p dir="rtl">If an array is created using a literal in a top-level script, JavaScript interprets the array each time it evaluates the expression containing the array literal. In addition, a literal used in a function is created each time the function is called.</p> + +<p dir="rtl">Array literals are also <code>Array</code> objects. See {{jsxref("Array")}} and <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a> for details on <code>Array</code> objects.</p> + +<h4 dir="rtl" id="Extra_commas_in_array_literals">Extra commas in array literals</h4> + +<p dir="rtl">You do not have to specify all elements in an array literal. If you put two commas in a row, the array is created with <code>undefined</code> for the unspecified elements. The following example creates the <code>fish</code> array:</p> + +<pre class="brush: js" dir="rtl">var fish = ["Lion", , "Angel"]; +</pre> + +<p dir="rtl">This array has two elements with values and one empty element (<code>fish[0]</code> is "Lion", <code>fish[1]</code> is <code>undefined</code>, and <code>fish[2]</code> is "Angel").</p> + +<p dir="rtl">If you include a trailing comma at the end of the list of elements, the comma is ignored. In the following example, the length of the array is three. There is no <code>myList[3]</code>. All other commas in the list indicate a new element.</p> + +<div class="note" dir="rtl"> +<p><strong>Note :</strong> Trailing commas can create errors in older browser versions and it is a best practice to remove them.</p> +</div> + +<pre class="brush: js" dir="rtl">var myList = ['home', , 'school', ]; +</pre> + +<p dir="rtl">In the following example, the length of the array is four, and <code>myList[0]</code> and <code>myList[2]</code> are missing.</p> + +<pre class="brush: js" dir="rtl">var myList = [ , 'home', , 'school']; +</pre> + +<p dir="rtl">In the following example, the length of the array is four, and <code>myList[1]</code> and <code>myList[3]</code> are missing. Only the last comma is ignored.</p> + +<pre class="brush: js" dir="rtl">var myList = ['home', , 'school', , ]; +</pre> + +<p dir="rtl">Understanding the behavior of extra commas is important to understanding JavaScript as a language, however when writing your own code: explicitly declaring the missing elements as <code>undefined</code> will increase your code's clarity and maintainability.</p> + +<h3 dir="rtl" id="Boolean_literals">Boolean literals</h3> + +<p dir="rtl">The Boolean type has two literal values: <code>true</code> and <code>false</code>.</p> + +<p dir="rtl">Do not confuse the primitive Boolean values <code>true</code> and <code>false</code> with the true and false values of the Boolean object. The Boolean object is a wrapper around the primitive Boolean data type. See {{jsxref("Boolean")}} for more information.</p> + +<h3 dir="rtl" id="Integers">Integers</h3> + +<p dir="rtl">Integers can be expressed in decimal (base 10), hexadecimal (base 16), octal (base 8) and binary (base 2).</p> + +<ul dir="rtl"> + <li>Decimal integer literal consists of a sequence of digits without a leading 0 (zero).</li> + <li>Leading 0 (zero) on an integer literal, or leading 0o (or 0O) indicates it is in octal. Octal integers can include only the digits 0-7.</li> + <li>Leading 0x (or 0X) indicates hexadecimal. Hexadecimal integers can include digits (0-9) and the letters a-f and A-F.</li> + <li> + <p>Leading 0b (or 0B) indicates binary. Binary integers can include digits only 0 and 1.</p> + </li> +</ul> + +<p dir="rtl">Some examples of integer literals are:</p> + +<pre class="eval" dir="rtl">0, 117 and -345 (decimal, base 10) +015, 0001 and -0o77 (octal, base 8) +0x1123, 0x00111 and -0xF1A7 (hexadecimal, "hex" or base 16) +0b11, 0b0011 and -0b11 (binary, base 2) +</pre> + +<p dir="rtl">For more information, see <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">Numeric literals in the Lexical grammar reference</a>.</p> + +<h3 dir="rtl" id="Floating-point_literals">Floating-point literals</h3> + +<p dir="rtl">A floating-point literal can have the following parts:</p> + +<ul dir="rtl"> + <li>A decimal integer which can be signed (preceded by "+" or "-"),</li> + <li>A decimal point ("."),</li> + <li>A fraction (another decimal number),</li> + <li>An exponent.</li> +</ul> + +<p dir="rtl">The exponent part is an "e" or "E" followed by an integer, which can be signed (preceded by "+" or "-"). A floating-point literal must have at least one digit and either a decimal point or "e" (or "E").</p> + +<p dir="rtl">More succinctly, the syntax is:</p> + +<pre class="eval" dir="rtl">[(+|-)][digits][.digits][(E|e)[(+|-)]digits] +</pre> + +<p dir="rtl">For example:</p> + +<pre class="eval" dir="rtl">3.1415926 +-.123456789 +-3.1E+12 +.1e-23 +</pre> + +<h3 dir="rtl" id="Object_literals">Object literals</h3> + +<p dir="rtl">An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces (<code>{}</code>). You should not use an object literal at the beginning of a statement. This will lead to an error or not behave as you expect, because the { will be interpreted as the beginning of a block.</p> + +<p dir="rtl">The following is an example of an object literal. The first element of the <code>car</code> object defines a property, <code>myCar</code>, and assigns to it a new string, "<code>Saturn</code>"; the second element, the <code>getCar</code> property, is immediately assigned the result of invoking the function <code>(carTypes("Honda"));</code> the third element, the <code>special</code> property, uses an existing variable (<code>sales</code>).</p> + +<pre class="brush: js" dir="rtl">var sales = "Toyota"; + +function carTypes(name) { + if (name === "Honda") { + return name; + } else { + return "Sorry, we don't sell " + name + "."; + } +} + +var car = { myCar: "Saturn", getCar: carTypes("Honda"), special: sales }; + +console.log(car.myCar); // Saturn +console.log(car.getCar); // Honda +console.log(car.special); // Toyota +</pre> + +<p dir="rtl">Additionally, you can use a numeric or string literal for the name of a property or nest an object inside another. The following example uses these options.</p> + +<pre class="brush: js" dir="rtl">var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" }; + +console.log(car.manyCars.b); // Jeep +console.log(car[7]); // Mazda +</pre> + +<p dir="rtl">Object property names can be any string, including the empty string. If the property name would not be a valid JavaScript {{Glossary("Identifier","identifier")}} or number, it must be enclosed in quotes. Property names that are not valid identifiers also cannot be accessed as a dot (<code>.</code>) property, but can be accessed and set with the array-like notation("<code>[]</code>").</p> + +<pre class="brush: js" dir="rtl">var unusualPropertyNames = { + "": "An empty string", + "!": "Bang!" +} +console.log(unusualPropertyNames.""); // SyntaxError: Unexpected string +console.log(unusualPropertyNames[""]); // An empty string +console.log(unusualPropertyNames.!); // SyntaxError: Unexpected token ! +console.log(unusualPropertyNames["!"]); // Bang!</pre> + +<p dir="rtl">In ES2015, object literals are extended to support setting the prototype at construction, shorthand for <code>foo: foo</code> assignments, defining methods, making super calls, and computing property names with expressions. Together, these also bring object literals and class declarations closer together, and let object-based design benefit from some of the same conveniences.</p> + +<pre class="brush: js" dir="rtl">var obj = { + // __proto__ + __proto__: theProtoObj, + // Shorthand for ‘handler: handler’ + handler, + // Methods + toString() { + // Super calls + return "d " + super.toString(); + }, + // Computed (dynamic) property names + [ 'prop_' + (() => 42)() ]: 42 +};</pre> + +<p dir="rtl">Please note:</p> + +<pre class="brush: js" dir="rtl">var foo = {a: "alpha", 2: "two"}; +console.log(foo.a); // alpha +console.log(foo[2]); // two +//console.log(foo.2); // Error: missing ) after argument list +//console.log(foo[a]); // Error: a is not defined +console.log(foo["a"]); // alpha +console.log(foo["2"]); // two +</pre> + +<h3 dir="rtl" id="RegExp_literals">RegExp literals</h3> + +<p dir="rtl">A regex literal is a pattern enclosed between slashes. The following is an example of an regex literal.</p> + +<pre class="brush: js" dir="rtl">var re = /ab+c/;</pre> + +<h3 dir="rtl" id="String_literals">String literals</h3> + +<p dir="rtl">A string literal is zero or more characters enclosed in double (<code>"</code>) or single (<code>'</code>) quotation marks. A string must be delimited by quotation marks of the same type; that is, either both single quotation marks or both double quotation marks. The following are examples of string literals:</p> + +<pre class="brush: js" dir="rtl">"foo" +'bar' +"1234" +"one line \n another line" +"John's cat" +</pre> + +<p dir="rtl">You can call any of the methods of the String object on a string literal value—JavaScript automatically converts the string literal to a temporary String object, calls the method, then discards the temporary String object. You can also use the <code>String.length</code> property with a string literal:</p> + +<pre class="brush: js" dir="rtl">console.log("John's cat".length) +// Will print the number of symbols in the string including whitespace. +// In this case, 10. +</pre> + +<p dir="rtl">In ES2015, template literals are also available. Template strings provide syntactic sugar for constructing strings. This is similar to string interpolation features in Perl, Python and more. Optionally, a tag can be added to allow the string construction to be customized, avoiding injection attacks or constructing higher level data structures from string contents.</p> + +<pre class="brush: js" dir="rtl">// Basic literal string creation +`In JavaScript '\n' is a line-feed.` + +// Multiline strings +`In JavaScript template strings can run + over multiple lines, but double and single + quoted strings cannot.` + +// String interpolation +var name = "Bob", time = "today"; +`Hello ${name}, how are you ${time}?` + +// Construct an HTTP request prefix is used to interpret the replacements and construction +POST`http://foo.org/bar?a=${a}&b=${b} + Content-Type: application/json + X-Credentials: ${credentials} + { "foo": ${foo}, + "bar": ${bar}}`(myOnReadyStateChangeHandler);</pre> + +<p dir="rtl">You should use string literals unless you specifically need to use a String object. See {{jsxref("String")}} for details on <code>String</code> objects.</p> + +<h4 dir="rtl" id="Using_special_characters_in_strings">Using special characters in strings</h4> + +<p dir="rtl">In addition to ordinary characters, you can also include special characters in strings, as shown in the following example.</p> + +<pre class="brush: js" dir="rtl">"one line \n another line" +</pre> + +<p dir="rtl">The following table lists the special characters that you can use in JavaScript strings.</p> + +<table class="standard-table" dir="rtl"> + <caption> + <p>Table: JavaScript special characters</p> + </caption> + <thead> + <tr> + <th scope="col">Character</th> + <th scope="col">Meaning</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\0</code></td> + <td>Null Byte</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>Backspace</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Form feed</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>New line</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Carriage return</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Tab</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Vertical tab</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>Apostrophe or single quote</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>Double quote</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>Backslash character</td> + </tr> + <tr> + <td><code>\<em>XXX</em></code></td> + <td>The character with the Latin-1 encoding specified by up to three octal digits <em>XXX</em> between 0 and 377. For example, \251 is the octal sequence for the copyright symbol.</td> + </tr> + <tr> + </tr> + <tr> + <td><code>\x<em>XX</em></code></td> + <td>The character with the Latin-1 encoding specified by the two hexadecimal digits <em>XX</em> between 00 and FF. For example, \xA9 is the hexadecimal sequence for the copyright symbol.</td> + </tr> + <tr> + </tr> + <tr> + <td><code>\u<em>XXXX</em></code></td> + <td>The Unicode character specified by the four hexadecimal digits <em>XXXX</em>. For example, \u00A9 is the Unicode sequence for the copyright symbol. See <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode escape sequences</a>.</td> + </tr> + <tr> + <td><code>\u<em>{XXXXX}</em></code></td> + <td>Unicode code point escapes. For example, \u{2F804} is the same as the simple Unicode escapes \uD87E\uDC04.</td> + </tr> + </tbody> +</table> + +<h4 dir="rtl" id="Escaping_characters">Escaping characters</h4> + +<p dir="rtl">For characters not listed in the table, a preceding backslash is ignored, but this usage is deprecated and should be avoided.</p> + +<p dir="rtl">You can insert a quotation mark inside a string by preceding it with a backslash. This is known as <em>escaping</em> the quotation mark. For example:</p> + +<pre class="brush: js" dir="rtl">var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."; +console.log(quote); +</pre> + +<p dir="rtl">The result of this would be:</p> + +<pre class="eval" dir="rtl">He read "The Cremation of Sam McGee" by R.W. Service. +</pre> + +<p dir="rtl">To include a literal backslash inside a string, you must escape the backslash character. For example, to assign the file path <code>c:\temp</code> to a string, use the following:</p> + +<pre class="brush: js" dir="rtl">var home = "c:\\temp"; +</pre> + +<p dir="rtl">You can also escape line breaks by preceding them with backslash. The backslash and line break are both removed from the value of the string.</p> + +<pre class="brush: js" dir="rtl">var str = "this string \ +is broken \ +across multiple\ +lines." +console.log(str); // this string is broken across multiplelines. +</pre> + +<p dir="rtl">Although JavaScript does not have "heredoc" syntax, you can get close by adding a line break escape and an escaped line break at the end of each line:</p> + +<pre class="brush: js" dir="rtl">var poem = +"Roses are red,\n\ +Violets are blue.\n\ +Sugar is sweet,\n\ +and so is foo." +</pre> + +<h2 dir="rtl" id="More_information">More information</h2> + +<p dir="rtl">This chapter focuses on basic syntax for declarations and types. To learn more about JavaScript's language constructs, see also the following chapters in this guide:</p> + +<ul dir="rtl"> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></li> +</ul> + +<p dir="rtl">In the next chapter, we will have a look at control flow constructs and error handling.</p> + +<p dir="rtl">{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> diff --git a/files/fa/web/javascript/راهنما/index.html b/files/fa/web/javascript/راهنما/index.html new file mode 100644 index 0000000000..6ebfec2533 --- /dev/null +++ b/files/fa/web/javascript/راهنما/index.html @@ -0,0 +1,107 @@ +--- +title: راهنمای جاوا اسکریپت +slug: Web/JavaScript/راهنما +translation_of: Web/JavaScript/Guide +--- +<p>{{jsSidebar("JavaScript Guide")}}</p> + +<div class="summary"> +<p style="direction: rtl;"><span class="seoSummary">راهنمای javascript یک مرور اجمالی بر روی این زبان داشته و به شما طریقه استفاده از<a href="/en-US/docs/Web/JavaScript"> جاوا اسکریپت</a> را نشان می دهد. اگر می خواهید به طور کلی برنامه نویسی یا جاوا اسکریپت را شروع کنید, از مقالات ما در <a href="/en-US/Learn">محیط آموزشی</a> کمک بگیرید. اگر به اطلاعات کامل درباره ویژگی های یک زبان نیاز دارید، نگاهی به<a href="/en-US/docs/Web/JavaScript/Reference"> مرجع جاوا اسکریپت</a> داشته باشید</span></p> +</div> + +<ul class="card-grid"> + <li><strong><a href="/en-US/docs/Web/JavaScript/Guide/Introduction">معرفی</a></strong> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">درباره این راهنما</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript.3F">درباره جاوا اسکریپت</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">جاوا اسکریپت و جاوا</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">ابزارها</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Hello_world">مثال Hello World</a> </p> + </li> + <li><strong><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types">دستور زبان و نوع های داده ای</a></strong> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">syntax اولیه و commentها</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">تعاریف</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Variable scope</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Variable hoisting</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">ساختار داده و نوع های داده ای</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Literals</a></p> + </li> + <li><strong><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">روند کنترل و مدیریت خطا</a></strong> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Error objects</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Promises</a></p> + </li> + <li><strong><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">حلقه ها و تکرار</a></strong> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> + </li> +</ul> + +<ul class="card-grid"> + <li><strong><a href="/en-US/docs/Web/JavaScript/Guide/Functions">توابع</a></strong> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Defining_functions">تعریف توابع</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Calling_functions">فراخوانی توابع</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope">Function scope</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Closures">Closures</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Arguments</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_parameters">parameters</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Arrow functions</a></p> + </li> + <li><strong><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">عبارات و عملگرها</a></strong> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">مقدار دهی</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">مقایسه</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">عملگرهای ریاضی</a><br> + <span style="background-color: rgba(234, 239, 242, 0.498039);">عملگرهای </span><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">بیتی</a> و <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">منطقی </a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">عملگرهای شرطی (سه تایی)</a></p> + </li> + <li><strong><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">اعداد و تاریخ</a></strong><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> </a> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers">Number literals</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object">Number object</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> object</a><br> + <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> object</a></p> + </li> + <li><strong><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting">قالب بندی متن</a></strong> + <p>رشته ها<br> + Template strings<br> + Regular Expressions<br> + Internationalization<br> + </p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">مجموعه های اندیس دار</a></span> + <p>آرایه ها<br> + آریه های نوع دار</p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections_and_structured_data">مجموعه های کلید دار و داده های ساخت یافته</a></span> + <p>Maps, WeakMaps<br> + Sets, WeakSets<br> + JSON</p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects">کار با اشیا</a></span> + <p>ایجاد اشیا<br> + Object initializer<br> + وراثت<br> + Getter and setter</p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">جزئیات مدل شی</a></span> + <p>Prototype-based OOP<br> + Properties and methods<br> + وراثت</p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></span> + <p>Iterable protocol<br> + Iterator protocol<br> + Generators</p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming">Meta programming</a></span> + <p>Proxy<br> + Reflect</p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/fa/web/javascript/راهنما/مقدمه/index.html b/files/fa/web/javascript/راهنما/مقدمه/index.html new file mode 100644 index 0000000000..3e8b0f1cff --- /dev/null +++ b/files/fa/web/javascript/راهنما/مقدمه/index.html @@ -0,0 +1,138 @@ +--- +title: مقدمه +slug: Web/JavaScript/راهنما/مقدمه +tags: + - اکما اسکریپت + - جاوا اسکریپت +translation_of: Web/JavaScript/Guide/Introduction +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> + +<p class="summary" dir="rtl">در این فصل به مباحث مقدماتی جاوا اسکریپت پرداخته و برخی از مفاهیم اساسی آن را بیان می کنیم . </p> + +<h2 dir="rtl" id="آنچه_که_شما_باید_از_قبل_بدانید">آنچه که شما باید از قبل بدانید</h2> + +<p dir="rtl">این آموزش فرض را بر این گرفته که شما پیش زمینه های زیر را دارا هستید:</p> + +<ul dir="rtl"> + <li>یک درک عمومی از اینترنت و شبکه ی جهانی وب ({{Glossary("WWW")}}).</li> + <li>اطلاعاتی خوب و کارآمد در زمینه ی زبان نشانه گذاری فرا متن ({{Glossary("HTML")}}).</li> +</ul> + +<p dir="rtl">مقداری تجربه ی برنامه نویسی . اگر شما به تازگی وارد برنامه نویسی شده اید ، سعی کنید ابتدا از لینک های آموزشی که در صفحه ی اصلی هست به لینک درباره ی جاوا اسکریپت بروید.</p> + +<h2 dir="rtl" id="کجا_اطلاعات_جاوا_اسکریپت_را_پیدا_کنید">کجا اطلاعات جاوا اسکریپت را پیدا کنید</h2> + +<p dir="rtl">مستندات جاوا اسکریپت در MDN شامل موارد زیر است:</p> + +<ol dir="rtl"> + <li><a href="/en-US/Learn">یادگیری وب:</a> اطلاعاتی را برای افراد تازه کار فراهم می کند و همچنین مفاهیم پایه برنامه نویسی و اینترنت را معرفی می کند</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide">راهنمای جاوا اسکریپت:</a> (این راهنمایی) یک دیدکلی را از زبان جاوا اسکریپت و اشیای آن ارائه می کند</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference">مرجع جاوا اسکریپت:</a> یک مرجع همراه با جزئیات برای زبان جاوا اسکریپت فراهم می کند</li> +</ol> + +<h2 dir="rtl" id="جاوا_اسکریپت_چیست؟">جاوا اسکریپت چیست؟</h2> + +<p dir="rtl">جاوا اسکریپت یک زبان با بسترمتقاطع(چند پلتفرمی) و شی گرای اسکریپتی است. این زبان کوچک و سبک است. در محیط میزبان (برای مثال یک مرورگر) جاوا اسکریپت می تواند به اشیای محیط متصل شده و کنترل به وسیله برنامه نویسی را برای آن محیط فراهم می کند.</p> + +<p dir="rtl">جاوا اسکریپت شامل یک کتابخانه استاندارد اشیا است مانند Array، Date و Math، مجموعه پایه ای از عناصر زبان مثل عملگرها، ساختارهای کنترلی و عبارات. هسته ی زبان جاوا اسکریپت می تواند برای اهداف مختلفی توسعه داده شود. برای این منظور از جاوا اسکریپت به همراه اشیایی اضافی استفاده می شود برای مثال:</p> + +<ul> + <li dir="rtl">جاوا اسکریپت سمت مشتری(کلاینت): هسته زبان را با استفاده از اشیایی توسعه می دهد که مرورگر و ساختار DOM آن را کنترل می کند. برای مثال افزونه های سمت مشتری به برنامه اجازه می دهند تا عناصری را در یک فرم HTML قرار دهد و به رویدادهای کاربر مانند کلیک های موس، ورودی های فرم،... پاسخ دهد.</li> + <li dir="rtl">جاوا اسکریپت سمت خادم(سرور): هسته جاوا اسکریپت را با استفاده از اشیایی که به اجرا شدن جاوا اسکریپت بر روی سرور مربوط می شود توسعه می دهد. برای مثال افزونه های سمت سرور به برنامه اجازه می دهند تا با پایگاه داده ارتباط برقرار کند،</li> +</ul> + +<h2 dir="rtl" id="JavaScript_and_Java" name="JavaScript_and_Java">جاوا اسکریپت و جاوا</h2> + +<p dir="rtl">جاوااسکریپت و جاوا از بعضی جهات با هم مشابه</p> + +<p>In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype-based object model instead of the more common class-based object model. The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements. Functions can be properties of objects, executing as loosely typed methods.</p> + +<p>JavaScript is a very free-form language compared to Java. You do not have to declare all variables, classes, and methods. You do not have to be concerned with whether methods are public, private, or protected, and you do not have to implement interfaces. Variables, parameters, and function return types are not explicitly typed.</p> + +<p>Java is a class-based programming language designed for fast execution and type safety. Type safety means, for instance, that you can't cast a Java integer into an object reference or access private memory by corrupting Java bytecodes. Java's class-based model means that programs consist exclusively of classes and their methods. Java's class inheritance and strong typing generally require tightly coupled object hierarchies. These requirements make Java programming more complex than JavaScript programming.</p> + +<p>In contrast, JavaScript descends in spirit from a line of smaller, dynamically typed languages such as HyperTalk and dBASE. These scripting languages offer programming tools to a much wider audience because of their easier syntax, specialized built-in functionality, and minimal requirements for object creation.</p> + +<table class="standard-table"> + <caption>JavaScript compared to Java</caption> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td>Object-oriented. No distinction between types of objects. Inheritance is through the prototype mechanism, and properties and methods can be added to any object dynamically.</td> + <td>Class-based. Objects are divided into classes and instances with all inheritance through the class hierarchy. Classes and instances cannot have properties or methods added dynamically.</td> + </tr> + <tr> + <td>Variable data types are not declared (dynamic typing).</td> + <td>Variable data types must be declared (static typing).</td> + </tr> + <tr> + <td>Cannot automatically write to hard disk.</td> + <td>Can automatically write to hard disk.</td> + </tr> + </tbody> +</table> + +<p>For more information on the differences between JavaScript and Java, see the chapter <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a>.</p> + +<h2 dir="rtl" id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">مشخصات جاوا اسکریپت و اکما اسکریپت</h2> + +<p dir="rtl">جاوا اسکریپت در <a href="http://www.ecma-international.org/">Ecma International</a> استاندارد شده است —اتحادیه اروپا برای استاندارد سازی سیستم های اطلاعاتی و ارتباطی (ECMA مخفف انجمن سازندگان کامپیوتری اروپا) بود تا یک زبان برنامه نویسی استاندارد مبتنی بر جاوا اسکریپت را ارائه کند.</p> + +<p dir="rtl">این نسخه استاندارد از جاوا اسکریپت، به نام اکما اسکریپت ، در تمامی برنامه هایی که از استاندارد پشتیبانی می کنند، یکسان عمل می کند. شرکت ها می توانند از استاندارد زبان باز برای توسعه جاوا اسکریپت خود استفاده کنند. استاندارد اکما اسکریپت در مشخصات ECMA-262 مستند شده است. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript">تازه ها</a> در جاوا اسکریپت را برای کسب اطلاعات بیشتر در مورد نسخه های مختلف نسخه های خاص جاوا اسکریپت و اکما اسکریپت مشاهده کنید.</p> + +<p dir="rtl">The ECMA-262 standard is also approved by the <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization) as ISO-16262. You can also find the specification on <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">the Ecma International website</a>. The ECMAScript specification does not describe the Document Object Model (DOM), which is standardized by the <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> and/or <a href="https://whatwg.org">WHATWG (Web Hypertext Application Technology Working Group)</a>. The DOM defines the way in which HTML document objects are exposed to your script. To get a better idea about the different technologies that are used when programming with JavaScript, consult the article <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h3 dir="rtl" id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">مستندات جاوا اسکریپت در مقایسه با مشخصات اکما اسکریپت</h3> + +<p dir="rtl">مشخصات اکما اسکریپت مجموعه ای از الزامات برای پیاده سازی اکما اسکریپت است؛ اگر شما می خواهید ویژگی های زبان سازگار با استاندارد را در پیاده سازی اکما اسکریپت یا موتور خود (مانند SpiderMonkey در فایرفاکس یا v8 در Chrome) پیاده سازی کنید، مفید است.</p> + +<p>The ECMAScript document is not intended to help script programmers; use the JavaScript documentation for information on writing scripts.</p> + +<p>The ECMAScript specification uses terminology and syntax that may be unfamiliar to a JavaScript programmer. Although the description of the language may differ in ECMAScript, the language itself remains the same. JavaScript supports all functionality outlined in the ECMAScript specification.</p> + +<p>The JavaScript documentation describes aspects of the language that are appropriate for a JavaScript programmer.</p> + +<h2 dir="rtl" id="شروع_با_جاوا_اسکریپت">شروع با جاوا اسکریپت</h2> + +<p>Getting started with JavaScript is easy: all you need is a modern Web browser. This guide includes some JavaScript features which are only currently available in the latest versions of Firefox, so using the most recent version of Firefox is recommended.</p> + +<p>There are two tools built into Firefox that are useful for experimenting with JavaScript: the Web Console and Scratchpad.</p> + +<h3 dir="rtl" id="کنسول_وب">کنسول وب</h3> + +<p>The <a href="/en-US/docs/Tools/Web_Console">Web Console</a> shows you information about the currently loaded Web page, and also includes a <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">command line</a> that you can use to execute JavaScript expressions in the current page.</p> + +<p>To open the Web Console (Ctrl+Shift+K), select "Web Console" from the "Developer" menu, which is under the "Tools" menu in Firefox. It appears at the bottom of the browser window. Along the bottom of the console is a command line that you can use to enter JavaScript, and the output appears in the pane above:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Scratchpad">Scratchpad</h3> + +<p>The Web Console is great for executing single lines of JavaScript, but although you can execute multiple lines, it's not very convenient for that, and you can't save your code samples using the Web Console. So for more complex examples <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> is a better tool.</p> + +<p>To open Scratchpad (Shift+F4), select "Scratchpad" from the "Developer" menu, which is under the menu in Firefox. It opens in a separate window and is an editor that you can use to write and execute JavaScript in the browser. You can also save scripts to disk and load them from disk.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Hello_world">Hello world</h3> + +<p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</p> + +<pre class="brush: js">function greetMe(yourName) { + alert("Hello " + yourName); +} + +greetMe("World"); +</pre> + +<p>Select the code in the pad and hit Ctrl+R to watch it unfold in your browser!</p> + +<p>In the following pages, this guide will introduce you to the JavaScript syntax and language features, so that you will be able to write more complex applications.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p> diff --git a/files/fa/web/mathml/index.html b/files/fa/web/mathml/index.html new file mode 100644 index 0000000000..1c286e0c7b --- /dev/null +++ b/files/fa/web/mathml/index.html @@ -0,0 +1,126 @@ +--- +title: MathML +slug: Web/MathML +translation_of: Web/MathML +--- +<p class="summary" dir="rtl"><strong>زبان نشانهگذاری ریاضی (MathML)</strong> گویشی از <a href="/fa/docs/XML" title="/en-US/docs/XML">XML</a> ، برای توصیف نمادها و ضبط هر دو مورد محتوی و ساختار ریاضی می باشد.</p> + +<p dir="rtl">در اینجا پیوندهایی به مستندات، مثالها و ابزارهایی را برای کمک به کارکردن شما با این تکنولوژی قوی خواهید یافت. برای یک مرور کلی، می توانید به لینک زیر مراجعه نمایید: </p> + +<p dir="rtl"> <a href="https://fred-wang.github.io/MozSummitMathML/index.html">slides for the innovation fairs at Mozilla Summit 2013</a></p> + +<div class="row topicpage-table" dir="rtl"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">مراجع MathML</h2> + +<dl> + <dt><a href="/fa/docs/Web/MathML/Element" title="/en-US/docs/Web/MathML/Element">مرجع المان MathML</a></dt> + <dd>جزییاتی در مورد هر المان MathML و اطلاعات سازگار برای مرورگرهای میزکار و سیار.</dd> + <dt><a href="/fa/docs/Web/MathML/Attribute" title="/en-US/docs/Web/MathML/Attribute">مرجع خصوصیت MathML</a></dt> + <dd>اطلاعاتی در مورد خصوصیات MathML که رفتار و ظاهر المانها را تغییر میدهد.</dd> + <dt><a href="/fa/docs/Web/MathML/Examples" title="/en-US/docs/Web/MathML/Examples">مثالهای MathML</a></dt> + <dd>نمونهها و مثالهای MathML که به شما در فهمیدن چگونگی عملکرد آن کمک میکند.</dd> + <dt><a href="/fa/docs/Web/MathML/Authoring" title="/en-US/docs/Web/MathML/Authoring">نگارش MathML</a></dt> + <dd>پیشنهادها و نکاتی برای نوشتن MathML، شامل ویرایشگرهای پیشنهادی MathML و چگونگی گنجاندن آنها در داخل محتویات وب.</dd> +</dl> + +<p><span class="alllinks"><a href="/fa/docs/tag/MathML" title="/en-US/docs/tag/CSS">نمایش همه...</a></span></p> +</div> + +<div class="section"> +<h2 class="Community" id="کمک_گرفتن_از_جامعه">کمک گرفتن از جامعه</h2> + +<ul> + <li>دیدن انجمن های موزیلا...<br> + {{ DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml") }}</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/%23mathml" rel="external" title="irc://irc.mozilla.org/%23mathml">کانال IRC</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/MathML:Home_Page">Wiki مورد استفاده موزیلا</a></li> + <li><a href="http://www.w3.org/Math/" title="http://www.w3.org/Math/">خانه ریاضی W3C</a></li> + <li><a href="http://lists.w3.org/Archives/Public/www-math/" title="http://lists.w3.org/Archives/Public/www-math/">بایگانی پست www-math w3.org</a></li> +</ul> + +<h2 class="Tools" id="ابزارها">ابزارها</h2> + +<ul> + <li><a class="external" href="http://validator.w3.org">تایید کننده W3C</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/de/firefox/addon/8969/">افزونه FireMath فایرفاکس</a></li> + <li><a href="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/" title="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/">مجموعه افزونه های Mathzilla فایرفاکس</a></li> + <li><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> - مبدل Javascript LaTeX to MathML (<a href="http://fred-wang.github.io/TeXZilla/">live demo</a>، <a href="http://r-gaia-cs.github.io/TeXZilla-webapp/">Firefox OS webapp،</a> <a href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/">Firefox add-on،</a> <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla">using in a Web Page، JS program etc</a>)</li> + <li><a href="http://dlmf.nist.gov/LaTeXML/" title="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> - تبدیل اسناد LaTeX d به HTML+ صفحات وبMathML</li> + <li><a href="http://webdemo.visionobjects.com/home.html#equation" title="http://webdemo.visionobjects.com/equation.html">Web Equation</a> - برگرداندن معادلات دستنویس به MathML یا LaTeX</li> + <li><a href="http://www.mathjax.org/" title="http://www.mathjax.org/">MathJax</a> - میان مرورگر- موتور نمایش جاوا اسکریپت برای ریاضیات. جهت تقویت MathJax برای ;کار با MathML ساده، رجوع شود به: <a href="https://addons.mozilla.org/en-US/firefox/addon/mathjax-native-mathml/">this Mozilla add-on</a>, یا <a href="http://fred-wang.github.io/mathjax-native-mathml-safari/mathjax-native-mathml.safariextz">Safari extension </a>و یا <a href="https://openuserjs.org/scripts/fred.wang/MathJax_Native_MathML/">GreaseMonkey scrip</a>.</li> +</ul> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">موضوعات مرتبط</h2> + +<ul> + <li><a href="/fa/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></li> + <li><a href="/fa/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></li> + <li><a href="/fa/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></li> +</ul> +</div> +</div> + +<h2 dir="rtl" id="Browser_compatibility" name="Browser_compatibility">سازگاری با مرورگر</h2> + +<div class="hidden"> +<p dir="rtl">جدول سازگاری در این صفحه، از ساختمان داده ها تولید می شود. اگر مایل به کمک به این اطلاعات هستید، لطفا آدرس <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> را ملاحظه نموده و برای ما یک درخواست واکشی بفرستید.</p> + +<p dir="rtl">{{CompatibilityTable}}</p> +</div> + +<p> </p> + +<div dir="rtl" id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>With PlugIn(s)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div dir="rtl" id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.8")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div dir="rtl"> +<h3 id="نکات_Gecko">نکات Gecko</h3> + +<p>شروع با فایرفاکس 1.5، بسیاری از نشانهگذاریهای <a class="external" href="http://www.w3.org/TR/MathML2/">MathML 2.0 W3C Recommendation</a> روی همه پلت فرمها پشتیبانی شده است. پشتیبانی برای <a class="external" href="http://www.w3.org/TR/MathML3/" title="http://www.w3.org/TR/MathML3/">MathML 3</a> <a href="/en-US/docs/Mozilla_MathML_Project/Status" title="/en-US/docs/Mozilla_MathML_Project/Status">در حال پیشرفت</a> است.</p> +</div> + +<p dir="rtl"> </p> diff --git a/files/fa/web/svg/index.html b/files/fa/web/svg/index.html new file mode 100644 index 0000000000..5230a881a5 --- /dev/null +++ b/files/fa/web/svg/index.html @@ -0,0 +1,94 @@ +--- +title: SVG +slug: Web/SVG +tags: + - 2D Graphics + - NeedsTranslation + - References + - SVG + - TopicStub +translation_of: Web/SVG +--- +<div class="callout-box"> + <strong><a href="/en-US/docs/SVG/Tutorial" title="SVG/Tutorial">Getting Started</a></strong><br> + This tutorial will help get you started using SVG.</div> +<p><strong>Scalable Vector Graphics (SVG)</strong> is an <a href="/en-US/docs/XML" title="XML">XML</a> markup language for describing two-dimensional vector graphics. SVG is essentially to graphics what XHTML is to text.</p> +<p>SVG is similar in scope to Adobe's proprietary Flash technology, but what distinguishes SVG from Flash is that it is a <a href="http://www.w3.org/Graphics/SVG/">W3C recommendation</a> (i.e., a standard) and that it is XML-based as opposed to a closed binary format. It is explicitly designed to work with other <a href="http://www.w3.org/">W3C</a> standards such as <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/DOM" title="DOM">DOM</a> and <a href="http://www.w3.org/AudioVideo/">SMIL</a>.</p> +<div class="cleared row topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Documentation">Documentation</h2> + <dl> + <dt> + <a href="/en-US/docs/Web/SVG/Element">SVG element reference</a></dt> + <dd> + Get details about each SVG element.</dd> + <dt> + <a href="/en-US/docs/Web/SVG/Attribute">SVG attribute reference</a></dt> + <dd> + Get details about each SVG attribute.</dd> + <dt> + <a href="/en-US/docs/DOM/DOM_Reference#SVG_interfaces">SVG DOM interface reference</a></dt> + <dd> + Get details about the whole SVG DOM API.</dd> + <dt> + Enhance HTML content</dt> + <dd> + SVG works together with HTML, CSS and JavaScript. Use SVG to enhance a regular HTML page or web application.</dd> + <dt> + SVG in Mozilla</dt> + <dd> + Notes and information on how SVG is implemented in Mozilla. + <ul> + <li><a href="/en-US/docs/SVG_in_Firefox">How much SVG is implemented in Firefox</a></li> + <li><a href="/en-US/docs/Web/SVG/Tutorial">Tutorial for how to use </a></li> + <li><a href="/en-US/docs/SVG_In_HTML_Introduction">SVG in XHTML</a></li> + </ul> + </dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/SVG">View All...</a></span></p> + <h2 class="Community" id="Community">Community</h2> + <ul> + <li>View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> + </ul> + <h2 class="Tools" id="Tools">Tools</h2> + <ul> + <li><a href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li> + <li><a href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a> (Discontinued)</li> + <li><a href="/en-US/docs/tag/SVG:Tools" title="tag/SVG:Tools">More Tools...</a></li> + <li>Other resources: <a href="/en-US/docs/XML">XML</a>, <a href="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/HTML/Canvas">Canvas</a></li> + </ul> + </div> + <div class="section"> + <h2 class="Related_Topics" id="Examples">Examples</h2> + <ul> + <li>Google <a href="http://maps.google.com">Maps</a> (route overlay) & <a href="http://docs.google.com">Docs</a> (spreadsheet charting)</li> + <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG bubble menus</a></li> + <li><a href="http://jwatt.org/svg/authoring/">SVG authoring guidelines</a></li> + <li>An overview of the <a href="/en-US/docs/Mozilla_SVG_Project">Mozilla SVG Project</a></li> + <li><a href="/en-US/docs/SVG/FAQ" title="SVG/FAQ">Frequently asked questions</a> regarding SVG and Mozilla</li> + <li>Slides and demos from talk on <a href="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml">SVG and Mozilla</a> at SVG Open 2009</li> + <li><a href="/en-US/docs/SVG/SVG_as_an_Image">SVG as an image</a></li> + <li><a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SVG animation with SMIL</a></li> + <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG art gallery</a></li> + <li>More samples (<a href="http://croczilla.com/bits_and_pieces/svg/samples">SVG Samples croczilla.com</a>, <a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li> + </ul> + <h3 id="Animation_and_interactions">Animation and interactions</h3> + <p>Like HTML, SVG has a document model (DOM), events and is accessible from JavaScript. This allows developers to create rich animations and interactive images.</p> + <ul> + <li>Some real eye-candy SVG at <a href="http://svg-wow.org/">svg-wow.org</a></li> + <li>Firefox extension (<a href="http://schepers.cc/grafox/">Grafox</a>) to add a subset of SMIL animation support</li> + <li>Interactive <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a> manipulation</li> + <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using SVG's <code>foreignObject</code></li> + </ul> + <h3 id="Mapping_charting_games_3D_experiments">Mapping, charting, games & 3D experiments</h3> + <p>While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.</p> + <ul> + <li><a href="http://www.codedread.com/yastframe.php">Tetris</a></li> + <li><a href="https://web.archive.org/web/20131019072450/http://www.treebuilder.de/svg/connect4.svg" title="Archive link provided because source now requires authentication.">Connect 4</a></li> + <li><a href="http://www.carto.net/papers/svg/us_population/index.html">US population map</a></li> + <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">3D box</a> & <a href="http://www.treebuilder.de/default.asp?file=206524.xml">3D boxes</a></li> + <li><a href="http://jvectormap.com/">jVectorMap</a> (interactive maps for data visualization)</li> + </ul> + </div> +</div> +<p> </p> diff --git a/files/fa/web/svg/tutorial/index.html b/files/fa/web/svg/tutorial/index.html new file mode 100644 index 0000000000..7767ffd448 --- /dev/null +++ b/files/fa/web/svg/tutorial/index.html @@ -0,0 +1,38 @@ +--- +title: SVG Tutorial +slug: Web/SVG/Tutorial +translation_of: Web/SVG/Tutorial +--- +<p dir="RTL">گرافیک برداری مقیاس پذیر <span dir="LTR">SVG</span> گویشی (نسخه خاصی از) <span dir="LTR">W3C XML</span> برای نشانه گذاری گرافیک (تصاویر) می باشد.</p> +<p>Scalable Vector Graphics, <a href="/en-US/Web/SVG" title="en-US/Web/SVG">SVG</a>, is a W3C XML dialect to mark up graphics. It is partially implemented in Firefox, Opera, WebKit browsers, Internet Explorer and other browsers.</p> +<p>This tutorial aims to explain the internals of SVG and is packed with technical details. If you just want to draw beautiful images, you might find more useful resources at <a class="external" href="http://inkscape.org/doc/" title="http://inkscape.org/doc/">Inkscape's documentation page</a>. Another good introduction to SVG is provided by the W3C's <a class="external" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG Primer</a>.</p> +<div class="note"> + The tutorial is in an early stage of development. If you're able, please help out by chipping in and writing a paragraph or two. Extra points for writing a whole page!</div> +<h5 id="Introducing_SVG_from_Scratch">Introducing SVG from Scratch</h5> +<ul> + <li><a href="/en-US/Web/SVG/Tutorial/Introduction" title="en-US/Web/SVG/Tutorial/Introduction">Introduction</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Getting_Started" title="en-US/Web/SVG/Tutorial/Getting_Started">Getting Started</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Positions" title="en-US/Web/SVG/Tutorial/Positions">Positions</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Basic_Shapes" title="en-US/Web/SVG/Tutorial/Basic_Shapes">Basic Shapes</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Paths</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Fills_and_Strokes" title="en-US/Web/SVG/Tutorial/Fills_and_Strokes">Fills and Strokes</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Gradients" title="en-US/Web/SVG/Tutorial/Gradients">Gradients</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Patterns" title="en-US/Web/SVG/Tutorial/Patterns">Patterns</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Texts" title="en-US/Web/SVG/Tutorial/Texts">Texts</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Basic_Transformations" title="en-US/Web/SVG/Tutorial/Basic_Transformations">Basic Transformations</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Clipping_and_masking" title="en-US/Web/SVG/Tutorial/Clipping_and_masking">Clipping and masking</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Other_content_in_SVG" title="en-US/Web/SVG/Tutorial/Other content in SVG">Other content in SVG</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Filter_effects" title="en-US/Web/SVG/Tutorial/Filter effects">Filter effects</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/SVG_fonts" title="en-US/Web/SVG/Tutorial/SVG fonts">SVG fonts</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/SVG_Image_Tag" title="en-US/Web/SVG/Tutorial/SVG Image Tag">SVG Image tag</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Tools_for_SVG" title="en-US/Web/SVG/Tutorial/Tools_for_SVG">Tools for SVG</a></li> +</ul> +<p>The following topics are more advanced and hence should get their own tutorials.</p> +<h5 id="Scripting_SVG_with_JavaScript">Scripting SVG with JavaScript</h5> +<p>TBD</p> +<h5 id="SVG_filters_tutorial">SVG filters tutorial</h5> +<p>TBD</p> +<h5 id="Animations_with_SMIL_in_SVG">Animations with SMIL in SVG</h5> +<p>TBD</p> +<h5 id="Creating_fonts_in_SVG">Creating fonts in SVG</h5> +<p>TBD</p> diff --git a/files/fa/web/svg/tutorial/introduction/index.html b/files/fa/web/svg/tutorial/introduction/index.html new file mode 100644 index 0000000000..609d506200 --- /dev/null +++ b/files/fa/web/svg/tutorial/introduction/index.html @@ -0,0 +1,45 @@ +--- +title: معرفی SVG +slug: Web/SVG/Tutorial/Introduction +translation_of: Web/SVG/Tutorial/Introduction +--- +<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p> + +<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right;"></p> + +<p dir="rtl">SVG یگ زبان نشانه گذاری مبتنی بر XML و شبیه به XHTML است که برای طراحی گرافیکی استفاده میشود مانند تصاویری که سمت راست میبینید.با استفاده از آن هم می توان تصاویری متشکل از خطوط و اشکال هندسی متفاوت ساخت هم تصاویری که به اصطلاح <a href="https://fa.wikipedia.org/wiki/%DA%AF%D8%B1%D8%A7%D9%81%DB%8C%DA%A9_%D8%B4%D8%B7%D8%B1%D9%86%D8%AC%DB%8C">گرافیک شطرنجی</a> خوانده می شوند ویا حتی ترکیبی از هر دو. این نوع تصاویر و اجزایشان میتوانند تبدیل شوند یا با هم مخلوط شوند یا حتی فیلترسازی (فیلتر ها در فتوشاپ یا css) شده تا ظاهرشان به کلی تغییر کند.</p> + +<p dir="rtl">SVG حدود سال های 1999 بعد از چندین رقابت فرمت ها(زبان های دیگر مبتنی بر XML) به <a href="https://w3.org">W3C </a>ارسال شد و از تصویب رسمی و کامل باز ماند. با اینکه این وضع برای مدت کوتاهی بود باز هم پشتیبانی مرورگر ها به کندی صورت میگرفت به همین دلیل استفاده گسترده ای از SVG در فضای وب نمیشود(این آمار مربوط به سال 2009 است اکنون یعنی در سال 2016 از SVG برای ساخت وبسایت ها و وب اپلیکیشن ها استفاده فراوانی می شود).</p> + +<p>Even the implementations that are available often are not as fast as competing technologies like <a href="/en-US/HTML/Canvas" title="en-US/HTML/Canvas">HTML5 Canvas</a> or Adobe Flash as a full application interface. SVG does offer benefits over both implementations, some of which include having a <a href="/en-US/docs/Web/API">DOM interface</a> available for it, and not requiring third-party extensions. Whether or not to use it often depends on your specific use case.</p> + +<h3 id="Basic_ingredients">Basic ingredients</h3> + +<p><a href="/en-US/docs/Web/HTML">HTML</a> provides elements for defining headers, paragraphs, tables, and so on. In much the same way SVG provides elements for circles, rectangles, and simple and complex curves. A simple SVG document consists of nothing more than the {{ SVGElement('svg') }} root element and several basic shapes that build a graphic together. In addition there is the {{ SVGElement('g') }} element, which is used to group several basic shapes together.</p> + +<p>Starting from there, the SVG image can become arbitrarily complex. SVG supports gradients, rotations, filter effects, animations, interactivity with JavaScript, and so on. But all these extra features of the language rely on this relatively small set of elements to define the graphic area.</p> + +<h3 id="Before_you_start" name="Before_you_start">Before you start</h3> + +<p>There are a number of drawing applications available such as <a class="external" href="http://www.inkscape.org/">Inkscape</a> which are free and use SVG as their native file format. However, this tutorial will rely on the trusty XML or text editor (your choice). The idea is to teach the internals of SVG to those who want to understand it, and that is best done by dirtying your hands with a bit of markup. You should note your final goal though. Not all SVG viewers are equal and so there is a good chance that something written for one app will not display exactly the same in another, simply because they support different levels of the SVG specification or another specification that you are using along with SVG (that is, <a href="/en-US/JavaScript" title="en-US/JavaScript">JavaScript</a> or <a href="/en-US/CSS" title="en-US/CSS">CSS</a>).</p> + +<p>SVG is supported in all modern browsers and even a couple versions back in some cases. A fairly complete browser support table can be found on <a href="http://caniuse.com/svg">Can I use</a>. Firefox has supported some SVG content since version 1.5, and that support level has been growing with each release since. Hopefully, along with the tutorial here, MDN can help developers keep up with the differences between Gecko and some of the other major implementations.</p> + +<p>Before starting you should have a basic understanding of XML or another markup language such as <abbr title="HyperText Markup Language">HTML</abbr>. If you are not too familiar with XML, here are some guidelines to keep in mind:</p> + +<ul> + <li>SVG elements and attributes should all be entered in the case shown here since XML is case-sensitive (unlike HTML).</li> + <li>Attribute values in SVG must be placed inside quotes, even if they are numbers.</li> +</ul> + +<p>SVG is a huge specification. This tutorial attempts to cover the basics. Once you are familiar you should be able to use the <a href="/en-US/SVG/Element" title="en-US/SVG/Element">Element Reference</a> and the <a href="/en-US/docs/DOM/DOM_Reference#SVG_interfaces" title="en-US/SVG/Interface">Interface Reference</a> to find out anything else you need to know.</p> + +<h3 id="Flavors_of_SVG">Flavors of SVG</h3> + +<p>Since becoming a recommendation in 2003, the most recent "full" SVG version is 1.1. It builds on top of SVG 1.0, but adds more modularization to ease implementation. <a href="http://www.w3.org/TR/SVG/">The second edition of SVG 1.1</a> became a Recommendation in 2011. "Full" SVG 1.2 was meant to be the next major release of SVG. It was dropped for the upcoming <a href="http://www.w3.org/TR/SVG2/">SVG 2.0</a>, which is under heavy development right now and follows a similar approach to CSS 3 in that it splits components in several loosely coupled specifications.</p> + +<p>Apart from the full SVG recommendations, the working group at the W3C introduced SVG Tiny and SVG Basic in 2003. These two profiles are aimed mainly at mobile devices. The first, SVG Tiny, should yield graphic primitives for small devices with low capabilities. SVG Basic offers many features of full SVG, but doesn't include the ones which are hard to implement or heavy to render (like animations). In 2008, SVG Tiny 1.2 became a W3C Recommendation.</p> + +<p>There were plans for an SVG Print specification, which would add support for multiple pages and enhanced color management. This work was discontinued.</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p> diff --git a/files/fa/web/tutorials/index.html b/files/fa/web/tutorials/index.html new file mode 100644 index 0000000000..0015a91882 --- /dev/null +++ b/files/fa/web/tutorials/index.html @@ -0,0 +1,161 @@ +--- +title: آموزش +slug: Web/Tutorials +translation_of: Web/Tutorials +--- +<div class="note"> +<ol> + <li><span style="display: none;"> </span><span style="display: none;"> </span>لینکها در این صفحه به آموزشها و مواد آموزشی متنوعی هدایت شده است. چه شما تازه شروع کرده باشید، در حال یادگیری اصول اولیه هستید، یا در توسعه وب قدیمی هستید، در اینجا منابع مفیدی را برای تمرین بهتر میتوانید پیدا کنید. این منابع توسط شرکتهای متفکر رو به جلو و توسعه دهندگان وبی که استانداردهای باز و بهترین تمرینها برای توسعه دهندگان وب را پذیرفتهاند ساخته شده است وآن منابع آماده یا برای ترجمه اجازه داده میشود، از طریق گواهینامه محتوای باز مانند Creative Commons.</li> +</ol> + +<dl> +</dl> +</div> + +<div class="row topicpage-table" dir="rtl"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">آموزش HTML</h2> + +<h3 id="سطح_مقدماتی">سطح مقدماتی</h3> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML/Introduction">معرفی به HTML</a></dt> + <dd>HTML چی است، چه انجام میدهد، تاریخچه آن بهصورت خلاصه، ساختار یک سند HTML شبیه چی است. مقالاتی که در ادامه آمده است هر کدام در هر بخش خاص از HTML نگاهی عمیقتر به آن دارند.</dd> + <dt><a href="http://reference.sitepoint.com/html/page-structure" rel="external">ساختار بنیادی یک صفحه وب</a> (اطلاعیه)</dt> + <dd>یاد بگیرید چطور المانهای HTML با همدیگر مناسب هستند برای تصویری بزرگتر.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Element">MDN HTML Element Reference</a></dt> + <dd>یک مرجع وسیع برای المانهای HTML، و مرورگرهای متفاوت چطور از آنها پشتیبانی میکنند.</dd> + <dt><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML Challenges</a> (Wikiversity)</dt> + <dd>این چالش را برای صاف کردن مهارتهای HTML خود بکار ببرید (برای مثال، "آیا من باید یک المان <h2> یا یک المان <strong> را بکار ببرم؟")، روی نشانه گذاری معنی دار تمرکز کنید.</dd> + <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt> + <dd>Code Avengers یک سرگرمی است، راه مؤثری برای یادگیری کد نرم افزارهای تحت وب و بازیها باHTML، CSS، و JavaScript.</dd> +</dl> + +<h3 id="سطح_پیشرفته">سطح پیشرفته</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">نکاتی برای نوشتن بارگذاری سریع صفحات HTML </a></dt> + <dd>بهینه سازی صفحات وب برای فراهم کردن پاسخگویی بیشتر سایت برای بازدید کنندگان و کاهش بارگذاری روی سرور وب و ارتباط اینترنت .</dd> + <dt><a href="http://www.html5rocks.com/tutorials/" rel="external">HTML5 Tutorials</a> (HTML5 Rocks)</dt> + <dd>یک تور راهنما از طریق کدی که از قابلیتهای HTML5 استفاده میکند.</dd> + <dt><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">Semantics in HTML5</a> (A List Apart)</dt> + <dd>یادگیری نشانه گذاری معنی دار که قابل توسعه است و به عقب- و به جلو-همخوانی دارد.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">Canvas Tutorial</a></dt> + <dd>یاد بگیرید چطور گرافیک را با استفاده از اسکریپت نویسی المان canvas رسم کنید.</dd> + <dt><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></dt> + <dd>مقالههایی در مورد استفاده HTML5 همین حالا.</dd> + <dt><a href="http://www.elated.com/articles/html5-audio/" rel="external">The Joy of HTML5 Audio</a> (Elated)</dt> + <dd>یادبگیرید چطور از المان صوتی HTML تا صداها را به سادگی در صفحات وب خود جایگذاری کنید. خیلی از نمونه کدها در آموزش گنجانده شده است.</dd> +</dl> + +<h2 class="Documentation" id="Documentation" name="Documentation">آموزش Javascript</h2> + +<h3 id="سطح_مقدماتی_2">سطح مقدماتی</h3> + +<dl> + <dt><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</dt> + <dd>Codecademy یک راه ساده برای یادگیری چگونگی کد با جاوا اسکریپت است. این برنامه تعاملی است و شما میتوانید با دوستانتان آنرا انجام دهید.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Getting_Started">Getting Started with JavaScript</a></dt> + <dd>جاوا اسکریپت چی هست و چطور به شما کمک میکند؟</dd> + <dt><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" rel="external">JavaScript Best Practices</a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" title="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a>(WebPlatform.org)</dt> + <dd>در مورد برخی از واضح (یا نه خیلی) واضح از بهترین تمرینها یاد بگیرید وقتی که جاوا اسکریپت می نویسید.</dd> + <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt> + <dd>Code Avengers یک سرگرمی است، راه مؤثری برای یادگیری کد نرم افزارهای تحت وب و بازیها باHTML، CSS، و JavaScript.</dd> + <dt><a href="http://codecombat.com/#">CodeCombat</a> (codecombat.com)</dt> + <dd>CodeCombat یک بازی است تا به شما جاوا اسکریپت آموزش دهد. منبع باز است.</dd> +</dl> + +<h3 id="سطح_میانی">سطح میانی</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/A_re-introduction_to_JavaScript">A Re-Introduction to JavaScript</a></dt> + <dd>یک روکش از زبان برنامه نویسی جاوا اسکریپت که به توسعه دهندگان سطح میانی کمک میکند.</dd> + <dt><a href="http://eloquentjavascript.net/contents.html" rel="external">Eloquent JavaScript</a></dt> + <dd>یک راهنمای جامع برای متدولوژیهای پیشرفته و میانی جاوا اسکریپت.</dd> + <dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (Addy Osmani)</dt> + <dd>یک معرفی به اساس الگوهای طراحی جاوا اسکریپت.</dd> + <dt><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">The JavaScript Programming Language</a> (YUI Blog)</dt> + <dd>Douglas Crockford زبان را مانند چیزی که امروز است کاوش کرده است، و چگونه بهدست میآمد.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></dt> + <dd>یادگیری در مورد مدل آبجکتی جاوا اسکریپت.</dd> +</dl> +</div> + +<div class="section"> +<h3 id="سطح_پیشرفته_2">سطح پیشرفته</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide">JavaScript Guide</a></dt> + <dd>یک راهنمای جامع، بهروز شده منظم از جاوا اسکریپت برای همه سطوح از آموزش از مبتدی تا پیشرفته.</dd> + <dt><a href="http://ejohn.org/apps/learn/" rel="external">Learning Advanced JavaScript</a> (John Resig)</dt> + <dd>راهنمای John Resig برای جاوا اسکریپت پیشرفته.</dd> + <dt><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">Introducing the JavaScript DOM</a> (Elated)</dt> + <dd>مدل شیء سند چی است، و چرا مفید است؟ This article gives you a gentle introduction to this powerful JavaScript feature.</dd> + <dt><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external">An Inconvenient API: The Theory of the DOM</a> (YUI Blog)</dt> + <dd>Douglas Crockford explains the Document Object Model.</dd> + <dt><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">Advanced JavaScript</a> (YUI Blog)</dt> + <dd>Douglas Crockford looks closely at code patterns from which JavaScript programmers can choose in authoring their applications.</dd> + <dt><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></dt> + <dd>Documentation of the most quirky parts of JavaScript.</dd> + <dt><a href="http://webcache.googleusercontent.com/search?q=cache:CJYRO48hw9EJ:stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs" rel="external">Which JavaScript Framework?</a> (StackOverflow)</dt> + <dd>Advice on choosing a JavaScript framework.</dd> + <dt><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external">Non-Blocking JavaScript Downloads</a> (YUI Blog)</dt> + <dd>Tips on improving the download performance of pages containing JavaScript.</dd> + <dt><a href="http://shichuan.github.io/javascript-patterns" rel="external">Javascipt Patterns</a></dt> + <dd>A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM.</dd> +</dl> + +<h2 class="Documentation" id="Documentation" name="Documentation">CSS tutorials</h2> + +<h3 id="Introductory_level">Introductory level</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started">CSS Getting Started</a></dt> + <dd>This tutorial introduces you to Cascading Style Sheets (CSS). It guides you through the basic features of CSS with practical examples that you can try for yourself on your own computer.</dd> + <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">CSS Selector Classes</a> (Wikiversity)</dt> + <dd>What are classes in CSS?</dd> + <dt><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">External CSS</a> (Wikiversity)</dt> + <dd>Using CSS from an external style sheet.</dd> + <dt><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external">Adding a Touch of Style</a> (W3C)</dt> + <dd>A brief beginner's guide to styling web pages with CSS.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Common_CSS_Questions">Common CSS Questions</a></dt> + <dd>Common questions and answers for beginners.</dd> + <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt> + <dd>Code Avengers is the fun, effective way to learn to code web apps and games with HTML, CSS, and JavaScript.</dd> + <dt><a href="http://techstream.org/Web-Design/CSS-selectors" title="http://codeavengers.com/">CSS Selectors</a> (TechStream.org)</dt> + <dd>Quite nice and detailed overview of CSS selectors.</dd> +</dl> + +<h3 id="Intermediate_level">Intermediate level</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">CSS Reference</a></dt> + <dd>Complete reference to CSS, with details on support by Firefox and other browsers.</dd> + <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS Challenges</a> (Wikiversity)</dt> + <dd>Flex your CSS skills, and see where you need more practice.</dd> + <dt><a href="http://www.html.net/tutorials/css/" rel="external">Intermediate CSS Concepts</a> (HTML.net)</dt> + <dd>Grouping, pseudo-classes, and more.</dd> + <dt><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">CSS Positioning 101</a> (A List Apart)</dt> + <dd>Using positioning for standards-compliant, table-free layout.</dd> + <dt><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">Progressive Enhancement with CSS</a> (A List Apart)</dt> + <dd>Integrate progressive enhancement into your web pages with CSS.</dd> + <dt><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Fluid Grids</a> (A List Apart)</dt> + <dd>Design layouts that fluidly resize with the browser window, while still using a typographic grid.</dd> +</dl> + +<h3 id="Advanced_level">Advanced level</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transforms">Using CSS Transforms</a></dt> + <dd>Apply rotation, skewing, scaling, and translation using CSS.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_transitions">CSS Transitions</a></dt> + <dd>CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly.</dd> + <dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Quick Guide to Implement Web Fonts with @font-face</a> (HTML5 Rocks)</dt> + <dd>The @font-face feature from CSS3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way.</dd> + <dt><a href="http://davidwalsh.name/starting-css" rel="external">Starting to Write CSS</a> (David Walsh)</dt> + <dd>An introduction to tools and methodologies to write more succinct, maintainable, and scalable CSS.</dd> +</dl> +</div> +</div> + +<p dir="rtl"> </p> diff --git a/files/fa/web/جاوااسکریپت/index.html b/files/fa/web/جاوااسکریپت/index.html new file mode 100644 index 0000000000..1de3deb24e --- /dev/null +++ b/files/fa/web/جاوااسکریپت/index.html @@ -0,0 +1,129 @@ +--- +title: جاوااسکریپت +slug: Web/جاوااسکریپت +tags: + - JavaScript + - Landing + - NeedsTranslation + - TopicStub +--- +<div class="callout-box"><strong><a href="/fa/docs/Web/JavaScript/A_re-introduction_to_JavaScript">یک معرفی مجدد برای جاوااسکریپت</a></strong><br> +یک بررسی کلی برا آنهایی که <em>فکر میکنند</em> در مورد جاوااسکریپت میدانند</div> + +<p dir="rtl">{{JsSidebar}}</p> + +<p dir="rtl"><strong>JavaScript</strong><sup>®</sup> (اغلب به <strong>JS</strong> مخفف میشود) سبک، مفسر، زبان شیگرا شده با <a href="https://en.wikipedia.org/wiki/First-class_functions" title="https://en.wikipedia.org/wiki/First-class_functions">first-class functions</a>، به عنوان زبان اسکریپت نویسی برای صفحات وب شناخته شده است، اما <a class="external" href="http://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">در خیلی از محیطهای غیر مرورگری</a> مانند <a class="external" href="http://nodejs.org/">node.js</a> یا <a href="http://couchdb.apache.org">Apache CouchDB</a> نیز استفاده شده است. زبان اسکریت نویسی آن <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Prototype-based" title="Prototype-based">مبتنی بر نمونه</a> است، <a href="/en-US/docs/multiparadigmlanguage.html" title="/en-US/docs/multiparadigmlanguage.html">چند نمونه</a> که پویا است،<span style="color: rgb(102, 102, 102); line-height: 21px;"> </span><a href="https://en.wikipedia.org/wiki/Type_safety" style="line-height: 21px;" title="Type safety">نوع امن</a><span style="line-height: 1.572;"> و از شی گرایی پشتیبانی میکند، سبک های برنامه نویسی تابعی را دارد. اطلاعات بیشتر را میتوانید از صفحه <a href="/fa/docs/docs/Web/JavaScript/About_JavaScript">درباره جاوااسکریپت</a></span><span style="line-height: 1.572;"> مشاهده نمایید.</span></p> + +<p dir="rtl">استاندارد جاوااسکریپت <a href="/fa/docs/JavaScript/Language_Resources">اکمااسکریپت</a> (<a href="/fa/docs/JavaScript/Language_Resources">ECMAScript</a>) است که از سال ۲۰۱۲ تمامی مرورگرهای مدرن استاندارد اکمااسکریپت نسخه ۵.۱ را به صورت کامل پشتیبانی میکنند، همچنین مرورگرهای قدیمیتر نسخه ۳ از اکمااسکریپت را پشتیبانی میکنند. از ماه June سال ۲۰۱۵ اکمااسکریپت ۶ (ES6) یا همان اکمااسکریپت ۲۰۱۵ (ES2015) مورد قبول واقع شده است. توضیحات تکمیلی در مورد اکمااسکریپت ۶ را می توانید در <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proposals">dedicated wiki</a> مشاهده نمایید.</p> + +<p dir="rtl">این بخش از سایت به زبان جاوااسکریپت اختصاص داده شده است، قسمتهایی که مختص به صفحات وب، یا دیگر محیطهای میزبانی نیست. برای اطلاعات در مورد APIهای خاص برای صفحات وب، لطفا <a href="/fa/docs/DOM">DOM</a> را ببینید. در مورد اینکه چگونه DOM وJavaScript با همدیگر مناسب هستند در <a href="/fa/docs/Gecko_DOM_Reference/Introduction#DOM_and_JavaScript">مرجع DOM</a> اطلاعات بیشتری را بخوانید.</p> + +<p dir="rtl">JavaScript به صورت <strong>«جاواسکریپت»</strong> خوانده میشود، ولی در فارسی به صورت <strong>«جاوااسکریپت»</strong> ترجمه میشود و اگر به صورت «جاوا اسکریپت» ترجمه شود اشتباه است چون دو کلمه جدا از هم نیست و اگر به صورت دو کلمه جدا نوشته شود خطلاهای نگارشی ایجاد میشود، به طور مثال ممکن است کلمه جاوا در انتهای خط و کلمه اسکریپت در ابتدای خط بعدی نوشته شود.</p> + +<div class="row topicpage-table" dir="rtl"> +<div class="section"> +<h2 class="Documentation" id="مستندات">مستندات</h2> + +<dl> + <dt><a href="/fa/docs/Web/JavaScript/Guide">راهنمای جاوااسکریپت</a></dt> + <dd>اگر شما در جاوااسکریپت تازهکار هستید، باید این راهنما را بخوانید.</dd> + <dt><a href="/fa/docs/Web/JavaScript/Reference">مرجع جاوااسکریپت</a></dt> + <dd>این مرجع جاوااسکریپت شامل مستندات کاملی برای جاوااسکریپت نسخه ۱.۵ و بهروزرسانیهای آن است.</dd> +</dl> + +<h3 id="مقالات_معرفی">مقالات معرفی</h3> + +<dl> + <dt><a href="/fa/docs/Web/JavaScript/JavaScript_technologies_overview">نمای کلی تکنولوژیهای جاوااسکریپت</a></dt> + <dd>آشنایی با چشم انداز جاوااسکریپت برای مرورگر</dd> +</dl> + +<h3 id="مقالات_پیشرفته">مقالات پیشرفته</h3> + +<dl> + <dt><a href="/fa/docs/Web/JavaScript/Data_structures">ساختارهای دادهای جاوااسکریپت</a></dt> + <dd>نمای کلی ساختارهای دادهای قابل دسترس در جاپااسکریپت</dd> + <dt><a href="/fa/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">وراثت و زنجیره نمونه</a></dt> + <dd>توضیح ارثبری مبتنی بر نمونه که بهصورت گستردهای اشتباده و ناچیز شمرده شده است</dd> +</dl> + +<h3 id="مقالات_دیگر">مقالات دیگر</h3> + +<dl> + <dt><a href="/fa/docs/Web/Guide/HTML/Canvas_tutorial">آموزش بوم نقاشی</a></dt> + <dd><canvas> یک المان HTML5 است که برای رسم گرافیکها با استفاده از اسکریپت نویسی استفاده میشود. آن میتواند، برای مثال برای رسم گرافیکها، ترکیب عکس و یا انجام ساده (و نه خیلی ساده) انیمیشنها استفاده شود.</dd> + <dt><a href="/fa/docs/Web/JavaScript/Language_Resources">مراجع زبان جاوااسکریپت</a></dt> + <dd>شرح زبان جاوااسکریپت استاندارد.</dd> + <dt><a class="external" href="http://msdn.microsoft.com/en-us/library/ff405926.aspx">مستندات پشتیبانی استانداردهای اینترنت اکسپلورر</a></dt> + <dd>مایکروسافت مستنداتی منتشر کرده است که "تغییرات، توضیحات، و الحاقیات برخی استانداردهای مورد تایید پشتیبانی شده توسط اینترنت اکسپلورر." را شرح میدهد، بعضی از آنها مربوط به جاوااسکریپت هستند:</dd> + <dd> + <ul> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff520996.aspx">[MS-ES3]: Internet Explorer ECMA-262 ECMAScript Language Specification Standards Support Document </a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff521046.aspx">[MS-ES3EX]: Microsoft JScript Extensions to the ECMAScript Language Specification Third Edition </a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff960769.aspx">[MS-ES5]: Internet Explorer ECMA-262 ECMAScript Language Specification (Fifth Edition) Standards Support Document </a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff955363.aspx">[MS-ES5EX]: Internet Explorer Extensions to the ECMA-262 ECMAScript Language Specification (Fifth Edition)</a></li> + </ul> + </dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/JavaScript">View All...</a></span></p> +</div> + +<div class="section"> +<h2 class="Tools" id="ابزارها_منابع_پیشرفته">ابزارها & منابع پیشرفته</h2> + +<ul> + <li><a href="/fa/docs/Tools">ابزارهای توسعه فایرفاکس</a> - ابزارهای عالی تعبیه شده در فایرفاکس.</li> + <li><a href="http://koding.com">Koding</a> پلت فرم توسعه آنلاین با پشتیبانی جاوااسکریپت</li> + <li><a href="http://www.learnstreet.com/">LearnStreet</a> - آموزشها و تمرینهای عملی رایگان آنلاین.</li> + <li><a href="http://www.codecademy.com/">Codecademy</a> - دوره جاوااسکریپت رایگان با مشکلات تعاملی</li> + <li><a href="http://codeschool.com">Code School </a>- یادگیری بوسیله انجام دادن، چندین دوره جاو.ا اسکریپت</li> + <li><a href="http://frontendmasters.com/" title="http://frontendmasters.com/">Frontend Masters</a> - فیلمهای کارگاه آموزشی جاوااسکریپت و توسعه وب نهایی</li> + <li><a href="http://www.letscodejavascript.com/" title="http://www.letscodejavascript.com/">Let’s Code: Test-Driven JavaScript</a> - سریهای ضبط خیلی دقیق صفحه، توسعه حرفهای جاوااسکریپت</li> + <li><a class="link-https" href="https://github.com/rwldrn/idiomatic.js">Idiomatic.js</a> - اصول نوشتن جاوااسکریپت استوار، اصطلاحی</li> + <li><a href="/en-US/docs/JavaScript/Memory_Management">Memory Management in JavaScript</a> . نمای کلی از چگونگی عملکرد حافظه در جاوااسکریپت</li> + <li><a class="external" href="http://www.getfirebug.com/">Firebug</a> - اشکالزدایی و پروفایلینگ جاوااسکریپت</li> + <li><a href="/en-US/docs/Venkman">Venkman</a> - دیباگر جاوااسکریپت</li> + <li><a href="/en-US/docs/JavaScript/Shells">JavaScript Shells</a> - تست قطعه کدهای کوچک</li> + <li><a class="external" href="http://jshint.com">JSHint</a> - ابزاری که در تشخیص خطا و مشکلات بالقوه در کد جاوااسکریپت شما کمک میکند</li> + <li><a class="external" href="http://www.jslint.com/lint.html">JSLint</a> - چک کننده نحو، در برابر اعمال بد هشدار میدهد</li> + <li><a class="external" href="http://usejsdoc.org/">JSDoc</a> - تولید مستندات از کد</li> + <li><a class="external" href="http://online-marketing-technologies.com/tools/javascript-redirection-generator.html" title="JavaScript Redirect">JavaScript Redirect</a> - ابزار تغییر مسیر پیشرفته جاوااسکریپت</li> + <li><a class="external" href="http://www.aptana.com">Aptana Studio</a> - <span id="result_box" lang="fa"><span class="hps">IDE</span> <span class="hps">متن باز</span> <span class="hps">با</span> پشتیبانی <span class="hps">آژاکس</span> <span class="hps">و</span> <span class="hps">جاوااسکریپت</span> <span class="atn hps">(</span><span>بر اساس</span> eclipse<span>)</span></span></li> + <li><a class="external" href="http://netbeans.org/features/javascript/">Netbeans</a> - IDE متن باز شامل پشتیبانی پیچیده از جاوااسکریپت</li> + <li><a class="external" href="http://www.eclipse.org/downloads/packages/eclipse-ide-javascript-web-developers/heliossr1">Eclipse</a> - IDE متن باز شامل جعبه ابزار توسعه جاوااسکریپت</li> + <li><a class="external" href="http://www.c9.io">Cloud9 IDE</a> - IDE متن باز که در مرورگر اجرا شده با قابلیت پشتیبانی از جاوااسکریپت و Node.js</li> + <li><a class="external" href="http://prettydiff.com/">Pretty Diff </a>- یک ابزار متفاوت برای مقایسه کد خرد شده با کد معمولی</li> + <li><a href="http://www.objectplayground.com/" title="http://www.objectplayground.com/">Object Playground</a> - ابزاری برای درک شیگرایی جاوااسکریپت</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434">Extension Developer's Extension</a> - محیط و شل JS را ارایه میدهد</li> + <li><a href="http://boilerplatejs.org/">BoilerplateJS</a> - مرجع معماری برای پروژههای جاوااسکریپت در مقیاس بزرگ</li> + <li><a href="http://www.jsfiddle.net/">JSFiddle</a> - مورد استفاده برای آزمایش و اصلاح وب سایت با جاوااسکریپت آنلاین. </li> + <li><a href="/fa/docs/JavaScript/Other_JavaScript_tools">دیگر ابزارهای جاوااسکریپت</a></li> +</ul> + +<p><span class="alllinks"><a href="/en-US/docs/tag/JavaScript:Tools">نمایش همه...</a></span></p> + +<h2 class="Community" id="Other resources" name="Other resources">دیگر منابع</h2> + +<dl> + <dt><a class="external" href="http://bonsaiden.github.com/JavaScript-Garden">JavaScript Garden</a></dt> + <dd>سایتی با اطلاعات مفید در مورد قطعات داخلیتر جاوااسکریپت.</dd> + <dt><a class="link-https" href="https://github.com/bebraw/jswiki/wiki">JSWiki</a></dt> + <dd>یک ویکی مبتنی بر Githubکه منابع و کتابخانهها را ایندکس گذاری کرده است.</dd> + <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> + <dd>یک سایت همکاری ساخته و نگهداری شده Q&A و میتوانید برای جواب سوال خودرا در آن جستجو کنید. اگر جواب سوال خودرا پیدا نکردید میتوانید سوال خودرا در آنجا مطرح کنید.</dd> + <dt><a href="http://pineapple.io/resources/tagged/javascript?type=tutorials&sort=all_time">Pineapple · JavaScript</a></dt> + <dd>یک پایگاه داده بزرگ از آموزش و منابع حال حاضر جاوااسکریپت.</dd> + <dt><a href="http://lifeofjs.com">Life of JavaScript</a></dt> + <dd>منابع عالی در مورد جاوااسکریپت شامل کتاب، ارایهها، فیلمها، فیدها، سایتها، کتابخانهها، محیطهای کاری، ابزارها که در یکجا جمع آموری شده است.</dd> +</dl> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">موضوعات مرتبط</h2> + +<ul> + <li><a href="/fa/docs/AJAX">AJAX</a>, <a href="/fa/docs/DOM">DOM</a>, <a class="internal" href="/fa/docs/JavaScript/Server-Side_JavaScript">Server-Side JavaScript</a>, <a href="/fa/docs/DHTML">DHTML</a>, <a href="/fa/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, <a href="/fa/docs/HTML/Canvas">Canvas</a>, <a href="/fa/docs/JavaScript/JQuery">JQuery</a></li> +</ul> +</div> +</div> + +<p dir="rtl" lang="en-US">*JavaScript is a trademark or registered trademark of Oracle in the U.S. and other countries.</p> diff --git a/files/fa/web_development/historical_artifacts_to_avoid/index.html b/files/fa/web_development/historical_artifacts_to_avoid/index.html new file mode 100644 index 0000000000..114b822af2 --- /dev/null +++ b/files/fa/web_development/historical_artifacts_to_avoid/index.html @@ -0,0 +1,43 @@ +--- +title: عادتهای بدی که باید از آنها دوری کنید +slug: Web_development/Historical_artifacts_to_avoid +translation_of: Learn/HTML/Introduction_to_HTML +--- +<h2 dir="rtl" id="مقدمه">مقدمه</h2> +<p dir="rtl">بسیاری از افراد CSS، HTML و JavaScript را با مشاهدهی کد صفحههای مختلف و copy/paste کردن آنها آموختهاند حال آنکه سایت اصلی ممکن است به درستی این کدها را به کار نبرده باشد. این یعنی افراد شیوههای کدزنی که در گذشته لازم اما امروزه از کار افتاده حساب میشوند را برای خود نهادینه کردهاند. این صفحه سعی در ارایهی فهرستی از این شیوههای کد زنی که به اصطلاح به آنها bad practices گفته میشود، دارد.</p> +<h2 dir="rtl" id="نوع_سند">نوع سند</h2> +<p dir="rtl">نزدیک به ۱۰، <a href="http://en.wikipedia.org/wiki/Document_Type_Declaration" title="http://en.wikipedia.org/wiki/Document_Type_Declaration">نوع سند HTML یا XHTML</a> وجود دارد که تفاوتهای بسیار جزیی با یکدیگر دارند که در پارهای از مواقع قابل مقایسه نیستند. توصیه میشود که شما از نوع سند HTML5 استفاده کنید:</p> +<pre class="brush:html" dir="ltr"><!DOCTYPE html></pre> +<p dir="rtl">که باعث میشود حالت استانداردی در تمامی مرورگرها (حتی اینترنت اکسپلورر ۶) به وجود آید.</p> +<h2 dir="rtl" id="عنصر_<meta>_و_صفت_charset">عنصر <meta> و صفت <code>charset</code></h2> +<p dir="rtl">جستجوی کد صفحه با استفاده از قطعه کد زیر یک روش معمول است:</p> +<pre class="brush:html" dir="ltr"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></pre> +<p dir="rtl">اگرچه تمامی مرورگرها (از جمله اینترنت اکسپلورر ۶) به یک صورت عمل میکنند اگر کد بالا را به صورت زیر بنویسیم:</p> +<pre class="brush:html" dir="ltr"><meta charset="UTF-8" /> +</pre> +<p dir="rtl">این دانش با استفاده از <a href="http://blog.whatwg.org/the-road-to-html-5-character-encoding" title="http://blog.whatwg.org/the-road-to-html-5-character-encoding">مهندسی معکوس</a> و <a href="http://lists.w3.org/Archives/Public/public-html/2007Jul/0550.html#replies" title="http://lists.w3.org/Archives/Public/public-html/2007Jul/0550.html#replies">آزمایشهای عملی</a> به دست آمده است، پس از آن استفاده کنید.</p> +<h2 dir="rtl" id="توضیحات_HTML_در_اسکریپتها">توضیحات HTML در اسکریپتها</h2> +<p dir="rtl">زمانی بود که بعضی مرورگرها برچسب {{ HTMLElement("script") }} را تشخیص میدادند و بعضی خیر که این امر منجر به تفسیر خطوط اسکریپت به عنوان متن خام میشد. ایدهی طبیعی این بود که اسکریپتها را به عنوان توضیحات در HTML قرار دهند که این روش باعث میشد مرورگرهایی که اسکریپت را اجرا میکنند به کار خود ادامه داده و آنهایی که برچسب اسکریپت را متوجه نمیشوند محتویاتش را در نظر نگیرند.</p> +<p dir="rtl">در این دوره بود که ما از چیزهایی استفاده میکردیم شبیه به:</p> +<pre class="brush:html" dir="ltr"><script> +<!-- +var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); +document.write(unescape("%3Cscript src='" + gaJsHost + "bla.com/ga.js' type='text/javascript'%3E%3C/script%3E")); +//--> +</script> +</pre> +<p dir="rtl">یا:</p> +<pre><script type="text/javascript"> +<!--//--><![CDATA[//><!-- +Blabla.extend(MyFramework.settings, { "basePath": "/" }); +//--><!]]> +</script> +</pre> +<p dir="rtl">تمامی اینها امروزه به درد نخور هستند - حتی مرورگرهایی که اسکریپت را اجرا نمیکنند به سادگی برچسب {{ HTMLElement("script") }} را نادیده میگیرند. اسکریپتهای خود را فقط بین برچسب آغازین و پایانی {{ HTMLElement("script") }} بنویسید. بهتر آن است که اسکریپت خود را به عنوان یک فایل جداگانه با صفت {{ htmlattrxref("src", "script") }} در نظر گرفته؛ همچنین میتوانید صفتهای {{ htmlattrxref("async", "script") }} و {{ htmlattrxref("defer", "script") }} موجود در HTML5 را در نظر بگیرید.</p> +<h2 dir="rtl" id="عنصرهایی_که_از_این_پس_نباید_استفاده_شوند">عنصرهایی که از این پس نباید استفاده شوند</h2> +<h3 dir="rtl" id="font">font</h3> +<p dir="rtl">برچسب font دیگر نباید استفاده شود. CSS برای کنترل نحوهی نمایش عنصرها، که با برچسب ID یا Class مشخص میشوند، ترجیح داده میشود.</p> +<h3 dir="rtl" id="b_i_u">b, i, u</h3> +<p dir="rtl">اینها عنصرهای بحثبرانگیزی هستند بنابراین سعی کنید از {{ HTMLElement("strong") }}، {{ HTMLElement("em") }} یا {{ HTMLElement("span") }} و (<code>text-decoration:underline</code>) در CSS استفاده کنید.</p> +<p dir="rtl">در مورد کاربرد این عنصرها با احتیاط برخورد کنید. بعضی توصیه میکنند که {{ HTMLElement("b") }} را با {{ HTMLElement("strong") }} و {{ HTMLElement("i") }} را با {{ HTMLElement("em") }} به سادگی جایگزین کنید در حالی که <strong>این یک توصیهی بد است</strong>. {{ HTMLElement("strong") }} برای عبارتی که تاکید بسیار لازم دارد مورد نیاز است اما {{ HTMLElement("em") }} برای تاکید کمتر است. برای نمونه، ایدهی بدی است که از {{ HTMLElement("em") }} برای ایجاد متن کج استفاده شود؛ متنی که قصد داریم کج نشان دهیم با استفاده از <code>font-style:italic</code> در CSS قابل دسترس است. به همین صورت، عنوان کتابها یا آثار هنری سابق بر این با استفاده از متن کج به وجود میآمدند، اما استفاده از عنصر {{ HTMLElement("cite") }} برای این گونه موارد منجر به تولید کدی معنایی نسبت به {{ HTMLElement("em") }} یا {{ HTMLElement("i") }} میشود.</p> +<p></p> diff --git a/files/fa/web_development/index.html b/files/fa/web_development/index.html new file mode 100644 index 0000000000..6f1cac663e --- /dev/null +++ b/files/fa/web_development/index.html @@ -0,0 +1,97 @@ +--- +title: Web Development +slug: Web_Development +tags: + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide +--- +<p><strong>Web development</strong> comprises all aspects of developing a web site or web application.</p> +<p>Learn how to create anything from a simple web site to complex, highly interactive web sites featuring the latest Web technologies by perusing the articles you'll find here.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation_topics">Documentation topics</h2> + <h3 id="Technologies">Technologies</h3> + <dl> + <dt> + <a class="internal" href="/en-US/docs/Web_Development/Introduction_to_Web_development" title="en-US/docs/Web Development/Introduction to Web development">Introduction to Web development</a></dt> + <dd> + A guide to learning how to develop for the Web.</dd> + <dt> + <a class="internal" href="/en-US/docs/HTML" rel="internal">HTML</a></dt> + <dd> + HyperText Markup Language is the basic language for creating web pages and other documents displayed in a browser.</dd> + <dt> + <a class="internal" href="/en-US/docs/CSS" rel="internal">CSS</a></dt> + <dd> + Cascading Style Sheets make it possible to do advanced layout and page design on the Web.</dd> + <dt> + <a class="internal" href="/en-US/docs/JavaScript" rel="internal">JavaScript</a></dt> + <dd> + JavaScript is the most commonly used scripting language for developing web applications; it's also used in the development of Mozilla-based software.</dd> + <dt> + <a class="internal" href="/en-US/docs/DOM" rel="internal">DOM</a></dt> + <dd> + The Document Object Model is an API for HTML and XML documents, providing a structural representation of the document that you can modify in order to alter its visual presentation.</dd> + <dt> + <a class="internal" href="/en-US/docs/AJAX" rel="internal">AJAX</a></dt> + <dd> + Asynchronous JavaScript and XML isn't so much a technology as a combination of technologies; using JavaScript and other modern web technologies together to create dynamic web applications.</dd> + <dt> + <a class="internal" href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a></dt> + <dd> + Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.</dd> + <dt> + <a class="internal" href="/en-US/docs/SVG" rel="internal">SVG</a></dt> + <dd> + Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.</dd> + </dl> + <h3 id="Strategies">Strategies</h3> + <dl> + <dt> + <a class="internal" href="/en-US/docs/Web_Standards" title="en-US/docs/Web Standards">Web standards</a></dt> + <dd> + Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.</dd> + <dt> + <a href="/en-US/docs/Web_Development/Responsive_Web_design" title="en-US/docs/Web development/Responsive Web design">Responsive Web design</a></dt> + <dd> + Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.</dd> + <dt> + <a href="/en-US/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">Writing forward-compatible websites</a></dt> + <dd> + Best practices for creating websites that do not break when browsers are updated.</dd> + <dt> + <a href="/en-US/docs/Web_Development/Mobile" title="/en-US/docs/Web development/Mobile">Mobile Web development</a></dt> + <dd> + Developing sites for be viewed on mobile devices involves some unique approaches that may not be familiar to those accustomed to developing for desktop browsers.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mozilla_Web_Developer_FAQ" title="en-US/docs/Mozilla Web Developer FAQ">Mozilla Web developer FAQ</a></dt> + <dd> + Frequently asked questions from Web developers. With answers!</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Web_Development" title="en-US/docs/tag/Web_Development">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community">Community</h2> + <ul> + <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">Mozilla Hacks blog</a></li> + <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT Working Group</a></li> + <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li> + </ul> + <h2 class="Tools" id="Tools">Tools</h2> + <ul> + <li><a href="/en-US/docs/Tools" title="en-US/docs/Tools">Main Tools page</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a></li> + <li><a href="/en-US/docs/Venkman" rel="internal">Venkman</a>, the JavaScript debugger</li> + <li><a href="/en-US/docs/DOM_Inspector" rel="internal" title="en-US/docs/DOM Inspector">DOM Inspector</a></li> + <li><a href="/en-US/docs/Tools/Scratchpad" title="en-US/docs/Tools/Scratchpad">Scratchpad</a></li> + </ul> + <p><span class="alllinks"><a href="/en-US/docs/tag/Web_Development:Tools" title="en-US/docs/tag/Web_Development:Tools">View All...</a></span></p> + </td> + </tr> + </tbody> +</table> diff --git a/files/fa/توسعه_وب/index.html b/files/fa/توسعه_وب/index.html new file mode 100644 index 0000000000..e2ef826821 --- /dev/null +++ b/files/fa/توسعه_وب/index.html @@ -0,0 +1,11 @@ +--- +title: توسعه وب +slug: توسعه_وب +tags: + - Web Development + - توسعه وب +--- +<p><strong>توسعه وب</strong> شامل توسعه دادن همه ی نمودهای یک وب سایت یا برنامه ی وب است.</p> +<p>یاد بگیرید هر چیزی را چگونه بسازید ، از یک وب سایت ساده تا پیچیده ، وب سایت های تعاملی بلندپایه آخرین تکنولوژی های وب را با بررسی کردن مقاله هایی که اینجا پیدا می کنید نمایان می کنند.</p> +<table style="width: 100%;"> <tbody> <tr> <td> <h2 id="سرفصل_های_مستندات">سرفصل های مستندات</h2> </td> <td> </td> </tr> <tr> <td> <dl> <dd><strong><a href="/En/Web_Development/Introduction_to_Web_development" title="En/Web_Development/Introduction_to_Web_development">پیشگفتار توسعه وب</a></strong><br> یک راهنما برای یادگرفتن چگونگی توسعه وب.</dd> <dt><a href="/../../../../En/HTML" title="../../../../En/HTML">HTML</a></dt> <dd> HyperText Markup Language زبان پایه ی ساختن صفحات وب و مستندات دیگری که در مرورگر نمایش داده می شوند.</dd> <dt><a href="/../../../../En/CSS" title="../../../../En/CSS">CSS</a></dt> <dd> Cascading Style Sheets لایه بندی حرفه ای و طراحی صفحه را ممکن می سازد.</dd> <dt><a href="/../../../../En/AJAX" title="../../../../En/AJAX">AJAX</a></dt> <dd> Asynchronous JavaScript و XML ; استفاده از JavaScript و تکنولوژی های مدرن دیگر وب با همدیگر برای ساخت صفحات وب پوبا.</dd> </dl> </td> <td> <dl> <dd><strong><a href="/en/Web_Standards" title="en/Web_Standards">استانداردهای وب</a></strong><br> یاد بگیرید چگونه به واسطه سازگاری وب باز بتوانید سایت و یا برنامه برای تعداد زیادی از کاربران بسازید.</dd> <dd><strong><a class="internal" href="../../../../En/DOM" rel="internal">DOM</a></strong><br> Document Object Model یک API برای مستندات HTML و XML ،نمایش ساختمانی سندی که می توانید تغییر دهید برای تغییر ارایه دیداری آن.</dd> <dt><a class="internal" href="/en/XHTML" title="En/XHTML">XHTML</a></dt> <dd> Extensible HyperText Markup Language یک زبان بر پایه XML و شبیه HTML است که سینتکس سخت تری از HTML پیشکش می کند.</dd> <dt><a class="internal" href="../../../../En/SVG" rel="internal">SVG</a></dt> <dd> Scalable Vector Graphics یک زبان نشانه گذاری XML برای توصیف وکتورهای گرافیکی دوبعدی است.</dd> <dt><a href="/en/Web_Development/Responsive_Web_design" title="en/Web development/Responsive Web design">طراحی وب واکنشی</a></dt> <dd> از CSS برای ارایه یک محتوا بر روی همه ی پلتفرم ها ، از گوشی های همراه تا صفحه های عریض ، و نمایشگرهای با رزولوشن بالای رومیزی استفاده کنید.</dd> <dt><a class="internal" href="/en/Mozilla_Web_Developer_FAQ" title="En/Mozilla Web Developer FAQ">پرسش و پاسخ های رایج موزیلا وب</a></dt> <dd>پرسش های متداول پرسیده شده از توسعه دهندگان وب ، به همراه پاسخ!</dd> </dl> </td> </tr> </tbody> +</table> |