Java script

Bilg.Yük.Müh.Oğuzhan TAŞ
AkareSoft Yazılım
Web Tasarım & Programlama
Version 1..0.0.2
AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ

JavaScript Nedir?
JavaScript bir script(betik) dilidir.
Programlama dili değildir, bir script(betik) dilidir. Kendi
başına çalışan EXE, COM dosyalar üretemezsiniz.
JavaScript, ağırlıklı olarak tarayıcılar üzerinde çalışır.
JavaScript ile Java Programlama Dili karıştırılmamalıdır.
JavaScript, istemci (client) tarafında çalışır. JavaScript,
node.js gibi sunucu(server) tarafında çalışan platformlarla
karıştırılmamalıdır. Node.js ayrı bir sunum olarak
anlatılacaktır.
JavaScript, genelde istemci tarafında çalışarak sunucu
yükünü azaltır. Sadece kullanıcının tarayıcısında sonuçlar
üretilir.

JavaScript
JavaScript kodları aşağıdaki gibi script tag’leri
arasında yazılır.
<script>
</script>
veya
<script type="text/javascript">
</script>
JavaScript kodları js uzantılı dosyalara yazılıp, HTML
içinde <head> etiketleri arasında çağrılabilir.
<script type="text/javascript" src="script.js"></script>

Ekrana yazı yazmak
JavaScript dili bir HTML çıkışı oluşturabilir. Bütün
Çalışmasını istediğiniz HTML kodlarınızı
document.write () içerisinde yazabilirsiniz.
<script>
document.write("<h1>Bu bir yazı</h1>");
</script>

JavaScript ile Olaylar
JavaScript ile form nesnelerine ait olayları kontrol
edebiliriz. Örneğin aşağıda bir butona tıklandığında
(onclick olayı) ekrana mesaj yazdırıyoruz.
Form, Textbox, Radio, Checkbox, Select, Textarea
nesneleri hakkında olayları JavaScript ile yönetebiliriz.
<button type="button" onclick="alert('Hoş
Geldiniz!')">Bana Tıkla!</button>

JavaScript ile HTML içeriği değiştirme
JavaScript kullanarak HTML içeriğini değiştirebilirsiniz.
Örneğin form nesnelerinden text, select, textarea, radio,
checkbox gibi nesnelerin id veya name özelliklerinden o
nesneye erişip özelliklerini değiştirebilirsiniz.
Örneğin aşağıdaki gibi bir metin kutusu oluşturalım.
<input type="text" name="ad" id="ad"
value=" Değer giriniz" >
Aşağıda ad isimli nesnenin değeri boşaltılıyor.
document.getElementById("ad").value="";

JavaScript ile CSS Değişikliği
Aşağıdaki fonksiyon sayfa yüklendiğinde çalıştırılarak
zemin renginin kırmızı yapılmasını sağlıyor.
function zeminRenkDegistir(renk){
document.body.style.background = renk;
}
<BODY onload="zeminRenkDegistir('red');">

JavaScript kullanarak CSS kodlarında değişikliği
yapabilirsiniz. Örneğin aşağıda CSS ile oluşturulan
kutunun rengini üzerine tıklandığında değiştirelim.
.kutu{
color:#FFF; background-color:#F20000;
width:250px;height:250px;
}

function renkdegistir()
{ document.getElementById("kutu").styl
e.background="green";
}
Aşağıdaki şekilde HTML içinde çağırıyoruz.
<div class="kutu" id="kutu"
onclick="renkdegistir();">
Bu bir kutucuk
</div>

JavaScript ile Giriş Kontrolü
JavaScript ile form giriş kontrolünü kolaylıkla
yapabilirsiniz. Örneğin;
 metin kutusuna değer girilmemişse
kaydedilmemesini,
e-mail adresinin uygun formatta girilip girilmediğini;
Tweeter’da olduğu gibi textarea ‘ya maksimum kaç
karakter girileceğini vs. kontrol edebilirsiniz.

