W3 : JavaScript-Programmation Web coté client.

L'objectif de ce cours n'est pas de faire de vous des codeurs de javascript expert. Mais simplement vous donner les clés qui vous permettront d'explorer ce langage.

Javascript est un langage de programmation coté client(tout se passe sur votre machine) à contrario de php.

Où placer le javascript

Le JavaScript se place à trois endroits différents :

Dans l’élément head d’une page HTML ;
Dans l’élément body d’une page HTML ;
Dans un fichier portant l’extension .js séparé.

Dans l'élément head

Dans ce cas, il faudra placer le JavaScript à l’intérieur d’une balise script.

On placera généralement l’élément script à la fin de notre élément head.

<script> alert("Au secours !!");</script>

Dans l'élément body

Dans ce cas aussi, il faudra placer le JavaScript à l’intérieur d’une balise script.

On placera généralement aussi l’élément script à la fin de notre élément body.

<script> alert("Au secours !!");</script>

Dans un fichier séparé

C’est très souvent la méthode recommandée dans le cas de gros projets car elle permet une meilleure maintenabilité du code grâce à la séparation des langages, et car on va pouvoir réutiliser un même code JavaScript dans plusieurs fichiers HTML.

Dans ce cas, nous allons devoir lier nos fichiers HTML et JavaScript en utilisant à nouveau un élément script et son attribut src.

Par exemple, si l'on souhaite lier un fichier JavaScript script.js à un fichier HTML placé dans le même dossier nous écrirons à la fin du body:

<script> src="script.js" </script>

Dans le fichier script.js, on purra écrire par exemple :

alert("JS...easy !");

Tester les trois méthodes séparément puis en même temps sur un fichier html à votre disposition.

Indenter et commenter

Indenter

Pour savoir quand indenter, il suffit de penser en terme de hiérarchie comme on le faisait déjà en HTML.

Une bonne pratique est d'effectuer un retrait vers la droite équivalent à une tabulation à chaque fois qu'on écrit une nouvelle ligne de code à l'intérieur d'une instruction JavaScript.

Commenter

On commente en js comme on commente en CSS :

/* ceci est un commentaire */

Variable

Une variable JavaScript est un conteneur servant à stocker temporairement une information. Comme un langage de programmation comme python.

Contrairement à Python, il faudra déclarer les variables. Avec des noms suivant les règles d'hygiene déjà soulignées précédement.

Le nom des variables est sensible à la casse, c'est à dire qu'une variable portaant le nom a n'est pas la même que celle qui porte le nom A.

Déclarer une variable en javascript.

Il existe différentes façons de déclarer une variable en JavaScript

Déclarer une variable et lui assigner une valeur immédiatement ;
```
var x = 12;
```
Déclarer une variable sans lui assigner de valeur et lui assigner une valeur plus tard ;
```
var temps;
temps = 2;
            
```

Déclarer plusieurs variables en même temps.

var x = 12, prénom = "jean", nom = "neymar";

Vous pouvez remarquer que l'affectation ce fait comme en Python avec un =.

Ecrire un fichier html dans lequel vous afficherez la valeur de $x^2+3y\times z$. Il faudra déclarer quatre variables et afficher le résultat à l'aide de la fonction alert vu précédement

Les fonctions.

La définition d'une fonction est introduite par le mot clé function suivi de ses arguments, puis du code de la fonction entre accolades { }

Le résultat de la fonction est indiqué par le mot-clé return.

Observer la déclaration de la fonction suivante :

function carre(i){
    return(i*i)
    }

Cette déclaration peut se faire à l'intérieur de l'élément head (dans un élément script) ou bien directement dans un fichier .js, comme nous l'avons vu précédement. Mais cette déclaration ne peut pas se faire à l'intérieur de l'élément body.

Cette procédure permet de déclarer une fonction, il faut maintenant affficher le résultat.

Observer le code suivant :

<script> document.write("La fonction renvoie",car(2),".");</script>

Reproduire les deux exemples précédent et observer le résultat.
Ecrire une fonction f en Javascript qui à une valeur $x$ renvoie $x^2-3x+1$. On affichera l'image de 1 et de -1.
Réaliser un tableau de valeur de la fonction précédente de 0 à 5 avec un pas de 1. (utiliser la balise table)

la méthode prompt().

La méthode prompt fournit un moyen simple de récupérer une information provenant de l'utilisateur, on parle alors de boîte d'invite. La méthode prompt() requiert deux arguments :

le texte d'invite
la chaîne de caractères par défaut dans le champ de saisie

Voila un exemple :

On commence par créer une fonction dans le .js

function demande(){
                x=prompt("quel âge as tu?","réponse")
                    return x
                }

Ensuite on utilise une méthode write pour afficher la réponse dans la page HTML :

<script> document.write(demande());</script>

Réaliser une fonction js qui utlise la méthode prompt et fait quelque chose avec la valeur saisie.

Les événements

Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est possible d'associer des fonctions, des méthodes à des événements tels que le passage de la souris au-dessus d'une zone, le changement d'une valeur, ...

La syntaxe d'un gestionnaire d'événement est la suivante :

onEvenement="Action_Javascript_ou_Fonction();

Une premier événement: Click.

<p onClick="alert('METTRE DE LA COULEUR');">Cliquez ici</p>

querySelector()

La méthode querySelector() retourne le premier Element dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou null si aucune correspondance n'est trouvée.

Créer une fonction dans votre fichier .js comme celle-ci:

function text_rouge(){
document.querySelector("p").style.color="red"
}

Si vous ne possédez qu'un seul paragraphe créer en un puis un autre avec cette syntaxe :

<p onclick="text_rouge()">Je veux du rouge !</p>

Que se passe-t-il?

Vous devriez observer que seulement votre premier élément dans le selecteur p est coloré. C'est normal, rappelez vous que la méthde querySelector() ne selectionne que le premier selecteur de la page.

Pour remédier à cela il va falloir donner un id au selecteur de votre choix

Modifiez votre code comme ceci :

<p id="r" onclick="text_rouge()">Je veux du rouge !</p>

Puis modifier votre fonction dans le .js comme ceci :

function text_rouge(){
                document.querySelector("#r").style.color="red"
                }

Observer alors votre page internet

Nous avons fait appelle au selecteur id et #, nous aurions pu utiliser class et .

Modifier votre fonction Javascript pour que l'ensemble des p avec une class r deviennent rouge en cliquant dessus.

Créer une fonction Javascript text(couleur) qui colore le texte de la couleur indiquée en argument. Tester cette fonction sur plusieurs p et plusieurs couleurs (au moins 2).

Un exemple avec un bouton

Pour finir, nous allons intégrer à notre page un bouton qui va nous permettre de fermer la page par un ou deux clics.

Cela nous permettra de voir un exemple avec une structure conditionnelle "if"

Pour commencer intégrer cette fonction dans votre .js

function quit()
        {
            if (confirm("Tu veux vraiment parti? :'("));
            {
                alert("à bientôt !");
                close();
            }
        }

Prenez le temps d'observer de de commenter ce script.

Ajoutez ensuite un bouton comme ceci :

<button onclick="test()">Tester le bouton</button>

Testez votre script

Projet

Votre travail est de réaliser un script Javascript commenté que vous intégrerez dans votre site.

Ce n'est pas chose aisée, venez nous voir, fouillez sur le net dans la sitographie par exemple.