Abbiamo visto come stampare sulla pagina del browser una scritta. Adesso vediamo come vengono scritti gli alert (quelle finestre che ci avvisano di qualcosa).
Apriamo il blocco note
<html>
<head>
<script type ="text/javascript">
<!--
var msg ="Questo è un messaggio di alert";
window.alert (msg);
alert ("Questo è un altro messaggio");
//-->
</script>
</head>
<body>
RIcarica la pagina (f5) per ricaricare l'alert
</body>
</html>
Questo codice carica due alert. Copiate e incollate
Cominciamo questa prima lezione scrivendo il primo programma che ogni utente che si affaccia ad un nuovo linguaggio di programmazione non può non incontrare : "Hello World". Prima di creare lo script vediamo alcune premesse:
Il codice javascript è sempre racchiuso tra i tag <script type ="text/javascript"> Codice javascript </script> . Type indica al browser che tipo di linguaggio stiamo utilizzando.
Se vogliamo utilizzare un file javascript esterno (opportunamente nominato file.js) deve scrivere il tag <script src="script.js"></script>
Il tag <script> può essere inserito nei tag : <head></head> oppure nei tag: <body></body>. La differenza sta nel fatto che nel secondo caso viene utilizzato una sola volta durante il flusso d'esecuzione del codice e la prima è che viene riutilizzato ogni volta che è opportunamente richiamato (vedremo questa cosa più in la).
Dopo il tag <script> viene utilizzato il tag di commento <!-- per indicare al browser di passare il controllo al javascript e finisce con//--> per far sì che il compilatore javascript legga l'ultima riga come commento (i commenti in javascript sono scritti : // oppure /* */) e il commento html venga chiuso per poter ripassare il controllo al browser.
Le istruzioni terminano con un ;
Adesso apriamo il nostro editor e creiamo il nostro file HelloWorld.html.
<html>
<head>
<script type ="text/javascript">
<!--
document.write ("Hello World");
//-->
</script>
</head>
<body>
</body>
</html>
Notiamo che le stringhe in javascript sono racchiuse tra virgolette. Un altro modo per stampare il messaggio è quello di passarlo ad una variabile e poi richiamarla nel metodo write.
var msg ="Hello World"
document.write (msg);
Da notare che in javascript le variabili non hanno un tipo ma questo viene impostato dopo l'inizializzazione della variabile;
Apriamo Mysql command line, ovvero il prompt dei comandi che abbiamo installato sul pc e immettiamo la password per accedere a Mysql (quella scelta durante l'installazione per intenderci). Adesso creiamo il nostro database:
create database NomeDatabase;
Facciamo attenzione al punto e virgola finale che indica a Mysql di eseguire il comando (se lo dimentichiamo rimarrà in attesa di un altro comando) e a premere il tasto invio dopo aver eseguito il comando.
NomeDatabase è il nome che daremo al nostro database.
Per usare il database (e crearci tabelle o fare query) usiamo il comando:
In questa prima lezione del nostro corso di Mysql faremo una cosa semplicissima ma importante: scarichiamo il nostro programma dal sito ufficiale.
Andiamo sul sito ufficiale Mysql e scarichiamo Mysql server ( noi useremo il prompt dei comandi di mysql ma è possibile scaricare e installare anche l'interfaccia grafica del programma).
Installiamo il tutto, scegliamo la password e ricordiamocela perché ci servirà per entrare nel server mysql.
Adesso da programmi andiamo su Mysql Command line client. Ci verrà chiesta la password (mettiamo quella che abbiamo scelto in fase di installazione).
Adesso possiamo creare i nostri database, le tabelle ecc.
Questo però lo vedremo alla prossima......
Per far sì che diversi pc facciano parte della stesse rete, dovete far sì che essi facciano parte dello stesso gruppo di lavoro.
Come fare? Semplicissimo: su risorse del computer ( o computer in Windows 7 e Windows vista), cliccare con il tasto destro e poi su proprietà.
Qui verrà visualizzato il nome del computer e il gruppo di lavoro.
Cliccando su cambia impostazioni potremo cambiare questi due parametri. Ad esempio per ogni pc il gruppo di lavoro deve essere ufficio, solo così i vari computer potranno "dialogare in rete".
Quando tutti i pc faranno parte dello stesso gruppo di lavoro, basterà andare su risorse di rete e vedremo la nostra rete ufficio e i pc ad essa collegati.
Prerequisiti: collegati tutti con il cavo ethernet.
Ho scoperto, da pochissimo, che per impostare un stampante in rete su Windows 7 o su Windows xp, bisogna installarla come stampante locale e non come stampante di rete (cosa che facevo tranquillamente con il vecchio Windows 2000).
Innanzitutto dovete condividere la stampante sul pc su cui è installata fisicamente (tramite cavo usb si suppone). Andate in Pannello di controllo- dispositivi e stampanti e cercate la stampante da condividere (premettiamo che sia già stata installata). Con il tasto destro sull'icona della stampante, su condividi potremmo creare la nostra condivisione (ci sarà una mano sotto alla stampante in Windows xp e due omini in Windows 7).
Adesso andiamo sugli altri pc che devono stampare in rete.
Sempre da Pannello di controllo - dispositivi e stampanti - scegliere Aggiungi stampante (in alto per Windows 7 e a sinistra su Windows xp ).
Qui troveremo l'opzione aggiungi stampante locale. Scegliamo crea nuova porta, porta locale, e gli mettiamo l'indirizzo del pc su cui è installata la nostra stampante con il nome della stessa. (es \\pcfisso\stampante).
A questo punto ti chiederà di installare i driver (puoi prenderli da un elenco di Windows o dal dischetto fornito con la stampante).
Se tutto è andata correttamente dovreste poter vedere la stampante condivisa sul pc e magari provate a fare un stampa di prova.
Prerequisiti: tutti i pc devono far parte dello stesso gruppo di lavoro
Per indicare la famiglia di font che il browser utilizzerà per la pagina bisogna utilizzare il tag:
font-family: Arial, verdana, Sans-serif;
La dimensione del font:
font-size: 30px;
font-size: 30pt;
font-size: 30%;
font-size: 8em;
Cosa cambia tra le misure? Il pixel è il formato video, mentre il point il formato di stampa, l'em e la percentuale sono misure relative (a differenza delle prime due che sono misure assolute), ad esempio se l'em è 1, e abbiamo dichiarato il font base a 12 px, il font con l'em sarà del 150% in più ovvero di 18 px, la percentuale è simile all'em.
I tag font possono essere raggruppati:
p {font-weight: bold;font-size: 18px;font-family: Verdana, Arial,Sans-serif; font-style: italic;}
Può essere riscritta come:
p {
font:bold, small-caps,italic, 18px ,Arial;
}
Con l'ordine:
font-weigth, font-variant (questo attributo ha solo due varianti small-caps, che trasforma tutte le lettere maiuscole in una dimensione minore come fossero lettere minuscole, e normal), font-style, font-size, font-family.
Nei css, esterni o interni alla classe, abbiamo visto che è possibile ridefinire le caratteristiche di alcuni tag html (nella lezione precedente abbiamo modificato il tag h1), ma possiamo anche ridefinire altre classi ed apllicarle ad un contenitore.
Ad esempio, se nell'<head> scriviamo:
<style type=" text/css">
.miaclasse {
font-family: Verdana, Arial,Sans-serif;
color: red;
font-size: 11px;
text-align: center;
}
</style>
E nel body scriviamo:
<p class= “miaclasse”> Questo testo è arial e in rosso e allineato al centro </p>
Attenzione: la classe è preceduta da un punto e può essere riutilizzata per più contenitori.
Invece se scriviamo:
<style type ="text/css">
#mioid {
font-family: Verdana, Arial,Sans-serif;
color: red;
font-size: 11px;
text-align: center;
}
</style>
Abbiamo creato un id. Qual'è la differenza con la classe, direte voi?
L'id può essere applicato ad un solo elemento, la classe a più di uno. Solitamente questo è utilizzato col tag <div>, ma nessuno vieta di utilizzarlo con qualche altro contenitore htm.
Per richiamarlo all'interno del body si scrive:
<div id= “mioid”> Questo contenitore è rosso, in Arial e allineato al centro </div>
Facciamo un esempio:
<html>
<head>
<title> Primi esercizi con Css</title>
<style type="text/css">
.miaclasse {
font-family: Verdana, Arial,Sans-serif;
color: red;
font-size: 16px;
text-align: center;
}
#mioid {
font-family: Verdana, Arial,Sans-serif;
color: #990066;
font-size: 11px;
text-align: rigth;
}
H1 {
color: #009900;
font-size: 22px;
text-align: center;
font-style: italic;
}
</style>
</head>
<body>
<H1> Questo è il titolo della pagina</H1>
<div id = "mioid">
<ul>
<li> Primo elemento </li>
<li> Secondo elemento </li>
</ul>
</div>
<div class ="miaclasse"> Documento creato da: </div>
I css, detti anche fogli di stile, sono nati con il preciso compito di occuparsi della formattazione di una pagina web, cosa che prima era demandata al linguaggio html.
Oggi, i contenitori vengono sempre creati con i tag html mentre per la formattazione il loro uso è deprecato a favore dei fogli di stile.
Formattare un testo in css vuol dire anche creare un codice che può essere utilizzato per un intero sito web senza che si debba modificare a mano ogni singola pagina.
I css, Cascading Style Sheets, possono essere utilizzati in tre modi:
Come fogli di stile in linea
come fogli di stile incorporati
come fogli di stile esterni
Fogli di stile in linea
In questo caso non ci spostiamo molto da quello che è l'utilizzo dell'html, infatti le proprietà verranno dichiarate nel contenitore (ricordiamo che esso può essere ad esempio un paragrafo <p> o <div> o <span>), e avrà effetto solo ed esclusivamente su questo contenitore.
Come avrai già notato gli attributi vengono seguiti dai due punti invece che dall'uguale, questa è una prima differenza nella sintassi dei Css.
Fogli di stile incorporati
Le proprietà vengono inserite nell'head della pagina html e hanno effetto su tutta la pagina, non sul tutto il sito web, utilizzando il tag <style type= “text/css”>
Ad esempio:
<html>
<head>
<style type = “text/css”>
body {background-color: red;}
</style> </head>
Nota che:
Sono utilizzate le parentesi graffe
Al posto dell'uguale utilizziamo i due punti
Gli argomenti sono separati dal punto e virgola invece della virgola
Non vi sono le virgolette
Una migliore indentazione sarebbe:
<html>
<head>
<style type = “text/css”>
H1 {
font-size: 13px;
font-family: Arial;
color: red;
}
</style>
</head>
Con gli argomenti uno sotto l'altro.
In questo caso tutti gli elementi racchiusi tra i tag H1 avranno il colore rosso, font Arial e grandezza 13.
Fogli di stile esterni
All'interno dell'head viene richiamato un foglio si stile esterno alla pagina:
Stando ben attenti a inserire il percorso corretto in cui si trova il foglio di stile, in questo modo potremo applicare la stessa formattazione a tutte le nostre pagine web, basta inserire questa dicitura nell'head delle pagine in cui vogliamo utilizzarlo.
Vedremo meglio la sintassi dei css nelle prossime lezioni....
Vediamo gli attributi che possiamo utilizzare con ogni campo.
<input type= text”>
size: larghezza del campo, a seconda di questo attributo si definisce la quantità di dati che visualizzeremo.
Maxlength: massima quantità di dati che possiamo immettere
name: nome interno al campo, che il programma che preleverà i dati
value: valore di default.
align: l'allineamento del field. Puoi scegliere tra : top, middle, bottom, right, left.
Gli stessi attributi si possono applicare ai field password, che sono sempre campi di testo, quello che cambia e che la password immessa non è visibile sul monitor.
Per la textarea, invece abbiamo gli attributi:
<textarea> Questa è l'area di testo </texarea >
cols e rows, ovvero il numero massimo di righe e di colonne del campo.
Name= aggiungere un nome interno al field
wrap = questo attributo può essere, wrap = “off “(il testo è visto come una lunga serie senza gli a capo), wrap = “virtual” (il testo va a capo, ma quando viene inviato diventa una riga unica, 2wrap=physical “il testo va a capo e quando viene inviato rimane così com'è, con tutti gli a capo).
La checkbox, permette di selezionare più scelte, a differenza dei bottoni radio, per cui ne vale solo una.
Name= nome del campo, utili per il programma che riceverà le informazioni.
Value= indica quale opzione è stata scelta, e quindi, ciò che verrà inviato al programma ricevente.
Align= il solito allineamento.
Se aggiungiamo l'attributo checked="checked", vuol dire che stiamo scegliendo questa opzione come standard.
Inutile dire che questi attributi valgono anche per il type = radio, ovvero per i bottoni radio.
I menù a discesa, permettono anch'essi la scelta tra varie opzioni, funziona come i bottoni radio o la checkbox.
Il tag è :
<select>
<option value= “primascelta”> primo </option>
<option value = “secondascelta”> secondo </option>
</select>
Gli attributi di select sono:
name = nome del menù a discesa. Viene scritto select .
Size = quante scelte sono visibili nello stesso momento, di default è una.
Multiple = è presente la scelta multipla.
Gli attributi di option
value =cosa verrà inviato al programma ricevente.
Selected = la voce selezionata di default.
I bottoni di invio < input type = “submit”>, hanno come attributi
name = il nome del bottone
value = il nome visualizzato sul bottone
align = allineamento
tabindex = ordine in cui i campi verranno attivati.
Il tasto reset <input type = “reset”> ha come attributi:
name = il nome del bottone
value = il nome visualizzato
align = l'allineamento
tabindex = ordine in cui i campi verranno attivati.
Gli attributi dell' <input type =”image”> sono:
name = il nome dell'immagine
src = l'indirizzo dell'immagine
align = l'allineamento
border = il bordo intorno all'immagine
height = l'altezza dell'immagine
width = la larghezza dell'immagine
vspace = lo spazio bianco sopra e sotto l'immagine
hspace = lo spazio a destra e sinistra dell'immagine
tabindex = ordine in cui i campi verranno attivati
Facciamo un esempio:
<html>
<title> Il mio form </title>
<body>
<form name = "Contattaci" method ="post" action="http://www.miodominio.com/myformhandler.cgi" >
<fieldset>
<p align = "center">
<legend > dati utente :</legend>
<input type = "text" name = "nome" value = "Il tuo Nome">
<input type = "text" name = "cognome" value = "Il tuo Cognome">
</p>
<p align ="center">
<label > Scrivici: <br/>
<textarea cols ="60" rows="10" wrpa ="physycal">
Scrivi qui il tuo messaggio
</textarea>
</p>
</fieldset>
<p align = "center">
<label> Password: <input type ="password"></label><br/>
<label> Linguaggio di programmazione preferito: <br />
<select>
<option>Java</option>
<option>C++</option>
<option> Php </option>
<option> Altro </option>
</select>
</label><br/>
<label> Linguaggi conosciuti: <br />
<select multiple ="multiple" size ="5">
<option>Java</option>
<option>C++</option>
<option> Php </option>
<option> Html</option>
<option> Css </option>
</select>
<p>
<fieldset>
<p align = "center">
<label> Accetti termini e condizioni?
<input type= "radio" name = "option1" checked = "checked"> Si
<input type = "radio" name= "option2" > No
</label>
</filedset><br />
<input type ="submit" name ="invia" value="Invia" align ="center">
I forms sono semplicemente dei moduli che ci permettono di interagire con l'utente. In realtà, per lavorare su questo tipo di elementi abbiamo bisogno, oltre che della pagina che verrà visualizzata dall'utente anche di una pagina secondaria che verrà creata con un linguaggio più complesso come asp o php, ad esempio.
Quindi sono dei form quei moduli che ci permettono di iscriverci ad un sito web o di fare una ricerca all'interno di un sito.
Dato che questo è un corso di html, ci occuperemo solo della parte grafica di questi elementi.
L'inizio e la fine di un form viene indicata dal tag
<form>
<!--Questo è un form-->
</form>
Per dare un nome al form utilizziamo l'attributo name:
Il metodo get è indicato quando devono essere inviati pochi parametri e per lo più testuali, dato che questi vengono passati come indirizzo alla pagina che li riceverà.
Quindi nell'url di risposta avremo tutti i dati dopo il punto interrogativo:
Il metodo post, invece, è indicato se abbiamo una gran mole di dati e se dobbiamo passare dei dati sensibili come una password, infatti esso non usa la barra degli indirizzi, ma contatta la pagina che deve gestire i dati e poi li invia direttamente ad essa
All'interno di un form, indichiamo con fieldtest delle aree in cui andremo a suddividere il nostro form
<form>
<fieldset>
<legend> dati utente</legend>
</fieldset>
<fieldset>
<legend>dati di fatturazione</legend>
</fieldset>
<fieldset>
<legend>termini e condizioni</legend>
</fieldset>
</form>
Avremo:
Abbiamo creato un form con tre sezioni e con il tag <legend>, gli abbiamo assegnato un nome.
Se vogliamo dare un etichetta ad un campo, dobbiamo usare il tag <label>
Vediamo come creare i campi.
Essi possono essere di testo, dei bottoni, una checkbox, ecc....
Per crearli dobbiamo scrivere: <input type = text>, ad esempio se vogliamo creare un campo di testo.
<form>
<fieldset>
<legend> dati utente</legend>
</fieldset>
<label> Nome: <input type= “text”></label>
<input type=”text”><label> : Cognome </label>
</form>
Il risultato sarà:
Vediamo i vari tipi di campi:
<input type=”text”> = inserisce una riga di testo
<textarea> più righe di testo </texarea>
<input type= “password”> = inserisce il campo per una password
<input type=”checkbox” name = “option” value=”Accetto”> Accetto termini e condizioni = consente la scelta di più opzioni spuntando una casella
<input type= “radio” name = “option” value=”Accetto”> Accetto termini e condizioni = come checkbox, con la differenza che si può spuntare solo una casella
= con option e select creiamo dei menù a discesa. Questi contengono tante opzioni, quanti option ci sono tra il campo select.
<input type= “submit” value= “invia”> = bottone di invio
<input type= “submit” value= “cancella”> = riporta i tutto ai valori di default
<input type= “image” src =”immagine.jpg” value= “invia”> = hanno lo stesso effetto dei valori di invio ma con la differenza che viene visualizzata un'immagine al posto del bottone
Nota che qui il tag input non ha bisogno di chiusura.
Vedremo che questi tag possono essere formattati a piacere.
