Ders1 Konu

Java Script
Neler Yapılabilir?
 AktifKullanıcı Arayüzü
 Daha hızlı cevap veren kullanıcı arayüzü
 Özelleştirilmiş Sayfalar
 Tarayıcı Kontrolü
SEMRA KAVAS
İto Vakfı Süleyman Taştekin Meslek Lisesi
Neler Yapılamaz
 Veritabanıile bağlantı yapılamaz.
 Dosyaya veri yazamaz.
 Sayaç tutamaz.
 Var olan durum bilgisini saklayamaz.
SEMRA KAVAS
 <html>
<body>
<h1>İlk javascript kodum</h1>
<p id="demo">This is a paragraph.</p>
<script type="text/javascript">
... JavaScript kodları buraya yazılır
</script>
</body>
</html>
SEMRA KAVAS
<html>
<body>
<h1>My First Web Page</h1>
document.write(“Merhaba");
</script>
</body>
</html>
SEMRA KAVAS
 Merhaba ifadesini kalın ve italik yazınız.
SEMRA KAVAS
Sitem tarihini ekrana yazdırma
<html>
<body>
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>
SEMRA KAVAS
 Küçük büyük harf duyarlılığı vardır
sayi, Sayi, sAyi değişkenleri birbirinden farklıdır.
 Açıklama satırları // ifdesiyle belirtilir
// Başlık yazımı
document.write("<h1>Bu bir başlık</h1>");
// İki paragraf yazımı
document.write("<p>Bu bir
paragraf.</p>");
document.write("<p>Bu başka bir
paragraf</p>");
</script>
SEMRA KAVAS
 Birden fazla açıklama satırı { ….} ile belirtilir.
 <script type="text/javascript">
/*
Aşağıdaki kodlar bir başlık, iki tanede
paragraf oluşturmamızı sağlar
*/
document.write("<h1>Bu bir başlık</h1>");
document.write("<p> Bu bir
paragraf</p>");
document.write("<p> Bu başka bir
paragraf.</p>");
</script>
SEMRA KAVAS
Harici Css kodları yardımıyla
 Başlığın yazı rengini kırmızı;
 Paragrafların yazı rengini lacivert olarak
ayarlayınız.
SEMRA KAVAS
Değişkenler
 Değişken nedir?
SEMRA KAVAS
Değişkenler
 Değişken : Değişken, JavaScript de dahil
olmak üzere tüm programlama dillerinde
kullanılan;
içeriği tamamen isteğe bağlı olarak
atanan ve programcı tarafından ihtiyaca
göre oluşturulan nesnelerdir. Değişkenin
içeriği metin yada sayı olabilir.
Geçici olarak verilerin saklanılmasını
sağlar.
SEMRA KAVAS
Değişken tanımlama
 JavaScript'te değişken kullanmak için ilk olarak, değişken

isminin "var" komutu kullanılarak belirtilmesi gerekir.
 Hemen değişkeni belirtirken yada daha sonra script içerisinde

değişkene bir değer atanabilir.
SEMRA KAVAS
 Eğer değişken tanıtılmadan içeriğine bir değer
atanılmaya çalışırsa script çalışmaz.
var gezegen;
gezegen = "mars“;
yada
var gezegen = "mars“;
Bu örneklerde değişkenimiz "gezegen", değeri "mars" tır.
Değişken türü?
SEMRA KAVAS
 Birvar komutu ile birden çok değişken
tanımlana bilir.
var okul,sınıf,no;
// burada var komutu okul,sınıf ve no

olmak üzere üç değişken oluşturduk.
SEMRA KAVAS
 <html>
<script language="javascript">
function deneme()
{
var mesaj;
mesaj = "örneğimiz çalışıyor“;
alert(mesaj);
}
</script>
<body>
<center>
<p>Değişken Örneği</p>
<input type="button" value="Tıklayın!.."
onclick="deneme()">
</body>
</html>
SEMRA KAVAS
JavaScript Değişkenlerinin Özellikleri:
 JavaScrip'te değişken kullanılmadan önce "var"

komutu ile tanımlanmalıdır.
 JavaScrip'te değişkene atanan değer string ise "

" imleri arasına yazılır.
 Küsuratlı sayısal değerler "." (nokta) ile gösterilir. 3.5 (

"," virgül kullanılmaz.)
 JavaScrip'te değişken algılanırken büyük küçük harf

ayrımı yapılır. Örneğin "okul" ile "Okul" kelimeleri
JavaScript tarafından iki farklı değişken olarak
algılanır. SEMRA KAVAS
JavaScript Aritmetik
Operatörler
 +
-
*
/
%
 ++
 --
SEMRA KAVAS
JavaScript Atama Operatörleri
=
 +=
 -=
 *=
 /=
 %=
SEMRA KAVAS
String değişkenler üzerinde ‘+’
Operatörü
 txt1=“Ne kadar";
txt2=“Güzel bir Gün";
txt3=txt1+txt2;
 Aralarında boşluk bırakmak istersek?
SEMRA KAVAS
Uygulama
 x=5+5;
document.write(x);
x="5"+"5";
document.write(x);
x=6+"5";
document.write(x);
x="5"+8;
document.write(x);
SEMRA KAVAS
JavaScript Fonksiyonları ve Olayları
 Şu anki öğrendiğimiz yönteme göre Javascript kodları web sayfamız
yüklenir yüklenmez çalışacaktır.
 Fakat kodlarımızın her zaman bu şekilde çalışmasını istemeyebiliriz.
 Javascript kodlarımızın her hangi bir olay gerçekleştiğinde çalısmasını

isteyebiliriz.
Örneğin;
 Kullanıcı bir butona tıkladığı zaman,
 Kullanıcı bir linkin üzerine geldiğinde,
 Bir resmin üzerinde geldiğinde çalışmasını isteyebiliriz.
 Bu durumlarda script kodlarımızı bir fonksiyon içerisinde yazmamız

gerekmektedir.
SEMRA KAVAS
 Böylece bir olay gerçekleştiğinde çalışmasını istediğiniz fonksiyonu
çağırabilirsiniz.
Fonksiyonların Tanımlanması
Parametresiz Fonksiyon
function fonksiyonismi ( )
{
…..
kodlar
……
}
SEMRA KAVAS
Örnek
<html><head>
function mesaj()
{
document.write(“Merhaba”);
}
</script>
</head>
<body>
<h1>İlk javascript kodum</h1>
<button type="button" onclick=“mesaj()">Mesajı
Görüntüle</button>
</body>
</html>
SEMRA KAVAS
Uygulama
 Klavyeden girilen ismi ekrana 20 kere
yazdıran uygulamayı yazınız.
SEMRA KAVAS
Çözümü- javascript
function yazdir()
{
var isim=prompt("isminizi giriniz");
for(var i=1; i<20; i++)
document.write(isim+"<br>");
}
</script>
SEMRA KAVAS
Çözümü- cevabı
<form method="post" action="">
<input type="submit" name="button"

value="Yazdır" onclick="yazdir()" />
</form>
SEMRA KAVAS
Uygulama
 TExtBox’lara
girilen ad ve soyad bilgilerini ekrana
mesaj vererek yazdıran uygulamayı hazırlayınız.
SEMRA KAVAS
Uygulama
 Klavyeden girilen 2 sayı üzerinde toplama,

çıkarma, çarpma, bölme işlemlerini
yaptıran uygulamayı hazırlayınız.
SEMRA KAVAS
Fonksiyonların Tanımlanması
Parametreli Fonksiyon
function fonksiyonismi
(degisken1,degisken2,...,degiskenX)
{
…..
kodlar
……
}
SEMRA KAVAS
Örnek
 <html>
<head>
function carp(a,b)
{
document.write(a*b);
}
</script>
</head>
<body>
carp(4,3);
</script>
</body>
</html>
SEMRA KAVAS
Fonksiyondan Değer
Döndürme
 <html>
<head>
function carp(a,b)
{
return a*b;
}
</script>
</head>
<body>
document.write(carp(4,3));
</script>
</body>
</html>
SEMRA KAVAS
Soru
 Sayfamız içerisindeki butona tıklanıldığı
zaman ekrana “ilk örneğimiz çalışıyor”
şeklinde uyarı veren java script kodlarını
yazınız.
SEMRA KAVAS
Cevap
<html>
function mesaj()
{
alert("ilk örneğimiz çalışıyor")
}
</script>
<body>
<center>
<p>Alert Kutusu Örneği</p>
onclick="mesaj()">
</body>
</html>
SEMRA KAVAS
Değer Döndürmeden Kare
hesaplama
function kare(x)
{
var sonuc=x*x;
alert(sonuc);
}
kare(5);
kare(10);
</script>
SEMRA KAVAS
Değer Döndürerek Kare
hesaplama
function kare(x)
{
return x*x;
}
alert(kare(5));
alert(kare(10));
</script>
SEMRA KAVAS
Uygulama
 1’den10’a kadarki sayıların karelerini
ekrana yazdıran uygulamayı hazırlayınız.
SEMRA KAVAS
Çözüm
function kare(x)
{
return x*x;
}
for(var i=1; i<=10; i++)

alert(kare(i));
</script>
SEMRA KAVAS
Alert - Uyarı mesajı yazdırma
<html>
<body>
alert("ilk örneğimiz çalışıyor");
</script>
</body>
</html>
SEMRA KAVAS
Confirm Box
 Kullanıcıdanonay almak için
kullanılmaktadır.
 “Tamam” ya da “İptal” tuşlarına

basmanızı sağlamaktadır
SEMRA KAVAS
 <html>
<head> Örnek
function show_confirm()
{
var r=confirm(“Bir Butona basınız");
if (r==true)
{
alert(“Tamam tuşunu tıkladın!");
}
else
{
alert(“İptal tuşunu tıkladın!");
}
}
</script>
</head>
 <body>
<input type="button" onclick="show_confirm()" value=“Confirm Box’ Aç" />
</body>
</html>
SEMRA KAVAS
Prompt Box
 Kullanıcıdanbir değer almak için

kullanılmaktadır.
Kullanımı
prompt(“Açıklayıcı İfade",“varsayılan
değer");
SEMRA KAVAS
Örnek
<html>
function mesaj()
{
var a
a = prompt("Adınızı Giriniz","Adınız")
alert(a+" JavaScript Öğrenmeye başladın artık!")
}
</script>
<body>
<center>
<p>Prompt Örneği </p>
onclick="mesaj()">
</body>
</html>
SEMRA KAVAS
Soru
SEMRA KAVAS
<html>
Cevap
<head>
function show_prompt()
{
var name=prompt(“İsminizi Giriniz","Harry Potter");
if (name!=null && name!="")
{
document.write("<p>Merhaba " + name + "! Bugün nasılsın?</p>");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_prompt()" value=“Prompt Box’ı Göster" />
</body>
</html> SEMRA KAVAS
Basit bir rollover image oluşturma
SEMRA KAVAS
Harici Javascript kodlarının
kullanımı
<html>
<head>
<script type="text/javascript"
src="xxx.js"></script>
</head>
<body>
…..
……
</body>
</html>
SEMRA KAVAS
Uygulama - 1
 Sayfamız içerisindeki butona tıklanıldığı
zaman ekrana “ilk örneğimiz çalışıyor”
şeklinde uyarı veren harici javascript
kodlarını yazınız.
SEMRA KAVAS
Uygulama- 2
 RolloverImage uygulamasını harici
javascript dosyasına dönüştürünüz.
SEMRA KAVAS
Kontrol Yapıları
 İf ( ) komutu
 İf else komutu
 İf else if else komutu
 Switch() komutu
SEMRA KAVAS
if() Komutu:
 "if" kelimesi İngilizce de "eğer" anlamına
gelmektedir. JavaScript'deki anlamı da
tam olarak budur. Yani JavaScript'te if()
komutu; eğer verdiğim koşul doğruysa
süslü parantezler "{...}" içindeki komutları
uygula anlamına gelmektedir.
SEMRA KAVAS
Mesaj.js
Window.onload=mesaj();
Function mesaj()
{
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write(“<b>Günaydın</b>");
}
}
SEMRA KAVAS
Karşılaştırma Operatörü
 ==
 !=
>
<
 >=
 <=
SEMRA KAVAS
Mantıksal Operatörler
 &&
 ||
!
SEMRA KAVAS
Soru
 Klavyeden girilen yaş değeri 18’den
büyükse “Giriş izni var” değilse “Giriş izni
yok” şeklinde mesaj veren javascript
kodunu yazınız.
SEMRA KAVAS
Soru
 Klavyeden girilen kullanıcı adı ve şifre
bilgileri doğruysa “Hoşgeldiniz” değilse
“Yanlış kullanıcı adı veya şifre” şeklinde
mesaj veren javascript kodlarını yazınız.
SEMRA KAVAS
Soru
SEMRA KAVAS
<BODY>
<FORM NAME="form1">
<SCRIPT LANGUAGE="Javascript">
function changeMenu(yemek)
{
if (yemek=="kahvalti"){
document. form1.yiyecek.options[1] = new Option('Mısır Gevreği','Mısır');
document. form1.yiyecek.options[2] = new Option('Tost','Tst');
}
else if (yemek=="aksam")
{
document. form1.yiyecek.options[1] = new Option('Tavuk','Tv');
document. form1.yiyecek.options[2] = new Option('Balık','Bk');
}
}
</SCRIPT>
<SELECT NAME="yemek"
onchange=changeMenu(this.options[this.selectedIndex].value)>
<OPTION VALUE="">Menü
<OPTION VALUE="kahvalti">Kahvaltı
<OPTION VALUE="aksam">Akşam
</SELECT>
<SELECT NAME="yiyecek">
<OPTION VALUE="">Yemek Seçin
<OPTION VALUE="Mısır">Mısır Gevreği SEMRA KAVAS
<OPTION VALUE="Tst">Tost İto Vakfı Süleyman Taştekin Meslek Lisesi
</SELECT>
</FORM></BODY
Switch Case
 Switch-case; bir değişkenin aldığı bir çok değere göre farklı komutların çalıştırılması gereken
durumlar için kullanılır. Genel yapısı şu şekildedir:
 switch(değişken)
{
case durum1: komutlar; break;
......
default: komutlar; break;
}
 Burada değişkenin değerine göre durumların karşısındaki komutlar

çalışır.
 Eğer değişkenin değeri hiçbir duruma uymuyorsa default kısmındaki

komutlar çalışır.
SEMRA KAVAS
İto Vakfı Süleyman Taştekin
Meslek Lisesi
Örnek
SEMRA KAVAS
Meslek Lisesi
Soru
 Klavyeden inputbox’a girilen not
bilgisine göre ekrana mesaj yazan
javascript kodunu yazınız.
SEMRA KAVAS
Meslek Lisesi
Soru
 Kullanıcıya hangi gün içerisinde

olduğumuzu söyleyen javascript
Aşağıdaki değişkenlerden yararlanınız.

var d = new Date();
var time = d.getDay();
SEMRA KAVAS
Meslek Lisesi
 <html>
<body>
var g=new Date();
Gun=g.getDay();
switch (Gun)
{
case 1:
 document.write("<h3>Bugün Pazartesi</h3>");
break;
case 2:
document.write("<h3>Bugün Salı</h3>");
break;
case 3:
document.write("<h3>Bugün Çarşamba</h3>");
break;
case 4:
document.write("<h3>Bugün Perşembe</h3>");
break;
case 5:
document.write("<h3>Bugün Cuma</h3>");
break;
case 6:
document.write("<h3>Bugün Cumartesi</h3>");
break;
case 7:
document.write("<h3>Bugün Pazar</h3>");
break;
}
</script> SEMRA KAVAS
<p>Bu javascript örneği İto
hangi
Vakfıgünde olduğumuzu
Süleyman Taştekin söyler...</p>
</body> Meslek Lisesi
</html>
Soru -
SEMRA KAVAS
Meslek Lisesi
SEMRA KAVAS
Meslek Lisesi
<!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=utf-8" />
<TITLE>Switch/Case Statement - Uygulama </TITLE>
<script type="text/javascript" src="switch.js"></script>
</HEAD>
<BODY>
<h2>Switch/Case Statement</h2>
Radio button kullanarak sinav yapmak.
<hr />
<h1>ilçeler</h1><p />
<form name="cicekler">
<B>1. Hangisi Kırmızı bir çiçektir?</B>
<p>
<input type=radio name=soru1 value="a"
onClick="sonuc(this.value)">PAPATYA<br />
<input type=radio name= soru1 value="b"
onClick=" sonuc(this.value)">GÜL<br />
<input type=radio name= soru1 value="c"
onClick=" sonuc(this.value)">ZAMBAK<br />
<input type=radio name= soru1 value="d"
onClick=" sonuc(this.value)">HANIMELİ<p />
<!-Soruları artırabilirsiniz.
//
</form> SEMRA KAVAS
<hr /> İto Vakfı Süleyman Taştekin
</html> Meslek Lisesi
Cevap – switch.js
function sonuc(yanit) {
switch (yanit) {
case 'b':
alert("Dogru");
break;
default:
alert("Yanlış");
}
}
SEMRA KAVAS
Meslek Lisesi
Döngüler
SEMRA KAVAS
Meslek Lisesi
FOR Döngüsü
For döngüsünde koşul sağlaması bozuluncaya
kadar döngü sürdürülür. Döngünün
yineleneceği sayı bir sayaca bağlıdır
for (başlangıç değeri; koşul; artırım)

{
deyimler;
}
SEMRA KAVAS
Meslek Lisesi
For Döngüsü
 for (i=0; i<10; i++)

{
deyimler;
}
SEMRA KAVAS
Meslek Lisesi
Örnek -1
SEMRA KAVAS
Meslek Lisesi
Örnek - 2
 <html>
<head>
<title>Döngü Deyimleri</title>
</head>
<body>
<script language="JavaScript">
var i
for (i = 50; i <= 250; i += 25)
{
document.write("Sayı = " + i + "<br>")
}
</script>
</body>
</html>
SEMRA KAVAS
Meslek Lisesi
Örnek -3
 <html>
<head>
<title>Döngü Deyimleri</title>
</head>
<body>
<script language="JavaScript">
var i
for (i = 500; i >= 10; i -= 50)
{
document.write("Sayı = " + i + "<br>")
}
</script>
</body>
</html>
SEMRA KAVAS
Meslek Lisesi
Örnek -4
<html>
<body>
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">This is heading " + i);
document.write("</h" + i + ">");
}
</script>
</body>
</html>
SEMRA KAVAS
Meslek Lisesi
Çıktısı
SEMRA KAVAS
Meslek Lisesi
Soru – 1’den 10’a kadarki sayıların karesini
alt alta yazdırmamızı sağlayan script
 <html>
<body>
var i=0;
for (i=1;i<=10;i++)
{
document.write(“Sayı = " + i*i);
document.write("<br />");
}
</script>
</body>
</html>
SEMRA KAVAS
Meslek Lisesi
Window.onload=basla;
SEMRA KAVAS
Meslek Lisesi

Ders1 Konu

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ders1 Konu

Uploaded by

Copyright:

Available Formats

Java Script

 JavaScript'te değişken kullanmak için ilk olarak, değişken

 Hemen değişkeni belirtirken yada daha sonra script içerisinde

Bu örneklerde değişkenimiz "gezegen", değeri "mars" tır.

// burada var komutu okul,sınıf ve no

 JavaScrip'te değişken kullanılmadan önce "var"

 JavaScrip'te değişkene atanan değer string ise "

 Küsuratlı sayısal değerler "." (nokta) ile gösterilir. 3.5 (

 JavaScrip'te değişken algılanırken büyük küçük harf

 Aralarında boşluk bırakmak istersek?

 Fakat kodlarımızın her zaman bu şekilde çalışmasını istemeyebiliriz.

 Javascript kodlarımızın her hangi bir olay gerçekleştiğinde çalısmasını

 Bu durumlarda script kodlarımızı bir fonksiyon içerisinde yazmamız

<input type="submit" name="button"

 Klavyeden girilen 2 sayı üzerinde toplama,

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

 “Tamam” ya da “İptal” tuşlarına

 Kullanıcıdanbir değer almak için

 Burada değişkenin değerine göre durumların karşısındaki komutlar

 Eğer değişkenin değeri hiçbir duruma uymuyorsa default kısmındaki

 Kullanıcıya hangi gün içerisinde

Aşağıdaki değişkenlerden yararlanınız.

for (başlangıç değeri; koşul; artırım)

 for (i=0; i<10; i++)

You might also like