js – SIBY INFORMATIQUE https://sibylassana95.github.io/mon-blog Astuce - Cours - Actualité Tue, 21 Jun 2022 03:01:04 +0000 fr-FR hourly 1 https://wordpress.org/?v=6.0 Les Sélecteurs jQuery https://sibylassana95.github.io/mon-blog/2022/06/18/les-selecteurs-jquery/ Sat, 18 Jun 2022 17:35:26 +0000 https://sibylassana95.github.io/mon-blog/?p=259

1 – Syntaxe d’un sélecteur jQuery

Les sélecteurs jQuery sont l’une des parties les plus importantes de la bibliothèque jQuery.
Les sélecteurs jQuery vous permettent de sélectionner et de manipuler les éléments HTML, XHTM et CSS.
Les sélecteurs jQuery sont utilisés pour “trouver” (ou sélectionner) des éléments HTML / CSS en fonction de leur nom, identifiant, classes, types, attributs, valeurs d’attributs et bien plus encore. Il est basé sur les sélecteurs CSS existants, et en plus, il possède ses propres sélecteurs personnalisés.

Tous les sélecteurs dans jQuery commencent par la commande jQuery(), ou bien pour simplifier la syntaxe par le signe dollar et les parenthèses: $().

Le sélecteur d’élément jQuery sélectionne les éléments en fonction du nom de l’élément via la syntaxe :

$("élément_à_séletionner").méthode_à_appliquer();

Vous pouvez à titre d’exemple sélectionner tous les éléments <p> sur une page de la façon suivante:

$("p").méthode();

Exemple ( cacher un paragraphe avec la méthode hide() )

<h1>Exemple de sélecteur jQuery</h1>
<p>Ce contenu sera caché à l'exécution ! </p>
<script type="text/javascript">
$(document).ready(function(){

$("p").hide();
});
</script>

Exemple complet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mon premier test jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Premier pas avec jQuery</h1>
<p>Ce contenu sera caché à l'exécution ! </p>
<script type="text/javascript">
$(document).ready(function(){
        $("p").hide();
});
</script>
</body>
</html>

Ce qui affiche au navigateur après exécution :

Vous avez bien remarquer que le paragraphe : “Ce contenu sera caché à l’exécution !”  a été caché à l’exécution

2 – Les différents types d’un  sélecteur  jQuery

On peut classifier les sélecteurs jQuery selon l’élément qu’ils sélectionnent :

2.1 – Sélecteur jQuery pour les balises HTML

Nous avons déjà traité ce type de sélecteur au paragraphe précédent. Sa syntaxe est de la forme :

$("élément").methode() ;

Imaginons maintenant une page web qui contient plusieurs paragraphe et qu’on souhaite sélectionner un seul paragraphe bien déterminé la méthode  $(“p”) ne peut être appliquer dans ce cas puisqu’elle sélectionne tous les paragraphes. Nous auron donc besoin des paramètres supplémentaires :

$('p:first');   // sélectionne le premier paragraphe de la page
$('p:eq(i)');  // sélectionne le (i+1)ème paragraphe de la page (l'indice commence à 0)
$('p:last');  // sélectionne le dernier paragraphe  de la page

Exemple

<h1>Premier pas avec jQuery</h1>
<p>Contenu du premier paragraphe </p>
<p>Contenu du 2ème paragraphe </p>
<p>Contenu du 3ème paragraphe </p>
<script type="text/javascript">
$(document).ready(function(){
$("p:eq(1)").hide();
});
</script>

L’exemple ci dessus permet de cacher le paragraphe à la position 1 qui est donc le 2ème paragraphe puisque le compteur commence à 0. Il va donc afficher après exécution au navigateur :

Contenu du premier paragraphe
Contenu du 3ème paragraphe

2.2 – Sélecteur jQuery pour les classes CSS

Les sélecteur  jQuery peuvent aussi s’appliquer aux classes CSS en utilisant la syntaxe :

$(".Classes_CSS").methode( );

Exemple

Considérons la classe CSS suivante :

.myClass{
font-family: arial ;
font-size: 28 ;
font-weight: bold ;
color:red ;
}

Essayons d’applique cette classe CSS à une balise div :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mon premier test jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style>
.myClass{
font-family: arial ;
font-size: 28 ;
font-weight: bold ;
color:red ;
}
</style>
</head>
<body>
<h1>Sélecteur de Class CSS avec jQuery</h1>
<div class="myClass">Voici un exemple de sélcteur jQuery pour les  classes CSS</div> 
</body>
</html>

On obtient après exécution :

Sélecteur de Class CSS avec jQuery Voici un exemple de sélcteur jQuery pour les classes CSS

Mais si on ajoute le code de sélecteur jQuery suivant :

<script type="text/javascript">
$(document).ready(function(){
$(".myClass").hide();
});
</script>