Form Kontrolü
Aşağıdaki formda sadece bir metin kutusu ve bir form
bulunmaktadır. Metin kutusunun boş geçilmemesi ve girilen metin
uzunluğunun 4’den küçük olması halinde uyarı verilmesini sağlayan
JavaScript kodunu yazınız.
<body>
<form id="kayitForm">
<label>Adınızı Giriniz: </label>
<input type="text" name="ad" id="ad"><br>
<input type="button" onclick="formKontrol();" value="Kaydet"><br>
</form>
</body>

Fonksiyon
function formKontrol(){
deger= document.getElementById("ad").value;
if (deger == "" ){
alert("Lütfen ad alanını boş geçmeyiniz");
} else{
if (deger.length<4)
alert("Lütfen 3den büyük giriniz.");
else
alert("Tebrikler");
}
}
}

parseInt()
parseInt() fonksiyonu bit string değeri tam sayıya
dönüştürmek için kullanacağınız bir fonksiyondur.
yenideger = parseInt(gelenDeger);
Örneğin iki metin kutusunda sayılar girildiğinde ve
matematiksel işlem yapılmak istendiğinde girilen
değerler mutlaka sayıya çevrilmelidir.
tamsayi=parseInt(document.getElementById("sayi"))

parseInt() Kullanımı
Aşağıdaki fonksiyon iki metin kutusuna girilen sayı
Değerlerini toplayarak ekrana mesaj yazmaktadır.
function topla(){
sayi1=parseInt(document.getElementById("sayi1").value);
sayi2=parseInt(document.getElementById("sayi2").value);
toplam = sayi1 + sayi2;
alert(toplam);
}

parseFloat() Kullanımı
Özellikle küsüratlı değerler üzerine işlem yapılıyorsa,
string bir ifadeyi küsüratlı hale çevrimek için
kullanılır.
Bir integer bir float ifadenin sonucu float’tır.
İki float ifadenin sonucu float’tır.
parseInt fonksiyonu sayı float olsa bile küsüratını
atarak tam sayı yapar.
sayi1=parseFloat(document.getElement
ById("sayi1").value);

JS Dosyasını çağırma
JavaScript fonksiyonlarını ve komutlarını bir dosyaya
kaydedip HTML sayfanız içerisinden aşağıdaki gibi
çağırabilirsiniz.
Genelde JavaScript dosyalar JS klasörüne atılır,
JavaScript dosyalarının uzantısı ise JS olur.
<head></head> tagleri arasında aşağıdaki gibi
yazarak da JavaScript dosyalarını çağırabilirsiniz.
<script src="myScript.js"></script>

JavaScript Değişkenler
var x;
var araba="Ford";
Diziler
var araba=new Array();
araba[0]="Saab";
araba[1]="Volvo";
araba[2]="BMW";

Diziler için özel fonksiyonlar
pop() : Dizinin son elemanını kaldırır, ve bu eleman geri
döner.
push() : Dizinin sonuna yeni eleman ekler, yeni uzunluk
geri döner.
concat(): İki diziyi birleştirir, sonuçta yeni dizi döner.
indexOf(): Bir elamanı dizide arar, geriye pozisyonunu
döndürür.
lastIndexOf(): indexOf() gibidir, sondan başlar.
reverse(): Dizinin elemanlarını ters çevirir.
join(): Tüm dizi elemanlarını bir stringde birleştirir.
sort(): Dizinin elamanlarını sıralar.

Object(Nesne) Tipi
JavaScript’de Boolean, Integer, Float, Array tipleri
dışında Object(Nesne) tipi de vardır.
kisi=new Object();
kisi.adi="Cüneyt ";
kisi.soyadi="Arkın";
kisi.yas=50;
kisi.gozrengi="mavi";
nesne.özellik şeklinde bir nesnenin özelliğine,
nesne.Metodadi() şeklinde bir nesnenin metoduna
erişebiliriz.

