Yazılım Çorbası: Javascript ve DOM

Giriş
Not : Eskiden js sadece tarayıcı üzerinde çalışırdı. Artık bu söylem doğru değil. Node.js gibi sunucu üzerinde çalışan js kütüphaneleri de var. Dolayısıyla her Javascript kütüphanesinde DOM desteği olmayabilir.

Hem Javascript hem de JQuery DOM nesnelerine erişmemize izin verirler. JQuery DOM nesnelerine # işareti ve id ile erişmemizi sağlar.

<div id="div1">Loading...</div>
<div id="div2">Loading...</div>
<script type="text/javascript">
  $(document).ready(function() {
    $("#div1").load("path/to/file.php");
    $("#div2").load("path/to/file.php");
  });
</script>

Javascript ise getElementById() ile erişmemizi sağlar.
appendChild
Elimizde şöyle bir HTML olsun.

<div id="field1">
  ...
</div>

DOM'a yeni bir nesne eklemek için şöyle yaparız.

<script>
  function add() {
    
    var div1 = document.createElement('div');
    div1.innerHTML = '...';
    document.getElementById('field1').appendChild(div1);
  
  }
</script>

addEventListener
DOM içindeki birçok event'i dinleyebiliriz. Bunun için DOM elemanını bulup addEventListener ("event tipi", metod ismi) şeklinde bir çağrı yapmak gerekir. Bir event'i dinlemekten vazgeçersek removeEventListener çağrısı yaparız.
Şöyle bir html olsun

<div id="body_visusal_editor">click to add one element</div>

Div'e tıklamayı şöyle dinleriz.

function myfunc(tag, type) {...}

var elem = document.getElementById("body_visusal_editor");
elem.addEventListener("click", myfunc())

querySelectorAll metodu
Şöyle yaparız.

var videos = document.querySelectorAll('video'),\n" +
[].forEach.call(videos, function(video) { video.muted = true; });

window
En çok karşımıza çıkan kodlar şöyle

window.location.hostname

www.google.com gibi bir çıktı verir.
HTML Eventleri
onclick
Bir çok yerde onClick olarak kullanılsa da aslında doğrusu onclick. Şöyle kullanırız. addEventListener ("click",...) yapmaktan daha kolaydır.

button.onclick = function() { doThis(arg); };

HTML Nesneleri
canvas
Elimizde şöyle bir canvas olsun

canvas id="CanvasFlynn" width="2" height="2"
 style="width: 100px; height: 100px; ..."></canvas>

Canvas'ın piksellerini şöyle doldurabiliriz.

function draw()
{
    var cnvs = document.getElementById("CanvasFlynn"); //Assume it's 2x2 pixels
    var cont  = cnvs.getContext("2d");
    var imdt  = cont.getImageData(0, 0, 2, 2);
    var r     = [ 255 , 0 , 0 , 255 ];
    var g     = [ 0 , 255 , 0 , 255 ];
    var b     = [ 0 , 0 , 255 , 255 ];
    var a     = [ 255 , 255 ,255 ,255 ];
    var index = 0;
    for ( var i = 0 ; i < imdt.data.length / 4 ; i++ )
    {
        index              = 4*i;
        imdt.data[index]   = r[i];
        imdt.data[index+1] = g[i];
        imdt.data[index+2] = b[i];
        imdt.data[index+3] = a[i];
    }
  
    cont.putImageData(imdt, 0, 0);
}
draw();

div
innerHTML
Elimizde şöyle bir html olsun

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
    <button class="loadButton" value="input1.txt">Load file 1</button>
    <button class="loadButton" value="input2.txt">Load file 2</button>
    <div id="view"></div>
</body>
<script>

Bu html'deki div alanları şöyle değiştirilir.

document.getElementById("view").innerHTML = "..."

paragraph
Şöyle bir HTML olsun.

<p id="p">Hello</p>

P alanı şöyle değiştirilir.

document.getElementById('p').onclick = function() {
  this.textContent = 'Bob';
};

pre
pre div ile aynı şekilde çalışıyor. Şöyle bir HTML olsun

<pre id="output"></pre>

Bu html'deki pre alanı şöyle değiştirilir.

document.getElementById('output').innerHTML = JSON.stringify(myset, 0, 2);

table
deleteRow
Şöyle yaparız.

var id = ...;
var table = document.getElementById("table");
rowsCount = table.querySelectorAll('tr[id="' + id + '"');

for (var i = 0; i < rowsCount.length; i++) {
  table.deleteRow(rowsCount[i].rowIndex);
}

insertRow
Şöyle yaparız.

var row = table.insertRow();
row.id = ...;
var col1 = row.insertCell(0);
var col2 = row.insertCell(1);
var col3 = row.insertCell(2);

col1.innerHTML = ...;
col2.innerHTML = ...;col3.innerHTML = ...;

textarea
value
Kutunun içindeki metine erişilebilir. Elimizde şöyle bir html olsun

<html>

<body>
  <textarea id=contactMe rows=4 cols=40>Enter your comment...</textarea>
  <script src="contactBox.js">
  </script>
</body>

</html>

contact.js'nin içi de şöyle olsun. Metin kutusuna tıklanınca kutunun için silinir.

function ClearText(e) {

  //alert(document.getElementById('contactMe').value);
  if (document.getElementById('contactMe').value == 'Enter your comment...') {
    document.getElementById('contactMe').value = "";
  }

}


var x = document.getElementById('contactMe');
x.addEventListener('click', ClearText, false);

Yazılım Çorbası

21 Mart 2018 Çarşamba

Javascript ve DOM

Hiç yorum yok:

Yorum Gönder

Blog Arşivi