İlk web uygulamanızı oluşturun: notlar + sayaç kolay ve hızlı 📝⚡

Programlamaya başlamak, dikkate alınması gereken çok sayıda dil, çerçeve ve metodoloji olması nedeniyle göz korkutucu görünebilir. Bazen her şeyi bir yapay zekaya devretmek daha kolay görünebilir. Merak etme! Web için programlama basit, eğlenceli ve hepsinden önemlisi tamamen ücretsiz olabilir! 🌐✨

Ne İnşa Edeceksin

Bu eğitimi takip ederek, metin notlarını saklayan ve karakter ve kelime sayan basit bir web uygulaması oluşturacaksınız.

Uygulama verileri saklayacağı için sayfayı yeniden yüklediğinizde veya yeniden açtığınızda metni hatırlayacaktır. Bu, adresler, URL'ler vb. gibi daha sonra başvurmak istediğiniz herhangi bir metni kaydetmenin kolay bir yoluna sahip olacağınız anlamına gelir. 📄🔗

Takvim girişi ve URL listesi de dahil olmak üzere notları görüntüleyen basit bir metin tabanlı web uygulamasına örnek.

Ayrıca karakter ve kelimeleri de sayar, bu da dize (metin) işleme konusunda iyi bir başlangıçtır. Elbette uygulama çok basit: amaç bu! Ama bu eğitimle, bir web uygulaması geliştirmenin temellerini öğreneceksiniz ve sonra dünya sizin için ayaklarınızın altında olacak. 🦪💻

Bunu Nasıl İnşa Edeceksiniz?

Web uygulamaları çok çeşitli olmakla birlikte genellikle üç ana teknolojiyi içerirler: HTML, CSS ve JavaScript. Başlamadan önce onların rollerini anlamanız önemlidir. 📚

HTML: Köprü Metni İşaretleme Dili, içeriğinizin yapısını tanımlamanıza olanak tanır. Bununla bir metni anlamına göre işaretleyebilir, örneğin bir paragraf, bir başlık veya bir listedeki bir madde olup olmadığını belirtebilirsiniz.
CSS: Basamaklı Stil Sayfaları içeriğinizi biçimlendirmenize olanak tanır. Bu dili kullanarak bir paragrafı yeşil renklendirebilir, tüm bağlantılarınızı kalın yapabilir veya ana makalenizin yanına bir kenar çubuğu yerleştirebilirsiniz. 🎨
JavaScript: Bu programlama diliyle web sitenize işlevsellik katabilirsiniz. Tıklandığında belgenizin bazı bölümlerini gösteren veya gizleyen düğmeler kullanabilir veya tam teşekküllü bir kelime işlemci veya video oyunu uygulayabilirsiniz. 🎮

O web sitesi.dev (Chrome ekibinin üyeleri tarafından yazılmıştır) ve MDN, Mozilla Geliştirici Ağı, temel web teknolojileri hakkında bilgi almak için iki mükemmel kaynaktır.

HTML, CSS ve JavaScript için öğrenme kaynaklarının bulunduğu web.dev sitesinin ana sayfası.

Uygulamanın Yapısı

Oluşturacağınız uygulama üç basit dosyadan oluşacak: index.html, styles.css ve script.js. 🗂️

Uygulamayı çalıştırmak için özel bir gereksinim yoktur, sadece bir web tarayıcısına ihtiyacınız vardır. Herhangi bir arka uç fonksiyonu bulunmadığından PHP gibi bir betik diline veya yerel bir web sunucusuna ihtiyacınız yoktur. İşiniz bittiğinde, şunu açabilirsiniz: index.html dosyasını doğrudan tarayıcınızda ve her şey yoluna girecek. 😊

JavaScript'in dosya sistemine erişememesi nedeniyle, bu uygulamanın metninizi diskteki belirli bir dosyaya yazmadan kaydettiğini belirtmek önemlidir. Çerezlere güçlü bir alternatif olan Web Storage API'yi kullanır. 🍪💾

Not Alıcı Nasıl Oluşturulur

Aynı dizinde aşağıdaki üç dosyayı oluşturun ve ardından index.html'yi bir web tarayıcısında açın. Alternatif olarak, dosyaları şuradan indirebilirsiniz: bu GitHub deposu. 📥

HTML ile Yapıyı Oluşturma

Index.html dosyası, uygulamanızın içeriğinin yapısını HTML olarak tanımlar. Diğer iki dosyaya referanslar ekleyin, böylece bir tarayıcı bunları son ürün için birleştirebilir.

Tüm HTML belgelerinde olduğu gibi, en üst düzey yapı, meta verileri içeren bir başlık bölümü ve sayfada görünecek gerçek içeriği içeren bir gövde bölümü içerir:

html>
<html>
<KAFA>
    ...
