{"id":32655,"date":"2025-05-13T23:33:18","date_gmt":"2025-05-14T02:33:18","guid":{"rendered":"https:\/\/mastertrend.info\/?p=32655"},"modified":"2026-04-28T14:50:55","modified_gmt":"2026-04-28T17:50:55","slug":"ilk-web-uygulamanizi-olusturun","status":"publish","type":"post","link":"https:\/\/mastertrend.info\/tr\/crea-tu-primera-app-web\/","title":{"rendered":"\u0130lk web uygulaman\u0131z\u0131 olu\u015fturun ve stres ya\u015famadan programlamada ustala\u015f\u0131n \ud83d\ude80\ud83d\udcbb"},"content":{"rendered":"<h2 class=\"table-content-link\">\u0130lk web uygulaman\u0131z\u0131 olu\u015fturun: notlar + saya\u00e7 kolay ve h\u0131zl\u0131 \ud83d\udcdd\u26a1<\/h2>\n<p>Programlamaya ba\u015flamak, dikkate al\u0131nmas\u0131 gereken \u00e7ok say\u0131da dil, \u00e7er\u00e7eve ve metodoloji olmas\u0131 nedeniyle g\u00f6z korkutucu g\u00f6r\u00fcnebilir. Bazen her \u015feyi bir yapay zekaya devretmek daha kolay g\u00f6r\u00fcnebilir. Merak etme! Web i\u00e7in programlama basit, e\u011flenceli ve hepsinden \u00f6nemlisi tamamen \u00fccretsiz olabilir! \ud83c\udf10\u2728<\/p>\n<h2 id=\"what-you-rsquo-ll-build\">Ne \u0130n\u015fa Edeceksin<\/h2>\n<p>Bu e\u011fitimi takip ederek, metin notlar\u0131n\u0131 saklayan ve karakter ve kelime sayan basit bir web uygulamas\u0131 olu\u015fturacaks\u0131n\u0131z.<\/p>\n<p>Uygulama verileri saklayaca\u011f\u0131 i\u00e7in sayfay\u0131 yeniden y\u00fckledi\u011finizde veya yeniden a\u00e7t\u0131\u011f\u0131n\u0131zda metni hat\u0131rlayacakt\u0131r. Bu, adresler, URL&#039;ler vb. gibi daha sonra ba\u015fvurmak istedi\u011finiz herhangi bir metni kaydetmenin kolay bir yoluna sahip olaca\u011f\u0131n\u0131z anlam\u0131na gelir. \ud83d\udcc4\ud83d\udd17<\/p>\n<figure><picture><source media=\"(min-width: 1024px)\" data-=\"\" \/><source media=\"(min-width: 768px)\" data-=\"\" \/><source media=\"(min-width: 481px)\" data-=\"\" \/><source media=\"(min-width: 0px)\" data-=\"\" \/><img decoding=\"async\" style=\"display: block; height: auto; max-width: 100%;\" src=\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" alt=\"Takvim giri\u015fi ve URL listesi de dahil olmak \u00fczere notlar\u0131 g\u00f6r\u00fcnt\u00fcleyen basit bir metin tabanl\u0131 web uygulamas\u0131na \u00f6rnek.\" width=\"960\" height=\"569\" title=\"\"> <\/picture><\/figure>\n<p>Ayr\u0131ca karakter ve kelimeleri de sayar, bu da dize (metin) i\u015fleme konusunda iyi bir ba\u015flang\u0131\u00e7t\u0131r. Elbette uygulama \u00e7ok basit: ama\u00e7 bu! Ama bu e\u011fitimle, bir web uygulamas\u0131 geli\u015ftirmenin temellerini \u00f6\u011freneceksiniz ve sonra d\u00fcnya sizin i\u00e7in ayaklar\u0131n\u0131z\u0131n alt\u0131nda olacak. \ud83e\uddaa\ud83d\udcbb<\/p>\n<h2 id=\"how-you-rsquo-ll-build-it\">Bunu Nas\u0131l \u0130n\u015fa Edeceksiniz?<\/h2>\n<p>Web uygulamalar\u0131 \u00e7ok \u00e7e\u015fitli olmakla birlikte genellikle \u00fc\u00e7 ana teknolojiyi i\u00e7erirler: HTML, CSS ve JavaScript. Ba\u015flamadan \u00f6nce onlar\u0131n rollerini anlaman\u0131z \u00f6nemlidir. \ud83d\udcda<\/p>\n<ul>\n<li>HTML: K\u00f6pr\u00fc Metni \u0130\u015faretleme Dili, i\u00e7eri\u011finizin yap\u0131s\u0131n\u0131 tan\u0131mlaman\u0131za olanak tan\u0131r. Bununla bir metni anlam\u0131na g\u00f6re i\u015faretleyebilir, \u00f6rne\u011fin bir paragraf, bir ba\u015fl\u0131k veya bir listedeki bir madde olup olmad\u0131\u011f\u0131n\u0131 belirtebilirsiniz.<\/li>\n<li>CSS: Basamakl\u0131 Stil Sayfalar\u0131 i\u00e7eri\u011finizi bi\u00e7imlendirmenize olanak tan\u0131r. Bu dili kullanarak bir paragraf\u0131 ye\u015fil renklendirebilir, t\u00fcm ba\u011flant\u0131lar\u0131n\u0131z\u0131 kal\u0131n yapabilir veya ana makalenizin yan\u0131na bir kenar \u00e7ubu\u011fu yerle\u015ftirebilirsiniz. \ud83c\udfa8<\/li>\n<li>JavaScript: Bu programlama diliyle web sitenize i\u015flevsellik katabilirsiniz. T\u0131kland\u0131\u011f\u0131nda belgenizin baz\u0131 b\u00f6l\u00fcmlerini g\u00f6steren veya gizleyen d\u00fc\u011fmeler kullanabilir veya tam te\u015fekk\u00fcll\u00fc bir kelime i\u015flemci veya video oyunu uygulayabilirsiniz. \ud83c\udfae<\/li>\n<\/ul>\n<p>O <a href=\"https:\/\/web.dev\" target=\"_blank\" rel=\"noopener noreferrer\">web sitesi.dev<\/a> (escrito por miembros del equipo de Chrome) y MDN, la Red de Desarrolladores de Mozilla, son dos excelentes fuentes de informaci\u00f3n sobre tecnolog\u00edas web fundamentales.<\/p>\n<figure><picture><source media=\"(min-width: 1024px)\" data-=\"\" \/><source media=\"(min-width: 768px)\" data-=\"\" \/><source media=\"(min-width: 481px)\" data-=\"\" \/><source media=\"(min-width: 0px)\" data-=\"\" \/><img decoding=\"async\" style=\"display: block; height: auto; max-width: 100%;\" src=\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_798_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" alt=\"HTML, CSS ve JavaScript i\u00e7in \u00f6\u011frenme kaynaklar\u0131n\u0131n bulundu\u011fu web.dev sitesinin ana sayfas\u0131.\" width=\"1388\" height=\"734\" title=\"\"> <\/picture><\/figure>\n<h2 id=\"the-app-structure\">Uygulaman\u0131n Yap\u0131s\u0131<\/h2>\n<p>Olu\u015fturaca\u011f\u0131n\u0131z uygulama \u00fc\u00e7 basit dosyadan olu\u015facak: index.html, styles.css ve script.js. \ud83d\uddc2\ufe0f<\/p>\n<p>Uygulamay\u0131 \u00e7al\u0131\u015ft\u0131rmak i\u00e7in \u00f6zel bir gereksinim yoktur, sadece bir web taray\u0131c\u0131s\u0131na ihtiyac\u0131n\u0131z vard\u0131r. Herhangi bir arka u\u00e7 fonksiyonu bulunmad\u0131\u011f\u0131ndan PHP gibi bir betik diline veya yerel bir web sunucusuna ihtiyac\u0131n\u0131z yoktur. \u0130\u015finiz bitti\u011finde, \u015funu a\u00e7abilirsiniz: <a title=\"Windows 11&#039;de yerel bir Linux web sunucusu nas\u0131l kurulur?\" href=\"https:\/\/mastertrend.info\/tr\/yerel-linux-web-sunucusu\/\" target=\"_blank\" rel=\"noopener\" data-wpil-monitor-id=\"5749\">index.html dosyas\u0131n\u0131 do\u011frudan taray\u0131c\u0131n\u0131zda<\/a> ve her \u015fey yoluna girecek. \ud83d\ude0a<\/p>\n<p>JavaScript&#039;in dosya sistemine eri\u015fememesi nedeniyle, bu uygulaman\u0131n metninizi diskteki belirli bir dosyaya yazmadan kaydetti\u011fini belirtmek \u00f6nemlidir. \u00c7erezlere g\u00fc\u00e7l\u00fc bir alternatif olan Web Storage API&#039;yi kullan\u0131r. \ud83c\udf6a\ud83d\udcbe<\/p>\n<h2 id=\"how-to-build-the-note-taker\">Not Al\u0131c\u0131 Nas\u0131l Olu\u015fturulur<\/h2>\n<p>Ayn\u0131 dizinde a\u015fa\u011f\u0131daki \u00fc\u00e7 dosyay\u0131 olu\u015fturun ve ard\u0131ndan index.html&#039;yi bir web taray\u0131c\u0131s\u0131nda a\u00e7\u0131n. Alternatif olarak, dosyalar\u0131 \u015furadan indirebilirsiniz: <a href=\"https:\/\/github.com\/bobbykjack\/text\" target=\"_blank\" rel=\"noopener\">bu GitHub deposu<\/a>. \ud83d\udce5<\/p>\n<h3 id=\"building-the-structure-with-html\">HTML ile Yap\u0131y\u0131 Olu\u015fturma<\/h3>\n<p>Index.html dosyas\u0131, uygulaman\u0131z\u0131n i\u00e7eri\u011finin yap\u0131s\u0131n\u0131 HTML olarak tan\u0131mlar. Di\u011fer iki dosyaya referanslar ekleyin, b\u00f6ylece bir taray\u0131c\u0131 bunlar\u0131 son \u00fcr\u00fcn i\u00e7in birle\u015ftirebilir.<\/p>\n<p>T\u00fcm HTML belgelerinde oldu\u011fu gibi, en \u00fcst d\u00fczey yap\u0131, meta verileri i\u00e7eren bir ba\u015fl\u0131k b\u00f6l\u00fcm\u00fc ve sayfada g\u00f6r\u00fcnecek ger\u00e7ek i\u00e7eri\u011fi i\u00e7eren bir g\u00f6vde b\u00f6l\u00fcm\u00fc i\u00e7erir:<\/p>\n<pre><code class=\"hljs html\"><span class=\"hljs-meta\">html<\/span>&gt;\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">KAFA<\/span>&gt;<\/span>\r\n    ...\r\n<span class=\"hljs-tag\"><span class=\"hljs-name\">KAFA<\/span>&gt;<\/span><\/code><\/pre>\n<p><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">v\u00fccut<\/span>&gt;<\/span><br \/>\n&#8230;<br \/>\n<span class=\"hljs-tag\"><span class=\"hljs-name\">v\u00fccut<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\"><span class=\"hljs-name\">html<\/span>&gt;<\/span><\/p>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<p>Ba\u015fl\u0131ktaki meta veri \u00e7ok k\u0131sad\u0131r; sadece bir sayfa ba\u015fl\u0131\u011f\u0131 (taray\u0131c\u0131n\u0131z\u0131n ba\u015fl\u0131k \u00e7ubu\u011funda g\u00f6r\u00fcn\u00fcr) ve styles.css dosyas\u0131na bir referans vard\u0131r:<\/p>\n<pre><code class=\"hljs html\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ba\u015fl\u0131k<\/span>&gt;<\/span>Metin<span class=\"hljs-tag\"><span class=\"hljs-name\">ba\u015fl\u0131k<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ba\u011flant\u0131<\/span> <span class=\"hljs-attr\">ilgili<\/span>=<span class=\"hljs-string\">&quot;stil sayfas\u0131&quot;<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;stilller.css&quot;<\/span> \/&gt;<\/span>\r\n<\/code><\/pre>\n<p>V\u00fccut daha karma\u015f\u0131kt\u0131r, ancak yaln\u0131zca birka\u00e7 \u00f6nemli par\u00e7a vard\u0131r:<\/p>\n<pre><code class=\"hljs html\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">b\u00f6l\u00fcm<\/span> <span class=\"hljs-attr\">\u0130D<\/span>=<span class=\"hljs-string\">&quot;tezgah&quot;<\/span>&gt;<\/span>\r\n        kelimeler: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a\u00e7\u0131kl\u0131k<\/span> <span class=\"hljs-attr\">\u0130D<\/span>=<span class=\"hljs-string\">&quot;kelimeler&quot;<\/span>&gt;<\/span>0<span class=\"hljs-tag\"><span class=\"hljs-name\">a\u00e7\u0131kl\u0131k<\/span>&gt;<\/span>\r\n        \/ karakterler: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a\u00e7\u0131kl\u0131k<\/span> <span class=\"hljs-attr\">\u0130D<\/span>=<span class=\"hljs-string\">&quot;karakterler&quot;<\/span>&gt;<\/span>0<span class=\"hljs-tag\"><span class=\"hljs-name\">a\u00e7\u0131kl\u0131k<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\"><span class=\"hljs-name\">b\u00f6l\u00fcm<\/span>&gt;<\/span><\/code><\/pre>\n<p><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">metin alan\u0131<\/span> <span class=\"hljs-attr\">\u0130D<\/span>=<span class=\"hljs-string\">&quot;metin&quot;<\/span> <span class=\"hljs-attr\">otomatik odaklama<\/span>=<span class=\"hljs-string\">\u00ab1\u00bb<\/span>&gt;<\/span><span class=\"hljs-tag\"><span class=\"hljs-name\">metin alan\u0131<\/span>&gt;<\/span><\/p>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<p><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">senaryo<\/span> <span class=\"hljs-attr\">kaynak<\/span>=<span class=\"hljs-string\">\u00abscript.js\u00bb<\/span>&gt;<\/span><span class=\"hljs-tag\"><span class=\"hljs-name\">senaryo<\/span>&gt;<\/span><\/p>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<p>Div \u00f6\u011fesi uygulaman\u0131n kelime ve karakter say\u0131s\u0131n\u0131 i\u00e7erir. Web uygulamas\u0131n\u0131n en \u00fcst\u00fcnde yer alacak ve metin her de\u011fi\u015fti\u011finde g\u00fcncellenecektir.<\/p>\n<p>\u0130\u015flem i\u00e7in hayati \u00f6nem ta\u015f\u0131yan id niteliklerine dikkat edin. Bir kimli\u011fin de\u011feri benzersiz olmal\u0131d\u0131r, b\u00f6ylece uygulama bunu belirli bir \u00f6\u011feyi tan\u0131mlamak i\u00e7in kullanabilir. Bunu yapmak, bu \u00f6\u011feleri bi\u00e7imlendirmemize ve i\u015flevsellik eklerken bunlar\u0131 hedeflememize yard\u0131mc\u0131 olabilir.<\/p>\n<p>Textarea, taray\u0131c\u0131ya basit metinler yazman\u0131za olanak tan\u0131yan yerle\u015fik bir form \u00f6\u011fesidir. Otomatik odaklama \u00f6zelli\u011fi sayesinde sayfa y\u00fcklendi\u011fi anda yazmaya haz\u0131r olacaks\u0131n\u0131z. Son olarak sayfa, script.js adl\u0131 javascript dosyas\u0131na referans veriyor.<\/p>\n<p>Bu noktada index.html dosyas\u0131n\u0131 bir taray\u0131c\u0131da a\u00e7abilirsiniz. \u015eimdilik bir i\u015fe yaramayacak ve hatta pek de iyi g\u00f6r\u00fcnmeyecek, ancak temel \u00f6zelliklerin bekledi\u011finiz gibi \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olmak i\u00e7in uygulaman\u0131z\u0131 her a\u015famada test etmeniz faydal\u0131 olacakt\u0131r.<\/p>\n<figure><picture><source media=\"(min-width: 1024px)\" data-=\"\" \/><source media=\"(min-width: 768px)\" data-=\"\" \/><source media=\"(min-width: 481px)\" data-=\"\" \/><source media=\"(min-width: 0px)\" data-=\"\" \/><img decoding=\"async\" style=\"display: block; height: auto; max-width: 100%;\" src=\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_678_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" alt=\"Varsay\u0131lan taray\u0131c\u0131 stilleriyle not alma web uygulamas\u0131n\u0131n g\u00f6r\u00fcn\u00fcm\u00fc, her \u015feyin sol \u00fcst k\u00f6\u015fede gruplanm\u0131\u015f \u015fekilde g\u00f6sterilmesi.\" width=\"960\" height=\"569\" title=\"\"> <\/picture><\/figure>\n<h3 id=\"making-things-look-good-with-css\">CSS ile Onlar\u0131 G\u00fczel G\u00f6r\u00fcn\u00fcr Hale Getirmek<\/h3>\n<p>CSS, web sayfan\u0131z\u0131n baz\u0131 b\u00f6l\u00fcmlerini hedefleyerek ve font-size ve background-color gibi \u00f6zellikler i\u00e7in de\u011ferler belirleyerek bu b\u00f6l\u00fcmleri bi\u00e7imlendirmenize olanak tan\u0131r. Bu \u00f6rnek uygulaman\u0131n aray\u00fcz\u00fc \u00e7ok basit oldu\u011fundan \u00e7ok rafine bir tasar\u0131ma ihtiyac\u0131 yok. Ancak, biraz stil katarak p\u00fcr\u00fczleri giderebiliriz. \ud83c\udfa8\u2728<\/p>\n<p>\u00d6ncelikle g\u00f6vdeyi \u015fekillendirerek genel tasar\u0131m\u0131 belirleyin:<\/p>\n<pre><code class=\"hljs css\"><span class=\"hljs-selector-tag\">v\u00fccut<\/span> {\r\n    <span class=\"hljs-selector-tag\">marj<\/span>: 0;\r\n    <span class=\"hljs-selector-tag\">dolgu<\/span>: 0;\r\n    <span class=\"hljs-selector-tag\">g\u00f6r\u00fcnt\u00fclemek<\/span>: <span class=\"hljs-selector-tag\">\u0131zgara<\/span>;\r\n    <span class=\"hljs-selector-tag\">min-y\u00fckseklik<\/span>: 100<span class=\"hljs-selector-tag\">vh<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u0131zgara-\u015fablonu-sat\u0131rlar\u0131<\/span>: <span class=\"hljs-selector-tag\">min-i\u00e7erik<\/span> 1<span class=\"hljs-selector-tag\">Fr<\/span>;\r\n}\r\n<\/code><\/pre>\n<p>Este CSS utiliza la disposici\u00f3n en cuadr\u00edcula para posicionar los conteos de palabras y caracteres en una fila estrecha sobre el textarea. La propiedad grid-template-rows especifica que la fila del conteo debe ser lo m\u00e1s corta posible (min-content) y el textarea debe llenar el espacio restante (1fr).<\/p>\n<p>Kar\u015f\u0131 sat\u0131r\u0131n, metnin geri kalan\u0131ndan farkl\u0131la\u015fmas\u0131n\u0131 sa\u011flayan temel bir stili vard\u0131r; \u00f6zellikle de arka plan\u0131 arac\u0131l\u0131\u011f\u0131yla:<\/p>\n<pre><code class=\"hljs css\"><span class=\"hljs-selector-id\"># sayac\u0131<\/span> {\r\n    <span class=\"hljs-selector-tag\">yaz\u0131 tipi ailesi<\/span>: <span class=\"hljs-selector-tag\">sans serif<\/span>;\r\n    <span class=\"hljs-selector-tag\">arka plan rengi<\/span>: <span class=\"hljs-selector-id\">#f7f7f7<\/span>;\r\n    <span class=\"hljs-selector-tag\">metin hizalama<\/span>: <span class=\"hljs-selector-tag\">merkez<\/span>;\r\n    <span class=\"hljs-selector-tag\">Geni\u015flik<\/span>: 100%;\r\n    <span class=\"hljs-selector-tag\">dolgu<\/span>: 0<span class=\"hljs-selector-class\">.5em<\/span> 0;\r\n}\r\n<\/code><\/pre>\n<p>Son olarak textarea, nefes alacak kadar alana sahip, okunakl\u0131 metin g\u00f6r\u00fcnt\u00fcleyecek \u015fekilde tasarlanm\u0131\u015ft\u0131r. Say\u0131mlar\u0131 metinden ay\u0131ran \u00e7izgi asl\u0131nda bu metin alan\u0131n\u0131n \u00fcst s\u0131n\u0131r\u0131d\u0131r.<\/p>\n<pre><code class=\"hljs css\"><span class=\"hljs-selector-tag\">metin alan\u0131<\/span> {\r\n    <span class=\"hljs-selector-tag\">Geni\u015flik<\/span>: 100%;\r\n    <span class=\"hljs-selector-tag\">y\u00fckseklik<\/span>: 100%;\r\n    <span class=\"hljs-selector-tag\">yaz\u0131 tipi boyutu<\/span>: 16<span class=\"hljs-selector-tag\">pt<\/span>;\r\n    <span class=\"hljs-selector-tag\">dolgu<\/span>: 1<span class=\"hljs-selector-tag\">i\u00e7inde<\/span>;\r\n    <span class=\"hljs-selector-tag\">kutu boyutland\u0131rma<\/span>: <span class=\"hljs-selector-tag\">s\u0131n\u0131r kutusu<\/span>;\r\n    <span class=\"hljs-selector-tag\">ana hatlar<\/span>: 0;\r\n    <span class=\"hljs-selector-tag\">s\u0131n\u0131r<\/span>: <span class=\"hljs-selector-tag\">hi\u00e7biri<\/span>;\r\n    <span class=\"hljs-selector-tag\">s\u0131n\u0131r \u00fcst\u00fc<\/span>: 1<span class=\"hljs-selector-tag\">piksel<\/span> <span class=\"hljs-selector-tag\">sa\u011flam<\/span> <span class=\"hljs-selector-id\">#999<\/span>;\r\n}<\/code><\/pre>\n<figure><picture><source media=\"(min-width: 1024px)\" data-=\"\" \/><source media=\"(min-width: 768px)\" data-=\"\" \/><source media=\"(min-width: 481px)\" data-=\"\" \/><source media=\"(min-width: 0px)\" data-=\"\" \/><img decoding=\"async\" style=\"display: block; height: auto; max-width: 100%;\" src=\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_152_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" alt=\"\u00d6zel stillere sahip not alma uygulamas\u0131, \u00fcstte not \u00e7ubu\u011funu, altta ise tam boyutlu metin alan\u0131n\u0131 g\u00f6r\u00fcnt\u00fcler.\" width=\"960\" height=\"569\" title=\"\"> <\/picture><\/figure>\n<h3 id=\"adding-functionality-with-javascript\">JavaScript ile \u0130\u015flevsellik Ekleme<\/h3>\n<p>Yap\u0131 ve stil yerli yerinde oldu\u011funda, i\u015flevsellik eklemeye haz\u0131rs\u0131n\u0131z: Bu basit uygulaman\u0131n ger\u00e7ekten bir \u015feyler yapmas\u0131n\u0131 sa\u011flayan kod. \ud83d\udee0\ufe0f<\/p>\n<p>En basit kodu yazmaya ba\u015flamadan \u00f6nce, ne yapmas\u0131n\u0131 istedi\u011finizi anlamak iyi bir fikirdir. Bu durumda sadece birka\u00e7 genel gereklilik vard\u0131r:<\/p>\n<ul>\n<li>Girdi\u011finiz metni kaydedin ve gerekti\u011finde yeniden y\u00fckleyin.<\/li>\n<li>Ger\u00e7ek zamanl\u0131 istatistikler sa\u011flamak i\u00e7in karakter ve kelime say\u0131lar\u0131n\u0131 g\u00fcncelleyin. \ud83d\udcca<\/li>\n<\/ul>\n<p>Her iki gereklilik de belgedeki \u00f6\u011felerin g\u00fcncellenmesini gerektirir. Yani betik, getElementById metodunu kullanarak bu d\u00fc\u011f\u00fcmlere ait referanslar\u0131 alarak ba\u015fl\u0131yor:<\/p>\n<pre><code class=\"hljs js\"><span class=\"hljs-keyword\">sabit<\/span> kelimeler = <span class=\"hljs-built_in\">belge<\/span>.getElementById(<span class=\"hljs-string\">&quot;kelimeler&quot;<\/span>);\r\n<span class=\"hljs-keyword\">sabit<\/span> karakterler = <span class=\"hljs-built_in\">belge<\/span>.getElementById(<span class=\"hljs-string\">&quot;karakterler&quot;<\/span>);\r\n<span class=\"hljs-keyword\">sabit<\/span> metin alan\u0131 = <span class=\"hljs-built_in\">belge<\/span>.getElementById(<span class=\"hljs-string\">&quot;metin&quot;<\/span>);\r\n<\/code><\/pre>\n<p>Kelimelerin, karakterlerin ve metinlerin, belgedeki ilgili \u00f6\u011felerin kimlikleri oldu\u011funu ve HTML dosyas\u0131nda id niteli\u011fiyle atand\u0131\u011f\u0131n\u0131 unutmay\u0131n.<\/p>\n<p>Daha sonra, metin de\u011fi\u015fti\u011finde uygulaman\u0131n tepki vermesini sa\u011flamam\u0131z gerekiyor:<\/p>\n<pre><code class=\"hljs js\">textarea.addEventListener(<span class=\"hljs-string\">&quot;giri\u015f&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">i\u015flev<\/span>(<span class=\"hljs-params\">ev<\/span>) <\/span>{ localStorage.setItem(<span class=\"hljs-string\">&quot;metin&quot;<\/span>, ev.hedef.de\u011fer); g\u00fcncelleme_say\u0131mlar\u0131(ev.hedef.de\u011fer); });\r\n<\/code><\/pre>\n<p>Olay dinleyicisi, JavaScript&#039;in belirli bir olay ger\u00e7ekle\u015fti\u011finde otomatik olarak y\u00fcr\u00fctece\u011fi bir fonksiyondur. Bu durumda textarea d\u00fc\u011f\u00fcm\u00fcne &quot;input&quot; olay\u0131 ger\u00e7ekle\u015fti\u011finde \u00e7al\u0131\u015ft\u0131r\u0131lacak bir dinleyici ekliyoruz. Yani birisi textarea ile etkile\u015fime girdi\u011finde.<\/p>\n<p>Daha sonra ev.target.value&#039;dan gelen textarea&#039;n\u0131n g\u00fcncel i\u00e7eri\u011fini kaydetmek i\u00e7in Web Storage API&#039;yi kullan\u0131yoruz. Bu yap\u0131da ev, dinleyiciyi tetikleyen olay\u0131 temsil eden bir nesnedir, ev.target olay\u0131 alan d\u00fc\u011f\u00fcmd\u00fcr ve ev.target.value bu textarea&#039;n\u0131n metnidir.<\/p>\n<p>setItem y\u00f6ntemi iki parametre al\u0131r: Verilerle ili\u015fkilendirilecek bir anahtar ad\u0131 ve depolanacak ger\u00e7ek veriler.<\/p>\n<p>Daha sonra update_counts()&#039;u \u00e7a\u011f\u0131r\u0131p ayn\u0131 metni ge\u00e7iriyoruz. Bu \u00f6zelli\u011fi birazdan a\u00e7\u0131klayaca\u011f\u0131z.<\/p>\n<p>Art\u0131k metni kaydetti\u011fimize g\u00f6re, uygulama a\u00e7\u0131ld\u0131\u011f\u0131nda veya yeniden y\u00fcklendi\u011finde metni tekrar y\u00fcklemek isteyeceksiniz. Bunu ba\u015fka bir dinleyici kullanarak halledebiliriz:<\/p>\n<pre><code class=\"hljs js\"><span class=\"hljs-built_in\">pencere<\/span>.addEventListener(<span class=\"hljs-string\">&quot;y\u00fck&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">i\u015flev<\/span>(<span class=\"hljs-params\">ev<\/span>) <\/span>{\r\n    <span class=\"hljs-keyword\">de\u011fi\u015fken<\/span> metin = localStorage.getItem(<span class=\"hljs-string\">&quot;metin&quot;<\/span>); textarea.value = metin; g\u00fcncelleme_say\u0131s\u0131(metin); });\r\n<\/code><\/pre>\n<p>Bu dinleyici, taray\u0131c\u0131 penceresinin en \u00fcst d\u00fczey g\u00f6sterimi olan pencere nesnesinde olu\u015fan y\u00fckleme olay\u0131n\u0131 i\u015fler. Pencere y\u00fcklendi\u011finde, getItem() \u00e7a\u011fr\u0131s\u0131 yerel depolama alan\u0131ndan depolanan metin de\u011ferini d\u00f6nd\u00fcr\u00fcr. Bu kod daha sonra textarea de\u011ferini y\u00fcklenen metne ayarlar ve yukar\u0131daki dinleyici gibi bu metinle update_counts()&#039;u \u00e7a\u011f\u0131r\u0131r.<\/p>\n<p>Geriye kalan i\u015f update_counts() fonksiyonunda yap\u0131l\u0131r ve \u015fu \u015fekilde g\u00f6r\u00fcn\u00fcr:<\/p>\n<pre><code class=\"hljs js\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">i\u015flev<\/span>\u00a0<span class=\"hljs-title\">g\u00fcncelleme_say\u0131lar\u0131<\/span>(<span class=\"hljs-params\">metin<\/span>) <\/span>{ chars.innerHTML = metin.length; kelimeler.innerHTML = metin.split(<span class=\"hljs-string\">' '<\/span>).uzunluk; }\r\n<\/code><\/pre>\n<p>Textarea&#039;n\u0131n aksine, normal metnin bir value \u00f6zelli\u011fi yoktur, bu y\u00fczden bunun yerine innerHTML \u00f6zelli\u011fini ayarl\u0131yoruz. Bir dizenin length \u00f6zelli\u011fi, bize karakter say\u0131s\u0131n\u0131 veren basit bir salt okunur \u00f6zelliktir.<\/p>\n<p>text.split(&#039; &#039;) dizeyi bo\u015fluk karakterlerinden b\u00f6ler ve sonucu dizelerden olu\u015fan bir dizi olarak d\u00f6nd\u00fcr\u00fcr. Diziler, dizeler gibi, dizideki eleman say\u0131s\u0131n\u0131 veren bir uzunluk \u00f6zelli\u011fine sahiptir.<\/p>\n<p>Ancak bu kodu test ederseniz birka\u00e7 hata fark edebilirsiniz:<\/p>\n<ol>\n<li>Bir sat\u0131rdaki bir kelimeyi tek ba\u015f\u0131na do\u011fru saymayacakt\u0131r, \u00e7\u00fcnk\u00fc etraf\u0131nda bo\u015fluk karakteri yoktur.<\/li>\n<li>Hi\u00e7bir metin olmad\u0131\u011f\u0131nda, b\u00f6lmenin \u00e7al\u0131\u015fma \u015fekli nedeniyle tek bir kelime bildirilecektir.<\/li>\n<\/ol>\n<p>\u0130lk sorunu \u00e7\u00f6zmek i\u00e7in bo\u015fluk yerine d\u00fczenli bir ifade (\\s &quot;bo\u015f karakter&quot; anlam\u0131na gelir) kullanarak b\u00f6lme yapabilirsiniz. \u0130kincisini \u00e7\u00f6zmek i\u00e7in, sonu\u00e7tan bo\u015f dizeleri filtreleyin:<\/p>\n<pre><code class=\"hljs js\">    kelimeler.innerHTML = metin.split(<span class=\"hljs-regexp\">\/\\S\/<\/span>).filtre(<span class=\"hljs-function\"><span class=\"hljs-keyword\">i\u015flev<\/span>(<span class=\"hljs-params\">N<\/span>) <\/span>{ <span class=\"hljs-keyword\">geri d\u00f6nmek<\/span> n != <span class=\"hljs-string\">''<\/span>; }).uzunluk;\r\n<\/code><\/pre>\n<p>Bu sat\u0131r\u0131 tam olarak anlamad\u0131ysan\u0131z, MDN sayfalar\u0131na g\u00f6z at\u0131n. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/split\" target=\"_blank\" rel=\"noopener noreferrer\">b\u00f6lmek<\/a> Ve <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter\" target=\"_blank\" rel=\"noopener noreferrer\">filtre<\/a>.<\/p>\n<figure><picture><source media=\"(min-width: 1024px)\" data-=\"\" \/><source media=\"(min-width: 768px)\" data-=\"\" \/><source media=\"(min-width: 481px)\" data-=\"\" \/><source media=\"(min-width: 0px)\" data-=\"\" \/><img decoding=\"async\" style=\"display: block; height: auto; max-width: 100%;\" src=\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_129_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" alt=\"\u00d6rnek metin i\u00e7eren, do\u011fru karakter ve kelime say\u0131lar\u0131n\u0131 g\u00f6steren web uygulamas\u0131.\" width=\"960\" height=\"569\" title=\"\"> <\/picture><\/figure>\n<hr \/>\n<p>Sadece birka\u00e7 dosyayla bir\u00e7ok kullan\u0131\u015fl\u0131 web uygulamas\u0131 olu\u015fturabilirsiniz. Bu basit not uygulamas\u0131n\u0131 daha fazla i\u015flevsellik eklemek i\u00e7in geni\u015fletebilirsiniz. \u00d6rne\u011fin, \u015funu kullanabilirsiniz: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/location\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"mentions\">pencere.konum \u00f6zelli\u011fi<\/a> localStorage.setItem&#039;a ge\u00e7irdi\u011finiz ad\u0131 de\u011fi\u015ftirerek ge\u00e7erli URL&#039;yi almak ve birden fazla notu desteklemek i\u00e7in. \ud83d\uddd2\ufe0f\ud83c\udf0d<\/p>","protected":false},"excerpt":{"rendered":"<p>\u0130lk web uygulaman\u0131z\u0131 olu\u015fturun ve kelime sayac\u0131yla notlar kaydedin. Kolayca, h\u0131zl\u0131 bir \u015fekilde ve \u00fccretsiz \u00f6\u011frenin! \ud83c\udf10\ud83d\udd8b\ufe0f\u2728<\/p>","protected":false},"author":1,"featured_media":49198,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ai_generated_summary":"","iawp_total_views":39,"jnews-multi-image_gallery":[],"jnews_single_post":[],"jnews_primary_category":[],"jnews_social_meta":[],"jnews_review":[],"enable_review":"","type":"","name":"","summary":"","brand":"","sku":"","good":[],"bad":[],"score_override":"","override_value":"","rating":[],"price":[],"jnews_override_counter":[],"footnotes":""},"categories":[1435],"tags":[1445,1558],"class_list":["post-32655","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","tag-evergreencontent","tag-techtips"],"_links":{"self":[{"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/posts\/32655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/comments?post=32655"}],"version-history":[{"count":0,"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/posts\/32655\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/media\/49198"}],"wp:attachment":[{"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/media?parent=32655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/categories?post=32655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/tags?post=32655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}