fishScript.com d
Home| Progetto| Web| Faq| Acronimi

Argomenti

Documenti pubblicabili:1120
Scripts:1282
Documenti non pubblicabili:162
Categorie tematiche:68
.Net
   |_C#
   |_Visual basic.net
   |_Asp.net
Active Server Pages
C++
Cascade Style Sheet
JavaScript
Mysql
Php
Xml
Java
   |_Java 2 Micro Edition
   |_Java server pages
   |_Java Servlet
Oracle
   |_PLSQL
PostgreSQL
Unix






PLSQL... Script: Scrivere su un file


Un servizio Web XML è un'unità logica di applicazioni che fornisce dati e servizi ad altre applicazioni. Le applicazioni accedono ai servizi Web XML tramite protocolli Web universali e formati di dati quali HTTP, XML e SOAP.



La J2EE (Java 2 Enterprise Edition) è dedicata a tutti coloro che desiderano aggiungere il supporto della versione Enterprise di Java (ad esempio a Tomcat) e quindi le funzionalità avanzate come Enterprise JavaBeans etc.

Un servizio Web XML è un'unità logica di applicazioni che fornisce dati e servizi ad altre applicazioni. Le applicazioni accedono ai servizi Web XML tramite protocolli Web universali e formati di dati quali HTTP, XML e SOAP.

JavaScript

Home >JavaScript > Effetti dinamici con Css e Javascript

Stampa  Stampa


Mouse Here











Obiettivo

Questo documento prende in esame alcune tecniche di iterazione tra codice javascript e stili css, per illustrare le potenzialità di dinamismo e di interazione con l'utente delle pagine web. Il codice riportato è supportato sia da da browser Microsoft Explorer (Provato con vers. 5 e superiori) che da browser Mozilla Firefox(Provato con vers. 0.9 e superiori).
Inoltre il documento è di tipo XHTML 1.0 Transitional e conforme alle direttive W3C.
Il codice sorgente e l'output di questo esempio è disponibile nel file effettidinamici.html, usando l'opzione Salva oggetto con nome si può scaricare il file nel proprio computer e prendere in esame il codice.

Prerequisiti

Per questo tutorial è utile la conoscenza anche solo superficiale di Javascript e dei fogli di stili Css.

Definire i Div

Per questo esempio sono necessari 5 div che saranno definiti da 5 relative classi nel foglio di stile Css.
Ad esempio il square0 è così definito:

div.square0 {
width:50px;
height:50px;
background: #000;
border: 1px solid #190581;
position: absolute;
top: 150px;
left: 100px;
visibility:hidden;
}


La proprietà e relativo valore postion:absolute indica al browser che il blocco deve essere visualizzato nelle coordinate specificate, rispetto al contenitore padre. Le coordinate sono specificate da top e left che si riferiscono rispettivamente alla distanza in pixel dalla parte superiore e da quella sinistra della pagina.
Le proprietà width e height con i loro valori stabiliscono le dimensioni del div in larghezza e altezza.
La classe squareRun rappresenta, come si illustra più avanti, un'area sensibile che scatena gli eventi, contenente anche le proprietà che definiscono lo stile del testo contenuto nel div:

(...)
color:#FFF;
text-align:center;
font-size: small;
font-family: verdana, arial, serif;
font-weight: bold;


Definite le altre classi per i div, con coordinate width e height che li dispongano a croce, all'interno del Body del documento xhtml occorre creare i relativi div e applicarvi le classi di stile appena create:

<div class= "square0" id="Div1"></div>
<div class= "square1" id="square0"></div>
<div class= "square2" id="square0"></div>
<div class= "square3" id="square0"></div>
<div class= "squareRun" onmouseover="showSquare()" onmouseout="hideSquare()" id="squareRun">
Run
</div>


L'ultimo div, con id squareRun, è definito dalla relativa classe: dimensioni 50x50 pixel posizionato a 200 pixel dal margine superiore della pagina e da 100 rispetto a quello sinistro, è un elemento sensibile a a due eventi:

quando il puntatore del mouse è sopra la superficie del div (onmouseover) aziona la funzione showSquare;

quando il puntatore del esce dalla superficie del div(onmouseout) aziona la funzione hideSquare.

Nel codice Javascript l'istruzione centrale della funzione showSquare() è rappresentata dalla seguente riga:

setTimeout("document.getElementById('square0').style.visibility='visible'",1000);


L'istruzione setTimeout esegue:

document.getElementById('square0').style.visibility='visible'"

che identificando gli elementi atraverso il loro id stabilisce il tempo di attesa rispetto al tempo in cui è stato scatenato l'evento (onmouseover) in millesecondi (i quattro div vengono visualizzati a distanza di 100 millesecondi).

La funzione hideSquare scatenata dall'evento hideSquare semplicemente imposta la proprietà visibility a nuovamente nascosta (hidden).



Warning: include(ads/text468x15.html): failed to open stream: No such file or directory in D:\inetpub\webs\fishscriptcom\documents\view_document.php on line 131

Warning: include(): Failed opening 'ads/text468x15.html' for inclusion (include_path='.;C:\php\pear') in D:\inetpub\webs\fishscriptcom\documents\view_document.php on line 131

Tutorial
Effetti dinamici con Css e Javascript Nascondere e visualizzare elementi nella pagina   [JavaScript] 
Script
Semplice esempio con onchange e this.value Costrutti elementari per disegnare pagine dinamiche  [JavaScript] 
Demo charAt() Operazioni sulle stringhe. Acquisizione valori dai campi input della pagina.  [JavaScript] 
Calcolatrice on line Operatori matematici. Costrutto switch. Iterazione con glie lementi della pagina  [JavaScript] 
Eventi e bottoni radio Iterazioni con il client  [JavaScript] 
Inserimento e visualizzazione un'immagine Caricare e visualizzare un'immagine nella pagina e controllore che il file abbia una estensione ammessa  [JavaScript] 
Generare un numero casuale Funzioni matematiche  [JavaScript] 
Inclusione di un file con JavaScript Chiamare uno script contenuto in un altro file  [JavaScript] 
Leggere il valore selezionato in una combo Controllo della pagina e degli input del client.  [JavaScript] 
Metodo setTime Gestione eventi nella pagina  [JavaScript] 
Operazioni di sottrazione e somma Semplici calcoli matematici.  [JavaScript] 
Reset della pagina Elementi di controllo sulla pagina  [JavaScript] 
Stringhe: concatenazione e stampa Operazioni di base  [JavaScript] 
Controllo di eguaglianza di stringhe in due campi Controlli sui campi input  [JavaScript] 
Time Out ed eventi Dopo un determinato intervallo invia ad un'altra pagina  [JavaScript] 
Images preload and mouse over / out effect Manipolating events as mouse over/out and objects as images in the html context  [JavaScript] 

signal Marco Magnani marcomagnani@fishscript.com



Cerca





Well-formedness is a new concept introduced by [XML]. Essentially this means that all elements must either have closing tags or be written in a special form (as described below), and that all the elements must nest properly.


Well-formedness is a new concept introduced by [XML]. Essentially this means that all elements must either have closing tags or be written in a special form (as described below), and that all the elements must nest properly.




Oracle... Definizioni: Area PGA





fishScript.Com is accessible by Mobile access technology as mobile phones, Palm and Pocket PC .

Nicoleta e Marco Magnani tutorial, examples, courses, esempi, corsi, esercizi, appunti vari Dottoressa Nicoleta Dragu Formatrice Docente Insegnante Mediatrice Culturale Dott. Marco Magnani Universita La Sapienza Roma Master Computer Science Hunter College New York , Data Base Administrator DBA oracle System architect

Last modified: 2017-11-30 amministratore@fishscript.comNico and Marco Magnani Software Production
Home|About this Site © 2003-2008 www.fishScript.com ®