Basit Javascript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Basit Javascript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Amazon Affiliate Link Oluşturucu

Amazon Affiliate Link Oluşturucu


Aşağıdaki formu kullanarak Kendi Amazon Affiliate Linkinizi Oluşturun








JavaScript ile TC No Üretelim

JavaScript TCKN Üreteci Kodu

TC Kimlik No Nasıl Oluşturulur?

Türkiye Cumhuriyeti kimlik numarası (TC kimlik numarası), Türkiye Cumhuriyeti vatandaşlarını tanımlamak için kullanılan benzersiz bir numaradır. Bu numara, 11 basamaklı bir sayı dizisidir ve aşağıdaki formattadır:


12345678901


↓ TC Kimlik No üreteci sayfanın altındadır. ↓

İlk 6 basamak, kişinin doğum tarihini temsil eder. İkinci basamak, kişinin cinsiyetini temsil eder. (1: erkek, 2: kadın) Son 5 basamak, kişinin sıra numarasını ve kayıt ilçesini temsil eder.


TC kimlik numarası, Nüfus ve Vatandaşlık İşleri Genel Müdürlüğü tarafından üretilir. TC kimlik numarası üretmek için kullanılan algoritma, aşağıdaki adımları içerir:


Doğum tarihi, cinsiyet ve kayıt ilçesi bilgileri girilir.


TC kimlik numarası üretmek için kullanılan bilgiler

Bu bilgiler, 11 basamaklı bir sayı dizisine dönüştürülür.

Seri numarası, üretilen sayı dizisinin son 5 basamağına eklenir.

Üretilen sayı dizisi, doğrulama algoritmasından geçirilir.

Doğrulama algoritması, üretilen sayı dizisinin doğruluğunu kontrol eder. Algoritma, ilk 10 basamağın toplamının birler basamağının, 11. basamağı vermesini sağlar.


TC kimlik numarası üretmek için kullanılan algoritma, halka açıktır. Bu nedenle, bu algoritmayı kullanarak sahte TC kimlik numaraları üretmek mümkündür. Ancak, bu sahte TC kimlik numaralarının, resmi işlemlerde kullanılabilmesi için, doğrulama algoritmasından geçmesi gerekir.


TC kimlik numarası, Türkiye Cumhuriyeti vatandaşlarının kimliğini ve kişisel bilgilerini korumak için tasarlanmış bir numaradır. Bu nedenle, TC kimlik numarası üretmek, kişilerin kimlik bilgilerinin gizliliğini ihlal edebilir.

Türkiye Cumhuriyeti Kimlik Numarası kişisel bilgileri kullanmadan da algoritma mantığına göre herhangi bir yazılım dili kullanılarak üretilebilir. Örneğin JavaScript dilini kullanarak algoritma kurallarına uygun bir TCKN üretebilirsiniz. Üretilen bu numaralar genelde web siteleri ve uygulamalardaki kayıt formlarına girilen TCKN numaralarının formatının doğruluğunu front end tarafında anlık olarak denetlemek için yazılımcılar tarafından kullanılır. Zaten form sayfasından aldığınız TCKN verisini sorgulatmadan önce algoritmaya uygunluğunu sınamalısınız. Böylelikle sorgu yapmadan evvel kullanıcının en azından formata uygun numara girmesini garantilemiş olursunuz

Aşağıdaki otomatik olarak üretilmiş TCKN'yi test için deneyebilir veya butona basarak başka bir numara üretebilirsiniz.

TCKN üretimi Javascript ile nasıl yapılır? Diye sorduğunuzu duyar gibiyim. İşte sorunuzun yanıtı:

JavaScript TCKN üretecinin kodlarını aşağıdan alıp kullanabilirsiniz.

JavaScript İle Göz Egzersizi Uygulaması

 

Gözlerimiz, dünyayı görmemizi sağlayan en önemli organlarımızdan biridir. Günlük hayatımızda sürekli olarak gözlerimizi kullanırız ve bu da göz kaslarımızın yorulmasına ve zayıflamasına neden olabilir. Göz kaslarını güçlendirmek için ise çeşitli egzersizler mevcuttur.

Bu makalede, göz kaslarını eğlenceli bir şekilde çalıştırmak için geliştirilen bir JavaScript uygulamasını tanıtacağız. Uygulama, ekranda rastgele bir noktada çıkan ve fare ile tıklandıkça kaybolup başka bir noktada çıkan bir göz ikonu içerir. Kullanıcı, göz ikonunu olabildiğince hızlı ve doğru bir şekilde tıklamaya çalışır.