KAFA>

<vücut>
…
vücut>
html>

Başlıktaki meta veri çok kısadır; sadece bir sayfa başlığı (tarayıcınızın başlık çubuğunda görünür) ve styles.css dosyasına bir referans vardır:

    <başlık>Metinbaşlık>
    <bağlantı ilgili="stil sayfası" href="stilller.css" />

Vücut daha karmaşıktır, ancak yalnızca birkaç önemli parça vardır:

    <bölüm İD="tezgah">
        kelimeler: <açıklık İD="kelimeler">0açıklık>
        / karakterler: <açıklık İD="karakterler">0açıklık>
    bölüm>

<metin alanı İD="metin" otomatik odaklama=«1»>metin alanı>

<senaryo kaynak=«script.js»>senaryo>

Div öğesi uygulamanın kelime ve karakter sayısını içerir. Web uygulamasının en üstünde yer alacak ve metin her değiştiğinde güncellenecektir.

İşlem için hayati önem taşıyan id niteliklerine dikkat edin. Bir kimliğin değeri benzersiz olmalıdır, böylece uygulama bunu belirli bir öğeyi tanımlamak için kullanabilir. Bunu yapmak, bu öğeleri biçimlendirmemize ve işlevsellik eklerken bunları hedeflememize yardımcı olabilir.

Textarea, tarayıcıya basit metinler yazmanıza olanak tanıyan yerleşik bir form öğesidir. Otomatik odaklama özelliği sayesinde sayfa yüklendiği anda yazmaya hazır olacaksınız. Son olarak sayfa, script.js adlı javascript dosyasına referans veriyor.

Bu noktada index.html dosyasını bir tarayıcıda açabilirsiniz. Şimdilik bir işe yaramayacak ve hatta pek de iyi görünmeyecek, ancak temel özelliklerin beklediğiniz gibi çalıştığından emin olmak için uygulamanızı her aşamada test etmeniz faydalı olacaktır.

Varsayılan tarayıcı stilleriyle not alma web uygulamasının görünümü, her şeyin sol üst köşede gruplanmış şekilde gösterilmesi.

CSS ile Onları Güzel Görünür Hale Getirmek

CSS, web sayfanızın bazı bölümlerini hedefleyerek ve font-size ve background-color gibi özellikler için değerler belirleyerek bu bölümleri biçimlendirmenize olanak tanır. Bu örnek uygulamanın arayüzü çok basit olduğundan çok rafine bir tasarıma ihtiyacı yok. Ancak, biraz stil katarak pürüzleri giderebiliriz. 🎨✨

Öncelikle gövdeyi şekillendirerek genel tasarımı belirleyin:

vücut {
    marj: 0;
    dolgu: 0;
    görüntülemek: ızgara;
    min-yükseklik: 100vh;
    ızgara-şablonu-satırları: min-içerik 1Fr;
}

Bu CSS şunu kullanır: ızgara düzeni kelime ve karakter sayılarını metin alanının üstünde dar bir satıra yerleştirmek için. grid-template-rows özelliği, count satırının mümkün olduğunca kısa olması gerektiğini (min-content) ve textarea'nın kalan alanı doldurması gerektiğini (1fr) belirtir.

Karşı satırın, metnin geri kalanından farklılaşmasını sağlayan temel bir stili vardır; özellikle de arka planı aracılığıyla:

# sayacı {
    yazı tipi ailesi: sans serif;
    arka plan rengi: #f7f7f7;
    metin hizalama: merkez;
    Genişlik: 100%;
    dolgu: 0.5em 0;
}

Son olarak textarea, nefes alacak kadar alana sahip, okunaklı metin görüntüleyecek şekilde tasarlanmıştır. Sayımları metinden ayıran çizgi aslında bu metin alanının üst sınırıdır.

metin alanı {
    Genişlik: 100%;
    yükseklik: 100%;
    yazı tipi boyutu: 16pt;
    dolgu: 1içinde;
    kutu boyutlandırma: sınır kutusu;
    ana hatlar: 0;
    sınır: hiçbiri;
    sınır üstü: 1piksel sağlam #999;
}

Özel stillere sahip not alma uygulaması, üstte not çubuğunu, altta ise tam boyutlu metin alanını görüntüler.

JavaScript ile İşlevsellik Ekleme

Yapı ve stil yerli yerinde olduğunda, işlevsellik eklemeye hazırsınız: Bu basit uygulamanın gerçekten bir şeyler yapmasını sağlayan kod. 🛠️

En basit kodu yazmaya başlamadan önce, ne yapmasını istediğinizi anlamak iyi bir fikirdir. Bu durumda sadece birkaç genel gereklilik vardır:

Girdiğiniz metni kaydedin ve gerektiğinde yeniden yükleyin.
Gerçek zamanlı istatistikler sağlamak için karakter ve kelime sayılarını güncelleyin. 📊

