Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

MIT505 İnternet ve Web Programlama: Dinamik web sayfaları, javascript Yrd. Doç. Dr. Yuriy Mishchenko.

Benzer bir sunumlar


... konulu sunumlar: "MIT505 İnternet ve Web Programlama: Dinamik web sayfaları, javascript Yrd. Doç. Dr. Yuriy Mishchenko."— Sunum transkripti:

1 MIT505 İnternet ve Web Programlama: Dinamik web sayfaları, javascript Yrd. Doç. Dr. Yuriy Mishchenko

2 Dinamik web sayfaları HTML ve CSS kullanarak gelişmiş web sayfaları geliştirilebilir – Web sayfa elemanların pozisyonları, şekilleri, renkleri, renkleri, biçimlendirme, vb – Alt-sınıflar kullanarak (a:hover, a:visited, vb) bazen dinamik davranma eklenebilir ama az – Kullanıcı ile etkileşime ihtiyaç varsa, kullanıcıdan her hangi giriş için server’e veri gönderip ondan güncelleştirilmiş web sayfası almak gerekiyor – Bazen bu çok uygun değil... 2http://www.scinetcentral.com/~mishchenko/MIT504.html

3 Javascript tanıtım Tarayıcı tarafında daha eğik dinamik davranma sağlayabilmek için ve kullanıcıyla daha eğik şekilde etkileşim oluşturabilmek için “javascript” kullanılır 3http://www.scinetcentral.com/~mishchenko/MIT504.html

4 Javascript tanıtım Javascript – gerçek programlama dilidir (HTML gibi sadece web sayfa düzenleme dili değil yani) Javascript kullanarak, web tarayıcı tarafında hem veri işleme, hem hesaplama, hem de kullanıcıyla etkileşim, hepsi serverle hiç konuşmadan yapılabilir Javascript, web tarayıcı tarafından çalıştırılır, ve kullanıcı bilgisayarda çalıştırılır 4http://www.scinetcentral.com/~mishchenko/MIT504.html

5 Javascript tanıtım Her hangi programalama dili gibi, javascript baze belli yapılarına sahiptir – Değişken atama ve değiştirme – Koşulu program yürüyme – Döngüler – Fonksiyonlar 5http://www.scinetcentral.com/~mishchenko/MIT504.html

6 Javascript tanıtım Javascript dili, C dilinin yapısına benzer şekilde yazılmıştır, ve birçok yapı C dili ile paylaşıyor Javascript deki değişkenler bu şekilde atanıp değiştirilebilir a=2; b=5; c=a+b; // c=7 yani 6http://www.scinetcentral.com/~mishchenko/MIT504.html

7 Javascript tanıtım Javascript te normal öperatorler var: – +, -, *, /, % (bölme kalanı, yanı 11 % 9 = 2) – ++ (1le arttırma), -- (1le azaltma) a=a++;  a=a+1; ve a=a--;  a=a-1; – += (önce ekleme sonra atama), -=, *=, /=, %= a+=b;  a=a+b; ve a/=b;  a=a/b; vb – Metindeki “+”, metinleri birbiri ardına ekler demektir “ekle” + “mek”  “eklemek” 7http://www.scinetcentral.com/~mishchenko/MIT504.html

8 Javascript tanıtım C diline karşı, javascript te değişkenlerin belli bir tipi yok, ve değişkenlerin tipi önceden belirtilmemeli – herhangi değişken hem tamsayılar, hem gerçek sayılar, hem karakterler veya karakter dizileri içerebilir Değişkenler, “var” kumanda kullanarak önceden tanımlanabilir, ama hala bu tanımlama tip atanmaz 8http://www.scinetcentral.com/~mishchenko/MIT504.html