Nesneler
var kisi={
adi : "Oğuzhan",
soyadi : " Taş",
TC : 35023310233;
};
isim= kisi.adi;
isim=kisi[" adi"];

confirm() kullanımı
function sorbakalim() {
var cevap = confirm("Ayrılmak ister misiniz?")
if (cevap){
alert("Güle güle!")
window.location = "http://www.google.com/";
}
else{
alert("Kaldığınız için Teşekkürler!")
}
}
<input type="button" onclick="sorbakalim()" value="Siteden Ayrıl">

prompt kullanımı
function topla(){
sayi1=prompt("1.sayı","");
sayi2=prompt("2.sayi","");
if (sayi1 !="" && sayi2!=""){
toplam =parseFloat(sayi1) +parseFloat(sayi2);
alert("Toplam değeri="+toplam);
}
else
alert("Lütfen boş geçmeyiniz");
}
<input type="button" onclick="topla();" value="topla">

Döngüler
function say()
{
for(i=1; i<10; i++)
alert(i);
}
For ile Sonsuz Döngü
for (;;){
}

For Sonsuz Döngüsü
(Döngüler For içinde Break Kullanımı)
function say()
{
 for(i=1;; i++)
{
 if (i==15) break;
 alert(i);
}
}

While Döngüsü
function say()
{
i=1;
while(i<10){
 alert(i);
 i++;
}
}

While Sonsuz Döngüsü
function say()
{ deger=true;
i=1;
while(deger){
 alert(i);
 if (i==15) break;
 i++;
}
}

Döngü ile Dizi Toplama
function dizitopla()
{ var sayilar=new Array();
sayilar[0]=1;
sayilar[1]=5;
sayilar[2]=10;
toplam=0;
for (i=0;i<sayilar.length;i++){
toplam+=sayilar[i];
alert(sayilar[i]);
}
alert("Toplam Sonucu="+toplam);
}

Ratsgele Sayı Üretme
Math.random();
0 ile 1 arasında sayı üretir.
Math.floor((Math.random()*10)+1);
Buarada 1 ile 10 arasında sayı üretiliyor, 1
eklenmesinin nedeni üretilenlerin sıfırdan

Olaylar – Onfocus Olayı
Örneğin bir metin kutusuna odaklanınca rengini
değiştirelim.
function aktifYap(x)
{
x.style.background="#FFFFBB";
}
function aktifYap2(x)
{ x.style.background="green";
x.style.color="white";
}

Olaylar – Onfocus Olayı
Adınızı Giriniz: <input type="text"
onfocus="aktifYap(this)"><br>
Soyadınızı Giriniz: <input type="text"
onfocus="aktifYap2(this)"><br>
<p>Metin kutusuna odaklanınca rengi sarı veya yeşil olacak.</p>

Olaylar Onmousedown Onmouseup
Örneğin fare şemsiye kapalı iken üzerine gelince şemsiyenin açılasını sağlayalım.

function semsiyeAc()
{document.getElementById('semsiye').src="semsiye
acik.jpg";
}
function semsiyeKapat()
{ document.getElementById('semsiye').src="semsi
yekapali.jpg";
}

Aşağıdaki id’si semsiye olan nesnede iki olay
tetikleniyor. Onmousedown olayında semsiyeAc
fonksiyonu, onmouseup olayında semsiyeKapat
fonksiyonları çağrılıyor.
<img id="semsiye" onmousedown="semsiyeAc()"
onmouseup="semsiyeKapat()"
src="semsiyekapali.jpg" />

Olaylar onmouseout ve onmouseover
Onmouseover olayı fare nesne üzerine getirilince
tetiklenir, onmouseout ise fare nesne üzerinde
alınınca gerçekleştirilir.
Durum 1
Durum 2
Örneğin metin kutusu nesnemiz Durum 1 deyken fare üzerine getirilince Durum2
Ye geçmesini isteyebiliriz.

