JavaScript

Dom e identificatori

ID oggetti identificatore univoco elementi del DOM  Name oggetti usato per inviare dati al server. Non è univoco.

Browser API

Window

_Ospite di base: Browser _ oggetto che contiene tutto l’HTML.

window.open ( “ “ )- – apre in una nuova scheda

window.location.href = ( “ “ )- – apre sulla pagina corrente: innerHeight – innerWidth Dimensioni finestra (px).

Screen

- Width / Height : dimensioni totali schermo

- availWidth / availHeight : dimensioni area visibile.

Finestre di dialogo

• Alert(“ “)  messageBox OK only.
• Confirm(“ “)  messageBox Accetta/Annulla //restituisce un valore booleano.
• Prompt(“ “) inputBox //restituisce il valore inserito.

Open

opz.URL pagina, opz.Nome da attr. alla pag., opz.Modo di apertura altri Parametri, _blank  apre in una nuova finestra; _parent  apre al posto della finestra genitore; _self  si sostituisce alla finestra corrente; _top  si sostituisce a tutto; Stringa dei valori divisi da virgola  “ menubar = no, toolbar = no, status = yes, height = _px, width = _px, top = _px…..”

Cronologia e navigazione

History: cronologia della navigazione con quella finestra; window.history .length: N° delle pagine visitate;.forward() / .back(): muoversi avanti e dietro per le pagine;.go( -3 ): spostarsi direttamente su una delle pagine visitate (andrà sulla quart’ultima pagina).

Location

URL corrente window.location .href: http://www.html.it:8080/articoli/articolo.php?id=123#paragrafo. protocol: http:. hostname: www.html.it. host: www.html.it:8080. origin: http:// www.html.it:8080. port: 8080. pathname: /articoli/articolo.php. search: ?id=123. hash: #paragrafo. reload(): ricaricare la pagina; reload( ) ricarica dalla cache reload(true)ricarica dal server. replace(): la nuova pagina si sostituisce anche nella history.

Esempio

http://www.html.it/articoli/articolo.php?id=123&x=567

Function getPar()

function getPar() {
    var ParamData = [];
    var param = {};
    var p;
    if (window.location.search.length > 0) {
        ParamData = window.location.search.split(“?”)[1].split(“&”);
        for (var i = 0; i < ParamData.length; i++) {
            p = ParamData[i].split(“=”);
            param[p[0]] = p[1];
        }
    }
    return param;
}

Navigatore e informazioni sui browser

Navigator: informazioni su BROWSER ed S.O. usati

• window.navigator .appCodeName: restituisce un valore costante: “Mozilla”.
• .product: “GECKO”.
• .appName: “Netscape” (firefox, chrome, safari) “Microsoft Internet Explorer” “Opera”.
• .appVersion: descrittiva per ogni browser.
• .featureDetection: ...
• .cookieEnabled: true/false.
• .online: true/false (se il browser risulta online).
• .language: codice della lingua impostata dall’utente.

Manipolazione del DOM

Selettori

