[javascript] Aiuto per la creazione della mia prima pagina web con javascript. [Archivio]

Player1

02-11-2010, 17:25

Ciao!
Sto cercando di scrivere la mia prima pagina web che fa uso di javascript, ho letto diverse guide tuttavia al momento di mettere in pratica gli insegnamenti mi sono bloccato subito.
Avrei bisogno di una mano, iniziamo dal primo problema, l'uso delle variabili, questo è il codice (o meglio parte del codice) che ho scritto:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
...
<script type="javascript" >
var state = new String("ciao");
</script>
</head>
<body>
...
<div id="content">
<font color="red">
<script type="javascript" language="javascript">
document.write(state);
</script>
</font>
...
</div>
</body>
</html>

Mi aspetterei di vedere una scritta rossa "ciao", cosa che in pratica non accade. Sapreste dirmi cosa sbaglio?

MEMon

02-11-2010, 17:51

Ciao, il type di uno script javascript corretto è "text/javascript".

Un consiglio, non utilizzare il document.write, inizia subito ad usare le potenzialità del DOM e usa solo uno script javascript nell' <head>, non sparsi per il codice html.

Player1

02-11-2010, 17:58

Grazie, il problema era proprio il type.
Per quanto riguarda il DOM ho letto poco a riguardo nelle guide che ho visto, potresti indicarmi qualche sito contenente una guida che fa uso di DOM?

MEMon

02-11-2010, 18:11

Grazie, il problema era proprio il type.
Per quanto riguarda il DOM ho letto poco a riguardo nelle guide che ho visto, potresti indicarmi qualche sito contenente una guida che fa uso di DOM?

C'è quella di html.it (http://javascript.html.it/guide/leggi/24/guida-dom/) che per iniziare penso vada bene.