On obtient alors après exécution au navigateur :

Voici le code complet :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mon premier test jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style>
.myClass{
font-family: arial ;
font-size: 28 ;
font-weight: bold ;
color:red ;
}
</style>
</head>
<body>
<h1>Sélecteur de Class CSS avec jQuery</h1>
<div class="myClass">Voici un exemple de sélcteur jQuery pour les  classes CSS</div> 
<script type="text/javascript">
$(document).ready(function(){
$(".myClass").hide();
});
</script>
</body>
</html>

2.3 – Sélecteur jQuery pour les id CSS

Les sélecteurs jQuery pour les id CSS se fond de la même manirèe en remplaçant le code :

$(".Classes_CSS").methode( );

par :

$("#id_CSS").methode( );
]]> Premier pas avec le framework jQuery https://sibylassana95.github.io/mon-blog/2022/06/18/premier-pas-avec-le-framework-jquery/ Sat, 18 Jun 2022 17:33:58 +0000 https://sibylassana95.github.io/mon-blog/?p=257

1 – Installation du Framework jQuery

Pour développer des applications ou scripts web à l’aide du framework jQuery deux choix s’offrent à vous :

  1. Vous pouvez télécharger gratuitement le framework  jQuery via : https://jquery.com/download/
  2. Ou bien, vous indiquer le chemin de la librairie en ligne entre les balises head et /head
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>

2 – Chargement du DOM ( document Object Model )

Afin de ne pas décourager un débutant, nous allons commencer par exemple simple permettant de remplacer un contenu sélectionné dans une page web à l’aide de la fonction append();

<script type="text/javascript">
$(document).ready(function() {
$("div").text("Chargement du DOM...");
});
</script>

C’est exactement le contenu qui se trouve au niveau de la balise <div> qui va être remplacé par le nouveau

Exemple

<h1>Premier pas avec jQuery</h1>
<div>Ce contenu sera remplacé et vous ne l'allez pas voir au niveau de l'exécution ! </div>
<script type="text/javascript">
$(document).ready(function() {
$("div").text("Chargement du DOM");
$("div").append("<h3> Exemple jQuery avec la fonction append() </h3>");
});
</script>

Exemple complet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mon premier test jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Premier pas avec jQuery</h1>
<div>Ce contenu sera remplacé et vous ne l'allez pas voir au niveau de l'exécution ! </div>
<script type="text/javascript">
$(document).ready(function() {
$("div").text("Chargement du DOM");
$("div").append("<h3> Exemple jQuery avec la fonction append() </h3>");
});
</script>
</body>
</html>

Ce qui affiche après exécution :

Remarquez bien que le contenu qui se trouve au niveau de la balise div a été remplacé !

]]> Introduction au Framework jQuery https://sibylassana95.github.io/mon-blog/2022/06/18/introduction-au-framework-jquery/ Sat, 18 Jun 2022 17:33:11 +0000 https://sibylassana95.github.io/mon-blog/?p=255
jQuery fournit également un paradigme pour la gestion des événements qui va au-delà de la sélection et de la manipulation élémentaires des éléments DOM. L'affectation d'événement et la définition de la fonction de rappel d'événement sont effectuées en une seule étape dans un seul emplacement du code. jQuery vise également à incorporer d'autres fonctionnalités JavaScript très utilisées (par exemple, fondus enchaînés et fondus masqués lorsque vous masquez des éléments, des animations en manipulant les propriétés CSS).

jQuery est une bibliothèque JavaScript multiplateforme conçue pour simplifier les scripts côté client de HTML, & Javascript. C’est un script libre et open-source. Si vous faite une analyse des pages Web vous allez constater qu’il s’agit de  la bibliothèque JavaScript la plus répandu et la plus utilisée. La syntaxe de jQuery est conçue pour faciliter la navigation dans un document,

sélectionner des éléments DOM, créer des animations, gérer des événements et développer des applications Ajax. jQuery offre également aux développeurs la possibilité de créer des plug-ins via sa bibliothèque JavaScript. Cela permet aux développeurs de créer des abstractions pour l’interaction et l’animation de bas niveau, des effets avancés et des widgets thématiques de haut niveau. L’approche modulaire de la bibliothèque jQuery permet la création de puissantes pages Web dynamiques et d’applications Web rapidement.

L’ensemble des fonctionnalités de base de jQuery, sélections d’éléments DOM, traversées et manipulations activées par son moteur de sélection nommé “Sizzle” , a créé un nouveau “style de programmation”, algorithmes de fusion et structures de données DOM. Ce style a influencé l’architecture d’autres frameworks JavaScript comme YUI v3 et Dojo, stimulant plus tard la création de l’API Selectors standard.
De nombeuses sociétés intègre actuellement le framework jQuery dans leurs produits, comme Microsoft, Google, Facebook, Nokia…
Vous pouvez télécharger gratuitement jQuery via : https://jquery.com/download/
NB : Vous pouvez utiliser jQuery sans le télécharger, il suffit alors d’inserer une balise indiquant le chemin de la librairie entre les balises Head et /Head :

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
]]> L’objet javascript array https://sibylassana95.github.io/mon-blog/2022/06/18/lobjet-javascript-array/ Sat, 18 Jun 2022 17:31:56 +0000 https://sibylassana95.github.io/mon-blog/?p=253