Uygulamanın faydaları şunlardır:

  • Göz kaslarını güçlendirir: Göz ikonunu takip etmek ve tıklamak, göz kaslarının farklı yönlerde hareket etmesini sağlar. Bu da göz kaslarının güçlenmesine ve daha esnek hale gelmesine yardımcı olur.
  • Göz-el koordinasyonunu geliştirir: Göz ikonunu tıklamak için göz ve el koordinasyonu gereklidir. Uygulama, göz-el koordinasyonunu geliştirmeye ve daha hızlı ve doğru bir şekilde tıklamaya yardımcı olur.
  • Odaklanma ve konsantrasyonu artırır: Göz ikonunu takip etmek ve tıklamak, kullanıcının dikkatini ve konsantrasyonunu ekrana odaklamasını sağlar. Bu da odaklanma ve konsantrasyon yeteneğinin gelişmesine yardımcı olur.
  • Eğlenceli ve motive edici: Uygulama, basit ve eğlenceli bir tasarıma sahiptir. Bu da kullanıcıları motive etmeye ve uygulamayı düzenli olarak kullanmaya teşvik eder.

Bu çalışmamızda saf JavaScript ile basit bir göz egzersizi uygulaması kodladım. Kodları aşağıdaki gibidir.


Kodların Çalışan halini buradan test edebilirsiniz.


Skor: 0

Skor: 0

Basit bir HTML / CSS / JS Editörü

Javascriptle basit bir HTML/JS/CSS Editörü örneği

Bu editör HTML, CSS ve JavaScript kodlarını düzenleyip çalıştırabileceğin basit bir ortam sağlar. Kodlarınızı aşağıdaki alana yazıp front-end'te çalıştırabilirsiniz. İsterseniz sadece çalıştır düğmesine basın ve örnek kodu çalıştırın.

(Yazdığınız Kodu Çalıştırmak için CTRL+Enter'a da Basabilirsiniz.)

JavaScript Rastgele Sayı Üreteci

JavaScript ile verilen sayı aralığında rastgele sayılar oluşturalım

Rastgele sayı üretmek istediğiniz aralığı aşağıdaki kutucuklara yazın ve butona basın





Oluşturulan Sayı

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

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

1'den N'ye kadar olan sayıların toplamını yapan JavaScript programı

Programı denemek için kutuya bir sayı yazın ve enter tuşuna basın.

0


 Programın kodları aşağıdaki gibidir

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

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

<script>

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

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

    if (event.keyCode === 13) {

      var t = 0;

      var x = 1;

      while (x <= parseInt(eleman.value)) {

        t = t + x;

        x = x + 1;

      }

      document.getElementById("sonuc").innerHTML = t;

    }

  });

</script>




Saygılarımla...
Turgut ARSLAN

JS ve CSS ile HTML Elemanlarının Sıralamasını Nasıl Değiştiririz?

HTML elemanlarının sıralarını değiştirebilmeniz için kapsayıcı elemanının display değerinin flex olması gerekmektedir. Sonrasında javascript ile verdiğiniz order değerine göre sıralanacaktır.

Aşağıdaki kodlar butona basıldığında elemanların sırasının karışık olarak değişmesini sağlamaktadır.


<style>

  .kapsayici {

    display: flex;

    display: -webkit-flex;

    flex-direction: column;

    max-width: 92px;

    height: auto;

    margin: 0px auto;

    flex-wrap: nowrap;

    justify-content: flex-start;

    align-items: stretch;

    align-content: stretch;

  }


  .eleman,

  .karistirButon {

    padding: 3%;

    border: solid 1px #f00;

    margin: 2px;

    max-width: 92px;

    text-align: center;

  }


  .karistirButon {

    background-color: red;

    color: #fff;

    margin: 0px auto;

    margin-top: 5px;

    cursor: pointer;

    display: block;

    padding: 1%;

    max-width: 92px;


  }

</style>

<script>

  function siraDegistir() {

    var sira = 0;

    var siraliste = [];

    var i = 0;

    var elemanlar = document.querySelectorAll(".eleman");

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

      sira = Math.floor(Math.random() * (elemanlar.length)) + 1;

      if (!siraliste.includes(sira)) {

        siraliste.push(sira);

        elemanlar[i].style.order = sira;

      } else {

        i--;

      }

    }

  }

</script>

<div class="kapsayici">

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

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

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

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

</div>

