Programmer en JavaScript

Introduction

Cette rubrique n'est pas un cours complet sur le langage de programmation JavaScript mais donne un ensemble de petits programmes en JavaScript afin de réaliser diverses activités.

Sommaire de cette page

Les générateurs de code

Les générateurs de questions pour QCM

Génération dynamique de code HTML (DHTML)

Interface utilisateur et contrôle du navigateur

Evaluation de code JavaScript et expressions régulières

Les jeux

Les programmes de calcul

CSS, JQuery et AJAX

En complément de JavaScript d'autres techniques, framework ou protocole seront également utilisés et illustrés ici, bien pratiques pour la programmation web côté client ayant pour but la manipulation du DOM (CSS, JQuery, AJAX, etc.).

 

Liste des programmes JavaScript

Chaque exemple est enregistré dans une page web particulière, le programme en JavaScript étant disponible dans le source de la page web :

 

Les générateurs de code

Générateur aléatoire de mots de passe

Générateur d'identifiants pour automatiser la création des comptes sur un serveur Linux

Générateur automatique d'identifiants au format d'un tableau associatif en PHP

Générateur de liens des sites Internet des élèves pour le serveur Nessi

Générateur de la matrice des liens des sites Internet des élèves pour le serveur Nessi

Générateur automatique d'intégrales en LaTex

Générateur de code ABEL pour concevoir un transcodeur binaire/BCD avec 3 PLD

Générateur de calendrier (il vous sort par exemple tous les mardis entre le 03/09/2013 et le 25/06/2014)

Générateur de calendrier à permutation circulaire (pour des TP rotatifs à 3 groupes)

 

Retour au sommaire

Les générateurs de questions pour QCM

Générateur de questions pour les QCM (12 questions avec 6 réponses chacune)

Générateur de questions pour les QCM (12 questions avec de 2 à 7 réponses)

Générateur de questions pour les QCM (16 questions avec pour seules réponses VRAI et FAUX + image)

Générateur de questions pour les QCM (16 questions binaires avec pour seules réponses 0 et 1)

Générateur de questions pour les QCM (16 questions concernant la même image)

Générateur de 96 questions pour les QCM (avec 4 réponses dont "Aucune de ces propositions" + affichage d'une image)

Générateur de 64 questions pour les QCM (avec 4 réponses sans "Aucune de ces propositions" + affichage d'une image)

Générateur de 80 questions pour les QCM (avec 4 réponses sans "Aucune de ces propositions" + affichage d'une image)

Générateur de cases à cocher : 16 affirmations, 50 questions avec 8 réponses chacune + affichage d'une image

Générateur de cases à cocher : 16 affirmations, 50 questions avec 4 réponses chacune + affichage d'une image

Générateur de cases à cocher : 16 affirmations, 100 questions avec 4 réponses chacune + affichage d'une image

Générateur de cases à cocher : 16 affirmations, 200 questions avec 4 réponses chacune + affichage d'une image

Générateur de cases à cocher : 24 affirmations, 50 questions avec 4 réponses chacune + affichage d'une image

Générateur de cases à cocher : 24 affirmations, 100 questions avec 4 réponses chacune + affichage d'une image

Générateur de cases à cocher : 24 affirmations, 200 questions avec 4 réponses chacune + affichage d'une image

Générateur de questions pour les QCM (pour les conversions Binaire/Hexadécimal)

Générateur de questions pour les QCM découverte (avec un conseil à noter si on clique sur JE NE SAIS PAS)

Utilisation de Python et des expressions régulières pour générer d'autres formats de questions

Utilisation de Prolog et des expressions régulières pour générer un QCM à partir d'un fichier texte question;réponse

Utilisation de Ruby et des listes générées par Prolog pour générer un QCM à partir d'un fichier texte matriciel

Utilisation de AWK pour générer des images et des questions pour QCM dans un shell Linux

Utilisation de Perl pour générer des images et des questions pour QCM relatives à des grafcet Automgen

Le générateur de générateur : il génère dans un fichier texte le code JavaScript pour créer un nouveau générateur de première génération

Le générateur de générateur : il génère directement la page web complète d'un nouveau générateur de première génération

 

Retour au sommaire

Génération dynamique de code HTML (DHTML)

Explorateur de caractères unicode

Génération dynamique des caractères HTML

Changement d'un texte à l'intérieur d'une balise

Génération dynamique d'un tableau

Changement de couleur d'une cellule en cliquant dans un tableau

Modification dynamique des objets HTML côté client (DHTML)

 

Retour au sommaire

Interface utilisateur et contrôle du navigateur

Détection du navigateur du client

Saisie d'une chaîne de caractères puis affichage sur la page

Affichage d'un texte au survol d'un lien

Détection de la souris au survol des cellules d'un tableau

Détection de la souris au survol d'une image

Test des cases à cocher et des boutons radio d'un formulaire

Le compteur / décompteur en hexadécimal

Mise en forme d'information textuelle dans un tableau

 

Retour au sommaire

Evaluation de code JavaScript et expressions régulières

Validation d'un formulaire par expressions régulières

Test d'un code JavaScript saisie dans un formulaire grâce à la fonction eval()

 

Retour au sommaire

Les jeux

Le jeu du tableau

Le jeu Othello

Le jeu Puissance 4

Le jeu du virus

Un autre jeu Othello

Le compte est bon

Le jeu des associations (version de base utilisant les objets draggable et droppable)

Le jeu des associations (avec détection de la bonne combinaison)

Le jeu des associations (avec le lien "valider")

Le jeu des associations (avec lien "valider" et détection du contenu des objets droppable)

Le jeu des associations (avec lien "valider", détection du contenu des objets droppable et comptage du nombre de déplacements)

Le jeu des associations avec mélangeur des carrés jaunes

Le jeu des associations avec affichage des réponses dans un ordre aléatoire

 

Retour au sommaire

Les programmes de calcul

Recherche et test des nombres premiers

 

 

Retour au sommaire

CSS, JQuery et AJAX

Les bases de JQuery : installation de JQuery et accès direct au DOM

Lire un fichier texte sur le serveur grâce à AJAX

Envoi d'un formulaire HTML à un script CGI par AJAX

Autocomplétion avec JQuery UI

Utilisation des jauges avec JQuery UI

Utilisation de 3 jauges JQuery UI pour configurer la couleur de fond d'un tableau

Affichage de coins arrondis sur une balise DIV avec jquery.corner.js

Programmation d'un cliquer/déplacer avec JQuery UI

Réception d'un tableau JavaScript par AJAX à partir d'un script CGI pour réaliser une association JQuery UI

Page de démonstration avec divers éléments de JQuery UI