Formations à l'informatique et à l'électronique

Auteur : SD
Modifié le : 30-08-2017
Créé le : 02-12-2015

Introduction au Javascript

Sommaire

Introduction
Premier code JavaScript
Utilisation d'un Objet
Tests et boucles
Fonctions
Les évènements
Mini-projet N°1 : Balle rebondissante
Mini-projet N°2 : Tri
Pour aller plus loin
Articles connexes
Références

Introduction

Pourquoi apprendre le Javascript ?

Javascript est un des 3 langages que les dévellopeurs Web doivent connaitre :

  1. HTML pour définir le contenu des pages Web
  2. CSS pour définir la disposition et le style des pages Web
  3. Javascript pour définir le comportement des pages Web

Ce tutoriel est sur Javascript et comment Javascript fonctionne avec HTML et CSS.

Javascript a été inventé par Brendan Eich en 1995. Attention même si leur nom est proche, Javascript et Java sont des langages totalement différents.

Javascript peut modifier dynamiquement le contenu du HTML. Il est donc très utilisé dans les pages WEB. Il s'écrit directement dans le code HTML dans une balise spéciale. A l'inverse de PHP, le JavaScript est exécuté par l'ordinateur client et non pas par le serveur WEB.

Premier code JavaScript

Dans Notepad++, créer un nouveau fichier et taper le code suivant :

<script>
document.write('Mon premier code JavaScript!');
</script>

Enregistrer ce fichier sous le nom "javascript_01.html" et l'ouvrir avec un navigateur Web. Visualiser le code source de la page.

Remarques

Utilisation d'un Objet

Dans Notepad++, créer un nouveau fichier et taper le code suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Deuxième code JavaScript</title>
</head>
<body>
<p>Bonjour, nous sommes le
<script>
var d = new Date(); // Création d'un nouvel objet date nommé d
document.write(d.toLocaleDateString() + ', il est ' + d.toLocaleTimeString());
</script>
.</p>
</body>
</html>

Enregistrer ce fichier sous le nom "javascript_02.html" et l'ouvrir avec un navigateur Web.

Remarques

Tests et boucles

Comme dans tous les langages, JavaScript permet de réaliser des tests et des boucles.

La syntaxe est très proche (voir identique au php, au Java, au C,...).

Dans Notepad++, créer un nouveau fichier et taper le code suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Troisième code JavaScript</title>
</head>
<body>
<p>
<script>
var d = new Date(); // Création d'un nouvel objet date nommé d
var heure = d.getHours();
if (heure >= 0 && heure < 17)
{
document.write('Bonjour');
}
else
{
document.write('Bonsoir');
}
document.write(', nous sommes le ' + d.toLocaleDateString() + ', il est ' + d.toLocaleTimeString());
</script>
.</p>
</body>
</html>

Enregistrer ce fichier sous le nom "javascript_03.html" et l'ouvrir avec un navigateur Web.

Remarque

Fonctions

Comme dans tous les langages, JavaScript permet de créer ses propres fonctions.

Dans Notepad++, créer un nouveau fichier et taper le code suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Quatrième code JavaScript</title>
<script>
function estLaJournee(heureATester)
{
return (heureATester>=0) && (heureATester<17);// Renvoie Vrai si l'heure est comprise entre 0 et 17h
}
</script>
</head>
<body>
<p>
<script>
var d = new Date(); // Création d'un nouvel objet date nommé d
var heure = d.getHours();
if (estLaJournee(heure))
{
document.write('Bonjour');
}
else
{
document.write('Bonsoir');
}
document.write(', nous sommes le ' + d.toLocaleDateString() + ', il est ' + d.toLocaleTimeString());
</script>
.</p>
</body>
</html>

Enregistrer ce fichier sous le nom "javascript_04.html" et l'ouvrir avec un navigateur Web.

Remarques

Les évènements

Il est possible d'exécuter du code Javascript en fonction des différents évènements qui peuvent se produire dans une page HTML (clic de souris, appuie sur une touche du clavier,...).

Dans Notepad++, créer un nouveau fichier et taper le code suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cinquième code JavaScript</title>
</head>
<body>
<button onclick="maFonction()">Clic sur moi !</button>
<p id="demo"></p>

<script>
function maFonction() {
document.getElementById("demo").innerHTML = "Bonjour";
}
</script>

</body>
</html>

Enregistrer ce fichier sous le nom "javascript_05.html" et l'ouvrir avec un navigateur Web.

Remarques

Dans Notepad++, créer un nouveau fichier et taper le code suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sixième code JavaScript</title>
</head>
<body>
<p onclick="fonctionCouleur(this, 'red')">Cliquer pour changer la couleur du texte du paragraphe 1.</p>
<p onclick="fonctionCouleur(this, '#0000FF')">Cliquer pour changer la couleur du texte du paragraphe 2.</p>
<p onclick="fonctionCacher(this)">Cliquer pour cacher le paragraphe 3.</p>

<button onclick="rechargerPage()">Reset</button>

<script>
function fonctionCouleur(elt,couleur) {
elt.style.color = couleur;
}

function fonctionCacher(elt) {
elt.style.display = "none";
}

function rechargerPage() {
location.reload();
}
</script>

</body>
</html>

