MIT 505 nternet ve Web Programlama Dinamik web

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

Dinamik web sayfaları • HTML ve CSS kullanarak gelişmiş web sayfaları geliştirilebilir – Web sayfa elemanların pozisyonları, şekilleri, 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. . . http: //www. scinetcentral. com/~mishchenko/MIT 504. html 2

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 http: //www. scinetcentral. com/~mishchenko/MIT 504. html 3

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 http: //www. scinetcentral. com/~mishchenko/MIT 504. html 4

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 http: //www. scinetcentral. com/~mishchenko/MIT 504. html 5

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 http: //www. scinetcentral. com/~mishchenko/MIT 504. html 6

Javascript tanıtım • Javascript te normal öperatorler var: – +, -, *, /, % (bölme kalanı, yanı 11 % 9 = 2) – ++ (1 le arttırma), -- (1 le 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” http: //www. scinetcentral. com/~mishchenko/MIT 504. html 7

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 http: //www. scinetcentral. com/~mishchenko/MIT 504. html 8

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)” http: //www. scinetcentral. com/~mishchenko/MIT 504. html 9

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 http: //www. scinetcentral. com/~mishchenko/MIT 504. html 10

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; http: //www. scinetcentral. com/~mishchenko/MIT 504. 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; • javascriptteki kumandalar genellikle tek bağlı kumanda ile çalışır; aynı yerde birkaç kumanda koymak için {-} parentezler kullanılmalı http: //www. scinetcentral. com/~mishchenko/MIT 504. html 12

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 http: //www. scinetcentral. com/~mishchenko/MIT 504. html 13

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 http: //www. scinetcentral. com/~mishchenko/MIT 504. html 14

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

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 http: //www. scinetcentral. com/~mishchenko/MIT 504. html 16

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ı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 http: //www. scinetcentral. com/~mishchenko/MIT 504. html 17

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. get. Eleman. By. Id fonksiyon kullanılır http: //www. scinetcentral. com/~mishchenko/MIT 504. html 18

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. get. Element. By. Id(“my_img”); http: //www. scinetcentral. com/~mishchenko/MIT 504. html 19

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=“ 100 px”; – Elemandaki metinin rengi değiştirmek myimg. style. color=“red”; http: //www. scinetcentral. com/~mishchenko/MIT 504. html 20

Javascript tanıtım • Javascript 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” http: //www. scinetcentral. com/~mishchenko/MIT 504. html 21

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=“p 1” onload=“this. inner. HTML=‘Welcome!!’; ”> <div id=“p 2” onmouseover=“show_hide(‘p 1’); ”> http: //www. scinetcentral. com/~mishchenko/MIT 504. html 22

obj=document. get. Element. By. Id(“d 1”); DOM function do() { … obj. style. display=“hidden”; … } JAVASCRIPT HTML <div id=“d 1” onload=“do(this); ”> OLAYLAR <div id=“d 1”>my div</div> http: //www. scinetcentral. com/~mishchenk o/MIT 504. html 23

Pratik çalışma • Çalışmanız: Ø 7. ders http: //scinetcentral. com/~mishchenko/MIT 504. html http: //www. scinetcentral. com/~mishchenko/MIT 504. html 24