Javascript Örnekleri

Bu sayfada 40’dan fazla çeşitli zorluk seviyesine göre hazırlanmış JavaScript Örnekleri ve JavaScript Uygulamalarını kapsamaktadır. Basit, Döngülü, Şartlı ve Form uygulamalarını kapsayacak şekilde javascript örnek uygulamalarını kopyalayıp kullanabilirsiniz. JavaScript Örneklerine geçmeden önce javascript dili hakkında kısaca bir bilgi vermek gerekir. Yada JavaScript dili, yapısı ve nesneleri ile ilgili derslere göz atmak içinde JavaScript Dersleri yazısını okuyabilirsiniz.

JavaScript Nedir

Başlangıçta Brendan Eich tarafından geliştirilmiş ve ilk LiveScript olarak isimlendirilen programlama dili olan JavaScript, 1995 yılında yeniden adlandırılmıştır. JavaScript, bir web tasarımcısına kendi web sayfalarına kod ekleme olanağı veren, yorumlanmış bir istemci tarafı kodlama dili olmuştur. JavaScript genellikle bir HTML dosyasına yerleştirilir ve doğrudan web sayfasından çalışır. Saat ve tarihe basmak, bir takvim oluşturmak veya düz HTML ile mümkün olmayan diğer görevleri yapmak için kullanılır.

JavaScript ile Java Aynı Dil Değildir

JavaScript’e yeni başlayanların, web ortamında sık karşılaştığı bir kavram da javascript için kısaca java ifadesi kullanılması sorunudur. Java ile javaScript dilleri bir birinden çok ama çok farklı kavramlardır.

Java, bir makine ortamında bağımsız olarak çalıştırabileceği anlamına gelen, nesne yönelimli bir programlama dilidir. Android cihazlar için uygulamalar, terminaller için yazılımlar ve sunucu taraflı web sayfaları hazırlamak için kullanılan güvenilir bir dildir. Java uygulamarı çalışabilmesi için derlenmesi gerekir.

JavaScript, diğer taraftan, web tabanlı bir uygulamanın parçası olarak çalıştırılacak olan metin tabanlı bir programlama dilidir. İlk geliştirildiğinde, Java için bir iltifat olması amaçlandı. Ancak JavaScript, web geliştirme alanındaki üç temelden biri olarak hayatına devam ediyor. Diğeri HTML ve CSS dilleridir. JavaScript uygulamaları çalışabilmesi için tarayıcılar tarafından yorumlanması gerekir. Aşağıdaki JavaScript Kodlarını yazdıktan sonra her hangi bir tarayıcıda açıp uygulayabilirsiniz.

JavaScript Örnekleri Listesi (JavaScript Kodları Listesi)

Basit Dijital Saat Yapımı

[Basit] Web sayfalarınızda kullanabileceğiniz ve Sadece şart içeren basit javascript örneği. innerHTML yerine artık güncel tanımlama olan textContent özelliği ile içerik değiştirilmiştir.

DEMO


<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>Dijital Saat</title>
</head>

<body>
<h1>Bilgisayarın Şuanki Saati: <span id="zemin"> </span></h1>


<!-- script kodlarını </body> etitekinden hemen önce yazmayı unutmayın --> 
<script>
var saatZemin = document.getElementById("zemin");


function format(gelen) {
var StrYap = gelen.toString();
if (StrYap.length === 1) {
return "0" + StrYap;
} else {
return StrYap;
}
}

function saatGuncelle() {
var dd = new Date();
var hh = dd.getHours();
var mm = dd.getMinutes();
var ss = dd.getSeconds();
saatZemin.textContent = format(hh) + ":" + format(mm) + ":" + format(ss);
}

setInterval(saatGuncelle, 1000);

</script> 
</body>
</html>

<!doctype>

<html>

<head>

<title>Dijital Saat</title>

</head>

<body>

<h1>Bilgisayarın Şuanki Saati: <span id="zemin"> </span></h1>

var saatZemin = document.getElementById("zemin");

function format(gelen) {

var StrYap = gelen.toString();

if (StrYap.length === 1) {

return "0" + StrYap;

} else {

return StrYap;

}

function saatGuncelle() {

var dd = new Date();

var hh = dd.getHours();

var mm = dd.getMinutes();

var ss = dd.getSeconds();

saatZemin.textContent = format(hh) + ":" + format(mm) + ":" + format(ss);

}

setInterval(saatGuncelle, 1000);

</script>

</body>

</html>

Basit Tooltip Yapımı

[Zor] Bu örnek Şartlar, Döngüler DOM manipulasyonu ve JavaScript ile CSS tanımlamalarını içeren görece olarak zor sayılabilecek kullanışlı bir javascript örneğidir.

DEMO


<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>Dijital Saat</title>
<style>
#ornek{
position: absolute;
left:100px;
top:100px;
background: red;
color:white;
}

#ornek2{
position: absolute;
left:400px;
top:400px;
background: red;
color:white;
}
</style>
</head>

<body>
<p>Not:tooltip kullanmak için tooltip yapılacak nesneye <b>data-tooltip="gösterilecek açıklama" </b>şeklinde tanımlama yapılabilirsiniz</p>

<div><p id="ornek" data-tooltip="Merhaba bu tooltip uyarısıdır">Fareyi Getir</p></p>
<div><p id="ornek2" data-tooltip="Bu da ikinci tooltip">Fareyi Getir</p></p>


<!-- script kodlarını </body> etitekinden hemen önce yazmayı unutmayın --> 
<script>

(function () {
// © 2016 https://www.yazilimbilisim.net

// tooltip için div oluşturma
var toolTip = document.createElement("div");

// stil düzenlemesi
toolTip.style.visibility="hidden"; 
toolTip.style.position="fixed";
toolTip.style.top="1ex";
toolTip.style.left="1ex";
toolTip.style.borderRadius="5px";
toolTip.style.backgroundColor="#8d8daa";

// oluşturupan nesneyi DOM içine ekleme
document.body.appendChild(toolTip);

function tooltipGoster (olay) {
// üzerine geldiğimiz nesnenin konumunu tespit etme
var kutu = olay.target.getBoundingClientRect();
var coordX = kutu.left;
var coordY = kutu.top;

// kordinatlarını düzenleme
toolTip.style.left= (coordX + 40).toString() + "px";
toolTip.style.top= (coordY + 40).toString() + "px";

// ekranda gösterilecek nesne ve css ataması
toolTip.innerHTML = "<span style='font-size:16px;color:red;padding:5px;'>" + this.dataset.tooltip + "</span>";

// tooltip nesnesini ekranda gösterme
toolTip.style.visibility="visible";
}

function tooltipGizle(olay) {
toolTip.style.visibility="hidden";
}

//bütün tooltip nesnelerini yakalayıp hepsine olay atama işlemi yapılıyor
var uyarilar=document.querySelectorAll('[data-tooltip]');
for (var i = 0; i < uyarilar.length; i++) {
uyarilar[i].addEventListener("mouseover", tooltipGoster , false);
uyarilar[i].addEventListener("mouseout", tooltipGizle , false);
}

})();

</script> 
</body>
</html>

<!doctype>

<html>

<head>

<title>Dijital Saat</title>

<style>

#ornek{

position: absolute;

left:100px;

top:100px;

background: red;

color:white;

}

#ornek2{