<div class="karistirButon" onclick="siraDegistir();">Sırayı Karıştır</div>


Bu kodların çalışır hali 


1
2
3
4
Sırayı Karıştır


Saygılarımla...
Turgut ARSLAN

JavaScript ile Bir Elemanın İçeriğinin En Başına Yeni Bir İçerik Eklemek

Bu işlemi yapan kodlar aşağıdaki gibidir 


<script>

window.onload=function(){

/*eklenecek içerik*/

var a = "<style>.eklenenKutu{display:table;max-width:350px;height:auto;;background-color:#00dd00;padding:2%;}.ekleneniIcerik{display:table-cell;text-align:center;width:100%;height:auto;vertical-align:middle;color:#fff;font-size:18px;font-weight:bold;font-family:Proxima}@media screen and (max-width:900px){.eklenenKutu{max-width:90%;width:55%;margin:5px auto;}.ekleneniIcerik{font-size:.18px;}}</style><div class=\"eklenenKutu\"><div class=\"ekleneniIcerik\">Bu eleman Javascript ile başka bir elemanın içeriğinin başlangıcına eklenmiştir.<\/div><\/div>";


/*Ekleneceği eleman*/

var b=document.querySelectorAll(".disKutu")[0];


/*eklemek istediğimiz içeriği ilgili elemanın içeriğinin başına ekleyen kod*/

b.insertAdjacentHTML('afterbegin', a);


}

</script>


<div class="disKutu">

<div style="display:block;width:450px;height:55px;">Bu kutudaki içerikten önce eklenecek</div>

</div>



Kodun canlı çalışan örneğini görmek için aşağıdaki butona basın.



Bu kutudaki içerikten önce eklenecek


Saygılarımla...
Turgut ARSLAN

JSON - HTML Tablo Dönüştürücüsü(JSON to HTML Converter)

JSON verilerini HTML tabloya çeviren basit bir JavaScript uygulaması yaptım. Kodlar aşağıdaki gibidir. 


<!DOCTYPE html>

<html>

<body>

  <style>

    .objeTablo th,

    .objeTablo tr,

    .objeTablo td {

      padding: 5px;

      border: solid 1px #f00;

      color: #717171;

      text-align: center;

    }

  </style>

<h2>HTML Tabloya çevirmek istediğiniz JSON içeriğini buraya yapıştırın</h2>

<strong>Bu kod sadece 1 seviye değerleri gösterir.Eğer bir değerin içinde başka bir nesne varsa bunları tabloda Object olarak olarak görürsünüz. </strong><br/>

  <textarea cols="70" rows="20" name="jsonGir"></textarea><br />

    <input type="button" value="JSON İçeriğini Göster" onclick="objGoster()" />

  <table id="tabloIcerik" class="objeTablo" style="max-width: 800px; height: auto;


        border: solid 1px #f00;" cellspacing="0" cellpadding="0">

  </table>

  <script>

    function objGoster() {

      var jsonVeri = document.getElementsByName("jsonGir")[0].value;

      var obj = JSON.parse(jsonVeri);

      var nesneBaslikSay = Object.keys(obj[0]).length;

      var icerik = "<tr>";

      var icerikBaslik = "<tr>";

      var icerikDeger = "";

      for (i = 0; i < nesneBaslikSay; i++) {

        icerikBaslik += "<th> " + Object.keys(obj[0])[i] + " </th>";

      }

      icerikBaslik += "</tr>";

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

        for (j = 0; j < nesneBaslikSay; j++) {

          icerikDeger += "<td> " + obj[i][Object.keys(obj[i])[j]] + " </td>";

        }

        icerikDeger += "</tr>";

      }

      icerik += icerikDeger;

      document.getElementById("tabloIcerik").innerHTML = icerikBaslik + icerik;

    }

  </script>

</body>

</html>


Bu kodların çalışan hali,


HTML Tabloya çevirmek istediğiniz JSON içeriğini buraya yapıştırın

Bu kod sadece 1. seviye değerleri gösterir. Eğer bir değerin içinde başka bir nesne varsa bunları tabloda Object olarak olarak görürsünüz.
Not: Eğer JSON kodunuz okunmadıysa kodu [ ] parantezleri arasın alın. Bu basit bir kod ve arraya dönüşmeyen içerikleri okuyamıyor


Javascript ile bul değiştir işlemi nasıl yapılır?

Javascript ile bir string ifadeyi tüm sayfada aratıp istenen değerle replace edebilirniz.

