Riassunti esame di programmazione di C. Gena

I costrutti possono essere:

if: Questo costrutto consente di scegliere se eseguire o meno alcune istruzioni (blocco) in

• base al valore booleano assunto da una certa espressione condizionale

else: Questo costrutto consente di scegliere quali istruzioni o blocchi di istruzioni eseguire in

• base al valore booleano assunto da una certa espressione condizionale

else if: Questo costrutto consente di scegliere tra più di due istruzioni o blocchi di istruzioni da

• eseguire in base al valore booleano assunto da una certa espressione

3 switch: E' un'alternativa alla selezione nidificata e si usa quando è necessario eseguire

• operazioni legate a valori precisi. Mediante la selezione multipla si possono porre una serie di

condizioni da valutare in modo sequenziale.

switch (n) { case value1: istruzioni;

break;

case value2: istruzioni;

break;

…

default [Se la variabile non ha nessuno dei valori sopra allora esegui

le istruzioni e poi fermati]

istruzioni;

break;}

while: (precondizionata) Questo costrutto viene utilizzato quando un blocco di istruzioni deve

• essere eseguito più volte, ma non è possibile sapere a priori quante.

do: (postcondizionata) Questo costrutto viene utilizzato quando un blocco di istruzioni deve

• essere eseguito più volte, ma non è possibile sapere a priori quante. A differenza

dell’iterazione precondizionata, esegue sempre almeno una volta il ciclo, anche se la

condizione è falsa nella prima iterazione.

do {istruzione 1;

istruzione 2;

…

istruzione n;}

while (condizione)

for: (enumerativa) Ripete un numero di volte prefissato un certo numero di istruzioni

• for…in: Il ciclo for..in permette di fare un ciclo per un array, determinando automaticamente il

• numero di ripetizioni in base agli elementi degli array.

for (i in variabile){document.write(variabile[i]);}

Break e continue sono due istruzioni che offrono maggior controllo sui cicli al programmatore:

Break interrompe l’esecuzione di un ciclo facendo continuare il programma dalla prima

istruzione al di fuori del blocco in cui e’ stato immesso. Continue interrompe il ciclo in corso ma

non esce dal blocco in cui e’ inserito, passando al valore seguente.

Le proprietà degli array sono:

mio_array.length: per impostare o leggere la lunghezza dell'array

• mio_array.sort(): per ordinare gli elementi di un array

• mio_array.concat(altro_array): per concatenare due array (il parametro di concat deve

• essere il nome dell’array da concatenare a quello su cui viene richiamato il metodo). E’

possibile concatenare direttamente degli elementi.

Una funzione è un blocco di istruzioni al quale viene associato un identificatore (etichetta).

Il DOM possiede le seguenti collections, che sono le più diffuse (le considera come array):

forms[ ]

• links[ ]

• images[ ]

• anchors [ ]

•

A differenza dell’oggetto window, a cui ci si può riferire anche omettendo l’oggetto (es. alert(“bla

bla”); per invocare metodi e proprietà di document è necessario utilizzare la seguente sintassi:

document.metodo() (es. document.write(…)) document.proprietà (es. document.title)

Per accedere agli elementi del DOM, si può fare tramite:

4 ID (document.getElementById(“id”))

• nome (document.nome.campoId.value(“value”))

• tag HTML (document.getElementsByTagName(“p”)[0])

• classe (document.getElementsByClassName(class))

•

Per “recuperare” o modificare il contenuto di un elemento si usa la proprietà innerHTML. Per

modificare lo stile di un elemento html invece:

document.getElementById(id).style.proprietà = nuovo valore

document.getElementById(“paragrafo”).style.color=“blue”

Per modificare il valore degli attributi:

document.getElementById(id).attributo = nuovo valore

document.getElementById(“immagine”).src=”luna.jpg”;

Per ogni immagine all’interno di un file HTML il browser crea un’istanza di un oggetto image le

cui proprietà sono: document.images[0].src

document.images[0].name

document.images[0].width

document.images[0].height

L'oggetto window è l’oggetto principale della gerarchia degli oggetti e rappresenta l’area di

visualizzazione della pagina html che contiene lo script (la finestra del browser):

window.alert()

window.prompt()

window.confirm()

window.open(‘url','nome finestra','caratteristiche finestra’);

window.close()

window.print()

Le proprietà window più usate sono: window.status

window.defaultStatus

window.opener restituisce un riferimento alla finestra che ha aperto quella corrente

window.closed quando si chiude una finestra, la sua proprietà closed viene messa a true

window.location: window.location.hostname

window.location.href

window.location.pathname

window.location.protocol

window.location.port

window.location.assign()

viene usato per caricare un nuovo documento, quindi cambiare pagina

Le proprietà più usate dell'oggetto navigator sono:

appVersion: versione del browser

userAgent: nome del browser

language: lingua del browser

plugins: array dei plugin installati sul sitema

platform: sistema operativo

cookieEnabled: specifica se i cookie sono accettati

In JS è possibile eseguire del codice temporizzandolo con due metodi:

SetInterval(): permette di specificare ogni quanto tempo deve essere eseguita una specifica

• istruzione. L'intervallo è espresso in millisecondi (1 secondo = 1000 millisecondi)

window.setInterval(function(){nome_funzione()},millisecondi);

es. window.setInterval(function(){conta(num1,num2)},2000);

5 SetTimeout(): permette di specificare dopo quanto tempo deve essere eseguita una specifica

• istruzione (in millisecondi). In questo caso l'istruzione non viene ripetuta.

window.setTimeout(function(){nome_funzione()},millisecondi);

es. window.setTimeout(function(){alert(“Ciao”)},5000);

L’oggetto form ha le seguenti proprietà:

document.forms[].length

document.forms[].action

document.forms[].method

document.forms[].encoding

document.forms[].name

document.forms[].target

document.forms[].elements[] è a sua volta un array con tante celle quanti sono gli elementi del modulo

-

jQuery è una libreria di Javascript il cui obiettivo principale è quello di rendere più semplice e

veloce l'utilizzo di JS sul proprio sito.

La funzione jQuery non viene quasi mai indicata esplicitamente. Si utilizza l'alias $. Prima

bisogna richiamare la libreria jQuery:

dal sito, si scarica la libreria presente in diverse versioni (compressa,estesa,min/compatta/

• ridotta) e una volta scaricata si va a richiamarla nell’head con il tag “<script src=“nome file

libreria.js”></script>;

CDN, siti che permettono di linkarli puntando all’url dove ospitano le librerie di jQuery.

• Funziona solo se la macchina in quel momento è collegata alla rete.

Le istruzioni jQuery vengono inserite in un evento che corrisponde all'evento JS body.onload,

per evitare che il codice venga eseguito prima del caricamento della pagina:

$(document).ready(function(){

...istruzioni jQuery...

})

This is to prevent any jQuery code from running before the document is finished loading (is

ready). La sintassi di jQuery permette di selezionare facilmente un elemento HTML ed effettuare

azioni su di esso. $(selettore). metodo();

Il selettore indica l'elemento HTML (secondo la sintassi css), il metodo indica le operazioni da

compiere sull’elemento.

Tutte le istruzioni vanno inserite in una determinata sintassi:

// $("p") -> interviene sul paragrafo

// $("#par") -> interviene su un id

// $(".par") -> interviene su una classe

// $("p.par") -> interviene su elementi di una specifica classe

// $("*") -> seleziona tutti gli elementi

// $(this) -> sul singolo elemento [esempio paragrafo hide]

// $(".miaclasse,#mioId,#mioMenu li") -> seleziona diversi elementi

//$("#menu > li") --> seleziona solo gli elementi direttamente discendenti. senza il ">" seleziona

tutto

// $("label + input") // seleziona tutti i tag input preceduti da un label

// $(#prev ~ div) // seleziona i div preceduti da un elementi id prev

// $(:button) -> :button, :checkbox, :input, :password, etc.

// filtri per stato: :animated, :checked, etc.

// div:contains(‘ciao’)

Per associare un evento ad un selettore:

6 $( “#pulsante”). click(function() { })

Gli eventi sono praticamente gli stessi di JavaScript:

click

dblclick

mouseEnter(corrisponde al mouseOver)

mouseLeave(corrisponde al mouseOut)

keypress

keydown

keyup

change

blur

focus

load

resize

scroll

jQuery rende disponibili dei metodi per settare/recuperare il contenuto di un elemento HTML.

Esistono 3 metodi principali:

text(): setta o restituisce il contenuto testuale degli elementi selezionati

• html(): setta o restituisce il contenuto degli elementi selezionati (incluso il markup HTML)

• val(): setta o restituisce il valore dei campi di un form

•

Il metodo che restituisce/setta il valore di un attributo è attr(). Se si vuole ottenere il valore di

un attributo si utilizza la seguente sintassi:

$(“selettore”).attr(“nome_attributo”);

Es. $(“#url”).attr(“href”);

Per un singolo attributo:

$(“selettore”).attr(“nome_attributo”,”valore_attributo”);

Es. $(“#url”).attr(“href”,”http://www.di.unito.it”);

Per più attributi: $(“selettore”).attr({“nome_attributo”:”valore_attributo”,

“nome_attributo”:”valore_attributo”, ....});

Es. $(“#url”).attr({ “href”:”http://www.di.unito.it”,

“title”:”sito università”});

E' possibile aggiungere del contenuto HTML mediante 4 metodi:

append(): inserisce il contenuto alla fine dell'elemento selezionato

• prepend(): inserisce il contenuto all'inizio dell'elemento selezionato

• after(): inserisce il contenuto dopo l'elemento selezionato

• before(): inserisce il contenuto prima dell'elemento selezionato

•

Due metodi per rimuovere degli elementi con jQuery:

remove(): rimuove l'elemento selezionato e i suoi figli

• empty(): rimuove i figli dell'elemento selezionato (non l'elemen