Text kutusu içine girilen yazıyı Div içine aktarma,Text kutusuna girilen yazıyı select nesnesine option olarak ekleme;Text kutusu boşsa formu göndermeyi iptal etme;JavaScript ile img ekiketindeki resimleri değiştirme……
JavaScript ile Text kutusu içine girilen yazıyı div içine aktarma
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TEXT KUTUSUNA GİRİLEN YAZIYI DİV İÇİNE YAZDIRMA</title>
</head>
<style>
</style>
<body>
<input type="text" id="yazi" value="">
<div id="goster"></div>
<script>
var yazi=document.getElementById("yazi");
var goster=document.getElementById("goster");
yazi.onkeyup=function(){
goster.innerHTML=yazi.value;
}
</script>
</body>
</html>
JavaScript ile Text kutusu boşsa formu göndermeyi iptal etme;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form boşsa gönderme</title>
</head>
<style>
</style>
<body>
<form action="kaydet.html" method="post">
<input type="text" id="yazi" value="">
<input type="submit" id="gonder" value="formu kaydet">
</form>
<script>
var yazi=document.getElementById("yazi");
var gonder=document.getElementById("gonder");
gonder.onclick=function(e){
if(yazi.value=='')
{
e.preventDefault();//varsayılan işlemi önlemek. buradaki işlem submit nesnesinin çalışması onu engellemiş olduk
//return false; //bu tanımlama da doğrudur.
}
}
</script>
</body>
</html>
JavaScript ile Text kutusuna girilen yazıyı select nesnesine option olarak ekleme;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>select nesnesine option ekleme</title>
</head>
<style>
</style>
<body>
<form action="#" method="post">
<input type="text" id="yazi" value="">
<input type="button" id="kaydet" value="TAKIM EKLE">
</form>
<select id="takim">
</select>
<script>
var yazi=document.getElementById("yazi");
var kaydet=document.getElementById("kaydet");
var takim=document.getElementById("takim");
kaydet.onclick=function(e){
var yeniOpt=document.createElement("option");
yeniOpt.value=yazi.value;
yeniOpt.innerHTML=yazi.value;
takim.add(yeniOpt);//select nesnesine yeni bir öge eklenmiştir.
}
</script>
</body>
</html>
JavaScript ile img ekiketindeki resimleri değiştirme;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>range nesnesi ile resimleri değiştirme</title>
</head>
<style>
</style>
<body>
<form action="#" method="post">
<input type="range" id="resim-no" max="4" min="0">
</form>
<img src="" id="resim" width="300">
<script>
/*
range nesnesindeki toplam adım 5 tir. 0,1,2,3,4,5
bu adımlar dizideki 00,01,02,03,04,05 resimleri ile eşlerek range nesnesi kaçta ise
resimler dizisindeki resim yollarını src içine aktarılacaktır.
Unutmayın:resim klasörü içinde dizi içindeki resim dosyaları olmak zorundadır.
*/
var resimler=["resim/r00.jpg","resim/r01.jpg","resim/r02.jpg","resim/r03.jpg","resim/r04.jpg"];
var resimNo=document.getElementById("resim-no");
var resim=document.getElementById("resim");
resimNo.onchange=function(e){
resim.src=resimler[resimNo.value];
}
</script>
</body>
</html>
Butona Tıklayınca Sayıyı Arttırma / Azaltma
<!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>
Textarea Nesnesine Girilen Karakter Sayısını Bulma
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS01</title>
</head>
<style>
textarea{
width: 300px;
height: 300px;
}
</style>
<body>
<textarea id="yazi"></textarea>
<br>
Kalan Karakter:<input type="button" id="sayac" value="140">
<script>
var yazi=document.getElementById("yazi");
var sayac=document.getElementById("sayac");
yazi.onkeypress=function(){
if(yazi.value.length>=160) return false;
}
yazi.onkeyup=function(e){
sayac.value=(160-yazi.value.length);
}
</script>
</body>
</html>Select Nesnesindeki Seçili Olan Alanların Toplamını Hesaplama
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>:) JavaScript Örnekleri</title>
</head>
<style>
select{
width:200px;
height: 300px;
}
option{
height: 27px;
background: #E7E7E7;
border:solid 1px #25373D;
}
option:checked, option:hover{
color:#E7E7E7;
background:#282830;
}
#sonuc{
position: absolute;
left:250px;
top:0px;
width: 300px;
height: 300px;
line-height: 300px;
font-size: 3em;
background: #FEC606;
color:#60646D;
text-align: center;
}
</style>
<body>
<select id="sayilar" multiple>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
<div id="sonuc">0</div>
<script>
var sonuc=document.getElementById("sonuc");
var sayilar=document.getElementById("sayilar");
sayilar.onclick=function(){
var toplam=0;
/* tüm option nesnenleri üzerinde dönüş yapıyoruz.*/
for (var i=0, uzunluk=this.options.length; i<uzunluk; i++) {
opt = this.options[i];
/*seçili olan option nesnelerini öğreniyoruz.*/
if ( opt.selected ) {
/*seçili olan option nesneleri üzerinde toplama işlemi yapıyoruz.*/
toplam+=Number(opt.value);
}
}
sonuc.innerHTML=toplam;
}
</script>
</body>
</html>
başka işiniz yok mu
web site yapımı facebook gibi görünümü olacak lütfen yardim proje ödevim
başka arzunuz var mı otur araştır