Posts Tagged ‘java script’

Java Script (js) Genel Kulanım

Pazartesi, Mayıs 4th, 2009

Javascript bir programlama dilidir.Ancak tıpkı htm gibi html arasına gömülerek yazılır ve düz yazı metni gibidir.Yani html dili gibi yorumlanmaya ihtiyac duyacaktır ve her yorumlayıcı javascript dilini kendine göre yorumlayabilir.
Yani her browser kendine göre yorumlayabilir.Bunun içinidrki javascript yazdıkdan sonra değişik browserlarda denemek gerekmektedir.

en belirgin özelliklerinden bahsedecek olursak

-Yorumlanmaya muhtaç bir dildir dedik.
-HTML arasında gömülerek yazılır.
-Javascript programının çalışması için bir hareket veya bir eylem-belirli bir zamanın geçmesi,browserın yüklenmesi ,bir tuşa basılması gibi-gerekmektedir.
-OOP,yani nesneye yönelimli bir dildir.
Netscape taradından geliştirilen javascript dilinin şimdiye kadar çeşitli sürümleri vadır.Ve daha öncede belirttiğim gibi bu sürümler veya kullanılan browser dikkate alınarak kodlanmalıdır.

Genel kullanımı:

javascript in 1.0 veya 1.1 gibi sürümlerini kullanırken
<script language=”javascript”></script> ÅŸeklinde tanımlama yapılır.
Üst sürümler için mesela 1.2;
<script language=”javascript 1.2″></script> ÅŸeklinde tanımlarız.

Şimdi genel kullanımına geçelim.Daha öncede söyledğim gibi html arasında gömülerek yazılır dedim.

Şimdi notdefterini açalım ve içine aşağıdaki kodları ekliyelim

<html>
<head><title>Javascript Uygulaması</title>
<script language=”javascript”>
selam(){
window.alert(”selamlar”);
}
</script>
</head>
<body onload=”selam()”>
</body>
</html>

ve dosya adına javasciptdeneme.html olarak değiştirerek kaydedelim.
Daha sonra dosyayı çalıştırdığımızda ekrana selamlar yazılı bir uyarı aldığımızı görücez.Çalışan örneğe şuradan bakabilirsiniz.
Burda anlatmak istediğim kullanılan fonksyion veya window.alert kodu değil.Bu konulara daha sonra değinicem.
Dikkat edersek javascript kodlarını head tagları arasına yazdık.Ve selam fonksiyonunu html içinden tetikledik.Nasıl tetikledik body tagında onload ile.
Yani tarayıcı body tagını yüklediğine selam fonksyionunu çalıştır dedik.
Daha önce de belirttiğim gibi bir olay ile muhakkak javascript kodları tetiklenmelidir.Burda onload kullandık ve bu tetiklemeyi html tagları içinden yaptık.Aynı şekilde javascript içinde de bu tetiklemeleri yapabiliriz.Ben şimdilik sadece çalışma mekanizmasından biraz bahsettim burda.
Daha sonra fırsat buldukça ,,,işimize yarıyacak kodlar,kullanımları,html ile etkileşim ve bir takım önemli javascript olayları (onload ,onchange,onmouseover gibi) hakkında bilgiler paylaşıcam.
Åžimdilik bu kadar.

Java Script (js) Fonksiyonlar

Pazartesi, Mayıs 4th, 2009

Javascript de fonksyion kullanımı diğer dillerdeki fonskyion kullanımlarına benzer

bir fonksyion tanımlaması yaparken

fonskiyon_ismi () {
…..//iÅŸlenecek satırlar
……
}

