Le Javascript est un langage de programmation qui peut être lu et exécuté par votre navigateur. Contrairement au html et au css, il contient des instructions conditionnelles, des boucles ... Vous pourrez avec ce langage rendre votre site intéractif en traitant des informations saisies par l'utilisateur ou en créant des animations.
Dans un premier temps, nous allons afficher l'heure de l'ordinateur dans le pied de page du site précédent dont les codes html et css sont les suivants.
Code html.
<!DOCTYPE!>
<html>
<head>
<html lang="fr">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titre de mon site</title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class='wrapper'>
<div id='header'>
<h1><a href='index.html'>Formation CSS</a></h1>
<div>Mon premier site internet et patati et patata. Ceci n'a aucun intéret dans cette entête, mais
en mathématiques, un groupe est un magma associatif et unifère dans lequel chaque élément est symétrisable.</div>
</div>
<div id='content'>
<div id='sidebar'>
<ul id='main-nav'>
<li><a href='http://lepoittevin.olivier.free.fr'>Site de Mr Le poittevin</a></li>
<li><a href='#' onclick="alert('En cours de construction')">écrire</a></li>
<li><a href='#' onclick="alert('En cours de construction')">catégories</a></li>
<li><a href='#' onclick="alert('En cours de construction')">contac</a></li>
</ul>
</div>
<div class='contents'>
<div class="entry">
<p>Amoureux de la prose, jeune vagabond lyrique, qui se découvre et se délie la langue après
deux shots de tequila paf, et se pose en spectacle pour délivrer ses besoins de reconnaissance et de luxure, prenez
place et sortez vos neurones, l’heure est à l’étude.</p>
</div>
<div class="entry">
<p>Tout ça avait pour but d'illustrer le péril du conformisme, et la difficulté de préserver
vos convictions, quoi qu'en pense les autres. [...] Nous avons tous besoin d'être accepté, mais soyez persuadé que vos
convictions sont uniques, les vôtres, même si on les trouve anormales ou impopulaires, même si le troupeau dit « C'est
maaaaaaaaal ».<br> Robert Frost a dit : « Deux routes s'offraient à moi, et là j'ai suivi celle où on n'allait pas, et
j'ai compris toute la différence. »</p>
<p><i>Robin Williams, Le Cercle des poètes disparus (1989), écrit par Tom Schulman</i></p>
</div>
</div>
</div>
<div id='footer'> Texte du pied de page
</div>
</div>
</body>
</html>
Code css.
/* Dans ce site, on va essayer de placer les éléments dans le flux, c'est à dire qu'il seront placés
les uns après les autres.*/
body{
/* L'image de fond sera dans le dossier img */
background: url(../img/fond_img.jpg) repeat center top transparent;
}
.wrapper{
/* Le wrapper n'aura pas de marge et occupera 100% de l'écran pour sa largeur */
margin: 0;
width: 100%;
}
#header{
margin-left:5%; /* Marge correspondant à 5% de la largeur de l'écran */
margin-top: 2%;
width: 90%; /* L'entête occupera 90% de la largeur de son parent, c'est à dire le block .wrapper */
background-color: rgba(0,0,0,0.7); /*La couleur sera noire (0,0,0) et aura une opacité de 0.7 */
color: #FFFFFF;
border-radius: 5px;/* Angle arrondis */
}
#content{
/* Définition des marges, largeur */
display: inline-block;
margin-left: 5%;
margin-top: 2%;
width: 90%;
}
#footer{
/* Définition des marges, largeur et hauteur */
margin-top:2%;
width: 100%;
height: 10%;
/* Couleur du fond */
background-color: #000000;
color: #FFFFFF;
border-radius: 5px;/* Angle arrondis */
}
#sidebar{
/* Sidebar sera positionné en ligne */
display:inline-block;
/* Définition dés marges, hauteur et largeur */
margin-top: 2%;
margin-left: 3%;
margin-bottom: 2%;
width: 25%;
}
.contents{
/* Sidebar sera positionné en ligne */
display:inline-block;
/* Définition dés marges, hauteur et largeur */
float: right;
margin-top: 2%;
margin-right: 3%;
margin-bottom: 2%;
width: 65%;
background-color: rgba(0,0,0,0.6); /*La couleur sera noire (0,0,0) et aura une opacité de 0.7 */
color: #FFFFFF; /* La couleur du texte sera blanche */
border-radius: 5px;/* Angle arrondis */
}
.entry{
margin-left: 5%;
margin-top:2%;
width: 90%;
border-bottom: 1px solid #CEC6B5; /* bordure en bas de .entry de 1 pixel d'épaisseur */
}
h1{
text-align: center; /* Centre tous les titre h1 comme le titre de l'entête */
}
a { /* on donne une couleur à tous les liens du document */
color: #FF0000;
text-decoration: none;
text-align: left;
text-transform: uppercase; /* transforme le texte en majuscule */
}
#main-nav li {
padding: 10px 4px 6px 6px;
margin: 5px 0px;
background-image: linear-gradient(#fff,#aaa);
border-radius: 20px;
list-style: none; /*on enleve les icones de liste */
}
Sans l'image de fond, vous devriez obtenir le site suivant :
Les scripts s’insèrent dans un document HTML avec la balise <script>, par exemple :
<script type="text/javascript">
var montexte = "Bonjour, j'espère que tout va bien";
alert(montexte);
</script>
Cependant, comme pour les feuilles de style, il est beaucoup plus avantageux de séparer les scripts du document en les plaçant dans des fichiers avec extension .js. On liera alors notre script à notre document (entre les balises <head> et </head>) de cette manière :
<head>
<html lang="fr">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titre de mon site</title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
Créons d’abord dans notre arborescence (au même niveau que le fichier html) un dossier js puis à l’intérieur un fichier nommé scripts.js que vous lierez au document HTML comme vu plus haut. Dans ce fichier nous allons écrire :
var montexte = "Bonjour, j'espère que tout va bien";
alert(montexte);
En rafraichissant votre navigateur, vous devriez voir apparaître une fenêtre d'alerte comme dans l'image suivante. Le site apparaîtra après avoir cliquer sur OK, et cela parceque le script a été executé avant la balise body, c'est à dire avant tout affichage de block.
Si vous appeler le script juste après "<div class='contents'>" vous devriez obtenir l'image suivante :
En effet, la fênetre apparaît à l'endroit où le script est éxécuté.
Revenons maintenant à notre exemple d'affichage de l'heure dans le pied de page en changeant le code dans le fichier "script.js" par le texte ci-dessous.
// la variable date contient la date courante obtenu par la classe Date
var date = new Date();
// la variable mois contient le N° du mois à partir de 0
// pour un affichage cohérent on ajoute donc 1
var mois = date.getMonth() + 1;
var annee = date.getFullYear();
var jour = date.getDate();
var heure = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
// on affiche le résultat à l'aide de la classe document
// le <br /> sert à écrire un élémént HTML qui effectuera
// un saut de ligne
document.write(jour + " / " + mois + " / " + annee + "<br />");
document.write(heure + " : " + min + " : " + sec);
Que fait le script ? Il récupère la date du jour à l’aide de la classe Date (objet interne au javascript qui se charge de récupérer la date sur l’ordinateur ou il est exécuté. Encore une fois, rappelons que le javascript est exécuté côté client. Ainsi 2 ordinateurs qui iraient qui iraient chercher la même page index.html sur le même serveur pourraient se retrouver avec 2 dates complètement différentes !), prépare son affichage pour le rendre lisible à l’œil humain (l’ajout du +1) puis l’affiche à l’aide de la classe document.
On notera qu’en Javascript :
La encore, vous pouvez constater dans le navigateur que le résultat est correct mais qu’il s’affiche tout en haut, en dehors des grands blocs HTML. C’est tout à fait normal, l’affichage du résultat d’un script se fait à l’endroit où est exécuté le script et si le script est exécuté avant la balise <body>, le résultat sera affiché automatiquement juste après cette dernière.
Maintenant si nous voulons un affichage en bas de page, il suffirait de déplacer la ligne suivante dans le bloc #footer :
Supprimons de notre fichier js les deux lignes servant à l’affichage document.write puis modifions le code javascript en l'insérant dans une fonction onload comme dans le code suivant :
window.onload = function () {
// la variable date contient la date courante obtenu par la classe Date
var date = new Date();
// la variable mois contient le N° du mois à partir de 0
// pour un affichage cohérent on ajoute donc 1
var mois = date.getMonth() + 1;
var annee = date.getFullYear();
var jour = date.getDate();
var heure = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
// on stocke l'affichage de la date et heure dans des variables
var formatD = jour + "/" + mois + "/" + annee;
var formatH = heure + " : " + min + " : " + sec;
// on prépare une nouvel élément HTML <p> en le stockant dans une variable
var nouveauParagraphe = document.createElement('p');
// on lui assigne un attribut supplémentaire
nouveauParagraphe.setAttribute('title','voici le titre de mon paragraphe');
// on prépare du texte que l'on assigne au paragraphe
// on anti-slashe l'apostrophe puisque l'apostrophe sert de caractère d'entourage
// à la chaine de caractères
var duTexte = document.createTextNode('Nous sommes aujourd\'hui le '+formatD+' et il est '+formatH);
nouveauParagraphe.appendChild(duTexte);
// enfin on peut insérer notre nouvel élément à l'intérieur d'un autre élément HTML
document.getElementById('footer').appendChild(nouveauParagraphe);
}
La fonction window.onLoad permet de s'assurer que le script sera executé une fois la créations des éléments html terminé, dans le cas contraire, il risque d'inséré notre nouvel élément dans un block pas encore crée. Le résultat obtenu est le suivant :
