Index Javascript

Formulaire Bootstrap 5 Ajax avec validation.

Valider un formulaire Bootstrap avec validation et trantement asynchrone (fetch).

Django Blais 16 février 2024

Consulté 465 fois

Sélecteurs JavaScript querySelector() et querySelectorAll()

Gérer vos manipulations JavaScript à l’aide des sélecteurs querySelector() et querySelectorAll() plus rapide!

Oznog 16 avril 2023

Consulté 2053 fois

Détecter Windows 11 avec le « Client Hints » ou conseils client

L’User-Agent est mort, vive le Client Hints avec autant d’informations sur l’utilisateur sinon davantage!

Django Blais 20 mars 2022

Consulté 6314 fois

Chargement différé ou paresseux (lazy) des images

Le meilleur truc pour diminuer et optimiser le chargement d’une page, c’est de différer le chargement des grosses images d’une page Web.

Django Blais 30 octobre 2021

Consulté 3768 fois

Bootstrap 5 - Ouvrir une vidéo YouTube dans une fenêtre modale

Une fenêtre modale dynamique avec une vidéo YouTube ou Vimeo avec arrêt automatiquement à la fermeture de la fenêtre.

Django Blais 28 mars 2021

Consulté 4844 fois

Protection des adresses courriel dans une page Web

Comment protéger la capture des adresses courriel par les robots !

Django Blais 25 août 2019

Consulté 9092 fois

Bootstrap 4 - Fenêtre « modal » adaptative, dynamique et « auto-resize »

De la simple fenêtre modale adaptative en pure CSS à la fenêtre dynamique avec Ajax ou iFrame en passant par la fenêtre modale pleine page au contenu illimité en pure JavaScript Vanille et avec jQuery...

Django Blais 29 avril 2019

Consulté 24201 fois

Peut on enfin utiliser le Shadow DOM 1.0 ?

Oui, avec un bon vieux iFrame pour palier l’imcompatibilité total de IE et de Edge. Car ce second DOM caché et encapsulé à l’intérieur du DOM principal est des plus attendu.

Django Blais 13 août 2018

Consulté 7320 fois

L’unique carrousel « Owl Carousel 2 »

Un carrousel ou diaporama tactile basé jQuery des plus sensibles.

Django Blais 11 avril 2017

Consulté 15224 fois

Ouvrir un PDF dans une fenêtre « modal » Bootstrap 4

Petit bout de code bien pratique avec le « Easy Modal Plugin » et jQuery 3.

Django Blais 21 août 2016

Consulté 20618 fois

Le JavaScript 6

Le JavaScript 6, dit JavaScript 2015, est une implantation du nouveau standard ECMAScript 6 (harmony), sortie en juin dernier.

Django Blais 28 février 2016

Consulté 9683 fois

Défilement doux ou le « Smooth Scrolling » en pur JavaScript

Je n’ai fait que traduire intégralement le code jQuery en pur JavaScript.

Django Blais 23 juin 2015

Consulté 34140 fois

Bouton « Retour en haut » en pur JavaScript

Bouton « Retour en haut » (Back to top) dynamique en pure JavaScript affiché après un défilement vers le bas de la page.

Django Blais 23 juin 2015

Consulté 46882 fois

Tableau HTML - Tri dynamique de « dataGrid » sans jQuery

Trier ascendant et descendant des colonnes d’un tableau de données (dataGrid) HTML sans jQuery

Django Blais 29 avril 2015

Consulté 54175 fois

jQuery : Équivalent Javascript

Peut on enfin se passer de la librairie jQuery? D’ici là, voici un document de référence des plus exhaustif.

Django Blais 27 avril 2015

Consulté 34984 fois

Nétiquette - Avis pour fichier témoin (cookies) désactivé

Aviser vos usagers qui désactive le stockage dans des fichiers témoins.

Django Blais 8 mars 2015

Consulté 6705 fois

Ajouter et supprimer une classe CSS avec l’objet .classList

La meilleurs façon de modifier le style d’un élément est de changer la classe et ainsi d’éviter de modifier les attributs à la pièce.

Django Blais 30 novembre 2014

Consulté 74054 fois

