JavaScripts

Premessa sui JavaScript

Per chi non sa cosa sono, si tratta di programmini (che i programmatori chiamano script per differenziarli dai programmi creati con linguaggi di programmazione più complessi) che consentono di integrare direttamente all'interno delle pagine HTML alcune funzionalità aggiuntive (testo che scorre, orologio, banner a rotazione, ecc.). I JavaScript sono compatibili pressoché con tutti i browser e quindi non creano particolari difficoltà di compatibilità. È comunque una buona regola inserire sempre il codice alternativo NOSCRIPT per eventuali browser non abilitati. All'interno di tale tag andrà possibilmente inserito del codice HTML alternativo (quindi testo, immagini o altri elementi). C'è anche un tastino sulla barra Expert->Scripts->No Script. Essendo i JavaScript incorporati nelle pagine, non c'è bisogno di avere alcun permesso particolare sul server (come accade per i CGI o per pagine ASP e PHP). Essi vengono scaricati sul computer dell'utente insieme alla pagina da visualizzare e poi eseguiti.

Utilizzare i JavaScript già pronti

1st Page, oltre ad essere un programma gratuito, viene fornito con più di 450 JavaScript già pronti all'uso, catalogati e commentati. È così possibile sbizzarrirsi sia se non si ha la pazienza di imparare il linguaggio, sia se si è a corto di fantasia, sia per utilizzarli come strumento didattico, sia infine per prendere spunto da alcuni di essi per poi migliorarli.

Note sul Copyright

Per la questione del Copyright sarebbe bene chiedere un consiglio agli esperti che scrivono spesso articoli al riguardo proprio su questo sito, io posso solo dirvi che sulla finestra di scelta script c'è la seguente scritta: "EvrSoft Istantz Scripts © Copyright EvrSoft - All rights reserved". Prima di dare l'OK per l'inserimento dello script veniamo "incoraggiati" ad inserire un logo che indica che il nostro sito è stato "enchanted" (stregato) dalla tecnologia Iscript di EvrSoft. Comunque è più semplice non inserire il logo che inserirlo. Infine, dopo aver inserito uno script, all'inizio dello stesso appare come commento un invito a prelevare altri script gratuiti dal loro sito e l'eventuale indicazione del copyright dell'autore.

Bottoncini di inserimento veloce JavaScript

Abbiamo già visto l'inserimento di un JavaScript: si tratta del RollOver Image. facendo un giro sulla barra Expert Scripts, notiamo la presenza di altri script che possono essere inseriti con un solo click: si tratta di quelli che sono stati da loro considerati tra i più utili o i più richiesti e sono anche piuttosto brevi. Vediamoli:
JavaScript Open Window - Apertura di una finestra
Questo script, richiamabile tramite la barra Expert: Scripts->Javascript Open Window, permette non solo di aprire una nuova finestra del browser indicando la pagina da caricare, ma anche di definire per la stessa finestra tutta una serie di parametri: TITLE (per la sua utilità vedi TARGET), dimensioni in pixel, visualizzazione o meno dei seguenti elementi del browser:

• BROWSER NAVIGATION BAR: barra di navigazione (tasti avanti, indietro, ecc.);
• MENUS: menu;
• BROWSER SCROLLBARS: barre di scorrimento (un'unica opzione sia per la barra orizzontale che per quella verticale);
• MAKE WINDOW REsizeBLE: possibilità da parte dell'utente di ridimensionare la finestra (ingrandirla o rimpicciolirla);
• LINKS BAR: barra dei collegamenti;
• BROWSER STATUS BAR: barra di stato (la scritta posta solitamente nella parte bassa del browser);
• LOCATION/URL BAR: barra degli indirizzi;
• COPY HISTORY: visualizzazione della cronologia delle pagine già visitate;
• RUN IN FULLSCREEN MODE: apertura della nuova finestra a pieno schermo;

Messaggi di avviso e di conferma

tramite il tasto Scripts->Javascript Alert Dialog viene creato lo script (di ben una riga) che mostra una finestrella con un avvertimento. Il tasto Scripts->Javascript Confirmation Dialog serve invece a mostrare una finestra di conferma (con i tasti SI e NO). In entrambi i casi il testo interno alle virgolette è personalizzabile.

Inserimento testo

Il tasto Scripts->Javascript Write inserisce un comando per l'inserimento di testo all'interno della pagina. A chi non conosce gli script, questo comando può sembrare superfluo in quanto il testo nelle pagine si può inserire direttamente. Ma può essere utile in diversi casi: ad esempio per inserire variabili o risultati di calcoli (ad esempio, come vedremo più avanti, data e ora corrente, o data e ora dell'ultima modifica di un file); oppure può servire per creare una nuova pagina "al volo".
Identificazione I.P.
tramite il tasto Scripts->Javascript IP Detection si ottiene uno script che riconosce il numero I.P. ed il nome host del visitatore e lo visualizza all'interno della pagina. Quindi ogni visitatore vedrà il proprio numero I.P.

JavaScript Wizard

Sempre sulla barra Expert, abbiamo il tasto Scripts->Javascript Wizard che permette la creazione veloce di alcuni JavaScript:

FRAME KILLER

Da usare solo se il nostro sito non ha frames: serve per forzare il caricamento della nostra pagina sull'intera finestra eliminando eventuali frames (a volte le pagine che contengono link ad altri siti usano caricare questi ultimi all'interno di un frame). Anche questo script non presenta particolari complessità. Andiamo ad esaminarlo:
SetTimeOut consente di eseguire un certo comando ad una certa distanza di tempo dal caricamento della pagina. In questo caso il comando impostato è "changePage()" che è il nome della funzione scritta subito dopo ed il tempo di attesa è impostato a 3000 millisecondi (quindi 3 secondi). La funzione ChangePage infine, controlla se ci sono frames e in caso affermativo, ricarica la pagina a schermo intero. "document.location" indica l'indirizzo della pagina corrente (in caso di frames indica l'indirizzo del frame corrente) e "self.parent.location" indica l'indirizzo del "genitore" della pagina caricata nel frame corrente.

