9 Eylül 2021 Perşembe

Javascript Hesap Makinesi

 <html>

<head>

<title> başlık </title>

<script type="text/javascript">

function topla()

{

x=document.getElementById("txt1").value;

y=document.getElementById("txt2").value;

toplam=x+y;

alert(toplam);

}

function cikar()

{

x=document.getElementById("txt1").value;

y=document.getElementById("txt2").value;

fark=x-y;

alert(fark);

}

function carp()

{

x=document.getElementById("txt1").value;

y=document.getElementById("txt2").value;

carpim=x*y;

alert(carpim);

}

function bol()

{

x=document.getElementById("txt1").value;

y=document.getElementById("txt2").value;

bolum=x/y;

alert(bolum);

}

</script>

</head>

<body>

<table border=1 cellpadding=10>

<tr>

<td>1.sayi :</td><td><input type="text" id="txt1"/></td>

</tr>

<tr>

<td>2.sayi:</td><td><input type="text" id="txt2"/></td>

</tr>

<tr>

<td>islemler</td>

<td>

<input type="button" value="TOPLA" onclick="topla()"/>

<input type="button" value="ÇIKAR" onclick="cikar()"/>

<input type="button" value="ÇARP" onclick="carp()"/>

<input type="button" value="BÖL" onclick="bol()"/>

</td>

</tr>

</table>

</body>


</html>


Javascript Parametre Kullanımı

 <html>

<head>

<title> başlık </title>

</head>

<script type="text/javascript">

function topla(x,y)

{

var toplam=x+y;

alert("TOPLAM="+toplam);

}

</script>

</head>

<body>

<input type="button" value="TIKLA" onclick="topla(5,6)">

</body>

</html>


Javascript Birden Fazla Fonksiyon

 <html>

<head>

<title> başlık </title>

</head>

<script type="text/javascript">

function f1()

{

alert("fonksiyon 1");

}

function f2()

{

alert("fonksiyon 2");

}

</script>

</head>

<body>

<input type="button" value="TIKLA" onclick="f1();f2()">

</body>

</html>


Javascript Fonksiyonlarda Döngü

 <html>

<head>

<title> başlık </title>

</head>

<script type="text/javascript">

function dongu()

{

document.write("<h2>fonksiyon içinde döngü kullanıyoruz</h2><p/>");

for(i=1;i<=10;i++)

{

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

}

document.write("<p/>döngü bitti..");

}

</script>

</head>

<body>

<input type="button" value="TIKLA" onclick="dongu()">

</body>

</html>


Javascript Fonksiyonları Çağırmak

 <html>

<head>

<title> başlık </title>

</head>

<script type="text/javascript">

function mesaj_gonder()

{

alert("Bu mesaj fonksiyondan gelmektedir");

}

</script>

</head>

<body>

<input type="button" value="TIKLA" onclick="mesaj_gonder()">

</body>

</html>


8 Eylül 2021 Çarşamba

Javascript While Döngüsü

 <html>

<head>

<title> başlık </title>

</head>

<script type="text/javascript">

var x=1;

while(x<10)

{

document.write("Ege Üniversitesi <br/>");

x++;

}

</script>

</html>


Javascript For In Döngüsü

 <html>

<head>

<title> başlık </title>

</head>

<script type="text/javascript">

var x;

var dizi=new Array();

dizi[0]="C#";

dizi[1]="Sql Server";

dizi[2]="Asp.Net";

dizi[3]="Ado.Net";

dizi[4]="HTML";

dizi[5]="CSS";

dizi[6]="Javascript";

dizi[7]="PHP";

dizi[8]="ASP";

for(x in dizi)

{

document.write(dizi[x]);

document.write("<br/>");

}

</script>

</html>


Javascript Continue Komutu

 <html>

<head>

<title> başlık </title>

</head>

<script type="text/javascript">

for(i=1;i<=10;i++)

{

if(i==5)

{

continue;

}

document.write("Şu anki indis degeri="+i);

document.write("<br/>");

}

</script>

</html>


Javascript Break Komutu

 <html>

<head>

<title> başlık </title>

</head>

<script type="text/javascript">

for(i=1;i<=10;i++)

{

document.write("Şu anki indis degeri="+i);

document.write("<br>");

if(i==5)

{

break;

}

}

document.write("döngüden çıkıldı..");

