% Preamble
\documentclass[a4paper,12pt]{article}

% Packages
\usepackage[french]{babel}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{tabularx}
\usepackage{amsmath}
\usepackage{amsfonts}
\usepackage{eurosym}
\usepackage{epsfig}

% Title
\title{Notes relatives au sous-projet 1}
\author{D.Moreaux}

% Document
\begin{document}
\maketitle
\section{Insérer du Javascript}
En HTML 5, pour insérer du Javascript dans une page, on place dans la section
\verb|<head>| une ou des balises \verb|<SCRIPT>| avec l'attribut \verb|DEFER|.

Cet attribut permet de s'assurer que le Javascript en question ne sera exécuté
qu'une fois le chargement de la page terminé. Si plusieurs fichiers Javascript
sont fournis, ils seront exécutés dans l'ordre.

Les pratiques telles que le script inclus dans la page Web ou placé en fin de page
sont à éviter. La première afin de séparer le code du HTML, la seconde parce que
placer la balise script dans le \verb|<HEAD>| permet de charger ce dernier en
même temps que le reste de la page web et des autres ressources.

On précisera le nom du fichier à l'aide de l'attribut \verb|SRC|.

Même en cas de fichier javascript externe, la balise \verb|</SCRIPT>| est obligatoire.
Sans cette dernière, le reste de la page sera considéré comme du Javascript.

\verb|<SCRIPT SRC="monscript.js" DEFER></SCRIPT>|

\section{Le langage Javascript}
Le langage Javascript ressemble fortement au C et au PHP. Les instructions \verb|if|,
\verb|for|, \verb|while| ont la même syntaxe.

\subsection{Les variables}
Les variables ne demandent pas de caractère \verb|$| au début (contrairement au PHP) et
sont à la base non typées.

Une variable non déclarée sera considérée comme globale et sera contenue dans
l'objet\footnote{Le Javascript utilise une programmation objet par prototype, très différente
des classes du C++, Java et autres} \verb|window|. Une variable \verb|a| globale pourra
donc toujours être accédée à l'aide du nom \verb|window.a| même si elle a été masquée par
une variable locale.

Les variables peuvent être déclarées à l'aide des mots clés \verb|var|, \verb|let| ou
\verb|const|.

Une variable déclarée \verb|const| ne sera pas réellement constante. En effet, si l'élément
associé à la variable ne peut pas être changé, sa valeur peut par contre souvent être modifiée.
Dès lors, la dénomination de {\em constante} est trompeuse. En effet, à l'exception des entiers
et float, tous les autres types de données sont des objets et ces derniers peuvent être modifiés
même si la variable les référençant ne peut l'être.

Une variable déclarée \verb|var| sera considérée comme déclarée au début de la fonction. Si une
assignation est faite dans la déclaration, l'assignation aura par contre lieu à l'endroit où
se trouve la déclaration.