Enregistrer ce fichier sous le nom "javascript_06.html" et l'ouvrir avec un navigateur Web.

Remarques

Mini-projet N°1 : Balle rebondissante

Dans Notepad++, créer un nouveau fichier et taper le code suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mini-projet N°1 : Balle rebondissante</title>
<style type="text/css">
div#balle {
position: absolute;
left: 1px;
top: 1px;
}
</style>
<script>
function deplaceBalle()
{
var maBalle = document.getElementById("balle");
var posx,posy;

posx = maBalle.offsetLeft + 1;
posy = maBalle.offsetTop + 1;
if ((posy >= (window.innerHeight-52)) || (posx >= (document.body.offsetWidth-52)))
{
posx = 1;
posy = 1;
}
maBalle.style.left = posx + "px";
maBalle.style.top = posy + "px";
}
</script>
</head>
<body>
<p>Faire rebondir une balle sur les parois de la fenêtre du navigateur.
Écrire pour cela une fonction qui calcule si la balle touche le bord de la fenêtre ou non,
une autre qui calcule sa position suivante selon qu’elle rebondit sur le bord ou non.
On pourra prendre en compte la gravité.</p>

<div id="balle"><img src="balle.gif"></div>

<script>
alert("width : " + document.body.offsetWidth + " Height : " + window.innerHeight);
setInterval(deplaceBalle,10);
</script>
</body>
</html>

Enregistrer ce fichier sous le nom "javascript_05.html" et l'ouvrir avec un navigateur Web.

Le travail à faire pour ce mini-projet est détaillé dans le code ci-dessus. Les remarques ci-dessous peuvent vous aider.

Remarques

Résultat attendu

Voici une vidéo du résultat attendu pour ce mini-projet :

Une deuxième balle !

Ajouter une deuxième balle et détecter les colisions entre les deux balles. En cas de collision, les balles repartent en sens opposé.

Les critères de qualité de votre code seront :

Présenter sur papier au professeur la structures de votre programme (algorithme des différentes fonctions).

Mini-projet N°2 : tri

Vous pouvez télécharger le code complet de l'exemple ci-dessous à cette adresse : javascript_07.html

Ouvrir le fichier dans un navigateur Web. Tester et observer le fonctionnement.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
table
{
border-collapse:collapse;
color:#008000;
}
td
{
border:1px solid #666;
padding:1px 10px 1px 10px;
}
</style>
<title>Mini-projet N°2 : Tri d'un tableau</title>
<script>
function sortArray()
{
var liste= new Array(); // Création d'une liste

alltr = document.getElementById('listeATrier').getElementsByTagName('tr');

for (i=0;i<alltr.length;i++) // Insertion de tous les éléments dans la liste
{
liste[i]=new Array(); // Chaque élément de la liste est un tableau
var cells=alltr[i].getElementsByTagName('td');
liste[i][0]=cells[2].innerHTML;
liste[i][1]=cells[1].innerHTML;
liste[i][2]=cells[0].innerHTML;
}

liste=liste.sort();// Tri de la liste

for(i=0;i<alltr.length;i++) // Ré-insertion des éléments triés dans la page web
{
alltr[i].innerHTML='<td>'+liste[i][2]+'</td><td>'+liste[i][1]+'</td><td>'+liste[i][0]+'</td>';
}
}
</script>
</head>
<body>
<h1>Les sommets de France</h1>
<input type="button" onclick="sortArray()" value="Classer par altitudes" /><br/>
<table id="listeATrier" border=1>
<tr><td>Alpes</td><td>Mont Blanc</td><td>4810</td></tr>
<tr><td>Alpes</td><td>Dôme du Goûter</td><td>4304</td></tr>
...
<tr><td>Corse</td><td>Monte Renoo</td><td>2352</td></tr>
<tr><td>Corse</td><td>Incudine</td><td>2134</td></tr>
</table>
</body>
</html>

But du mini-projet

Pour aller plus loin

  1. Reprendre le mini-projet N°1, ajouter la possibilité de créer de nouvelles balles dynamiquement (en cliquant dans la fenêtre par exemple, voir exemple de code ici) tout en continuant à gérer les mouvements, les rebondissements et les collisions. La gestion des collisions pourra être améliorée en prenant en compte le point d'impact et la trajectoire initiale des balles.
  2. Ajouter dans le mini-projet N°2 un tableau de statistiques généré en Javascript qui indique :
  3. Dans le mini-projet N°2, créer votre propre fonction de tri d'un tableau (algorithme de votre choix) et l'utiliser dans la fonction sortArray(). Ajouter pour les 3 paramètres la possibilité de trier par ordre croissant et décroissant.
  4. Dans le mini-projet N°1, faire en sorte que au bout de 4 collisions les balles explosent et disparaissent de l'écran. On utilisera un Gif animé pour l'explosion.

Articles connexes

Premiers pas en HTML
Premiers pas en PHP
Les formulaires en PHP
Premiers pas en CSS
Accéder à une base Access (.mdb) en PHP

Références

Le site w3schools est le site de référence des langages du WEB.
http://www.toutjavascript.com/

De nombreuses ressources en Français!
Pour valider le code HTML de vos pages : w3.org
Pour valider le code CSS de vos pages : w3.org


Vous avez apprécié cet article ? Partagez le !

Article connexe : Premiers pas en HTML