function aktifYap(x){
x.style.background="#D20000";
x.style.color="#FFF";
x.value="";
}
function pasifYap(x) {
x.style.background="#FFF";
x.style.color="#000";
}

<html>
<body>
<script>
// Önceki sayfadaki fonksiyonlar buraya gelecek
</script>
Adınızı Giriniz: <input type="text" value="Fareyi
üzerime getirin« onmouseover="aktifYap(this);"
onmouseout="pasifYap(this);">
</body>
</html>

Radio Button olayları
Aşağıdaki gibi iki tane radio button olsun, Erkek
seçilince ekrana Erkek seçildi, bayan seçilince bayan
seçildi yazsın.

function sec(){
if (document.formCv.cinsiyet[0].checked){
alert("Erkek seçildi");
}
if (document.formCv.cinsiyet[1].checked)
alert("Bayan seçildi");
}

Formun head kısmına <script> etkiketleri arasında
önceki sayfadakileri body kısmına da aşağıdakileri
yapıştırınız.
<form name="formCv" >
Erkek:<input type="radio" name="cinsiyet"
value="Erkek" onclick="sec()";>
Bayan:<input type="radio" name="cinsiyet"
value="Bayan" onclick="sec()";>
</form>

Radio Buton Örnek 2
Radio butonlardan erkek seçilince askerlik durumu
sorulsun, bayan seçilince sorulmasın.

function sec(){
if (document.formCv.cinsiyet[0].checked){
document.getElementById('askerlik').style.vi
sibility = 'visible';
}
if (document.formCv.cinsiyet[1].checked)
document.getElementById("askerlik").style.vi
sibility="hidden";
}

<form name="formCv" >
Erkek:<input type="radio" name="cinsiyet" value="Erkek"
onclick="sec()";>
Bayan:<input type="radio" name="cinsiyet" value="Bayan"
onclick="sec()";>
<br>
<select id="askerlik" name="askerlik">
<option value="1">Tecilli</option>
<option value="2">Yapıldı</option>
<option value="3">Muaf</option>
</select>
</form>

Checkbox (Onay Kutusu)
function HepsiniSec(chk)
{ for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
}
function HicbiriniSecme(chk)
{ for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
}

Checkbox (Çağırma)
<input type="button" value="Hepsini Seç"
onclick="HepsiniSec(document.frmCheck.dersler);">
<input type="button" value="Hiçbirini Seçme"
onclick="HicbiriniSecme(document.frmCheck.dersler
);">

Screen(Ekran) Nesnesi
availHeight: Ekran yüksekliğini verir. (Windows
Görev Çubuğu Hariç)
availWidth: Ekran genişliğini verir. (Windows Görev
Çubuğu Hariç)
colorDepth: Resimleri gösterirken kullanılan renk
paletinin bit derinliğini verir.
height: Ekranın toplam yüksekliğini verir.
width: Ekranın toplam genişliğini verir.
pixelDepth: Ekranın renk çözünürlüğünü verir.

JavaScript hazır fonksiyonlar
 Math.abs(-7.25); //abs, mutlak değer fonksiyonudur.
7.25
 var c=Math.abs(null);
0 (sıfır)
 var x=Math.PI;
3,14
 var y=Math.sqrt(16);
4
 Math.floor(1.6); //floor fonksiyonu aşağı yuvarlar
1
 var d=Math.ceil(5.1); //ceil fonksiyonu yukarı yuvarlar
6
 var e=Math.ceil(-5.1)
-5

JavaScript Sabitler
Math.E = Sabit E Sayısı =2,718
Math.PI = Sabit PI sayısı =3,14…
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

Pencere Oluşturma-window
window.open komutu parametreler alarak yeni bir
pencere açılmasını sağlar.
Aşağıda 200 piksel genişliğinde, 100 piksel yüksekliğinde
bir pencere oluşturularak içine «Bu pencere» yazılıyor.
Son satırda da yeni oluşturulan pencereye odaklanılıyor.
<script>
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("<p>Yeni pencere</p>")
myWindow.focus();
</script>