position: absolute;

left:400px;

top:400px;

background: red;

color:white;

}

</style>

</head>

<body>

<p>Not:tooltip kullanmak için tooltip yapılacak nesneye <b>data-tooltip="gösterilecek açıklama" </b>şeklinde tanımlama yapılabilirsiniz</p>

<div><p id="ornek" data-tooltip="Merhaba bu tooltip uyarısıdır">Fareyi Getir</p></p>

<div><p id="ornek2" data-tooltip="Bu da ikinci tooltip">Fareyi Getir</p></p>

(function () {

// tooltip için div oluşturma

var toolTip = document.createElement("div");

// stil düzenlemesi

toolTip.style.visibility="hidden";

toolTip.style.position="fixed";

toolTip.style.top="1ex";

toolTip.style.left="1ex";

toolTip.style.borderRadius="5px";

toolTip.style.backgroundColor="#8d8daa";

// oluşturupan nesneyi DOM içine ekleme

document.body.appendChild(toolTip);

function tooltipGoster (olay) {

// üzerine geldiğimiz nesnenin konumunu tespit etme

var kutu = olay.target.getBoundingClientRect();

var coordX = kutu.left;

var coordY = kutu.top;

// kordinatlarını düzenleme

toolTip.style.left= (coordX + 40).toString() + "px";

toolTip.style.top= (coordY + 40).toString() + "px";

// ekranda gösterilecek nesne ve css ataması

toolTip.innerHTML = "<span style='font-size:16px;color:red;padding:5px;'>" + this.dataset.tooltip + "</span>";

// tooltip nesnesini ekranda gösterme

toolTip.style.visibility="visible";

}

function tooltipGizle(olay) {

toolTip.style.visibility="hidden";

}

//bütün tooltip nesnelerini yakalayıp hepsine olay atama işlemi yapılıyor

var uyarilar=document.querySelectorAll('[data-tooltip]');

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

uyarilar[i].addEventListener("mouseover", tooltipGoster , false);

uyarilar[i].addEventListener("mouseout", tooltipGizle , false);

}

})();

</script>

</body>

</html>

Sayı Tek mi Çift Mi

[Çok Basit] Text kutusuna girilen değerin tek, çift yada sayı olmadığını yazdıran program


<input type="text" onchange="kontrol(this)" value="">
<script>
 
 function kontrol(nesne){
 
 if(nesne.value%2==0)
 {
 alert(nesne.value+" sayısı çifttir");
 }
 else if(nesne.value%2==1)
 {
 alert(nesne.value+" sayısı tektir");
 }
 else
 {
 alert(nesne.value+" sayısı değildir");
 }
 
 
 }
 </script>

