Nesneler

 

JavaScript kullanarak özelliklerini görebileceğimiz veya değiştirebileceğimiz şeyler; örnğin bu browser penceresi, bir form'un öğeleri hatta browser'ın ta kendisi JavaScript açısından birer nesnedir. Bu özelliğinden dolayı JavaScript nesneye yönelik bir programlama dilidir.

 

Window Nesnesi

 

Tarayıcı ile ilgili özellik ve metodun bulunduğu tarayıcı nesnesidir.

 

Bu listede 'yes' ve 'no' değerleri yerine '1' ve '0' da yazabilirsiniz.

window.open("Url_adı" , "pencere_adı" , "pencere_özellikleri");

 

window.open("http://www.fml.somee.com", "ana" ," menubar=no, toolbar=no, scrollbars=yes, location=yes, width=200, heigt=300");

 

//sayfa açma-kapama

 

<head>
<script language="javascript">
window.open("http://www.fml.somee.com"); /* yeni bir sayfa daha açacak*/
function kapat(){ window.pencerem.close();}
function ac(){   pencerem=window.open('pencerem.html','pencerem1')}
</script>
</head>
<body>
<img src="buton.fw.png" width="101" height="35" onclick="ac()" />
<img src="buton.fw.png" width="101" height="35"  onclick="kapat()"/>
</body>

 

var karar=confirm('Sayfadan çıkmak istediğinize eminmisiniz');

if(karar==true)

{

alert('yine bekleriz');

window.close();

}

 

 

Navigator Nesnesi

 

 

appName Metodu: Sayfanın açıldığı tarayıcının ismini verir.

appCodeName Metodu: Kullanılan web tarayıcısının kod adını verir.
appVersion Metodu: Kullanılan tarayıcının versiyon bilgisini verir.

BrowserLanguage Metodu: Kullanılan tarayıcının dilini verir.

javaEnabled Metodu: Tarayıcıda java ayarının açık olup olmadığını kontrol eder. Açık ise true değerini, kapalı ise false değerini döner.

document.write("Kullandığınız WEB tarayıcısının adı: " + navigator.appName);

document.write("Kullandığınız WEB tarayıcısının kod adı: " + navigator.appCodeName);

document.write("Kullandığınız WEB tarayıcısının versiyonu: " + navigator.appVersion);

document.write("Kullandığınız WEB tarayıcısının dili: " + navigator.browserlanguage);

document.write("Kullandığınız WEB tarayıcısının java ayarları açık mı: " + navigator.javaEnabled());

 

 

Navigator Nesne Özellikleri

Özellik Açıklama Canlı Sonuç
appCodeName
IE FF Opera		 Tarayıcının dahili kod adını verir. (Mozilla)
Mozilla
appName
IE FF Opera		 Tarayıcının adını verir. (Örn, Opera, Netscape)
Netscape
appVersion
IE FF Opera		 Tarayıcının versiyon ve platform bilgilerini verir. Sonuç tablonun altında
buildID
FF		 Tarayıcının yapı tanımlamasını verir. (Örn, 2007112718)
20150108202552
cookieEnabled
IE FF Opera		 Tarayıcının çerezleri destekleyip desteklemediğini verir. (true veya false)
true
javaEnabled
IE FF Opera		 Tarayıcıda Java'nın aktif olup-olmadığını verir. (true veya false)
true
language
FF Opera		 Tarayıcının RFC 4646 standartına uygun lisan tanımlamasını verir. (Örn, tr, en, jp)
tr-TR
mimeTypes
IE FF Opera		 Tarayıcının tanıdığı MIME tiplerini ifade eden MimeType nesnelerinin bir listesini içeren MimeTypeArray nesnesini verir.
[object MimeTypeArray]
onLine
IE FF		 Tarayıcının çevrimiçi olup-olmadığını verir. (true veya false)
true
oscpu
FF		 Güncel işletim sistemini tanımlayan bir string verir. Örn, (Örn, Windows NT 5.1)
Windows NT 6.3; WOW64
platform
IE FF Opera		 Tarayıcının çalıştığı platformu verir. (Örn, Win32, MacPPC)
Win32
plugins
IE FF Opera		 Tarayıcıda kurulu eklentilerin bir listesini içeren PluginArray nesnesini verir.
[object PluginArray]
product
FF		 Tarayıcının ürün adını verir. (Örn, Gecko)
Gecko
productSub
FF		 Tarayıcının yapı numarasını verir. (Örn, 20071127)
20100101
userAgent
IE FF Opera		 Tarayıcının kullanıcı tanımlama bilgisini (User Agent) verir. Sonuç tablonun altında
appMinorVersion
IE Opera		 Tarayıcının küçük versiyonunu verir. (Noktadan sonraki kısım)
undefined
browserLanguage
IE Opera		 Tarayıcı lisanı verir. (Örn, tr, en, jp)
undefined
cpuClass
IE		 İşlemci sınıf tanımlamasını verir. (Örn, x86, PPC)
undefined
systemLanguage
IE		 İşletim sisteminin varsayılan lisanını verir. (Örn, tr, en, jp)
undefined
userLanguage
IE Opera		 İşletim sisteminin lisanını verir. (Örn, tr, en, jp)
undefined

 

 

 

 

