[JAVASCRIPT] Aiuto, consegna da svolgere

[Enniorosanero]

Salve, sono uno studente di ingegneria informatica e quest'anno ho seguito un corso da 3 cfu su javascript, il problema è che a fare questo corso hanno messo un assistente che non aveva idea di come insegnare e anche il materiale messo a nostra disposizione è scadente. Il risultato è che non abbiamo imparato niente sul linguaggio, dobbiamo impararlo da zero e da soli, inoltre per superare il corso dobbiamo svolgere e consegnare questa consegna ma non ho idea di dove mettere le mani. Ho pensato di scrivere qui cercando l'aiuto della comunità, qualsiasi suggerimento è apprezzato, sia su come impostare il lavoro sia link utili su guide dove imparare quello che mi serve per portare a termine il lavoro. Mi scuso per la natura della domanda e vi ringrazio per qualsiasi aiuto sarete disposti o sarete in grado di darmi. Riporto di seguito la consegna:

Realizzare una rubrica ed un registro presente in javascript (Node.js).

Rubrica
Implementare la rubrica secondo il module pattern. I campi da includere nella rubrica sono:

matricola
nome
cognome
data di nascita
lista numeri di telefono
lista indirizzi email
lista indirizzi posta

Implementare i metodi accessori per l'inserimento, la modifica, la rimozione, la ricerca e la visualizzazione dei campi.

Registro presenze

I campi da includere nel registro sono:

matricola
data
ingresso
uscita
note


Implementare i metodi accessori per l'inserimento, la modifica, la rimozione, la ricerca e la visualizzazione dei campi.

Server e interfaccia di gestione

Scegliere uno tra rubrica e registro presenze ed implementare un'interfaccia web (gestita lato server con Express o lato client tramite AngularJS) per utilizzare la rubrica o il registro (a seconda della propria scelta) mantenuti su un server creato con Node.js.
La consegna (in un unico file ZIP) dovrà contenere i file relativi all'implementazione della rubrica, del registro presenze e della parte di gestione (client e server) per la rubrica o il registro. Nel file ZIP dovranno essere incluse anche le istruzioni per testare la consegna.

[Zoff]

Non è abitudine del forum fare i compiti altrui.
Se inizi fornendo una base da cui partire e dove sei arenato qualcuno ti aiuterà volentieri.

La documentazione sul sito nodejs è già abbastanza completa mi sembra.
Vedi i tutorial: http://nodeschool.io/#workshopper-list

[Enniorosanero]

forse mi sono espresso male, non chiedo che qualcuno mi faccia il compito, il problema è che su javascript dopo questo corso, sia io che i miei colleghi ci sentiamo come prima che lo cominciassero, cioè a zero, se mi sapete suggerire anche un sito che fa guide su questo linguaggio di programmazione sarebbe già un grande aiuto, così potrei imparare quello che mi serve per portare a termine il compito. Ho messo la consegna del compito in modo che, chi è + esperto di me, possa capire cosa mi serve imparare per svolgere questo compito e mi possa indirizzare su come studiare questo linguaggio

[Zoff]

Mi sembra che la consegna lasci ampia libertà di elaborazione (accetta sia una soluzione interamente lato server che una mediata anche lato client da angular).
Se siete completamente digiuni propenderei per la soluzione fatta unicamente in node (visto che è obbligatorio).

Dovendolo utilizzare partite dall'hello world di express: http://expressjs.com/starter/hello-world.html
E aggiungete le rotte: http://expressjs.com/starter/basic-routing.html

Non è specificato nulla sul lato implementativo della storicizzazione dei dati. Cosa avete visto durante il corso? File semplici? No-sql (es. MongoDB)? DB relationali (es. PostgreSQL/Mysql....)?
Avete usato ODM (es. Mongoose) o ORM (es. Sequelize)?

Partite con mettere su un server express che visualizza un form e legge i dati inviati.

[Enniorosanero]

questo è il programma contenente gli argomenti che abbiamo trattato:

Introduzione al corso
Cenni su JavaScript
Eventi
Callback
Closure
JSON
JSON Schema
Node.js
Introduzione
Eventi
Flussi
Moduli
Creazione di pagine web con Express
Moduli per la creazione di template HTML (JADE o Handlebars)
Autenticazione con Passport
Socket.io
BootstrapIntroduzione
Elementi grafici
Elementi di input
Impaginazione
Angular.js
Expressioni
Direttive
Controllers
Filtri
Chiamate HTTP
Tabelle
Interazione con il DOM
Eventi
Moduli
Form HTML
Validazione degli input
Integrazione con Bootstrap
Inclusione di file HTML
Servizi REST
Cenni ed esempio
Swagger
Cenni ed esempio

[Zoff]

Il materiale, almeno del programma, sembra essere allora ampio e sufficiente per lo studio.

[SuperStep]

ciao @Enniorosanero,

Allora probabilmente questo post sara' un po' lungo, ma cerchero' di spiegare in maniera sintattica alcune cose:

Partiamo dal principio. Javascript e' un linguaggio interpretato orientato ad oggetti ed eventi. Viene impiegato in un'ampia gamma di servizi: (WebBrowser, Motori di rendering, shell da terminale, ...). Ovviamente l'uso piu' ampio ricade sui browser in quanto maggiori utilizzati.

Javascript supporta il concetto di variabili non tipizzate, (come php), ovvero, ogni variabile possiede il tipo del valore assegnato:
esempio"

Codice: Seleziona tutto

var x = 1; //x tipo numerico
var y = 'a';//y tipo stringa

una variabile puo' anche essere di tipo oggetto o funzione
esempio:

Codice: Seleziona tutto

var x = {};
var y = function(){};

per rapidita' salteremo la parte dei parametri delle funzioni e dei costrutti supponendo che tu li conosca.

Un evento, e' il verificarsi di una condizione in un determinato istante alla quale tu puoi far associare una funzione.

Parliamo adesso di Eventi, Clousure e Callback.

Supponendo di avere queste funzioni:

Codice: Seleziona tutto

function myCallBack_first(){ process.stdout.write('first'); }
function myCallBack_second() { process.stdout.write('second'); }

function myCallBackChooser(variable, function_first, function_second){ 
    if(variable == 1) { function_first(); }
    if(variable == 2) { function_second(); }
}

adesso quello che vogliamo fare e' implementare un callback, ovvero, vogliamo fare in modo che la funzione chiamata esegua del codice a seconda delle situazioni, questa tecnica con qualche modifica in piu' viene chiamata IoC (Iversion of Control), ci arriviamo fra poco.

adesso, se proviamo a fare una cosa del genere:

Codice: Seleziona tutto

myCallBackChooser(1, myCallBack_first, myCallBack_second);

la funzione myCallBackChooser al suo interno chiamera' myCallBack_first, nel caso anaologo in cui sia passato il valore intero '2' sara' eseguito myCallBack_second.

giusto per dare un accenno di IoC (semplice semplice) per utilizzare una funzione anonima (Detta anche Clousure analoghe alle funzioni lambda ma queste non sono dotate di nome)

supponiamo di avere queste funzioni adesso: (senza clousure)

Codice: Seleziona tutto

function iocFunction(thefunction) {
    return thefunction(3);
}

function myFunction (myvalue) {
    return myvalue + 1;
}

process.stdout.write(iocFunction(myFunction).toString());

quello che succede in questo caso e che chiamando iocFunction con myFunction otterremo il valore 4. Analogamente con una clousure avremmo potuto fare una cosa del genere

Codice: Seleziona tutto

function iocFunction(thefunction) {
    return thefunction(3);
}

process.stdout.write(
    iocFunction(
        function(value) {  return value + 1;  }
    ).toString()
);

come vedi abbiamo passato come parametro di iocFunction una funzione scritta in quel momento che non possiede nome (Clousure).

ti spiego passo passo cosa succede:

Codice: Seleziona tutto

//abbreviato in una sola riga
process.stdout.write(iocFunction(function(value){ return value + 1}).toString());

1# viene chiamata iocFunction con parametro (function(value){ return value + 1})
2# iocFunction al suo interno chiama thefunction con valore 3. quindi abbiamo una cosa del genere (function(3){ return value 3 + 1; })
3# la funzione restituisce il valore 3 + 1 al chiamante (iocFunction) iocFunction a sua volta la restituisce a process.stdout.write che lo scrive sullo stdout adattato a stringa (Numeric possiede il metodo toString per convertire un numero in stringa).

