Programmation procédurale Introduction en JavaScript

Présentation au sujet: "Programmation procédurale Introduction en JavaScript"— Transcription de la présentation:

1 Programmation procédurale Introduction en JavaScript
cours n° 1

2 JavaScript est considéré comme le « core skill for web development »
Principes de la programmation procédurale avec JavaScript cours n° 1

3 1. Introduction à la programmation procédurale en JavaScript
Objectifs : JavaScript versus JAVA Programme interprété versus programme compilé Pourquoi JavaScript ? L’usage de JavaScript Ce qui concerne JavaScript cours n° 1

4 Qu'est-ce que le JavaScript ?
(c'est juste une info): Le JavaScript est soumit au standard ECMA-262 (European Computer Manufactures Associations) et le standard ISO : ISO Le JavaScript est une extension du langage HTML qui est incluse dans le code. C’est un langage de programmation qui permet d'apporter des améliorations au langage HTML en permettant d'exécuter des commandes. Le Javascript va dynamiser votre document HTML, le rendre plus interactif: votre document HTML sera moins statique et donc plus attractif. cours n° 1

5 JavaScript versus JAVA
JAVA : langage de programmation compilé et «fortement typé » pour produire des exécutables. Il est développé par Sun Microsystems. JavaScript : langage de programmation interprété et « léger, très peu typé ». Initialement, LiveScript, il est développé par Netscape. Conclusion : 2 langages différents avec des similitudes cours n° 1

6 Programme interprété versus programme compilé
Langage simple à écrire et à programmer En général, il est lent à son exécution À chaque appel, il se lance/ s’exécute ligne par ligne Dépend du browser/ Navigateur (et version) Programme compilé : Langage avec une syntaxe plus complexe (riche) Nécessite une pratique programmative (expert) Production d’un exécutable (source binaire) Dépend de la Machine (concept de Virtual Machine) cours n° 1

7 Pourquoi JavaScript ? JavaScript est un langage de scripts qui est supporté par les navigateurs (populaires) Netscape supporte JavaScript Internet Explorer supporte JavaScript, JScript et VBScript JavaScript est considéré comme le « core skill for web development » JavaScript est facile à apprendre !! cours n° 1

8 L’usage de JavaScript Conception professionnelle de pages Web
Un premier contact par la programmation (développeurs, webmasters, concepteurs Web & Programmation procédurale) Complément indispensable du HTML JavaScript présente une approche dynamique en deux formats (client, serveur) cours n° 1

9 Ce qui concerne JavaScript
côté client côté serveur Fonctionnalités de base Objectif du cours Acceptions de la Prog. procédurale JavaScript côté client : utilisé pour les pages HTML et affiché par les navigateurs. JavaScript côté serveur : permet à des serveurs Web d’accéder à des systèmes de fichiers, de communiquer avec d’autres applications, d’accéder à des bases de données. - Il n’existe aucune norme de langage JavaScript côté serveur, seulement ECMAScript. L’ECMA (European Computer Manufacturers Association) a créé une version internationale et normalisée de JavaScript. cours n° 1

10 2. Syntaxe de JavaScript Objectifs :
Emplacement de JavaScript en page HTML Sensibilité au contexte (ie. case-sensitivity) Point-virgules (ie. semicolons) Espaces (ie. whitespaces) Guillemets simple ou double (ie. brackets) Commentaires (ie. comments) Noms des variables et fonctions (ie. variables,functions) Mots réservés (ie. reserved words) cours n° 1

11 Emplacement de JavaScript en page HTML
Un script interne au document HTML : votre script JavaScript entre les balises, comme ci-dessous : <SCRIPT language="JavaScript" > // Votre script ; < /SCRIPT> Un script externe au document HTML : <SCRIPT language="JavaScript" src="MonDocument.js"> // Votre script ; </SCRIPT> Où MonDocument.js est un fichier externe (SRC="url/fichier.js") La balise <SCRIPT>peut être introduite n'importe où dans votre page HTML cours n° 1

12 Le code Javascript peut être inséré où vous le désirez dans votre page Web, vous devez toutefois veiller à ce que le navigateur est entièrement chargé votre script avant d'exécuter une instruction. En effet, lorsque le navigateur charge votre page Web, il la traite de haut en bas, de plus vos visiteurs (souvent impatients) peuvent très bien interrompre le chargement d'une page, auquel cas si l'appel d'une fonction se situe avant la fonction dans votre page il est probable que cela génèrera une erreur si cette fonction n'a pas été chargée. Ainsi, on place généralement le maximum d'éléments du script dans la balise d'en-tête (ce sont les éléments située entre les balises <HEAD> et </HEAD>). Les évènements Javascript seront quant à eux placés dans le corps de la page (entre les balises <BODY> et </BODY>) comme attribut d'une commande HTML... cours n° 1

13 Exemple 1 <HTML> <HEAD> <TITLE> Voici une page contenant du Javascript</TITLE> <SCRIPT language="JavaScript"> alert(" mon programme écrit en JavaScript ! "); </SCRIPT> </HEAD> <BODY> </BODY> </HTML> Reproduire l’exemple pour voir le résultat d'un tel script lors du chargement de la page ci-dessus. cours n° 1

14 Exemple 2 détecter la version JavaScript du navigateur
<SCRIPT language="JAVASCRIPT1.1" > //var ver=1.1; < /SCRIPT> <SCRIPT language="JAVASCRIPT1.2" > //var ver=1.2; < /SCRIPT> <SCRIPT language="JAVASCRIPT1.3" > //var ver=1.3; < /SCRIPT> La valeur de ver détermine le version du javascript du navigateur: alert("la version du navigateur " + ver); cours n° 1

15 Programmation procédurale
Les bons réflexes… Programmation procédurale cours n° 1

16 A. Sensibilité au contexte
Distinction des lettres en majuscule ou minuscule Exemple : Les mots vecteur, Vecteur, VECTEUR … ne sont pas identiques cours n° 1

17 B. Point-virgules La fin d’une instruction dans un script est marquée par le « ; » Exemple : var X= 0 ; var Y="je suis Y" ; alert("Voici un message alerte JavaScript ! ") ; cours n° 1

18 C. Espaces JavaScript ignore l’espace, la tabulation et nouvelle ligne dans les lignes de commande (ie. instruction) L’espace est indispensable entre les mots réservés, les noms des variables ou fonctions, les opérateurs… Exemple : var X=0; est identique à : var X = 0 ; var Y=0; est identique à : var Y = ; cours n° 1

19 D. Guillemets : simple ou double
Une chaîne de caractère est, comme son nom l'indique, une suite de caractères. On la représente par la suite de caractères encadrée par des guillemets simples (') ou doubles ("), Les deux types de guillemets ne peuvent être mélangés pour une même chaîne de caractères (par paire). Exemple : var Titre = "Qu'y a-t\'il dans \"c:\\windows\\\""; représente : Qu'y a-t'il dans "c:\windows\" ou var Titre = 'Qu\'y a-t\'il dans \"c:\\windows\\\"'; cours n° 1

20 E. Commentaires Effet de mémorisation sur le fonctionnement d’un script, instruction, commande, … Exemple : // ceci est un commentaire /* ceci est un nouveau commentaire qui ne s’arrête pas en une ligne */ cours n° 1

21 F. Noms : variables et fonctions
Première lettre du nom : un caractère de (A..Z) ou (a..z) ou ( _ ) On peut utiliser les chiffres (0..9) après le 1er caractère Le nom ne doit pas contenir d’espace ( ) Le nom n’est pas un mot réservé JavaScript Exemple : Addition_2_nombres Addition2nombres cours n° 1

22 G. Mots réservés Dans le JavaScript, vous avez la possibilité de nommer: variable, fonction,… Le nom déclaré doit être différent des mots réservés. cours n° 1

23 3. Bases de la programmation procédurale : JavaScript
Objectifs : Déclaration de variables Usage des opérateurs Création de structures de contrôle Fonctions : construction vs. exécution d’un programme Usage des objets JavaScript (concept, évènement) cours n° 1

24 Déclaration de variables
Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront être modifiées lors de l'exécution du programme. la déclaration des variables peut se faire de deux façons: soit de façon explicite, en faisant précéder la variable du mot clé var qui permet d'indiquer de façon rigoureuse qu'il s'agit d'une variable: var chaine= "bonjour"; soit de façon implicite, en écrivant directement le nom de la variable suivie du caractère = et de la valeur à affecter: chaine= "bonjour"; Le navigateur détermine seul qu'il s'agit d'une déclaration de variable. cours n° 1

25 Portée (visibilité) des variables
De façon explicite, une variable en JavaScript, en précédant sa déclaration avec le mot « var », que sa portée dépendra de l'endroit où elle a été déclarée : Une variable déclarée au début du script, c'est-à-dire avant toute fonction, sera « globale » et on pourra alors l’utiliser à partir de n'importe quel endroit dans le script Une variable déclarée par le mot clé var, dans une fonction ou un segment limité, aura une portée limitée à cette seule fonction ou segment, c'est-à-dire qu'elle est inutilisable ailleurs, et on parle alors de variable « locale ». cours n° 1

26 Types de données des nombres: entiers (int) ou à virgules (float)
En fait le JavaScript n'autorise la manipulation que de 4 types de données : des nombres: entiers (int) ou à virgules (float) Base décimale: suite de chiffre unitaires (de 0 à 9) ne devant pas commencer par le chiffre 0 Base hexadécimale: suite d'unités (de 0 à 9 ou de A à F (ou a à f)) devant commencer par 0x ou 0X Base octale: suite d'unités (incluant uniquement des chiffres de 0 à 7) devant commencer par 0 un décimal: 895 un nombre comportant un point (et non une virgule): une fraction: 27/11 un nombre exponentiel, éventuellement à virgule, suivi de la lettre e (ou E), puis d'un entier correspondant à la puissance de 10 (signé ou non, c'est-à-dire précédé d'un + ou d'un -) 2.75e-2 / 35.8E+10 / 25e-2 L'objet Math est, comme vous l'imaginez, un objet qui a de nombreuses méthodes et propriétés permettant de manipuler des nombres et qui contient des fonctions mathématiques courantes cours n° 1

27 des chaînes de caractères (string): une suite de caractères
Il existe des caractères spéciaux à utiliser dans les chaînes pour simuler d'une part des caractères non visuels ou pour éviter au navigateur de confondre les caractères d'une chaîne avec ceux du script, ces caractères sont précédés d'un antislash (\): \b : touche de suppression \f : formulaire plein \n : retour à la ligne \r : appui sur la touche ENTREE \t : tabulation \" : guillemets doubles \' : guillemets simples \\ : caractère antislash L'objet String est un objet qui contient un certain nombre de propriétés et de méthodes permettant la manipulation de chaînes de caractères. cours n° 1

28 des booléens: des variables à deux états permettant de vérifier une condition
true: si le résultat est vrai false: lors d'un résultat faux des variables de type « null » : un mot caractéristique pour indiquer qu'il n'y a pas de données cours n° 1

29 Usage des opérateurs 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 d'incrémentation les opérateurs de comparaison les opérateurs logiques (les opérateurs bit-à-bit) (les opérateurs de rotation de bits) cours n° 1

30 Les opérateurs de calcul
Les opérateurs de calcul permettent de modifier mathématiquement la valeur d'une variable cours n° 1

31 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. cours n° 1

32 Les opérateurs d'incrémentation
Ce type d'opérateur permet de facilement augmenter ou diminuer d'une unité une variable. Un opérateur de type x++ permet de remplacer des notations lourdes telles que x=x+1 ou bien x+=1 cours n° 1

33 Les opérateurs de comparaison
cours n° 1

34 Les opérateurs logiques (booléens)
Ce type d'opérateur permet de vérifier si plusieurs conditions sont vraies: cours n° 1

35 Création de structures de contrôle
… prochain cours Création de structures de contrôle Fonctions (construction versus exécution d’un programme) cours n° 1