La pression venant de développeurs issus du C\# fait que l'on voit de plus en plus de déclarations
faites à l'aide de \verb|let|. Il faut cependant garder en tête que comme ces déclarations sont
locales au block (et non à la fonction), elles provoquent la création de tables de symboles
supplémentaires (ce qui n'est pas spécialement efficace) et peut amener à certaines surprises en
cas d'utilisation du mécanisme de closures.

Au niveau du cours, on mettra donc la préférence aux variables de type \verb|var| et on évitera
d'utiliser les deux autres formes de déclaration\footnote{Parfois, {\tt let} peut sembler plus
simple dans des situations de closure mais dans les faits, cela masque la présence de la closure
et peut amener à des problèmes avec d'autres variables}

\subsection{Les fonctions}
Une fonction en Javascript est un objet comme un autre. En tant que tel, elle peut être sauvée dans
une variable, passée en argument ou retournée par une autre fonction.

Une fonction se déclare comme suit :
\begin{verbatim}
    function (paramètres) {
       ...
       return valeur_de_retour;
    }
\end{verbatim}

Cette fonction ne possède pas de nom. La ligne return peut être omise si on ne désire pas retourner
de valeur.

On pourra sauver la fonction dans une variable, la passer en argument à une autre fonction ou la retourner
à partir d'une autre fonction. Pour sauver la fonction dans une variable, on peut également placer le
nom de la variable entre le mot clé \verb|function| et les arguments.
\begin{verbatim}
    f1 = function (a,b) { return a+b; };
    function f2 (a,b) { return a+b; }
    f3(12,function (a,b) { return a+b; });
    function f4(a) {
      return function(x) { return a+x; };
    }
\end{verbatim}

Dans le cas de f4, on remarquera que la fonction retournée utilise le paramètre passé à la fonction f4.
Ce mécanisme appellé closure sera examiné plus tard et peut être oublié pour le moment.

\section{L'arbre DOM}
La page HTML est convertie en une structure en arbre appelée {\em arbre DOM}. Différentes méthodes
permettent de récupérer des éléments de cette page ou de la modifier.

Si un élément HTML possède un ID, on peut le récupérer à partir du Javascript à l'aide de
\verb|el=document.getElementById("monID");|. A noter qu'en HTML, l'ID doit être unique, ce qui prend
tout sons sens ici. Le Navigateur garde généralement une table des ID et des éléments associées ce qui
rend cette méthode d'accès très rapide.

On peut également récupérer un élément sur base de sa balise ou d'un sélecteur CSS à l'aide de
\begin{verbatim}
    el1=document.getElementsByTagName("DIV");
    el2=document.queryAll(".spoil SPAN");
\end{verbatim}
Les valeurs obtenues seront des tableaux d'éléments. \verb|el1.length| permettra de connaître le nombre
d'élements et on y accèdera à l'aide de \verb|el1[0]|, \verb|el1[1]|,\dots

On peut également remplacer le mot clé \verb|document| \footnote{En fait, une variable globale
        {\tt window.document} qui pointe vers le document complet} par un élément (obtenu par une des méthodes
précédentes par exemple) pour restreindre la recherche au contenu de l'élément en question.

Une fois que l'on dispose d'un élément, on peut changer ses propriétés CSS à l'aide de
\verb|el.style.xxx=...| où xxx est le nom de la propriété CSS. Si la propriété est composée de plusieurs
mots séparés par des tirets, on retirera les tirets et mettra des majuscule au mot qui le suit.
\verb|border-top-color:| deviendra \verb|borderTopColor| par exemple.

Pour les champs de formulaire, on pourra généralement utiliser la propriété \verb|value| ou (pour les
checkbox et radio) \verb|checked| pour récupérer la valeur du champ.

\section{Evenements}
On peut associer une fonction à un événement de deux manières différentes. La première, appelée DOM1,
donne moins de contrôle au processus mais reste utile dans certains cas\footnote{Par exemple quand on
souhaite associer une fonction anonyme et désire pouvoir la retirer plus tard}. Elle consiste à utiliser
une propriété de l'élément dont le nom correspond à l'événement. Mettre la propriété à NULL permet
de retirer le gestionnaire.
\begin{verbatim}
document.getElementById("MonBouton").onclick = function (ev) {
        ...
};
document.getElementById("MonBouton").onclick = null;
\end{verbatim}

La seconde méthode, appelée DOM2, permet d'associer plusieurs gestionnaires à un même événement et
de contrôler la phase dans laquelle la fonction sera exécutée. Par contre, si on désire pouvoir
retirer le gestionnaire, il est nécessaire qu'il s'agisse d'une fonction nommée (ce qui peut
poser quelques problèmes quand on utilise les closures par exemple).
\begin{verbatim}
function btnclick(ev) { ... }
document.getElementById("MonBouton").addEventListener("click",btnclick);
document.getElementById("MonBouton").removeEventListener("click",btnclick);
\end{verbatim}

Le paramètre du gestionnaire d'événement recevra un objet {\em event} qui permettra d'avoir plus
d'informations sur l'événement.

On peut bloquer la fonction {\em normale} de l'événement en utilisant la fonction
\verb|preventDefault()| de l'objet event transmis au gestionnaire d'événement.

\section{En Vrac}
De nombreux Frameworks\footnote{à part jQuery} définissent la fonction \verb|$()| comme un
raccourci à \verb|document.getElementById()|. En effet, cette fonction est probablement une
des plus utilisées dans un programme javascript.

Une variation est, si le paramètre n'est pas une chaîne, de retourner le paramètre ce qui
permet de faire des fonctions acceptant indifféremment l'ID ou directement l'élément.

On peut trouver des exemples dans le fichier common.js fourni avec les fonctions \verb|show()| et
\verb|hide()|.

Les commentaires marqués par \verb|/**| sont des commentaires de type DOxygen et permettent de
générer de la documentation automatiquement. A noter que PHPStorm est capable de reconnaître de
tels commentaires et de les afficher en pop-up. Des exemples peuvent être trouvés dans le fichier
common.js.

\end{document}