Copyright

Utilisateurs en ligne

Users: 1 Invité, 1 Robot

Annonces Google

Tutoriels Informatiques

TICE & Multimédias

Math-pour-Informatiques

Anglais pour débutants

Nous somme sur Facebook

Gearbest  promotion


Programmation Javascript

 Exercice 1

Ecrire un programme javascript qui demande à l’utilisateur de taper son nom et de lui afficher son nom avec le message de bienvenue

Solution :

1. 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 :

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
Continuer la lecture

  1. Introduction au Framework jQuery
  2. Premier pas avec le framework jQuery
  3. Les Sélecteurs jQuery

Bientôt disponible !

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 :

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

Propriété ou méthode
Description
document
permet d’accéder à tous les objets
status
affiche un message dans la barre d’état
name
le nom de la fenêtre actuelle
window
fenê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

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

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 :

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 :

Exemple

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 :

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…

 

Younes Derfoufi
CRMEF OUJDA

Nous sommes sur Facebook