Objects et propriétés JavaScript

Le JavaScript est un langage dit orienté objet. Tout en JavaScript agit comme un objet, sauf deux exceptions : « null » et « indéfini ».

Django Blais 13 octobre 2010

Consulté 4612 fois

Afficher l’heure en plusieurs langues - Avec le prototype twHeure()

Ce petit prototype affiche l’heure selon le content-language passé, en français fr, espagnole es ou englais en. L’ajout du zéro est effectué grace à la fonction twZero. Un prototype permet d’ajouter une méthode à un objet. Ce prototype de l’objet DATE est limité aux objets Date. Il faut donc créer votre date avant d’utiliser le prototype.

Django (Oznog) Blais 3 avril 2004

Consulté 32992 fois

Recherche sur un choix de moteurs distants - Avec option de recherche locale via « Google »

Savez-vous que vous pouvez indiquer à « Google » de limiter sa recherche sur un domaine particulier? C’est non seulement une solution simple et économique, mais aussi très performante. Le script proposé ici permet le choix de plusieurs moteurs de recherche via un bouton radio.

Django (Oznog) Blais 9 décembre 2003

Consulté 22687 fois

Dimensionner un «popUp» dynamique sur les proportions de son image

Ouvrir des images ou des photographies dans un «popUp» est une bonne solution. C’est encore mieux quand la grandeur de la fenêtre s’ajuste à celle de l’image. C’est tout à fait possible avec la méthode «resizeTo» et les propriétés «width / heigth» d’une image.

Django (Oznog) Blais 19 juillet 2003

Consulté 62781 fois

Moteur de recherche pour votre site - 100% Javascript et autres services gratuits

Vous n’avez pas la possibilité d’utiliser un langage serveur comme le ASP, PHP, Perl ou JSP. Ou encore la programmation vous donne des maux de tête? Ce tutoriel vous propose 4 solutions très efficaces afin d’installer un moteur de recherche personnel sur votre site.

Django (Oznog) Blais 22 novembre 2001

Consulté 84814 fois

Menu dans une liste de sélection ou menu déroulant - Automatique ou avec bouton et PopUp

Il n’y a rien de plus pratique qu’un menu déroulant pour compacter un grand nombre de liens hypertexte dans une même page Web. L’usager n’a qu’à choisir un site de la liste pour être automatiquement redirégé vers celui-ci. La sélection peut ouvrir automatiquement la nouvelle page ou utiliser un bouton pour confirmer la redirection.

Django (Oznog) Blais 11 novembre 2001

Consulté 133361 fois

Tableaux (Array) à deux dimensions - Construire un tableau avec propriétés dans un tableau

C’est bien beau de pouvoir garder des données dans un tableau mais si chacune des données contient plus d’une valeur nous ne sommes pas plus avancés. C’est pourquoi un tableau permet non seulement des lignes mais aussi des colonnes à l’image d’un chiffrier.

Django (Oznog) Blais 21 septembre 2001

Consulté 121395 fois

Introduction aux tableaux (Array) - Construire un tableau simple et récupérer les données

Un tableau ou Array est un objet ou structure qui permet de garder, manipuler et ordonner une collection de données. En plus de pouvoir accéder individuellement aux données plusieurs méthodes permettent aussi de trier, concater, joindre, extraire, inverser, convertir un tableau. Les nombreux avantages sont quasiment indispensables...

Django (Oznog) Blais 21 septembre 2001

Consulté 41320 fois

Afficher la date en plusieurs langues - Avec le prototype twDate() et support du bogue de l’an 2000!

Cette petite fonction affiche la date au complet avec le nom du jour et du mois comme ceci; Mardi, 18 septembre 2001 ou encore en anglais: Tuesday, September 18, 2001. Il suffit d’envoyer en paramètre à la fonction, la date de votre choix, la date du jour ou celle de la dernière modification de votre document par exemple.

Django (Oznog) Blais 18 septembre 2001

Consulté 29018 fois

Fonction de validation twValide version 2.2 - Validation de formulaire côté client

Valider la saisie de vos formulaires avant même d’envoyer le formulaire. Cette fonction universelle très compatible permet de vous assurer que tous les champs obligatoires ont été remplis. De la saisie de texte à la liste de sélection, tous les types des éléments d’un formulaire sont traités.