1 – A propos de l’objet javascript array

L’objet Array vous permet de stocker plusieurs valeurs dans une seule variable. Il stocke une collection séquentielle de taille fixe d’éléments du même type. Un tableau est utilisé pour stocker une collection de données, mais il est souvent plus utile de considérer un tableau comme une collection de variables du même type.

2 – Syntaxe

Pour créer un objet Array, on utilise la syntaxe suivante:

var laptop = new Array ("acer", "hp", "del");

Le paramètre Array est une liste de chaînes ou d’entiers. Lorsque vous spécifiez un seul paramètre numérique avec le constructeur Array, vous spécifiez la longueur initiale du tableau. La longueur maximale autorisée pour un tableau est de 4 294 967 295.

Vous pouvez créer un tableau en attribuant simplement des valeurs:

var laptop = ["acer", "hp", "del"];

Vous utiliserez des nombres ordinaux pour accéder et définir des valeurs dans un tableau comme suit.

laptop [0] // est le premier élément
laptop [1]  //est le deuxième élément
laptop [2]  //est le troisième élément

3 – Propriétés d’un objet array

Voici une liste des propriétés de l’objet Array ainsi que leur descriptions:

  1. Constructor : renvoie une référence à la fonction de tableau qui a créé l’objet.
  2. index:  propriété qui représente l’index de base zéro de la correspondance dans la chaîne
  3. input : cette propriété n’est présente que dans les tableaux créés par des correspondances d’expressions régulières.
  4. length :  reflète le nombre d’éléments dans un tableau.
  5. prototype :  la propriété prototype vous permet d’ajouter des propriétés et des méthodes à un objet.

4 – Les méthodes associées à l’objet array

Voici une liste des méthodes de l’objet Array ainsi que leur description:

  1. concat () :  renvoie un nouveau tableau composé de ce tableau joint à d’autres tableaux et / ou valeurs.
  2. every() : renvoie true si chaque élément de ce tableau satisfait la fonction de test fournie.
  3. filer() : crée un nouveau tableau avec tous les éléments de ce tableau pour lesquels la fonction de filtrage fournie renvoie true.
  4. forEach() : appelle une fonction pour chaque élément du tableau.
  5. indexOf () : renvoie le premier (le moins) index d’un élément dans le tableau égal à la valeur spécifiée, ou -1 si aucun n’est trouvé.
  6. join() : joint tous les éléments d’un tableau en une chaîne.
  7. lastIndexOf () : renvoie le dernier (le plus grand) index d’un élément dans le tableau égal à la valeur spécifiée, ou -1 si aucun n’est trouvé.
  8. map() :  crée un nouveau tableau avec les résultats de l’appel d’une fonction fournie sur chaque élément de ce tableau.
  9. pop () : supprime le dernier élément d’un tableau et renvoie cet élément.
  10. push() : ajoute un ou plusieurs éléments à la fin d’un tableau et renvoie la nouvelle longueur du tableau.
  11. reduce() : appliquez une fonction simultanément contre deux valeurs du tableau (de gauche à droite) afin de la réduire à une seule valeur.
  12. reduceRight() : ppliquez une fonction simultanément contre deux valeurs du tableau (de droite à gauche) afin de la réduire à une seule valeur.
  13. reverse() : inverse l’ordre des éléments d’un tableau – le premier devient le dernier et le dernier devient le premier.
  14. shift() : supprime le premier élément d’un tableau et renvoie cet élément.
  15. slice() : extrait une section d’un tableau et renvoie un nouveau tableau.
  16. some() : renvoie true si au moins un élément de ce tableau satisfait la fonction de test fournie.
  17. toSource () : représente le code source d’un objet
  18. sort() : trie les éléments d’un tableau
  19. splice() : ajoute et / ou supprime des éléments d’un tableau.
  20. toString () : renvoie une chaîne représentant le tableau et ses éléments.
  21. unshift () : ajoute un ou plusieurs éléments à l’avant d’un tableau et renvoie la nouvelle longueur du tableau.
]]> Le modèle objet du Javascript https://sibylassana95.github.io/mon-blog/2022/06/18/le-modele-objet-du-javascript/ Sat, 18 Jun 2022 17:30:13 +0000 https://sibylassana95.github.io/mon-blog/?p=251 1 – Introduction