document.write("<p/>");

document.write("son döngü indisi="+i);

</script>

</html>


7 Eylül 2021 Salı

Javascript For Döngüsü 10 Öğrenci Kaldı Geçti Programı

 <html>

<head>

<title> başlık </title>

</head>

<script type="text/javascript">

var ad="";

var ders_not=0;

var durum="";

document.write("<h2>ÖĞRENCİ NOTLARI</h2><p/>");

document.write("<table border=1>");

for(i=1;i<=10;i++)

{

ad=prompt("Öğrenci ismi giriniz");

ders_not=prompt("Öğrenci notu giriniz");

document.write("<tr>");

document.write("<td>"+ad+"</td>");

document.write("<td>"+ders_not+"</td>");

if(ders_not<60)

{

durum="KALDI";

}

else

{

durum="GEÇTİ";

}

document.write("<td>"+durum+"</td>");

document.write("</tr>");

}

document.write("</table>");

</script>

</html>


Javascript Negatif Pozitif İf Else Koşul Yapısıyla Form Ekranında Kontrolü

 <html>

<head>

<title> başlık </title>

</head>


<script type="text/javascript">

function kontrol_et()

{

var deger=document.getElementById("text1").value;

if(deger<0)

{

alert("girilen sayı negatif");

}

else if(deger==0)

{

alert("girilen sayı 0");

}

else if(deger>0)

{

alert("girilen sayı pozitif");

}

else

{

alert("geçersiz deger girdiniz!");

}

}

</script>

<body>

<input type="text" id="text1"/>

<input type="button" value="tıkla" onclick="kontrol_et()">

</body>

</html>


JavaScript İf-Else Dersten Geçti Kaldı Programı

 <html>

<head>

<title> başlık </title>

</head>

<body>

<script type="text/javascript">

var ders_notu=75;

var harf_notu;

if(ders_notu>0 && ders_notu<60)

{

harf_notu="FF";

}

else if(ders_notu<70)

{

harf_notu="CC";

}

else if(ders_notu<80)

{

harf_notu="BB";

}

else

{

harf_notu="AA";

}

document.write("Öğrenci Ders Notu="+ders_notu);

document.write("<br/>");

document.write("Harf Notu="+harf_notu);

</script>

<body/>

</html>


Javascript İf Else Koşulu

 <html>

<head>

<title> başlık </title>

</head>

<body>

<script type="text/javascript">

var x=-4;

if(x>0)

{

document.write("x sıfırdan büyük ise bu yazı çıkar.<p/>");

}

document.write("bu yazı ise her halükarda çıkar.");


</script>

<body/>

</html>


Javascript Mantıksal Operatörler

 <html>

<head>

<title> başlık </title>

</head>

<body>

<script type="text/javascript">

var x=15;

var y=25;

document.write(x==15&&y==20);//false

document.write("<br/>");

document.write(x>10||y<15);//true

</script>

<body/>

</html>


Javascript Aritmetik Operatörler

 <html>

<head>

<title> başlık </title>

</head>

<body>

<script type="text/javascript">

var x=15;

var y=25;

var toplam=x+y;

var fark=x-y;

var carpim=x*y;

var bolum=x/y;

document.write("X="+x+",Y="+y+"<p/>");

document.write("TOPLAM:"+toplam+"<p/>");

document.write("FARK:"+fark+"<p/>");

document.write("ÇARPIM:"+carpim+"<p/>");

document.write("BÖLÜM:"+bolum+"<p/>");

</script>

<body/>

</html>


6 Eylül 2021 Pazartesi

Javascript Değişkenlerin Bir Harf veya Alt çizgi ile Başlama Zorunluluğu

 <html>

<head>

<title> başlık </title>

</head>

<body>

<script type="text/javascript">

var degisken=1;//gecerli

var _degisken=2;//geçerli

var abc123=3; //geçerli

document.write(degisken);

document.write("<br/>");

document.write(_degisken);

document.write("<br/>");

document.write(abc123);

</script>

<body/>

</html>

//Değişkenler bir harf veya alt çizgi ile başlamak zorundadır


Javascript buyuk kucuk degisken kuralı

 <html>

<head>

<title> başlık </title>

</head>

<script type="text/javascript">

var x=0;

var X=24;

var toplam=150;

var Toplam=250;

var TOPLAM=350;

