JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives côté client C'est un langage orienté objet inspiré
| Previous PDF | Next PDF |
[PDF] FICHE 1 Les bases du JavaScript - prof doc
est commun au langage du même nom, le JavaScript est radicalement différent La version ES5 date innerHTML = 'Chargement en cours ';
[PDF] Javascript : les bases du langage
Javascript Javascript : les bases du langage Technologies du Web 1 Jean- Christophe Routier Licence 1 SESI Université Lille 1 Université Lille 1 - Licence 1
[PDF] Support de cours Javascript 1 Introduction 2 Les éléments du
JavaScript est un langage de programmation qui peut être inclus dans des pages HTML destinées aux navigateurs WWW les plus courants Grâce à ce langage
[PDF] Javascript - IGM
au navigateur qu'il s'agit d'un script écrit en langage JavaScript Interprêté du côté Java est compilé (applets), Javascript est interprêté (scripts) ne peut pas
[PDF] Programmation Web avec JavaScript - CRIL (Lens) - Université d
JavaScript est un langage de programmation de scripts principalement utilisé dans continue permet de terminer l'itération en cours de la boucle courante
[PDF] JavaScript Cours dinitiation
Ce langage a été développé par la société Netscape Corporation en 1996 Les programmes (scripts) écrits en Javascript s'intègrent dans le code HTML d'une
[PDF] Cours Web - Javascript - Thierry VAIRA Homepage - Free
JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives côté client C'est un langage orienté objet inspiré
[PDF] Introduction au langage JavaScript - Cours dinformatique
Le JavaScript est un langage de script incorporé au langage HTML Il est crée par Netscape en 1995 Un Script est une portion de code inséré dans une page
[PDF] Programmation Web en JavaScript - Rémy Malgouyres
Cours de programmation WEB côté client en JavaScript : Notre application côté client est en JavaScript (qui s'est imposé comme un langage stan- dard côté
[PDF] Introduction a JavaScript
script Cette norme est un sous-ensemble du langage JavaScript con cu par Netscape, Ne pas confondre peut varier au cours de l'ex ecution du programme
[PDF] langage mathématique de base
[PDF] langage naturel maths
[PDF] langage pascal exercices corrigés pdf
[PDF] langage pascal informatique
[PDF] langage pascal pour debutant
[PDF] langage pascal pour debutant pdf
[PDF] langage pascal site du zero
[PDF] langage poétique définition
[PDF] langage programmation facebook
[PDF] langage python en seconde
[PDF] Langage soutenu - URGENT
[PDF] langage soutenu dictionnaire
[PDF] langage soutenu mots
[PDF] language de la continuité- limite
Cours Web - Javascript
Thierry Vaira
BTS IRIS Avignon
tvaira@free.fr?v0.1Objectifs
Se familiariser avec le langage Javascript et acquérir une pratique minimale.Être capable d"intégrer des scripts clients dans un site ou une page enrespectant les bonnes pratiques.Acquérir les capacités d"auto-formation nécessaires pour suivre les
évolutions à venir.
tv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 2 / 21Définition
JavaScript est unlangage de programmation de scriptsprincipalement utilisé dans les pages web interactives côté client.C"est unlangage orienté objetinspiré de nombreux langages dont
Java mais il reste très différent de celui-ci.Le langage est maintenant une implémentation de la norme
ECMA-262 (standard ECMAScript).Le langage a été créé en 1995 par Brendan Eich, membre de la fondation
Mozilla, pour le compte deNetscape Communications Corporation.tv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 3 / 21
Créer des scripts
Les scripts Javascript :
sont de simplesfichiers "texte"(extension conseillée.js) à créeravec unéditeur de texte.sontintégrés au sein des pages web.sont exécutéscôté client par le navigateur web.Remarque : les scripts en Javascript sont "débogables" avec l"extensionFirebug
pourMozilla Firefoxou tout simplement avec la "Console d"erreurs" de ce navigateur. tv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 4 / 21Utilisation
Généralement, JavaScript sert :
à contrôler les données saisies dans des formulaires HTML à interagir avec le document HTML via l"interface DOM (Document Object Model) fournie par le navigateur (on parle alors parfois de HTML dynamique ou DHTML)à modifier le contenu des pages web par programmation avec laméthode Ajax (Asynchronous Javascript And XML)Remarque : javascript est aussi utilisé pour réaliser des services dynamiques,
parfois futiles, strictement cosmétiques ou à des fins ergonomiques. tv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 5 / 21 Exemple 1 : insertion de code javascript dans une page web Le code javascript est généralement inséré entre les baliseset .Javascript
alert ("Hello world !");//affiche une boîte de dialogue modale tv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 6 / 21Exemple 2 : écrire dans une page web
L"élémentNOSCRIPTpermet de fournir un contenu de remplacement pour les navigateurs qui ne peuvent exécuter un script.Votre navigateur accepte le Javascript.
"); tv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 7 / 21 Exemple 3 : intégrer un script Javascript dans une page Le programmeur préfèrera souvent rassembler son code javascript dans des fichiers de scripts qu"il intègrera alors dans les pages web de son site de la manière suivante :Classe et Objet
Uneclasseest un type qui est ladescription d"un ensemblede :propriétés(les données) et deméthodes(les fonctions).
Unobjetest uneinstance de classe(c"est à dire une variable de typeclasse). On écrira :o.ppour accéder à une propriétépd"un objetoo.m()pour appeler une méthodemd"un objetotv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 9 / 21
DOM (I)
Lorsqu"un document HTML est chargé dans un navigateur, celui-ci fournit une interfaceDOM(Document Object Model) pour accéder aux objets le composant :Ces objets sont classés de manière hiérarchique (notion d"arbre). L"objet le plus haut dans la hiérarchie est l"objet de la classewindow (fenêtre).Dans cette fenêtre, il y a un document HTML : c"est l"objet document. Donc, L"objetwindowcontient l"objetdocument.et ainsi de suite ... tv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 10 / 21DOM (II)
Dans ce document HTML, on pourrait donc accéder aux objets de la manière suivante ://Accès à une propriété de l "objetbutton window document .form.button.value = "Déterminer";Accès
une méthode de l objet button window document .form.button.focus();Accès
une méthode de l objet window window alert ("Hello world");Remarque : l"objet window est souvent facultatif. On ne doit pas forcément préciser son nom pour utiliser ses méthodes ou ses propriétés. tv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 11 / 21DOM (III)
On recommande d"utiliser la méthodegetElementById()pour accéderaux objets par leur identifiant (attributIDde l"élément HTML) :var bouton =document .getElementById("id_button");
bouton.click();//pour simuler un clic de souris sur ce bouton tv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 12 / 21
Programmation événementielle
Les IHM (Interface Homme-Machine) sont généralement basées sur laprogrammation événementiellequi permet la gestion d"événements.Un événement est généralement associé à une action de l"utilisateur :
appui sur une touche, clic ou déplacement de la souris, ...En HTML, il y a très peu d"événements qui sont gérés par défaut :
clic sur un lien ou sur un bouton de formulaire. Le javascript va permettre de gérer et contrôler ces événements (EVENT)par des gestionnaires d"événements (EVENT HANDLER).tv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 13 / 21
Les événements
Quelques événements classiques gérés en Javascript :L"utilisateur clique sur un bouton, un lien ou tout autre élément :ClickLa page est chargée par le navigateur :LoadL"utilisateur quitte la page :UnloadL"utilisateur place le pointeur de la souris sur un élément :MouseOverLe pointeur de la souris quitte un lien ou tout autre élément :MouseOutUn élément de formulaire a le focus (devient la zone d"entrée active) :FocusUn élément de formulaire perd le focus :BlurLa valeur d"un champ de formulaire est modifiée :ChangeL"utilisateur sélectionne un champ dans un élément de formulaire :SelectL"utilisateur clique sur le bouton submit pour envoyer un formulaire :SubmitL"utilisateur appuie sur une touche :Keydown
Autres événements :Abort, Error, Move, Resize, KeyPress, KeyUp, DblClick, MouseDown, MouseUp, MouseMove, Reset, ... tv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 14 / 21Gestionnaire d"événements (I)
Pour gérer un évènement en JavaScript, il faut installer ungestionnaire d"événement:Un gestionnaire d"événement sera l"action déclenchéeautomatiquement lorsque l"évènement associé se produit.La syntaxe courante est la suivante :onEvenement=fonction()où
Evenementest le nom de l"évènement géré.tv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 15 / 21
Gestionnaire d"événements (II)
Exemple : gestion de l"évènementclickd"un boutontv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 16 / 21Les variables
Pas de déclaration préalable des types des variables : déclaration donc Local uniquement dans le script ou la fonction var vloc = 0; pas déclarée doncGlobal
en tout point du document vglob = 0; nbr1 = 10;//un nombre entier var nbr2 = 3.141;//un nombre réel str1 = "L"étoile";//une chaîne de caractère var str2 = "brille";//une chaîne de caractère var str3 = str1 + " " + str2 ;//une chaîne de caractère concaténée avec +Remarque
Il existe aussi le type booléen true ou false )Remarque : lorsque l"on fait référence à une variable, celle-ci est d"abord cherchée dans la fonction courante (portée locale). Si elle n"y est pas, elle est cherchée dans le script (portée globale). tv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 17 / 21Les fonction (I)
Le programmeur écrira souvent des fonctions en JavaScript qu"ilrassemblera le plus souvent dans des scripts d"extension.js.Exemple : définition et appel de fonction
Définition
function mafonction(param1, ..., paramN) codeJavaScript
returnvariable_ou_valeur ; Appel var res = mafonction(var1, val2, varN);Remarque
la passage des paramètres est réalisé par valeur tv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 18 / 21Les fonctions (II)
Exemple : utilisation d"une fonction
function isHumanAge(age) { if((age < 0) || (age > 120)) {return false; } else{return true; } var age = window .prompt("Donnez votre age : ", "1"); if(!isHumanAge(age)) { window alert ("Vous ne pouvez pas avoir " + age + " ans !"); tv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 19 / 21Variables et fonctions (I)
var entier = 10; var reel = 3.14; chaine = "salut"; function test() entier = 5; var reel = 1.789; document write ("Dans la fonction test() :"); document write (entier + " is a " + typeof(entier) + "
"); document write (reel + " is a " + typeof(reel) + "
"); document write (chaine + " is a " + typeof(chaine) + "
"); document write ("
"); test(); document write ("Dans le script :
"); document write (entier + " is a " + typeof(entier) + "
"); document write (reel + " is a " + typeof(reel) + "
"); document write (chaine + " is a " + typeof(chaine) + "
"); tv (BTS IRIS Avignon)Cours Web - Javascripttvaira@free.fr?v0.1 20 / 21