BROWSER TYPE

tramite il comando "document.write" già visto su, consente di scrivere una frase definita da noi, seguita da "navigation.appName" (nome del browser in uso) e da "navigation.appVersion" (versione dello stesso).

CURRENT URL

Inserisce l'indirizzo della pagina correntemente visualizzata. Per quanto riguarda il codice provate a vedere voi stessi: se avete seguito bene fin qui, non c'è niente di nuovo.

LAST MODIFIED DATE

Molto utile: scrive la data di ultima modifica della pagina corrente. Così il visitatore sa subito se può aspettarsi qualche novità dall'ultima visita.

DOCUMENT FADER

Crea un effetto di transizione dello sfondo da un colore ad un altro al caricamento della pagina. Basta impostare il colore di partenza, quello di arrivo e la velocità di transizione.

DROP DOWN MENU

Creazione guidata di un menu a tendina per richiamare diverse pagine (o siti). Basta impostare in alto il nome della prima voce (ad es. "Scegli") sulla sinistra il nome da assegnare alle varie voci e sulla destra le url di destinazione.
In questo caso faccio notare ai meno esperti l'utilizzo del bottone all'interno di un form con un'azione associata all'evento ONCLICK:

document.write('<input type="button" value="Go" onclick="go()">');

In pratica quando si preme sul bottone, viene richiamata la funzione di nome "go()".

Aggiunta ai preferiti di Internet Explorer

Lo script in questione è richiamabile tramite menu:
[Scripting->Force IE Bookmarks]
Ricordatevi chiaramente di sostituire l'url ed il titolo con quelli del vostro sito.

Sbizzarrirsi con più di 450 scripts

La libreria di JavaScript che 1st Page mette a disposizione è raggiungibile nei seguenti modi:

1. barra easy: Scripts->Istantz Scripts;
2. menu: [Scripting->Istantz Scripts].

A questo punto... non resta che sbizzarrirsi!!!

Strumenti di creazione JavaScript

Per chi volesse creare i propri JavaScript da zero, sono disponibili alcuni strumenti: il primo lo si trova su:

• Easy: Scripts->Define Script Language;
• Experts: Scripts->Define JavaScript;
• menu: [Scripting->Define Script Language];

Da qui sarà possibile definire il linguaggio (come vedete ce ne sono diversi) ed in caso di JavaScript anche la versione (se non viene indicata si assume come buona la più vecchia e quindi ci si aspetta maggior compatibilità); il tipo di script (anche qui in base al linguaggio) e poi si può scegliere o di richiamare uno script esterno (in caso di JavaScript può essere salvato come file esterno con estensione .js), oppure dopo aver premuto su SCRIPT CONTENT, è possibile inserire lo script direttamente da questa finestra (non è indispensabile inserirlo da qui chiaramente).
Il secondo utile strumento si chiama Script Object tree e mostra una lista completa di tutti i comandi JavaScript e di tutti gli eventi a cui si possono abbinare dei comandi (tra cui avvio di una funzione in qualunque linguaggio supportato, di un'applet Java, esecuzione di un suono, e qualunque altra cosa). Si chiama tree (albero) perché è ordinato in livelli e sottolivelli in modo da facilitare la ricerca e anche la memorizzazione di qualsiasi elemento. Può essere posizionato e ridimensionato a piacere e rimane sempre visibile (finché non si chiude). Può essere richiamato così:

• menu: [Scripting->Script Object tree];
• Expert: Scripts->Script Object tree;

Chiaramente un doppio click su un elemento della lista ne causa l'inserimento sul documento.
Inoltre possono tornare utili alcuni dei bottoncini visti in precedenza.