• Hakkımızda
  • Duyurmak
  • Gizlilik Politikası
  • Bize Ulaşın
MasterTrend Haberleri
  • Ev
    • BLOG
    • TEKNİK SERVİS
    • MAĞAZA
  • Eğitimler
  • Donanım
  • Oyun
  • Cep telefonları
  • Güvenlik
  • Pencereler
  • Yapay Zeka
  • Yazılım
  • Ağlar
  • Haberler
Sonuç yok
Tüm sonuçları görün
  • Ev
    • BLOG
    • TEKNİK SERVİS
    • MAĞAZA
  • Eğitimler
  • Donanım
  • Oyun
  • Cep telefonları
  • Güvenlik
  • Pencereler
  • Yapay Zeka
  • Yazılım
  • Ağlar
  • Haberler
Sonuç yok
Tüm sonuçları görün
MasterTrend Haberleri
Sonuç yok
Tüm sonuçları görün
Başlangıç Eğitimler

İlk web uygulamanızı oluşturun ve stres yaşamadan programlamada ustalaşın 🚀💻

MasterTrend İçgörüleri ile MasterTrend İçgörüleri
13 Mayıs 2025
içinde Eğitimler
Okuma süresi:10 dakikalık okuma
İLE İLE
0
İlk web uygulamanızın notlarını + sayacını kolayca ve hızlı bir şekilde oluşturun
1
PAYLAŞILDI
4
Görünümler
Facebook'ta paylaşTwitter'da paylaş

İçindekiler

  1. İlk web uygulamanızı oluşturun: notlar + sayaç kolay ve hızlı 📝⚡
  2. Ne İnşa Edeceksin
  3. Bunu Nasıl İnşa Edeceksiniz?
  4. Uygulamanın Yapısı
  5. Not Alıcı Nasıl Oluşturulur
    1. HTML ile Yapıyı Oluşturma
    2. CSS ile Onları Güzel Görünür Hale Getirmek
    3. JavaScript ile İşlevsellik Ekleme
    4. İlgili Yazılar

İ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:

  1. Bir satırdaki bir kelimeyi tek başına doğru saymayacaktır, çünkü etrafında boşluk karakteri yoktur.
  2. 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. 🗒️🌍

Bunu paylaş:
49FacebookLinkedinPinterestXRedditTumblrMavi gökyüzüKonularPaylaşmak
49
HİSSELER

İlgili Yazılar

  • Twitter'da "Bir şeyler ters gitti" hatası nasıl düzeltilir
  • 2024'te Gömülü Videolar Ücretsiz Nasıl İndirilir
  • Windows 10/11 için en iyi tanılama araçları
  • AMD Radeon RX 7000 5 ve 6 nanometre
  • Intel Alder Lake P ve U yönleri
  • SSD solid state sürücü ile hız – PC ve Dizüstü Bilgisayar
  • Boston Dynamics Atlas eylemde
  • Linux Dizin Yapısı Açıklandı
Etiketler: EvergreenİçerikTeknoloji İpuçları
Önceki Gönderi

Windows 11'de Kitaplıklar Nasıl Gösterilir veya Gizlenir: Adım Adım Kılavuz 🚀🔒

Sonraki yayın

RTS Oyunları: Büyük Stüdyolar Neden Bunlardan Vazgeçiyor? 🎮🔥

MasterTrend İçgörüleri

MasterTrend İçgörüleri

Editör ekibimiz, dijital cihazlarınızdan ve araçlarınızdan en iyi şekilde yararlanmanıza yardımcı olmak için derinlemesine incelemeler, eğitimler ve öneriler paylaşıyor.

Sonraki yayın
RTS Oyunları: Stratejiyi Canlı Tutan 5 Bağımsız Oyun

RTS Oyunları: Büyük Stüdyolar Neden Bunlardan Vazgeçiyor? 🎮🔥

5 2 oylar
Makale Puanı
Abone Ol
Erişim
Bildiri
misafir

misafir

0 Yorumlar
Daha eski
El mas nuevo En çok oylanan
Çevrimiçi yorumlar
Tüm yorumları görüntüle

Bağlantıda Kalın

  • 976 Hayranlar
  • 118 Takipçiler
  • 1,4 bin Takipçiler
  • 1,8 bin Aboneler

  • Eğilimler
  • Yorumlar
  • Son
Windows 11 masaüstünüze saat nasıl eklenir: 3 kusursuz numara!

Windows 11 Masaüstünüze Saat Nasıl Eklenir: Dakikalar İçinde Daha Fazlasını Başarın! ⏱️

1 Mayıs 2025
Android için Lucky Patcher'a En İyi 12 Alternatif

Lucky Patcher Alternatifleri: 12 Daha İyi ve Kolay Uygulama! 🎮⚡

12 Mayıs 2025
2024'te Android'de AdGuard DNS Nasıl Kullanılır

2025'te Android'de AdGuard DNS Nasıl Kullanılır

11 Şubat, 2025
Oblivion Remastered'da Eşyalar Nasıl Saklanır: Bilmeniz Gereken 5 Püf Noktası! 🗝️💼

Oblivion Remastered'da ganimetinizi kaybetmeden eşyaları nasıl saklarsınız 💎⚡

1 Mayıs 2025
Android'de Gmail Özellikleri: 5 İpucuyla Zamandan Tasarruf Edin

Android'de Gmail Özellikleri: Bilmediğiniz 5 Püf Noktası! 📱✨

