Accueil - JavaScript Tout afficher
JS - Récupérer le dernier élément d'un tableau
Pour récupérer le dernier élément d'un tableau en JavaScript
pur, vous pouvez utiliser la propriété length du
tableau pour obtenir l'index du dernier élément, puis accéder à cet
élément en utilisant cet index moins un. Voici un exemple :
// Supposons que vous ayez un tableau appelé "monTableau"
const monTableau = [1, 2, 3, 4, 5];
// Pour récupérer le dernier élément du tableau
const dernierElement = monTableau[monTableau.length - 1];
console.log("Le dernier élément du tableau est :", dernierElement);Dans cet exemple, monTableau.length - 1 donne
l'index du dernier élément du tableau (car les indices de tableau
commencent à zéro), puis nous utilisons cet index pour accéder à
cet élément spécifique dans le tableau.
JS - Prévisualiser une image avec son upload
Voici un exemple simple de comment prévisualiser une image avant son téléversement en utilisant du JavaScript pur :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prévisualisation d'image</title>
<style>
#image-preview {
max-width: 200px;
max-height: 200px;
}
</style>
</head>
<body>
<input type="file" id="image-upload" accept="image/*">
<br>
<img id="image-preview" src="#" alt="Prévisualisation">
<script>
document.getElementById('image-upload').addEventListener('change', function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('image-preview').setAttribute('src', e.target.result);
}
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>Ce fichier HTML fournit un champ d'entrée pour sélectionner un
fichier image (<input type="file">) et une
balise <img> avec l'ID
image-preview où l'image sélectionnée sera
affichée.
Le code JavaScript écoute les changements dans le champ
d'entrée. Lorsqu'un fichier est sélectionné, il crée un objet
FileReader pour lire le contenu du fichier
sélectionné. Une fois que le fichier est lu, l'événement
onload du lecteur est déclenché, et le résultat
(e.target.result) est défini comme la source
(src) de la prévisualisation de l'image.
L'opérateur !! en Javascript
L'opérateur !! en JavaScript est souvent appelé "opérateur de double négation" ou "opérateur de non non". Il est principalement utilisé pour convertir une valeur en un booléen. En utilisant cet opérateur, vous pouvez obtenir une valeur booléenne true si la valeur d'origine est "truthy" (évaluée comme vrai dans un contexte booléen) et false si la valeur d'origine est "falsy" (évaluée comme fausse dans un contexte booléen).
Voici un exemple :
let valeur = "Bonjour"; // Une chaîne de caractères non vide (truthy)
let boolResultat = !!valeur; // Utilisation de l'opérateur de double négation
console.log(boolResultat); // Affiche true, car la chaîne de caractères est "truthy"Dans cet exemple, la variable valeur contient une
chaîne de caractères non vide, ce qui signifie qu'elle est évaluée
comme "truthy". En utilisant l'opérateur de double négation, nous
avons obtenu la valeur booléenne true dans la variable
boolResultat.
Voici un autre exemple avec une valeur falsy :
let valeur = 0; // Le nombre zéro (falsy)
let boolResultat = !!valeur; // Utilisation de l'opérateur de double négation
console.log(boolResultat); // Affiche false, car le nombre zéro est "falsy"Dans ce cas, la variable valeur contient le nombre
zéro, qui est évalué comme "falsy". L'opérateur de double négation
nous donne donc la valeur booléenne false dans la variable
boolResultat.
Supprimer les valeurs en double d'un tableau en JS
Pour supprimer les valeurs en doublon d'un tableau JavaScript, vous pouvez utiliser différentes approches. Voici une méthode courante pour le faire en utilisant JavaScript :
// Définir un tableau avec des valeurs en doublon
let tableau = [1, 2, 2, 3, 4, 4, 5];
// Utiliser la méthode Set pour supprimer les doublons
let tableauSansDoublons = [...new Set(tableau)];
// Afficher le tableau sans doublons
console.log(tableauSansDoublons);Dans cet exemple, nous utilisons un ensemble (Set)
pour stocker uniquement les valeurs uniques du tableau
tableau. Ensuite, nous utilisons l'opérateur de
décomposition (...) pour convertir l'ensemble en un
nouveau tableau tableauSansDoublons. Le résultat sera
un tableau ne contenant que des valeurs uniques.
Le code ci-dessus fonctionne pour les valeurs primitives telles que les nombres, les chaînes de caractères, etc. Si vous travaillez avec des objets complexes, vous devrez utiliser une méthode personnalisée pour supprimer les doublons en fonction de vos critères spécifiques.
Lire ...JS - Remplacer toutes les occurrences d'une chaîne
Pour remplacer toutes les occurrences d'une chaîne de caractères
en JavaScript, vous pouvez utiliser la méthode
replace() en combinaison avec une expression régulière
(regex) avec le drapeau global (g). Voici comment le
faire en JavaScript :
// Définir la chaîne de caractères d'origine
let texte = "Ceci est un exemple de texte. Remplacez le texte par un nouveau texte.";
// Utiliser la méthode replace() avec une regex globale
let nouveauTexte = texte.replace(/texte/g, "nouveau texte");
// Afficher le résultat
console.log(nouveauTexte);Dans cet exemple, la chaîne de caractères d'origine
texte contient le mot "texte" plusieurs fois. En
utilisant replace() avec la regex
/texte/g, toutes les occurrences de "texte" dans la
chaîne sont remplacées par "nouveau texte". Le résultat sera
affiché dans la console.
Assurez-vous d'utiliser la regex globale (/g) pour
effectuer le remplacement sur toutes les occurrences de la chaîne.
Si vous n'utilisez pas le drapeau global, seule la première
occurrence sera remplacée.
"error:0308010C:digital envelope routines::unsupported"
Si, en utilisant yarn, nodeJS (par exemple), vous tombez sur cette erreur, vous pouvez lancer la ligne de commande suivante :
Sur des systèmes Unix (Linux, macOS, ...) :
export NODE_OPTIONS=--openssl-legacy-providerSur Windows :
set NODE_OPTIONS=--openssl-legacy-providerPowerShell :
$env:NODE_OPTIONS = "--openssl-legacy-provider"JS - Cacher tous les éléments d'une classe spécifique
En pure JavaScript, on peut cacher tous les éléments HTML portant une classe spécifique en utilisant le code suivant :
for (let element of document.getElementsByClassName("classname")) {
element.style.display="none";
}JS - Supprimer tous les caractères d'une chaîne de caractères
En JavaScript, il existe une manière très simple de supprimer la totalité des accents d'une chaîne de caractères quelconque.
Exemple :
const str = "Crème Brulée"
str.normalize('NFD').replace(/[\u0300-\u036f]/g, "")
> 'Creme Brulee'
Lire ...
Encoder une URL ou une partie d’une URL en JavaScript
Si vous tentez de passer certains caractères spéciaux (comme le « + ») dans une URL, vous risquez d’avoir quelques surprises lorsque vous récupérerez la chaîne de caractères côté serveur.
Pour pallier à ce problème, il existe une solution très simple en JavaScript : il s’agit de la fonction encodeURIComponent().
Exemple :
console.log(encodeURIComponent('?x=1+1')); // affichera, dans la console, %3Fx%3D1%2B1
En récupérant, côté serveur, le paramètre « x », on aura bien « 1+1 ». Sans cela, on obtiendrait « 1 1 », ce qui n’est pas le résultat voulu.
Lire ...iframe - Ouvrir une page dans la fenêtre parent
A l'intérieur d'une iframe, si l'on utilise la fonction Javascript suivante :
window.location='https://fr.wikipedia.org/';
La nouvelle page s'affichera à l'intérieur de la balise "iframe". Si l'on souhaite que cette page s'affiche complètement dans le navigateur, il suffira d'utiliser la fonction suivante :
parent.location='https://fr.wikipedia.org/';
Lire ...
JS - Boucler sur un objet
Nous souhaitons ici boucler sur l'objet suivant :
var hash = {"key1": "value1", "key2": "value2"};
hash["key3"] = "value3";
Pour ce faire, il existe deux solutions.
La première :
Object.keys(hash).forEach(function (key) {
var value = hash[key]
console.log(key + " => " + value);
})
La seconde :
for (var key in hash) {
console.log(key + " => " + hash[key]);
}
Lire ...
Inclure sur son site un fichier JS hébergé sur Github
Si un jour vous avez essayé d'inclure et d'exécuter un fichier Javascript hébergé sur la plateforme Github, il est possible que vous ayez obtenu l'erreur suivante (Google Chrome) :
"Refused to execute script from ... because its MIME type (text/plain) is not executable, and strict MIME type checking is enabled."
Bien évidemment cette erreur vous empêche d'utiliser le Javascript. Pour pouvoir résoudre cette erreur, il suffit d'apporter une légère modification à l'URL. Il faut remplacer "https://raw.github.com/" par "https://cdn.rawgit.com/".
Exemple :
L'URL suivante ...
https://raw.githubusercontent.com/rmm5t/jquery-timeago/master/locales/jquery.timeago.fr.js
donnera :
https://cdn.rawgit.com/rmm5t/jquery-timeago/master/locales/jquery.timeago.fr.js
Lire ...Rechercher
Tags
Articles récents
- Quel est le but de l'attribut "role" en HTML ?
- Changer la couleur de l'espace réservé (placeholder)
- Attention à cet email d’arnaque !
- Supprimer un fichier d'un référentiel Git sans le supprimer du système de fichiers local
- JS - Récupérer le dernier élément d'un tableau
- JS - Prévisualiser une image avec son upload
- PHP - Convertir une chaîne de caractères en un booléen
- PHP : Vérifier si une session a déjà été démarrée
- Créer un APK ou un AAB en ligne de commandes
- L'opérateur !! en Javascript