banner
htmldersleri
Ana SayfaANA SAYFA Dersler | Örnekler | Forum | Sıkça Sorulan Sorular |Hakkında
HTML Temel
HTML Giriş
HTML Elementler
HTML Etiketler
HTML Parametreler
HTML Biçimlendirme
HTML Özeller
HTML Bağlantılar
HTML Çerçeveler
HTML Tablolar
HTML Listeleme
HTML Formlar
HTML Resimler
HTML Arka Plan
HTML Renkler
HTML Renk Değerleri
HTML Renk İsimleri
HTML Hızlı Liste

HTML5 Ana Menü
HTML5 Giriş
HTML5 Anlamlandırma
HTML5 Giriş Tipleri
HTML5 Form Elementleri
HTML5 Form Özellikleri
HTML5 Canvas
HTML5 SVG
HTML5 Video
HTML5 Audio
HTML5 Konum
HTML5 Sürükle/Bırak
HTML5 Web Depolama
HTML5 Uygulama Bellekleme
HTML5 Web Çalışanı
HTML5 SSE

HTML Gelişmiş
HTML Tasarım
HTML Fontlar
HTML Stiller
HTML Başlık
HTML Meta
HTML URL
HTML Scriptler
HTML Std. Nitelikler
HTML Olaylar
HTML ASCII
HTML Web Sunucu

HTML Örnekler/Test
HTML Örnekler
HTML Örnek Site
HTML Test

HTML5 Web Çalışanı (Workers)

Önceki Sonraki

Web çalışanı, sayfanın performansını etkilemeden arka planda çalışan bir JavaScript kodudur.


Web Çalışanı Nedir?

HTML sayfasında bir script çalıştırıldığında, script bitene kadar sayfa kullanıcıya cevap veremez hale gelir.

Web çalışanı, sayfanın performansını etkilemeden diğer script'lerden bağımsız olarak arka planda çalışan bir JavaScript kodudur. İstediğiniz başka her türlü şeyi yapmaya devam edebilirsiniz: tıklama, nesneleri seçme vs...


Tarayıcı Desteği

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 10, Firefox, Chrome, Safari ve Opera destekler.



HTML5 Web Workers Örneği

Aşağıdaki örnek, arka planda sayı sayan basit bir web çalışanı oluşturur:

Örnek

Saymaya Başla:




Kendin Dene »


Tarayıcı Desteğini Kontrol Etme

Bir web worker oluşturmadan önce bu işlemi mutlaka yapın:

if(typeof(Worker) !== "undefined")
  {
  // Evet! Web Worker Destekleniyor!
  // Kod satırları.....
  }
else
  {
  // Tarayıcınız Web Worker özelliğini desteklemiyor.
  }


Bir Web Worker Dosyası Oluşturma

Şimdi, kendi harici JavaScript web worker dosyamızı oluşturalım.

Burda, sayı sayan bir script oluşturuyoruz. Script, "demo_workers.js" dosyası içinde saklanacak:

var i = 0;

function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

Yukarıdaki kodda önemli olan kısım, HTML dosyasına mesaj göndermek için kullanılan postMessage() metodudur.

Not: Normalde web çalışanları böyle basit scriptler için kullanılmaz. Daha çok yoğun ve ağır CPU (işlemci) işlemleri için kullanılır.


Bir Web Worker Nesnesi Oluşturmak

Artık bir web worker dosyamız var, şimdi yapmamız gereken onu bir HTML dosyası ile çağırmak.

Aşağıdaki satırlar bir worker olup olmadığını kontrol eder, eğer yoksa yeni bir tane yaratır ve "demo_workers.js" içindeki kodları çalıştırır:

if(typeof(w) == "undefined")
  {
  w = new Worker("demo_workers.js");
  }

Artık worker'dan mesaj alabilir ya da worker'a mesaj gönderebiliriz.

Web Çalışanına bir tane "onmessage" olay dinleyicisi (event listener) ekleyin.

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
  };

Web çalışanı bir mesaj gönderdiğinde, event listener içindeki kod çalışır. Web çalışanından alınan veri, event.data içerisinde saklanır.


Web Çalışanını Bitirmek / Silmek

Bir Web Worker nesnesi oluşturulduğunda, silinene kadar mesajları dinlemeye (harici script sonradan kapatılsa bile) devam eder.

Bir web çalışanını silmek ve tarayıcının/bilgisayarın kaynaklarını serbest bırakmak için terminate() metodunu kullanın:

w.terminate();


Web Çalışanı ve DOM (Document Object Model - Döküman Nesne Modeli)

Web Çalışanları harici dosyalar oldukları için, aşağıdaki JavaScript nesnelerine ulaşamazlar:

  • window object
  • document object
  • parent object

Önceki Sonraki

Dersler | Örnekler | Forum | Sıkça Sorulan Sorular |Hakkında
Copyright © 2008 | Tüm Hakları Saklıdır. | Webmaster: destek@htmldersleri.org

74 kişi şuan sayfamızda geziniyor.

English Deutsch Français Español Dutch Italiano Português Български
html dersleri
Dersler Örnekler Online Test