function kontrol(nesne){

if(nesne.value%2==0)

{

alert(nesne.value+" sayısı çifttir");

}

else if(nesne.value%2==1)

{

alert(nesne.value+" sayısı tektir");

}

else

{

alert(nesne.value+" sayısı değildir");

}

</script>

Sayfayı 5 saniyede bir yenileme kodu

Arrow fonksiyon ile sayfayı 5 saniyede bir yenileme


<script>
setInterval(()=>window.location.reload(false),5000);
</script>

setInterval(()=>window.location.reload(false),5000);

</script>

Anonim fonksiyon ile sayfayı 5 saniyede bir yenileme kodu


<script>
setInterval(function(){
window.location.reload(false);
},5000);
</script>

setInterval(function(){

window.location.reload(false);

},5000);

</script>

JavaScript Integral Alma

Şeklindeki bir alanın hesaplanması için integral alma yöntemi kullanılmaktadır. Yukarıdaki integralin hesaplaması için aşağıdaki javascript örneğini kullanabilirsiniz. İntegral alma ile daha detaylı bilgi için c# integral alma konusunu inceleybilirsiniz.


<script>

/*Math nesnesine dahil edilmiş olarak kullanımı*/
/* Math.integral */
Math.integral=function(a,b,c,xa,xb,h)
{

var xp,y,s,sonuc=0,g=(xb-xa)/h;
for(var i=0;i<h;i++)
{
xp = xa + g;
y = (a * Math.pow(xp, 2)) + (b * xp) + c;
s = g * y;
sonuc += s;
}

return sonuc;
}

/*Örnek kullanım*/
window.alert( Math.integral(1,4,2,10,50,100) );

</script>

/*Math nesnesine dahil edilmiş olarak kullanımı*/

/* Math.integral */

Math.integral=function(a,b,c,xa,xb,h)

{

var xp,y,s,sonuc=0,g=(xb-xa)/h;

for(var i=0;i<h;i++)

{

xp = xa + g;

y = (a * Math.pow(xp, 2)) + (b * xp) + c;

s = g * y;

sonuc += s;

}

return sonuc;

}

/*Örnek kullanım*/

window.alert( Math.integral(1,4,2,10,50,100) );

</script>

Çemberin çevresi;

[Basit] Javascript ile fonksiyon tanımlaması hazırlanıp, hazırlanan bu metodu tıklama olayına bağlandığı basit javascript örneği


<input type="text" id="yaricap" placeholder="Yarı çap uzunluğunu girin">
<input type="button" value="Hesapla" id="hesapla">
<script>
//fonksiyonu tanımladık.
function hesapla(){
//text kutusu içindeki değeri okuyup sayi değişkenine aktarıyoruz.
var sayi=document.getElementById("yaricap").value;

//text kutusuna girilen değerler metinsel türdedir. Hesaplama yapabilmek için sayıya çeviriyoruz.
sayi=Number(sayi);
var cevre=Math.PI*sayi*2;
alert("Çemberin:"+cevre.toFixed(2));

}


//hesaplama yapması için hesap butonunu seçiyoruz.
var hesapBtn=document.getElementById("hesapla");

//fonksiyonu olaya bağlıyoruz.
hesapBtn.onclick=hesapla;


</script>

//fonksiyonu tanımladık.

function hesapla(){

//text kutusu içindeki değeri okuyup sayi değişkenine aktarıyoruz.

var sayi=document.getElementById("yaricap").value;

//text kutusuna girilen değerler metinsel türdedir. Hesaplama yapabilmek için sayıya çeviriyoruz.

sayi=Number(sayi);

var cevre=Math.PI*sayi*2;

alert("Çemberin:"+cevre.toFixed(2));

}

//hesaplama yapması için hesap butonunu seçiyoruz.

var hesapBtn=document.getElementById("hesapla");

//fonksiyonu olaya bağlıyoruz.

hesapBtn.onclick=hesapla;

</script>

Kürenin alanını hesaplama;

[Basit]


<input type="text" id="yaricap" placeholder="Yarı çap uzunluğunu girin">
<input type="button" value="Hesapla" id="hesapla">
<script>
//fonksiyonu tanımladık.
function hesapla(){
//text kutusu içindeki değeri okuyup sayi değişkenine aktarıyoruz.
var sayi=document.getElementById("yaricap").value;

//text kutusuna girilen değerler metinsel türdedir. Hesaplama yapabilmek için sayıya çeviriyoruz.
sayi=Number(sayi);
var alan=4*Math.PI*sayi*sayi;
alert("Kürenin Alanı:"+alan.toFixed(2));

}


//hesaplama yapması için hesap butonunu seçiyoruz.
var hesapBtn=document.getElementById("hesapla");

//fonksiyonu olaya bağlıyoruz.
hesapBtn.onclick=hesapla;


</script>

//fonksiyonu tanımladık.

function hesapla(){

//text kutusu içindeki değeri okuyup sayi değişkenine aktarıyoruz.

var sayi=document.getElementById("yaricap").value;

//text kutusuna girilen değerler metinsel türdedir. Hesaplama yapabilmek için sayıya çeviriyoruz.

sayi=Number(sayi);

var alan=4*Math.PI*sayi*sayi;

alert("Kürenin Alanı:"+alan.toFixed(2));

}

//hesaplama yapması için hesap butonunu seçiyoruz.

var hesapBtn=document.getElementById("hesapla");

//fonksiyonu olaya bağlıyoruz.

hesapBtn.onclick=hesapla;

</script>

window.setTimeOut Örneği

[Basit]


<h1>Zamanlayıcı Örnek window.setTimeOut()</h1>
<button onclick="uyariVer();">3 saniye sonra uyarı ver</button>
<button onclick="zamanlamaIptal();">Zamanlamayı İptal Et</button>

<script>
var timerId;

function uyariVer() {
timerId = window.setTimeout(zamanlayici, 3000);
}

function zamanlayici() {
alert("tıklama üzerinden 3000ms geçti");
}

function zamanlamaIptal() {
window.clearTimeout(timerId);
}
</script>

<h1>Zamanlayıcı Örnek window.setTimeOut()</h1>

<button onclick="uyariVer();">3 saniye sonra uyarı ver</button>

<button onclick="zamanlamaIptal();">Zamanlamayı İptal Et</button>

var timerId;

function uyariVer() {

timerId = window.setTimeout(zamanlayici, 3000);

}

function zamanlayici() {

alert("tıklama üzerinden 3000ms geçti");

}

function zamanlamaIptal() {

window.clearTimeout(timerId);

}

</script>

İki kenarı girilen dikdörtgenin çevresi;

[Basit]


<input type="text" id="kenar1" placeholder="Kısa kenar">
<input type="text" id="kenar2" placeholder="Uzun kenar">
<input type="button" value="Hesapla" id="hesapla">
<script>

function hesapla(){

var k1=document.getElementById("kenar1").value;
var k2=document.getElementById("kenar2").value;

k1=Number(k1);
k2=Number(k2);
var cevre=(k1+k2)*2;
alert("İki kenarı girilen dikdörtgenin çevresi:"+cevre);

}


//hesaplama yapması için hesap butonunu seçiyoruz.
var hesapBtn=document.getElementById("hesapla");

//fonksiyonu olaya bağlıyoruz.
hesapBtn.onclick=hesapla;


</script>

function hesapla(){

var k1=document.getElementById("kenar1").value;

var k2=document.getElementById("kenar2").value;

k1=Number(k1);

k2=Number(k2);

var cevre=(k1+k2)*2;

alert("İki kenarı girilen dikdörtgenin çevresi:"+cevre);

}

//hesaplama yapması için hesap butonunu seçiyoruz.

var hesapBtn=document.getElementById("hesapla");

//fonksiyonu olaya bağlıyoruz.

hesapBtn.onclick=hesapla;

</script>

İki kenar girilen dikdörtgenin alanı;

[Basit]


<input type="text" id="kenar1" placeholder="Kısa kenar">
<input type="text" id="kenar2" placeholder="Uzun kenar">
<input type="button" value="Hesapla" id="hesapla">
<script>

function hesapla(){

var k1=document.getElementById("kenar1").value;
var k2=document.getElementById("kenar2").value;

k1=Number(k1);
k2=Number(k2);
var alan=k1*k2;
alert("İki kenarı girilen dikdörtgenin alanı:"+alan);

}


//hesaplama yapması için hesap butonunu seçiyoruz.
var hesapBtn=document.getElementById("hesapla");

//fonksiyonu olaya bağlıyoruz.
hesapBtn.onclick=hesapla;


</script>

function hesapla(){

var k1=document.getElementById("kenar1").value;

var k2=document.getElementById("kenar2").value;

k1=Number(k1);

k2=Number(k2);

var alan=k1*k2;

alert("İki kenarı girilen dikdörtgenin alanı:"+alan);

}

//hesaplama yapması için hesap butonunu seçiyoruz.

var hesapBtn=document.getElementById("hesapla");

//fonksiyonu olaya bağlıyoruz.

hesapBtn.onclick=hesapla;

</script>

Kilometreyi mile dönüştürme;

[Basit]


<input type="text" id="uzunluk" placeholder="Kilometre uzunluğunu girin">
<input type="button" value="Hesapla" id="hesapla">
<script>
/* MİL=0,621.X kilometre mil formülü*/ 
function hesapla(){

var sayi=document.getElementById("uzunluk").value;

sayi=Number(sayi);
var mil=0.621*sayi;
alert(sayi+"km="+mil.toFixed(2)+"mil'dir");

}


//hesaplama yapması için hesap butonunu seçiyoruz.
var hesapBtn=document.getElementById("hesapla");

//fonksiyonu olaya bağlıyoruz.
hesapBtn.onclick=hesapla;


</script>

/* MİL=0,621.X kilometre mil formülü*/

function hesapla(){

var sayi=document.getElementById("uzunluk").value;

sayi=Number(sayi);

var mil=0.621*sayi;

alert(sayi+"km="+mil.toFixed(2)+"mil'dir");

}

//hesaplama yapması için hesap butonunu seçiyoruz.

var hesapBtn=document.getElementById("hesapla");

//fonksiyonu olaya bağlıyoruz.

hesapBtn.onclick=hesapla;

</script>

JavaScript: Butona Tıklayınca Sayıyı Arttırma / Azaltma

[Orta]

DEMO


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
input[type="button"]{
width: 200px;
height: 200px;
border:none;
font-size:3em;
background: #FF6766;
color:#E7E7E7;
}

</style>
<title>YAZILIM BİLİŞİM</title>

</head>
<body>
<input type=button onclick="arttir()" value="+">
<input type=button onclick="azalt()" value="-">
<input type=button id="sonuc" value="0">

<script>
function arttir(){

var sonuc=document.getElementById("sonuc");
sonuc.value=Number(sonuc.value)+1;
}

function azalt(){

var sonuc=document.getElementById("sonuc");
sonuc.value=Number(sonuc.value)-1;
}

</script>
</body>
</html>

<!doctype html>

<html>

<head>

<style>

input[type="button"]{

width: 200px;

height: 200px;

border:none;

font-size:3em;

background: #FF6766;

color:#E7E7E7;

}

</style>

<title>YAZILIM BİLİŞİM</title>

</head>

<body>

function arttir(){

var sonuc=document.getElementById("sonuc");

sonuc.value=Number(sonuc.value)+1;

}

function azalt(){

var sonuc=document.getElementById("sonuc");

sonuc.value=Number(sonuc.value)-1;

}

</script>

</body>

</html>

Üçgenin Alanını Hesaplama

[Basit]


<input type="text" id="kenar1" placeholder="Taban Uzunluğunu Girin">
<input type="text" id="kenar2" placeholder="Yüksekliği Girin">
<input type="button" value="Hesapla" id="hesapla" onclick="hesapla()">
<script>
 
 
function hesapla(){
//text kutusu içindeki değerleri okuyup sayi1,sayi2 değişkenine aktarıyoruz.
var sayi1=document.getElementById("kenar1").value;
var sayi2=document.getElementById("kenar2").value;
 
//text kutusuna girilen değerler metinsel türdedir. Hesaplama yapabilmek için sayıya çeviriyoruz.
sayi1=Number(sayi1);
sayi2=Number(sayi2);
 
var alan=sayi1*sayi2/2;
alert("Üçgenin alanı:"+alan);
 
 
}
 
</script>

function hesapla(){

//text kutusu içindeki değerleri okuyup sayi1,sayi2 değişkenine aktarıyoruz.

var sayi1=document.getElementById("kenar1").value;

var sayi2=document.getElementById("kenar2").value;

//text kutusuna girilen değerler metinsel türdedir. Hesaplama yapabilmek için sayıya çeviriyoruz.

sayi1=Number(sayi1);

sayi2=Number(sayi2);

var alan=sayi1*sayi2/2;

alert("Üçgenin alanı:"+alan);

}

</script>

JavaScript: Farenin Konumunu Öğrenme

[Orta]

DEMO


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>YAZILIM BİLİŞİM</title>
</head>
<style>
.konum{
width: 250px;
height: 50px;
line-height: 50px;
font-size: 2em;
background: #64DDBB;
color:#D33257;
padding:5px;
margin:5px;
}
#kutu{
/* ÖNEMLİ NOT: HAREKET ETTİRİLECEK NESNENİN POZİSYON DEĞERİ ABSOLUTE OLMAK ZORUNDA!!!*/
position: absolute;
width: 100px;
height: 100px;
background: #FF7416;
}
</style>
<body>
<div id="x" class="konum">X</div>
<div id="y" class="konum">Y</div>
<div id="kutu"></div>
 
