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

Amazon Affiliate Link Oluşturucu

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

<!DOCTYPE html>
<html>
<body >

}
function closeContainer(elem,event){
if(event.target == elem){
  elem.style.display="none";
  document.getElementById("containerStarter").innerHTML="Göz Egzersizini Yeniden Başlat";
  document.querySelectorAll(".oneEye")[0].style.left=0;
  document.querySelectorAll(".oneEye")[0].style.top=0;
  }
}
</script>

</body>
</html>

</html>

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

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


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

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.

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.5s ease 0s;

width:auto;

height: auto;

display: none;

padding:10px 15px;

border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 2px;

z-index: 99999;

line-height: 30px;

border:solid 1px #e7e7e7;

-webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 3px 0px;

-moz-box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 3px 0px;

box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 3px 0px;

}

.scrollToTopBtnShow{

display: block;

}

.scrollToTopBtn:hover{

background-color:#079992;

border:solid 1px #079992;

color:#fff;

}

@media only screen and (max-width: 768px) {

.scrollToTopBtn{

font-size: 15px;

}

.scrollToTopBtn:hover{

background-color:#e7e7e7;

border:solid 1px #e7e7e7;

color:#555;

}

</style>

⇡ Başa Dön

JavaScript ile Mesai Sayacı

Javascript Geri Sayım Sayacı Countdown Timer

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 = document.getElementById("timeInputId");

timeInput.onkeydown=function(e){
      
    if(!isNaN(e.key)){
     clearInterval(x);
          if(this.value.length == 2)
          {
              this.value=this.value+":";
          }
          if(this.value.length == 5)
          {
              this.value=this.value+":";
          }
          if(this.value.length >= 8)
          {
              this.value=this.value.substring(0,8);
          }
      }
      else{
      	this.value="";
        
      }
    };
    timeBtn.onclick=function(){
    if(timeInput.value.length >= 8)
        {
        timeInput.value=timeInput.value.substring(0,8);
        	finishTime=timeInput.value;
            startTmr();
        }
    	
    };

});

function startTmr(){
finishTime =finishTime.split(":");
var ft =new Date();
 finishTime=ft.setHours(finishTime[0],finishTime[1],finishTime[2]);

var countDownDate = finishTime;

x = setInterval(function() {

var now = new Date().getTime();
    
   var distance = countDownDate - now;
    
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    if(hours < 10) hours="0"+hours;
     if(minutes < 10) minutes="0"+minutes;
     if(seconds < 10) seconds="0"+seconds;

document.getElementById("demo").innerHTML ="Mesai Bitimi İçin Ayarlanan Tarih : "+ft+"<br/> Mesai Bitimine Kalan Süre:<br/> <h2 style='color:red;text-align:center;'>"+   hours + " : "
  + minutes + " : " + seconds+" </h2>";
  if(!document.hasFocus()){
   document.title ="Kalan Süre : "+hours +":"+minutes+":"+seconds;
  }
  else{
  document.title=brTitle;
  }

if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Mesai Bitti";
	document.title="Mesai Bitti";
  }
}, 1000);

}

</script>

Kodları yazarken https://www.w3schools.com/howto/howto_js_countdown.asp linkindeki sayfadan yararlandım

Kodun çalışan örneğini buraya ekliyorum. Dilerseniz günün bir saatini girip kalan sürenin geriye doğru sayılmasını deneyimleyebilirsiniz.

Lütfen mesai bitiş saatini girin

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ı

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

İş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;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

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.

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

Kodlar

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.

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

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>

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

var parent;

var imgOrd;

var upParent;

var allItems=document.getElementsByClassName("imageThumbsItem");

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

allItems[i].addEventListener("mouseover",function(){

parent = this.parentElement;

imgOrd=Array.prototype.indexOf.call(parent.children, this);

upParent=parent.parentElement;

var underImgs=upParent.getElementsByTagName('img');

for (j=0;j<underImgs.length;j++){

underImgs[j].style.display="none";

}

underImgs[imgOrd].style.display="block";

});

}

});

</script>

</div>

</div>

</div>

</div>

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