Pencere Ayarla
 <script>
 function pencere_ayarla(genislik, yukseklik, pfile)
 {
 ust= parseInt((screen.height-yukseklik)/2)-50;
 sol= parseInt( (screen.width-genislik)/2);
 rapor_m=
window.open(pfile,'Bul','location=0,status=0,scrollbars=
1,width='+genislik+',height='+yukseklik+',top='+ust+',le
ft='+sol);
 rapor_m.focus();
 }
 </script>
 </head>
 <body>

String Fonksiyonları
charAt(sayi) stringin belirtilen karakterini bulur.
var str = "Ankara Havası";
var n = str.charAt(2);
Sonuç: k
concat() İki veya daha fazla stringi birleştirir.
var str1 = "Türkiyenin";
var str2 = "Güzellikleri! ";
var n = str1.concat(str2);
Sonuç: "Türkiyenin Güzellikleri! "
substr(n1,n2) Verilen stringin n1. karakterden itibaren n2 tanesini alır.
var str="Türkiyenin Güzellikleri!";
var n=str.substr(2,5)
Sonuç: rkiye

Buton ile Yeni Pencere
Aşağıda düğmenin onclick olayı tetiklenerek
pencere_ayarla fonksiyonu çalıştırılıyor.
 <input name="Dugme" type="button"
onClick="pencere_ayarla(550,525,‘http://www.google.
com');" value="Yeni Pencere">

İleri-Geri Sayfaya Gitme (History)
Buton şeklinde çağırmak için;
<form>
<input type="button" value="Önceki Sayfaya Geri
Dön" onclick="history.go(-1)">
</form>
Link(bağlantı) şeklinde çağırmak için;
<a href="javascript:history.go(1)">
Bir sonraki Sayfa
</a>

Düzenli İfadeler (Regular
Expressions)
Değiştiriciler (Modifiers)
i: Küçük büyük harf hassasiyetli
g: Global karşılaştırma gerçekleştirir.
m: Çok satırlı karşılaştırma gerçekleştirir.
Köşeli Parantezler (Brackets)
[abc] Parantezler içindeki karakterlerden birini bulur.
[^abc] Parantezler içinde olmayanları bulur.
[0-9] Sıfır ile Dokuz arası rakam bulur.
[A-Z] Büyük A ile Z arası karakterleri bulur.
[a-z] Küçük a ile z arası karakterleri bulur.

Expressions)
[A-z] Büyük A ile küçük z arası tüm harfler bulunur.
[adgk] Verilen küme içerisindekileri bulunur.
[^adgk] Verilen küme dışındakileri bulur.
[red|green|blue] Verilen alternatifler den birini bulur.
MetaKarakterler
. Bir karakteri bulur, (yeni satır ve satır sonlandırıcı
hariç)
w Bir kelime karakteri bulur.
W Kelime olmayan karakteri bulur.
d Bir rakamı bulur

Expressions)
D Rakam olmayanları bulur.
s Beyaz boşlukları (whitespace) bulur.
S Beyaz boşluk olmayanları bulur.
b Bir kelimeyi bulur. (başlangıç veya bitişte)
B Bir kelimeyi bulur (başlangıç ve bitişte olmayanı).
0 Null karakterleri bulur.
n Yeni satır başlangıç karakterlerini bulur.
f Yeni form (Form Feed)karakterlerini bulur.
r Satış başı (Carriage Return)karakterlerini bulur.
t Tab karakterlerini bulur. AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ

Expressions)
v Dikey Tab karakterlerini bulur.
xxx Sekizlik sayı düzeninde xxx ile belirtilenleri
bulur.
xxd Onaltılık sayı sisteminde dd gösterilenleri bulur.
uxxxx Onaltılık sayı sisteminde xxxx ile gösterilen
unicode karakterleri bulur.
Quantifiers
n+ İçinde en az bir n geçenleri bulur.
n? İçinde sıfır veya bir tane n içerenleri bulur.
n* İçinde sıfır veya daha fazla içerenleri bulur.

