JavaScript est un langage de programmation de scripts principalement utilisé dans L'élément HTML script permet d'intégrer du code Javascript dans une page continue permet de terminer l'itération en cours de la boucle courante Exercice Écrire le corps de la fonction compare ci-dessus qui retourne -1 lorsque
| Previous PDF | Next PDF |
[PDF] Exercices JavaScript - Cours EThirion - Free
7 déc 2015 · Les corrigés peuvent être exécutés à distance à partir du site contenant ce cours (cliquez sur Test dans la partie Exercices du menu) Par contre,
[PDF] TP Javascript - Free
Que se passe-t-il si on place le code javascript après le texte écrit en HTML ? Exercice n°1 2 : code javascript externe au document Question 5 Reprendre l'
[PDF] Technologies de Script - UVT e-doc - Université Virtuelle de Tunis
Exercices Solution des exercices Qu'est-ce que c'est ? HTML (HyperText Markup ce qui signifie que, pour utiliser JavaScript, il faut que le serveur comme le 10 passages au cours desquels, on tire au sort un nombre entier compris entre 0 et 9 La déclaration et l'initiation d'un tableau peuvent également se faire par
[PDF] FICHE 1 Les bases du JavaScript - prof doc
est commun au langage du même nom, le JavaScript est radicalement différent Exercice Demandez les prénoms aux utilisateurs et stockez-les dans un tableau Pensez à la overlay innerHTML = 'Chargement en cours ';
[PDF] Initiation à Javascript
du HTML Une initiation progressive à JavaScript au moyen de cours et d' exercices corrigés Conçu pour les étudiants en 1ère année de cursus d' informatique
[PDF] Cours et exercices corrigés - fnac-staticcom
HTML5 et CSS3 Cours et exercices corrigés Les liens déclenchant un script JavaScript 135 Exercices PDF, présentations de style diaporama ) initiation à l'incorporation de dessins vectoriels
[PDF] Découvrez le langage JavaScript - fnac-staticcom
Vous profiterez des cours disponibles partout, tout le temps : sur le Web, en PDF, en eBook, en vidéo Découvrez le langa ge Apprendre JavaScript n'est pas simple Bien qu'inspiré de grands langages Des exercices interactifs sont proposés à la fin de certains chapitres Les compléments web Le corrigé complet
[PDF] Dynamisez vos sites web avec Javascript - SupMTI
12 août 2011 · Initiation à la concaténation et à la conversion des types Exercice récapitulatif Le corrigé au grand complet : HTML, CSS et Javascript Vous voici sur la page d'accueil du cours traitant du langage web Javascript
[PDF] HTML et Javascript - Archive ouverte HAL
19 mai 2014 · Publié à l'origine sous le titre « Programmation HTML et JavaScript », Maker, Adobe, PostScript, Acrobat, PDF, Illustrator, Photoshop, Director, Sun, Java, est suffisante pour apprendre le langage HTML de base Nous verrons, au cours de l'étude des différentes balises HTML, que certaines peuvent
[PDF] Programmation Web avec JavaScript - CRIL (Lens) - Université d
JavaScript est un langage de programmation de scripts principalement utilisé dans L'élément HTML script permet d'intégrer du code Javascript dans une page continue permet de terminer l'itération en cours de la boucle courante Exercice Écrire le corps de la fonction compare ci-dessus qui retourne -1 lorsque
[PDF] initiation ? l archéologie
[PDF] initiation ? l'agronomie
[PDF] initiation ? l'informatique pour débutant pdf
[PDF] initiation ? la comptabilité générale ohada pdf
[PDF] initiation ? la comptabilité générale pdf
[PDF] initiation ? la logique comptable
[PDF] initiation ? la logique formelle exercices et corrigés pdf
[PDF] initiation ? la philosophie
[PDF] initiation ? la traduction pdf
[PDF] initiation algorithmique seconde
[PDF] initiation au dessin technique pdf
[PDF] initiation au génie civil
[PDF] initiation au marketing pdf
[PDF] initiation biologie sous marine
Programmation Web avec JavaScript
Christophe Lecoutre
lecoutre@cril.frIUT de Lens - CRIL CNRS UMR 8188
Universite d'Artois
France
Departement SRC - 2010/2011
1Outline
1Introduction
2Bases du langage
3Structures de contr^ole
4Types/Classes
5Navigateur
6DOM 7Evenements2
Outline
1Introduction
2Bases du langage
3Structures de contr^ole
4Types/Classes
5Navigateur
6DOM 7Evenements3
Bibliographie
LivresNicholas Zakas
Professional JavaScript for Web developpers
2nd Edition, Wrox, 2009.Sites
Tout JavaScript surhttp://www.toutjavascript.com/main/index.php3Javascriptfrhttp://www.javascriptfr.comw3school-Javascript surhttp://www.w3schools.com/js/default.asp
4Description Generale
JavaScript est un langage de programmation de scripts principalement utilise dans les pages web interactives (comme par exemple, la validation de donnees d'un formulaire).Il est forme de trois composants:ECMAScript, qui est deni dans l'edition ECMA-262, et qui fournit les
fonctionnalites centralesDOM (Document Object Model) qui fournit les fonctionnalites pour interagiravec le contenu d'une page webBOM (Browser Object Model) qui forunit les fonctionnalites pour interagir
avec le navigateurRemarque Il y a de grandes disparites de support des trois composants de Javascript par les navigateurs principaux (Firefox, IE, Chrome, Safari, Opera). 5Javascript dans HTML
L'element HTMLscriptpermet d'integrer du code Javascript dans une page.Les attributs de cet element sont :type: indique le type de contenu (appele aussi type MIME). La valeur est
typiquement"text/javascript".charset(optionnel) : indique le jeu de caracteres utilise.defer(optionnel) : indique si l'execution du script doit ^etre decalee.src(optionnel) : indique que le code se situe dans un chier externe.Warning
M^eme en utilisantdefer="defer", certains navigateurs ne retarderont pas l'execution du code. 6Inline Code
Il sut d'utiliser uniquement l'attributtypeet de placer le code au coeur de l'elementscript.Exemple Warning Un erreur se produit siappara^t dans le code. "); 7External Files
Il sut d'utiliser uniquement l'attributtypeavec l'attributsrc.ExempleInline code et symboles speciaux
Le code suivant n'est pas correct en XHTML :
Premiere solution:replacer Deuxieme solution:
9 Inline code ou External Files ?
Il est preferable d'utiliser des chiers externes pour des raisons de :maintenabilite : le code javascript peut ^etre rassemble dans un unique
repertoirecaching : un chier js partage par deux pages ne sera telecharge qu'une seule foislisibilite : pas besoin d'astuces telles que // ... [CDATA qui polluent la page Remarque
L'elementnoscriptpermet d'acher un contenu lorsque le navigateur ne supporte pas les scripts ou que le support a ete desactive. Par exemple : 10 Outline
1Introduction
2Bases du langage
3Structures de contr^ole
4Types/Classes
5Navigateur
6DOM 7 Evenements11
Identicateurs et commentaires
Les identicateurssont sensibles a la casse:testn'est pasTestsont formes par convention en utilisant le style camel case comme dans
sommeNotesExemple Les commentaires
// single line comment * multi-line * comment 12 Identicateurs et commentaires
Les instructionsse terminent par un point-virgule
necessitent des accolades lorsqu'elles forment un bloc Exemple
var sum = a + b; if (sum > 0) alert("positif"); if (a < b) { var tmp = a; a = b; b = tmp; 13 Variables
Declarer une variable necessite l'utilisation du mot-clevar.Exemple var sum; var v = 100; v = "coucou"; // autorise mais deconseille var x = 10, y = 20, z = false; // multiple declarationPortee locale function test() { var message = "hi"; test(); alert(message); // undefinedPortee globale function test() { message = "hi"; test(); alert(message); // "hi" 14 Types Il y a principalement trois types classiques de donnees Boolean, Number and String et un type complexe Object (liste de couples nom-valeurs). Il est possible de determiner le type (courant) d'une variable avec l'operateurtypeofqui retourne l'une des valeurs suivantes:undened si la valeur est indenie (variable declaree mais pas initialisee ou
variable non declaree)boolean number string object si la valeur est un objet ou null function si la valeur est une fonction Remarque
Les fonctions sont considerees comme des objets qui ont des proprietes speciales. 15 Valeurs undened et null
La valeur undened fait reference a une variable non declaree ou declaree mais pas initialisee, null fait reference a une variable censee referencer un objet mais non encore disponible.Exemple var message = "coucou"; alert (typeof message); // "string" var m1; alert(m1); // "undefined" alert(m2); // erreur alert(typeof m1); // "undefined" alert(typeof m2); // undefined var car = null; alert(typeof car); // "object" 16 Boolean et Number
Le type Boolean a deux valeurs true et false. Le type Number sert a representer des valeurs entieres et des valeurs ottantes (reelles).Exemple var x = 55; var y = 070; //octal pour 56 (en base 10) var z = 0xA, //hexadecimal pour 10 var f1 = 10.2; var f2 = 3.12e7; // represente 31 200 000 var f3 = 3e-10; // represente 0,0000000003Remarque Les valeurs particulieres du type Number sont :
Number.MINVALUE, Number.MAXVALUE
Number.NEGATIVEINFINITY, Number.POSITIVEINFINITY
NaN (Not a Number)
17 Conversions numeriques
Relatifs aux valeurs et conversions des nombres, on trouve 4 fonctions :isNaNdetermine si un parametre donne n'est pas un nombreNumbereectue une conversionparseInteectue une conversion en valeur entiereparseFloateectue une conversion en valeur reelleExemple
alert(isNaN(10)); // false alert(isNaN("10")); // false - peut ^etre convertie alert(isNaN("blue")); // true - ne peut ^etre convertie var num1 = Number("hello world"); // NaN var num2 = Number("00001"); // 1 var num3 = Number(true); // 1 var num3 = parseInt(""); // NaN var num4 = parseInt(22.5); // 22 var num5 = parseInt("70",10); // 70 - la base 10 est specifiee var num6 = parseFloat("22.5"); // 22.5 18 String
On utilise les quotes simples (apostrophes) ou doubles (guillemets) pour denir des valeurs cha^nes de caracteres. L'attributlengthpermet de determiner la longueur d'une cha^ne.Exemple var nom = "Wilde"; var prenom = 'Oscar'; alert(prenom.length); // 6 var message = "toto a dit \"je suis malade\".";Il est possible de transtyper une valeur en cha^ne avecString().Exemple
var v1 = 10; alert(String(v1)); // "10" var v2 = true; alert(String(v2)); // "true" var v3 = null; alert(String(v3)); // "null" var v4; alert(String(v4)); // "undefined" 19 String
Il existe de nombreuses fonctions sur les cha^nes de caracteres.Exemple var s = "hello world"; alert(s.length); // 11 alert(s.charAt(1)); // "e" alert(s.charCodeAt(1)); // 101 alert(s.slice(3)); // "lo world" alert(s.slice(-3)); // "rld" alert(s.substring(3,7)); // "lo w" alert(s.indexOf("o")); // 4 alert(s.lastIndexOf("o")); // 7 alert(s.toUpperCase()); // HELLO WORLD alert(s + " !"); // hellow world ! 20 Math Il s'agit d'un objet denissant de nombreuses constantes et fonctions mathematiques.Exemple alert(Math.E); // la valeur de e alert(Math.PI); // la valeur de pi alert(Math.min(5,12)); // 5 alert(Math.max(23,5,7,130,12)); // 130 alert(Math.ceil(25.3)); // 26 alert(Math.floor(25.8)); //25 alert(Math.random()); // valeur aleatoire entre 0 et 1 var n = Math.floor(Math.random()*nb + min); alert(n); // valeur aleatoire entre min et min+nb (exclus)D'autres fonctions : Math.abs(x) Math.exp(x) Math.log(x)
Math.pow(x,y) Math.sqrt(x)
Math.sin(x) Math.cos(x) Math.tan(x)
21
Operateurs
Typiquement, ceux de C, C++ et java:incrementation/decrementation (++,)arithmetiques (+,,,=,%)relationnels (>,<,>=,<=,==,! =) et (===,! ==)logique (!,&&,jj)aectation (=,+=,=,*=,/=,%=)bit a bit (&,j,<<,>>, ...)Exemple
var age = 10; age++; alert(age); // 11 alert(age > 10 && age < 20); // true alert(26 % 5); // 1 age*=2; alert(age); // 22 22
Outline
1Introduction
2Bases du langage
3Structures de contr^ole
4Types/Classes
5Navigateur
6DOM 7 Evenements23
quotesdbs_dbs18.pdfusesText_24
Deuxieme solution:
9Inline code ou External Files ?
Il est preferable d'utiliser des chiers externes pour des raisons de :maintenabilite : le code javascript peut ^etre rassemble dans un unique
repertoirecaching : un chier js partage par deux pages ne sera telecharge qu'une seule foislisibilite : pas besoin d'astuces telles que // ... [CDATA qui polluent la pageRemarque
L'elementnoscriptpermet d'acher un contenu lorsque le navigateur ne supporte pas les scripts ou que le support a ete desactive. Par exemple : 10Outline
1Introduction
2Bases du langage
3Structures de contr^ole
4Types/Classes
5Navigateur
6DOM 7Evenements11
Identicateurs et commentaires
Les identicateurssont sensibles a la casse:testn'est pasTestsont formes par convention en utilisant le style camel case comme dans
sommeNotesExempleLes commentaires
// single line comment * multi-line * comment 12Identicateurs et commentaires
Les instructionsse terminent par un point-virgule
necessitent des accolades lorsqu'elles forment un blocExemple
var sum = a + b; if (sum > 0) alert("positif"); if (a < b) { var tmp = a; a = b; b = tmp; 13Variables
Declarer une variable necessite l'utilisation du mot-clevar.Exemple var sum; var v = 100; v = "coucou"; // autorise mais deconseille var x = 10, y = 20, z = false; // multiple declarationPortee locale function test() { var message = "hi"; test(); alert(message); // undefinedPortee globale function test() { message = "hi"; test(); alert(message); // "hi" 14 Types Il y a principalement trois types classiques de donnees Boolean, Number and String et un type complexe Object (liste de couples nom-valeurs). Il est possible de determiner le type (courant) d'une variable avec l'operateurtypeofquiretourne l'une des valeurs suivantes:undened si la valeur est indenie (variable declaree mais pas initialisee ou
variable non declaree)boolean number string object si la valeur est un objet ou null function si la valeur est une fonctionRemarque
Les fonctions sont considerees comme des objets qui ont des proprietes speciales. 15Valeurs undened et null
La valeur undened fait reference a une variable non declaree ou declaree mais pas initialisee, null fait reference a une variable censee referencer un objet mais non encore disponible.Exemple var message = "coucou"; alert (typeof message); // "string" var m1; alert(m1); // "undefined" alert(m2); // erreur alert(typeof m1); // "undefined" alert(typeof m2); // undefined var car = null; alert(typeof car); // "object" 16Boolean et Number
Le type Boolean a deux valeurs true et false. Le type Number sert a representer des valeurs entieres et des valeurs ottantes (reelles).Exemple var x = 55; var y = 070; //octal pour 56 (en base 10) var z = 0xA, //hexadecimal pour 10 var f1 = 10.2; var f2 = 3.12e7; // represente 31 200 000 var f3 = 3e-10; // represente 0,0000000003RemarqueLes valeurs particulieres du type Number sont :
Number.MINVALUE, Number.MAXVALUE
Number.NEGATIVEINFINITY, Number.POSITIVEINFINITY
NaN (Not a Number)
17Conversions numeriques
Relatifs aux valeurs et conversions des nombres, on trouve 4 fonctions :isNaNdetermine si un parametre donne n'est pas un nombreNumbereectue une conversionparseInteectue une conversion en valeur entiereparseFloateectue une conversion en valeur reelleExemple
alert(isNaN(10)); // false alert(isNaN("10")); // false - peut ^etre convertie alert(isNaN("blue")); // true - ne peut ^etre convertie var num1 = Number("hello world"); // NaN var num2 = Number("00001"); // 1 var num3 = Number(true); // 1 var num3 = parseInt(""); // NaN var num4 = parseInt(22.5); // 22 var num5 = parseInt("70",10); // 70 - la base 10 est specifiee var num6 = parseFloat("22.5"); // 22.5 18String
On utilise les quotes simples (apostrophes) ou doubles (guillemets) pour denir des valeurs cha^nes de caracteres. L'attributlengthpermet de determiner la longueur d'une cha^ne.Exemple var nom = "Wilde"; var prenom = 'Oscar'; alert(prenom.length); // 6var message = "toto a dit \"je suis malade\".";Il est possible de transtyper une valeur en cha^ne avecString().Exemple
var v1 = 10; alert(String(v1)); // "10" var v2 = true; alert(String(v2)); // "true" var v3 = null; alert(String(v3)); // "null" var v4; alert(String(v4)); // "undefined" 19String
Il existe de nombreuses fonctions sur les cha^nes de caracteres.Exemple var s = "hello world"; alert(s.length); // 11 alert(s.charAt(1)); // "e" alert(s.charCodeAt(1)); // 101 alert(s.slice(3)); // "lo world" alert(s.slice(-3)); // "rld" alert(s.substring(3,7)); // "lo w" alert(s.indexOf("o")); // 4 alert(s.lastIndexOf("o")); // 7 alert(s.toUpperCase()); // HELLO WORLD alert(s + " !"); // hellow world ! 20 Math Il s'agit d'un objet denissant de nombreuses constantes et fonctions mathematiques.Exemple alert(Math.E); // la valeur de e alert(Math.PI); // la valeur de pi alert(Math.min(5,12)); // 5 alert(Math.max(23,5,7,130,12)); // 130 alert(Math.ceil(25.3)); // 26 alert(Math.floor(25.8)); //25 alert(Math.random()); // valeur aleatoire entre 0 et 1 var n = Math.floor(Math.random()*nb + min); alert(n); // valeur aleatoire entre min et min+nb (exclus)D'autres fonctions :Math.abs(x) Math.exp(x) Math.log(x)
Math.pow(x,y) Math.sqrt(x)
Math.sin(x) Math.cos(x) Math.tan(x)
21Operateurs
Typiquement, ceux de C, C++ et java:incrementation/decrementation (++,)arithmetiques (+,,,=,%)relationnels (>,<,>=,<=,==,! =) et (===,! ==)logique (!,&&,jj)aectation (=,+=,=,*=,/=,%=)bit a bit (&,j,<<,>>, ...)Exemple
var age = 10; age++; alert(age); // 11 alert(age > 10 && age < 20); // true alert(26 % 5); // 1 age*=2; alert(age); // 22 22