Poi per qualcosa di approfondito guarda le reference (http://www.javascriptkit.com/jsref/), ci sono sia quelle di javascript che quelle per il dom(e anche CSS ma se ne parlerà un pò più avanti).

Ti ho scritto un esempietto dal quale puoi iniziare a guardarti un paio di cose.
No n te l'ho commentato, lascio a te il divertimento di andarti a cercare come mai funziona così e cosa ho utilizzato.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script type="text/javascript">

function writeText(text, color){
var container=document.getElementById("container");
container.setAttribute("style", "color:"+color);
container.innerHTML=text;
}

function init(){
writeText("Provaaaaaa", "ORANGE");
}

</script>
</head>
<body onload="init();">
<div id="container"></div>
</body>
</html>

Player1

03-11-2010, 08:28

Fantastico!
Ho appena finito di leggere la guida DOM e fare qualche prova!
Non pensavo che javascript con DOM fosse così flessibile e potente si possono davvero fare un sacco di cose con poco sforzo!

Ora però mi trovo di fronte ad un problema un po' più complesso.
Ho creato una semplicissima pagina in cui a sinistra c'è un menù con dei pulsanti ed a destra un <div id="content"> vuoto.

Vorrei fare in modo che alla pressione di un tasto il contenuto del div content caricasse una jsp, ho creato dunque una funzione javascript da associare ai vari pulsanti nel seguente modo:

function contentSelector(buttonPressed){
if (buttonPressed=='viewPageA'){
pageContent = document.getElementById("content");
pageContent.innerHTML = "<jsp:include page=\"pageA.jsp\" flush=\"true\" />";
}
...
}

Tuttavia alla pressione del pulsante non viene visualizzato nulla.
Credo di aver intuito che il problema è dovuto al fatto che javascript lavora sul browser e le jsp sul server quindi quando premo il pulsante il browser non possiede la jsp da visualizzare.
C'è un modo per indicare a javascript che deve richiedere al server il contenuto di content?
Preferirei non utilizzare forward, mi piacerebbe che la pagina fosse statica e cambiasse solo il contenuto di "content" in base alle situazioni (pressione dei pulsanti ecc.)

MEMon

03-11-2010, 11:40

Fantastico!
Ho appena finito di leggere la guida DOM e fare qualche prova!
Non pensavo che javascript con DOM fosse così flessibile e potente si possono davvero fare un sacco di cose con poco sforzo!

Ora però mi trovo di fronte ad un problema un po' più complesso.
Ho creato una semplicissima pagina in cui a sinistra c'è un menù con dei pulsanti ed a destra un <div id="content"> vuoto.

Vorrei fare in modo che alla pressione di un tasto il contenuto del div content caricasse una jsp, ho creato dunque una funzione javascript da associare ai vari pulsanti nel seguente modo:

function contentSelector(buttonPressed){
if (buttonPressed=='viewPageA'){
pageContent = document.getElementById("content");
pageContent.innerHTML = "<jsp:include page=\"pageA.jsp\" flush=\"true\" />";
}
...
}

Tuttavia alla pressione del pulsante non viene visualizzato nulla.
Credo di aver intuito che il problema è dovuto al fatto che javascript lavora sul browser e le jsp sul server quindi quando premo il pulsante il browser non possiede la jsp da visualizzare.
C'è un modo per indicare a javascript che deve richiedere al server il contenuto di content?
Preferirei non utilizzare forward, mi piacerebbe che la pagina fosse statica e cambiasse solo il contenuto di "content" in base alle situazioni (pressione dei pulsanti ecc.)
Se devi interagire con codice lato server devi utilizzare AJAX, che altro non è che javascript che fa richieste http al server.
keyword: ajax+jsp :read:

Player1

09-11-2010, 15:07

Ciao!
Ho un nuovo problema con la gestione delle richieste asincrone.
La mia pagina è costituita da un menu a sinistra, ed un div centrale che rappresenta il contenuto.
Ogni volta che sul server c'è un aggiornamento il contenuto viene ricaricato, per farlo ho creato il seguente script:

function monitorUpdate(page){
monitor = new XMLHttpRequest();
monitor.open("get", "./update",true)
monitor.setRequestHeader("connection", "close");
monitor.onreadystatechange = function() {
if(monitor.readyState === 4) {
execute(page);
}
}
monitor.send(null);
}

In pratica monitor effettua la richiesta ma non riceve risposta finché non c'è un aggiornamento sul server, solo in quel momento esegue la funzione execute(page) che ricarica la pagina aggiornata nella quale tra l'altro è inclusa una nuova chiamata a monitor che di nuovo si mette in attesa e così via..
Fin qui tutto funziona correttamente.
Il problema si verifica quando clicco su un tasto del menù di sinistra per cambiare completamente il contenuto della pagina, poiché il "vecchio monitor" rimane comunque in attesa di un aggiornamento e, con la nuova pagina viene caricato un nuovo monitor contemporaneamente.
C'è un modo per chiudere monitor mentre è in attesa di onreadystatechange ?

Spero di essere stato abbastanza chiaro visto che il problema è un pò difficile da spiegare, se non lo sono stato, per favore, chiedete maggiori chiarimenti.

MEMon

10-11-2010, 09:38

Il problema si verifica quando clicco su un tasto del menù di sinistra per cambiare completamente il contenuto della pagina, poiché il "vecchio monitor" rimane comunque in attesa di un aggiornamento e, con la nuova pagina viene caricato un nuovo monitor contemporaneamente.
Prova a chiamare queste due righe di codice all'uscita della pagina, in modo da eliminare il vecchio monitor.

monitor.onreadystatechange=null;
monito=null;

Oppure potresti pensare di assegnare ad ogni pagina un "codice" univoco, ad esempio creato a partire dai millisecondi, assegnarlo ai monitor che crei dentro la pagina e ogni volta che c'è la risposta del server verificare prima che il monitor abbia effettivamente il codice della pagina in cui si trova.

Player1

12-11-2010, 09:07

Prova a chiamare queste due righe di codice all'uscita della pagina, in modo da eliminare il vecchio monitor.

monitor.onreadystatechange=null;
monito=null;

Ok sono riuscito a risolvere più o meno come mi hai suggerito, in realtà ho scoperto che per interrompere non bisogna usare onreadystatechange=null bensì monitor.abort().
In ogni caso volevo ringraziarti per la tua disponibilità, mi hai dato davvero un grande aiuto!