12
Anakart Tamiri - Anakart Tamiri

Notebook Anakart Tamiri

10
İnternet olmadan Windows 11 Home'u yükleyin

İnternet olmadan Windows 11 Home'u yükleyin

10
Windows 11/10'da Sürücüler 4 Adımda Nasıl Yedeklenir!

Windows 11/10'da Sürücüler Nasıl Yedeklenir: Hatalardan Kaçının! 🚨💾

10
Rastgele Kullanıcı Adları Hesabınızı bugün koruyun

Rastgele kullanıcı adları: Toplu saldırılardan kaçınmanın anahtarı 🛡️🚫

25 Haziran 2025
Yasuke'nin Kilidini Aç Oyun tarzını değiştirecek gizli Kofun'u keşfet!

Yasuke'nin kilidini aç: Seni hakim kılacak gizli Kofun'u keşfet! 🥷💥

25 Haziran 2025
Dizüstü bilgisayarınızı 🚀 hemen denemeniz gereken 5 ücretsiz uygulama ile hızlandırın

Dizüstü bilgisayarınızı hızlandırın ⚡️ ve performansını 5 kolay adımda artırın

24 Haziran 2025
BIOS/UEFI Tuşları: Hızlı Erişim için En İyi 10 Tuş

BIOS/UEFI Anahtarları: Kolayca ve hatasız girmeyi öğrenin ⚡🔑

24 Haziran 2025

Son Haberler

Rastgele Kullanıcı Adları Hesabınızı bugün koruyun

Rastgele kullanıcı adları: Toplu saldırılardan kaçınmanın anahtarı 🛡️🚫

25 Haziran 2025
6
Yasuke'nin Kilidini Aç Oyun tarzını değiştirecek gizli Kofun'u keşfet!

Yasuke'nin kilidini aç: Seni hakim kılacak gizli Kofun'u keşfet! 🥷💥

25 Haziran 2025
4
Dizüstü bilgisayarınızı 🚀 hemen denemeniz gereken 5 ücretsiz uygulama ile hızlandırın

Dizüstü bilgisayarınızı hızlandırın ⚡️ ve performansını 5 kolay adımda artırın

24 Haziran 2025
5
BIOS/UEFI Tuşları: Hızlı Erişim için En İyi 10 Tuş

BIOS/UEFI Anahtarları: Kolayca ve hatasız girmeyi öğrenin ⚡🔑

24 Haziran 2025
4
MasterTrend Haber logosu

MasterTrend Info, teknoloji için başvuracağınız kaynaktır: donanım, yazılım, oyun, mobil cihazlar ve yapay zeka hakkında haberler, eğitimler ve analizler keşfedin. Bültenimize abone olun ve hiçbir trendi kaçırmayın.

Bizi takip edin

Kategoriye Göre Gözat

  • Oyun
  • Donanım
  • Yapay Zeka
  • Cep telefonları
  • Haberler
  • Ağlar
  • Güvenlik
  • Yazılım
  • Eğitimler
  • Pencereler

Son Haberler

Rastgele Kullanıcı Adları Hesabınızı bugün koruyun

Rastgele kullanıcı adları: Toplu saldırılardan kaçınmanın anahtarı 🛡️🚫

25 Haziran 2025
Yasuke'nin Kilidini Aç Oyun tarzını değiştirecek gizli Kofun'u keşfet!

Yasuke'nin kilidini aç: Seni hakim kılacak gizli Kofun'u keşfet! 🥷💥

25 Haziran 2025
  • Hakkımızda
  • Duyurmak
  • Gizlilik Politikası
  • Bize Ulaşın

Telif Hakkı © 2025 https://mastertrend.info/ - Tüm hakları saklıdır. Tüm ticari markalar ilgili sahiplerinin mülkiyetindedir.

es_ES Spanish
es_ES Spanish
en_US English
pt_BR Portuguese
fr_FR French
it_IT Italian
ru_RU Russian
de_DE German
zh_CN Chinese
ko_KR Korean
ja Japanese
th Thai
hi_IN Hindi
ar Arabic
tr_TR Turkish
pl_PL Polish
id_ID Indonesian
Sonuç yok
Tüm sonuçları görün
  • Oyun
  • Donanım
  • Yapay Zeka
  • Cep telefonları
  • Haberler
  • Ağlar
  • Güvenlik
  • Yazılım
  • Eğitimler
  • Pencereler

Telif Hakkı © 2025 https://mastertrend.info/ - Tüm hakları saklıdır. Tüm ticari markalar ilgili sahiplerinin mülkiyetindedir.

Yorum Yazar Bilgisi
:wpds_gülümseme::wpds_sırıtma::wpds_wink::wpds_mrgreen::wpds_tarafsız::wpds_bükülmüş::wpds_arrow::wpds_şok::wpds_eğlenmiyor::wpds_cool::wpds_şeytan::wpds_oops::wpds_razz::wpds_roll::wpds_cry::wpds_eek::wpds_lol::wpds_mad::wpds_üzgün::wpds_ünlem::wpds_sorusu::wpds_fikri::wpds_hmm::wpds_beg::wpds_vay canına::wpds_kıkırdama::wpds_aptal::wpds_kıskancım::wpds_kapalıağız:
wpDiscuz
RedditMavi gökyüzüXMastodonHacker Haberleri
Bunu paylaş:
MastodonVKWhatsAppTelgrafSMSHacker HaberleriAstarHaberci
Mastodon Örneğiniz