window.onload=function(){

/*eklenecek içerik*/

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

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.

Sıralama Bilgileri

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>

Nesne Değeri

</th>

</tr>

</table>

<script>
function objGoster(){
var jsonVeri = document.getElementsByName("jsonGir")[0].value;

var jsonAra = document.getElementsByName("obje")[0].value;

var obj = JSON.parse(jsonVeri);

var icerik = "";

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

icerik += "<tr><td> " +jsonAra + " </td><td> " + obj[i][jsonAra] + " </td></tr>";

}

document.getElementById("tabloIcerik").innerHTML = icerik;
}

</script>

</body>

</html>

Listelenecek Objeyi Gir

Nesne	Nesne Değeri

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

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 ve img elemanlarının absolute olmasıdır. Bu durumda içteki elemanları resimKutid'li elemanlardan boyutça bağımsız olacağından sayfa içine doğru yerleşemez, sayfada içeriğinin üstünde çıkar ve sayfa içeriğinin bir kısmının görünmesine engel olur. resimKut id'li dive yüksekli değeri vererek içerikteki diğer elemanları yükseklik kadar kaydırmış oluyorum.

Yükseklik hesaplaması sayfa boyutundaki değişmelere duyarlıdır ve sayfa genişliği değiştikçe otomatik olarak yeniden ayarlanır. Bu özellikle kullanıcılar tablet, telefon gibi cihazları dikey - yatay döndürdükçe sliderın konumlandırma ve boyutlandırma işlemlerinin doğru bir şekilde yapılması için gereklidir.

Son olarak bu kadar zahmete neden katlandım diye sorarsanız sırf standart ul-li yapısını kullanmamak için. Bu yapıyı tinyMCE editör gibi kodlama kısıtlaması olan editörler kullanırken site içeriğine rahatça slider eklenebilmesi için tasarladım

<div id="resimKut" style="position: relative; display: block; width: 100%; height: 400px;">
<a href="#1"><img src="tugla-duvar.jpg"/></a>
<a href="#2"><img src="bugday-tarlasi.jpg" /></a>
<a href="#3"><img src="flamanli-ampul.jpg" /></a>
<a href="#4"><img src="soru-isaretleri.jpg" /></a>
<a href="#5"><img src="baykus-resmi.jpg" /></a>
</div>
<script>
// <![CDATA[
var i = 1;
var baslatici;
var ici = $('#resimKut a');
var k = 0;
window.onload = function() {
$('#resimKut').height(ici.height());
baslat();
}

function baslat() {
for (j = ici.length; j >= 0; j--) {
$('#resimKut a:nth-child(' + j + ')').css({
'z-index': k,
'display': 'block',
'width': '100%',
'height': 'auto',
'position': 'absolute',
'top': '0px'
});
$('#resimKut img:nth-child(' + j + ')').css({
'z-index': k,
'display': 'block',
'width': '100%',
'height': 'auto',
'position': 'absolute',
'top': '0px'
});
k++;
}
setInterval(cevir, 3000);
}
$(window).on('resize', function() {
$('#resimKut').height(ici.height());
});

function cevir() {
$('#resimKut a:nth-child(' + i + ')').fadeOut(1500);
i < ici.length ? i++ : i = 1;
$('#resimKut a:nth-child(' + i + ')').fadeIn(1500);
}
// ]]>
</script>
// <![CDATA[
var i = 1;
var baslatici;
var ici = $('#resimKut a');
var k = 0;
window.onload = function() {
$('#resimKut').height(ici.height());
baslat();
}

function baslat() {
for (j = ici.length; j >= 0; j--) {
$('#resimKut a:nth-child(' + j + ')').css({
'z-index': k,
'display': 'block',
'width': '100%',
'height': 'auto',
'position': 'absolute',
'top': '0px'
});
$('#resimKut img:nth-child(' + j + ')').css({
'z-index': k,
'display': 'block',
'width': '100%',
'height': 'auto',
'position': 'absolute',
'top': '0px'
});
k++;
}
setInterval(cevir, 3000);
}
$(window).on('resize', function() {
$('#resimKut').height(ici.height());
});

function cevir() {
$('#resimKut a:nth-child(' + i + ')').fadeOut(1500);
i < ici.length ? i++ : i = 1;
$('#resimKut a:nth-child(' + i + ')').fadeIn(1500);
}
// ]]>
</script>

Responsive JQuery Sliderımızın kodlarının canlı hali,

See the Pen Basit Responsive JQuery Slider Örneği by Turgut Arslan (@draguth) on CodePen.

Turgut Arslan