Quali sono le potenzialita'?

+ supponendo di dover fare cose prima e dopo ma con qualche variazione nel mezzo (esempio: prendo degli input, li trasformo in un modo, li passo ad un altro metodo che se li aspetta in quel modo e li salva e poi li devo restituire in output), posso scrivere questo metodo che fa da IO, e modificare solamente il metodo che passa i dati (scusami per la confusione ma non so spiegarlo meglio).

Quindi, ricapitolando:

una CallBack e' una funzione che viene chiamata di ritorno secondo determinate condizioni
una Clousure e' una funzione (Anonima - senza nome) che serve per fare (Anche) IoC. Ma viene utilizzata per diversi scopi, alcuni sono presenti piu' avanti.

Queste saranno molto utilizzate in vari framework (come AngularJS).

----------

Passiamo a JSON (Javascritp Object Notation).

Un Oggetto JSON e' una variabile che al suo interno contiene un oggetto, ed e' rappresentata dalle parentesi graffe {}.

questo e' un oggetto JSON

Codice: Seleziona tutto

var myjsonvar = {};

questo e' un oggetto JSON con una variabile:

Codice: Seleziona tutto

//edited
var myjsonvar = { "x": "3"};

questo e un oggetto JSON con piu variabili

Codice: Seleziona tutto

//edited
var myjsonvar = { "x":"3", "y":"ciao" };

e' possibile accedere ad un attributo di un oggetto json tramite la dot notation

Codice: Seleziona tutto

> console.log(myjsonvar.y);
ciao

cosi come per le variabili vale anche per le funzioni:
in un oggetto literale e' possibile aggiungere funzioni

Codice: Seleziona tutto

var myjsonvar = { x:3, y:'ciao', z: function() { return 3.33; } };
> console.log(myjsonvar.z);
[Function]
> console.log(myjsonvar.z());
3.33

e' possibile anche assegnare dinamicamente un'attributo ad un oggetto se esiste
in un oggetto literale e' possibile aggiungere dinamicamente variabili all'oggetto.

Codice: Seleziona tutto

myjsonvar.t = 7;
> console.log(myjsonvar);
{ x:3, y: 'ciao', z: [Function], t: 7 }

Torniamo per un secondo agli eventi:
Gli eventi sono creati dal gestore che li mantiene (Browser, NodeJs, ...).

Ogni gestore mette a disposizione dei controlli per intercettare (o anche lanciare) degli eventi. Questo e' chiamato dispatcher. invece il metodo che lo gestisce viene chiamato handler. Sostanzialmante e' dispatch -> handle.

per fare un esempio con js implementato in un browser, supponendo di avere un bottone ed averlo nella variabile 'var button', potremmo modificare in questo modo il comportamento dell'evento

Codice: Seleziona tutto

var mybutton = document.getElementById('the-super-button');

mybutton.click = function() { window.alert('button was pressed!'); };

come vedi abbiamo utilizzato una clousure, al suo interno, il browser, quando intercettera' il segnale scatenera' la funzione click(), che nel nostro caso corrisponde a (function() { window.alert('button was pressed!'); };)

esistono anche i listener che permettono di registrare piu' funzioni e che accettano come parametro l'evento scatenato http://www.w3schools.com/jsref/met_docu ... stener.asp

----------

Qualche definizione:
Flussi: "la strada che prende il codice", l'ordine in cui il codice e' eseguito.
Modulo: un insieme di direttive e funzioni che hanno uno scopo comune, analogo al concetto di package in Java.

----------

Saltiamo la parte AngularJS, Node.js, Socket.io perche' non puo' essere affrontata in un post.

----------

REST, Representional State Transfer, e' un tipo di architettura software che serve per prelevare/immettere/patchare/eliminare dei dati in genere viene mappato con CRUD (Create Read Update Delete) per la gestione dei modelli.

REST e' un protocollo client-server statless (perche' implementato su http). e si basa sul principio di risorse. Ogni risorsa ha un url (unified resource location) che lo identifica.

Esempio:

Codice: Seleziona tutto

www.example.com/user/superstep