Le langage javascript est un langage orienté objet, en plus il est doté de l’avantage de manipulation d’objets sans instanciation, et par suite vous pouvez manipuler tous ce qui apparaissent dans votre browser : fenêtres corps du document, boutons, zones de texte… comme etant des objets javascript. Nous n’allons pas ici traiter le coté POO du javascript proprement dit mais quelque exemple d’objets fondamentaux. Pour accéder aux propriétés d’un objet on utilise la syntaxe:

objet.propriété

2 – Objet Javascript prédéfinit

2.1 – L’objet window

Tous les composants d’une page web sont des objets y compris l’objet windows qui est leur parent, l’objet window est parfois appelé l’objet par excellence. Exemple pour écrire un texte on utilise la syntaxe :

window.document.write(‘bonjour’);

Propriétés et méthodes de l’objet window

Propriété ou méthodeDescription
documentpermet d’accéder à tous les objets
statusaffiche un message dans la barre d’état
namele nom de la fenêtre actuelle
windowfenêtre actuelle
Home()permet d’atteindre la page d’accueil
Alert()affiche un message sur une boite
Prompt()affichage d’une boite qui contrôle la saisi clavier
Close()ferme la fenêtre
Open()ouvre une fenêtre pop-up
Blur()cache la fenêtre
resizeBy()permet de modifier les dimensions de la fenêtre

Remarque

En Javascripte, ils existent de nombreux autres  objets  dotés de méthodes et de propriétés accessibles directement sans instanciation, on peut en citer :  String, Math, date, navigator, array…

Si on veut  à titre d’exemple examiner l’objet String, de nombreuses méthodes sont associées à ce dernier :

charAt ()   Retourne le caractère à l’index spécifié (position)

charCodeAt ()   Retourne l’Unicode du caractère à l’index spécifié

concat ()   Joint deux chaînes ou plus et renvoie une nouvelle chaîne jointe

endsWith ()   Vérifie si une chaîne se termine par des chaînes / caractères spécifiés

fromCharCode ()   Convertit les valeurs Unicode en caractères

includes ()   Vérifie si une chaîne contient la chaîne / les caractères spécifiés

indexOf ()   Renvoie la position de la première occurrence trouvée d’une valeur spécifiée dans une chaîne

lastIndexOf ()   Renvoie la position de la dernière occurrence trouvée d’une valeur spécifiée dans une chaîne

localeCompare ()   Compare deux chaînes dans les paramètres régionaux en cours

match ()   Recherche une chaîne pour une correspondance avec une expression régulière et renvoie les correspondances

repeat ()   Retourne une nouvelle chaîne avec un nombre spécifié de copies d’une chaîne existante

replace ()   Recherche une chaîne pour une valeur spécifiée ou une expression régulière et renvoie une nouvelle chaîne dans laquelle les valeurs spécifiées sont remplacées

search ()   Recherche une chaîne pour une valeur spécifiée ou une expression régulière et renvoie la position de la correspondance

slice ()   Extrait une partie d’une chaîne et retourne une nouvelle chaîne

split ()   Divise une chaîne en un tableau de sous-chaînes

startsWith ()   Vérifie si une chaîne commence par des caractères spécifiés

substr ()   Extrait les caractères d’une chaîne, en commençant à une position de départ spécifiée, et à travers le nombre de caractères spécifié

substring ()   Extrait les caractères d’une chaîne, entre deux index spécifiés

toLocaleLowerCase ()   Convertit une chaîne en minuscules, en fonction des paramètres régionaux de l’hôte

toLocaleUpperCase ()   Convertit une chaîne en majuscules, en fonction des paramètres régionaux de l’hôte

toLowerCase ()   Convertit une chaîne en lettres minuscules

toString ()   Retourne la valeur d’un objet String

toUpperCase ()   Convertit une chaîne en majuscules

trim ()   Supprime les espaces des deux extrémités d’une chaîne

valueOf ()   Renvoie la valeur primitive d’un objet String

Nous n’allons pas pouvoir traiter toutes ces méthodes ici, mais amusons nous à faire un petit exemple simple pour la première charAt().Le lecteur curieux peux consulter ces méthodes en détails chacune avec un exemple bien expliqué  ici

Exemple

<script type="text/javascript">
var s = new String("bonjour");
alert("Le premier caractère de la chaine 'bonjour' est  " + s.charAt(0));
</script>

Ce qui affiche au navigateur :

3 – Prototypes orienté objet

JavaScript utilise des prototypes où de nombreux autres langages orientés objet utilisent des classes pour l’héritage.  Il est possible de simuler de nombreuses fonctionnalités basées sur des classes avec des prototypes en JavaScript.

3.1 – Fonctions en tant que constructeurs d’objets

On peut créer des objets dotés de paramètres et propriétés en déclarant de simples fonctions Javascript.

Exemple

<script type="text/javascript">
function mobile(marque,system){
this.marque=marque;
this.system=system;
}
</script>