document.write(x);

document.write("<br/>");

document.write(X);

document.write("<br/>");

document.write(toplam);

document.write("<br/>");

document.write(Toplam);

document.write("<br/>");

document.write(TOPLAM);

document.write("<br/>");

</script>

</html>


Javascript body bölümünde javascript kullanmak

 <html>

<head>

<title> başlık </title>

</head>

<body>

Aşağıdaki !.script kodunu görmektesniz <p/>

<script>

document.write("1.script");

</script>

</p>

bu da 2.script kodu<p/>

<script>

document.write("2.script");

</script>

</body>

</html>


2 Eylül 2021 Perşembe

Web tasarım Fileupload Elemanı

 <html>

<head>

<title> başlık </title>

</head>

<body>

<form>

dosya seciniz...<p/>

<input type="file" name="dosya">

</form>

</body>

</html>

Bu eleman ile bilgisayardaki herhangibi bir dosyayı from ekleyebilirsiniz...

Web Tasarım Submit

 <html>

<head>

<title> başlık </title>

</head>

<body>

<table>

<tr>

<td>Kullanıcı Adı:</td>

<td><input type="text" name="text1"></td>

</tr>

<tr>

<td>sifre:</td>

<td><input type="password" name="pass1"></td>

</tr>

<tr>

<td><a href="">sifremi unuttum</a></td>

<td><input type="submit" value="Girişi Yap"></td>

</table>

</body>

</html>


Web Tasarım < optgroup > Etiketi

 <html>

<head>

<title> başlık </title>

</head>

<body>

<select name="liste" size=5>

<optgroup label="programlama">

<option value="1">C#</option>

<option value="2">VB</option>

<option value="3">java</option>

</optgroup>

<optgroup label="veri tabanı">

<option value="1">Sql Server</option>

<option value="2">MySql</option>

<option value="3">oracle</option>

</optgroup>

<optgroup label="web programlama">

<option value="1">Asp.Net</option>

<option value="2">Php</option>

<option value="3">html</option>

</optgroup>

</select>

</body>

</html>

Bu etiket ile liste içinde gruplar oluşturalabilir...


Web Tasarım Select Kullanımı

 <html>

<head>

<title> başlık </title>

</head>

<body>

Hangi şehirde oturuyorsunuz?<p/>

<select name="liste" size="5">

<option value="1">Istanbul</option>

<option value="2">Ankara</option>

<option value="3">Izmir</option>

<option value="1">Bursa</option>

<option value="2">Çanakkale</option>

<option value="3">Antalya</option>

<option value="4">Diğer</option>

</select>

</body>

</html>


Web tasarım Checkbox

 <html>

<head>

<title> başlık </title>

</head>

<body>

Bildiğiniz teknolojileri işaretliyiniz..</p>

<input type="checkbox"/>C#<br/>

<input type="checkbox"/>Java<br/>

<input type="checkbox"/>Asp.Net<br/>

<input type="checkbox"/>Ado.net<br/>

<input type="checkbox"/>Sql Server<br/>

<input type="checkbox"/>Oracle<br/>

<input type="checkbox"/>Html<br/>

<input type="checkbox"/>Php<br/>

<input type="checkbox"/>Mysql<br/>

</body>

</html>


1 Eylül 2021 Çarşamba

Web Tasarım Value Varsayılan Deger

 <html>

<head>

<title> başlık </title>

</head>

<body>

<form>

email:<p/>

<input type="text" name="text1" value="Lütfen geçerli bir mail yazın"/>

</form>

</body>

</html>


Web Tasarım Maxlenght (Textboxa Girilecek Maximum Karakter)

 <html>

<head>

<title> başlık </title>

</head>

<body>

<form>

Aşağıdaki textboxta en fazla 8 karakter girebilirsiniz<p/>

<input type="text" name="text1" maxlength="8"/>

</form>

</body>

</html>


Web Tasarım İç İçe Tablolar

 <html>

<head>

<title> başlık </title>

</head>

<body>

<h1>Tablo Örnekleri<h1><hr/><p/>

<table border="1" width=300 height=300 cellpadding=30>

<tr>  <td>Dıştaki tablonun 1.satırı  </td></tr>    

<tr>

<td>        

<table border=5 bgcolor=#ffffcc>

<tr>

<td>

dıştaki tablonun 2.satırı <br/>

