Javascript | Laintimes

Clignotement de Marqueurs avec leaflet.js

Lors d’un travail personnel j’ai eu besoin de faire clignoter des îcones sur une carte généré via leaflet.js. Je détail ci-dessous le morceau de code qui m’a permis de faire cela de façon simple avec css. Ce code à été testé sous Firefox uniquement.

Continuer la lecture de Clignotement de Marqueurs avec leaflet.js

Manipuler une base de donnée sous Meteor JS

Meteor est un framework de développement permettant de mettre en place très rapidement un environnement de travail complet en évitant les tâches répétitives. Le tout fonctionne en JS, ce billet ayant pour objectif la manipulation des BDD sous Meteor, je vous invite à consulter un billet d’introduction à Meteor pour vous familiariser avec cet outil.
Sous meteor JS l’utilisation d’une BDD est différente d’un schéma SQL classique. On utilise d’autres thermes pour définir les éléments type, tables, rows, columns que l’on retrouve dans le SQL.

Ainsi on obtient en résumé ce schéma (trouvé au hasard sur google imgs) avec la correspondance de chacun.
sql mongodb comparatif

Dans ce billet je vais simuler une base de donnée de porte feuille et y effectuer des opérations simples afin de manipuler les éléments présent en bdd. Je pars du principe que vous avez deja quelques bases sous Meteor avec une bonne vision du côté client/server

Continuer la lecture de Manipuler une base de donnée sous Meteor JS

Créer des graphiques dynamiques avec chart.js et Meteor

meteor js

Si vous souhaitez tester la puissance des graphs via Meteor un exemple est disponible sur un dépot github. Dans ce billet je détail une procédure simple afin d’avoir un aperçu. Le billet se déroule sur une machine Ubuntu 14.04

Continuer la lecture de Créer des graphiques dynamiques avec chart.js et Meteor

installer PhantomJS et CasperJS sur Ubuntu 14.04

PhantomJS permet de scarpper du contenu distant, de lancer des requêtes GET ou POST. L’interêt étant qu’il est possible de scripter des requêtes pour un serveur distant. Dans ce billet je présente une procédure simple afin d’installer PhantomJS sur Ubuntu 14.04

Continuer la lecture de installer PhantomJS et CasperJS sur Ubuntu 14.04

Menu Dynamique en JQUERY

Dans ma conception de script je me suis confronté au problème d’un code JQUERY qui ne passait pas au travers d’un FORM. Aussi je suis tombé sur ce code qui modifié suivant vos besoin vous permet de l’inclure ou vous le souhaitez. La modification est très simple.
Le script utilise un systeme de class pour identifier chaque élément et lui applique les paramètres en fonction de vos demandes.

Continuer la lecture de Menu Dynamique en JQUERY

Exercice Javascript : Contrôle de connaissances BTS SIO

Dans la cadre du BTS SIO la plupart des initiations au développement utilise des langages. Dans ce contrôle sur le langage Javascript (sujet typique de BTS SIO) il est demandé à un opérateur de téléphonie de contacter des clients.
Le nombres de client(s) doit être saisie par l’opérateur au début du script et le choix de la réponse doit s’effectuer via un « switch ». La liste des réponses possible est la suivante :

a : Le client appelé est absent
o : Le client répond « oui » à la question posé par l’opérateur
n : Le client répond « non » à la question posé par l’opérateur
p : Le client répond « Ne se prononce pas » à la question posé

En fin de script celui-ci doit retourner le pourcentage de personnes absentes, le pourcentage de personnes ayant répondu oui, le pourcentage des personnes ayant répondu non et le pourcentage des personnes n’ayant pas souhaité se prononcer. De plus votre script doit comporter un contrôle d’erreur « minimal ». ( Pas de lettres à la place de chiffres lors de la saisie par l’utilisateur)

Retrouvez dans la deuxième partie de l’article la correction de cet exercice javascript.

Continuer la lecture de Exercice Javascript : Contrôle de connaissances BTS SIO

Introduction pour débutant à Jquery et Ajax

Je présente dans ce billet 3 courts morceaux de code qui permettront aux débutants de s’initier à la syntaxe de Jquery et Ajax. Les trois codes travail avec des événements simples comme des éléments de type « lien » ou des « formulaires » que je détail dans les commentaires. Le premier code déclenche un événement sur un clique d’un élément de type « lien ». Les deux autres codes utilise des formulaires, pour retranscrire un message dans une DIV sans rechargement de page, ou lors d’un submit de formulaire.

Continuer la lecture de Introduction pour débutant à Jquery et Ajax

Validation de Formulaires Multiples avec Ajax et Jquery

Ajax et Jquery permettent de traiter une « section » de votre page Web sans recharger l’intégralité du contenu. Ainsi comme dans l’exemple qui va suivre vous pouvez valider individuellement des formulaires et afficher le résultat en conservant le reste du contenu de votre page Web.

Ce billet propose une source de code en PHP/Jquery/HTML permettant de valider un formulaire précis sur un page contenant 5, 10 ou le nombre de formulaire dont vous avez besoin sur une page Web.

Pour ce TP, vous devez posséder WAMP, et un éditeur de coloration syntaxique qui vous simplifiera la lecture de votre code. Vous pouvez consulter cet article qui vous fournira les liens de téléchargement vers différents logiciels « libre » : Meilleurs Logiciels libre sous licence GNU et GPL

Continuer la lecture de Validation de Formulaires Multiples avec Ajax et Jquery

Manipuler des DIV en Javascript – Exercice Tutorial

Comme beaucoup en cours d’étude, j’ai ce matin mis sur pieds ce script qui permet de bien comprendre la manipulation de JavaScript (Ici à travers Jquery).

Le script est bien entendu non exhaustif il existe d’autres possibilités de script tout aussi Amusant.

Imaginons d’abord une paage HTML Simple avec ceux DIV ou sont contenue du Texte.

<html>
<head>
<title> Manipuler Javascript </title>
</head>

<body>

<div id="container" value="container">
container0
</div>

<div id="container1" value="container1">
Container1
</div>

</body>
</html>

La manipulation nécessite l’appel à Jquery on insère donc le script depuis la Bibliothèque Google.

Le code générale nous donne donc ceci

<html>
<head>
<strong><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></strong>
</head>
<body>
<div id="container" value="container">
container0
</div>
<div id="container1" value="container1">
Container1
</div>

</body>
</html>

La but de ce premier code va être de remplacer le contenue d’une DIV à l’affichage, le code ci dessous exécute parfaitement cette mission.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="container" value="container">
container0
</div>
<div id="container1" value="container1">
Container1
</div>
<strong><script>
$("#container").html('Je change le contenue du DIV');
var moncontenu = $("#container").html();
window.alert(moncontenu);
document.write.(moncontenu);
</script></strong>
</body>
</html>

Ce sont ces deux lignes qui sont chargé du changement de contenue d’une DIV, le contenue de la DIV « container » qui est en actuellement container0 sera transformé en « xday ».

Amusez vous à changer la valeur ‘xday’ pour voir le résultat.

$("#container").html(‘xday’);
var moncontenu = $("#container").html();