Cet exemple permet de créer un objet nommé : mobile doté des deux paramètres : marque et system. Si on veut par exemple faire une instanciation pour créer un objet téléphone de marque  : Galaxy  dont le système est Android, il suffit d’ajouter le code :

var mymobile=new mobile("Galaxy","Android");
//affichage des résultats
alert("Mon mobile est  " + mymobile.marque + " Son system est  " + mymobile.system);

3.2 – Les classes  Javascript

Javascript  est doté de l’instruction class qui permet à l’utilisateur de créer ses propres classes, de faire l’instanciation pour créer des objets…

Syntax :

class nom_de_la_classe {
  constructor(paramètres) {
  }
}

Exemple

<script type="text/javascript">
class Rectangle {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }
}
</script>

Cet exemple permet de construire une classe nommée rectangle dotée d’un constructeur ayant deux paramètres hauteur et largeur. Pour faire une instanciation sur cette classe et créer un objet rectangle il suffit d’ajouter le code :

const R= new Rectangle(20, 12);
//affichage des résultats
alert("la hauteur du rectangle est : "+R.hauteur + " La largeur du rectangle est : "+ R.largeur);

Ce qui affiche après exécution :

Remarque

On peut aussi ajouter d’autres méthodes à la classes, par exemple une méthode qui calcul la surface, une autre qui calcul le périmètre…

<script type="text/javascript">

class Rectangle {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }
  surface(){
  return this.hauteur*this.largeur;
  }
  
  périmètre(){
  return 2*(this.hauteur + this.largeur);
}
}
const R= new Rectangle(8, 6);
//affichage des résultats
alert("la surface du rectangle est : "+R.surface() + " Le périmètre du rectangle est : "+ R.périmètre());
</script>
]]> Les événements Javascript https://sibylassana95.github.io/mon-blog/2022/06/18/les-evenements-javascript/ Sat, 18 Jun 2022 17:29:00 +0000 https://sibylassana95.github.io/mon-blog/?p=248 . Les événements Javascript : syntax

Le click de la sourie, le passage de la sourie … sont dit événements. Javascript peut associer des méthodes ou procédures à ces derniers à l’aide de la syntaxe :

onEvenement="Action_Javascript_ou_Fonction();"

Grâce au Javascript de nombreuses opérations sont susceptible d’être déclenchés dès que le visiteur effectue une opération sur la page à titre d’exemple :
– En cliquant sur un lien ou un bouton, un événement onClick se déclenche
– En passant la sourie sur un texte, un événement onMouseover se produit
– En modifiant le contenu d’un champ de texte, un événement onChange se déclenche
…

2. Liste des événement Javascript

Evénement Javascript Effet produit
onClickSe produit lorsque l’utilisateur clique sur l’élément associé à l’événement
onLoadSe produit lorsque le navigateur de l’utilisateur charge la page en cours
onUnloadSe produit lorsque le navigateur de l’utilisateur quitte la page en cours
onMouseOverSe produit lorsque l’utilisateur positionne le curseur de la souris au-dessus d’un élément
onMouseOutSe produit lorsque le curseur de la souris quitte un élément
onMouseDownquand le bouton de la sourie est appuyé
onMouseMovequand le curseur bouge
onMouseUpquand le bouton de la sourie est relâché
onFocusSe produit lorsque l’utilisateur donne le focus à un élément, c.a.d  élément est sélectionné comme étant actif
onBlurSe produit lorsque l’élément perd le focus, c.a.d élément non sélectionné ( désactivé )
onChange Se produit lorsque l’utilisateur modifie le contenu d’un champ de données
onSelect Se produit lorsque l’utilisateur sélectionne un texte dans un champ de type “text” ou “textarea” ou un objet
onSubmit Se produit lorsque l’utilisateur clique sur le bouton de soumission d’un formulaire
onabortlorsque l’utilisateur a stoppé le chargement de l’image
ondlclickquand on fait un double clique
ondragdropquand on déplace un objet dans une fenêtre
onerrorlorsqu’il se produit une erreur de script
onkeydownquand une touche du clavier est enfoncée
onkeypressquand on appuie sur une touche
onkeyupquand on lâche une touche du clavier
onMovequand on déplace la fenêtre
onReset  quand on réinitialise
onResizequand on redimensionne

 3. Exemples d’événement Javascript

Exemple 1 ( l’événement onLoad )

<body onload="alert('Bienvenue sur le site');">

</body>

Cet exemple affiche le message “Bienvenue sur le site” dès le chargement de la page :

onload-javascript

Exemple 2 ( l’événement onBlur )



</p>
<form><input size=40 type="text" value="Cliquez ici pour voir l'événement onblur" onblur="alert('vous avez quitté le champ de texte')"/>
</form>
<p>

Testez vous même ce code

Vous verrez apparaitre la fenêtre suivante :

onblur-javscript

