JavaScript nel browser

BOM- Browser Object Model - Window Object

Funzioni per dialog

API Window

oggetto JS descrizione
location array oggetto che rappresenta la url attuale.
history back - forward - go
navigator
screen fornisce informazione relativa al browser e alla risoluzione.

DOM

API DOM

Selezionare elementi - Selettori (I)

Sono disponibili molti metodi di selezione di elementi.

Selettori (II)

Addizionalmente ci sono selettori di tipo CSS.

Attraversare il DOM - Traversing

Una volta stabilito un punto di partenza, si può percorrere la ramificazione

Tipi di nodi

i nodi hanno alcune proprietà che si possono consultare, per vederne le caratteristiche.

Traversing (II)

Manipolare elementi del DOM

Una volta visti i metodi per selezione e introspezione, vediamo come manipolare il DOM.

Attributi

Sono disponibili metodi specifici per l'accesso agli attributi di un elemento.

Contenuti (I)

Sono disponibili metodi per la manipolazione del contenuto.

Contenuti (II)

per accedere al contenuto di un elemento, esistono due metodi

Creazione di nodi

Sono disponibili tre metodi per la creazione di nuovi nodi.

Manipolazione di elementi

Ci sono metodi per la manipolazione di nodi dell'albero.

Posizionamento (I)

Sono disponibili vari metodi utili per conoscere le posizioni degli elementi, E le loro dimensioni.

Gestione dei Form HTML

Stili

Eventi

Un evento è qualcosa che scatena una azione specifica nel browser.

Un evento accade quando:

Cattura di eventi

Sono disponibili due metodi per registrare eventi.

b.onclick=function(){console.log('asdf')};
b.addEventListener('click',function(){
    console.log('asd')
},false);

Tipologia di Eventi Javascript

EVENTO DESCRIZIONE
blur, focus Inviati ad un elemento quando rispettivamente perde il focus od ottiene il focus.
focusin, focusout Inviato ad un elemento se esso o un suo discendente rispettivamente ottiene o perde il focus
load Inviato ad un elemento quando esso e tutti i suo discendenti sono stati completamente caricati
resize Inviato all'elemento windows quando la finestra del browser ha cambiato dimensioni
scroll Inviato ad un elemento quando l'utente ha effettuato lo scroll in un differente punto dell'elemento stesso
unload Inviato all'oggetto window quando l'utente naviga fuori dalla pagina
(chiusura del browser, click su un link, a volte anche il semplice refresh)
click, dbclick Inviati ad un elemento quando il mouse è sopra di esso e viene effettuato un click o un doppio click
mousedown, mouseup Inviati ad un elemento quando il mouse è sopra di esso e viene rispettivamente premuto o rilasciato il bottone del mouse
mouseover, mouseout, mousemove Eventi inviati all'elemento in cui il puntatore del mouse entra (mouseover), in cui esce (mouseout) o in cui si sta mouvendo (mousemove)
keydown,keypress, keyup Eventi inviati quando un tasto viene premuto (keydown) è stato rilasciato (keyup) o è stato premuto (keypress)
select Inviato ad un elemento quando viene selezionato del test all'interno di esso.
change Evento inviato ad un elemento che ha cambiato il proprio valore.
submit Evento inviato quando l'utente tenta di fare il submit di un form

Maggiori informazioni: http://www.quirksmode.org/js/events_mouse.html

Ajax

AJAX (Asynchronous JavaScript And XML), è una tecnica di sviluppo web per creare applicazioni interattive. Con AJAX è possibile realizzare cambi sulle pagine senza necesità di recaricarle completamente, migliorando la interattività, velocità e usabilità nelle applicazioni.

Fonte: https://en.wikipedia.org/wiki/AJAX

Esempio

var ajax=new XMLHttpRequest()
ajax.open('get',url)
ajax.onload=function(){}
ajax.send()

JSON

Oggetti JS e oggetti JSON

Per esempio

{"menu": {
        "id": "file",
        "value": "File",
        "popup": {
            "menuitem": [
                {"value": "New", "onclick": "CreateNew()"},
                {"value": "Open", "onclick": "Open()"},
                {"value": "Close", "onclick": "Close()"}
            ]
        }
    }
}

Hoisting

Esempi

var a='asdf';
(function b(){
    console.log(a)
})()// asdf
var a='asdf';
(function b(){
    console.log(a)
    var a='qwer'
})()// undefined