Django (Oznog) Blais 13 septembre 2001

Consulté 45179 fois

Manipulation de formulaires en Javascript - Partie 1 : Introduction, l’objet Form

Dans cette série de tutoriels, nous verrons comment manipuler l’objet form pour accéder aux formulaires d’une page Web. Comment utiliser les méthodes et capturer les événements pour lire et modifier les propriétés des éléments. Nous verrons en détail chaque champ de saisie avec des exemples en contexte de formulaires dynamiques, de validations...

Django (Oznog) Blais 13 septembre 2001

Consulté 95265 fois

Impression d’une page HTML - Avec la méthode print()

La méthode print() de l’objet Window simule un clic sur le bouton Imprimer ou Print du navigateur. Elle dit au navigateur d’ouvrir la boîte de dialogue d’impression. Cette méthode permet d’imprimer la page courante. Noter que ce n’est pas compatible Opera.

Django (Oznog) Blais 31 août 2001

Consulté 79709 fois

Envoyer un formulaire sans CGI avec mailto - Fonction universelle Javascript

Envoyer les données de vos formulaires sans programme serveur comme le Perl, ASP, PHP etc. En utilisant un simple mailto dans l’action du formulaire et la méthode GET, vous pouvez récupérer les données d’un formulaire dans votre logiciel de messagerie. Les données seront traitées par une fonction Javascript.

Django (Oznog) Blais 22 août 2001

Consulté 63511 fois

Empêcher le clic droit de la sourris - Compatible Netscape 4+ et Netscape 6

Le code classique que j’avais enlevé mais que j’ai dû remettre sous la pression. Ce script empêche ou plutôt capture le clic droit de la souris pour affiche un message d’alerte avec le message de votre choix. C’est atteinte à la liberté des internautes ;-) est compatible Netscape puisque Netscape n’a pas la même méthode que IE pour faire la capture

Django (Oznog) Blais 25 juillet 2001

Consulté 29419 fois

Ouverture d’une page en mode plein écran - avec un hyperlien ou automatique

Ce script m’est souvent demandé, particulièrement l’ouverture automatique du mode plein écran. L’ouverture du mode plein écran se fait de la même manière que l’ouverture d’une nouvelle fenêtre, c’est seulement l’argument fullscreen qui détermine le plein écran. Noter que Netscape affiche toujours une barre en haut avec le titre de la page...

Django (Oznog) Blais 25 juillet 2001

Consulté 98943 fois

Boîtes de dialogue en Javascript - Avec les méthodes ALERT, CONFIRM et PROMPT

La plupart des langages de programmation utilisent les boîtes de messages du système et la programmation Web n’y échappe pas. Il y a 3 méthodes, l’alerte ou Alert dialog box qui permet d’afficher un simple message avec un bouton fermé, la confirmation ou Confirm dialog box qui retourne une valeur booléenne selon un choix oui ou non...

Django (Oznog) Blais 27 mai 2001

Consulté 152806 fois

Les caractères spéciaux en Javascript - Utilisés dans les chaînes de caractères

Il existe plusieurs caractères spéciaux en Javascript qui permettent de manipuler l’affichage d’une chaîne de caractères. Le plus connu et le plus utilisé est le saut de ligne mais il en existe 4 autres. Tous sont précédés par le symbole \ appelé escaping caracter parce qu’il indique au moteur Javascript de ne pas interpréter le caractère...

Django (Oznog) Blais 27 mai 2001

Consulté 162111 fois

Récupérer un formulaire en Javascript - Les paramètres GET de la requête HTTP

Les données d’un formulaire peuvent être envoyées avec la méthode « GET » en d’autres mots, directement dans la requête HTTP. Vous avez sûrement déjà remarqué ces caractères bizarres visibles au bout d’une adresse (URL) dans un navigateur. Le URL et la chaîne de caractères sont déterminés par le paramètre « ACTION »...

Django (Oznog) Blais 24 avril 2001

Consulté 175551 fois

Bouton retour en arrière et page suivante - Avec la méthode GO du Javascript