</body>
<script>
//window (taraycı penceresi) üzerinde fare hareket ettirildikçe çalışacak kodlar
window.onmousemove=function(olay)
{
//gerçekleşen olayla ilgili tüm bilgi olay değişkenine aktarılıyor.
 
var xpos=document.getElementById('x');
var ypos=document.getElementById('y');
var kutu=document.getElementById('kutu');
 
//clientX: farenin x eksenindeki konumu
//clientY farenin y eksenindeki konumu
xpos.innerHTML=olay.clientX;
ypos.innerHTML=olay.clientY;
 
//ÖNEMLİ NOT: HAREKET ETTİRİLECEK NESNENİN POZİSYON DEĞERİ ABSOLUTE OLMAK ZORUNDA!!!
kutu.style.left=olay.clientX+"px";
kutu.style.top=olay.clientY+"px";
 
} 
</script>
</html>

<!doctype html>

<html>

<head>

<title>YAZILIM BİLİŞİM</title>

</head>

<style>

.konum{

width: 250px;

height: 50px;

line-height: 50px;

font-size: 2em;

background: #64DDBB;

color:#D33257;

padding:5px;

margin:5px;

}

#kutu{

/* ÖNEMLİ NOT: HAREKET ETTİRİLECEK NESNENİN POZİSYON DEĞERİ ABSOLUTE OLMAK ZORUNDA!!!*/

position: absolute;

width: 100px;

height: 100px;

background: #FF7416;

}

</style>

<body>

</body>

//window (taraycı penceresi) üzerinde fare hareket ettirildikçe çalışacak kodlar

window.onmousemove=function(olay)

{

//gerçekleşen olayla ilgili tüm bilgi olay değişkenine aktarılıyor.

var xpos=document.getElementById('x');

var ypos=document.getElementById('y');

var kutu=document.getElementById('kutu');

//clientX: farenin x eksenindeki konumu

//clientY farenin y eksenindeki konumu

xpos.innerHTML=olay.clientX;

ypos.innerHTML=olay.clientY;

//ÖNEMLİ NOT: HAREKET ETTİRİLECEK NESNENİN POZİSYON DEĞERİ ABSOLUTE OLMAK ZORUNDA!!!

kutu.style.left=olay.clientX+"px";

kutu.style.top=olay.clientY+"px";

}

</script>

</html>

JavaScript Fareyi Takip Eden Kutu Örneği

[Zor]


<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Fareyi Takip Eden Kutu</title>

<style>
body{
background: #3C3741;
}
#kutu{
background: #FD5B03;
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
}
</style>
</head>

<body>
<div id="kutu">
</div>

<script>
/*script etiketini body kapatma etiketinden hemen önce yazdım. 
hız ve nesnelerin yüklenmesi açısından kullanılan bir yöntemdir.*/
var kutu=document.getElementById("kutu");
kutu.style.position="absolute"; 
window.onmousemove=function(e){
kutu.style.left=e.clientX+"px";
kutu.style.top=e.clientY+"px";
//console.log(e.offsetX);
}
</script> 
</body>

</html>

<!doctype html>

<html>

<head>

<title>Fareyi Takip Eden Kutu</title>

<style>

body{

background: #3C3741;

}

#kutu{

background: #FD5B03;

width: 200px;

height: 200px;

border-radius: 50%;

position: absolute;

}

</style>

</head>

<body>

</div>

/*script etiketini body kapatma etiketinden hemen önce yazdım.

hız ve nesnelerin yüklenmesi açısından kullanılan bir yöntemdir.*/

var kutu=document.getElementById("kutu");

kutu.style.position="absolute";

window.onmousemove=function(e){

kutu.style.left=e.clientX+"px";

kutu.style.top=e.clientY+"px";

//console.log(e.offsetX);

}

</script>

</body>

</html>

JavaScript Arkaplanı rastgele Değiştirme (setInterval)

[Basit] Sayfanın arkaplanını 1 saniye süreyle rastgele belirlenen bir renge göre değiştirme örneği;

DEMO


<body onload="renkInterval()">

<script>
var inervalID;

function renkInterval() {
inervalID = setInterval(uyariVer, 1000);
}

function uyariVer() {
var renk1= Math.floor(255*Math.random());
var renk2= Math.floor(255*Math.random());
var renk3= Math.floor(255*Math.random());
console.log(renk1);
document.body.style.backgroundColor="rgb("+renk1+","+renk2+","+renk3+")";
}
</script>
</body>

var inervalID;

function renkInterval() {

inervalID = setInterval(uyariVer, 1000);

}

function uyariVer() {

var renk1= Math.floor(255*Math.random());

var renk2= Math.floor(255*Math.random());

var renk3= Math.floor(255*Math.random());

console.log(renk1);

document.body.style.backgroundColor="rgb("+renk1+","+renk2+","+renk3+")";

}

</script>

</body>

Javascript:Faktöriyel Hesaplama Örneği

[Orta]


<input type="text" id="sayi" placeholder="Faktöriyeli hesaplanacak sayıyı giriniz">

<input type="button" value="Hesapla" id="hesapla">
<script>

function hesapla(){
/* çarpma işlemi yapılacaktır. çarpmanın etkisiz elemanı 1dir.*/
var faktoriyel=1;
var sayi=document.getElementById("sayi").value;
sayi=Number(sayi);

/*faktöriyel işlemi sıfır ve üzerindeki sayılar için yapılır.*/
if(sayi>=0)
{

for(var i=1;i<=sayi;i++)
{
faktoriyel=faktoriyel*i;
}
/*sıfır altındaki değerler için faktöriyel işlemini göstermeyecektir.*/
window.alert(sayi+" sayisinin faktöriyeli "+faktoriyel);
}


}