Exemple 3  ( les événements onMousOut et onMousOver)

<a href="#" onmouseOver="alert('vous avez testé onmouseover')" onmouseOut="alert('Vous venez de tester onMouseOut')">Evénement onMousOver</a>

Quand vous faite passer la sourie au dessus du lien vous verrez apparaitre la fenêtre suivante :

onmouseover-javascript

Et quand vous quittez le lien vous verrez apparaitre la fenêtre suivante :

onmousout-javascript

Exemple 4 ( changement d’image avec onMousOver et onMouseOut )

<html>
<head>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22Javascript%22%3E%0Afunction%20lightUp()%20%7B%0Adocument.images%5B%22voiture%22%5D.src%3D%22rouge.jpg%22%0A%7D%0Afunction%20dimDown()%20%7B%0Adocument.images%5B%22voiture%22%5D.src%3D%22blanche.jpg%22%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>
<a href="#" onmouseOver="lightUp();" onmouseOut="dimDown();">
<img src="blanche.jpg" name="voiture" width=250 height=250 border=0> </a>
</body>
</html>

Enregistrez ce fichier sur un dossier de votre machine, avec deux images :  rouge.jpg et blanche.jpg que vous pouvez télécharger via google images. Vous pouvez aussi télécharger l’application via  ce lien

Dans cet exemple quand vous faite passer la sourie sur l’image elle change, c’est l’événement onmouseOver=”lightUp();” qui se produit et fais afficher l’image rouge.jpg qui est programmée dans la fonction lightUp() :

function lightUp() {
document.images["voiture"].src="rouge.jpg"
}

Et quand vous quittez l’image elle reprend sa forme c.a.d  l’image blanche.jpg s’affiche qui est programmée dans la fonction dimDown() :

function dimDown() {document.images["voiture"].src="blanche.jpg"
}

4. Tutoriel Vidéo

https://youtube.com/watch?v=FCQuU5tTQak%3Ffeature%3Doembed
]]> Javascript Les structures de controls et les boucles https://sibylassana95.github.io/mon-blog/2022/06/18/javascript-les-structures-de-controls-et-les-boucles/ Sat, 18 Jun 2022 17:21:28 +0000 https://sibylassana95.github.io/mon-blog/?p=240 1 – La structure conditionnelle If

Les structures conditionnelles permettent l’exécution d’un groupe d’instructions lorsqu’une condition est réalisée. La plus répandu est la structure If , la syntaxe est la suivante :

if (condition){
    Bloc d'instructions
   }
    else{
    Bloc d'instructions
    }

Exemple

Nous allons créer maintenant un exemple à l’aide de la fonction prompt() ( rappelons qu’il   s’agit  d’une méthode qui invite l’internaute  à saisir une donnée à l’aide du clavier, une fois la donnée saisie elle sera récupéré dans une variable javascript )

Si vous exécutez ce code vous allez voir apparaitre une fenêtre comme celle ci :

C’est une fenêtre contenant un champ de texte et vous invitant à tapez votre age, votre age sera récupéré dans une variable javascript et analysé : si votre age est < 18 ans elle vous affiche le message “vous êtes mineur” dans le cas contraire, elle vous affiche le message : “vous êtes majeur”

Si vous tapez un age supérieur à 18 ans vous allez voir apparaitre le message suivant :

javascript-prompt

2 – Les boucles : for, while et do while.

La boucle for

Les boucles permettent de répéter une séquence du programme un nombre spécifique de fois.
La boucle for est constituée de trois paramètres :
– La valeur initiale du compteur
– La condition d’arrêt du passage dans la boucle
– La valeur d’incrémentation du compteur

Syntax :

for (compteur=début ;  compteur < =fin ;  compteur ++){
Liste d'instructions ;
}

Exemple :

(Cet exemple permet d’afficher le message bienvenue 10 fois)

javascript-boucle-for

Exemple ( Calcul de Factorielle n! )

Exemple ( algorithme Javascript permettant de calculer factorielle n! )

1ère partie ( Calcul de factorielle d’un entier donné exemple n = 5 )

2ème partie ( Calcul de factorielle n! pour un entier donné saisi par l’utilisateur )

Il suffit d’introduire n à l’aide de la fonction prompt

var n=prompt("Tapez votre nombre n");

et d’utiliser l’algorithme précédent

On peut introduire la valeur de n à l’aide d’un bouton de commande et afficher les valeur sur champ de texte

La boucle while

La boucle while permet de répeter une plusieurs instruction autant qu’une condition soit réalisée

Syntaxe  :

while ( condition booléenne )
{ Instructions à itérer }

]]> Javascript Variables, opérateurs et fonction Javascript https://sibylassana95.github.io/mon-blog/2022/06/18/javascript-variables-operateurs-et-fonction-javascript/ Sat, 18 Jun 2022 17:20:15 +0000 https://sibylassana95.github.io/mon-blog/?p=238 1 – Les variables Javascript