Her iki gereklilik de belgedeki öğelerin güncellenmesini gerektirir. Yani betik, getElementById metodunu kullanarak bu düğümlere ait referansları alarak başlıyor:

sabit kelimeler = belge.getElementById("kelimeler");
sabit karakterler = belge.getElementById("karakterler");
sabit metin alanı = belge.getElementById("metin");

Kelimelerin, karakterlerin ve metinlerin, belgedeki ilgili öğelerin kimlikleri olduğunu ve HTML dosyasında id niteliğiyle atandığını unutmayın.

Daha sonra, metin değiştiğinde uygulamanın tepki vermesini sağlamamız gerekiyor:

textarea.addEventListener("giriş", işlev(ev) { localStorage.setItem("metin", ev.hedef.değer); güncelleme_sayımları(ev.hedef.değer); });

Olay dinleyicisi, JavaScript'in belirli bir olay gerçekleştiğinde otomatik olarak yürüteceği bir fonksiyondur. Bu durumda textarea düğümüne "input" olayı gerçekleştiğinde çalıştırılacak bir dinleyici ekliyoruz. Yani birisi textarea ile etkileşime girdiğinde.

Daha sonra ev.target.value'dan gelen textarea'nın güncel içeriğini kaydetmek için Web Storage API'yi kullanıyoruz. Bu yapıda ev, dinleyiciyi tetikleyen olayı temsil eden bir nesnedir, ev.target olayı alan düğümdür ve ev.target.value bu textarea'nın metnidir.

setItem yöntemi iki parametre alır: Verilerle ilişkilendirilecek bir anahtar adı ve depolanacak gerçek veriler.

Daha sonra update_counts()'u çağırıp aynı metni geçiriyoruz. Bu özelliği birazdan açıklayacağız.

Artık metni kaydettiğimize göre, uygulama açıldığında veya yeniden yüklendiğinde metni tekrar yüklemek isteyeceksiniz. Bunu başka bir dinleyici kullanarak halledebiliriz:

pencere.addEventListener("yük", işlev(ev) {
    değişken metin = localStorage.getItem("metin"); textarea.value = metin; güncelleme_sayısı(metin); });

Bu dinleyici, tarayıcı penceresinin en üst düzey gösterimi olan pencere nesnesinde oluşan yükleme olayını işler. Pencere yüklendiğinde, getItem() çağrısı yerel depolama alanından depolanan metin değerini döndürür. Bu kod daha sonra textarea değerini yüklenen metne ayarlar ve yukarıdaki dinleyici gibi bu metinle update_counts()'u çağırır.

Geriye kalan iş update_counts() fonksiyonunda yapılır ve şu şekilde görünür:

işlev güncelleme_sayıları(metin) { chars.innerHTML = metin.length; kelimeler.innerHTML = metin.split(' ').uzunluk; }

Textarea'nın aksine, normal metnin bir value özelliği yoktur, bu yüzden bunun yerine innerHTML özelliğini ayarlıyoruz. Bir dizenin length özelliği, bize karakter sayısını veren basit bir salt okunur özelliktir.

text.split(' ') dizeyi boşluk karakterlerinden böler ve sonucu dizelerden oluşan bir dizi olarak döndürür. Diziler, dizeler gibi, dizideki eleman sayısını veren bir uzunluk özelliğine sahiptir.

Ancak bu kodu test ederseniz birkaç hata fark edebilirsiniz:

Bir satırdaki bir kelimeyi tek başına doğru saymayacaktır, çünkü etrafında boşluk karakteri yoktur.
Hiçbir metin olmadığında, bölmenin çalışma şekli nedeniyle tek bir kelime bildirilecektir.

İlk sorunu çözmek için boşluk yerine düzenli bir ifade (\s "boş karakter" anlamına gelir) kullanarak bölme yapabilirsiniz. İkincisini çözmek için, sonuçtan boş dizeleri filtreleyin:

    kelimeler.innerHTML = metin.split(/\S/).filtre(işlev(N) { geri dönmek n != ''; }).uzunluk;

Bu satırı tam olarak anlamadıysanız, MDN sayfalarına göz atın. bölmek Ve filtre.

Örnek metin içeren, doğru karakter ve kelime sayılarını gösteren web uygulaması.

Sadece birkaç dosyayla birçok kullanışlı web uygulaması oluşturabilirsiniz. Bu basit not uygulamasını daha fazla işlevsellik eklemek için genişletebilirsiniz. Örneğin, şunu kullanabilirsiniz: pencere.konum özelliği localStorage.setItem'a geçirdiğiniz adı değiştirerek geçerli URL'yi almak ve birden fazla notu desteklemek için. 🗒️🌍