//hesaplama yapması için hesap butonunu seçiyoruz.
var hesapBtn=document.getElementById("hesapla");

//fonksiyonu olaya bağlıyoruz.
hesapBtn.onclick=hesapla;


</script>

function hesapla(){

/* çarpma işlemi yapılacaktır. çarpmanın etkisiz elemanı 1dir.*/

var faktoriyel=1;

var sayi=document.getElementById("sayi").value;

sayi=Number(sayi);

/*faktöriyel işlemi sıfır ve üzerindeki sayılar için yapılır.*/

if(sayi>=0)

{

for(var i=1;i<=sayi;i++)

{

faktoriyel=faktoriyel*i;

}

/*sıfır altındaki değerler için faktöriyel işlemini göstermeyecektir.*/

window.alert(sayi+" sayisinin faktöriyeli "+faktoriyel);

}

//hesaplama yapması için hesap butonunu seçiyoruz.

var hesapBtn=document.getElementById("hesapla");

//fonksiyonu olaya bağlıyoruz.

hesapBtn.onclick=hesapla;

</script>

JavaScript: Sayıyı Yazıya Çevirme

[Zor]


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Resonsive Tasarım | YAZILIMBILISIN.NET</title>

<style>
body {
width: 80%;
max-width: 1200px;
margin: 40px auto;
font: normal 14px/1.5 "Montserrat", "Helvetica Neue", sans-serif;
background: #cfd8dc;
color: #37474f;
}
.kutu{
background: whitesmoke;
margin: 0 0 40px;
box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
width:50%;
}
#sayi{
width: 90%;
padding:10px 5%;
border:none;
outline: none;
margin-bottom:10px;
}
#goster{
text-align: center;
font-size: 1.5em;
}

</style>
</head>
<body>

<div class="kutu">
<input type="number" id="sayi" placeholder="Sayı Giriniz">
<div id="goster">

</div>
</div>
<script>
/*not script dosyasını body kapatma etikeninin hemen üzerine yazınız.*/
var sayi= document.getElementById("sayi"); // input kutusunu

//sayı kutusunda tuşa basıldığında
sayi.onkeyup=function(){
var goster=document.getElementById("goster");//div etiketi

var islem=new SayiDonustur(this.value);
goster.innerHTML=islem.sonuc;
}
/*sayı gösterme işlemini yapacak sınıf*/
function SayiDonustur(sayi){

sayi=String(sayi);
this.sonuc;

let bolum1 = ["", "bir", "iki", "üç", "dört", "beş", "altı", "yedi", "sekiz", "dokuz"];
let bolum2 = ["", "on", "yirmi", "otuz", "kırk", "elli", "altmış", "yetmiş", "seksen", "doksan"];
let bolum3 = ["", "yüz", "bin", "milyon", "milyar", "trilyon", "katrilyon"];

let sayi1; //tam kısım
let sayi2 = ""; // ondalıklı kısım
let sonuc = "";

sayi = sayi.replace(",", "."); //virgül girilirse noktaya dönüştürülüyor

if (sayi.indexOf(".") > 0)
{ // nokta varsa (kuruş)

sayi1 = sayi.substring(0, sayi.indexOf(".")); // tam kısım
sayi2 = sayi.substring(sayi.indexOf("."), sayi.length); // ondalıklı kısım

}
else
{
sayi1 = sayi; // ondalık yok
}

var rk = sayi1.split(""); // rakamlara ayırma

let son;
let w = 1; // işlenen basamak
var sonaekle = 0; // binler on binler yüzbinler vs. için sona bin (milyon,trilyon...) eklenecek mi?
let kac = rk.length; // kaç rakam var?
let sonint; // işlenen basamağın rakamsal değeri
let uclubasamak = 0; // hangi basamakta (birler onlar yüzler gibi)
let artan = 0;  // binler milyonlar milyarlar gibi artışları yapar
let gecici;

if (kac > 0) { // virgül öncesinde rakam var mı?

for (i = 0; i < kac; i++)
{
son = rk[kac - 1 - i]; // son karakterden başlayarak çözümleme yapılır.
sonint = parseInt(son); // işlenen rakam
if (w == 1)
{ // birinci basamak bulunuyor
sonuc = bolum1[sonint] + sonuc;
}
else if (w == 2)
{ // ikinci basamak
sonuc = bolum2[sonint] + sonuc;
}
else if (w == 3)
{ // 3. basamak
if (sonint == 1)
{
sonuc = bolum3[1] + sonuc;
}
else if (sonint > 1)
{
sonuc = bolum1[sonint] + bolum3[1] + sonuc;
}
uclubasamak++;
}
if (w > 3)
{    // 3. basamaktan sonraki işlemler
if (uclubasamak == 1)
{
if (sonint > 0)
{
sonuc = bolum1[sonint] + bolum3[2 + artan] + sonuc;
if (artan == 0)
{ // birbin yazmasını engelle
if(kac-1==i)
{ //
sonuc = sonuc.replace(bolum1[1] + bolum3[2], bolum3[2]);
}
}
sonaekle = 1; // sona bin eklendi
}
else
{
sonaekle = 0;
}
uclubasamak++;

}
else if (uclubasamak == 2)
{
if (sonint > 0)
{
if (sonaekle > 0)
{
sonuc = b2[sonint] + sonuc;
sonaekle++;
}
else
{
sonuc = b2[sonint] + b3[2 + artan] + sonuc;
sonaekle++;
}
}
uclubasamak++;

} else if (uclubasamak == 3)
{
if (sonint > 0)
{
if (sonint == 1)
{
gecici = b3[1];
}
else
{
gecici = b1[sonint] + b3[1];
}
if (sonaekle == 0)
{
gecici = gecici + b3[2 + artan];
}
sonuc = gecici + sonuc;
}
uclubasamak = 1;
artan++;
}

}
w++; // işlenen basamak
}

}

this.sonuc=sonuc;
}
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

<!doctype html>

<html>

<head>

<title>Resonsive Tasarım | YAZILIMBILISIN.NET</title>

<style>

body {

width: 80%;

max-width: 1200px;

margin: 40px auto;

font: normal 14px/1.5 "Montserrat", "Helvetica Neue", sans-serif;

background: #cfd8dc;

color: #37474f;

}

.kutu{

background: whitesmoke;

margin: 0 0 40px;

box-shadow: 0px 2px 4px rgba(0,0,0,0.2);

width:50%;

}

#sayi{

width: 90%;

padding:10px 5%;

border:none;

outline: none;

margin-bottom:10px;

}

#goster{

text-align: center;

font-size: 1.5em;

}

</style>

</head>

<body>

</div>

/*not script dosyasını body kapatma etikeninin hemen üzerine yazınız.*/

var sayi= document.getElementById("sayi"); // input kutusunu

//sayı kutusunda tuşa basıldığında

sayi.onkeyup=function(){

var goster=document.getElementById("goster");//div etiketi

var islem=new SayiDonustur(this.value);

goster.innerHTML=islem.sonuc;

}

/*sayı gösterme işlemini yapacak sınıf*/