Javascript kelime değiştirme kodumuz

var kelime=/aranan kelime/ig;
var yeniKelime="yeni ifade";
var x = this.document.body.innerHTML.replace(kelime,yeniKelime);
this.document.body.innerHTML = x;

 Bu koddaki kırmızı yerleri değiştirip tarayıcı konsolunda çalıştırdığınızda HTML sayfasında aradığınız kelime ile eşleşen tüm ifadelerin değiştirildiğini görebilirsiniz.

Javascript ile tıklanan elemanın sira numarasini bulmak

Bazı projelerde kullanıcının tıkladığı elemanın indeks sırasını bilmemiz gerekir. Herhangi bir şekilde JQuery vb javascript kütüphanesi kullanmadan saf javascript ile tıklanan elemanın sıra değerini öğrenebilirsiniz. Aşağıdaki kısa kod örneği bu işin kolayca yapılabilmesini sağlıyor.



<style>
li.demo{display:block;margin-top:2px;padding:5px;background-color:#4caf50;width:50px;text-align:center;color:#fff;cursor:pointer;}
</style>
<ul id="kutu">

  <li class="demo">-1- </li>

  <li class="demo">-2- </li>

  <li class="demo">-3- </li>

  <li class="demo">-4- </li>

  <li class="demo">-5- </li>

</ul>

<div>Sıralama Bilgileri</div>
<strong id="siraSonuc"></strong>
<script>

var elemanlar=[];
var sira;
var ind;

elemanlar=document.querySelectorAll(".demo");

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

  elemanlar[i].addEventListener("click",function(){
  var ata=this.parentNode;
  ind=Array.prototype.indexOf.call(ata.children, this);
  sira=Array.prototype.indexOf.call(ata.children, this)+1;
  document.getElementById("siraSonuc").innerHTML="Index no: "+ind+" | Sıra no: "+sira;

 });

}
</script>
Bunun canlı hali aşağıdaki gibidir. Sonuçları görmek için aşağıdaki sayılara tıklayın.

  • -1-
  • -2-
  • -3-
  • -4-
  • -5-

Sıralama Bilgileri


Textarea'yı Satır Satır Nasıl Okuturuz?

Javascript ile Textarea elemanının içeriğini satır satır okutup başka bir div elemanının içine yazdıralım.

<script>
function linkleriAc(){
var strlar=document.getElementById("lnklist").value.split("\n");
for (i=0;i<strlar.length;i++){
document.getElementById("sonuc").innerHTML+=strlar[i]+"<br/>";
}

}
</script>
<textarea id="lnklist" cols="80" rows="10">
</textarea><br/>
<input type="button" onclick="linkleriAc();" value="Satırları Oku" />
<div id="sonuc">
</div>

 Kodların çalışan hali

Javascript ile veriyi bir alt satıra nasıl yazdırabiliriz?

Javascript ile veriyi bir alt satıra nasıl yazdırabiliriz? HTML dilinde bir alt satıra geçmek için
ya da
şeklinde yazılan etiketi kullanırız. Javascirpt ile bir yere sonuç yazdırırken de yazdırdacağımız çıktı içine bu tag'i ekleyerek çıktı verilerimizi bir alt satıra yazdırabiliriz. Örnek senaryomuzda  biri mavi diğeri yeşil iki adet div bulunmakta. Mavi kutudaki "İçerik Metni" yazısını yeşil kutudaki "İşlemin Sonucu" metninin altına yazdırmak istiyoruz. Bunun için yazdir isminde bir fonksiyon oluşturuyoruz. Bu fonksiyon butona basıldığında çalışacak ve mavi kutudaki metni alıp yeşil kutudakinin altına ekleyecek. Önce veri isminde bir değişken tanımlayalım ve içine mavi kutudaki içeriği aktaralım.

 var veri=document.getElementById("maviKutu").innerHTML; Sonra yeşil kutuyu yakalayalım ve veri değişkenindeki değeleri bukutunun içine yazdıralım. document.getElementById("yesilKutu").innerHTML+=""+veri;

 Gördüğünüz gibi sadece ""+veri; atamasını yaparak mavi kutunun içeriğini yeşil kutuda bir alt satıra yazdırmış olduk. Burada atama yaparken = yerine += kullandığımızı fark ettiniz değil mi? Bunu kullanmamızın nedeni Yeşil kutudaki içeriğin kaybolmasını önlemekti. Eğer sadece = operatörünü kullansaydık veri yeşil kutunun içeriği mavi kutudan alınan değerlerle değişecekti. Ama biz ekleme yapmak istiyoruz. Bu sebepten += operatörünü kullanarak var olan içeriğe veri değişkeninin değerini de eklemiş olduk. Programın kodları aşağıdaki gibidir.

