associare .js esterno a <div> corretto

**carlomarx** · 23-01-2012, 19:50

quoto in pieno fcaldera.

**verderio** · 23-01-2012, 20:10

Allora son riuscito a far qualcosa ma non è ancora come la voglio io, posto il codice:

salvo la seguente porzione di codice in "testo.js"



E nel punto della pagina HTML in cui voglio che venga inserito
<script type="text/javascript" src="testo.js"></script>

Però in questo modo non posso gestire i vari <div> , ne gestirei solo uno , come posso gestirne 3 differenti salvando il tutto nel medesimo file .js ?
Vorrei poter inserire titolo="" , subtitle="" , text="" nello script .. e il titolo si posizioni nel div giusto e così anche il subtitle e il text..

posto anche l'esempio HTML:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="stile.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="box">
<div id="menu"></div>
<div id="title"><h1> qui vorrei inserire il titolo contenuto nel file .js</h1></div>
<div id="text">
<div id="subtitle"> qui vorrei inserire l'introduzione contenuta nel file .js </div>
qui vorrei inserire il testo che è contenuto del file .js
</div>
</body>
</html>

Sperando che ora sia più chiaro!

**carlomarx** · 23-01-2012, 22:09

Come ti ho scritto, avere le basi è importante. È proprio la strada che vuoi intraprendere che secondo me non va bene. Ascolta, ti giro un esempio. Creati un documento XML con il seguente contenuto e chiamalo "libri.xml":

codice:

<?xml version="1.0"?>
<biblioteca>
<libro>
	<titolo>Le notti di Mosca</titolo>
	<sottotitolo>Riposa in pace caro compagno</sottotitolo>
	<contenuto>Contenuto del libro #1</contenuto>
</libro>
<libro>
	<titolo>I promessi sposi</titolo>
	<contenuto>Contenuto de "I promessi sposi"</contenuto>
</libro	>
</biblioteca>

Dopodiché, nella stessa cartella del file libri.xml creati un documento HTML con il seguente contenuto:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pagina senza titolo</title>
<script type="text/javascript">

/* Creo una semplice funzione AJAX */
function loadFile (sURL, fCallback /*, argumentToPass1, argumentToPass2, etc. */) {
  var aPassArgs = Array.prototype.slice.call(arguments, 2), oXHR = new XMLHttpRequest();
  oXHR.onreadystatechange = function() {
    if (oXHR.readyState === 4) { fCallback.apply(oXHR, aPassArgs); }
  };
  oXHR.open("GET", sURL, true);
  oXHR.send(null);
}

/* Algoritmo JXON preso da: https://developer.mozilla.org/it/Cos...goritmo_JXON_3 */
function buildValue(sValue) {
  if (/^\s*$/.test(sValue)) { return null; }
  if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
  if (isFinite(sValue)) { return parseFloat(sValue); }
  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
  return sValue;
}

function getJXONData (oXMLParent) {
  var vResult = /* put here the default value for empty nodes! */ true, nLength = 0, sCollectedTxt = "";
  if (oXMLParent.hasAttributes()) {
    vResult = {};
    for (nLength; nLength < oXMLParent.attributes.length; nLength++) {
      oItAttr = oXMLParent.attributes.item(nLength);
      vResult["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue.replace(/^\s+|\s+$/g, ""));
    }
  }
  if (oXMLParent.hasChildNodes()) {
    for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId < oXMLParent.childNodes.length; nChildId++) {
      oItChild = oXMLParent.childNodes.item(nChildId);
      if (oItChild.nodeType === 4) { sCollectedTxt += oItChild.nodeValue; } /* nodeType is "CDATASection" (4) */
      else if (oItChild.nodeType === 3) { sCollectedTxt += oItChild.nodeValue.replace(/^\s+|\s+$/g, ""); } /* nodeType is "Text" (3) */
      else if (oItChild.nodeType === 1 && !oItChild.prefix) { /* nodeType is "Element" (1) */
         if (nLength === 0) { vResult = {}; }
        sItKey = oItChild.nodeName.toLowerCase();
        sItVal = getJXONData(oItChild);
        if (vResult.hasOwnProperty(sItKey)) {
          if (vResult[sItKey].constructor !== Array) { vResult[sItKey] = [vResult[sItKey]]; }
          vResult[sItKey].push(sItVal);
        } else { vResult[sItKey] = sItVal; nLength++; }
      }
     }
  }
  if (sCollectedTxt) { nLength > 0 ? vResult.keyValue = buildValue(sCollectedTxt) : vResult = buildValue(sCollectedTxt); }
  /* if (nLength > 0) { Object.freeze(vResult); } */
  return vResult;
}

/* Sfrutto la funzione getJXONData() dell'algoritmo JXON */
function loadBooks () {
	oBiblioteca = getJXONData(this.responseXML).biblioteca;
	for (var oBookOpt, nBookId = 0; nBookId < oBiblioteca.libro.length; nBookId++) {
		oBookOpt = document.createElement("option")
		document.catalogo.libri.options.add(oBookOpt);
		oBookOpt.value = nBookId;
		oBookOpt.innerHTML = oBiblioteca.libro[nBookId].titolo;
	}
}

