HTML Range Elemanından Nasıl Veri Alınır?

HTML Range elemanı kullanımı için basit bir örnek

HTML Range elemanı aslında input nesnesinin bir özelliğidir. input nesnesinin type özelliğini range olarak ayarkayarak onu bir aralık seçiciye çevirebilirsiniz. bu işlemi yaptıktan sonra input nesnesi bir range elemanı şeklinde sayfada görüntülenir. Kullanıcı mouse ile üzerine gelip çizgi üstünde ileri gerei kaydırarak belirlediğiniz aralıkta istediği değeri ayarllar. Size kalan tek şey range elemanından değerleri javascipt ile almak.

Range elemanında değerler nasıl alınır? Fare sürükledikçe değerlerin değiştirilmeri/güncellenmesi nasıl sağlanır?

Örnek kodlama aşağıdaki gibidir

<form>

  <label for="vol">0 ile 50 arası bir değer belirleyin:</label><br/><br/>

  0  <input type="range" id="vol" name="vol" min="0" max="50"> 50

</form>

Range elemanının değerini bu kutucuğa yazdıralım.<br/><br/>

<div style="height:30px;display:block;float:left;text-align:center;line-height:30px;margin-right:5px;" >Seçilen değer : </div><div id="gst" style="width:30px;height:30px;border:solid 1px #f000f0;display:inline-block;text-align:center;line-height:30px;"></div>

<script>

window.addEventListener("load",function(){

var elem = 0;

var elemHand;

elem = document.getElementsByName("vol")[0].value;

elemHand=document.getElementsByName("vol")[0];

elemHand.onmousedown=function(){

elem = document.getElementsByName("vol")[0].value; // mouseye tıklandığında değeri yaz

     document.getElementById("gst").innerHTML=elem;

  this.onmousemove=function(){ // fare hareket ettiğinde değeri değiştir.

  elem = document.getElementsByName("vol")[0].value;

  document.getElementById("gst").innerHTML=elem;

}

}

});

</script>

Kodun çalışan Hali

0 ile 50 arası bir değer belirleyin:

0 50

Range elemanının değerini bu kutucuğa yazdıralım.

Seçilen değer :

Bir Dizideki Tek Sayıları Bulan JavaScript Programı Örneği

Bir Array değişkenindeki tek sayıları bulup yazdıran  JavaScript programının kodları aşağıdaki gibidir.

Bu programda tekSayiFiltre isminde bir fonksiyon kullanarak sayı dizisinin elemanlarını filtreledim.

Tabi başka yöntemlerle de bu program yazılabilir. Yazılım dünyasında bir işi yapmanın pek çok yolu vardır. Bu kod sadece örneklerden biridir.

<div id="sayilar"></div>

<script>

  var sayilar = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 20]; // Filtrelenecek sayı dizisi

  var tekSayilar = []; // tek sayıların depolanacağı Array değişkeni

  var j = 0;

  function tekSayiFiltre(sayi) {

    return (sayi % 2 == 1); // eğer sayının 2'ye bölümünden kalan 1 ise true döndürür.

  }

  for (i = 0; i < sayilar.length; i++) {

    if (tekSayiFiltre(sayilar[i])) {

      tekSayilar[j] = sayilar[i];

      j++;

    }

  }

  document.getElementById("sayilar").innerText = tekSayilar;

</script>

Tatil terimini içeren 1000 adet anahtar kelime

 

Tatil, insanların yılın en çok beklediği dönemlerden biridir. Bu dönemde insanlar, iş ve okuldan uzaklaşarak dinlenmek, eğlenmek ve yeni yerler keşfetmek için fırsat bulurlar. Bu nedenle, tatil ile ilgili anahtar kelimeler, SEO ve Google Ads çalışmaları için oldukça değerlidir.

Tatil anahtar kelimeleri, geniş bir yelpazeye yayılmaktadır. Bu anahtar kelimeleri, hedef kitlenize ve bütçenize göre doğru bir şekilde kullanmak önemlidir.

::after Pseudo Class'i ile Bir Elemana Verilen float Özelliğini Kaldırmak

 Bu çalışmamızda :after pseudo classı ile clear both nasıl yapılır? Bulmaya çalışacağız.

Şu şekilde bir kodlama yaptığımızı hayal edelim.

<style>

    .flist{display:block;max-width:25%;height:auto;padding:3rem;margin:.3rem;background:red;float:left;}

    .kap{width:80%;height:auto;display:block;background:blue;}

    .kap::after{clear:both;content:"";display:table;clear:left;font-size:0;height:0;}    .kapIki{width:3rem;height:3rem;background:green;display:block;color:white;padding:2rem;margin:.5rem 0;}

</style>

<div class="kap">

    <div class="flist">1</div>

    <div class="flist">2</div>

    <div class="flist">3</div>

    <div class="flist">4</div>

</div>

<div class="kapIki">2. kap</div>

Görünümü bu şekilde olacaktır.

Clearfix ya da clear işlemi uygulanmadan önce

Görüldüğü gibi kırmızı kutulara float:left özelliği verildiğinden dolayı dolayı yeşil kutu olması gereken yerde değil. Ayrıca kapsayıcı olan mavi arka planlı kutuyu da göremiyoruz. Çünkü kırmızı kutularla aynı float değerinde değil. Normalde bu problemi çözmek için araya clear:both özellikli bir temizleme divi koyarız.  Ama bu şekilde kutucukların çok kullanıldığı bir tasarımda pek çok defa bu clear:div özellikli elemanı yazmamız gerekir. Sürekli kod tekrarı yapmamak ve gereksiz HTML kod kalabalığı yapmamak için :after pseudo classını kullanacağız. Aynı kodun Style kısmına kırmızı ile işaretli kod satırını ekleyelim.