içteki tablonun 1.satırı

</td>

</table>

</td>

</tr>

</body>

</html>


Web Tasarım Align (Tablo Konumu Belirleme)

 <html>

<head>

<title> başlık </title>

</head>

<body>

<h1>Tablo Örnekleri<h1><hr/><p/>

<table border="1" align=center>

<tr>

<td>1.satır,1.sütun</td>

<td >1.satır,2.sütun</td>

</tr>

<tr>

<td >1.satır,1.sütun</td>

<td >1.satır,2.sütun</td>

</tr>

</table>

</body>

</html>


Web Tasarım Cellpadding

 <html>

<head>

<title> başlık </title>

</head>

<body>

<h1>Tablo Örnekleri<h1><hr/><p/>

<table border="1" cellpadding=30>

<tr>

<td>1.satır,1.sütun</td>

<td >1.satır,2.sütun</td>

</tr>

<tr>

<td >1.satır,1.sütun</td>

<td >1.satır,2.sütun</td>

</tr>

</table>

</body>

</html>

Bu özellik hücre kenarı ile yazılar arasındaki mesafeyi belirtir

Web tasarım Cellspacing Özeliği

 <html>

<head>

<title> başlık </title>

</head>

<body>

<h1>Tablo Örnekleri<h1><hr/><p/>

<table border="1" cellspacing=30>

<tr>

<td>1.satır,1.sütun</td>

<td >1.satır,2.sütun</td>

</tr>

<tr>

<td >1.satır,1.sütun</td>

<td >1.satır,2.sütun</td>

</tr>

</table>

</body>

</html>

Hücre İçindeki mesafeyi belirtir


Web Tasarım Background Özeliği Her hücreye Farklı Resim Yerleştirme

 <html>

<head>

<title> başlık </title>

</head>

<body>

<h1>Tablo Örnekleri<h1><hr/><p/>

<table border="1"width=2000 height=2000>

<tr>

<td background=C:\yedek\resimlerim\1.jpg>1.satır,1.sütun</td>

<td background=C:\yedek\resimlerim\2.jpg >1.satır,2.sütun</td>

</tr>

<tr>

<td background=C:\yedek\resimlerim\3.jpg >1.satır,1.sütun</td>

<td background=C:\yedek\resimlerim\4.jpg >1.satır,2.sütun</td>

</tr>

</table>

</body>

</html>


Web Tasarım Backgrouund Arka Plana Resim Yerleştirme Özeliği

 <html>

<head>

<title> başlık </title>

</head>

<body>

<h1>Tablo Örnekleri<h1><hr/><p/>

<table border="1"width=500 height=300 background=C:\yedek\resimlerim\1.jpg>

<tr>

<td>1.satır,1.sütun</td>

<td>1.satır,2.sütun</td>

</tr>

</table>

</body>

</html>

Bu özellik tabloların arka tarafına resim yerleştirilir...


Web Tasarım Bgcolor Özeliği

 <html>

<head>

<title> başlık </title>

</head>

<body>

<h1>Tablo Örnekleri<h1><hr/><p/>

<table border="1"bgcolor="yellow">

<tr>

<td>1.satır,1.sütun</td>

<td>1.satır,2.sütun</td>

</tr>

</table>

</body>

</html>

Bu özellik tablonun arka rengini oluşturur...

Web Tasarım Width Height Özelikleri

 <html>

<head>

<title> başlık </title>

</head>

<body>

<h1>Tablo Örnekleri<h1><hr/><p/>

<table border="1"width="50%"height="50%">

<tr>

<td>1.satır,1.sütun</td>

<td>1.satır,2.sütun</td>

</tr>

</table>

</body>

</html>


Web Tasarım Tablolarda Border (Çerceve Özeliği)

 <html>

<head>

<title> başlık </title>

</head>

<body>

<h1>Tablo Örnekleri<h1><hr/><p/>

<table border="10">

<tr>

<td>1.satır,1.sütun</td>

<td>1.satır,2.sütun</td>

</tr>

<tr>

<td>2.satır,1.sütun</td>

<td>2.satır,2.sütun</td>

</tr>

</table>

</body>

</html>


Web Tasarım Satırları Birleştirmek Rowspan

 <html>

<head>

<title> başlık </title>

</head>

<body>

