Kayıtlar

Basit Javascript etiketine sahip yayınlar gösteriliyor

Amazon Affiliate Link Oluşturucu

Resim
Aşağıdaki formu kullanarak Kendi Amazon Affiliate Linkinizi Oluşturun Amazon site adresini girin Affiliate kodunuzu girin

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 alg

JavaScript İle Göz Egzersizi Uygulaması

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

Basit bir HTML / CSS / JS Editörü

Resim
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. Editör Modunu Aç (Yazdığınız Kodu Çalıştırmak için CTRL+Enter'a da Basabilirsiniz.) <!DOCTYPE html> <html> <body> <h2>JavaScript Kodu</h2> <p id="demo">HTML içeriği</p> <script> function deneme(){ alert("heyyoo"); } </script> <button onclick="deneme();">Örnek Kodu Çalıştır</button> </body> </html> Çalıştır

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 Rastgele Sayı Oluştur Oluşturulan Sayı

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

Resim
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;di

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

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 = [];

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

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;" cellspaci

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

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

Basit Bir XML Ayıklayıcı

Resim
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 : XML Kodlarını Buraya Yapıştırın XML İçeriğini Çıkar

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

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

Resim
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&qu

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

Resim
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 Uygula Saygılarımla... Turgut Arslan