docInitiation à la programmation
download 
Plainte Transcription
Initiation à la programmation
Initiation à la programmation
1. Qu'est-ce qu'un programme ?
1.1. Définitions:
Un ordinateur ne sait pas faire grand chose par lui-même, si ce n'est exécuter des taches simples qu'on lui
demande d'effectuer, et à condition qu'on lui explique pas à pas ce qu'il doit faire.
Par contre, il a une excellente mémoire, ne se trompe jamais dans ses calculs, et travaille très vite.
Un programme est une suite d'instructions (un protocole) qui spécifient étape par étape les taches
élémentaires que l'ordinateur doit effectuer pour atteindre l'objectif que l'on s'est fixé.
1.2. Le langage de programmation choisi dans ce cours est: HTML associé à javascript.
Il permet de réaliser des pages WEB qui peuvent être transférées d'un ordinateur à un autre via internet et
interprétées par un navigateur: internet explorer, mozilla firefox, google chrome,...
• Le langage HTML permet d'effectuer simplement la mise en page d'un document qui peut contenir du
texte, des images, des tableaux, des formulaires...
Le principe de base est d'encadrer le texte concerné par des balises (ou tags) qui spécifient une propriété de
ce texte lors de l'affichage: <b> gras </b> <i> italique </i> (FONT signifie "mise en forme du texte").
Exemple: <FONT color = "blue"> ce texte s'affiche en bleu puis plus <b> gros </b> </FONT>
• Le langage javascript peut être intégré directement au sein d'une page WEB pour la rendre dynamique et
lui permettre ainsi d'interagir avec l'utilisateur en effectuant des programmes en interne.
2. Structure de base d'une page HTML:
<html>
<head>
<title>programme n°1</title>
</head>
16 couleurs de
base en HTML
maroon red
orange olive
purple fuchsia lime
green
navy
blue
aqua
teal
silver
grey
black yellow
<body bgcolor="silver">
<FONT color = "red"> <i> ce texte s'affiche en rouge et en italique </i> </FONT>
<BR> <!-- commentaire: cette balise provoque un passage à la ligne -->
<FONT size = "10" color = "blue"> puis en bleu et plus <b> gros </b> </FONT>
</body>
</html>
Toute la page HTML doit être écrite entre la balise de début <html> et la balise fermante </html>.
Il y a 2 parties dans cette page:
* La balise <head> ouvre une zone appelée "tête du document". On peut y inscrire le titre du document
(qui apparaitra dans l'onglet ouvert par le navigateur Internet Explorer) et les programmes en javascript
qui doivent être effectués lors de la consultation de la page.
Puis on referme cette zone avec la balise </head>
* La balise <body> contient le corps du document: texte, images, tableaux, formulaires...
Puis on referme cette zone avec la balise </body>
* Les commentaires doivent être placés entre les balises <!-- et --> de façon à être ignorées par le
programme et ne pas apparaitre dans le document (sélectionner puis raccourci clavier Ctrl+Shift+C).
Tester ce programme n°1 et essayer de le modifier (couleurs, texte,...)
1
3. Principales balises HTML:
<BR> (balise célibataire!) → saut de ligne
(qui n'est pas une balise!) → espace insécable (décale la suite vers la droite)
<DIV align=center> et </DIV> ces balise peuvent contenir toute une partie de la page html et lui attribuer
le style indiqué dans la balise (ici: alignement centré mais on peut remplacer center par left ou right)
<H1> et </H1> délimitent un titre en gras et en grand.
La taille du titre diminue en augmentant l'indice associé à h de 1 vers 6
<P> et </P> délimitent un paragraphe.
Chaque paragraphe commence automatiquement sur une nouvelle ligne après avoir laissé un interligne
plus grand.
<font color="purple"> et </font> le texte encadré par ces balises sera écrit en violet.
<B> et </B> le texte encadré par ces balises apparaitra en gras (bold)
<I> et </I> le texte encadré par ces balises apparaitra en italique
<U> et </U> le texte encadré par ces balises apparaitra souligné (underline)
4. Interactivité grâce aux formulaires:
Le programme précédent ne permet pas à l'utilisateur d'interagir avec la page web.
Nous allons remédier à ce problème en intégrant un formulaire dans la page HTML.
Un formulaire permet de saisir des données dans le navigateur de façon à pouvoir les réutiliser dans une
fonction programmée en javascript.
Il existe des champs de saisie de différentes natures: champ texte, cases à cocher, bouton radio (une seule
option à la fois peut être activée), liste déroulante,...
Les champs de saisie doivent être encadrés par des balises de type <FORM name="form1"> et </FORM>.
Un nom est donné à ce formulaire, ici form1.
* champ texte:
<input type="text"
On indique entre les balises
* bouton d'envoi:
name="Naissance"
size="4"
maxlength="4" >
le type de champ (ici du texte)
le nom donné à ce champ (ici on l'appelle Naissance)
la taille du champ, en nombre de caractères
le nombre maximum de caractère que l'on peut inscrire (on se limite ici à 4)
<input type="button" name="Bouton" value="VALIDER"
style="width : 100px; height : 40px"
onClick="calculer()">
Après avoir complété le champ texte, ce bouton permet de valider les données pour qu'elles soient prises en compte
par le programme, et de déclencher la réalisation du programme "calculer()" écrit en javascript.
On indique entre les balises
le type de champ (ici un bouton)
le nom donné à ce champ (on l'appelle Bouton)
le texte affiché sur ce bouton (ici VALIDER)
la taille du champ: largeur et hauteur (en pixels)
l'événement déclenché lorsqu'on clique sur ce bouton (le programme afficher)
Application: créer une page html correspondant au modèle ci-dessous, dans laquelle on peut rentrer au
clavier une date de naissance, et qui lance une fonction appelée "calculer()" lorsqu'on clique sur le bouton
"VALIDER", de façon à afficher l'âge correspondant :
2
5. Créer une fonction en javascript:
On souhaite créer une fonction nommée "calculer()" qui calcule puis affiche l'âge de quelqu'un à partir de sa
date de naissance.
Quel est l'algorithme correspondant, c'est à dire la liste des actions à effectuer pour atteindre cet objectif ?
La fonction doit être crée dans la première partie de la page html appelée "tête du document" de façon à ne pas
apparaitre à l'écran.
Elle est écrite entre les balises <script language="javascript"> et </script> .
Le code qui permet de créer la fonction est: function calculer()
Les actions à effectuer sont incluses entre les accolades: { et }
Chaque action se termine par un point virgule ;
* Lire la valeur du nombre rentré au clavier dans le champ texte appelé "Naissance" dans le formulaire appelé
"form1" de ce document et la mettre en mémoire dans une variable appelée "AnneeDeNaissance":
AnneeDeNaissance = document.form1.Naissance.value ;
* Faire la différence entre l'année actuelle 2015 et l'année de naissance puis mettre le résultat du calcul dans
une variable appelée "Age" :
Age = 2015 - AnneeDeNaissance ;
* Afficher la réponse dans une fenêtre pop-up grâce à la commande: alert( )
Entre les parenthèses, il faut mettre les informations à afficher: Le texte doit être entre guillemets
Age est la variable qui contient le résultat
+ permet de concaténer
alert("j'ai calculé ton âge: tu as " + Age +" ans déja !");
P.S. concaténer est issu de "catena" = chaine et "con" = avec (concourant, concitoyen, conjoint,...)
concaténer signifie en informatique juxtaposer, mettre à coté...
Programme complet:
<html>
<head>
<title> calcul de ton âge </title>
<script language="javascript">
function calculer()
{
AnneeDeNaissance = document.form1.Naissance.value ;
Age = 2015 - AnneeDeNaissance ;
alert("j'ai calculé ton âge: tu as " + Age +" ans déja !");
}
</script>
</head>
<body>
<div align=center>
<BR><BR><BR>
<FORM name="form1">
<FONT size = "10" color = "blue"> Quelle est ton année de naissance ? </FONT>
<input type="text" name="Naissance" size="4" maxlength="4" style="font-size:30px;">
<BR><BR><BR>
<input type="button" name="Bouton" value="VALIDER" style="width : 100px; height : 40px" onClick="calculer()">
</FORM>
</div>
</body>
</html>
3
6. Compléments pour améliorer le programme ou la mise en page :
6.1. addition ou concaténation ?
Exemple : var1 = 12 ; var2 = 5 ; var3 = var1 + var2 ; la variable "var3" a pour valeur 125 et non pas 17 !
Remède : pour transformer une chaîne de caractères constituée de chiffres en nombre, il faut utiliser le code :
var1 = parseInt(12) ; var2 = parseInt(5) ; var3 = var1 + var2 ; la variable "var3" a pour valeur 17.
6.2. Effectuer un test en comparant le contenu de deux variables:
opérateurs de comparaison: égal (= =), différent (!=), supérieur ou égal (>=), inférieur ou égal (<=)
exemple:
if (nombre1 > nombre2)
{
alert("le plus grand de ces 2 nombres est: " + nombre1);
}
else if (nombre1 < nombre2)
{
alert("le plus grand de ces 2 nombres est: " + nombre2);
}
else
{
alert("ces 2 nombres sont égaux!" );
}
6.3. Afficher une phrase dans la page html en javascript (remplace avantageusement l’affichage du
résultat dans une fenêtre pop-up)
Il faut au préalable créer un espace vide entre deux balises ″conteneurs″ <DIV> et </DIV> dans le BODY
de la page HTML, à l’endroit où on souhaite insérer la phrase, et attribuer un nom (id = identité) à cet espace.
<Font color = "yellow" style = "font-size:30px;" > < div id = "resultat" > </div> </Font>
Le code javascript à insérer dans le script d’une fonction pour lui faire afficher « bonjour » dans l’espace
précédent nommé « resultat » est :
document.getElementById("resultat").innerHTML = "bonjour" ;
6.4. Afficher une image en fond de page :
Il faut insérer le script suivant dans la partie HEAD du programme :
<style type="text/css">
body { background-image:url(image.jpg); background-attachment:fixed;
background-repeat:no-repeat; background-position:left top;
background-size:cover; }
</style>
L’image nommée ″image.jpg″ doit se trouver dans le même dossier que le programme .html sur l’ordinateur.
On peut aussi utiliser une image qui est sur un site internet en remplaçant ″image.jpg″ par son adresse.
6.5. Générer un nombre aléatoire lors de l’ouverture de la page HTML.
Il faut créer la fonction suivante en javaScript dans le HEAD de la page :
function aleatoire()
{
nombreAleatoire = Math.floor(Math.random() * 100);
}
Puis insérer le code suivant dans la balise BODY
<body onLoad="aleatoire()">
Cette fonction génère un nombre aléatoire
compris entre 0 et 100.
Elle est lancée lorsque la page HTML est
ouverte, grâce à la commande insérée dans
la balise ouvrante <body>
4
