Curs Javascript


Web Worker e un obiect JavaScript care ruleaza in fundal, fara sa afecteze performantele paginii. Codul din worker poate efectua diferite sarcini fara sa interfereze cu pagina din browser.
In pagina, un script JS poate face diferite instructiuni: click-uri, selectare, afisare date, etc., in timp ce codul din worker efectueaza alte instructiuni.

Creare Web Worker

In general, un web worker se creaza intr-un fisier JS separat pe server, de exemplu worker.js. Acest fisier contine codul care ruleaza in fundal.

Se poate executa orice cod JS in fisierul worker, cu unele exceptii.
Nu se poate manipula DOM direct din worker, nuci nu se pot folosi proprietati si metode implicite din obiectele window, document, si parent. Dar se pot folosi multe obiecte din window, incluzand: XMLHttpRequest (Ajax), WebSockets, Navigator si IndexedDB.

In pagina in care vreti sa utilizati codul dintr-un web worker, creati o instanta de obiect Worker cu aceasta sintxa.

if(window.Worker){
 var wrk = new Worker('worker.js');
}
- Dupa ce e creat un cod JavaScript in fisierul worker.js (sau orice alt nume vreti), poate sa trimita date la obiectul Worker.

Datele sunt trimise intre codul din fisierul worker si cel din pagina printr-un sistem de mesagerie — ambele parti trimit date cu metoda postMessage(), si pot receptiona datele prin evenimentul onmessage. Datele sunt stocate in proprietatea event.data.

Exemplu simplu cu JavaScript Worker exampe

Urmatorul exemplu afiseaza un contoar care ruleaza continuu intr-un fisier worker. Scriptul e salvat intr-un fisier "workers_ex.js" si folosit intr-o pagina wen.

Cod in workers_ex.js

var ic =0;

function timedCount(){
 ic++;
 postMessage(ic);
 setTimeout('timedCount()', 500);
}

timedCount();

Cod in pagina web

<h4>Exemplu JavaScript Worker</h4>
<blockquote>Contor: <b id='resp'></b></blockquote>
<button id='bt_startw'>Start Worker</button> - 
<button id='bt_stopw'>Stop Worker</button> - 

<script>
var wrk; //pt. obiectul Worker
var resp = document.getElementById('resp');

function startWorker(){
 if(window.Worker){
 //daca wrk e undefined sau false, il defineste
 if(!wrk) wrk = new Worker('javascript/worker_ex.js');

 //addauga in #resp datele primite de la worker
 wrk.addEventListener('message', (ev)=>{
 resp.innerHTML = ev.data;
 });
 }
}

function stopWorker(){ 
 wrk.terminate();
 wrk = false;
}

//click-ul la butoanele Start /Stop Worker
document.getElementById('bt_startw').addEventListener('click', startWorker);
document.getElementById('bt_stopw').addEventListener('click', stopWorker);
</script>

Primire date in fisierul worker

Scriptul din pagina poate sa trimita date la worker cu metoda postMessage().

var wrk = new Worker('worker.js');
wrk.postMessage('Date trimise la worker');

Scriptul din worker receptioneaza datele prin evenimentul onmessage, in proprietatea event.data.
addEventListener('message', (ev)=>{
 var data = ev.data;
}

Se pot trimite orice tip de date cu postMessage(): string, number, array, object, boolean.


- Exemplu, cand utilizatorul tasteaza un text intr-o caseta input, textul e trimis ca sir la un worker care trimite inapoi la pagina un obiect cu textul inversat si numarul de caractere.

Cod in worker_ex.js

//la receptionare date din pagina
addEventListener('message', (ev)=>{
 var str = ev.data;

 //obiect cu datele care sa fie trimise cu postMessage()
 var re ={s:str.split('').reverse().join(''), n:str.length};
 postMessage(re);
}

Cod in webpage

<h4>Exemplu date catre worker</h4>
<p>Tastati orice text in caseta urmatoare:</p>
Text: <input type='text' id='inp1'/>
<blockquote id='resp'>Aici afiseaza textul inversat si numarul de caractere.</blockquote>

<script>
var resp = document.getElementById('resp');

//defineste obiect Worker, daca e valabil in browser
var wrk = (window.Worker) ? new Worker('javascript/worker_ex.js') :false;

//daca wrk defint
if(wrk){
 //la tastare text in input
 document.getElementById('inp1').addEventListener('keyup', (ev)=>{
 wrk.postMessage(ev.target.value); //trimite date la worker
 });

 //preia date de la worker
 wrk.addEventListener('message', (ew)=>{
 if(ew.data.n) resp.innerHTML ='Text inversat: '+ ew.data.s +'<br>Nr. caractere: '+ ew.data.n;
 });
}
</script>

In mod normal, web-worker nu se foloseste pentru astfel de scripturi simple, ci mai mult pentru sarcini intensive ale procesorului, in aplicatii precum jocuri, WebSockets si solicitari ajax repetitive.
Pentru depanarea codului din fisierul worker, se poate folosi metoda console.log() in acel fisier.


Terminare Worker

Cand se creeaza un obiect Worker, acesta va continua sa detecteze mesajele chiar si dupa terminarea scriptului extern, pana cand acesta va fi terminat /inchis.
Pentru terminarea unui worker (eliberand astfel resursele), se foloseste metoda terminate().

workerObj.terminate()

In fisierul worker se poate inchide singur cu metoda close().
//fisier worker
// codul..

if(conditie) close();

Includere scripturi externe in fisier worker

Cu functia importScripts() se pot include unul sau mai multe scripturi externe in fisierul worker.

importScripts('foo.js'); //include foo.js
importScripts('foo.js', 'bar.js'); //include doua scripturi
importScripts('//example.com/hello.js'); //include script din alt domeniu
Browserul incarca si executa fiecare script inclus. Obiectele globale din fiecare script pot fi apoi folosite de worker.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
vivió vivido viviendo
Estoy viviendo aquí.
- Traiesc /Locuiesc aici.
JavaScript Worker

Last accessed pages

  1. Por sau para: Exercitiu 1 (3122)
  2. Trecut nedefinit vs Imperfect (3633)
  3. Indicativ prezent (1525)
  4. Teste spaniola - Tests y ejercicios de Español - Gramática (27655)
  5. Numerale, Numere in limba engleza - Numerals (52661)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (678)
  2. Coduri pt culori (303)
  3. Exercitii engleza - English Tests and exercises - Grammar (301)
  4. Gramatica limbii engleze - Prezentare Generala (295)
  5. Cursuri limba engleza gratuite si lectii online (272)