<h1>Tablo Örnekleri<h1><hr/><p/>

<table border="2">

<tr>

<td colspan=2>Burası 2 kolondan oluşur</td>

</tr>

<tr>

<td>2.satır,1.sütun</td>

<td rowspan=2>Burası 2 satırdan oluşur</td>

</tr>

<tr>

<td>3.satır,1.sütun</td>

</tr>

</table>

</body>

</html>


Web tasarım Sütunları Birleştirmek Colspan

 <html>

<head>

<title> başlık </title>

</head>

<body>

<h1>Tablo Örnekleri<h1><hr/><p/>

<table border="2">

<tr>

<td colspan=2>Burası 2 kolondan oluşur</td>

</tr>

<tr>

<td>2.satır,1.sütun</td>

<td>2.satır,2.sütun</td>

</tr>

<tr>

<td>3.satır,1.sütun</td>

<td>3.satır,2.sütun</td>

</tr>

</table>

</body>

</html>


Web Tasarım Tablolara Başlık Oluşturma < thead >

 <html>

<head>

<title> başlık </title>

</head>

<body>

<h1>Tablo Örnekleri<h1><hr/><p/>

<table border="2" width=600>

<thead><b>ÖĞRENCİ NOT ÇİZELGELERİ</b></thead>

<th>Ad,Soyad</th>

<th>Vize Notu</th>

<th>Final Notu</th>

<th>Geçme Durumu</th>

<tr>

<td bgcolor=#ffffcc>1</td>

<td>Musa Çicek</td>

<td>60</td>

<td>85</td>

<td>Geçti</td>

</tr>

<tr>

<td bgcolor=#fffcc>2</td>

<td>Mehmet Duran</td>

<td>60</td>

<td>55</td>

<td bgcolor=red>Kaldı</td>

</tr>


</table>

</body>

</html>


Web Tasarım Tablo Örnekleri Arka Renk

 <html>

<head>

<title> başlık </title>

</head>

<body>

<h1>Tablo Örnekleri<h1><hr/><p/>

<table border="2" width=600>

<th>Ad,Soyad</th>

<th>Vize Notu</th>

<th>Final Notu</th>

<th>Geçme Durumu</th>

<tr>

<td bgcolor=#ffffcc>1</td>

<td>Musa Çicek</td>

<td>60</td>

<td>85</td>

<td>Geçti</td>

</tr>

<tr>

<td bgcolor=#fffcc>2</td>

<td>Mehmet Duran</td>

<td>60</td>

<td>55</td>

<td bgcolor=red>Kaldı</td>

</tr>


</table>

</body>

</html>


Web Tasarım Tablo Örnekleri Öğrenci Notları Örneği

 <html>

<head>

<title> başlık </title>

</head>

<body>

<h1>Tablo Örnekleri<h1><hr/><p/>

<table border="2" width=600>

<th>Ad,Soyad</th>

<th>Vize Notu</th>

<th>Final Notu</th>

<th>Geçme Durumu</th>

<tr>

<td>1</td>

<td>Musa Çicek</td>

<td>60</td>

<td>85</td>

<td>Geçti</td>

</tr>

<tr>

<td>2</td>

<td>Mehmet Duran</td>

<td>60</td>

<td>55</td>

<td>Kaldı</td>

</tr>


</table>

</body>

</html>


Web Tasarım Sütun Başlıkları Belirtmek < th >

 <html>

<head>

<title> başlık </title>

</head>

<body>

<h1>Tablo Örnekleri<h1><hr/><p/>

<table border="2">

<th>1.satır,1sütun</th>

<th>1.satır,2.sütun</th>

<tr>

<td>1.satır,1.sütun</td>

<td>1.satır,2.sütun</td>

</tr>

</table>

</body>

</html>


Web Tasarım Tablo oluşturma Satır belirleme < tr > Sütun Belirlemek < td >

 <html>

<head>

<title> başlık </title>

</head>

<body>

<h1>Tablo Örnekleri<h1>

<table border="2">

<tr>

<td>1.satır,1sütun</td>

<td>1.satır,2.sütun</td>

</tr>

<tr>

<td>2.satır,1sütun</td>

<td>2.satır,2.sütun</td>

</tr>

<tr>

<td>3.satır,1.sütun</td>

<td>3.satır,2.sütun</td>

</tr>

</table>

</body>

</html>