Web Tasarımı ve Programlama
Tanım ve Genel Bilgi Betik Dili; Web sayfalarında dinamik içerik sağlamak ve kullanıcıyla iletişim kurmak için kullanılan, istemci tarafında çalışan bir dildir. HTML etiketleri arasında tanımlanarak kullanılabilir. JavaScript dili, C dilinin web sayfalarına uyarlanmış basit sürümü olarak düşünülebilir. JavaScript dili isim benzerliğine rağmen Java ile birbirinden bağımsız ve farklı dillerdir. Java gerçek bir programlama dilidir. JavaScript ise bir script dilidir. 2
HTML de JavaScript Kodlarını Tanıtma Javacript komutlarını HTML içinde tanıtmak için; <script>.. </script> etiketleri kullanılır. Script blokları arasında yazılacak kodların türünü JavaScript kodlarının sürümü Tüm tarayıcılarda sorunsuz çalışması için JavaScript seçmek doğru olacaktır. 3
Kodların HTML deki Konumu 1. Yol Script kodları head etiketleri arasına yazılarak kullanılabilir. 4
Kodların HTML deki Konumu 2. Yol Script kodları body etiketleri arasına yazılarak kullanılabilir. 5
Kodların HTML deki Konumu 3. Yol js uzantılı olarak kaydedilen harici bir JavaScript dosyası sayfaya dahil edip kodları çalıştırılır.!!! Uygulamalarımızda; script kodlama yerine harici scriptlerin sayfa içine eklenmesine ağırlık vereceğiz!!! 6
Yazım Kuralları HTML etiketleri gibi boşlukları önemsemez. sayi=10 sayi = 10 BÜYÜK-küçük harf duyarlı bir dildir. ad Ad AD ad JS dilinde değişkenler, fonksiyonlar vb. nesneler; Sayı ile başlayamaz. Kelimeler arasında boşluk kullanılamaz. Boşluk yerine _ işareti kullanılır. 7
Yazım Kuralları JS dili için ayrılmış kelimeler herhangi bir nesneye isim olarak verilemez. 8
Özel İşaret Gösterimi JS kodları içerisinde özel karakter kullanılacaksa; özel karakterin başına \ işareti eklenmelidir. 9
Açıklama Satırları // simgesi kullanılarak tek satır halinde açıklama satırı eklenebilir. İfade alt satıra geçtiğinde açıklama satırından çıkılmış olur. /* */ ifadeleri arasına yazılan her şey açıklama olarak alınır. Satır sınırlaması yoktur. 10
Değişkenler Programlama dillerinde belirlediğimiz isimlerle oluşmuş ve hafızada yer kaplayan alanlara değişken denir. var degisken_adi Değişken isimlendirirken Türkçe karakter kullanılmaması önerilmektedir. veri türü number boolean string içeriği Sayı (Tüm sayılar için kullanılabilir) Mantıksal Değer (True / False değerlerini tutar) Karakter, metin, metin grupları (içeriği arasında yazılır)!!! Değişken tanımlamalarında veri türü otomatik olarak algılanır!!! 11
Değişkenler Metinsel Değişken ifade isimlendirirken atamalarında; tek Türkçe tırnak karakter ( ) da, çift kullanılmaması tırnak ( ) da önerilmektedir. kullanılabilir. Number türü, otomatik olarak stringe dönüştürülür 12
İşlem Operatörleri (+) 13
İşlem Operatörleri (- l * l /) 14
İşlem Operatörleri (% l ++ l --) 15
Atama Operatörleri (= l +=) += (Ekle Ata) 16
Karşılaştırma Operatörleri (< l > l <= l >=) 17
Karşılaştırma Operatörleri (== l!=) Karşılaştırmalarda eşittir yerine == operatörü kullanılır. Karşılaştırmalarda eşittir yerine!= operatörü kullanılır. 18
Mantıksal Operatörler (&& l ) Karşılaştırmalarda ve yerine && operatörü kullanılır. Karşılaştırmalarda veya yerine operatörü kullanılır. 19
Mantıksal Operatörler (!) Karşılaştırmalarda değil yerine! operatörü kullanılır. 20
İşlem Önceliği Operatör Türü Öncelik Virgül, Atama = += -= /= %= < <= > >= &= ^= = Koşul?: Mantıksal VEYA Mantıksal VE && Bit Düzeyinde VEYA Bit Düzeyinde ÖZEL VEYA ^ Bit Düzeyinde VE & Eşitlik ==!= ===!== İlişki < <= > >= in instanceof Bit Düzeyinde Öteleme << >> >>> Arttırma / Azaltma + - Çarpma / Bölme / Mod * / % Etkisiz Duruma Getirme / Arttırma!~ -+ ++ -- typeof, void, delete Çağırma / Örnek Oluşturma () new Üyelik.[] Düşük Yüksek 21
Akış Denetimi (if-else) Birden fazla şartın olduğu durumlarda; şart sayısı kadar if ifadesi yazılmalıdır. 22
Akış Denetimi (if-else) Kullanıcı Tarafından Girilen İki Sayının Karşılaştırılması Kullanıcıdan bilgi alma Alınan sayıların karşılaştırılması 23
Akış Denetimi (if-else) UYGULAMA Editör programını açıp yeni bir HTML sayfası oluşturunuz. Zaman isminde bir Date nesnesi oluşturunuz. Saat isminde bir değişken oluşturup bilgisayarın sistem saatinden gelen saat bilgisini saat isimli değişkene aktarınız. Şart tablosuna göre script kodlarını yazınız. Saat Aralığı Mesaj 06-11 Günaydın 11-19 İyi Öğlenler 19-23 İyi Akşamlar 23-06 İyi Geceler!!! Şartların birden fazla olduğu durumlarda; ve-veya operatörleri ile istediğiniz kontrolleri yaptırabilirsiniz.!!! 24
Akış Denetimi (switch) case ifadesi içerisinde kodlar yazılıp bir diğer case ifadesine geçiş yapılırke mutlaka break komutu kullanılmalıdır. 25
Akış Denetimi (switch) Kullanıcı Tarafından Girilen Renk Değerine Göre Metin Renklendirme 26
Döngü Deyimleri (for) Koşul doğru olduğu (sağlandığı) sürece döngü çalışır. 1 den 10 a Kadar Olan Sayıları Ekrana Yazdırma 27
Döngü Deyimleri (for) UYGULAMA Kullanıcı tarafından girilen metni, kullanıcı tarafından belirlenen tekrar sayısı kadar ekrana yazdıran JS Kodu Editör programını açıp yeni bir HTML sayfası oluşturunuz. Kullanıcının girmesi istenilen sayının sayi adlı değişkenine atayınız. Kullanıcının girmesi istenilen metin ifadesini txt adlı değişkenine atayınız. Döngü değişkeni olarak tanımlaman dd ifadesinin 1 den başlayarak girilen sayı kadar çalışmasını sağlayacak kodları yazınız. 28
Döngü Deyimleri (while) Tekrar sayısının bilinmediği durumlar için tercih edilir. Klavyeden 0 Girilene Kadar Girilen Sayıları Toplama 29
Döngü Deyimleri (do while) Şart kontrolü; komutlar çalıştırıldıktan sonra yapılır. 30
Diziler Dizi tanımlama Dizi elemanları 0. değerden başlar Dizi tanımlanırken; dizi değerleri de aynı satırda girilebilir. 31
Dizi İşlemleri / push() Dizinin sonuna yeni bir dizi elemanı eklemek için kullanılır. 32
Dizi İşlemleri / pop() Dizinin sonundaki elemanı kaldırmak için kullanılır. 33
Dizi İşlemleri / unshift() Dizinin başına eleman / elemanlar eklemek için kullanılır. 34
Dizi İşlemleri / shift() Dizinin başına elemanı kaldırmak için kullanılır. 35
Dizi İşlemleri / delete Dizinin içinden eleman silmek için kullanılır. Eleman silinse de yeri, dizi içinde kalır. Dizinin 1. elamanı (2 değeri) silinmiştir. Fakat dizi, yine 4 elemanlı olarak kalmıştır. 36
Dizi İşlemleri / splice() Dizinin içinde istenen bölüme eleman eklemek veya o bölümden eleman silmek için kullanılır. Eleman silme Eleman ekleme 37
Dizi İşlemleri / IndexOf Aranan elemanın dizi içindeki indis değerini verir. Ekran çıktısı 4 olacaktır.!!! Aranan eleman dizi içinde yoksa -1 değeri döndürülecektir.!!! 38
Dizi İşlemleri / Reverse() Dizi elemanlarının ters çevrilmesini sağlar. 39
Dizi İşlemleri / Sort() Dizi elemanlarını sıralamak için (a-z, 0-9) kullanılır. 40
Fonksiyonlar Tekrar eden kod bloklarının paketlenmesini sağlar. Uygulama içinde paket ismi kullanılarak istenilen yerde bu kodlar çalıştırılabilir. Böylelikle fonksiyon içinde yapılacak değişiklikler ve hata kontrolleri otomatik olarak, ilgili sayfalara da yansıyacaktır. 41
Fonksiyonlar Fonksiyon tanımlama Fonksiyonu çalıştırma 42
Hazır Fonksiyonlar / parseint() String ifadenin sayısal kısmını alarak tam sayıya çevirir. 43
Hazır Fonksiyonlar / parsefloat() İstenen ifadenin ondalıklı kısmını da alarak sayıya çevirir. 44
Hazır Fonksiyonlar / String() İstenen ifadeyi string türüne çevirir. 45
Hazır Fonksiyonlar / Number() İstenen ifadeyi sayı türüne çevirir. 46
Olaylar Farenin herhangi bir yere tıklaması, klavyeden bir şeyler yazılması, sayfanın yüklenmesi vb. eylemler olaylarla kontrol edilebilir. Olayların gerçekleşmesi ile; yazılmış fonksiyonlar tetiklenir. HTML etiketlerinin neredeyse tamamına uygulanabilir. Olay Olay gerçekleştiğinde devreye girecek script kodları / fonksiyon 47
Olaylar / onclick HTML etiketlerinin üstüne tek tıklandığında gerçekleşen olaylara onclick olayları denir. Form nesnesine tıklandığında uyari fonksiyonu çalışacaktır. Linke tıklandığında istenen mesaj ekranda görüntülenecektir. 48
Olaylar / ondblclick HTML etiketlerinin üstüne çift tıklandığında gerçekleşen olaylara ondblclick olayları denir. Linke çift tıklandığında istenen mesaj ekranda görüntülenecektir. 49
Olaylar / onload Sayfada herhangi bir nesnenin tamamıyla yüklenme olayını temsil eder. Body, img, frame ve frameset etiketlerinde kullanılabilir. Sayfa yüklendiğinde istenen mesaj ekranda görüntülenecektir. 50
Olaylar / onunload Sayfada herhangi bir nesnenin kaldırılması veya kapatılması olayını temsil eder. Sayfa kapatıldığında, istenen mesaj ekranda görüntülenecektir. 51
Olaylar / onfocus Sayfadaki bir HTML elemanının seçilmesi veya o nesneye odaklanılması olayını temsil eder. Metin kutusu seçildiğinde uyari fonksiyonu çalışacaktır. 52
Olaylar / onblur Sayfada seçilen bir HTML elemanının seçimden çıkartılması olayını temsil eder. 53
Olaylar / onmouseover Farenin, sayfadaki bir HTML elemanının üzerine getirilmesi olayını temsil eder. Fare, foto.jpg dosyasının üzerine getirildiğinde; istenen mesaj ekranda görüntülenecektir. 54
Olaylar / onmouseout-move-down-up Olay onmouseout onmousemove onmousedown onmouseup Özelliği Farenin nesne üzerinden ayrılması Farenin nesne üzerinden gezdirilmesi Farenin nesne üzerinde tıklanması Farenin basılı olan tuşunun bırakılması Click olayının devreye girmesi için farenin tıklandıktan sonra bırakılması gerekirken, Down olayında tıklanması yeterlidir. 55
Olaylar / onkeydown Klavyeden tuşa basma olayının temsil eder. Metin kutusu nesnesinde klavyeden tuşa basıldığında olay dinleyicisi çalışır. Klavyeden basılan tuşun ASCII kodu (keycode) bulunup String.fromCharCode ile tuş adına dönüştürülerek ekranda görüntülenir. 56
Olaylar / onselect Metin kutusu içindeki yazı seçildiğinde meydana gelen olayı temsil eder. Metin kutusu içindeki yazı seçildiğinde ekranda alert ifadesi içine yazılan mesaj görüntülenecektir. 57
Olaylar / onresize Tarayıcı penceresinin boyutunun değişmesini temsil eden olaydır. Body etiketine yazılır. 58
Nesneler / Window Nesnesi Tarayıcı ile ilgili özellik ve metodun bulunduğu tarayıcı nesnesidir. DefaultStatus Özelliği Tarayıcının alt kısmındaki durum çubuğunda gösterilecek mesajdır. 59
Nesneler / Window Nesnesi Alert Metodu Kullanıcıyı bilgilendirmek için uyarı pencereleri oluşturur. Confirm Metodu Yapılan işlem sonucu onay kutusu oluşturur. Onay kutusunun sonucu bir boolean olarak geri döner. True ya da false şeklinde alınan cevap ile programın akışı belirlenir. 60
Nesneler / Window Nesnesi Confirm Metodu 61
Nesneler / Window Nesnesi Close Metodu Aktif olan sayfayı kapatır. Prompt Metodu Kullanıcıdan bilgi almak için kullanılır. 62
Nesneler / Window Nesnesi Open Metodu Yeni bir pencere açar. 3 adet parametre değeri alabilir: URL: Açılacak sayfanın adresi yazılır. NAME: Açılacak sayfanın target özelliği tanımlanır. ÖZELLİK: Açılacak sayfanın özelliklerini belirlediğimiz bölümdür. Buradaki parametreler ile sayfanın tam ekran açılması, boyutunun değiştirilip değiştirilemeyeceği, adres çubuğunun gösterilip gösterilmeyeceği gibi birçok özellik değiştirilebilir. 63
Nesneler / Window Nesnesi Print Metodu Yazdırma penceresini açar. Find Metodu Kullanıcıdan bilgi almak için kullanılır. moveto Metodu Sayfanın ekran üzerinde istenilen koordinata taşınmasını sağlar. 64
n a v i g a t o r. BETİK DİLİ / JAVASCRIPT Nesneler / Navigator Nesnesi Tarayıcı hakkında kullanıcıya bilgi veren nesnedir. Nesne Özelliği / Metodu appname İşlevi Sayfanın açıldığı tarayıcı ismini verir. appcode appversion BrowserLanguage javaenabled Metodu Tarayıcının kod adını verir. Tarayıcının versiyonunu verir. Tarayıcının dilini verir. Java ayarının açık olup olmadığını kontrol eder 65
d o c u m e n t. BETİK DİLİ / JAVASCRIPT Nesneler / Document Nesnesi Sayfa içindeki elemanların özelliklerini düzenlemeye yarayan nesnedir. Nesne Özelliği / Metodu getelementbyid getelementbyname write() İşlevi id özelliği verilmiş herhangi bir elemanın özelliklerine ulaşmak için kullanılır. name özelliği verilmiş herhangi bir elemanın özelliklerine ulaşmak için kullanılır. Sayfaya metinleri ve HTML içeriklerini yazdırmak için kullanılır. 66
f o r m BETİK DİLİ / JAVASCRIPT Nesneler / Form Nesnesi Form elemanının özelliklerini düzenlemeye yarayan nesnedir. Nesne Özelliği / Metodu action method İşlevi Hazırladığımız form ile kullanıcıdan alınan bilgilerinin gönderileceği ve işleneceği adres için kullanılır. Form içine girilen bilgilerin, ilgili sayfaya nasıl gönderileceğini belirlemek için kullanılır. GET Gönderilen bilgiler adres satırında açık şekilde gösterilir. POST Gönderilen bilgiler gizli şekilde gösterilir. 67
d a t e. BETİK DİLİ / JAVASCRIPT Nesneler / Date Nesnesi Tarih ve saat işlemleri için kullanılan nesnedir. Nesne Özelliği / Metodu İşlevi getdate() Metodu Sistem saatine göre ayın kaçıncı günü (1-31) getday() Metodu Sistem saatine göre haftanın kaçıncı günü (0-6) getmonth() Metodu getfullyear() Metodu gethours() Metodu getminutes() Metodu 0-11 arası ay bilgisini verir. Sistem saatine göre yıl bilgisini verir. 0-23 arası saat bilgisini verir. 0-59 arası dakika bilgisini verir. 68
m a t h. BETİK DİLİ / JAVASCRIPT Nesneler / Math Nesnesi Matematiksel işlemler için kullanılan nesnedir. Nesne Özelliği / Metodu Random() Metodu İşlevi 0-1 arası rastegele sayı üretir. Round() Metodu Pow(x,y) Metodu Sqrt() Metodu Sayıyı yuvarlamak için kullanılır. x sayısının y üssünü hesaplar. Sayının karekökünü bulur. 69
Nesneler / Math Nesnesi Örnek Uygulamalar 70
BETİK DİLİ / ÖRNEK UYGULAMALAR Metin / Karakter Sayısı Kontrolü metin_kontrol.js (Harici JS dosyası) Web ortamından hazır alınmıştır. 71
BETİK DİLİ / ÖRNEK UYGULAMALAR Metin / Karakter Sayısı Kontrolü js_ornek1.html Scriptin devreye girmesi için olay/tetikleyici durum tanımlanmalıdır. 72
BETİK DİLİ / ÖRNEK UYGULAMALAR E-Posta Adresi Doğrulama email_adres_kontrol.js (Harici JS dosyası) Web ortamından hazır alınmıştır. 73
BETİK DİLİ / ÖRNEK UYGULAMALAR E-Posta Adresi Doğrulama js_ornek2.html 74
BETİK DİLİ / ÖRNEK UYGULAMALAR Sayfa Arkaplan Rengini Değiştirme arkaplan_degistir.js (Harici JS dosyası) Web ortamından hazır alınmıştır. js_ornek3.html 75
BETİK DİLİ / ÖRNEK UYGULAMALAR Pop-Up Pencere js_ornek4.html 76
BETİK DİLİ / ÖRNEK UYGULAMALAR Çoktan Seçmeli Soru Formu test_sinavi.js (Harici JS dosyası) HTML sayfası içinde sunulan seçeneklerden 3.sü doğru cevap olarak tanımlanmalıdır. JS kodu içindeki tanımlama, buna göre yapılmıştır. 77
BETİK DİLİ / ÖRNEK UYGULAMALAR Çoktan Seçmeli Soru Formu js_ornek5.html 78
BETİK DİLİ / ÖRNEK UYGULAMALAR Para Birimi Dönüştürücü para_cevir.js (Harici JS dosyası) 79
BETİK DİLİ / ÖRNEK UYGULAMALAR Para Birimi Dönüştürücü js_ornek6.html 80
BETİK DİLİ / ÖRNEK UYGULAMALAR Sözleşme Onay Kontrolü sozlesme_onay.js (Harici JS dosyası) 81
BETİK DİLİ / ÖRNEK UYGULAMALAR Sözleşme Onay Kontrolü js_ornek7.html 82
BETİK DİLİ / ÖRNEK UYGULAMALAR Not Hesaplayıcı ort_hesaplayici.js (Harici JS dosyası) 83
BETİK DİLİ / ÖRNEK UYGULAMALAR Not Hesaplayıcı js_ornek8.html 84
Şimdilik bu kadar web tasarımı ve programlamayla ilgili bir sonraki yayın ASP. NET 85
İ L E T İ Ş İ M hakanbabac.net iletisim@hakanbabac.net 86