التدريب في جافا سكريبت (الجزء 1) Formation en JavaScript (part 1 )

1-Integrer javascript a html

Exercice 1 : Premier script Javascript

Il faut bien débuter un jour, alors allons-y ! Avec un script simple :

alert("C'est mon 1er script");

Ce qui a pour effet d’afficher un message d’alerte :

1. Créez une page HTML vide.

2. Avant la balise </HEAD>, écrivez les balises d’ouverture et de fermeture d’un script Javascript :

<!-- Debut script

// Fin script -->

</script>

Les commentaires  sont indispensables afin que les navigateurs ne supportant pas Javascript ne retournent pas une erreur ("Debut script" et "Fin script" sont optionnels).

3. Intégrer votre instruction dans le script :

<!-- Debut script

alert("C'est mon 1er script");

// Fin script -->

</script>

Voici à quoi doit ressembler votre page HTML :

<html>

<head>

<title>mon 1er script</title>

<script language="JavaScript">

<!-- Debut script

alert("C'est mon 1er script");

// Fin script -->

</script>

</head>

<body>

</body>

</html>

4. Afficher votre page dans un navigateur

Exercice 2 : écrire dans la page html

On va continuer dans la même veine, mais avec quelques difficultés.

document.write("C'est mon 2ème script");

Ce qui a pour effet d’écrire dans la page Web : « C’est mon 2ème script »

Voici votre page Web avec le script :

<html>

<head>

<title>mon 2ème script</title>

<script language="JavaScript">

<!-- Debut script

document.write("C'est mon 2ème script");

// Fin script -->

</script>

</head>

<body>

</body>

</html>

Afficher-la dans un navigateur et vous aurez une ligne simple qui affiche « C’est mon 2ème script »

Exercice 3 : intégrer des balises HTML

Vous pouvez intégrer des balises HTML dans votre texte, ce qui vous permet de choisir la police, la couleur, de centrer...( bien qu’il soit préférable de traiter les présentations par des feuilles e style ! )

1er essai

Choisissons la police Arial en gras, une couleur bleue et de centrer le tout. Notre instruction document.write devient :

document.write("<center><font face="Arial"

color="#0000ff"><b>C'est mon 2ème script

</b></font></center>");

(tout est sur la même ligne, mais pour des raisons d’affichage la ligne est coupée)

Essayez d’intégrer cette instruction à la place de la précédente, ça donne une erreur :-(

Pourquoi ?

document.write (comme alert, d’ailleurs) a comme argument une chaîne de caractères délimitée par des guillemets ("). Si vous rajoutez d’autres guillemets ("), Javascript ne comprend plus où commence et où finit la chaîne.

Comment faire ?

Remplacer les guillemets (") à l’intérieur de la chaîne par des apostrophes (’) :

document.write("<center><font face='Arial'

color='#0000ff'><b>C'est mon 2ème script</b></font></center>");

Et là, ça marche ! Ca donne la même chose que l’image en haut.

Guillemets et apostrophes sont interchangeables

document.write('<center><font face="Arial"

color="#0000ff"><b>C'est mon 2ème script</b></font></center>');

On a interverti guillemets (") et apostrophes (’) et - en théorie - le résultat devrait être le même.

En théorie, seulement, car il y a un problème avec l’apostrophe de "C’est". Pour remédier à ça on doit remplacer ’ par \’ :

document.write('<center><font face="Arial" color="#0000ff">

<b>C\'est mon 2ème script</b></font></center>');

Et là, on obtient le résultat précédent.

De même, on aurait pu écrire :

document.write("<center><font face=\"Arial\" color=\"#0000ff\">

<b>C'est mon 2ème script</b></font></center>");

Règle usuelle pour les chaînes de caractères

On utilise en général la 1ère forme :

document.write("<center><font face='Arial'

color='#0000ff'><b>C'est mon 2ème script</b></font></center>");

Soit des guillemets (") pour délimiter la chaîne et des apostrophes (’) à l’intérieur, surtout à cause des nombreuses apostrophes (’) du français. Mais sachez que les deux sont interchangeables.

Cliquez ici pour compléter: Formation en JavaScript (part 2 )

Cliquez ici pour compléter: Formation en JavaScript (part 2 )