Javascript

List of all selected checkboxes into a JSON string

Thursday 11 October 2018, 20:45
simona.marotto@synaptica.info

Add class to checkbox

Create a function to return a JSON string

Here an example

https://jsfiddle.net/a3owjh85/1/

CALCOLATRICE IN JAVASCRIPT

Wednesday 4 January 2017, 20:53
simona.marotto@synaptica.info

Per la creazione di questa calcolatrice iniziamo a definire gli spazi in cui verrano posizionati i nostri elementi (numeri e operazioni) includendoli nei  tag div. Per la visualizzazione delle operazioni utilizziamo un input text. Lo stile(CSS) della calcolatrice è stato definito in linea al file, per comodità può essere integrato con un file esterno col tag import <link rel=”stylesheet” type=”text/css” href=”nome_del_file.css”>posizionato tra il tag head. Questo codice HTML dovrà essere racchiuso nei tag <html><body> inserire il codice html </body></html>.

HTML

JAVASCRIPT

Per far funzionare la calcolatrice utilizziamo delle funzioni chiamate all’ onclick dei pulsanti. Si possono tranquillamente sostituire con delle jQuery della libreria Math.js. Utilizzare funzioni personali permette più vestatilità e personalizzazione.
Per prima cosa creiamo delle variabili globali che useremo nelle varie funzioni.
-Con la prima funzione visualizziamo sull’ input text il numero selezionato sostituendo al parametro “valore” il contenuto selezionato.
-Con la seconda funzione configuriamo il pulsante “C” assegnandogli il valore di stringa vuota, le variabili vengono reinizializzate per resettare le operazioni precedenti.
-Con la terza funzione configuriamo il pulsante “C-1” per poter cancellare l’ultimo numero scritto. Utilizziamo il metodo substring per ritornare una determinata lunghezza del valore scelto.
-Con la quarta funzione configuriamo le operazioni (+ , – , x , ÷ , ! , √ ). Assegnando alla variabile “tipoOp” il valore di “parOp” definiamo l’operazione che vogliamo eseguire assegnando alla funzione successiva il valore dell’operazione.
-Con l’ultima funzione configuriamo il pulsante “=”, all’ onclick eseguirà l’operazione in base al valore del parametro “tipoOp”.

CSS

Con i CSS diamo uno stile alla nostra calcolatrice. Scriviamo quindi nei div la classe corrispondente. Per il contenuto esterno della calcolatrice utilizziamo un id in quanto l’elemento è univoco. Lo stile  è totalmente personalizzabile, basta sostituire i valori alle proprietà della classe. Le dimensioni sono fisse data la dimensione ridotta dell’ oggetto, l’ideale sarebbe sempre creare dei contenuti responsive (utilizzando ad esempio le percentuali invece dei pixel). Sarebbe utile mantenere le proporzioni del contenuto calcolatrice con le celle dei pulsanti per non far uscire il loro contenuto.

JQuery e Prototype

Tuesday 19 July 2011, 14:48
marco.brendolini@makeallweb.it

Mi è capitato ultimamente di dover utilizzare contemporaneamente due fra le più importanti librerie Javascript
all’interno dello stesso progetto: parlo della libreria JQuery e Prototype.

Nel fare questo però ho incontrato non poche difficoltà a motivo del fatto che entrambe le librerie dichiarano la stessa
variabile “$”.

Per questo motivo tutto ciò che veniva referenziato attraverso la variabile $ come ad esempio:

generava un errore di undefined variabile “$” impedendo di fatto al codice javascript di funzionare correttamente.

Per ovviare a questo problema ho trovato una soluzione utilizzando una funzione JQuery con la quale è possibile ridefinire
la variabile “$” con un altro nome:

Dopo aver ridefinito la variabile, questa potrà essere utilizzata in ogni riferimento a funzione JQuery come nell’esempio seguente:

Grazie a questo piccolo accorgimento le due librerie non interferiscono più fra di loro e tutto torna a funzionare correttamente.

Alla prossima

Scoprite cosa possiamo fare per il vostro business
I nostri linguaggi