1 – 1 Définition :

Une variable Javascript est  un conteneur, c’est à dire elle est introduite pour  représenter ou schématiser une zone mémoire ou autrement dit  un lieu de stockage d’informations.

1 – 2 Types de variable Javascript :

Javascript comprend 4 types de variables :

– nombre : entier ou à virgule ( comme 5     7   2.35… )

– chaîne de caractères (string ) ( comme  “voiture” , “maison”, “arbre” …)

– Booléens ( valeur logique comme true ou false )

Pour déclarer une variable il suffit de mettre l’instruction var suivie du nom de la variable

var x=5;
//on vient de définir une variable x dont la valeur est 5

Javascript est un langage à typage dynamique, ce qui veut dire  qu’on est pas obligé à déclarer le type de la variable. prenons l’exemple suivant pour bien éclaircir le truc :

var x=5;
//le type de la variable x est maintenant numérique
x="voiture";
//le langage convertis automatiquement le type de la variable numérique au type string

1 -3 Concaténation de variables

Le terme concaténation signifie : juxtaposition ou  enchaînement, et ici en javascript le terme veut dire mettre une variable juste à coté de l’autre, pour concaténer deux variables on utilise le symbol  “+” :

Exemple :

var x="auto";
var y="bus";
var z=x+y;
//la variable z prend la valeur "autobus"
<script language="javascript">
var x=5;
window.document.write("la valeur de x est " + x);
//le symbol + ici joue le rôle de la concaténation
</script>

Ce qui va afficher après exécution : la valeur de x est : 5 ( c’est une concaténation entre une variable de type numérique  x=5  et une variable de type string  “la valeur de x est : ” )

1 – 4 Récupération d’une saisie clavier dans une variable Javascript

On a besoin parfois de demander à l’internaute de saisir à l’aide du clavier des données et de les récupérer sous forme de variable javascript, pour cela le langage javascript est doté d’une méthode nommée prompt() 

Exemple :

<script language="javascript">
    var age=prompt("Tapez votre age") ;
    document.write("Votre age est " + age + " ans ") ;
    </script>

Si vous exécutez ce code vous allez voir apparaitre une fenêtre comme celle ci :

Amusez vous maintenant à tapez votre age sur le champ de saisie de cette fenêtre tapez par exemple 30, et vous allez voir apparaitre la fenêtre suivante :

2 – Les opérateurs Javascript

Les opérateurs sont des symboles qui permettent de manipuler des variables, c’est-à-dire effectuer des opérations, les évaluer, …On distingue plusieurs types d’opérateurs: les opérateurs de calcul les opérateurs d’assignation, les opérateurs de comparaison, les opérateurs logiques,…

2 – 1 Les opérateurs de calcul

Les opérateurs de calcul permettent de modifier mathématiquement la valeur d’une variable
+ opérateur d’addition Ajoute deux valeurs
– opérateur de soustraction Soustrait deux valeurs
* opérateur de multiplication Multiplie deux valeurs
/ opérateur de division Divise deux valeurs
= opérateur d’affectation Affecte une valeur à une variable x=3 Met la valeur 3 dans la variable x

2 – 2 Les opérateurs d’assignation

Ces opérateurs permettent de simplifier des opérations telles que ajouter une valeur dans une variable et stocker le résultat dans la variable. Par exemple: x=x+2

Avec les opérateurs d’assignation il est possible d’écrire cette opération sous la forme suivante: x+=2. C’est à dire si x= 3 elle devient après l’opération 5.

+= additionne deux valeurs et stocke le résultat dans la variable (à gauche)
-= soustrait deux valeurs et stocke le résultat dans la variable
*= multiplie deux valeurs et stocke le résultat dans la variable
/= divise deux valeurs et stocke le résultat dans la variable

3 – Les fonctions Javascript

Le langage Javascript est doté d’un grand nombre de fonctions, mais en essayant de répondre aux exigences et besoins de l’utilisateur ce langage nous offre la possibilité de construire ses propres fonction. La syntaxe est la suivante :

    function nom_de_la_fonction(arguments) {
… code des instructions …
}
Le code d’une fonction peut être introduit dans une page HTML de deux façons différentes : ou bien :

1 –  entre les balises Head  et /Head  dans ce cas elle ne sera pas exécuté directement au chargement de la page pour qu’il en soit ainsi il faut donner un ordre d’exécution sur la balise Body  à l’aid de l’instruction Body onload

2 – directement entre les balises Body et /Body  et il sera directement exécuté avec le chargement de la page

En utilisant la première méthode, voici un exemple d’une fonction affichant ule message :  bienvenue au CRMEF OUJDA

<html>
    <head>
    <script language="Javascript">
    function bienvenue() {
    alert("Bienvenue au CRMEF Oujda");
    }
    </script>
    </head>
    <body onLoad="bienvenue()">
    </body>
    </html>