9 Değişkenlerle çalışma Javascript te şart operatörler – ==, != (eşit değil), >, =, <=, – === - özel operatör - sıkı eşitlik - tip ve değer aynı zamanda eş olmalı; örneğin (karakter dizi) “1”==1 (tamsayı) javascriptte doğrudur, ama “1”===1 doğru artık değil – && (ve), || (veya), ! (değil) – Önemli not: “=“ her zaman değişken atama için kullanılır, bir koşıl içinde yazılmışsa, atama anlamında olacak “(a=b) && (a

10 Javascript tanıtım Yürütme kontrolü olarak, javascript normal kumandalara sahiptir, bunlar “if then”, “switch”, “while” ve “for” Bu kumandalar C dilindeki şekilde yazılıyor 10http://www.scinetcentral.com/~mishchenko/MIT504.html

11 Javascript tanıtım if(a>70) c=“yaşlı adam”; while(a<10) { a=a+1; s=s+a; } for(a=1; a++; a<10) s=s+a; C dilinde gibi, javascript te {-} parentezler kumanda grübü belirtmek için kullanılabilir; 11http://www.scinetcentral.com/~mishchenko/MIT504.html

12 Javascript tanıtım if(a>70) c=“yaşlı adam”; while(a<10) { a=a+1; s=s+a; } for(a=1; a++; a<10) s=s+a; javascriptteki kumandalar genellikle tek bağlı kumanda ile çalışır; aynı yerde birkaç kumanda koymak için {-} parentezler kullanılmalı 12http://www.scinetcentral.com/~mishchenko/MIT504.html

13 Fonksiyonlar Fonksiyonlar javascript te bu şekilde tanımlanır: function f(a,b,c) { fonksiyonun kodu; return sonuç; } Fonksiyonlar, “d=f(a,b,c);” şekilde çalıştırılar 13http://www.scinetcentral.com/~mishchenko/MIT504.html

14 Javascript tanıtım Javascript, web sayfası içinde direkt olarak etiketleri arasında yazılır, yada dışdaki bir dosyadan kumanda kullanarak bağlanabilir 14http://www.scinetcentral.com/~mishchenko/MIT504.html

15 Javascript tanıtım Örnek: a=1; b=2; c=1; D=b^2-4*a*c; x1=(-b+sqrt(D))/(2a); x2=(-b-sqrt(D))/(2a); İkinci derecede denklem çözümü (ax^2+bx+c=0) 15http://www.scinetcentral.com/~mishchenko/MIT504.html

16 Javascript tanıtım Bu şekilde, javascript tarayıcı tarafından HTML koduyla birlikte sırayla çalıştırılır HTML kodu program-1 HTML kodu program-2 HTML kodu Demek ki “program-1” önce ve “program-2” sonra okunacak 16http://www.scinetcentral.com/~mishchenko/MIT504.html

17 Javascript tanıtım Javascript web sayfasının integral bileşendir, ve integral şekilde web sayfasınla etkileşim yapıyor Web sayfasını etkilemek için, web sayfası, web sayfasındaki elemanlar, ve bütün web sayfasında olabilir olaylar javascript içinde nesneler olarak temsil edilir Bu nesnelerle çalışarak, javascript hem web sayfasını etkileyebilir hem de web sayfasındaki olyalardan etkilenebilir 17http://www.scinetcentral.com/~mishchenko/MIT504.html

18 Javascript tanıtım Web sayfasının eleman javascriptte alma – Web sayfasının bütün elemanlar belli bir hierarşi içinde düzenlenmiştir – buna Document Object Model yada DOM denir – bütün web sayfasının elemanları bu hierarşiden alınabilir, ama bu tanıtım konusu değil – Normalde, bir web sayfasının elemanı ele almak için bu elemanın “id” isim-parametresi ve javascript’tin özel document.getElemanById fonksiyon kullanılır 18http://www.scinetcentral.com/~mishchenko/MIT504.html

19 Javascript tanıtım Örnek – HTML koduyla ayarlanacak resim: – Bu resminin javascript nesnesini almak için, bu kodu kullanılabilir myimg=document.getElementById(“my_img”); 19http://www.scinetcentral.com/~mishchenko/MIT504.html

20 Javascript tanıtım Web sayfasındaki elemanlar, onların javascript nesnesini kullanarak ayarlanabilir Bu genellikle elemanın stili değiştirilmesi anlamına gelir – elemanın gösterip saklanmak myimg.style.display=“none”; myimg.style.display=“block”; – elemanın pozisyonu değiştirmek myimg.style.top=“100px”; – Elemandaki metinin rengi değiştirmek myimg.style.color=“red”; 20http://www.scinetcentral.com/~mishchenko/MIT504.html

21 Javascript tanıtım Javascript kendi kendine web sayfasında çalışabilir, ama normalde belli eylemler kullanıcı etkileşimine cevaben yapılmalı Belli javascript belli durumda çalıştırmak için web sayfası olayları kullanılır Olaylar, bir web sayfasının elemanı ile ilişkili bir durum demektir – Tipik olaylar – “onclick”, “onmouseover”, “onmouseout”, “onload”, “onunload” 21http://www.scinetcentral.com/~mishchenko/MIT504.html

22 Javascript tanıtım Farklı HTML elemanları farklı olaylara desteliyor Belli bir durumda belli javascript fonksiyonu çalıştırmak için, bu eleman içinde istenmiş olay için işlemci fonksiyonu atamak lazım 22http://www.scinetcentral.com/~mishchenko/MIT504.html

23 23 HTML DOM OLAYLAR JAVASCRIPT my div function do() { … obj.style.display=“hidden”; … } obj=document.getElementById(“d1”);

24 Pratik çalışma Çalışmanız:  7. ders 24http://www.scinetcentral.com/~mishchenko/MIT504.html


"MIT505 İnternet ve Web Programlama: Dinamik web sayfaları, javascript Yrd. Doç. Dr. Yuriy Mishchenko." indir ppt

Benzer bir sunumlar


Google Reklamları