{"id":559,"date":"2024-04-09T19:00:43","date_gmt":"2024-04-09T16:00:43","guid":{"rendered":"https:\/\/mudosdigital.com\/tr\/?p=559"},"modified":"2024-04-09T19:16:32","modified_gmt":"2024-04-09T16:16:32","slug":"javascriptte-sinyaller-nedir","status":"publish","type":"post","link":"https:\/\/mudosdigital.com\/tr\/javascriptte-sinyaller-nedir\/","title":{"rendered":"JavaScript&#8217;te sinyaller nedir ve ne i\u00e7in kullan\u0131l\u0131r?"},"content":{"rendered":"\n<p>G\u00fcn\u00fcm\u00fczde web geli\u015ftirme d\u00fcnyas\u0131, kullan\u0131c\u0131larla etkile\u015fim halinde olan, dinamik ve h\u0131zl\u0131 uygulamalar\u0131 gerektiriyor. Bu t\u00fcr uygulamalar\u0131n temelinde, belirli olaylar\u0131 izlemek ve i\u015flemek i\u00e7in kullan\u0131lan ileti\u015fim mekanizmalar\u0131 yatar. \u0130\u015fte tam da bu noktada, JavaScript&#8217;te &#8220;sinyaller&#8221; kavram\u0131 devreye giriyor.<\/p>\n\n\n\n<p>Sinyaller, JavaScript&#8217;te kod par\u00e7alar\u0131 aras\u0131nda ileti\u015fim kurman\u0131n ve belirli olaylar\u0131 tetiklemenin bir yoludur. Bu sinyaller, bir d\u00fc\u011fmeye t\u0131klama gibi kullan\u0131c\u0131 etkile\u015fimlerinden, \u00f6zel mod\u00fcller aras\u0131nda veri al\u0131\u015fveri\u015fine kadar geni\u015f bir yelpazede kullan\u0131labilir. Ancak, bu kavram bazen yeni ba\u015flayanlar i\u00e7in karma\u015f\u0131k g\u00f6r\u00fcnebilir.<\/p>\n\n\n\n<p>JavaScript&#8217;te sinyaller, birden fazla i\u015flevi tek bir olayla ili\u015fkilendirmenize olanak tan\u0131yan bir mekanizmad\u0131r. Bu, olay i\u015fleyicilerini daha mod\u00fcler ve yeniden kullan\u0131labilir hale getirerek kodunuzu organize etmenize ve basitle\u015ftirmenize yard\u0131mc\u0131 olur.<\/p>\n\n\n\n<p>Sinyaller, <code>EventTarget<\/code> aray\u00fcz\u00fc taraf\u0131ndan sa\u011flan\u0131r ve <code>addEventListener()<\/code> ve <code>removeEventListener()<\/code> y\u00f6ntemleri arac\u0131l\u0131\u011f\u0131yla kullan\u0131labilir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sinyalleri Kullanman\u0131n Faydalar\u0131<\/h2>\n\n\n\n<p>Sinyaller, JavaScript uygulamalar\u0131nda olaylar\u0131 dinlemek, i\u015flemek ve ileti\u015fim kurmak i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir mekanizmad\u0131r. Bu mekanizma, kodunuzun mod\u00fcler hale gelmesini sa\u011flar ve farkl\u0131 bile\u015fenler aras\u0131ndaki ba\u011f\u0131ml\u0131l\u0131klar\u0131 azalt\u0131r. Bu sayede, kodun daha okunabilir, bak\u0131m\u0131 daha kolay ve geni\u015fletilebilir hale gelir.<\/p>\n\n\n\n<p>Sinyaller ayn\u0131 zamanda esneklik ve geni\u015fletilebilirlik sunar, bu da uygulaman\u0131z\u0131n gelecekteki de\u011fi\u015fikliklere daha iyi uyum sa\u011flamas\u0131na yard\u0131mc\u0131 olur. Ayr\u0131ca, sinyaller kodun test edilmesini ve hata ay\u0131klanmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r, b\u00f6ylece daha g\u00fcvenilir ve istikrarl\u0131 bir kod taban\u0131 olu\u015fturman\u0131za yard\u0131mc\u0131 olur.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0130lgili<\/strong>: <a href=\"https:\/\/www.dhiwise.com\/post\/how-to-implement-signals-in-javascript-for-event-handling\">A Comprehensive Guide to Using Signals in JavaScript (dhiwise.com)<\/a><\/li>\n<\/ul>\n\n\n\n<p>Sinyaller kullan\u0131c\u0131 etkile\u015fimlerini izlemek ve kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in ideal bir ara\u00e7t\u0131r, b\u00f6ylece daha etkili ve duyarl\u0131 web uygulamalar\u0131 olu\u015fturabilirsiniz. Bu nedenlerden dolay\u0131, sinyaller JavaScript uygulamalar\u0131nda yayg\u0131n olarak kullan\u0131l\u0131r ve kodunuzu daha g\u00fc\u00e7l\u00fc hale getirir.<\/p>\n\n\n<ul class=\"wp-block-latest-posts__list wp-block-latest-posts\"><li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/wordpress-yerel-gelistirme-ortami-docker-ile-adim-adim-rehber\/\">WordPress Yerel Geli\u015ftirme Ortam\u0131 \u2013 Docker ile Ad\u0131m Ad\u0131m Rehber<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/looker-studio-ile-tekil-sayfa-performans-grafigi-olusturma\/\">Looker Studio ile Tekil Sayfa Performans Grafi\u011fi Olu\u015fturma<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/seoda-vektor-nedir-semantik-arama-ve-siralamadaki-rolu\/\">SEO\u2019da Anahtar Kelime Vekt\u00f6rleri ve Semantik Aramadaki Rol\u00fc<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/tiklama-orani-to-nedir-anahtar-kelime-to-artirma-yollari\/\">T\u0131klama Oran\u0131 (TO) Nedir? Anahtar Kelime TO Art\u0131rma Yollar\u0131<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/googlebot-rehberi-nedir-nasil-calisir-ve-sitenizi-nasil-etkiler\/\">Googlebot Rehberi: Nedir, Nas\u0131l \u00c7al\u0131\u015f\u0131r ve Sitenizi Nas\u0131l Etkiler?<\/a><\/li>\n<\/ul>\n\n\n<p>Sinyalleri kullanman\u0131n bir\u00e7ok faydas\u0131 vard\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Kod tekrar\u0131n\u0131 azalt\u0131r:<\/strong> Ayn\u0131 olay i\u015fleyicisini birden fazla kez tan\u0131mlaman\u0131z gerekmez.<\/li>\n\n\n\n<li><strong>Kodunuzu daha mod\u00fcler hale getirir:<\/strong> Olay i\u015fleyicilerini ayr\u0131 mod\u00fcllere veya s\u0131n\u0131flara ay\u0131rabilirsiniz.<\/li>\n\n\n\n<li><strong>Kodunuzu daha test edilebilir hale getirir:<\/strong> Olay i\u015fleyicilerini ayr\u0131 ayr\u0131 test edebilirsiniz.<\/li>\n\n\n\n<li><strong>Kodunuzu daha bak\u0131m\u0131 kolay hale getirir:<\/strong> Olay i\u015fleyicilerini daha kolay ekleyebilir, kald\u0131rabilir ve de\u011fi\u015ftirebilirsiniz.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"If this ships, it will change javascript forever\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/JvE_xQVIFF0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">JavaScript&#8217;te sinyallerin tart\u0131\u015f\u0131ld\u0131\u011f\u0131 bir video i\u00e7eri\u011fi<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Sinyalleri Kullanma \u00d6rne\u011fi<\/h2>\n\n\n\n<p>A\u015fa\u011f\u0131daki \u00f6rnek, bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda bir sinyalin nas\u0131l kullan\u0131labilece\u011fini g\u00f6sterir:<\/p>\n\n\n\n<p>JavaScript<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const button = document.querySelector('button');\n\n\/\/ Bir sinyal olu\u015fturun\nconst signal = new EventTarget();\n\n\/\/ Sinyale bir i\u015flev ekleyin\nsignal.addEventListener('click', () =&gt; {\n  \/\/ \u0130\u015flev kodunuzu buraya ekleyin\n});\n\n\/\/ D\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda sinyali tetikleyin\nbutton.addEventListener('click', () =&gt; {\n  signal.dispatchEvent(new Event('click'));\n});\n<\/code><\/pre>\n\n\n\n<p>Bu \u00f6rnekte, <code>button<\/code> \u00f6\u011fesine t\u0131kland\u0131\u011f\u0131nda <code>signal<\/code> sinyali tetiklenir. Sinyale ba\u011fl\u0131 olan i\u015flev daha sonra y\u00fcr\u00fct\u00fcl\u00fcr.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sinyalleri Kullanman\u0131n Di\u011fer Yollar\u0131<\/h2>\n\n\n\n<p>Sinyalleri kullanman\u0131n bir\u00e7ok ba\u015fka yolu da vard\u0131r. \u00d6rne\u011fin, sinyalleri a\u015fa\u011f\u0131dakiler i\u00e7in kullanabilirsiniz:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Birden fazla bile\u015fenin bir olayla ileti\u015fim kurmas\u0131n\u0131 sa\u011flamak<\/li>\n\n\n\n<li>Bir bile\u015fenin durumunu di\u011fer bile\u015fenlere bildirmek<\/li>\n\n\n\n<li>Bir bile\u015fenin ya\u015fam d\u00f6ng\u00fcs\u00fc olaylar\u0131n\u0131 dinlemek<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Kullan\u0131m senaryolar\u0131<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Kullan\u0131c\u0131 Etkile\u015fimi \u0130zleme ve Tepki Verme<\/h3>\n\n\n\n<p>Web uygulamalar\u0131nda s\u0131kl\u0131kla kullan\u0131c\u0131 etkile\u015fimlerini izlemek ve buna g\u00f6re tepki vermek gerekebilir. \u00d6rne\u011fin, bir kullan\u0131c\u0131 bir d\u00fc\u011fmeye t\u0131klad\u0131\u011f\u0131nda bir i\u015flevi tetiklemek veya bir form g\u00f6nderildi\u011finde do\u011frulama yapmak gibi durumlar bu senaryoya \u00f6rnektir. Bu t\u00fcr etkile\u015fimler genellikle DOM olaylar\u0131 ile y\u00f6netilir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Bir d\u00fc\u011fmeye t\u0131klama olay\u0131n\u0131 dinleme\ndocument.getElementById(\"myButton\").addEventListener(\"click\", function() {\n    console.log(\"Butona t\u0131kland\u0131.\");\n    \/\/ Burada ba\u015fka i\u015flemler yap\u0131labilir\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00d6zel Mod\u00fcl veya Bile\u015fenler Aras\u0131 \u0130leti\u015fim<\/h3>\n\n\n\n<p>B\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalarda, farkl\u0131 mod\u00fcller veya bile\u015fenler aras\u0131nda ileti\u015fim kurmak \u00f6nemlidir. Bu durumda, \u00f6zel olaylar (custom events) veya sinyaller kullan\u0131labilir. \u00d6rne\u011fin, bir t\u0131klama sonras\u0131 bir bile\u015fenin durumunu g\u00fcncellemek veya bir mod\u00fcl\u00fcn di\u011ferine veri iletmek gibi durumlar bu senaryoya \u00f6rnektir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u00d6zel bir olay olu\u015fturma\nconst customEvent = new CustomEvent(\"myCustomEvent\", { detail: { message: \"\u00d6zel bir olay ger\u00e7ekle\u015fti.\" } });\n\n\/\/ Sinyali dinleme\ndocument.addEventListener(\"myCustomEvent\", function(event) {\n    console.log(event.detail.message);\n    \/\/ Burada ba\u015fka i\u015flemler yap\u0131labilir\n});\n\n\/\/ \u00d6zel bir olay\u0131 tetikleme\ndocument.dispatchEvent(customEvent);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Asenkron \u0130\u015flemlerin Y\u00f6netimi<\/h3>\n\n\n\n<p>Asenkron i\u015flemler, \u00f6zellikle a\u011f istekleri veya dosya i\u015flemleri gibi uzun s\u00fcrecek i\u015flemler i\u00e7in kullan\u0131l\u0131r. Bu t\u00fcr i\u015flemlerin tamamlanmas\u0131n\u0131 beklemek veya ba\u015far\u0131s\u0131zl\u0131k durumunda bir hata i\u015flemek i\u00e7in sinyaller (Promise&#8217;ler) kullan\u0131labilir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Asenkron bir i\u015flemi ger\u00e7ekle\u015ftirme (\u00f6rne\u011fin, bir HTTP iste\u011fi)\nconst myPromise = new Promise((resolve, reject) =&gt; {\n    \/\/ \u0130\u015flem ba\u015far\u0131l\u0131\n    resolve(\"\u0130\u015flem ba\u015far\u0131yla tamamland\u0131.\");\n    \/\/ veya i\u015flem ba\u015far\u0131s\u0131z\n    \/\/ reject(\"\u0130\u015flem ba\u015far\u0131s\u0131z oldu.\");\n});\n\n\/\/ Promise'i dinleme\nmyPromise.then((result) =&gt; {\n    console.log(result); \/\/ \u0130\u015flem ba\u015far\u0131yla tamamland\u0131.\n}).catch((error) =&gt; {\n    console.error(error); \/\/ \u0130\u015flem ba\u015far\u0131s\u0131z oldu.\n});<\/code><\/pre>\n\n\n\n<p>Bu senaryolar, JavaScript uygulamalar\u0131nda sinyallerin kullan\u0131m\u0131n\u0131n yayg\u0131n \u00f6rnekleridir ve farkl\u0131 durumlarda uygulanabilirler.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>G\u00fcn\u00fcm\u00fczde web geli\u015ftirme d\u00fcnyas\u0131, kullan\u0131c\u0131larla etkile\u015fim halinde olan, dinamik ve h\u0131zl\u0131 uygulamalar\u0131 gerektiriyor. Bu t\u00fcr uygulamalar\u0131n temelinde, belirli olaylar\u0131 izlemek ve i\u015flemek i\u00e7in kullan\u0131lan ileti\u015fim mekanizmalar\u0131 yatar. \u0130\u015fte tam da bu noktada, JavaScript&#8217;te &#8220;sinyaller&#8221; kavram\u0131 devreye giriyor. Sinyaller, JavaScript&#8217;te kod par\u00e7alar\u0131 aras\u0131nda ileti\u015fim kurman\u0131n ve belirli olaylar\u0131 tetiklemenin bir yoludur. Bu sinyaller, bir d\u00fc\u011fmeye t\u0131klama [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[31,70],"class_list":["post-559","post","type-post","status-publish","format-standard","hentry","category-blog","tag-javascript","tag-javascript-sinyaller"],"_links":{"self":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts\/559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/comments?post=559"}],"version-history":[{"count":2,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts\/559\/revisions"}],"predecessor-version":[{"id":568,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts\/559\/revisions\/568"}],"wp:attachment":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/media?parent=559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/categories?post=559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/tags?post=559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}