şeklinde kullanırız.
Bu noktadan sonra size güzel bir derleyici tavsiyesinde bulunmak istiyorum.
Evet pek çoğumuzun bildiği ve kullandığı notpad++
E hep notdefterinde çalışaca değiliz projeler büyüdükçe açılan kapanan tagların sayısı arttıkca bunların kontrolü zorlaşacak tasarım kısmı ve kod kısmını birbirinden ayıt etme gibi durumlar söz konusu olacağı için bu derleyiciyi tavsiye ediyorum.Gezginler sitesinin  şu linkinde programın 5.1.4 versiyonu mevcut.Desdeklediği dillerde içeriyor.
Piyasada tasarım anlaamında işi kolaylaştıran pek çok program var.Bunların en popüleri dreamweaver sanırım.Benim bu programı önermemin sebebi başlangıcı bu gibi bi derleyiciile  yaparak temeli sağlam atmak.
Daha önce html nedir? başlıklı yazıda değindiğim üzere dreamweaver gibi programlar kendileri kod ekledikleri için herhangi bir durumda bir değişiklik yada yenileme yapılması gerekildiğinde apışıp kalınılabiliyor.
İlk başta zor gelebilir ama kodlarla haşır neşir olurp bişeyler ortaya çıktıkça ve insan öğrendikçe dreamweaver dan daha zevkli hale gelicek.
Herneyse konuyu dağıtmadan üzerinde durmak istiyorum.

Javascript de fonksiyonları argümanlı ve argümansız olarak ikiye ayırırsak eğer şu şekilde ele almamız gerekecektir.

1Argümansız

Argümanlı fonksyionlar herhangibir parametre alıp bunu işlemeyen .Örnek veriyorum;
<html>
<head>
<script language=”javascript”>
mesaj(){
document.write(”merhaba”);
}
</script>
</head>
<body>
<form>
<input type=”button” onclick=”mesaj()” value=”mesaj kontrol”>
</form>
</body>
</html>

bu kodu notdefterine yapıştırıp adını mesaj.html olarak değiştirelim ve kayedelim.
Ekrana çkan butona bastığımızda merahab yazısı çıkar.Burada tabiki onclik olayını ve document write olayının üzerinde durmuyoruz ama açıklıyayım.Butona tıklama ile mesaj fonksyionun tetikledik.document.write ise bu dökğmana bişeyler yazma kodu olarak söyleyebilirim.Daha sonra bu konulara değinicem ama burda söylemek istediğim herhangi bir parametre göndermedik fonksona sadece tetikledik o kadar.Şimdi gelelim diğer tipine;

2.Argümanlı Fonksyionlar

Bazı durumlarda fonksiyona bir değer yollama ve bu değeri fonksyion içinde işleme ve geri alma gibi durumlar söz konusudur.Mesela örnek veriyorum.Daha önce gördüğümüz bir select nesnesi içinde bir değer var bizim bu değeri alıp javascritp fonksyionumuza parametre olarak göndermemiz gerekebilir.

<html>
<head>
<script language=”javascript”>
puan(a,b){
var sonuc =a+b;
document.write(sonuc);
}
</script>
</head>
<body>
<form>
<input type=”button” onclick=”puan(10,5)” value=”10+5=?”>
</form>
</body>
</html>

Burada fonksyiona puan(10,5) şeklinde iki değer gönderdik.Fonksyiona giden bu değerler 10 a değişkenine 5 de b değişkenine eşitlendi.
Javascript içinde tanımadığımız sonuc değişkeni bu iki sayının toplamıdır ve document.write ile ekrana bastık
Programlamanın temel taşlarından olan fonksyionları gördük.Daha sonraki yazılarda ve mantıksal denetlemeleri anlatıcam.Bu temel yapı taşlarını bitirdikten sonra işin zevkli kısımları form nesneleri ile etkileşimler,javascriptin kendien has nesneleri,html usnurları ile etkileşim ,bir takım javascript olaylarından bahsedicem.bütün bunların sonunda sitelerde karşılaştığımız yatay dikey açılır menüler ve basit anlamda text editör yapmayı anlatıcam.
Ama oraya kadar dahabiraz yol var.Åžimdilik bu kadar.

Java Script (js) Js dosyası çağırmak

Pazartesi, Mayıs 4th, 2009

javascript dosyasını html sayfamıza dışarıdan eklemek için <script src=”ornek.”> kalıbını kullanırız.

mesela masaüstünde bir klasör açalım ve aşağıdaki kodları notped e yazalım.
document.write(”<center>”)
document.write(”<h1>Merhaba</h1>”)
document.write(”</center>”)

ve dosyayı merhaba. olarak klasörümüze kaydedelim.Burda dikkat etmemiz gereken dosyası ile html dosyası aynı dizinde olmalı.Eğerki farklı bir dizinde ise yolunu doğru tanımladığımızdan emin olmalıyız.
Şimdi notpad e aşağıda ki kodları yazalım ve deneme.html olarak aynı klasöre kaydedelim.