function SayiDonustur(sayi){

sayi=String(sayi);

this.sonuc;

let bolum1 = ["", "bir", "iki", "üç", "dört", "beş", "altı", "yedi", "sekiz", "dokuz"];

let bolum2 = ["", "on", "yirmi", "otuz", "kırk", "elli", "altmış", "yetmiş", "seksen", "doksan"];

let bolum3 = ["", "yüz", "bin", "milyon", "milyar", "trilyon", "katrilyon"];

let sayi1; //tam kısım

let sayi2 = ""; // ondalıklı kısım

let sonuc = "";

sayi = sayi.replace(",", "."); //virgül girilirse noktaya dönüştürülüyor

if (sayi.indexOf(".") > 0)

{ // nokta varsa (kuruş)

sayi1 = sayi.substring(0, sayi.indexOf(".")); // tam kısım

sayi2 = sayi.substring(sayi.indexOf("."), sayi.length); // ondalıklı kısım

}

else

{

sayi1 = sayi; // ondalık yok

}

var rk = sayi1.split(""); // rakamlara ayırma

let son;

let w = 1; // işlenen basamak

var sonaekle = 0; // binler on binler yüzbinler vs. için sona bin (milyon,trilyon...) eklenecek mi?

let kac = rk.length; // kaç rakam var?

let sonint; // işlenen basamağın rakamsal değeri

let uclubasamak = 0; // hangi basamakta (birler onlar yüzler gibi)

let artan = 0; // binler milyonlar milyarlar gibi artışları yapar

let gecici;

if (kac > 0) { // virgül öncesinde rakam var mı?

for (i = 0; i < kac; i++)

{

son = rk[kac - 1 - i]; // son karakterden başlayarak çözümleme yapılır.

sonint = parseInt(son); // işlenen rakam

if (w == 1)

{ // birinci basamak bulunuyor

sonuc = bolum1[sonint] + sonuc;

}

else if (w == 2)

{ // ikinci basamak

sonuc = bolum2[sonint] + sonuc;

}

else if (w == 3)

{ // 3. basamak

if (sonint == 1)

{

sonuc = bolum3[1] + sonuc;

}

else if (sonint > 1)

{

sonuc = bolum1[sonint] + bolum3[1] + sonuc;

}

uclubasamak++;

}

if (w > 3)

{ // 3. basamaktan sonraki işlemler

if (uclubasamak == 1)

{

if (sonint > 0)

{

sonuc = bolum1[sonint] + bolum3[2 + artan] + sonuc;

if (artan == 0)

{ // birbin yazmasını engelle

if(kac-1==i)

{ //

sonuc = sonuc.replace(bolum1[1] + bolum3[2], bolum3[2]);

}

sonaekle = 1; // sona bin eklendi

}

else

{

sonaekle = 0;

}

uclubasamak++;

}

else if (uclubasamak == 2)

{

if (sonint > 0)

{

if (sonaekle > 0)

{

sonuc = b2[sonint] + sonuc;

sonaekle++;

}

else

{

sonuc = b2[sonint] + b3[2 + artan] + sonuc;

sonaekle++;

}

uclubasamak++;

} else if (uclubasamak == 3)

{

if (sonint > 0)

{

if (sonint == 1)

{

gecici = b3[1];

}

else

{

gecici = b1[sonint] + b3[1];

}

if (sonaekle == 0)

{

gecici = gecici + b3[2 + artan];

}

sonuc = gecici + sonuc;

}

uclubasamak = 1;

artan++;

}

w++; // işlenen basamak

}

this.sonuc=sonuc;

}

</script>

</body>

</html>

Butona tıkladığında sayfayı tam ekran yapma

[Zor] CSS ile sözde full-screen seçicisi kavramını açıklamak için hazırlanmış olan bir örnektir. Bu örnekte javascript ile tarayıcılara göre değişen metod isimlerini ve JavaScript ile CSS doğrudan müdahale edebildiğimizi gösteren basit bir örnektir.

DEMO


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#tamekran:-moz-full-screen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
#tamekran:-ms-fullscreen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
#tamekran:-webkit-full-screen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
#tamekran:fullscreen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}

#tamekran:-moz-full-screen > h1 {
color: red;
display: block;
}
#tamekran:-ms-fullscreen > h1 {
color: red;
display: block;
}
#tamekran:-webkit-full-screen > h1 {
color: red;
display: block;
}


#tamekran:-moz-full-screen > button {
display: none;
}
#tamekran:-ms-fullscreen > button {
display: none;
}

#tamekran:-webkit-full-screen > button{
display: none;
}

#tamekran:fullscreen > button {
display: none;
}

#tamekran:fullscreen > button {
display: none;
}

#tamekran:fullscreen > h1 {
color: red;
}

#tamekran > h1{
display: none;
}
</style>

</head>
<body>

<div id="tamekran">
<h1>Tam Ekran Yaptınız</h1>
<button id="tamekran-button">Tam Ekran Yap</button>
</div>


<script type="text/javascript">
var tamEkranButon = document.getElementById("tamekran-button");

function tamEkranYap() {
/*tam ekran yapılacak div*/
var tamEkranDiv = document.getElementById("tamekran");

/*tarayıcının tam ekranı destekleyip desteklemediğini kontrol edyiyoruz. Tam ekran yapılacak div ile.*/ 
var tamEkranFonk=tamEkranDiv.requestFullscreen||
tamEkranDiv.mozRequestFullScreen||
tamEkranDiv.msRequestFullscreen||
tamEkranDiv.webkitRequestFullScreen;

tamEkranFonk.call(tamEkranDiv); 
}
tamEkranButon.addEventListener('click', tamEkranYap);
</script>

</body>
</html>

100

101

102

<!DOCTYPE html>

<html>

<head>

#tamekran:-moz-full-screen {

padding: 42px;

background-color: pink;

border:2px solid #f00;

font-size: 200%;

}

#tamekran:-ms-fullscreen {

padding: 42px;

background-color: pink;

border:2px solid #f00;

font-size: 200%;

}

#tamekran:-webkit-full-screen {

padding: 42px;

background-color: pink;

border:2px solid #f00;

font-size: 200%;

}

#tamekran:fullscreen {

padding: 42px;

background-color: pink;

border:2px solid #f00;

font-size: 200%;

}

#tamekran:-moz-full-screen > h1 {

color: red;

display: block;

}

#tamekran:-ms-fullscreen > h1 {

color: red;

display: block;

}

#tamekran:-webkit-full-screen > h1 {

color: red;

display: block;

}

#tamekran:-moz-full-screen > button {

display: none;

}

#tamekran:-ms-fullscreen > button {

display: none;

}

#tamekran:-webkit-full-screen > button{

display: none;

}

#tamekran:fullscreen > button {

display: none;

}

#tamekran:fullscreen > button {

display: none;

}

#tamekran:fullscreen > h1 {

color: red;

}

#tamekran > h1{

display: none;

}

</style>

</head>

<body>

<h1>Tam Ekran Yaptınız</h1>

<button id="tamekran-button">Tam Ekran Yap</button>

</div>

var tamEkranButon = document.getElementById("tamekran-button");

