tmg software house - Passo 1: html + js + css senza oggetti

Scritto da Riccardo Zorn

Venerdì 19 Settembre 2008 06:26

HTML

Il primo passo è creare un layer <DIV> nel quale andremo a mettere testi e bottoni.

<DIV ID="msgBox">
    <SPAN ID="msgBoxtext">
        Ciao Gino bella giornata
    </SPAN>
    <br>
    <A ID="msgBox1" onclick="javascript:msgBoxYes()">Yes</A>
    <A ID="msgBox2" onclick="javascript:msgBoxNo()">No</A>
</DIV>

Css

Il tag <STYLE> permette di inserire inline (cioè dentro allo stesso file) una porzione di CSS: deve essere inserito all'interno della sezione <HEAD> (anche se poco cambia metterlo dentro al <BODY>

<STYLE>
    DIV#msgBox {width:450px; height:386px; background-color:yellow; color: navy; border: thin inset red;
        position: absolute; left: 150px; top:50px; text-align:center; margin:40px; display:none}
    DIV#msgBox A {text-decoration: none; font-size:120%; width:30%; height:10%; border:thin inset black; margin-top:200px}
    A#msgBox1 {font-weight: bold}
</STYLE>

(Lo so che fa schifo, concentriamci sul javascript e basta)

Script

Anche lo script è inline, con il tag <SCRIPT>.

Vediamolo nel dettaglio

<SCRIPT LANGUAGE="JavaScript">

Assegno una variabile al layer che contiene il messaggio; così dovrò cercare il layer una volta sola, mentre i bottoni che chiudono la finestra di messaggio possono accedere direttamente alla variabile.

Qui sto contravvenendo a quanto detto nel decalogo: la manipolazione diretta dello stile.

Però lo sto facendo con il solo proposito di mostrare/nascondere un elemento; possiamo anche definire una classe "nascosto" e associare classi multiple ad un oggetto; ma non aggiungeremmo nulla alla manutenibilità del codice.

var msgBoxDiv 
    function showMessage(msg)
    {
         msgBoxDiv = document.getElementById("msgBox")
         msgBoxDiv.style.display = "block"
    }

Il message Box ha due bottoni; ciascuno invoca una funzione diversa, che provvede - come minimo - a chiudere (nascondere) il layer.

Per il posizionamento dei layers, display:block indica che il tag viene visualizzato su una nuova riga e seguito da un a capo; display:inline che segue il testo; display: none che non viene proprio visualizzato; è più comodo per il layout manipolare display: che non visibility:

function msgBoxYes()
    {
        alert('yes');
        msgBoxDiv.style.display = "none"

    }
    function msgBoxNo()
    {
        alert('no');
        msgBoxDiv.style.display = "none"
    }

</SCRIPT>

I file descritti in questo articolo si possono scaricare dall'introduzione

< Prec.		Succ. >

Ultimo aggiornamento Martedì 28 Ottobre 2008 14:31