<html>
<head><title>javascript uygulaması</title>
</head>
<body>
<script src=”merhaba.”>
</script>
</body>
</html>

Javascript dosyasının çağırılıp ekrana h1 başlığı olarak merhaba yazıldığını görücez.
Bu yazıda da dışarıdan dosyamızı nasıl eklediğimizi göstermeye çalıştım.Şimdilik bu kadar.

Java Script (js) Mantıksal Denetlemeler

Pazartesi, Mayıs 4th, 2009

Bu yazıda javascript de if deyimi ve bazı operatörlerden bahsedicem.

<script language=”javascript”>
var x=38;
function  onay(){
document.write(”sayı 30 ile 40 arasında”);
}
red(){
document.write(”sayı 30 ile40 arasında deÄŸil”);
}
if(x <40 &&   x>30){
onay();
}
else {
red();
}
</script>

bu script i html sayfamızda çalıştırdığımızda 38 sayısı eÄŸer 40′dan küçük ve 30′dan büyük ise onay fonksyionu eÄŸer deÄŸilse red() fonksyionu tetiklenecektir.

baız operatörler

* ve operatörü —> “&&”
* veya operatörü —> ” || ”
*deÄŸil operaörü —>  ” ! ”

if (! (x>=0)) —> eÄŸer x sıfırdan büyük eÅŸit deÄŸil ise.

basit anlamda mantıksal denetlemeyi anlatmaya çalıştım.Bu kısım için şimdilik bu kadar yazıcam.

Java Script (js) Döngüler

Pazartesi, Mayıs 4th, 2009

bizim belirli kısıtlar dahilinde aynı işi pek çok kez yapmamız gerektiğinde aynı kodları yazmakdan kurtaran tanımlı fonksiyonlardır.

Genel programcılıkdan aşina olduğumuz 3 tane döngüden bashedicem.

döngüsü;

(koÅŸul){
……
iÅŸlemler
……
}

do ..

do

iÅŸlemler

(koÅŸul ifadesi)

ve meşhur for döngüsü

<html>
<body>
<script language=”javascript”>
var i;
for (i=75;i<=1000;i +=25){
document.write(”sayı=”+i+”<br>”)
}
</script>
</body>
</html>
i 25er artıcak ve her defasında ekrana yazılacak
1000 i aşınca döngüden çıkılacak.

Bunun dışında swtich-case var ama onu anlatmıcam.onun yerine link vermek istiyorum. http://javascript-dersi.blogspot.com/ adresinde bu konularda ve tabiki ilerde bahsetmek istediğim bi takım konular hakkında güzel örnekler var
incelemenizi tavsiye ederim.Şimdilik bu kadar.Bidahaki yazıda artık javascript i birazda html ile haşırneşir etmenin vaktinin geldiğini düşünüyorum.Form nesnelerinden ve bunlara erişimden bahsedicem..

Java Script (js) Form Nesnesi

Pazartesi, Mayıs 4th, 2009

Artık geldik javascript i formlar ile etkileşim haline sokmaya.Tabiki javascriptin etkileşimi sadece form nesnleri ile sınırlı değil.Diğer html unsurları yada diğer ara dillerlede etkileşim halinda ama bu konuları daha sonra anlatıcam.şimdilik basit anlamda form nesneleri üzerinde durucam

Aşağıdaki kodları notpad i açıp içine yazalım ve jsdeneme.html olarka kaydedelim.

<html>
<head>
<title>Form örneği</title>
<script language=”javascript”>
goster(){
var bilgi =document.forms.Form1.mesaj.value;
window.alert(bilgi);
}

</script>
</head>
<body>
<form name=”Form1″ id =”Form1″>
<input type=”text” name=”mesaj” id=”mesaj”>
<input type=”button” name=”tamam” value=”tamam” onclick = “goster()”>
</form>

</body>
</html>

Daha sonra html sayfamızı çalıştıdığımızda input text e bişeyler yazalım ve tamam dediğimizde alert olarak yazdığımız yazıyı alıcaz.Yani input text e girilen veriyi javascript e aktarmış oldu ve alert olarak gösterdik
Şimdi biraz işleyişine bakalım.

html içindeki formlara ulaşmak için şu kod dizmini kullanıyoruz:
document.forms.formun_ismi.gidilecek_elemanın_ismi

bu şekilde inputtext e ulaştık.İnput text imiz Form1 içinde mesaj adında bir input text idi.Kodu incelersek

var bilgi = document.forms.Form1.mesaj.value;

burda önemli nokta javascript kodu id ye göre harket ediyor.Yani name
parametresine göre değil.Am name parametresine görede seçim yapılabilir bunu sonra anlatıcam.Herneyse id si Form1 olan formun içinde id si mesaj olan input text in değerini value olarak aldık ve bilgi değişkenine eşitledik.Daha sonrada alert olarak gösterdik
Umarım yeterince açıklayıcı yazdım.Mesela bir radio butonumuz var.Ve bu radio butonu tıklanmadığında bi uyarı göstermek istiyoruz.Yani doldurulması zorunlu alan gibi.
Aşağıdaki kodları notpad e yazalım ve jsdeneme2.html olarak kaydedelim.

<html>
<head>
<title>Form örneği</title>
<script language=”javascript”>
goster(){
if(document.forms.Form1.radio.checked!=true){
window.alert(”SözleÅŸme kurallarını lütfen okuyunuz!”);
}
else{}
}

</script>
</head>
<body>
<form name=”Form1″ id =”Form1″>
SözleÅŸmeyi okudum :<input type=”radio” name=”radio” id=”radio”><br>
<input type=”button” name=”tamam” value=”tamam” onclick = “goster()”>
</form>

</body>
</html>

biraz önceki örneğin yapısını korudum.Pki burda naptık radio butonun tıklanıp tıklanmadığını document.forms.Form1.radio.checked ile kontrol ettirdik.Burada checked deyiim radio buton için kullanıldı.Eğer tıklanmamışsa alert verdik.Örneği radyo butonuna  tıklamadan ve tıklayarak test edin.

Birazda select kutusundan bahsetmek istiyorum.Aşağıdaki kodu notdefterine yaıp jsdeneme3.html olarak kaydedelim ve çalıştıralım.

<html>
<head>
<title>Form örneği</title>
<script language=”javascript”>
goster(){
var x =document.forms.Form1.meslek.selectedIndex;
var meslek=document.forms.Form1.meslek.options[x].text;
window.alert(”seçilen meslek:” + meslek);

}

</script>
</head>
<body>
<form name=”Form1″ id =”Form1″>
Meslek:<select name=”meslek” id=”meslek” onchange=”goster()”>
<option>meslek seç</option>
<option>Mühendis</option>
<option>Mimar</option>
<option>Grafiker</option>
</select><br>

</form>

</body>
</html>

Burda yaptığımız ilk olarak selectedIndex terimi ile option ın kaçıncı elemanını seçtiğimizi bulmak oldu

var x =document.forms.Form1.meslek.selectedIndex;

burda mühendisi seçersek x=1 mimarı seçersek x=2 ve grafikeri seçersek x=3 olarak döner.Daha sonra bu değeri

var meslek=document.forms.Form1.meslek.options[x].text

değerine yolladık ve options[x].text ile değeri alıp alert olarak gösterdik.
Şimdilik form konusunda bu kadar anlatıcam.Ancak javascriptin  nesneleri tabiki bu kadarla sınırlı değildir.Zamanım olursa ilerde time nesnesi window nesnesi ve document nesnesinden bahsedicem.

Java Script (js) Döküman -title-bgcolor

Pazartesi, Mayıs 4th, 2009

Döküman nesnesi html sayfamıza etki etmek için bir deyimdir.Javascript de bir çok noktada kullanılan bir terim.Şurda form nesnelerinden bahsederken de çok kullandık zaten.Şimdi document nesnesinin iki parametresinden bahsetmek istiyorum.

title

Sayfa başlığına etki eden bi metod.

document.write(document.title) dediğimizde title barında kullandığımz değişkenin döndüğünü göreceğiz.

bgcolor

sayfa arkaplan rengine etki eden metod

document.bgcolor=”red”; dediÄŸimizde html dökümanımızın arka plan rengi kırmızı olur.

Java Script (js) Windows Nesnesi

Pazartesi, Mayıs 4th, 2009

Pek çok sitede ufak pencerelere link verildiğini görürüz.Bu yazıda window nesnesi ile nasıl pop-up pencere açarız biraz ondan bahsetmek istedim.

