Vous êtes sur la page 1sur 1

SNT seconde 21 22 : LE WEB 21 22

Le Java
Le HTML permet d’écrire des pages web. (le fond).
Les développeurs utilisent le style pour mettre en forme les pages ils utilisent en fait des feuilles de
styles ou ils regroupent les paragraphes de même style.
Pour rendre les pages interactives, on utilise le Java script.
Ce langage permet de programmer des évolutions de la page en fonction des actions de l’utilisateur.
Cependant cela reste de la programmation, parfois complexe.

En langage Java on écrit des scripts où on écrit des fonctions qui décrivent ce qu’on veut faire :
Voici un exemple de fonction à ecrire dans le corps de votre page.
<script language="javascript">
function afficheMessage() {alert('Vous avez cliqué !');}
</script>

Les scripts sont déclenchés par un évènement donné : (ici un clic sur le bouton).
Ecrivez ces lignes dans le corps de votre page.
<div style="text-align:center" >Cliquer sur le bouton ci-dessous<br>
<input type="button" value=" Ici " onClick="afficheMessage()">
</div>

Dans ce cas on fait afficher une « fenêtre d’alerte » qui affiche un message. ESSAYEZ !

On peut ainsi agir sur tous les éléments de la page :


Soit le script agit sur la zone où il est écrit : l’exemple montre où ecrire le script.
<a onMouseOver="this.style.backgroundColor='#FF9999'"
onMouseOut="this.style.backgroundColor='#FFFFCC'">
bonjour
</a> TESTEZ !

Soit il faut identifier ce sur quoi on veut agir. Il faut donc ajouter dans la balise id= « identifiant »
<script language="javascript">
function changeimage(url) {
document.getElementById('image').src=url; //Avec l'identité
//Ou avec le nom : document.image.src=url;
}
</script>

<img id="image" src="logoV2S.jpg" />

<a href="javascript:;" onMouseOver="changeimage('autrelogo.jpg')"


onMouseOut="changeimage('logoV2S.jpg')" >
Ici ça change
</a>

Essayez par exemple de faire grandir votre nom sur la page html quand la souris passe dessus.
Faites afficher votre photo quand on passe la souris sur votre prénom
Affichez le logo de V2S quand on passe la souris sur le lien html

Consultez la page http://www.ostralo.net/javascript/pages/pageE2.htm pour ajouter quelques effets sur


votre page.

N’oubliez pas de renvoyer votre travail.

Vous aimerez peut-être aussi