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

MIT505İ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, 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/MIT504.html

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/MIT504.html

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/MIT504.html

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/MIT504.html

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ştirilebilira=2;b=5;c=a+b; // c=7 yani http://www.scinetcentral.com/~mishchenko/MIT504.html

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;vea=a--;  a=a-1; • += (önce ekleme sonra atama), -=, *=, /=, %=a+=b;  a=a+b; vea/=b;  a=a/b;vb • Metindeki“+”, metinleri birbiri ardına ekler demektir“ekle” + “mek”  “eklemek” http://www.scinetcentral.com/~mishchenko/MIT504.html

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/MIT504.html

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/MIT504.html

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/MIT504.html

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/MIT504.html

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/MIT504.html

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/MIT504.html

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/MIT504.html

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) http://www.scinetcentral.com/~mishchenko/MIT504.html

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/MIT504.html

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

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

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ılabilirmyimg=document.getElementById(“my_img”); http://www.scinetcentral.com/~mishchenko/MIT504.html

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 saklanmakmyimg.style.display=“none”;myimg.style.display=“block”; • elemanın pozisyonu değiştirmekmyimg.style.top=“100px”; • Elemandaki metinin rengi değiştirmekmyimg.style.color=“red”; http://www.scinetcentral.com/~mishchenko/MIT504.html

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” http://www.scinetcentral.com/~mishchenko/MIT504.html

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();”> <ahref=“me.html” onclick=“show_warning();”> <divid=“p1” onload=“this.innerHTML=‘Welcome!!’;”> <divid=“p2” onmouseover=“show_hide(‘p1’);”> http://www.scinetcentral.com/~mishchenko/MIT504.html

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

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

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