function tamEkranYap() {

/*tam ekran yapılacak div*/

var tamEkranDiv = document.getElementById("tamekran");

/*tarayıcının tam ekranı destekleyip desteklemediğini kontrol edyiyoruz. Tam ekran yapılacak div ile.*/

var tamEkranFonk=tamEkranDiv.requestFullscreen||

tamEkranDiv.mozRequestFullScreen||

tamEkranDiv.msRequestFullscreen||

tamEkranDiv.webkitRequestFullScreen;

tamEkranFonk.call(tamEkranDiv);

}

tamEkranButon.addEventListener('click', tamEkranYap);

</script>

</body>

</html>

JavaScript AnimateRequestFrame

[Orta] window.requestAnimationFrame kullanarak renkli div kutularını ekrana bastırma örneği. Daha fazla zamanlayıcı örnekleri için tıklayın.

DEMO


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Animate Frame</title>


</head>

<body>

<style>
div {
width: 20px;
height: 20px;
float: left;
}

button {
position: absolute;
top: 20px;
left: 20px;
}
#stop {
left: 100px;
} 
</style>

<script> 

var animateFrameId;
function oynat() {

var element= document.createElement("div");
document.body.appendChild(element); 
var renk1= Math.floor(255*Math.random());
var renk2= Math.floor(255*Math.random());
var renk3= Math.floor(255*Math.random());
element.style.backgroundColor="rgb("+renk1+","+renk2+","+renk3+")";


animateFrameId = requestAnimationFrame(oynat);

}
animateFrameId = requestAnimationFrame(oynat);

</script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Animate Frame</title>

</head>

<body>

<style>

div {

width: 20px;

height: 20px;

float: left;

}

button {

position: absolute;

top: 20px;

left: 20px;

}

#stop {

left: 100px;

}

</style>

var animateFrameId;

function oynat() {

var element= document.createElement("div");

document.body.appendChild(element);

var renk1= Math.floor(255*Math.random());

var renk2= Math.floor(255*Math.random());

var renk3= Math.floor(255*Math.random());

element.style.backgroundColor="rgb("+renk1+","+renk2+","+renk3+")";

animateFrameId = requestAnimationFrame(oynat);

}

animateFrameId = requestAnimationFrame(oynat);

</script>

</body>

</html>

JavaScript Ortalama Hesaplama

[orta] Text kutusundaki değerli okuyup ortalama not 50den küçükse kaldı, değilse geçti yazdıran örnek. Örnek içinden dizilerde kullanılan forEach metodu, addEventListerner ile olay ataması yapılmıştır. Tasarımın daha düzgün görünmesi için de JavaScript Örneği CSS ile biçimlendirilmiştir.

DEMO


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Örnek</title>
<style>
.panel{
width: 200px;
margin: auto;
}

.panel input{
width: 100%;
height: 30px;
margin:3px 0;
background: #ededed;
border:solid 1px #ccc;
}

#sonuc-yaz{
margin-top:10px;
height: 50px;
line-height: 50px;
font-size:1em;
font-weight: bold;
}

</style>
<script>
/*sayfa yüklendiğinde aşağıdaki scripti çalıştır*/
window.onload=function(e){

var y1=document.getElementById("y1");
var y2=document.getElementById("y2");
var y3=document.getElementById("y3");
var sonuc=document.getElementById("sonuc");
var hesapla=document.getElementById("hesapla");
var sonucYaz=document.getElementById("sonuc-yaz");

/*0-100 arasında değilse uyarı ver*/
[y1,y2,y3].forEach(function(element) {
element.onchange=function(){

if(Number(element.value)<0 || Number(element.value)>100)
{
element.value="";
this.focus();
}
}
});


/*hesapla butonuna tıkladığında*/
hesapla.onclick=function(){

var s=(Number(y1.value)+Number(y2.value)+Number(y3.value))/3;
sonuc.value=s.toFixed(2);
if(s<50)
{
sonucYaz.textContent="BAŞARISIZ OLDUNUZ"; 
}
else{
sonucYaz.textContent="GEÇTİNİZ"; 
}


}
}

</script>
</head>
<body>
<div class="panel">
<input type="text" id="y1" placeholder="1.yazılı">
<input type="text" id="y2" placeholder="2.yazılı">
<input type="text" id="y3" placeholder="3.yazılı">
<input type="text" id="sonuc">
<input type="button" id="hesapla" value="hesapla">
<div id="sonuc-yaz"></div>
</div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Örnek</title>

<style>

.panel{

width: 200px;

margin: auto;

}

.panel input{

width: 100%;

height: 30px;

margin:3px 0;

background: #ededed;

border:solid 1px #ccc;

}

#sonuc-yaz{

margin-top:10px;

height: 50px;

line-height: 50px;

font-size:1em;

font-weight: bold;

}

</style>

/*sayfa yüklendiğinde aşağıdaki scripti çalıştır*/