1. Document: html caricato nella pagina corrente
2. document.getElementById ( “ID dell'oggetto” )
3. document.getElementsByTagName ( “h1 oppure li oppure p” )
4. document.getElementsByName ( “attr.Name” )
5. document.getElementsByClassName ( “nomeClasse” )
6. document.querySelector ( “sel.CSS” ) // prende solo il primo che trova
7. document.querySelectorAll ( “sel.CSS“ ) // prende tutti quelli con quelle caratteristiche

Combinazione con i parent-child

Si possono usare anche in document.querySelector ( “li a.speciale” ) // prendi A con classe Speciale dentro Li

NodeList

• childNodes: nodelist di tutti i nodi figli di quello dato.
• firstChild(): PRIMO figlio di quello dato.
• lastChild(): ULTIMO figlio di quello dato.
• parentNode: nodo genitore di quello dato.
• siblingNodes: nodelist di tutti i nodi fratelli di quello dato.
• nextSibling(): fratello SUCCESSIVO.
• previousSibling(): fratello PRECEDENTE.

Esempio

Trovare l’elenco dei fratelli var ME = document.getElementById(“mainDiv”); var AllSib = ME.parentNode.childNodes; var MYS = []; [].forEach.call (AllSib, function(el) { if (el !== ME) MYS.push (el); }); // per ogni elemento di AllSib, diverso da me, (figli di mio padre) buttali... nell’ARRAY.

Settare gli attributi di un oggetto

Posso usarli per document.querySelector ( “li” ) .style.fontSize = “20px”; document.querySelector ( “li” ) .classList.add ( “nomeNuovaClasse“ ) // se si fa riferimento a proprietà che nel CSS hanno il TRATTINO, in questo caso vanno scritte con il camelCase.

Aggiungere/rimuovere gli elementi del DOM

• document.createElement()
• document.createElement(“img”)
• document.createAttribute(“src”) src.value(“…”).setAttributeNode ( src ) .appendChild ( img ) // associo ATTRIBUTO ad OGGETTO img // appendo l’OGGETTO al GENITORE mainDiv
• document.body.insertBefore( img, mainDiv) // non esiste l’ insertAfter().
• mainDiv.replaceChild ( img, mainDiv.firstChild() ).
• mainDiv.removeChild ( mainDiv.firstCild() ).
• mainDiv.removeAttribute ( “name” ).

Modificare gli elementi del DOM

Sia lettura che scrittura. innerHTML = …; .hasAttribute()   nomeAttr boolean se l’elemento ha l’attributo dato. .hasAttributes()   nomeAttr boolean se l’elemento ha almeno uno degli attributi dati. .getAttribute()  nomeAttr valore dell’attributo dato. .setAttribute()  nomeAttr, valore imposta nuovo valore all’attributo dato.

Possibile aggiungere o modificare gli attributi anche solo con JS:

var img = document.getElementById(“miaImmagine”); img.nuovaProp = “valore”;

Oggetti in JavaScript

Un oggetto in JS può essere definito in vari modi e può contenere, tra i suoi attributi anche FUNZIONI e altri OGGETTI.

Object literal

var persona = { nome : “ Mario ”, cognome : ” Rossi ” } ;

var persona = { nome : “ Mario ”, cognome : ” Rossi ”, indirizzo : { via: “ Garibaldi ”, N° : 15 } };

var persona = { nome : “ Mario ”, cognome : ” Rossi ”, NomeCognome : function (){….} } ;

Definizione a posteriori

var persona = { nome : “ Mario ”, cognome : ” Rossi ” } ; persona.eta = 23; // qualora si usasse il this, esso si riferisce all’oggetto in uso in quel preciso momento.

Costruttore generale

function Persona (nome, cognome) {
    this.nome = nome;
    this.cognome = cognome;
};
var IO = new Persona();
IO.nome = “Mario”;
IO.cognome = “Rossi”;
oppure
var IO = new Persona(“Mario”, “Rossi”);

I prototipi

Qualora dopo aver creato una serie di istanze volessimo aggiungere a tutte un ATTRIBUTO: Persona.prototype.telefono = “069987945”; // lo aggiunge a tutte con questo valore.

Object.onCreate()

Negli argomenti ci vanno gli attributi da associare alla nuova istanza:

var LUI = Object.onCreate(Persona.prototype, {
    nome: { value: “Mario” },
    cognome: { value: “Rossi” }
});
// Persona.prototype associa alla nuova istanza tutti i prototipi creati.

Descrittori

Questo metodo permette di associare dei DESCRIPTORS ai campi:

• Data Descriptors:
  • .writable – può essere modificato o meno.
  • .configurable – può descrittore modificato o proprietà rimossa.
  • .enumerable – la proprietà può essere ciclata.
  • .value – valore della proprietà.
• Access Descriptors: getters and setters
  • .get – si usa per leggere la proprietà.
  • .set – si usa per modificare o settare la proprietà.

Esempio

var LUI = Object.onCreate(Persona.prototype, {
    nome: { value: “Mario”, writable: false, configurable: false },
    cognome: { value: “Rossi”, get: function() { return this.nome + this.cognome; } }
});

Classi

Posso usarle come fossero quelle di JAVA:

class Persona {
    constructor(nome, cognome) {
        this.nome = nome;
        this.cognome = cognome;
        this.email = “”;
        this.indirizzo = “”;
    }
    NomeCompleto() {
        return this.nome + this.cognome;
    }
    set email(value) {
        var emailRegExp = // formato stdmail
        if (emailRegExp.test(value)) {
            this.email = value;
        } else {
            console.log(“Email errata!”);
        }
    }
}

Creare un’istanza programmatore

Partendo da sempre come in JAVA, posso PERSONA:

class Programmatore extends Persona {
    constructor(nome, cognome) {
        super(nome, cognome);
        this.linguaggi = [];
    }
}

Reflect

Reflect.has( ) booleano  oggetto, “attributo” (anche - verifica esistenza di una proprietà/Prototipi).

Reflect.ownKeys( )  oggetto - elenco proprietà NON EREDITATE.

Reflect.defineProperty( )  oggetto, “attributo” - gestire una proprietà { value: “Luigi”, writable: true, enumerable: false }.

Reflect.get( )  oggetto, “attributo” - legge la proprietà.

Reflect.set( )  oggetto, “attributo”, “nuovoVal” - scrive la proprietà.

Reflect.deleteProperty( )  oggetto, “attributo” - elimina la proprietà.

Prototipi Reflect

Reflect.getPrototypeOf( )  oggetto - elenco dei prototipi dell’oggetto.

Reflect.setPrototypeOf( )  prototipo, oggetto, “nuovoVal” - scrive il prototipo.

Reflect.preventExtensions( )  oggetto - impedisce estensioni.

Reflect.isExtensible( ) booleano  oggetto - verifica estensibilità.

Funzioni Reflect

Reflect.apply( )  nomeFunzione, parametri - applicare una funzione var b= Reflect.apply ( somma, [4,5] ).

Reflect.construct( )  nomeCostruttore, parametri - scrive il prototipo Function Auto(mod, col) { return Reflect.construct (Automobile, [“Classe A”, “Blu”]) }

Leggere il valore di un controllo

In genere, per leggere il valore contenuto in un elemento del form si usa la proprietà .value. Tuttavia ci sono alcune eccezioni:

Dropdown menu - combobox

Es. <select name=” selProvincia ”>

• <option value=”RM”> Roma </option>
• <option value=”NA”> Napoli </option>
• <option value=”TO”> Torino </option>
• <option value=”MI”> Milano </option>

</select> var SelI = document.forms.Myform.SelProvincia.selectedIndex; VALUE accederei alla sola sigla; per accedere al testo collegato  var ITEM; if (SelI > -1) { ITEM = document.forms.Myform.selProvincia.options[SelI] ; }