<style>

    .flist{display:block;max-width:25%;height:auto;padding:3rem;margin:.3rem;background:red;float:left;}

    .kap{width:80%;height:auto;display:block;background:blue;}

    .kap::after{ content:""; display:table;clear:both; font-size:0;height:0;}

    .kapIki{width:3rem;height:3rem;background:green;display:block;color:white;padding:2rem;margin:.5rem 0;}

</style>

Eklendikten sonraki sonuç

Gördüğünüz gibi kırmızı kutucukların kapsayıcısına :after pseudo classı ile clear:both özelliğini ekledik. Classın oluşturduğu eleman tasarımda yer kaplamasın diye font-size:0; ve height:0; özelliklerini de ekledikten sonra mavi kutumuz kırmızı kutuları otomatik olarak kapladığı gibi, bir sonraki elemanın da tam olarak olmasını istediğimiz yerden devam etmesini sağladı. Bu çözüm Firefox 84.0.1 Microsoft Edge, Safari 14.1.1 ve Chrome 90.0.4430.212 sürümlerinde denendi ekran görüntüsü Chrome'dan alındı. Diğer tarayıcılarda denemedim. Kontrol etmeden kullanmayınız.

Sidebar İçin Özet Metin Kutusu(Elipsisli-3 noktalı) HTML-CSS

Haber sitelerinde, ya da blog sayfalarının sidebar bölümünde kullanabileceğiniz metin kutusu. Genelde bir yazının özet kısmını göstermek için kullanılır. Eklediğinizi yazıyı belirli bir satıra kadar gösterir. Gerisini 3 nokta şeklinde kısaltır. Koddaki line-clamp özelliğini değiştirerek satır sayısını istediğiniz gibi ayarlayabilirsiniz. Kodlar şu şekildedir.

<style>

.listWrp{background:#f2f2f2;padding:2%;border: solid 1px #f2f2f2;border-radius:.8rem;-moz-border-radius:.8rem;-webkit-border-radius:.8rem;-o-border-radius:.8rem;max-width:40%;color:#717171;font-family:Arial;}

.listCont{border-left:solid 3px #ff0000;padding:0 0 0 3%;display:block;position:relative;font-size:.9rem;text-align:justify;  }

.listInd{position:absolute;top:5%;left:-.38rem;padding:.3rem;background-color:#ff0000;z-index:10;}

.listTitle{color:#555;margin:1% 0;font-size:1.2rem;}

.listTxt{text-overflow: ellipsis;display: -webkit-box;  -webkit-line-clamp: 8;  -webkit-box-orient: vertical;overflow:hidden;}

.listRMore{max-width:4rem;text-align:center;float:right;font-size:.7rem;color:#fff;font-weight:bold;padding:.5rem;background-color:#f00;border-radius:.3rem;-moz-border-radius:.3rem;-webkit-border-radius:.3rem;-o-border-radius:.3rem;line-height:.8rem;height:.8rem;display:block;cursor:pointer;text-decoration:none;}

.lstClear{clear:both;}

</style>

<div class="listWrp">

<div class="lstItem">

        <div class="listCont">

        <div class="listInd"></div>

        <h3 class="listTitle">Lorem ipsum dolor</h3>

          <div class="listTxt">

          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

        </div>

        <a href="#" class="listRMore">Read More</a>

    </div>

    <div class="lstClear"></div>

</div>

Berat Kandilimiz Mübarek Olsun

 

Klavyeden girilen sayıya kadar olan Fibonacci serisini yazdiran Javascript Programı

Evet Sayın okuyucu,
Bugün Fibonacci serisi üreten bir Javascript programı yapacağız. İtalyan matematikçi Leonardo Fibonacci'nin 12. yüzyılda keşfettiği gizemli Fibonacci serisi matematik ve yazılımla ilgilenlerin malumudur. Bir başlangıç değerinden itibaren her bir sayı bir önceki ile toplanarak bir sonraki sayı elde edilir ve bu ilginç seri bu şekilde sonsuza kadar gider.
Burada önemli bir noktayı belirtmek istiyorum. Fibonacci sayısı diye bir şey yoktur. Fibonacci serisi vardır. Burada esas olan yukarıda belirttiğimiz kurala uygun elemanların artarak sıralanmasıdır. Herhangi bir sayıdan başlayabilir. Asal sayılar ile karıştırılmamalıdır. Bu programda biz seriyi 1 den başlattık. Ama herhangi bir sayıdan başlayan versiyonunu yazmak da size kalmış.

Lütfen bir sayı girin ve enter tuşuna basın

0

 Kodlar

<input type="text" id="sayiYaz" />

<div id="fibonacci">0</div>

<script>

  var a = 1;

  var b = 1;

  var c = 0;

  var i = 0;

  var fibonacciDizisi = [];

  var eleman = document.getElementById("sayiYaz");

  eleman.addEventListener("keyup", function(event) {

    if (event.keyCode === 13) {

      document.getElementById("fibonacci").innerHTML = "";

      while (i < parseInt(eleman.value)) {

        if (i <= 1) {

          fibonacciDizisi[i] = 1;

          i++;

        } else {

          c = a + b;

          if (c > eleman.value) {

            break;

          }

          fibonacciDizisi[i] = c;

          i++;

          a = b;

          b = c;

        }

      }

      for (j = 0; j < fibonacciDizisi.length - 1; j++) {

        document.getElementById("fibonacci").innerHTML += fibonacciDizisi[j] + ",";

      }

    }

  });

</script>

Saygılarımla
Turgut Arslan