window.onload=function(e){

var y1=document.getElementById("y1");

var y2=document.getElementById("y2");

var y3=document.getElementById("y3");

var sonuc=document.getElementById("sonuc");

var hesapla=document.getElementById("hesapla");

var sonucYaz=document.getElementById("sonuc-yaz");

/*0-100 arasında değilse uyarı ver*/

[y1,y2,y3].forEach(function(element) {

element.onchange=function(){

if(Number(element.value)<0 || Number(element.value)>100)

{

element.value="";

this.focus();

}

});

/*hesapla butonuna tıkladığında*/

hesapla.onclick=function(){

var s=(Number(y1.value)+Number(y2.value)+Number(y3.value))/3;

sonuc.value=s.toFixed(2);

if(s<50)

{

sonucYaz.textContent="BAŞARISIZ OLDUNUZ";

}

else{

sonucYaz.textContent="GEÇTİNİZ";

}

</script>

</head>

<body>

</div>

</body>

</html>

Audio dosyası Olaylarını Kontrol Etme

DEMO

[Orta] Ses Dosyasını Oynatma, Duraklatma ve Ses Ayarını Değiştirme


<audio id="sarki" controls src="sarki.mp3"></audio>
<div id="durum"></div>
<button id="oynat">Oynat</button>
<input type="range" id="ses" max=100 min=0 value=10>

<script>

var sarki=document.getElementById("sarki");
var durum=document.getElementById("durum");
var oynat=document.getElementById("oynat");
var ses=document.getElementById("ses");

//oynat butonuna basınca yapılacaklar
oynat.onclick=function(){
if(sarki.paused)
{
sarki.play();
oynat.textContent="duraklat";
}
else
{
sarki.pause();
oynat.textContent="oynat";
}

}

//ses ayarı için range nesnesi değiştirildiğinde yapılacaklar
ses.oninput=function(){
sarki.volume =ses.value/100;
}


//şarkı yürütülmeye başlandığında
sarki.onplay=function(){
durum.innerHTML="Şarkı Başladı";
}
//şarkı yürütülmeye başlandığında
sarki.onpause=function(){
durum.innerHTML="Şarkı Duraklatıldı";
}

//controlden ses değiştirildiğinde range nesnesini güncelleme
sarki.onvolumechange=function(){
ses.value=sarki.volume*100;
}

</script>

<button id="oynat">Oynat</button>

var sarki=document.getElementById("sarki");

var durum=document.getElementById("durum");

var oynat=document.getElementById("oynat");

var ses=document.getElementById("ses");

//oynat butonuna basınca yapılacaklar

oynat.onclick=function(){

if(sarki.paused)

{

sarki.play();

oynat.textContent="duraklat";

}

else

{

sarki.pause();

oynat.textContent="oynat";

}

//ses ayarı için range nesnesi değiştirildiğinde yapılacaklar

ses.oninput=function(){

sarki.volume =ses.value/100;

}

//şarkı yürütülmeye başlandığında

sarki.onplay=function(){

durum.innerHTML="Şarkı Başladı";

}

//şarkı yürütülmeye başlandığında

sarki.onpause=function(){

durum.innerHTML="Şarkı Duraklatıldı";

}

//controlden ses değiştirildiğinde range nesnesini güncelleme

sarki.onvolumechange=function(){

ses.value=sarki.volume*100;

}

</script>

Try Catch Throw Örneği

[Basit] Try Catch kavramı ile 11 haneli basit mantıkta numara kontrolü yapıp, girilen numaralar 11 haneden az ise az girdiniz. 11 handen fazla ise fazla girdiniz. Numara değilse de hatalı karakter girdiniz uyarısı yaptıran JavaScript Try Catch örneği


<input type="text" id="tc">
<div id="uyari"></div>
<script>
var nesne =document.getElementById("tc");
var uyari =document.getElementById("uyari");

nesne.onkeypress=function(){
uyari.textContent="";
}

nesne.onblur=function(){

try{
if(isNaN(nesne.value)) throw "Hatalı karakter girdiniz."; 
if(nesne.value.length<11) throw "11 karakterden az girdiniz.";
if(nesne.value.length>11) throw "11 karakterden fazla girdiniz.";
}
catch(e)
{
uyari.textContent=e;
nesne.focus();
}

} 
</script>

var nesne =document.getElementById("tc");

var uyari =document.getElementById("uyari");

nesne.onkeypress=function(){

uyari.textContent="";

}

nesne.onblur=function(){

try{

if(isNaN(nesne.value)) throw "Hatalı karakter girdiniz.";

if(nesne.value.length<11) throw "11 karakterden az girdiniz.";

if(nesne.value.length>11) throw "11 karakterden fazla girdiniz.";

}

catch(e)

{

uyari.textContent=e;

nesne.focus();

}

</script>

Bilgisayarın Tuttuğu Sayıyı Tahmin Etme

[Basit] Bilgisayarın rastgele tuttuğu sayıyı kaç seferde bildiğine ekrana yazdıan program


var bsayi = Math.round(Math.random() * 100);
document.write(bsayi);
var tahmin=0;

while (true) {
var sayi = window.prompt("Bir sayı girin:", "");
sayi = Number(sayi);
tahmin++;

if (bsayi == sayi) {
window.alert("tebrikler"+" Tahmin Sayısı:"+tahmin);
break;
} else if (bsayi > sayi) {
window.alert("Yukarı çık");
} else {
window.alert("Aşağı in");
}
}

var bsayi = Math.round(Math.random() * 100);

document.write(bsayi);

var tahmin=0;

while (true) {

var sayi = window.prompt("Bir sayı girin:", "");

sayi = Number(sayi);

tahmin++;

if (bsayi == sayi) {

window.alert("tebrikler"+" Tahmin Sayısı:"+tahmin);

break;

} else if (bsayi > sayi) {

window.alert("Yukarı çık");

} else {

window.alert("Aşağı in");

}

1-100 arasındaki sayıların 3’e yada 5’e bölünenlerini yazdırma

[Çok Basit] for döngüsü ve karar yapıları kullanılarak 1-100 arasındaki sayılardan 3e yada 5e tam bölüneleri ekrana yazdırma


for(var i=1;i<=100;i++)
{
if(i%3==0 || i%5==0)
{
document.write(i + "<br>");
}
}

for(var i=1;i<=100;i++)

{

if(i%3==0 || i%5==0)

{

document.write(i + "<br>");

}

Diğer JavaScript If Else Örnekleri

Diğer JavaScript Form Örnekle

İlgili

Yorum

Nuri Bey dedi ki:

Temmuz 19, 2019, 3:54 pm

Teşekkürler güzel, örneklerle bilgilendirici olmuş

Cevapla
Javascript Nedir? Javascript'in SEO Etkisi (Sıkıştırma) dedi ki:

Ocak 19, 2019, 10:49 pm

[…] örnek kodu yazilimbilisim sitesinden […]

Cevapla
Css ve Javascript'in SEO Etkisi (Css, Javascript Sıkıştırma) dedi ki:

Ocak 8, 2019, 8:37 pm

[…] örnek kodu yazilimbilisim sitesinden […]

Cevapla
javascript – Bir Bilim Bilişim dedi ki:

Kasım 15, 2018, 10:07 am

[…] 15, 2018Kasım 15, 2018 Javascript Örnekleri admin_ufuk Forum Sayfası […]

Cevapla
JavaScript Olaylar – Yazılım Bilişim Programlama dedi ki:

Ocak 18, 2017, 6:23 pm

[…] fazla örnek için JavaScript Örnekleri yazısını […]

Cevapla
JavaScript for Döngüsü – Yazılım Bilişim Programlama dedi ki:

Ocak 2, 2017, 10:14 pm

[…] Örnek 5: Daha fazla JAVASCRIPT ÖRNEĞİ için tıklayınız. […]

Cevapla
JavaScript Dersleri – Yazılım Bilişim Programlama dedi ki:

Aralık 29, 2016, 3:19 am

[…] JavaScript Dersleri 17: JavaScript Örnekleri (30+ Örnek) […]

Cevapla
JavaScript Not Ortalaması Hesaplama – Yazılım Bilişim Programlama dedi ki:

Aralık 22, 2016, 7:39 pm

[…] için CSS ile uygulama güzelleştirilmiş durumdadır. Daha fazla javaScript örneği için javascript örnekleri sayfasına […]

Cevapla
Kazim Şimşek dedi ki:

Ekim 2, 2016, 8:13 am

Emeğinize sağlık çok faydalı bir makale olmuş

Cevapla

JavaScript Nedir

JavaScript ile Java Aynı Dil Değildir

JavaScript Örnekleri Listesi (JavaScript Kodları Listesi)

Basit Dijital Saat Yapımı

Basit Tooltip Yapımı

Sayı Tek mi Çift Mi

Sayfayı 5 saniyede bir yenileme kodu

JavaScript Integral Alma

Çemberin çevresi;

Kürenin alanını hesaplama;

window.setTimeOut Örneği

İki kenarı girilen dikdörtgenin çevresi;

İki kenar girilen dikdörtgenin alanı;

Kilometreyi mile dönüştürme;

JavaScript: Butona Tıklayınca Sayıyı Arttırma / Azaltma

Üçgenin Alanını Hesaplama

JavaScript: Farenin Konumunu Öğrenme

JavaScript Fareyi Takip Eden Kutu Örneği

JavaScript Arkaplanı rastgele Değiştirme (setInterval)

Javascript:Faktöriyel Hesaplama Örneği

JavaScript: Sayıyı Yazıya Çevirme

Butona tıkladığında sayfayı tam ekran yapma

JavaScript AnimateRequestFrame

JavaScript Ortalama Hesaplama

Audio dosyası Olaylarını Kontrol Etme

Try Catch Throw Örneği

Bilgisayarın Tuttuğu Sayıyı Tahmin Etme

1-100 arasındaki sayıların 3’e yada 5’e bölünenlerini yazdırma

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

Yorum Yap X