javascript Archives - Appunti e tutorial su front-end web technology

HTML5: web workers

Mar 232013

Quando si esegue gli script in una pagina HTML, la pagina non risponde fino a quando lo script è terminato e dato l’ampio uso che si fa oggi di javascript la cosa a volte inizia a diventare problematica.

Un web workers è un JavaScript che viene eseguito in background, indipendentemente da altri script, senza compromettere le prestazioni della pagina. È possibile continuare a fare quello che vuoi: cliccare, selezionare cose, mentre il Web Worker viene eseguito in background.

Prepariamo dunque il nostro web worker:


var i=0;
function timedCount(){
i=i+1;
postMessage(i);
setTimeout("timedCount()",1000);
}
timedCount();

Si tratta di un semplice contatore che richiama se stesso ogni secondo grazie al timeout, postMessage() aonsente la comunicazione tra i due documenti, indipendentemente dalla loro collocazione.

La pagina html sarà composta da due bottoni per avviare e fermare il web worker e un campo per l’output, tramite il tag put put di html5 che serve proprio per inserire il risultato di un calcolo.

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

Quello che segue sarà nell’ordine il controllo del supporto da parte dei browser, il controllo sull’inizializzazione dell’oggetto, la creazione dell’oggetto e la gestione dell’output o viceversa il messaggio di errore in caso di mancato supporto.

var w;
function startWorker(){
if(typeof(Worker)!=="undefined"){
if(typeof(w)=="undefined"){
w=new Worker("js/demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else{
document.getElementById("result").innerHTML="Il tuo browser non supporta Web Workers...";
}
}

Ultimo step l’arresto del web worker:

function stopWorker(){
w.terminate();
}

L’esempio

Angular data-binding

javascript No Responses »

Feb 152013

anguar.js implementa il data-binding in modo automatico, cioè è un sistema di aggiornamento della vista ogni volta che il modello cambia, così come l’aggiornamento del modello ogni volta che la vista cambia. Ciò è molto comodo perché elimina la manipolazione DOM dall’elenco delle cose che dobbiamo fare.

Un esempio è dato dal binding che possiamo creare tra un campo di input testuale e un tag h1 dove visualizzeremo il contenuto:


<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
</head>
<body>
<div>
<label>Nome:</label>
<input type="text" ng-model="tuoNome" placeholder="Inserisci il tuo nome qui">
<hr>
<h1>Ciao {{tuoNome}}!</h1>
</div>
</body>
</html>

L’esempio

Angular.js: reperire json via ajax

javascript No Responses »

Jan 272013

Proviamo a completare il mini ciclo iniziato nei post precedenti rendendo oggettivamente operativo il nostro angular.js ovvero recuperando i dati in formato json da una pagina php

La chiamata ha una struttura essenziale, useremo il metodo get passando la url della pagina che ci manderà il JSON e gestiremo con success la risposta assegnandola direttamente allo $scope:

function UtenteListCtrl($scope, $http) {
$http.get('php-to-json-01.php').success(function(data) {
$scope.utenti = data;
});
$scope.orderProp = 'id';
}

L’ultima istruzione serve per ordinare i dati.

Il resto della pagina è in linea con i post precedenti, solo gli accorgimenti del caso

<body ng-controller="UtenteListCtrl">
Cerca: <input ng-model="query">
<ul>
<li ng-repeat="utente in utenti | filter:query">
<span>{{utente.myid}}</span>
<span>{{utente.mynome}}</span>
<span>{{utente.mycognome}}</span>
</li>
</ul>
</body>

L’esempio

Angular.js: ordinare e filtrare dei dati

javascript No Responses »

Jan 252013

Prendendo spunto dal post precedente vediamo come filtrare “al volo” dei dati e presentarli ordinati:

Lo schema sarà identico al tutorial del post precedente ma con delle interssanti varianti:

come prima cosa portiamo il controller direttamente sulla lista:


<ul ng-controller="BrowserListCtrl">

successivamente prepariamo un campo di input per filtrare i dati


Cerca: <input ng-model="query">

con l’ng-model per implementare il binding dei dati

e infine


<li ng-repeat="borwser in borwsers | filter:query | orderBy:'nome'">

dove nell’istruzione per ripetere tante liste quanti sono i nostri elemnti nel JSON agganciamo, separandoli con il pipe, ance il filtro e la clausola di ordinamento

L’esempio

Angular.js: come iniziare

javascript No Responses »

Jan 232013

Angular.js è un framework javascript patrocinato da Google e basato sul modello MVC: Vediamo come funziona partendo dall’intestazione del nostro file html:


<!DOCTYPE HTML>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular js</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script>
...
</script>
</head>

Ci sono due cose da notare subito: la prima è il collegamento alla libreria, ma questo è scontato, ma soprattutto la direttiva ng-app che indica la root della pagina alla quale applicare il parsing del nostro framework

Il passaggio successivo è quello di preparare una fonte di dati che verranno utilizzati nella nosta pagina:


function BrowserListCtrl($scope) {
$scope.borwsers = [
{"id": "1", "nome": "Chrome"},
{"id": "2", "nome": "Firefox"},
{"id": "3", "nome": "Safari"},
{"id": "4", "nome": "Internet explorer"},
{"id": "5", "nome": "Opera"}
];
}

Questo sarà il nostro controller che contiene l’array di dati in formato JSON

Passaggio successivo sarà associare alla nostra pagina il controller


<body ng-controller="BrowserListCtrl">

e infine preparare la view, con una sintassi un po’ criptica ma decisamente economica:

<ul>
<li ng-repeat=”borwser in borwsers”>
<span>{{borwser.id}}</span>
<span>{{borwser.nome}}</span>
</li>
</ul>

L’esempio completo

Angular js