avremmo che user e' la risorsa rest, e superstep e' il modello. in questo modo e' possibile fare su di esso determinate operazioni tramite l'url

Codice: Seleziona tutto

HTTP-VERB  |  URL  | SPIEGAZIONE  |  OPERAZIONE CRUD
GET    www.example.com/user @mostra tutti gli utenti analogo ad un metodo indice (READ)
GET    www.example.com/user/superstep @mostra l'utente specifico (READ)
POST www.example.com/user/ @in genere se la richiesta e' post serve per creare il modello (CREATE)
PUT/PATCH www.example.com/user/superstep @questo serve per aggiornare il modello (UPDATE)
DELETE www.example.com/user/superstep @questo serve per cancellare il modello (DELETE)

nei sistemi con basi di dati relazionati (tramite database), e' possibile usare CRUD per accedere agli elementi tramite URL.

esempio banale

Codice: Seleziona tutto

GET www.example.com/user/superstep/comments @tutti i commenti di superstep
GET www.example.com/user/superstep/comments/3 @il commento specifico 3 di superstep

per il momento mi fermo qui, spero di esserti stato di aiuto.

[Zoff]

Passiamo a JSON (Javascritp Object Notation).

Un Oggetto JSON e' una variabile che al suo interno contiene un oggetto, ed e' rappresentata dalle parentesi graffe {}.

questo e' un oggetto JSON

Codice: Seleziona tutto

var myjsonvar = {};

questo e' un oggetto JSON con una variabile:

Codice: Seleziona tutto

var myjsonvar = { x: 3};

questo e un oggetto JSON con piu variabili

Codice: Seleziona tutto

var myjsonvar = { x:3, y: 'ciao' };

e' possibile accedere ad un attributo di un oggetto json tramite la dot notation

Codice: Seleziona tutto

> console.log(myjsonvar.y);
ciao

cosi come per le variabili vale anche per le funzioni:

Codice: Seleziona tutto

var myjsonvar = { x:3, y:'ciao', z: function() { return 3.33; } };
> console.log(myjsonvar.z);
[Function]
> console.log(myjsonvar.z());
3.33

e' possibile anche assegnare dinamicamente un'attributo ad un oggetto se esiste

Codice: Seleziona tutto

myjsonvar.t = 7;
> console.log(myjsonvar);
{ x:3, y: 'ciao', z: [Function], t: 7 }

Queste informazioni in realtà sono sbagliate e fuorvianti. Stai confondendo Object Literals e JSON che sono due cose differenti. Il primo, quello che hai spiegato tu, è un modo per creare e descrivere oggetti in maniera diretta dove si trattano gli oggetti come array associativi o mapped.
JSON come dice il nomne è un Notation, ovvero una convenzione per rappresentare dati. La convenzione è descritta nel link che ho riportato sopra.
Perché faccio questa distinzione? Perche i due formati (object literals e JSON) non sono intercambiabili. Mentre gli Object Literals possono essere correttamente espressi in JSON non è vero viceversa. In JSON ogni chiave non numerica deve essere racchiusa tra apici, cosa invece non obblgatoria per gli Object Literal.

[SuperStep]

hai ragione,

correggo la dicitura inserendo il corrispettivo json

per la prima

Codice: Seleziona tutto

var myjsonvar = {};

ci siamo,

per le successive:

Codice: Seleziona tutto

var myjsonvar = { "x":  "3"};

Codice: Seleziona tutto

var myjsonvar = { "x":  "3", "y": "ciao"};

come ha detto zoff, essendo JSON un linguaggio descrittivo e non un linguaggio di programmazione le funzioni non sono ammesse, valgono per gli oggetti Literali.

Aggiungo inoltre che esistono anche gli array

Codice: Seleziona tutto

var myjsonvar = { "x":  "3", z: ["1", "2", "3"]};

[edit] chiedo scusa per la confusione, ho risposto tardi ieri ed ho commesso qualche errore, pero' rileggendo il tutto per il resto ci siamo.

Inoltre JSON Schema e' un linguaggio per la validazione dei campi. Nel quale descrivi quali regole deve rispettare un campo per essere corretto: http://json-schema.org/example1.html

[Eresia]

Per un buon ripasso/studio basilare utilizza http://www.codecademy.com/learn

impari un sacco