PowerPoint PresentationIdentifier les phases de l’évolution de JavaScript
Identifier les caractéristiques de JavaScript
Comparer les applications côté serveur et côté client
Identifier les mots réservés employés dans JavaScript
Déclarer des variables pour stocker des données dans JavaScript
Manipuler des données à l’aide d’expressions et d’opérateurs
Utiliser des structures de prise de décision et itératives
Optimiser le code programme à l’aide de fonctions
Définir le comportement du programme à l’aide d’événements
©NIIT
Introduction à JavaScript
Aperçu de JavaScript
JavaScript est un langage de script polyvalent d’utilisation facile développé par Netscape Communications Corporation.
Un langage de script est un langage de programmation conçu pour permettre aux utilisateurs d’écrire facilement des programmes.
JavaScript fonctionne côté client en tant que partie d’une page HTML où il est interprété et exécuté par un navigateur comme Internet Explorer.
©NIIT
Introduction à JavaScript
Script avec JavaScript
JavaScript est considérablement utilisé dans les documents HTML pour valider les entrées des utilisateurs finaux.
JavaScript est doté des caractéristiques suivantes :
JavaScript est basé objets
JavaScript permet un développement rapide
JavaScript est facile à apprendre
Le code JavaScript intégré dans le fichier HTML est interprété et exécuté par le navigateur.
©NIIT
Script avec JavaScript (suite)
Les balises <SCRIPT> et </SCRIPT> servent à marquer le début et la fin du code JavaScript code.
Les scripts servent souvent à effectuer des validations, ils peuvent être exécutés aussi bien côté client que côté serveur.
Dans le script côté serveur, le script est exécuté par le navigateur Web. Dans le script côté client, le script est exécuté côté client lorsque le navigateur client charge la page Web.
©NIIT
Concepts communs de programmation
Certaines conventions relatives à l’utilisation de points-virgules, de commentaires et de guillemets dans JavaScript diffèrent des autres langages de script. La structure d’un programme JavaScript devrait se conformer à ces règles et ces conventions.
Les blocs fonctionnels (briques) d’un programme JavaScript comprennent les structures suivantes :
Variables
Opérateurs
Expressions
Fonctions
JavaScript ne vous impose pas d’employer un point virgule après chaque énoncé pour en indiquer la fin. Toutefois, la bonne pratique consiste à utiliser le point virgule après les énoncés de script comme la déclaration de variables pour accroître la lisibilité du code.
©NIIT
Concepts communs de programmation (suite)
JavaScript se sert d’indicateurs de commentaires pour placer des commentaires dans un fichier HTML. Ces entrées de commentaires n’auront pas d’effet sur l’apparence du document.
Vous pouvez vous servir soit de guillemets (" ") soit d’apostrophes (' ') pour insérer une chaîne de caractères. JavaScript vous permet d’utiliser des guillemets et des apostrophes lorsque vous utilisez une paire de guillemets à l’intérieur d’une autre paire de guillemets.
JavaScript est un langage de script dépendant maj./min.
A titre d’exemple, dans JavaScript, la variable a est différente de la variable A.
©NIIT
Travail avec des variables et des données
Dans JavaScript, pour stocker les valeurs introduites par l’utilisateur sur une page Web, vous pouvez vous servir de variables.
JavaScript emploie certains mots dotés de spécifications spéciales. Ils sont appelés mots clés et mots réservés. Les mots clés et les mots réservés ne peuvent être utilisés pour des noms de variable ou de fonction.
Les mots clés sont les identificateurs prédéfinis constituant le fondement de JavaScript. Ils effectuent des fonctions uniques prédéfinies comme la déclaration de variables (var) et la définition de fonctions (fonction).
©NIIT
Variables
Dans JavaScript, les variables peuvent stocker différents types de données. Les types de données peuvent être classés en trois catégories :
Number (de numérotation)
String (de chaîne)
La variable suit les règles suivantes d’affectation de noms :
Le premier caractère de la variable doit commencer par un caractère alphabétique ou souligné (_). Les caractères suivants peuvent être des lettres, des numéros ou le caractère souligné.
La règle d’affectation de noms dans JavaScript est d’utiliser deux mots pour nommer une variable, le second en majuscules mais pas le premier.
JavaScript est sensible à la casse.
La déclaration de variable est implicite.
©NIIT
Une variable est déclarée par le mot clés var.
Les libellés sont les valeurs de données réelles que vous donnez dans JavaScript. Il s’agit de valeurs fixes que vous affectez à des variables. Les trois catégories de libellés sont les suivantes :
Libellé entier
Libellé virgule flottante
Libellé de chaîne
Il est possible d’accéder à une variable soit dans la fonction dans laquelle elle est déclarée, soit dans toute autre fonction. Cela spécifie la portée de la variable. En fonction de son accessibilité, une variable peut être catégorisée en variable locale ou en variable globale.
©NIIT
Calcul avec des opérateurs et des expressions
Les opérateurs servent à effectuer des calculs comme l’addition, la soustraction, la comparaison et la concaténation sur des opérandes.
JavaScript propose les types suivants d’opérateurs :
Arithmétiques (de calcul)
D’affectation
Calcul avec des opérateurs et des expressions (suite)
Les opérateurs de chaque catégories peuvent en outre être classés en :
Opérateurs unaires : les opérateurs unaires opèrent sur un seul opérande.
Opérateurs binaires : les opérateurs binaires opèrent sur deux opérandes.
©NIIT
Addition (+)
Soustraction (-)
Multiplication (*)
Division (/)
Modulo (%)
©NIIT
Logical And (&&) (logique ET)
Logical Or (||) (logique OU)
Logical Not (!) (logique NON)
Les opérateurs de comparaison servent à comparer deux valeurs numériques.
Les opérateurs de comparaison supportés par JavaScript sont les suivants :
Égal (==)
Les opérateurs de modification de configuration binaire effectuent des opérations sur la représentation binaire d’une valeur.
Les opérateurs de modification de configuration binaire supportés dans JavaScript sont les suivants :
& (Bitwise AND) (au niveau du bit, ET)
| (Bitwise OR) (au niveau du bit, OU)
^ (Bitwise XOR) (au niveau du bit, OU exclusif)
<< (Bitwise left shift) (au niveau du bit, déplacement à gauche)
>> (Bitwise signed right shift) (au niveau du bit, déplacement signé à droite)
©NIIT
Introduction à JavaScript
Opérateurs d’affectation
Les opérateurs d’affectation servent à affecter des valeurs aux variables.
Les opérateurs d’affectation supportés par JavaScript sont les suivants :
=(Affecte la valeur de l’opérande droit à l’opérande gauche.)
+=(Ajoute les opérandes et affecte le résultat à l’opérande gauche.)
-=(Soustrait l’opérande droit de l’opérande gauche et affecte le résultat à l’opérande gauche.)
*=(Multiplie les opérandes et affecte le résultat à l’opérande gauche.)
/=(Divise l’opérande gauche par l’opérande droit et affecte le résultat à l’opérande gauche.)
%=(Divise l’opérande gauche par l’opérande droit et affecte le résultat à l’opérande gauche.)
©NIIT
JavaScript supporte l’opérateur d’expression conditionnelle ? :.
Cet opérateur prend trois opérandes : la condition devant être évaluée et deux valeurs alternatives devant être retournées en fonction de la condition.
©NIIT
Introduction à JavaScript
Préséance des opérateurs
La préséance des opérateurs détermine les expressions devant être évaluées avant d’autres. A titre d’exemple, dans l’expression 4+6*2, la multiplication a préséance sur l’addition et l’expression est évaluée à 16.
Lorsque plus d’un opérateur est listé à un niveau donné, les opérateurs ont une priorité égale et seront évalué en fonction de l’ordre dans lequel ils sont placés, en commençant à partir de la gauche.
©NIIT
Expressions
Une expression fait partie d’un énoncé évalué comme une valeur. Une expression peut utiliser n’importe quelle combinaison de variables, de libellés et d’opérateurs. L’opérateur d’affectation (=) sert à affecter une valeur à une variable.
Dans JavaScript, il existe quatre types d’expressions :
Expression d’affectation
Contrôle de déroulement de programme
Tous les langages de programmation proposent des structures de programmation servant à construire un programme. Les structures de programmation sont de deux types :
Structures de prise de décision ou conditionnelles.
Les structures itératives ou structures en boucle.
©NIIT
Utilisation de structures de prise de décision
Les structures de prise de décision offrent la possibilité d’exécuter une partie d’un programme une seule fois en fonction d’une condition.
Il existe deux types de structures de prise de décision dans JavaScript :
Structure If... else
Structure Switch…case
Pour essayer plusieurs conditions, les structures If imbriquées sont utilisées.
©NIIT
Structure while
Structure do-while
Structure for
Introduction aux fonctions et aux événements
Lors de la création de programmes complexes, vous pouvez souvent avoir à effectuer certaines tâches et actions plus d’une fois durant le cours du programme. Pour cela, vous pouvez créer des fonctions effectuant des tâches spécifiques et pouvant être répétées tout au long du programme.
Les événements servent à ajouter du dynamisme aux pages Web en les faisant répondre à l’interaction de l’utilisateur.
Les événements sont déclenchés par les actions d’utilisateurs comme les cliquages de souris.
©NIIT
Optimisation du code de programme
Comme bonne pratique de programmation, vous pouvez utiliser les fonctions pour regrouper les énoncés fréquemment utilisés dans le code de programme. Une fonction est un bloc de code organisé. Une bonne pratique de programmation veut que vous utilisiez le fonctions pour regrouper les énoncés fréquemment utilisés dans le code de programme. Une fonction est un bloc de code organisé destiné à effectuer une seule action y associée.
Ci-dessous, quelques caractéristiques des fonctions :
Réutilisabilité
Modularité
Fonctions intégrées
©NIIT
Optimisation du code de programme (suite)
Les fonctions intégrées sont déjà codées pour faciliter la tâche du programmeur. Ci-dessous, quelques fonctions intégrées supportées par JavaScript :
isNaN() : aide à déterminer si un argument est "NaN" (not a number) (pas un nombre).
parseInt() : analyse l’argument de chaîne et retourne un entier.
parseFloat() : accepte un argument de chaîne et retourne un numéro à virgule flottante.
eval() : évalue un énoncé ou une expression JavaScript stockés comme chaîne incluant également des équivalents de chaîne ou des expression arithmétiques.
©NIIT
Optimisation du code de programme (suite)
Vous pouvez également créer vos propres fonctions dans JavaScript pour accroître la lisibilité et l’efficacité. Ces fonctions sont appelées fonctions définies par l’utilisateur.
Pour vous servir efficacement des fonctions, vous devez savoir:
Comment déclarer une fonction définie par l’utilisateur
Comment passer des arguments
Comment retourner une valeur
Comment appeler une fonction définie par l’utilisateur à partir du programme principal
JavaScript sur le modèle objet dans lequel chaque objet a ses méthodes. Les méthodes sont les actions qu’un objet peut être appelé à effectuer.
Les deux méthodes suivantes sont couramment utilisées dans JavaScript :
Méthode alert()
Méthode prompt()
Optimisation du code de programme (suite)
La méthode alert()est une méthode offerte par JavaScript pour communiquer avec l’utilisateur.
La syntaxe de la méthode alert()est la suivante :
alert("Message to the user");
Vous pouvez employer la méthode prompt()pour créer une boîte de dialogue et un message approprié.
La syntaxe de la méthode prompt()est la suivante :
prompt("Message to the user");
Définition du comportement de programme
Le comportement de programme fait référence au résultat d’un programme lorsque l’utilisateur interagit avec ce programme.
La fonction, exécutée en réponse à un événement, est appelée gestionnaire d’événement. Cette fonction de gestionnaire d’événement réside dans l’interprète JavaScript du navigateur Web.
La figure suivante affiche le processus de gestion d’événement :
UTILISATEUR
NAVIGATEUR
TRAITEUR d'ÉVÉNEMENT
Produit d'un événement
Énoncé de problème
Creative Books Corporation est un libraire réputé dans le New Jersey, aux Etats-Unis. Le site Web actuel de la société propose aux clients, un service d’achat en ligne de livres, magazines, journaux et CD. Récemment, Bruce, le PDG de la société, a ressenti le besoin d’inclure une section de calcul sur l’une des pages Web du site Web. Cela permettrait aux clients de calculer le montant total de leurs achats avant de passer une commande.
©NIIT
Dans cette leçon, vous avez appris que :
Un script est un programme ou une séquence d’instructions interprétés ou mis en œuvre par un autre programme au lieu du processeur d’un ordinateur à l’inverse d’un programme compilé.
Il existe un certain nombre de langages de script parmi lesquels Perl, REXX (sur ordinateurs centraux IBM), JavaScript, VBScript et Tcl/Tk.
JavaScript est un langage de script utilisé par les auteurs de pages Web pour scripter dynamiquement le comportement d’objets comme un formulaire ou un bouton fonctionnant côté client et côté serveur.
Java Script a été développé par Netscape Communications Corporation.
©NIIT
JavaScript est basé objets et non orienté objets
JavaScript est guidé par l’événement
JavaScript est indépendant de la plateforme
JavaScript permet de rapides développements
JavaScript est facile à apprendre
Les blocs fonctionnels d’un programme JavaScript sont les énoncés, les fonctions, les opérateurs et les expressions.
JavaScript autorise l’utilisation du point virgule pour déparer les énoncés les uns des autres.
JavaScript utilise deux types d’indicateurs de commentaires. L’indicateur // délimite un commentaire sur une seule ligne de script. L’indicateur de commentaire /**/ sert dans les commentaires à plusieurs lignes.
Dans JavaScript, vous pouvez utiliser soit des guillemets ("") soit des apostrophes ('') pour contenir une chaîne de caractères.
©NIIT
JavaScript est un langage de script dépendant Maj/min.
Le code JavaScript intégré dans le fichier HTML file est interprété et exécuté par le navigateur. La balise <SCRIPT> sert à informer le navigateur des sections spécifiques du code HTML dans lesquelles existe JavaScript.
Les mots clés sont les identificateurs prédéfinis formant le fondement de JavaScript. Vous devez utiliser la syntaxe correcte de ces mots, y compris un orthographe et une casse appropriés.
Les mots réservés de JavaScript ne peuvent servir pour des noms de variables ou de fonctions.
Les variables stockent des données de différents types comme "xyz", 15 et 10.65. JavaScript supporte les types de données de chaîne, de nombre et booléennes.
Les libellés sont les valeurs de données réelles que vous donnez dans JavaScript.
En fonction de son accessibilité, la variable peut être catégorisée en variable locale ou en variable globale.
©NIIT
Récapitulation (suite)
Les opérateurs servent à effectuer des calculs sur des variables et des constantes. Les opérateurs peuvent être arithmétiques, de chaîne, bit-à-bit, d’affectation ou relationnels.
Les opérateurs JavaScript sont en outre classés en :
Opérateurs unaires
Opérateurs binaires
Une expression est une combinaison de données et d’opérateurs.
Les structures de programmation sont de deux types :
Structures de prise de décision ou conditionnelles
Structures itératives ou structures en boucle
Les structures de prise de décision ou conditionnelles sont les suivantes :
Structure If...else
Structure switch...case
Structure while
Structure do...while
Structure for
L’énoncé d’interruption sert à sortir d’une boucle qui autrement continuerait d’être exécutée.
L’énoncé de continuité sert à forcer le flux de contrôle au haut de la boucle.
Une fonction est un bloc de code organisé effectuant une seule action y associée. JavaScript supporte deux types de fonctions : intégrées et définies par l’utilisateur.
Les fonctions intégrées peuvent être utilisées partout dans le langage de script. Il n’est pas nécessaire d’écrire de code pour utiliser ces fonctions.
Les fonctions définies par l’utilisateur sont crées par l’utilisateur pour accroître la lisibilité et l’efficacité. L’utilisation de fonctions rend le programme flexible.
©NIIT
Récapitulation (suite)
Les fonctions associées à des objets sont appelées comportements ou méthodes d’objets.
Le comportement du programme fait référence au résultat d’un programme lors de l’interaction de l’utilisateur avec ce programme. Dans JavaScript, les événements sont des actions intervenant à la suite de l’interaction de l’utilisateur avec les pages Web ou d’autres activités liées au navigateur.
Ci-dessous, quelques types d’événements :
cliquer
changer
centrer
charger