/* Lanciamo una chiamata AJAX */
function initBooks () {
	loadFile("libri.xml", loadBooks);
}

/* Mostriamo un libro in base al suo id */
function showBook (nId) {
	if (nId < 0) { return; }
	var oLibro = oBiblioteca.libro[nId];
	document.getElementById("bookTitle").innerHTML = oLibro.titolo;
	document.getElementById("bookSubtitle").innerHTML = oLibro.hasOwnProperty("sottotitolo") ? oLibro.sottotitolo : "";
	document.getElementById("bookContent").innerHTML = oLibro.contenuto;
}

var oBiblioteca;
</script>
</head>

<body onload="initBooks();">

<form name="catalogo">


Seleziona un libro da sfogliare: <select name="libri" onchange="showBook(this.selectedIndex-1);"><option value="-1" style="font-style: italic;">[Scegliere un libro]</option></select>
</form>

<h3 id="bookTitle"></h3>

<h5 id="bookSubtitle"></h5>

<div id="bookContent"></div>
</body>

</html>

Vedi un po' se è quello che volevi… Ti ho aggiunto anche qualche commento per farti capire.

**verderio** · 23-01-2012, 22:29

Oddio!!!! Innanzitutto grazie, è un fottuto casino cazzo!! E' più che arabo

sei stato gentilissimo!
Ti do pienamente ragione sul fatto di avere le basi.. infatti avevo cambiato drasticamente le mie pretese.. eliminando l'xml e andando solo di script, nell'ultimo post ho postato il codice essenziale.. non so se hai letto! Comunque grazie ancora! del tempo che mi hai concesso e della disponibilità!

**br1** · 23-01-2012, 23:28

Originariamente inviato da verderio è un fottuto casino cazzo!!

Accipicchiolina poteva bastare

**verderio** · 25-01-2012, 11:47

Originariamente inviato da carlomarx
Come ti ho scritto, avere le basi è importante. È proprio la strada che vuoi intraprendere che secondo me non va bene. Ascolta, ti giro un esempio. Creati un documento XML con il seguente contenuto e chiamalo "libri.xml":

codice:

<?xml version="1.0"?>
<biblioteca>
<libro>
	<titolo>Le notti di Mosca</titolo>
	<sottotitolo>Riposa in pace caro compagno</sottotitolo>
	<contenuto>Contenuto del libro #1</contenuto>
</libro>
<libro>
	<titolo>I promessi sposi</titolo>
	<contenuto>Contenuto de "I promessi sposi"</contenuto>
</libro	>
</biblioteca>

Dopodiché, nella stessa cartella del file libri.xml creati un documento HTML con il seguente contenuto:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pagina senza titolo</title>
<script type="text/javascript">

/* Creo una semplice funzione AJAX */
function loadFile (sURL, fCallback /*, argumentToPass1, argumentToPass2, etc. */) {
  var aPassArgs = Array.prototype.slice.call(arguments, 2), oXHR = new XMLHttpRequest();
  oXHR.onreadystatechange = function() {
    if (oXHR.readyState === 4) { fCallback.apply(oXHR, aPassArgs); }
  };
  oXHR.open("GET", sURL, true);
  oXHR.send(null);
}

/* Algoritmo JXON preso da: https://developer.mozilla.org/it/Cos...goritmo_JXON_3 */
function buildValue(sValue) {
  if (/^\s*$/.test(sValue)) { return null; }
  if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
  if (isFinite(sValue)) { return parseFloat(sValue); }
  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
  return sValue;
}

function getJXONData (oXMLParent) {
  var vResult = /* put here the default value for empty nodes! */ true, nLength = 0, sCollectedTxt = "";
  if (oXMLParent.hasAttributes()) {
    vResult = {};
    for (nLength; nLength < oXMLParent.attributes.length; nLength++) {
      oItAttr = oXMLParent.attributes.item(nLength);
      vResult["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue.replace(/^\s+|\s+$/g, ""));
    }
  }
  if (oXMLParent.hasChildNodes()) {
    for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId < oXMLParent.childNodes.length; nChildId++) {
      oItChild = oXMLParent.childNodes.item(nChildId);
      if (oItChild.nodeType === 4) { sCollectedTxt += oItChild.nodeValue; } /* nodeType is "CDATASection" (4) */
      else if (oItChild.nodeType === 3) { sCollectedTxt += oItChild.nodeValue.replace(/^\s+|\s+$/g, ""); } /* nodeType is "Text" (3) */
      else if (oItChild.nodeType === 1 && !oItChild.prefix) { /* nodeType is "Element" (1) */
         if (nLength === 0) { vResult = {}; }
        sItKey = oItChild.nodeName.toLowerCase();
        sItVal = getJXONData(oItChild);
        if (vResult.hasOwnProperty(sItKey)) {
          if (vResult[sItKey].constructor !== Array) { vResult[sItKey] = [vResult[sItKey]]; }
          vResult[sItKey].push(sItVal);
        } else { vResult[sItKey] = sItVal; nLength++; }
      }
     }
  }
  if (sCollectedTxt) { nLength > 0 ? vResult.keyValue = buildValue(sCollectedTxt) : vResult = buildValue(sCollectedTxt); }
  /* if (nLength > 0) { Object.freeze(vResult); } */
  return vResult;
}

