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 :
<script language="JavaScript">
<!-- Debut script
// Fin script -->
</script>
Les
commentaires <!-- et
// -->
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 :
<script language="JavaScript">
<!--
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 ) |
0 Comment to "التدريب في جافا سكريبت (الجزء 1) Formation en JavaScript (part 1 ) "
Enregistrer un commentaire