Pour reproduire l’action des boutons page précédente et page suivante de votre navigateur, le Javascript utilise la méthode GO qui peut naviguer dans l’historique des liens gardé en mémoire par le navigateur. En effet, il est possible de récupérer la liste des liens visités par le visiteur, la liste « history »..

Django (Oznog) Blais 24 avril 2001

Consulté 147305 fois

Forcer le focus sur un PopUp après un lien - Le PopUp passe au dessus des autres fenêtres

Une autre question qui revient sans cesse. Mon lien qui ouvre une nouvelle page dans un PopUp fonctionne bien mais quand une fois que le PopUp est ouvert, il reste en dessous des autres fenêtres même. Commet faire en sorte que le PopUp retourne au-dessus des autres fenêtres, obtenir le Focus sur le PopUp en d’autres mots.

Django (Oznog) Blais 6 avril 2001

Consulté 35485 fois

PopUp qui ouvre un lien dans la page principale - Même si la page principale est fermée

Ce truc est souvent demandé, le voilà donc. La technique est de pouvoir faire référence et modifier l’attribut « location.href » de la page principale depuis une autre page. Le Javascript le permet très simplement pourvu que la deuxième page (pop-up), ait été, au préalable, appelée par la page principale.

Django (Oznog) Blais 24 mars 2001

Consulté 36370 fois

Boucle pour afficher tous les caractères spéciaux - selon le type de police utilisé

Il arrive parfois que l’on cherche le code pour afficher un caractère spécial. Avec cette boucle Javascript vous n’aurez qu’à identifier votre caractère et d’utiliser son code pour afficher votre symbole. Noter que vous n’avez qu’à changer la police pour obtenir un autre jeu de caractères spéciaux.

Django (Oznog) Blais 22 mars 2001

Consulté 18502 fois

Manipulation des dates/heures en Javascript - Expliqué en détail et avec plusieurs scripts très pratiques.

Manipuler les dates et le temps est très utile. Récupérer la date locale d’un visiteur, convertir une date en temps GMT, extraire les minutes ou les jours à des fins de calcul ou utiliser un délai pour exécuter des fonction récursive, et autres manipulations.

Django (Oznog) Blais 2 février 2001

Consulté 198169 fois

Boucles de programmation en Javascript - Énoncé For, for…in et while

Avec les tests de conditions, les boucles sont en programmation ce que les « stacks » sont à l’informatique. Hein! Tout simplement que les boucles sont à la base de la programmation. Aucun programme ni aucun langage peut s’en passer. On peut faire des miracles avec les boucles, tout particulièrement avec les boucles récursives.

Django (Oznog) Blais 26 janvier 2001

Consulté 31762 fois

Gestion des cadres « frameset » en Javascript - Et ouvrir des documents dans plusieurs cadres

Le HTML ne permet pas d’ouvrir plusieurs liens en même temps. Pour ce faire vous pouvez utiliser le Javascript pour ouvrir les documents dans les cadres désirés.

Django (Oznog) Blais 30 octobre 2000

Consulté 39305 fois

Images réactives ou le RollOver - Du préchargement au générateur de RollOver

Une image réactive ou le « RollOver » est une image qui change d’état quand la souris du visiteur passe au dessus de l’image. Dans un document HTML, la façon de faire est de tout simplement substituer l’image pour une autre. Il y a donc deux étapes principales.

Django (Oznog) Blais 24 octobre 2000

Consulté 38994 fois

Les événements du Javascript - Base de la programmation orientée-objet

Un document comporte plusieurs objets, les objets peuvent être les éléments d’un formulaire, les images les liens les textes et même le document lui-même etc. Cette technique orientée-objet permet d’isoler les objets entre eux en leur donnant une certaine indépendance.

Django (Oznog) Blais 25 août 2000

Consulté 30701 fois

Fermer une fenêtre - Avec la méthode Close

Vous désirez fermer une fenêtre ou un PopUp, rien de plus simple. La méthode Close() ne fait que ça… Vous pouvez utiliser tout simplement close() ou window.close() pour fermer la fenêtre courante ou leNomdelaFenetre.close() pour fermer une fenêtre spécifique.