Aşağıdaki kodları notdefterine yazalım ve deneme.html adında kaydedelim.

<html>
<head>
<title> pencere açma</title>
<script language=”javascript”>

var yenipencere

yenipencereac(){
yenipencere=window.open(”",”YeniPencere”,”toolbar=0
,width=300,height=150,resizeable=1″);

yenipencere.document.write(”<h1>Yeni pencereye hoÅŸgeldin</h1>”);
}

pencerekapa(){
yenipencere.close();
}

</script>
<body onload=”pencerekapa()”>
<form>
<input type=”button” onclick=”yenipencereac()” value=”pencere aç” />

</form>
</body>
</html>

Çalıştırıp butona tıkladığımızda popup penceremizin açıldığını görücez.Burda window nesnesinin iki parametresi open ve close kullandık.

window.status=”benim sayfama hoÅŸ geldiniz”;
status metodu ile de pencerenin alt çerçevesindeki durum mesajına etki edebiliriz.

yeri gelmişken uyarı mesajlarında da bahsetmek istiyorum.
3 çeşt mesaj tipinden bahsedicem bunları hemen kod halidne yazıyorum denemesi size kalmış

window.alert(”merhaba”);
return window.confirm(mesaj);
return window.prompt (mesaj,varsayılan cevap);

özellikle editör kodlarken promt dan faydalınıcaz.Şimdilik bu kadar yazıcaklarım umarım faydalı bir yazı olmuştur.

Java Script (js) Olaylar

Pazartesi, Mayıs 4th, 2009

Her pencere ,browser veya kullanıcı olayına karşılık, de bir olay yönlendiricisi (event handler) vardır.Bu yazıda bazı olay yöneticilerinden bahsetmek istiyorum.
onclick
tıklama olayı ile yi tetikleriz.
<input type=”submit” value=”tamam” onclick=”tamam()” />

tamam butonuna tıkladığımızda onclik olay yöneticisi ile tamam() fonksiyonunu tetikliyoruz.

onSubmit
form verilerine onay verdiğimizde kullanılan olay yöneticisi

onayla(){
return confirm(”sipariÅŸi vermek istediÄŸinize eminmisiniz?”);
}

<form action =”form_islem.php” method=”post” onSubmit=”return onayla()”>

burda return onayla() ile onayla fonksyionu cevap bekliyor.return confirm uyarısı aldığı evet yada hayır cevabını döndürür.Evet ise form post edilir değil ise edilmez.

onReset
biraz önceki örnekdeki gibi formu resetler

onChange
değişim anında olay tetiklenir.Daha önce select nesnesinden bir eleman seçtiğimizde nasıl tetiklendiğini görmüştük
<input type=”text” name=”isim” onChange=”denetle(this)”>

burda fonksyion this değeri ile input type in içine girdiğimiz değeri alır ve denetle fonksyionuna gönderir.İnput text e bişey yazdığımız anda tetiklenmiş olur.Email kontrolü gibi konularda kullanılabilir.

onLoad,onUnLoad
body tagının ekidir.Body tagı işlendipğinde otomarik devreye girer.
<body onLoad=”uyari()”>
<body onUnLoad=”uyari()”>
şeklindek ullanılır.

onMouseOver ,onMouseOut
Adlarından da anlaşılacağı gibi mouse üerine geldiğinde ve çekildiğinde tetiklerler.

sitegoster(){
windows.statu=www.pointofme.tr.cx”;
}

<a href=”www.pointofme.tr.cx” name=”mysite” onMouseOver=”sitegoster()”>pointofme</a>

fare linkin üzerine gelince statü barda sitenin adı çıkar.yani fare linkin üzerinde iken sitegoster fonksiyonunu tetiklemiş olduk.
konusunda şimdilik bu kadar bashedicem.Yavaş yavaş artık html unsurlarının seçimine gelelim ve oradanda basit anlamda bir text editör javascriptle nasıl yapılır onu anlatıcam.

Java Script (js) Seçiciler

Pazartesi, Mayıs 4th, 2009

Javascript ile html unsurlarına ualaşabiliriz.Bu konuda 4 temel konudan bahsetmek istiyorum.
Bunlardan birincisi unsurları etiket adına göre seçmek,diğeri string olan name özelliğine göre seçmek ,bir diğeri id ye göre seçmek ve düğüm yapısına göre seçmek.