<div id="maviKutu" style="display:block;width:250px;height:85px;border:solid 1px #86c2a8;padding:2px;background:#a1ffdb;margin-bottom:2px;">İçerik Metni</div>
<div id="yesilKutu" style="display:block;width:250px;height:85px;border:solid 1px #04633b;padding:2px;background:#c2ffa1;text-align:center;">İşlemin Sonucu</div>
<button type="button" onclick="yazdir();">
Yazdır</button>

<script>
function yazdir(){
var veri=document.getElementById("maviKutu").innerHTML;

document.getElementById("yesilKutu").innerHTML+="<br>"+veri;
}
</script>

 Şimdi de Javascript kodlarımızı çalıştıralım.

İçerik Metni
İşlemin Sonucu

Basit Bir XML Ayıklayıcı

XML Ayıklayıcı
Bu basit bir XML Parsing aygıtıdır. İstediğin bir XML içinden, seçtiğin etiketlerin değerlerini sıralar.
Listelemek İstediğin XML elemanını buraya yaz :



Javascript İle URL Yönlendirme Nasıl Yapılır?

301 Yönlendirmesi


Javascript ile bir web sayfasını başka bir sayfaya yönlendirmek son derecede kolaydır.  Aşağıdaki basit kodu kullanarak istediğiniz yönlendirmeyi yapabilirsiniz

<script>
window.location.replace("https://arslanturgut.blogspot.com");
</script>

JQuery Toggle Açılır Kapanır Menü

Responsive JQuery Toggle Hazır Mennü Örneği
Menünün Çalışır Hali
Aslına bakarsanız önceden bu şekilde bir planlama yapmamıştım ama menü responsive olmuş :)

See the Pen Jquery Toggle Menü by Turgut Arslan (@draguth) on CodePen.

Menü Kodları Aşağıdaki Gibidir


<!DOCTYPE html>
<html>
<style>
  div.menuKutu {
    float: left;
    width: 200px;
    display: block;
    height: auto;
    background-color: #269470;
    cursor: pointer;
    font-size: 14px;
    font-family: Arial;
    text-align: center;
    color: white;
    padding: 5px;
    font-weight: bold;
    line-height: 18px
  }
  div.menuKutu p {
    height: 50px;
    line-height: 50px;
    display: none;
    background-color: #45b0a3;
    padding: 0px;
    margin: 0px;
  }
  div.menuKutu p:hover {
    background-color: #ebb753;
    padding: 0px 1important;
  }
</style>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <script type="text/javascript">
    $(document).ready(function() {
      $("div.menuKutu").click(function() {
        if ($(this).find("p").css('display') == 'none') {
          $("div.menuKutu").find("p").slideUp();
          $(this).find("p").slideToggle();
        } else if ($(this).find("p").css('display') == 'block') {
          $(this).find("p").slideUp();
        }
      });
    });
  </script>
  <div class="menuKutu">Toggle Menüyü Çalıştırmak için Tıkla<br/>
    <p>Menü Elemanı 1</p>
    <p>Menü Elemanı 2</p>
  </div>
  <div class="menuKutu">Toggle Menüyü Çalıştırmak için Tıkla<br/>
    <p>Menü Elemanı 1</p>
    <p>Menü Elemanı 2</p>
  </div>
</body>
</html>


Saygılarımla... Turgut Arslan

Javascript İle Kelimelerin ilk Harfini Büyük Yapmak

Javascript First Letters Uppercase


Hazırladığım yazıların başlıklarını büyük harfle yapmaya üşendiğim için, biraz zahmet edip basit bir Javascript programı yazdım. Tembellik insana her şeyi yaptırıyor. Ha bu arada; resimdeki acayiplik bazılarını rahatsız edebilir :)

Online Büyük Harf - Küçük Harf Çevirme Aracı

İlk harflerini büyük yapmak istediğiniz metni girin ve uygula butonuna basın


Saygılarımla... Turgut Arslan

Firefox ile Bir Sitenin TLS Versiyonunu Nasıl Öğrenirsiniz?

TLS (Transport Layer Security), internet üzerinden yapılan iletişimi güvence altına alan bir protokoldür. Bir web sitesinin hangi TLS versiy...