Expressions)
 kelime1 @ kelime2 . kelime3
E-posta adresinin düzenli ifadelerde gösterimi şöyle
olabilir.
Bir kelime = w+
Sonra @ işareti = @
Sonra bir kelime = w+
Sonra nokta = .
En son bir kelime = w+
Sonuç : /w+@w+.w+/
Ve daha bir çok kural tanımlayabilirsiniz

Özet Regular Expressions

RegExp Parametreler
global: Karakter dizisinin tamamının kontrol edilip-edilmeyeceği.
ignoreCase: Harf hassasiyetinin olup olmadığı
nultiline: Karakter dizisinin çok satırlı olup-olmadığı.
RegExp Fonksiyonlar
exec: Aldığı karakter dizisi parametresi içinde
eşleşmeyi uygular.
test : Aldığı karakter dizisi parametresini eşleşme için
test eder.

Sadece Sayı Girişi
<script type='text/javascript'>
function sayisalKontrol(eleman, mesaj){
 var regularifade = /^[0-9]+$/;
 if(eleman.value.match(regularifade)){
 return true;
 }else{
 alert(mesaj);
 eleman.focus();
 return false;
 }
}
</script>

Sadece Sayı Girişi (2)
Önceki sayfadaki fonksiyonu aşağıdaki form içinde
kullanabilirsiniz.
<form>
Telefon Numarası:
<input type='text' id='sayilar'/>
<input type='button'
onclick="sayisalKontrol(document.getElementById('sayilar'),
'Yalnızca sayi girebilirsin')" value='Kontrol et' />
</form>

Sadece Harf Girişi
<script type='text/javascript'>
function harfKontrol(eleman, mesaj){
 var regularifade = /^[a-zA-Z]+$/;
 if(eleman.value.match(regularifade)){
 return true;
 }else{
 alert(mesaj);
 eleman.focus();
 return false;
 }
}
</script>

Sadece Harf Girişi(2)
<form>
Adınız (Sadece harf): <input type='text' id='harfler'/>
<input type='button'
onclick="harfKontrol(document.getElementById('harfle
r'), 'Sadece harf giriniz')"
value=‘Kontrol et' />
</form>

E-posta Kontrolü
function eposta_kontrol(form_id, eposta) {
var reg = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.
([A-Za-z]{2,4})$/;
var adres =
document.forms[form_id].elements[eposta].value;
if(reg.test(adres) == false) {
alert(‘Geçersiz e-posta adresi girdiniz.');
return false;
}
}

E-posta kontrolü (2)
Önceki sayfadaki fonksiyonu çağırmak için aşağıdaki
HTML kodlarını kullanabilirsiniz. Aşağıdaki form
onaylandığında e-posta adresi kontrol edilerek
doğruysa kaydet.php’ye gönderilir.
<form id="form_id" method="post"
action="kaydet.php" onsubmit="javascript:return
eposta_kontrol('form_id','eposta');">
<input type="text" id="eposta" name="eposta" />
<input type="submit" value="Gönder" />
</form>

Bir sayfayı yazıcıya Gönderme
window.print fonksiyonunu kullanarak aktif
yazıcıya web sayfasını gönderebilirsiniz.
<form>
<input type="button" value= " Bu sayfayı
yazdır " onClick="window.print()" />
</form>

Kaynaklar
www.w3cschools.com
http://www.mynotlar.com/javascript
http://www.tizag.com/javascriptT/
http://www.codeproject.com/

Java script

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (7)

Similaire à Java script

Similaire à Java script (20)

Plus de Oğuzhan TAŞ Akademi

Plus de Oğuzhan TAŞ Akademi (6)

Java script