DYNAMİC HTML EVENT MODELS SİNEM YARDIMCI ÇAKIL SU KIRLI
Dynamic HTML (Dinamik HTML); Javascript'in olay modelinin temelleri üstüne inşa edilen CSS/Html teknolojilerinin yapısı için kullanılan kısaltmadır. Tam adıyla Dynamic HyperText Markup Language yani Dinamik Zengin Metin Dil Biçimi Dinamik web sitesinde, farklı içerikler siteniz için oluşturulmuş olan bir veritabanında saklanır ve sayfa çağrıldığında o sayfaya ait bilgiler veritabanından çağırılarak HTML kodları içinde ekrana yazdırılır.
14.6 Rollovers with onmouseover and onmouseout
DHTML Event Model - onclick
1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 " DHTML Event Model - onclick <script type = "text/javascript" for = "para" 16 event = "onclick"> 17 <!-- 18 alert( "Hi there" ); 19 // --> Click on this text! <input type = "button" value = "Click Me!" 30 onclick = "alert( 'Hi again' )" /> eğer “id” si “para” olan element “onclick” lerse sohbet kutusu açılacaktır. JavaScript kullanıcısının olaylara cevap vermesini sağlamak Kullanıcı fareyi tıklarsa onclick olayı çalışır. P elemanının “id” si “para” olarak tanımlanır. ‘Click me’ butonuna basıldığı zaman ‘hi again’ uyarı kutusu açar
event model
DHTML Event Model - onload
1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " DHTML Event Model - onload <!-- 13 var seconds = 0; function startTimer() { 16 // 1000 milliseconds = 1 second 17 window.setInterval( "updateTime()", 1000 ); 18 } function updateTime() { 21 seconds++; 22 soFar.innerText = seconds; 23 } 24 // --> Seconds you have spent viewing this page so far: startTimer fonksiyonu her 1000 milisaniyede updateTime fonksiyonunu çağırır. window.setInterval=belirtilen bir fonksiyonun yada kodun belli zaman aralıklarıyla tekrar tekrar çalıştırılmasını sağlar updateTime fonksiyonu, 1000 mili saniyede bir çalıştırılacak soFar’ın innerText değerine geçen saniyeyi atıyor y ü kleme işlemi bitince onload olayı çalışır
Sayfa her saniyeyi yüklediği için geçen her saniyenin numarası dinamik bir şekilde updata eder. onload
DHTML Event Model - onload
1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 " DHTML Event Model - onmousemove event <!-- 13 function updateMouseCoordinates() 14 { 15 coordinates.innerText = event.srcElement.tagName + 16 " (" + event.offsetX + ", " + event.offsetY + ")"; 17 } 18 // --> <body style = "back-groundcolor: wheat" 23 onmousemove = "updateMouseCoordinates()"> (0, 0) 26 <img src = "deitel.gif" style = "position: absolute; 27 top: 100; left: 100" alt = "Deitel" /> coordinates.innerText değişkenine koordinatlar resmin adını ve resmin ü zerinde gezinen farenin pozisyon koordinatları atar event.offsetX ve event.offsetY ö zellikleri resmin sol üst köşesini baz alarak farenin koordinatını g ö sterir. Onmousemove olay kullanıcı fareyi her hareket ettirdiğinde ç ağrılır.
deitell Fareyi resim üzerinde hareket ettirdiğinizde farenin resmin neresinde olduğunun koordinatını verir( fare hareket ettikçe koordinatta değişir) Fareyi resim üzerinde hareket ettirdiğinizde farenin resmin neresinde olduğunun koordinatını verir
DHTML Event Model - onmouseover and onmouseout
1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " DHTML Event Model - onmouseover and onmouseout <!-- 15 captionImage1 = new Image(); 16 captionImage1.src = "caption1.gif"; 17 captionImage2 = new Image(); 18 captionImage2.src = "caption2.gif"; function mOver() 21 { 22 if ( event.srcElement.id == "tableCaption" ) { 23 event.srcElement.src = captionImage2.src; 24 return; 25 } // If the element which triggered onmouseover has 28 // an id, change its color to its id. 29 if ( event.srcElement.id ) 30 event.srcElement.style.color = 31 event.srcElement.id; 32 } 33 mOver fonksiyonu uygun g ö r ü nt ü n ü n src ö zelliği olan src niteliğini ayarlayarak g ö r ü nt ü n ü n onmouseover olayını yönetir.
34 function mOut() 35 { 36 if ( event.srcElement.id == "tableCaption" ) { 37 event.srcElement.src = captionImage1.src; 38 return; 39 } // If it has an id, change the text inside to the 42 // text of the id. 43 if ( event.srcElement.id ) 44 event.srcElement.innerText = event.srcElement.id; 45 } document.onmouseover = mOver; 48 document.onmouseout = mOut; 49 // --> Guess the Hex Code's Actual Color Can you tell a color from its hexadecimal RGB code 58 value? Look at the hex code, guess the color. To see 59 what color it corresponds to, move the mouse over the 60 hex code. Moving the mouse out will display the color 61 name <table style = "width: 50%; border-style: groove; 64 text-align: center; font-family: monospace; 65 font-weight: bold"> 66 Fare imleci bir ö ğe ü zerinde hareket ettiğinde onmouseover olayı oluşur. mOut fonksiyonu imaj için onmouseout olayını yönetir. mOver fonksiyonu ile aynı şekilde çalışır. Fare imleci resimden ayrıldığında onmouseout olayı oluşur. eğer “id” belirtildiyse bu kodu test eder ve renk ismini “id” de eşleştirir.
67 68 <img src = "caption1.gif" id = "tableCaption" 69 alt = "Table Caption" /> # #0000FF 75 #FF00FF 76 # # #00FF00 81 # # # # #FF #C0C0C #00FFFF 92 # #FFFF00 94 #FFFFFF
Onrollover,(on mouse over) farenin üzerinde dolaştığı onaltılık kodun değeri olan renk ile rengin isminini görüntüler. rengin onaltılık kodu yerine, tanımlanan renk ve renk ismi görüntüleniyor hadi deneyelim