Voici un autre exemple de fonction permettant de calculer la somme de deux nombres :

<script language="javascript">
function somme(x,y){
return x+y;
}
var z=somme(5,4);
document.write("La somme de 5 et de 4 est " + z);
</script>

Ce qui affiche après exécution :  “La somme de 5 et de 4 est 9″

4 – Les événements Javascript

On appelle événement toute action comme : click de la sourie,  passage de la sourie, mettre le curseur dans une zone de saisie …  Javascript peut associer des méthodes ou procédures à ces derniers à l’aide de la syntaxe :

 onEvenement=”Action_Javascript_ou_Fonction();”

4 – 1 Liste des événements

Click (onClick)
Se produit lorsque l’utilisateur clique sur l’élément associé à l’événement

Load (onLoad)
Se produit lorsque le navigateur de l’utilisateur charge la page en cours

Unload (onUnload)  
Se produit lorsque le navigateur de l’utilisateur quitte la page en cours

MouseOver (onMouseOver)
Se produit lorsque l’utilisateur positionne le curseur de la souris au-dessus d’un élément

MouseOut (onMouseOut)
Se produit lorsque le curseur de la souris quitte un élément

Focus (onFocus)
Se produit lorsque l’utilisateur donne le focus à un élément, c’est-à-dire que cet élément est sélectionné comme étant l’élément actif

Blur (onBlur)
Se produit lorsque l’élément perd le focus, c’est-à-dire que l’utilisateur clique hors de cet élément, celui-ci n’est alors plus sélectionné comme étant l’élément actif

Change (onChange)
Se produit lorsque l’utilisateur modifie le contenu d’un champ de données

Select (onSelect)
Se produit lorsque l’utilisateur sélectionne un texte (ou une partie d’un texte) dans un champ de type “text” ou “textarea”

Submit (onSubmit)
Se produit lorsque l’utilisateur clique sur le bouton de soumission d’un formulaire (le bouton qui permet d’envoyer le formulaire)

Exemple ( événement onclick )

Nous allons créer une fonction  exemple() dont la fonction est l’affichage du message ” Vous avez cliqué sur le bouton” et lui associer un bouton lié à l’événement onclick 

<html>
    <head>
    <script language="Javascript">
    function exemple() {
    return alert("Vous avez cliqué sur le bouton");
    }
    </script>
    </head>
    <body>
	<input type=button value="Cliquer ici" onclick="exemple();">
    </body>
    </html>

Et maintenant en cliquant sur aperçu on obtient une fenêtre qui contient un bouton :

onclick-javascript

En cliquant sur ce bouton il se produit l’événement exemple() qui  est une fonction permettant d’afficher le message ” Vous avez cliqué sur le bouton” :

executer-evenement-javascript

J’espère que vous avez bien compris les événement Javascript, si vous avez des questions et que vous avez besoin d’un soutien merci de le poster sur notre  page  communauté de Google plus

]]> Introduction Javascript https://sibylassana95.github.io/mon-blog/2022/06/18/introduction-javascript/ Sat, 18 Jun 2022 17:18:25 +0000 https://sibylassana95.github.io/mon-blog/?p=236 Qu’est-ce que JavaScript ?
Bienvenue dans le cours JavaScript pour débutants MDN! Dans ce premier
article, nous examinerons JavaScript à un niveau élevé, en répondant à
des questions telles que « qu’est-ce que c’est? », et « que fait-il? », et en
nous assurant que vous êtes à l’aise avec l’objectif de JavaScript.
Un premier coup d’œil en JavaScript
Maintenant que vous avez appris quelque chose sur la théorie de
JavaScript, et ce que vous pouvez en faire, nous allons vous donner un
cours intensif sur les fonctionnalités de base de JavaScript via un tutoriel
complètement pratique. Ici, vous allez construire un jeu simple « Devinez le
nombre », étape par étape.

Qu’est-ce qui a mal tourné? Dépannage de JavaScript
Lorsque vous avez créé le jeu « Devinez le nombre » dans l’article
précédent, vous avez peut-être constaté que cela ne fonctionnait pas.
N’ayez crainte – cet article vise à vous éviter de vous arracher les cheveux
sur de tels problèmes en vous fournissant quelques conseils simples sur la
façon de trouver et de corriger les erreurs dans les programmes JavaScript

Après avoir lu les deux derniers articles, vous devriez maintenant savoir ce
qu’est JavaScript, ce qu’il peut faire pour vous, comment vous l’utilisez aux
côtés d’autres technologies Web et à quoi ressemblent ses principales
fonctionnalités à un niveau élevé. Dans cet article, nous allons passer aux
bases réelles, en examinant comment travailler avec les blocs de
construction les plus élémentaires de JavaScript – Variables.

]]>