/* Sfrutto la funzione getJXONData() dell'algoritmo JXON */
function loadBooks () {
	oBiblioteca = getJXONData(this.responseXML).biblioteca;
	for (var oBookOpt, nBookId = 0; nBookId < oBiblioteca.libro.length; nBookId++) {
		oBookOpt = document.createElement("option")
		document.catalogo.libri.options.add(oBookOpt);
		oBookOpt.value = nBookId;
		oBookOpt.innerHTML = oBiblioteca.libro[nBookId].titolo;
	}
}

/* Lanciamo una chiamata AJAX */
function initBooks () {
	loadFile("libri.xml", loadBooks);
}

/* Mostriamo un libro in base al suo id */
function showBook (nId) {
	if (nId < 0) { return; }
	var oLibro = oBiblioteca.libro[nId];
	document.getElementById("bookTitle").innerHTML = oLibro.titolo;
	document.getElementById("bookSubtitle").innerHTML = oLibro.hasOwnProperty("sottotitolo") ? oLibro.sottotitolo : "";
	document.getElementById("bookContent").innerHTML = oLibro.contenuto;
}

var oBiblioteca;
</script>
</head>

<body onload="initBooks();">

<form name="catalogo">


Seleziona un libro da sfogliare: <select name="libri" onchange="showBook(this.selectedIndex-1);"><option value="-1" style="font-style: italic;">[Scegliere un libro]</option></select>
</form>

<h3 id="bookTitle"></h3>

<h5 id="bookSubtitle"></h5>

<div id="bookContent"></div>
</body>

</html>

Vedi un po' se è quello che volevi… Ti ho aggiunto anche qualche commento per farti capire.

Carl.. non funziona su chrome, con firefox tutto ok, ma con chrome non mi da la possibilità di scegliere i libri e quindi non funziona correttamente..
Utilizzerei chrome perchè è l'unico fino a questo momento che supporta in maniera più che buona html5.. e per me la presenza di multimedialità all'interno della pagina è essenziale!
Proprio per questo vorrei chiederti un'ultima cosa.. se volessi aggiungere all'xml un link ad un elemento multimediale, posso procedere nello stesso modo vero?

grazie ancora!

**carlomarx** · 25-01-2012, 13:16

Su chrome non ti funziona perché lo provi in locale. Se lo usi da remoto dovrebbe andare (anche se non l'ho testato)... è il solito problema con chrome e ajax...

**Enzaccio** · 02-02-2012, 14:10

Originariamente inviato da verderio il 23-01-2012 15:16
Il problema è che mi servono gentilmente due funzioni:
la prima: come strutturare il file .js , il quale conterrà testo che io stesso metterò
la seconda : come richiamare nel giusto <div> il file .js che ho creato precedentemente!

mi fareste un enorme piacere, dato che non vorrei impararmi tutto javascript .. / ..

Infatti. JS diventa meno ostico se si comincia a imparare così, che non sfogliando una guida da pag. 1 in avanti

. Che poi però, va seguita !

Non so se "verderio" è ancora interessato, ma per la prima non è un discorso di function ma di come strutturare il file .js appunto:

codice:

var titolo = '';
var sottotitolo = '';
var corpo = '';

Tra gli apici ' (o i doppi " puoi usare) ci scrivi:

var titolo = 'Chi veramente voleva la morte di Italo Balbo ?';

E lo salvi con estensione tuonome.js
Ma ATTENZIONE ! - Devi scrivere osservando le regole di scrittura JavaScript !
Se un apice occorre nel testo, lo devi "mascherare" con l' escape character, che è il backslash, così:

var sottotitolo = 'L\\' apparecchio abbattuto a Tobruk spengeva la voce di un pacifista';

Non puoi rompere una riga di (stringa di testo) JS indiscriminatamente, ma a capo ci devi andare così, se non vuoi continuare a scrivere tutto su una riga, chiudendo con un apice, concatenando col segno + più, reintroducendo la nuova riga con nuovo apice:

var sottotitolo = 'L\\' apparecchio abbattuto a Tobruk spengeva la voce ' +
'di un gerarca che scongiurava l\\' entrata in guerra. Casa Savoia e il ' +
'suo Stato Maggiore (post-)risorgimentale invece, nelle guerre hanno ' +
'sempre progredito. Dopo le rivelazioni del figlio di Giacomo Matteotti, Matteo, ' +
'sull\\' affare petrolio Sinclair Savoia, perché non pensare che ...';

E poi bisogna vedere cosa vuoi fare dell' HTML, se uno scrive nel testo ad esempio </div > questo viene passato alla pagina madre e "squassa" tutto il layout.
E come vuoi gestire i ritorni di riga; nello spettacolare saggio di cirillico di carlomarx ad esempio, devi codificare il BR.

Poi il contenuto delle Variabili le invii agli appositi DIV come .innerHTML
Ora però, devo andare ...

Discussione: associare .js esterno a <div> corretto

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio