Web Design I

INTRODUZIONE A JAVASCRIPT

CARLO FRINOLLI

email: carlo.frinolli@nois3.it

fb: www.facebook.com/carlo.frinolli

Cos’è JavaScript


“JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.”

E comunque l'avreste dovuto capire da Baku :P

Oggetti


Ogni cosa in JavaScript è o un valore primitivo o un oggetto. Gli oggetti sono entità dotate di unicità (sono uguali solo a sé stessi) e che associano nomi di proprietà a valori. Ciò significa che un oggetto è un vettore associativo simile agli hash in Perl e Ruby, o ai dizionari in Python, PostScript e Smalltalk.

Il nome della proprietà di un oggetto sono chiavi stringa: obj.x = 10 e obj['x'] = 10 sono equivalenti ma la notazione obj.x è molto più elegante.

Perché è tanto importante


L’interfaccia di Firefox, e anche quella di Chrome, usano pesantemente JS come linguaggio di programmazione per renderizzare le parti della finestra.

È il linguaggio principe di interazione con il DOM.



No. 

JavaScript non è novità.

Piccola storia


“Il cambio di nome da LiveScript a JavaScript si ebbe più o meno nel periodo in cui Netscape stava includendo il supporto per la tecnologia Java nel suo browser Netscape Navigator. La scelta del nome si rivelò fonte di grande confusione. Non c'è una vera relazione tra Java e JavaScript; le loro somiglianze sono soprattutto nella sintassi (derivata in entrambi i casi dal linguaggio C); le loro semantiche sono piuttosto diverse, e in particolare i loro object model non hanno relazione e sono ampiamente incompatibili...

Piccola storia pt.2



Dato il successo di JavaScript come linguaggio per arricchire le pagine web, Microsoft sviluppò un linguaggio compatibile, conosciuto come JScript. La necessità di specifiche comuni fu alla base dello standard ECMA 262 per ECMAScript, di cui sono state pubblicate tre edizioni da quando il lavoro iniziò, nel novembre 1996.” (fonte Wikipedia)

Perché JS diventa popolare?


Come tutti i linguaggi interpretati client-side JS dipende fortemente dalle capacità di calcolo dei client, appunto.
Questo significa che un uso intensivo di JS nelle pagine e/o applicazioni web fino a qualche anno fa (piattaforma Windows e Internet Explorer 6/7) implicava un "blocco" del browser o del sistema tutto quando andava peggio.

Perciò gli sviluppatori hanno finora usato poco JS.
Le ultime versioni dei browser moderni e i sistemi di calcolo attuali, sono di gran lunga più potenti, ottimizzati e performanti di qualunque macchina degli scorsi anni (inclusi gli smartphone!)

Javascript le basi


  • Stringhe
  • Variabili
  • Operatori
  • Flussi condizionali (if then else) 
  • Cicli di iterazione (for, while, )
  • Funzioni

Variabili


Per permettervi di “storare” i dati in modo da poter essere riutilizzati in seguito, si utilizza il concetto di variabili.

var nomeVariabile;
nomeVariabile = “VALORE”;

è un’operazione (attraverso l’operatore =) che assegna il valore stringa “VALORE” alla variabile nome\Variabile.

Metodi?


Che differenza c'è tra metodi e funzioni? In effetti non c'è nessuna differenza sostanziale, se non che un metodo è una funzione che si associa a un determinato oggetto, mentre una funzione non ha un’associazione implicita.

In aggiunta esistono alcuni metodi propri dei browser stessi per interagire con le pagine web e la navigazione
history.back();
altro non è che applicare la funzione back() all’oggetto history.

Funzioni queste sconosciute?

Le funzioni sono strutture sintattiche utili a riutilizzare del codice più volte all’interno di uno script senza doverlo ripetere.
function nomeFunzione() {
  // qui il nostro codice
}
che viene richiamata con
nomeFunzione();
Le funzioni possono avere dei parametri
function nomeFunzione(par1, par2) {
  alert(par1);
  alert(par2);
}

Operatori di confronto...


