Guida JavaScript

.::Kharg::. · 12 Giugno 2008

Si sente spesso parlare di JAVASCRIPT come il linguaggio per i programmi su
INTERNET. Ma spesso tra PERL, TCL, PHP, APACHE, script vari e HTML si fa solo
casino!Ecco perchè sono qui.
Vi spiegherò i fondamenti della programmazione degli Javascpript, cioè quei
comandi che, inseriti nel vostro codice HTML rendono il vostro sito più
divertente.
MATERIALE OCCORRENTE:
Solo un browser che regga lo JavaScript. Io consiglio NetScape perchè è lì che
è nato. Infatti questo "lingaggio" è nato dall'interazione di ingenieri della
Netscape e della Sun e si basa ovviamente sullo JAVA (ma dai!).
CONOSCENZE MINIME:
Sicuramente l'HTML. Poi se non volete copiare gli esempi che vi mostro...
proprio a livello terra terra, ma capire come funzionano... un po' di C o C++
non sarebbe male!
Non mi metto qui quindi a spiegare i funzionamenti dei cicli e delle strutture
matematiche. Queste sono identiche al C quindi! STUDIATE!
CURIOSITÀ:
Volete sapere perchè si chiama JAVA? Perchè java è un bel suono. Né + né - di
questo! Sapete come si chiamava prima Oak. Perchè? Perchè era il nome della
quercia davanti all'ufficio di James Gosling, quel pazzo paranoico
programmatore che si è inventato JAVA.
INCOMINCIAMO:
PREMESSA PRIMA: Non bisogna assolutamente confondere gli SCRIPT JAVA con gli
APPLET JAVA! La differenza è totale. Mentre i secondi sono veri e propri
programmi che funzionano su internet, i primi sono solo "giochetti grafici".
PREMESSA DUE: Lo Java, e quindi anche lo JavaScript, è un linguaggio orientato
ad oggetti (OOP), quindi ci saranno oggetti con una determinata gerarchia
delle proprietà particolari.
Queste sono regolate da una struttura particolare che è questa:
Oggetto.proprietà.proprietà
----------------------------
| INDICE: |
----------------------------
| 1 Apertura di una pagina A |
| 2 Apertura di una pagina B |
| 3 Chiusura pagina |
| 4 Immagini e mouse |
| 5 Barra del browser |
| 6 Data e ora |
| 7 Password |
| 8 Menu |
| 9 Cookie |
| 10 Finestre |
| 11 Mouse bloccato |
| 12 Stampare |
----------------------------
SI PARTE:
Partiamo con esempio:
--------INIZIO---------
<HTML>
<HEAD>
<title>Nuova pagina</title>
</HEAD>
<body>
<FORM>
<INPUT TYPE="button" VALUE="Nuova pagina" onClick='window.open("pag.htm");'>
</FORM>
</BODY>
</HTML>
-------FINE---------
Se non capite tutto eccetto la riga <INPUT....> è grave! Vi consiglio di
tudiarvi bene l'HTML!
Se vi sembra tutto chiaro...
ecco la spegazione di quella riga.
Questo già lo dovreste sapere:
INPUT TYPE="button" VALUE="Nuova pagina"
Crea un pulsante (ovviamente se inserito in un <form></form>) con la scritta:
NUOVA PAGINA.
Per quanto riguarda il resto:
onClick='window.open("pag.htm");'
la spiegazione è questa:
- onClick --> regola la modalità di pressione del pulsante, cioè appena il
pulsante è cliccato fai: window.open("pag.htm");
- window.open("pag.htm"); --> Una riga in JAVA. Si può notare il ; finale
tipico di molti linguaggi come il C o il C++.
Non fa altro che aprire una pagina usando il
modulo open. Il modulo è un tipo funzione JAVA
che effettua una operazione. Si può capire che
si parla di modulo quando compaiono le parentesi
(). Sia piene che vuote!
Esiste anche un altro metodo da aprire finestre. Cioè aprirle in un'altra
finestra. Questo si fa attraverso la funzione NewWindow.
---------INIZIO-----------
<HTML>
<HEAD>
<TITLE>Nuova finestra</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function NewWindow() {
nuova=window.open("http://go.to/tankcommandos","NewWindow","Menubar=yes,
toolbar=no,directories=no,menubar=no,scrollbars=no,width=200,height=200");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<input type="button" value="Nuova pagina" onclick='NewWindow();'>
</FORM>
</BODY>
</HTML>
---------FINE-----------
Poi richiamo la funzione attraverso il comando onclick='NewWindow();'.
SEMPLICE NO?
Avete vistro scritte strane vero? Tipo queste:
"Menubar=yes,toolbar=no,directories=no,menubar=no,scrollbars=no,width=200,
height=200"
Queste sono le caratteristiche che si possono dare (o non dare) alla pagina
che verà aperta.
Per chiarirvi le idee ecco una tabelluzza delle caratteristiche che potete
usare:
RICORDO: yes attiva e no disattiva... perchè non capisse!
-----------------------------------------------------------------------
| Menubar=yes/no | barra dei menu del browser |
| Location=yes/no | barra dell’URL del browser |
| Status=yes/no | la barra di stato del browser |
| Scrollbars=yes/no | barre di scorrimento del browser |
| Directories=yes/no | bottoni del browser |
| Toolbar=yes/no | pulsanti della barra degli strumenti |
| Resizeable=yes/no | la possibilità di ridimensionare la finestra |
| Width=X | Larghezza della finestra in pixel |
| Height=X | Altezza della finestra in pixel |
-----------------------------------------------------------------------
Chiudiamo ora le finestr:
<form>
<input type="button" value="Chiudi" name="B1" onclick="window.close()">
</form>
EX CLARO fin qui?
Dovete sapere che si può aprire una finestra anche in un'altro modo. Questo è
crearla all'interno della pagina stessa:
------INIZIO------
<HTML>
<HEAD>
<script language="JavaScript">
function NewWindow()
{
msg=open("","schermo","toolbar=no,directories=no,menubar=no,width=170,height=250,resizable=yes");
msg.document.write("<HEAD><TITLE>PAGINA DI PROVA!</TITLE></HEAD><body>");
msg.document.write("<CENTER><font size=6>HTML.it</font></CENTER><BR>");
msg.document.write("<HR><BR>");
msg.document.write("Che ve ne pare delle potenzialità di questi semplici
Scriptini? Mi ca male non credete!<HR>");
}
</script>
</HEAD>
<body>
<form>
<input type="button" value="Apri" onclick="NewWindow()">
</form>
</body>
</HTML>
-------FINE--------
Tutto cioè si basa sul modulo write(). Semplice no?
Sono talmente tante le cose che è possibile fare con li JAVASCRIPT che non so
quale potrebbe essere il prossimo argomento...
Che ne dite di quelle immagini che appena si passa il mouse sopra, cambiano?
Ecco un esempio:
--------INIZIO--------
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<A HREF="pagina.htm" onMouseover="inactive('immagine');
window.status='immagine'" onMouseout= "active('immagine')">
<IMG NAME="immagine" SRC="immagine1.gif" ALT="immagine" width=100 height=50
border=0>
</A>
</BODY>
</HTML>
-----------FINE------------
Spiegazione... altrimenti impazzite!
Codice dello script ora commentato!


Se la variabile ver è "yes" crea 2 oggetti (2 immagini) e le identifica con
immagine1.gif e immagine2.gif. Tutto si basa sul modulo Image() che è
specifico della creazione di immagini.

Il codice dello script è messo a commento per renderlo invisibile ai browser
che non lo sopportano.

Da notare è:

1 le funzioni active e inactive
2 che il NAME="" dell'immagine deve essere identico allo script.

L'ultima parte dell'esempio da vedere è questo:

<A HREF="pagina.htm" onMouseover="inactive('immagine');
window.status='immagine'" onMouseout= "active('immagine')">

Crea un link ad un'altra pagina e fa partire le operazioni di cambiamento
immagine quando il mouse passa (Richiama inactive() e active()).

<IMG NAME="immagine" SRC="immagine1.gif" ALT="immagine" width=100 height=50
border=0>

Crea realmente l'immagine all'interno del documenti. Importante come ho già
detto il fatto che l'immagine deve avere il NOME! identico a quello dello
script.

Con questo principio si possono fare anche i pulsanti che scendono o simili.

Ecco un altro argomento:
La barra del browser che cambia!

--------INIZIO----------
<HTML>
<HEAD>
<script language="JavaScript">

</script>
</HEAD>
<BODY>
<a href="link.htm" onMouseOver="messaggio('Messaggio sulla status bar');return
true;">link</a>
</BODY>
</HTML>
--------FINE-------------

Vediamo la semplicità di questo script!
Si crea il solito SCRIPT commentato... con 2 funzioni:

function messaggio(txt) {
window.status = txt;
setTimeout("elimina()",500);
}

Questa imposta la scritta sulla barra. Come possiamo vedere c'è (txt) quindi
necessita di un argomento quando verrà richiamata. Questo argomento verrà poi
messo all'interno della barra: window.status = txt;
Aspettato 500 milleesimi di secondo (5 decimi di secondi) fa partire in
automatico la funzione elimina:
function elimina() {
window.status="";
}

Questa disattiva le scritte sulla barra.

Tutto ciò parte quando il mouse si trova sopra un link:
<a href="pagina.htm" onMouseOver="messaggio('Messaggio a nostro
piacimento');return true;">link</a>

Vediamo che quando il mouse si trova sul collegamento parte la funzione
messaggio che come argomento ha: Messaggio a nostro piacimento.

Ho messo 5 secondi e poi si cancella perchè altrimenti passato il mouse resta
a vita la scritta... non mi sembra il massimo!

E se volessimo un barra in moviemento tipo il nostro sito?

SEMPLICE:

------INIZIO---------

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var timed = 0;
var scrollGo = false;
var delay=100;
var space=100;
function scroll_start() {
var i=0;
msg="Viva i tankcommandos!!!! Siamo troppo unici!!!!";
for (i=0;i<space;i++)
msg=" "+msg;
scrollGo=true;
timerid=window.setTimeout("scrollmsg(0)",delay);
}
function scrollmsg(pos) {
var out = "";
scrollGo=false;
if (pos < msg.length)
self.status = msg.substring(pos, msg.length);
else
pos=-1;
++pos;
scrollGo=true;
timerid=window.setTimeout("scrollmsg("+pos+")",delay);
}
</SCRIPT>
</HEAD>
<BODY onLoad="scroll_start();">
</BODY>
</HTML>

--------FINE-----------

Che ne dite?
Non è abbatanza CLARO?

Spiegazione:

Var è la variabile che regola la velocità del movimento:

var timed = 0;
var scrollGo = false;
var delay=100;
var space=100;

function scroll_start() {
var i=0;
msg="Viva i tankcommandos!!!! Siamo troppo unici!!!!";
for (i=0;i<space;i++)
msg=" "+msg;
scrollGo=true;
timerid=window.setTimeout("scrollmsg(0)",delay);
}

function scrollmsg(pos) {
var out = "";
scrollGo=false;
if (pos < msg.length)
self.status = msg.substring(pos, msg.length);
else
pos=-1;
++pos;
scrollGo=true;
timerid=window.setTimeout("scrollmsg("+pos+")",delay);
}

setTimeout è il solito modulo che gestisce i tempi.
Non mi metto a spiegare i cicli... sono quelli del C!

Parliamo ora della data e dell'ora!

Che giorno è?

<script language="JavaScript">

</script>

e per l'ora questo:
document.write("Sono le ",oggi.getHours(),":",oggi.getMinutes())

Non ho fatto altro che usare i moduli getDate(), getMonth(), getYear(),
Date(), getHours() e getMinutes().

Vogliamo proprio avere un orologio dinamico?
ECCOVELO!

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function TimeOutfunc() {
timeout = window.setTimeout("TimeOutfunc()", 1000);
var today = new Date();
document.forms[0].elements[0].value = today.toString();
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="timeout = setTimeout('TimeOutfunc();',1000);">
<FORM>
<INPUT TYPE="text" NAME="ora" VALUE="" SIZE="25">
</FORM>
</BODY>
</HTML>

Cosa volete di più! Aumento la funzione TimeOutFunc ogni secondo (1000
millesimi) attraverso il modulo setTimeout().

Sempre inerente all'ora c'è la data dell'ultima modifica della pagina...
così non si deve fare a mano

<html>
<body>
Ultima modifica:
<script language="JavaScript">

</script>
</body>
</html>
Si usa il comando lastModified applicato al document, cioè la pagina in
questione!
Ora le PassWord:
<script language="JavaScript">
function passWord() {
var testV = 1;
var pass1 = prompt('Inserisci la Password');
while (testV < 3) {
if (!pass1) history.go(-1)
if (pass1.toLowerCase() == "bakunin") {
alert('La tua password è esatta');
break;
}
testV+=1;
var pass1 = prompt('Sbagliato! Puoi riprovare.','Password');
}
if (pass1.toLowerCase()!="altro" & testV ==3) history.go(-1);
return " ";
}
document.write(passWord());
</script>

Ecco qui...
un semplice script che chiede la password!
Ovviamente con uno script così dovete nascondere il codice sorgente... lo
vedremo! Anche se mediamente il vostro browser non lo mostrerà

Spiegazione:

- history.go(-1) torna in dietro alla pagine precedente (tipo un back)
- toLowerCase() imposta tutti i caratteri maiuscoli
- alert('La tua password è esatta'); messaggio di avvenuta inserzione

Questo lo preso da un sito... l'ho trovato geniale!

------
<HEAD>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD><BODY>
<FORM name="codepad">
<INPUT type="button" value=" 1 " onClick="Enter_code(1)">
<INPUT type="button" value=" 2 " onClick="Enter_code(2)">
<INPUT type="button" value=" 3 " onClick="Enter_code(3)">
<BR>
<INPUT type="button" value=" 4 " onClick="Enter_code(4)">
<INPUT type="button" value=" 5 " onClick="Enter_code(5)">
<INPUT type="button" value=" 6 " onClick="Enter_code(6)">
<BR>
<INPUT type="button" value=" 7 " onClick="Enter_code(7)">

<INPUT type="button" value=" 8 " onClick="Enter_code(8)">
<INPUT type="button" value=" 9 " onClick="Enter_code(9)">
<BR>
<INPUT type="text" name="thecode" size=10 value="">
<BR>
</FORM>
</BODY>
----------

Vi chiedete dov'è scritta la password? Ma come, non la vedere?
Eccola:

var usermulcode=40

E' la moltiplicazione dei numeri che compongono la password! Cioè 2514
Vi starete chiedendo: ma ci sono altri numeri che danno risultato 40! Certo...
ma lui si collega alla pagina della password quindi 2514.htm.

Ora preoccupiamoci un po' di menu espandibili!
Si possono fare in vari modi... uno fra i tanti è questo:
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Semplice!
Ho anche messo 2 immagini in modo da rendere più caruccio il tutto!
Il codice è particolarmente semplice. Sempre per chi vuole capirlo

Questo piccolo (?) script gestisce i cookie... ed in particolare dice quante
volte si è visitata la pagina in questione.

<Script>

</Script>

Per farlo funzionare mettere in <body></body> questo: onload="DisplayInfo()"

Questo penso sia una delle cose più usate:

<script language="JavaScript">
newwindow=window.open("finestra.htm","width=470,height=62")
newwindow.creator=self
</script>

Apre una nuova finestra!

Nascondiamo il codice:

<SCRIPT LANGUAGE="JavaScript1.1">

</script>

Semplicemente disattivo il pulsante destro del mouse all'interno della pagina.
È possibile che non funga con netscape... cioè non funziona il tasto ma non si
vede la frase!

<SCRIPT LANGUAGE"JavaScript1.1">

</SCRIPT>

LA SUA CONFIGURAZIONE:

<SCRIPT>

</SCRIPT>

IL SISTEMA OPERATIVO:

<SCRIPT>

</SCRIPT>

RISOLUZIONE VIDEO:

<SCRIPT>

</SCRIPT>

QUANTE PAGINE HA VISITATO CON QUELLA FINESTRA:

<SCRIPT>
var times=history.length;
document.write('In questa sessione hai visitato '+times+' siti');
</SCRIPT>

URL DELLA PAGINA:

<SCRIPT>

</SCRIPT>

--------------------------------FINE------------------------------------

Ciao a tutti

Fonte: Web

FireFox · 12 Giugno 2008

Niente male, anche perchè si vede da qualche piccolo dettaglio che non hai semplicemente copiato e incollato da WebMasterPoint ;) hai aggiunto anche del tuo, buona parte. Bravo Kharg!

95luigi95 · 12 Giugno 2008

già bella guida bravo :bravo:

Houseparty800 · 12 Giugno 2008

Buona guida,

Chiedo al proprietario di settarla meglio.
Mi spiego: fai vari spoiler ognuno con il suo argomento, cosi da rendere più facile la lettura

FireFox · 12 Giugno 2008

Si e magari includere i codici tra i tag CODE, perchè in effetti è un pò pesante così da leggere :P

DjDiabloS · 12 Giugno 2008

complimenti ottima guida!

Ketto93 · 12 Giugno 2008

Sposto nella sezione adatta.

22kakà · 12 Giugno 2008

carina la guida

F-117NightHawk · 12 Giugno 2008

Bella guida, come dice firefox aggiungi le tag

Houseparty800 · 13 Giugno 2008

Aspetto un pochetto, comunque Ketto93 hai sbagliato sezione, risposto io.

Ketto93 · 13 Giugno 2008

La sezione programmazione parla di Java.

Quindi risposto lì.

Houseparty800 · 13 Giugno 2008

HTML e Editor (1 Lettori)
Discussioni relative alla realizzazione di pagine web con linguaggi lato client come HTML, CSS, XHTML, JavaScript e agli editor di sviluppo come Frontpage e Dreamweaver

leggi e dimmi tu, la metto in tutte e due.

Ketto93 · 13 Giugno 2008

Programmazione:
Problemi relativi ai linguaggi di programmazione lato server da C++, Java e Visual Basic ad ASP e PHP con database Access e MySql e ai relativi Content Management System

Cerca

Guida JavaScript

.::Kharg::.

Utente Medio

FireFox

Utente Mitico

95luigi95

Utente bannato

Houseparty800

Utente Master

FireFox

Utente Mitico

DjDiabloS

Utente Assiduo

Ketto93

Utente Mitico

22kakà

Utente Attivo

F-117NightHawk

Utente Master

Houseparty800

Utente Master

Ketto93

Utente Mitico

Houseparty800

Utente Master

Ketto93

Utente Mitico