Javascript 2 : SYNTAXE DU LANGAGE

1. Syntaxe javascript
De manière générale, les instructions doivent être séparées par un point-virgule qu’on place à la fin de chaque instruction. Le Javascript n’est pas sensible aux espaces.

Pour plus de lisibilité, on écrira les programmes Javascript à raison d’une ligne par instruction, avec indentation pour gérer la hiérarchie du programme (comme cela est fait dans Python), bien que les indentations ne soient pas une nécessité (contrairement à Python). On pensera aussi à commenter son programme.
2. Commandes de base
Boîte de message

Dans la page .html :

    
<!DOCTYPE html>
<html>
    <head>
        <title>Boîte de message</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div style="text-align:center ;">
        Cliquer sur le bouton ci-dessous pour afficher une fenêtre d'alerte :
        <br>
        <input type="button" value="Cliquer" onclick="afficherMessage()">
        <script src="fonction_JS.js"></script>
        </div>
    </body>
</html>
    

Dans la page fonction_JS.js :

    
function afficherMessage()
{
    alert("Première ligne... \n Deuxième ligne...") ;
}      
    

Résultat :

Boîte de confirmation

Dans la page fonction_JS.js :

    
function afficherMessage()
{
    var rep = confirm('Voulez-vous continuer ?') ;
    if (rep == true){
        alert('Super !') ;
    } else {
        alert('Dommage !') ;
    }
}      
    

Résultat :

Boîte de texte

Dans la page fonction_JS.js :

    
function afficherMessage()
{
    rep = prompt('Voulez-vous continuer ?') ;
}      
    

Résultat :

Récupération une information dans un formulaire
Normalement, un formulaire html est le plus souvent destiné à envoyer des données auprès d'un serveur distant (côté serveur) en vue d'attendre un retour sur notre ordinateur (côté client). Cependant, il est tout à fait possible de modifier une page html sans passer par le serveur, uniquement avec du javascript.

A partir d'un formulaire, il est possible de renseigner des données. Pour que le javascript puisse récupérer ces données afin de les utiliser, il suffit d'indiquer un id unique dans la balise input que vous aurez défini.

Dans la page .html :

    
<!DOCTYPE html>
<html>
    <head>
        <title>Zone de texte</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div>
        Entrez votre nom :
        <input type="text" id="prenom"></div>
        <br>
        <input type="button" value="Cliquer" onclick="afficherMessage()">
        <div>
        Bonjour <input type="text" id="text1" style="border:#FFFFFF none 0px" readonly="true"> !
        </div>
        <script src="fonction_JS.js"></script>
    </body>
</html>
    

Dans la page .js :

    
function afficherMessage()
{
    document.getElementById('text1').value = document.getElementById('prenom').value ;
}   
    

Résultat :

Modifier le style
Il est également possible de modifier le style qui s'applique au html grâce à du javascript.

Dans la page .js :

    
function changerCouleur(couleur)
{
document.getElementById('tab').style.backgroundColor = couleur ;
}