Aller à : navigation, rechercher

Creer livre heros

Créer un livre dont vous êtes le héros

Heros.jpg

Description :

Objectif : créer un livre dont vous êtes le héros en utilisant JavaScript de manière simple et efficace.

Description du projet : Nous allons créer ici un livre dont vous êtes le héros en JavaScript. Le JavaScript est un langage de programmation qui permet d’animer des pages Web. Les pages web se programment avec deux langages : le HTML (sert à la rédaction du texte et des pages web) et le CSS (sert à la mise en forme du texte et des pages).

Voici quelques exemples de ce que l'on peut en faire en JavaScript dans une page Web :

- ouvrir des pop-up

- faire défiler un texte

- insérer un menu dynamique (qui se développe au passage de la souris)

- proposer un diaporama d’images

- avoir une horloge "à aiguilles"

- faire en sorte que des images suivent le pointeur de la souris

- créer de petits jeux

- créer un livre dont vous êtes le héros

- etc.

Superho.jpg


Pour cet exercice, nous avons besoin de seulement deux choses : le bloc-notes de votre ordinateur et un navigateur web qui sera Firefox ici.

Créer vos fichiers :

1) Créer un dossier pour votre livre : il faut mettre tous les fichiers qui sont indispensables à sa création dans le même dossier. Ces fichiers interagissent ensemble et doivent donc être au même endroit.

2) Créer avec le bloc note un fichier hmtl : il faut absolument le renommer « héros.html ».

3) Créer avec le bloc note un fichier css : il faut absolument le renommer « style.css ».

4) Créer un dossier image : c’est là que vous allez mettre vos images que vous voulez insérer dans votre histoire comme l’arrière-plan par exemple.

Dosscrees.jpg

La programmation

1) Dans le fichier html : insérer ce programme. Cela permet d’activer le langage html et le clavier pour écrire du texte.

Progr1.jpg Progr2.jpg Progr3.jpg Progr4.jpg Progr5.jpg Progr6.jpg

2) Inclure des images dans ton histoire :

Illhistoire.jpg

Nous allons insérer limage 1 dans le fichier CSS car il s’agit de l’arrière-plan donc de la mise en forme de notre texte.

L’image 2 sera incluse dans le fichier HTML car on souhaite que notre photo survienne en plein milieu de notre histoire, il faut donc l’insérer avec notre code javascript.

Codimages.jpg Codeimages2.jpg

Lancer le jeu

Vous pouvez ainsi lancer le jeu en ouvrant le fichier HTML avec Firefox : clic droit ouvrir avec Firefox.

Lancerjeu.jpg

Si vous voulez remodifier le fichier, vous faites la même procédure mais en ouvrant avec le bloc-notes.

Modifier1.jpg

Ce programme est configuré spécifiquement pour l’ouvrir avec Firefox. Cela peut changer entre les navigateurs.


Lexique :

Les Variables

Une variable est une valeur que l’on va stocker en mémoire dans l’ordinateur et qui va pouvoir être réutiliser continuellement sans être rentrée de nouveau et qui varient sans cesse. Par exemple dans un jeu vidéo, les variables sont le score, le nombre de vie, le chronomètre. Ce sont des informations que l’on enregistre dès le début et que l’on garde en mémoire pour tout au long du jeu. Ces informations vont alors varier en fonction de la partie en cours comme le nombre de vie qui va diminuer si l’on perd contre un ennemi ou le chronomètre qui descend jusqu’à zéro et qui termine la partie quand il arrive à zéro. Attention pour stocker une valeur dans une variable, on utilise un = simple.

Exemple :

On définit une variable pour l’âge :

Var age = 18;

Les conditions :

Les conditions permettent de tester les variables. Elles se caractérisent sous forme de question et se traduisent par si/sinon. Exemple :

Conditions1.jpg

On en utilise dans la vie de tous les jours par exemple, SI il pleut je vais prendre un parapluie SINON je vais mettre une casquette car il fait beau.

Les comparateurs

Pour comparer des valeurs, nous utilisons les signes mathématiques : Le « == » : il signifie égal. Le « > » : il signifie supérieur à. Le « < » : il signifie inférieur à. Le « != » : il signifie différent.

Quand nous voulons qu’une valeur soit inférieure ou égale, soit supérieure ou égale, il faut mettre les deux signes côte à côte : Le « <= » : il signifie inférieur ou égal à. Le « >= » : il signifie supérieur ou égal à.

Si on veut comparer plusieurs données, on peut utiliser les signes && (et) et || (ou).

Exemple :

Comparateur1.jpg

La syntaxe 

Un projet se code à plusieurs. La lisibilité dans l’écriture de la syntaxe est donc une notion importante pour tout programmeur voulant échanger, partager et travailler son code avec les autres.

Il est possible de proposer une organisation du code plus lisible que celle proposée par l'application :

Syntax1.jpg Syntax2.jpg


Ludivine Perard,

Médiatrice numérique

Bibliothèques de Chalons-en-Champagne