Site dynamique coté client avec JavaScript.

Introduction

Dans la partie précédente nous avons vu, qu'un site peut être dynamique coté serveur (à l'aide d'un langage comme PHP, le serveur conçoit une page HTML personnalisée.). Nous allons voir comment rendre dynamique une page web du coté client, c'est à dire que les changements se feront dans l'ordinateur du client.

Le principe est de "au niveau" (c'est à dire simple pour simplifier les choses), à un élèment de la page (bouton, paragraphe,image,tout) on associe une (ou plusieurs) fonctions à éxecuter si une action spécifiée est réalisée.

Pour rappel, avec EZ nous étions obligé de récupérer un événement, de l'analyser, de récupérer les coordonnées de la souris, d'analyser les coordonées de la souris, c'était pénible et en plus la fenetre en EZ était fixe (alors que vous pouvez scroler la page en HTML). Heureusement ce ne sera pas la cas ici, le navigateur va tout faire automatiquement on a juste à dire si on appuie ici alors on fait ca !

Si le HTML et le CSS sont des standards, les interactions avec l’utilisateur peuvent se faire dans de nombreux langages (dont Python), néanmoins un langage est particulièrement adapté à la chose, le JavaScript (à ne pas confondre avec le langage Java qui est lui aussi un langage très utilisé).

JavaScript et Python sont deux langages de programmation impératif (basé sur le changement de variables en mémoire), la syntaxe est différente mais dans le fond les deux sont très proches. Tout le travail fait en python sera vite rentabiliser dans les autres langages.

Dans cette page, nous allons voir les bases de JavaScript et l'utiliser comme python.

Le code JavaScript se place entre les balises <script> et <script>, il est recommandé de placer les scripts dans l’entête ou dans un fichier séparé.

Premiers exemples.

Variable, identification des parties et syntaxe

Analysons un premier exemple. ouvrir sur une nouvelle fenetre ou telecharger

Exemple 

			

			
Remarques
			
    
			
  1. Remarquer la facon de récupérer l'action onclick = "action_bouton();" :
				
      
				
    • onclick est un mot réservé qui signifie en cas de clic.
      • 
				
    • le = doit se comprendre par "fait cette action".
      • 
				
    • "action_bouton();" n'est pas l'action à effectuer mais une chaine de caractéres de l'action à effectuer ! onclick = "action_bouton();" c'est bon, mais onclick = action_bouton(); n'est pas bon ! Au début, quand on commence à avoir des interactions un peu évoluées il arrive de mélanger les choses.
      • 
				
    
			
			
  2. En JavaScript, au niveau de la syntaxe, la principale différence avec python se fait au niveau des blocs d'instructions, il ne faut pas décaler mais utiliser des accolades. Le bon usage fait que l'on décale aussi le texte après pour gagner en visibilité mais ne pas le faire ne fait pas planter le programme.
    3. 
			
  3. En JavaScript, la différence entre variables locales dont la portée touche l'ensemble des fonctions, ou des variables locales (qui disparaissent à la fin de la fonction) se fait à l'aide du mot var , utiliser une variable dont une fonction sans utiliser var la transforme en variable globale.
    4. 
			
  4. En réalité, il existe même une possibilité de définir une variable que dans un bloc d'instruction à l'aide de l'instruction let. Pas la peine de s'embéter avec ca au début.
    5. 
			
  5. Si vous voulez accéder à une partie de la page, il faut donner une id à la partie.
    6. 
			
  6. Le JavaScript est un langage objet, document.getElementById(id) est une méthode associée au document qui va chercher la partie de la page HTML que l'on veut.
    7. 
			
  7. Si une balise à une identité id, alors document.getElementById(id).innerHTML permet de placer du code HTML à l'intérieur de la balise. Vous pouvez document.getElementById(id) dans une variable si vous voulez.On eput également récupérer (sous forme) d'un tableau tous les balises d'un type donné ( lien) ou d'une classe donnée ( lien)
    8. 
			
  8. Le mot clef pour définir une fonction est function pas def.
    9. 
			

			

			

			
			

			
Paramètre, gestion du style.

			
Analysons un deuxième exemple. ouvrir sur une nouvelle fenetre ou telecharger

			
Exemple
			

			

			
Remarques
			
    
			
  1. Comme en python, on peut mettre des paramètres à des fonctions et comme pour python on peut donner des paramètres par défaut.
    2. 
			
  2. Utiliser des paramètres permet de gagner du temps.
    3. 
			
  3. On peut modifier le style d'un élément en JavaScript.
    4. 
			

			

			
			

		
Remarques
		
    
			
  1. Dans le code suivant, construire trois fonctions, fonction1, fonction2 et fonction3 pour que le fait d'appuyer sur une touche provoque un changement de couleur sur le titre.
    2. 
			
    
			
    Changer ma couleur !
    

			
    
			
    
			
			
    
			
    
			
    faire un clic pour afficher/masquer la solution
    
			
			
  2. (dur)Refaire la question précédente mais en utilisant cette fois une unique fonction qui prendra trois nombre r,v,b en paramètres. Attention si vous écrivez "rgb(r,v,b)" alors r v et b sont des caractères et JavaScript ne va pas les remplcer par les nombres que vous voulez, il faut donc créer la chaîne avec de la concaténation.
    3. 
			
    faire un clic pour afficher/masquer la solution
    
			
			

			
			
			
  3. Dans la page suivante, la taille de chaque partie augmente si on passe la souris dessus :
    4. 
			
    
			
    Augmenter la taille
    
			
    Passer la souris sur une des parties augmente la taille de la partie.
    
			
    Oter la souris de la partie et elle regagne sa taille d'origine.
    
			
    
			
    A vous de rajouter le code pour obtenir l'effet désiré.
    
			
    
			
    faire un clic pour afficher/masquer la solution
    
			
			
			
  4. Dans la page suivante, les boutons font apparaître les solutions.
    5. 
			
    
			
    Feuille d'exercices
    
			
    2x = 2
    
			
			
			
    x2 = 1
    
			
			
			
    
			
    A vous de d'écrire le code pour obtenir l'effet désiré. On a deux choix (au moins), soit on écrit la solution dans une zone à l'aide de innerHTML, soit on utilise le style display sur un élèment, 'display : none' n'affiche pas l'élèment et 'display : block' l'affiche.
    

			
    faire un clic pour afficher/masquer la solution
    
			
			
			
  5. Dans la page suivante, vous pouvez faire un clic sur les fautes, si le mot est faux il passe en rouge et vous gagnez un point sinon vous perdez un point.
    6. 
			
    
			
    Dictée
    
			
    Ces super, Johnny a dit a Adelin : "Ah que c chouete".
    
			0
			
    
			
    A vous de d'écrire le code pour obtenir l'effet désiré. Il faut utiliser une variable globale (on peut faire autrement mais pour l'instant on fait simple). Pour la même raison, on ne s’embêtera pas pour savoir si une faute a déjà était cliqué (cela se fait très bien sinon avec une condition).
    

			
    faire un clic pour afficher/masquer la solution