MIT505 İnternet ve Web Programlama: Dinamik web sayfaları, javascript

... konulu sunumlar: "MIT505 İnternet ve Web Programlama: Dinamik web sayfaları, javascript"— 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...

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

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

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

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

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”

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

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<c)” – bu demek: “(a’ya b atamak, 0’dan farklı değerdeyse, doğru) ve (a c’den daha küçükse doğru)”

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

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;

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ı

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

14 Javascript tanıtım Javascript, web sayfası içinde direkt olarak <script></script> etiketleri arasında yazılır, yada dışdaki bir dosyadan <link rel=“javascript” type=“text/javascript” href=“jscript.js”/> kumanda kullanarak bağlanabilir

15 Javascript tanıtım Örnek: <script> a=1; b=2; c=1; D=b^2-4*a*c; x1=(-b+sqrt(D))/(2a); x2=(-b-sqrt(D))/(2a); </script> İkinci derecede denklem çözümü (ax^2+bx+c=0)

16 Javascript tanıtım Bu şekilde, javascript tarayıcı tarafından HTML koduyla birlikte sırayla çalıştırılır <html> HTML kodu <script> program-1 </script> HTML kodu <script> program-2 </script> HTML kodu </html> Demek ki “program-1” önce ve “program-2” sonra okunacak

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

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

19 Javascript tanıtım Örnek
HTML koduyla ayarlanacak resim: <img id=“my_img” src=“me.jpg” class=“big-img”> Bu resminin javascript nesnesini almak için, bu kodu kullanılabilir myimg=document.getElementById(“my_img”);

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”;

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”

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 <img id=“my_img” src=“me.jpg” onclick=“my_img_function();”> <a href=“me.html” onclick=“show_warning();”> <div id=“p1” onload=“this.innerHTML=‘Welcome!!’;”> <div id=“p2” onmouseover=“show_hide(‘p1’);”>

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

24 Pratik çalışma Çalışmanız:
7. ders