Amazon Affiliate Link Oluşturucu
Aşağıdaki formu kullanarak Kendi Amazon Affiliate Linkinizi Oluşturun Amazon site adresini girin Affiliate kodunuzu girin
Kayıtlar
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ı
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ü
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 Başa Dön | Scroll To Up Butonu Kodu
Sitelerde çokça kullanılan yukarı çık, başa dön vb. isimlerle adlandırılan buton kodu. <script> var btnP =0; window.addEventListener("load",function(){ btnP =window.scrollY; }); window.addEventListener("scroll",function(){ scrollStat(); }); function scrollStat(){ btnP =window.scrollY; if(btnP <=600 ){ document.getElementById("toTopBtn").className ="scrollToTopBtn"; } else{ document.getElementById("toTopBtn").className ="scrollToTopBtn scrollToTopBtnShow"; } } function scrollToTop(){ window.scrollTo(0,0); scrollStat(); } </script> <style> *{ scroll-behavior: smooth; } .scrollToTopBtn{ position:fixed; bottom:3%; right:5%; background-color:#e7e7e7; color:#555; font-size: 15px; font-family: 'Helvetica'; font-weight: 400; cursor:pointer; transition: all 0.
JavaScript ile Mesai Sayacı
Bu çalışmamda JavaScript ile bir geri sayım sayacı yaptım. Input elemanına bitiş zamanını yazıp butona tıkladığınızda belirlediğiniz saate kaç saat kaldığını görebilirisiniz. Bu uygulamada input elemanına yapılan girişleri sınırlandırdım. Program klavyeden girilen değerin sayısal olup olmadığını kontrol ediyor ve girilen değerleri saat formatına göre HH:MM:SS şeklinde düzenliyor. Javascript mesai sayacının kodları aşağıdaki gibidir. <p>Lütfen mesai bitiş saatini girin</p> <input type="tel" placeholder="HH:MM:SS" id="timeInputId" /> <input type="button" id="tmrBtn" value="Mesai Sayacını Başlat"/> <p id="demo"></p> <p id="demo2"></p> <script> var x; var finishTime= "00:00:00"; var brTitle= document.title; window.addEventListener("load",function(){ var timeBtn = document.getElementById("tmrBtn"); var timeInput = docume
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ı
Javascript SEO Metin İşaretleme Editörü
SEO metni oluştururken işaretlemede kolaylık sağlamak amacıyla basit bir işaretleme editörü yaptım SEO Editör SEO Metin İşaretleme Editörü İstediğiniz işareti seçin P Em Strong H1 H2 H3 H4 H5 H6 İşaretle ve Ekle İşaretlemek istediğiniz metni girin Metnin işaretlemek istediğiniz yerlerini kutudan seçin ve yukarıdaki menüden etiket seçimini yapıp, İşaretle ve ekle butonuna basın. İşlem sonucu aşağıdaki gibi görünecektir.
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;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
Sliderli Product Box Örneği
Sliderli Product Box Kodları : <style> .productBox{ display:block; position:relative; width:25%; height:auto; float:left; box-sizing:border-box; border:solid 1px #dedede; border-radius:1rem; padding:.3rem; margin:.3%; background:#fff; } .productImages{ position:relative; width:100%; height:auto; display:block; padding-bottom:100%; box-sizing:border-box; } .productImage{ margin:auto; max-width:85%; height:auto; display:none; position:absolute; z-index:1; top:0; left:0; right:0; bottom:0;box-sizing:border-box;} .productImage:nth-child(1){display:block;} .imageThumbs{display:flex;width:100%;justify-content: center;margin:0px auto;} .imageThumbsItem{ display:block; border:solid 1px #dedede; width:1rem; height:1rem; border-radius:50%; margin:1%; box-sizing:border-box; cursor:pointer; } </style> <scr
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
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
JSON Nesne Ayırıcı
Kodlar <!DOCTYPE html> <html> <body> <style> .objeTablo th, .objeTablo tr, .objeTablo td { padding: 5px; border: solid 1px #f00; color: #717171; text-align: center; } </style> <label>Listelenecek Objeyi Gir</label><br/> <input type="text" name="obje" /><br/><input type="button" value="Obje Göster" onclick="objGoster()" /><br/> <textarea col="50" rows="20" name="jsonGir"></textarea> <table id="tabloIcerik" class="objeTablo" style="max-width: 800px; height: auto; border: solid 1px #f00;" cellspacing="0" cellpadding="0"> <tr> <th> Nesne </th> <th>
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
Javascript İle URL Yönlendirme Nasıl Yapılır?
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>
Basit JQuery Slider (Responsive)
JQuery ile basit bir slider çalışması yaptım. Bu çalışmamda birbiri üstüne absolute konumlu dizilen a ve img elemanları sırayla kullanıcılara gösteriliyor. Geçiş efekti olarak JQuery'nin fadeIn ve fadeOut fonksiyonlarını kullandım. Sayfanın yüklenme anında resimKut id'li div elemanının içindeki a elemanlarını saydırıyor ve sırasıyla fadeIn-fadeOut efektlerini elemanlara uygulatarak slaytlar arasında geçişi sağlıyorum. a ve img elemanlarına sahip oldukları CSS'ler yine sayfanın yüklenme anında JQuery'nin css() fonksiyonuyla veriliyor. Böylece sliderı düzenlerken stil kodlarıyla uğraşmak zorunda kalmıyorsunuz. Slider'ı responsive olacak şekilde kodladım . Slider görselleri içinde bulundukları elemanın genişliğine göre otomatik olarak boyutlandırılıyor. Yine çalışma anında slider'da bulunan a'ların yükseklik değerini alıyor ve bunu resimKut id'li elemana atıyorum. Bunu yapma sebebim resimKut elamanını position değerinin relative, içindeki a