1-getElementsByTagName -getElementById

Hemen bir örnekle olaya açıklık getirelim.

<script type=”text/language”>
kalinyap(){
var divv=document.getElementById(’mydiv’);
var paragraf=document.getElementsByTagName(’p');
for(i=0;i<paragra.length;i++){
paragraf[i].style.fontStyle=”;
paragraf[i].style.fontWeight=”;
}
}
</script>

<div id=”mydiv”>
<p>icerik1</p>
<p>icerik2</p>
<p>icerik3</p>
<p>icerik4</p>
</div><br>
<input type=”button” value =”kalın yap” pnClik=”kalinyap()” />

burda kalın yap butonuna tıkladığımızda kalinyap() fonksiyonumuz tetikleniyor.iki tane seçici ile bir div i id sinden diğeride paragrafı tag isminden seçtik saha sonra fon döngüsü ile sırası ile tagları dolaştık.
html tagları düğüm yapısında olduğu için i ile aşağıya doğru bütün tagları sırası ile seçebiliyoruz.Bu konuyu birazdan düğüm yapısına göre seçmede daha detaylı anlatıcam.
Daha sonrada style metodunun fontsStyle parametresi ile içeriğe etki ettik.

2-getElementsByName

Kısa bir örnek vermek istiyorum sanırım yeteri kadar açıklayıcı olur.

var nesne = document.getElementByName(’haberNesne’);
ismi haberNesne olan html unsurunu seçtik.

3-element.FirstChild

html unsurları xml yapısında düğümlerden oluşur ve biz bu düğümler arasında javascript ile geçiş yapabiliriz.

Burda biraz xml yapısından bahsedicem.XML bizim verilerimizi karmaşık yapıdan kurtararak belirli bir standarta almamızı sağlayan bi markup dildir.
yani verilerimizi etiketliyerek daha kolay erşimi sağlar.Javascript de bu özellikden faydalanarak html nodlarına ulaşabilir

<div id=”anadiv”>—->parent
<div id=”altdiv1″>içerik1</div>—>firstChild
<div id=”altdiv2″>içerik2</div>—->childNodes[0]
</div>

anadiv burada parent yani ebeveyn dir.Diğerleri onun çocuğu yani alt düğümleridir.Bu ağaç yapısı bize kolay erişimi sağlar.altdiv1 firstChild veya childNodes[0] altdiv2 childNodes[1] dir.Bir alt düğüm daha olsa o zamanchildNode[2] olacakdı.

var ilkdügüm=document.getElementByI(’anadiv’).firstChild
bize altdiv1 ‘i
var ikincidügüm =document.getElementById(’anadiv’).childNodes[0]
bize altdiv2 yi verir.

birazda paremtrelerden bahsedeyim

ilkdügüm.id  bize aldiv1 idsini döndürür
ilkdügüm.nodeName bize DIV döndürür
ilkdügüm.nodeType bize 1 yani kaçıncı altdüğümde olduğumuzu gösterir
ilkdügüm.nodeValue bize null döndürür çünkü düğümün value parametresi boş
ilkdügüm.innerHTML bize içerik1 i döndürü.

element.lastChild
bize son düğüm elemanını verir.Örnekde altdiv2
element.hasChildNodes()
elementin altında düğüm varsa true yoksa false döner.

konu şimdilik bu kadar artık javascript ile istediğimiz nesneyi seçebiliyoruz.Ancak şunu belirteyim ileride jquery anlatmayı düşünüyorum ki jquery hazır kütüphane kullandığımız javascript yazım şeklidir.Bu kütüphane ile css yazar gibi html elementlerini seçebileceğimizi göreceğiz.Bu çok büyük kolaylık sağlıyor bize ama herzaman bahsettiğim gibi temeli sağlamk atmak lazım onun için bütün bu konular üzerinde durmak istedim.Jquery anlatmaya başlamadan önce css anlatıcam ve hmtl i nasıl dreamweaver olmadan şekkilendiriyoruz bundan bahsedicem.Daha sonra jquery ile css kodları gibi html unsurlarıan ulaşıcaz.Şimdilik bu kadar.
Yazar Erkut Güneri

Oyun Domain Registration Australia
Add to Technorati Favorites Technorati