Document Nesnesi

 

Tüm HTML dokümanını document nesnesi ile ifade edebiliriz. Sayfa içerisindeki herhangi bir elemana document nesnesi ile erişebilir ve özelliklerini değiştirebiliriz.

Örnek : document.write("Merhaba") Örnek : document.writeln("Merhaba") Örnek : document.title = "Yeni başlıki" Örnek : document.bgcolor = "blue"

 

 

//sayfa başlığını değiştiren basit bir örnek.

<html>
<head>
<title>Sayfa basligini degistirme</title>
<script language="Javascript1.2">
function degistir(form)
{
var baslik = form.baslik.value
document.title = baslik
}
</script>
</head>
<body>
Metin kutusuna sayfa basligi olmasini istediginiz metni yazarak, tamam butonuna basiniz.Sayfa basliginin degistigini göreceksiniz.
<form>
<input type="text" name="baslik"><br>
<input type="button" value="Tamam" onClick="degistir(this.form)">
</body>
</html>

 

 

<html>
<head>
<title>innerHTML Ornegi</title>
<script language="Javascript1.2">
function cikis()
{
degis.innerHTML="Yazinin degistigini fark ettiniz mi?"
}
function giris()
{
degis.innerHTML="Yazinin üzerine gelince, degisir."
}
</script>
</head>
<body>
<h1 id="degis" onMouseOver="cikis()" onMouseOut="giris()" >Yazinin üzerine gelince, degisir.</h1>
</body>
</html>

 

GetElement Metodu

 

Sayfa içerisinde id özelliği verilmiş herhangi bir elemanın özelliklerine ulaşmak için document.getElementById() etiketi kullanılır. document.getElementByName() getElementById ile aynı şekilde çalışır. Tek farkı id bilgisi yerine name bilgisini kullanır.

 

document.getElementById(): Elemanı ID’si ile bul
document.getElementsByTagName(): Elemanı TAG adı ile bul
document.getElementsByClassName(): Elemanı class adı ile bul

 

//Örnekte düğmeye basınca içi boş olan Div elemanına bir yazı atamış oluyoruz

<script type="text/javascript"> function tiklandi(){      
var eleman= document.getElementById("kimlik");      
eleman.innerHTML="Şimdi Dolu";  }  
</script>    

<div id="kimlik"> Boş </div>    
<input onclick="tiklandi();" name="Dugme" type="button" />

//Sayfaki bir inputun boyutunu büyültme

<html>
<head>
<title>Javascript Örneklerimiz </title>
<script>
function tikla() {
document.getElementById("isim").size=100;
}
</script>
</head>
<body>
<form>
<input type="text" name="isim" id="isim" />
<button onclick="tikla();">Tıkla</button>
</form>
</body>
</html>

//textbox'a yazılan değeri alma.

<html>
<head>
<title>Javascript Örneklerimiz </title>
<script>
function tikla() {
var gelenveri=document.getElementById("isim").value;
alert(gelenveri);
}
</script>
</head>
<body>
<form>
<input type="text" name="isim" id="isim" />
<button onclick="tikla();">Tıkla</button>
</form>
</body>
</html>

 

