Includere javascript

di Maria Silvana Radice







Questa pagina e` una continuazione della guida Come creare un sito da zero, passo a passo..

Premessa:
Qualunque codice javascript puo` essere inserito direttamente nella sezione "head", o nella sezione "body" del codice html di una pagina, racchiudendolo tra questi tag:

<script type="text/javascript">
codice
</script>

Il metodo migliore, pero` e normalmente utilizzato e` quello di includerlo da un file esterno, richiamato in questo modo:

<script src="file-esterno.js"></script>


Dove inserire gli script:

Sezione HEAD:
In questa sezione si mettono gli script che è necessario far caricare prima che la pagina venga visualizzata.

Sezione BODY:
In questa sezione si mettono gli script che possono essere attivati dopo la visualizzazione della pagina.

La scelta della posizione è importante per la velocità di caricamento della pagina. È inutile, quindi, inserire nella sezione head gli script non necessari e che rallenterebbero il caricamento.


Come includere i contenuti, tramite un file esterno, usando javascript..
How to include contents, with an external file, using javascript



L'inclusione tramite file esterno e` anche utile per poter modificare alcune parti del sito su tutte le pagine contemporaneamente.

Puo` essere comodo, per esempio, in un sito con tante pagine, inserire il menu` di navigazione con tale metodo, perchè si potranno effettuare modifiche e/o aggiungere voci solo in quei file e si ripercuoteranno, in automatico, su tutte le pagine.

Ci sono tre metodi....

Primo metodo:

Prendendo come esempio una pagina del sito che avete costruito, copiate dal suo codice HTML la parte del menù che ci interessa e cioè quella simile a questa sotto, compresi i tag <ul></ul> e incollatelo in un file di testo.

<ul>
       <li><a href="home.html">Home</a></li>
       <li><a href="pagina1.html">Pagina 1</a></li>
       <li><a href="pagina2.html">Pagina 2</a></li>
       <li><a href="pagina3.html">Pagina 3</a></li>
</ul>

Modificate il codice in questo modo:

document.write("<ul>");
document.write("<li><a href='home.html'>Home</a></li>");
document.write("<li><a href='pagina1.html'>Pagina 1</a></li>");
document.write("<li><a href='pagina2.html'>Pagina 2</a></li>");
document.write("<li><a href='pagina3.html'>Pagina 3</a></li>");
document.write("<ul>");

Come vedete, prima di ogni riga, è stato inserito il comando "document.write". Ogni riga è stata, anche, racchiusa tra parentesi e virgolette.
Attenzione a queste regole:
  1. Mettete sempre il punto e virgola alla fine di ogni riga di comando
  2. Se le virgolette esterne (dopo e prima le parentesi) sono doppie, tutte le altre dovranno essere singole, o viceversa
Fatto questo, rinominate il file di testo e modificatene l'estensione in .js. Quindi, se prima era file.txt, diventerà file.js.
Caricate questo file sul vostro hosting, nella stessa cartella che contiene il sito (public_html).
Adesso, andate nel codice html della pagina in cui volete includere il menù e inserite questa stringa al posto della parte, corrispondente al menù, che avevate copiato all'inizio.

<script src="file.js"> </script>

Al posto di file.js, dovete mettere il nome del vostro file. Salvate.
Ecco fatto! Incollate la stessa stringa in ogni pagina e, ogni volta che vorrete modificare, o aggiornare il menù di navigazione del sito, non avrete che da modificare il contenuto del file.js.

Secondo metodo:

Prelevate, come prima, la porzione di codice che riguarda il menù. Riscrivetelo, preceduto dal tag "inclusione" e tutto su di una riga sola, come vedete sotto. ATTENZIONE!  Come potete notare, il codice è racchiuso in nuove virgolette doppie, di conseguenza le virgolette interne diverranno singole. Attenti anche a non dimenticare il punto e virgola finale. Controllate tutti questi particolari, o il codice non funzionerà.

inclusione="<ul><li><a href='home.html'>Home</a></li><li><a href='pagina1.html'>Pagina 1</a></li><li><a href='pagina2.html'>Pagina 2</a></li><li><a href='pagina3.html'>Pagina 3</a></li></ul>";

Rinominate il file.txt e modificatene l'estensione così: menu.js

Ora, tornate al codice html della pagina su cui state lavorando. Sotto al tag <head>, incollate questa stringa, che serve a richiamare lo script:

<script type="text/javascript" src="menu.js"></script>

Al posto della parte di menù, che avevate copiato prima, invece, dovete incollare questa parte di codice:

<noscript>
<strong>
<p style="color:red;">Attenzione: per visualizzare correttamente questa pagina è necessario avere JavaScript attivato.</p>
</strong>
</noscript>
<script type="text/javascript">
document.write(inclusione);
</script>

..che fisserà lo script nel contenuto e visualizzerà un avviso nel caso in cui qualcuno avesse javascript disattivato nel proprio browser.
Alla fine, se avrete fatto tutto per benino, la parte iniziale del codice html della pagina, sarà simile a questo:

<html>
<head>
<link rel="stylesheet" type="text/css" href="layoutsito.css" />
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>
            Site name</h1></div>
<div id="navigation">
   <noscript>
   <strong>
    <p style="color:red;">Attenzione: per visualizzare correttamente questa pagina è necessario avere JavaScript attivato.</p>
   </strong>
  </noscript>
 <script type="text/javascript">
  document.write(inclusione);
 </script>

        </div>

Le parti che ho segnato in rosso sono quelle nuove.

Perfetto, adesso potete fare la stessa procedura nelle altre pagine (basta un copia e incolla) e, ogni volta che vorrete effettuare modifiche al menù di navigazione, dovrete farle solo nel menu.js. Tenete presente che il menù, così richiamato, sarà visibile solo tramite il browser e non verrà visualizzato utilizzando "HTML edit" e nemmeno con i programmi come Kompozer.

Terzo metodo:

Usare javascript e jQuery per includere un file html in una pagina html.
Che cos'è jQuery?
Citazione: "jQuery è una libreria JavaScript che semplifica l’attraversamento dei documenti HTML, la gestione degli eventi, le animazioni e le interazioni AJAX per migliorare e velocizzare lo sviluppo web. La sua sintassi semplificata permette di approcciare a javascript con relativa semplicità e di realizzare interfacce user friendly in modo efficace." (Fonte)

Per prima cosa, preparate un semplice file html con il contenuto che volete includere, che può essere il menù, o qualunque altra cosa, anche semplice testo, purchè sia solo html e non contenga altri script, o funzioni. Potrà, invece, contenere uno style.
Ora, dovete andare sul sito di jQuery e avete due scelte:
Potete prelevare il link di inclusione che viene offerto.
Potete scaricare la versione corrente di Jquery da includere.
Tenete presente che non tutte le versioni di Jquery sono adatte alle differenti applicazioni.

Fatto questo, nella sezione head, dovete mettere questa funzione:

   <script>
    $(function(){    $("#includedContent1").load("file.html");
    });
    </script>


"includeContent1" è il riferimento al div che racchiuderà il contenuto del file esterno. Potete dargli il nome che volete, purchè sia, ovviamente, lo stesso nome del div. Potete, anche, includere altri file ripetendo la stringa e dando sempre un nome univoco.
Per esempio:

#includedContent1
#includedContent2
#includedContent3

"file.html" è il nome + percorso del file esterno html che volete includere.

Infine, dovete incollare questa stringa nel punto esatto della sezione body in cui volete far apparire il contenuto incluso....

<div id="includedContent1"></div>

Tenete presente che lo script funzionerà solo se il file da includere si trova nello stesso dominio della pagina in cui va incluso.

È possibile includere anche una parte specifica del file html, utilizzando questa funzione:

$('#includedContent').load('file.html #container');

Al posto di "container" mettete l'id del div che contiene la sezione del contenuto da includere. Per esempio come questa\o:

<div id="container">
contenuto da includere
</div>

Quarto metodo:

Come prima, per prima cosa, preparate un semplice file html con il contenuto che volete includere, che può essere il menù, o qualunque altra cosa, anche semplice testo, purchè sia solo html e non contenga altri script, o funzioni. Potrà, invece, contenere uno style.
Ora, dovete scaricare questo file js (anche il allegato a fondo pagina), metterlo nella cartella del vostro sito e includerlo nel codice della vostra pagina, sezione head, cosí....

<script src="js/w3data.js"></script>

....naturalmente, il percorso del file, segnato in rosso, dovrà corrispondere al reale percorso nella vostra cartella.
Fatto questo, dovete richiamare lo script usando questo codice....

 <script>w3IncludeHTML();</script>

....che incollerete subito prima della chiusura del body (</body>).
Infine, dovete incollare questa stringa nel punto esatto in cui volete far apparire il contenuto incluso....

<div w3-include-html="menu.html"></div>

....indicando il percorso del file html da includere.
Possono essere inclusi più file html, ripetendo la stringa.







ċ
w3data.js
(6k)
Maria Silvana Radice,
03 gen 2017, 02:25