Affinché si possa utilizzare compiutamente il flusso if then else, è necessario introdurre gli operatori di confronto per le condizioni.
> < = <= >= != ==
sono abbastanza ovvi.

L’operatore ! ha la proprietà di essere la negazione del valore dell’espressione booleana.

Il flusso del programma


If then else!



if (condizione) {
  ...
  istruzioni
} else {
 ...
  istruzioni
}

if then else if


if (condizione) {
  ...
  istruzioni
} else if (condizione2) {
 ...
  istruzioni
} then {
 ...
  istruzioni
}

gli array

Se vi immaginate di avere un contenitore ordinato di variabili accessibili da un etichetta o un indice di posizione non siete andati distanti dal concetto di ARRAY.
La modalità di dichiarazione di un array in js è 
var casellario = [];
A questo punto si possono associare dei valori a certi indici.
casellario[0] = “Primo”;
casellario[1] = “Secondo”;
È anche possibile assegnare direttamente i valori degli indici
var casellario = [“Primo”, “Secondo”, “Terzo”, “Quarto”];

Diversi tipi di array...


Si possono avere quindi sia array numerici, sia di stringhe che misti.

var arrayNumerico = [1,2,3,4,5,6];
var arrayStringhe = [“Primo”, “Secondo”, “Terzo”, “Quarto”];
var arrayMisto = [“Primo”, “Secondo”, “Terzo”, “Quarto”, 23];

E quanto sei lungo?


Ci sono tutta una serie di casi per i quali non è possibile sapere a priori, o ricordarsi, quanti sono gli elementi storati dentro un array, ma ci è comunque necessario sapere qual è l’ultimo o quant’è la lunghezza dell’array.
Per questo esiste una proprietà intrinseca degli array
var arrayNumerico = [1,2,3,4,5,6];
var totale = arrayNumerico.length;
Qual è il risultato di questa proprietà? :)

E qual è il risultato di 
alert(arrayNumerico(totale));

Operatori e stringhe

Anche per le stringhe alcuni operatori hanno un significato.
var completa = “com” + “pleta”;
avrà come risultato “completa”.
Inoltre sarà possibile giustappore delle stringhe. Ad esempio:
var nome = “Mario Rossi”;
var frase = “il mio nome è “ + nome;
Sommando una stringa a un numero il risultato sarà una stringa: infatti il numero sarà trasformato in una stringa.

Stringhe

Come abbiamo accennato prima rispetto ai diversi tipi di dato, esiste il tipo di dato stringa.
var stringa =”questa è una stringa”;
Il senso è che una variabile può assumere un valore pari alla sequenza di caratteri lunghi a piacere purché racchiuse da una coppia di apici (doppi o singoli) bilanciati.
È chiaro che è possibile usare apici per virgolettare parole o frasi, così come siamo abituati nella lingua, con l’accortezza di dover escapare gli apici stessi.
var stringa =”questa è una ‘stringa’”;
var stringa =”questa è una \”stringa\””;
var stringa =’questa è una \’stringa\’’;

Tipizzazione


Javascript è un linguaggio di tipizzazione blanda.
Questo significa che non è rigido sul contenuto che assume una variabile, né è troppo schizzinoso.
È quindi possibile avere

var nomeVariabile = 1;
nomeVariabile = “stringa”;
nomeVariabile = -2.33;

Operazioni

È sicuramente possibile effettuare operazioni matematiche più o meno complesse nella fase di assagnazione di valore alle variabili.

Il senso è chiaramente, quello di assegnare alla variabile il risultato dell’operazione stessa.
var somma = 4 + 6;
var sottrazione = 10-3;
Questo principio vale anche nel caso di assegnazione di valore alle variabili con operazioni tra altre variabili.
var somma = semisomma + 6;

Variabili di appoggio

Molto spesso è necessario utilizzare delle variabili di appoggio per contare le iterazioni o le volte in cui succede una certa cosa.
var anni = 26;
anni = anni + 1;
che può essere abbreviato con
anni += 1;
Ancora più compatto è scrivere
anni++;

var++ o ++var?

L’operatore ++ ha anche la peculiarità di cambiare il valore della variabile se applicato prima o dopo di essa.
++anni; è diverso da anni++;
Ovvero: se applicato prima il valore di anni è incrementato prima della lettura della variabile. Mentre se viene applicato dopo questo succede dopo la lettura.
var anni = 26;
var anniCopia = anni++;
alert(anniCopia);
invece 
var anniCopia = ++anni;
alert(anniCopia);
Lo stesso vale, ovviamente nel caso di --



IL DOM

Let the fun begin.

JS e DOM


Dal momento che DOM sta per Document Object Model, possiamo già sapere che questo è il terreno perfetto per usare JS e manipolarlo.

Infatti tutte le interazioni dei siti web moderni (siano esse lightboxes, sliders, popup, tooltip etc.) che prevedano l’uso di JS prevedono in qualche modo la manipolazione del DOM o l’assegnazione dinamica di CSS class al codice HTML.

Selezionare elementi DOM


document.getElementById(‘nomeid’);
document.getElementByTagname(‘tagname’);
analizziamo attentamente queste due righe di codice. Qual è il loro significato?

Esercizio


Individuate l’elemento del DOM della prossima slide che è selezionato qui

document.getElementById(‘content’);



jQuery

please welcome the most used

JS framework in the world.

Cos'è



jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.   It was released in January 2006 at BarCamp NYC by John Resig.


It is currently developed by a team of developers led by Dave Methvin. Used by over 65% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.



Cosa fa

jQuery includes the following features:


  • DOM element selections using the multi-browser open source selector engine Sizzle, a spin-off of the jQuery project
  • DOM traversal and modification (including support for CSS 1–3)
  • DOM manipulation based on CSS selectors that uses node elements name and node elements attributes (id and class) as criteria to build selectors
  • Events
  • Effects and animations

E poi

... continua


  • AJAX
  • JSON parsing
  • Extensibility through plug-ins
  • Utilities - such as user agent information, feature detection
  • Compatibility methods that are natively available in modern browsers but need fall backs for older ones - For example the inArray() and each() functions.
  • Multi-browser (not to be confused with cross-browser) support.




Ok. Ma in pratica?

Gli orbit di Foundation, l'off-canvas...

Un caso d'uso


Il menu dropdown che abbiamo realizzato in solo CSS,

aveva un difetto preciso, che lo rende inutilizzabile

nelle interazioni complesse.



Perché?

Le liste a scomparsa sono dentro il mark-up dell'area hover.

Se tutto fosse fatto così, sarebbe un delirio di posizionamenti

Selezionare elementi DOM


Se il nostro menu dropdown sapeva già dove pescare

gli elementi da far vedere sull'hover della voce padre 

perché era materialmente dentro in termini di markup,

ci servirebbe un meccanismo rapido e compatto per

selezionare nodi DOM all'interno di una pagina Web.


in JavaScript per poterlo selezionare si deve scrivere

 getElementByID('id-del-nodo');

non esiste getElementByClass nativamente in JavaScript,

va implementato di volta in volta.

La sintassi jQuery


 $('#id-del-nodo')
VS
getElementById('id-del-nodo');


È un vantaggio?

In termini di caratteri scritti, sì.

In termini di complessità degli script, anche.

Cosa comporta?

L'inclusione di alcune decine di KB scritti da altri.

Beccati sta classe


 $('.nome-della-class');


Ma cos'è il risultato di questa operazione?

Il risultato è un Oggetto JavaScript.

Su cui potete applicare Metodi.

E sopratutto, cos'è sto $ che appare all'inizio?

È una funzione definita dentro jQuery.
D'altronde $ è un carattere no?

$

È una funzione definita dentro jquery.js

function $(arg1, arg2, arg3) {
// Implementazione
}

e come tale se includete lo script è a disposizione delle
vostre operazioni, altrimenti vi restituirà errore.


Il 90% delle volte in cui vi restituirà errore non l'avete incluso correttamente.

WD I - Introduzione a JavaScript

By Carlo Frinolli

Made with Slides.com

WD I - Introduzione a JavaScript

  • 1,162

More from Carlo Frinolli