//inputun değerini değiştirme

<html>
<head>
<title>Javascript Örneklerimiz </title>
<script>
function tikla() {
document.getElementById("isim").value="Butona Tıkladınız. ";
}
</script>
</head>
<body>
<form>
<input type="text" name="isim" id="isim" />
<button onclick="tikla();">Tıkla</button>
</form>
</body>
</html>

//Elementi Gizlemek & Göstermek

<html>
<head>
<title>Javascript Örneklerimiz </title>
<script>
function gizle() {
document.getElementById("isim").style.display="none";
}
function goster() {
document.getElementById("isim").style.display="block";
}
</script>
</head>
<body>
<form>
<input type="text" name="isim" id="isim" /> <br/>
<button onclick="gizle();">Gizle</button> <button onclick="goster();">Göster</button>
</form>
</body>
</html>

 

 

Örnek:Arkplan rengini değiştirmek

<html>
<head>
<title>Arka Plan Renkleri</title>
<script language="JavaScript">

function renklendir(n)
{
switch(n)
{
case 1: document.bgcolor="red"
break
case 2: document.bgcolor="yellow"
break
case 3: document.bgcolor="blue"
break
case 4: document.bgcolor="orange"
break
case 5: document.bgcolor="green"
break
case 6: document.bgcolor="crimson"
break
default: document.bgcolor="white"
break
}
}
</script>
</head>

<body>
<a href="#" onclick="renklendir(1)">Kırmızı</a><br /><br />
<a href="#" onclick="renklendir(2)">Sarı</a><br /><br />
<a href="#" onclick="renklendir(3)">Mavi</a><br /><br />
<a href="#" onclick="renklendir(4)">Turuncu</a><br /><br />
<a href="#" onclick="renklendir(5)">Yeşil</a><br /><br />
<a href="#" onclick="renklendir(6)">Bordo</a><br /><br />
<a href="#" onclick="renklendir(7)">Beyaz</a><br /><br />
</body>
</html>

---------------------------------------ikinci yöntem

<head>
<script language="javascript">
function renk1(){document.bgColor="#589612";}
function renk2(){document.bgColor="#563248";}
function renk3(){document.bgColor="#789856";}
</script>
</head>

<body>
<img src="buton.fw.png" width="101" height="35" onmouseover="renk1()" />
<img src="buton.fw.png" width="101" height="35" onmouseover="renk2()" />
<img src="buton.fw.png" width="101" height="35" onmouseover="renk3()"/>
</body>

 

Örnek:Resim büyütme/küçültme

<head>
<script language="javascript">
function resimkucult(){
document.resim.width=300;
document.resim.height=300;
}
function resimbuyult(){
document.resim.width=800;
document.resim.height=800;
}
</script>
</head>

<body>
<img id="resim" name="resim" src="546465435 (2).jpg" width="371" height="300" onmouseover="resimbuyult()" onmouseout="resimkucult()" />
</body>

 

 

//Üyelik Sözleşmesi:Eğer kabul ediyorum seçilirse gönder butonu aktif olur, seçilmezse gönder butonuna tıklanmaz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Anlaşmayı Kabul Et</title>
<style type="text/css">
<!--
* {
font-family: "trebuchet ms";
font-size: 12px;
}
-->
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
Üyelik Sözleşmesi <br />
<textarea name="textarea" cols="60" rows="8">-Şurada şunu yapmak yasaktır
-Şurada şu ile ilgili mesajlar çekilmaz
-Burada büyük harflerle mesaj yazmayın
</textarea>
<br />
<input name="kabul" type="checkbox" id="kabul" onclick="
if (this.checked==false )
{document.getElementById('gonder' ).disabled='disabled';}
else
{document.getElementById('gonder' ).disabled='';}
"/>
<label for="kabul">Kabul Ediyorum</label>
<br />
<input type="submit" id="gonder" value="Gönder" disabled="disabled"/></form>
</body>
</html>

 

Web hosting by Somee.com