Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Semaine 1 : Introduction à JavaScript DIABATE Nabègna, Université Virtuelle de

Semaine 1 : Introduction à JavaScript DIABATE Nabègna, Université Virtuelle de Côte d'Ivoire Cours_UVCI PRW2103-1 1.0 juin 2018 Table des matières I - Objectifs 3 II - Introduction 4 III - Section 1 - Définition et fonctionnement de JavaScript 5 1. 1. Qu'est ce que JavaScript ? ....................................................................................................... 5 2. 2. Comment et où écrire du code JavaScript ? ............................................................................ 6 3. Exercice ......................................................................................................................................... 8 IV - Section 2 - Syntaxe du Langage 9 1. 1. La notion de cadrage ................................................................................................................ 9 2. 2. Les commentaires et les variables en JavaScript ...................................................................... 9 3. 3. Les opérateurs ........................................................................................................................ 11 4. Exercice : Quiz d'entraînement ... ............................................................................................... 13 3 À la fin de cette leçon, vous serez capable de : Expliquer l'utilisation et le fonctionnement de JavaScript; Décrire la structure générale d'un programme et la syntaxe du langage JavaScript. Objectifs 4 Le JavaScript est un langage de programmation crée par Brendan Eich, orienté vers les objets-prototypes. Il est traditionnellement interprété par un navigateur Web au sein d'une page web et permet, entre autres choses, de modifier l'organisation de la page. Le JavaScript est un langage « client », c'est-à-dire exécuté chez l'utilisateur lorsque la page Web est chargée. Il a pour but de dynamiser les sites Internet. Introduction Section 1 - Définition et fonctionnement de JavaScript 5 1. 1. Qu'est ce que JavaScript ? Le JavaScript (JS) est un langage dit "client" qui est exécuté par le navigateur web c'est-à-dire qu'il n'est pas nécessaire de lire ses pages depuis un serveur web comme pour le PHP. Il est désactivable sur la plupart des navigateurs web en modifiant le menu "options". Ce langage permet entre autres de développer l'interactivité d'un site (pop-up, pop-under, contrôle de formulaire, chargement d'images...) à l'aide de scripts et de donner donc un aspect de "vivant" à une page Web. Un script, c'est tout simplement une suite d'instructions qui vont être interprétées par un programme. Ainsi, pour lire du code JavaScript, il va nous falloir un interpréteur. Heureusement, tous les navigateurs (Google Chrome, Safari, etc.) possèdent leur propre interpréteur JavaScript. JavaScript permet de faire beaucoup de choses. Avec le HTML dynamique, nous pouvons manier les balises d'une page web. il aussi est possible même d'échanger des informations avec le serveur sans rechargement de la page grâce à une collaboration avec des langages comme . AJAX Cependant, il faut prendre des précautions dans l'utilisation de JavaScript. Car le code JavaScript peut être vu par les internautes au même titre que votrs code HTML. Il faut donc veuillez à ne pas stocker des informations ou données sensibles comme les mot de passe dans votre code JavaScript. Ce qui fait toute la puissance du JavaScript, c'est qu'on va pouvoir l'utiliser pour manipuler dynamiquement le code HTML d'une page. Faîtes cependant bien attention à ne pas confondre et ! Ces deux langages, bien que JavaScript Java syntaxiquement assez proches à la base, reposent sur des concepts fondamentaux complétement différents et servent à effectuer des tâches totalement différentes. Attention : Les limites de JavaScript Le JavaScript facilite la navigation au sein d'un site Web. Au fil du temps, des améliorations et des fonctionnalités sont apportées avec Ajax, par exemple. Cependant, compte-tenu des différences d'interprétation d'un navigateur à un autre, il est conseillé de tester chaque script sur différents navigateurs voire sous différents systèmes d'exploitation pour assurer une portabilité du code. En Outre, on peut dégager trois "limites" essentielles dans le JavaScript en tant que langage de présentation des données : Le JavaScript ne possèdent pas de fonctionnalité graphique. Le JavaScript ne peut pas lire et encore moins écrire des fichiers sur le disque dur du visiteur (hormis les cookies). Le JavaScript ne s'interface pas avec une base données de type MySQL ou SQL. Section 1 - Définition et fonctionnement de JavaScript I Section 1 - Définition et fonctionnement de JavaScript 6 1. 2. 3. 2. 2. Comment et où écrire du code JavaScript ? Il ne faut pas d'éditeur particulier pour écrire des scripts en JavaScript. On peut insérer du code JavaScript dans une page HTML grâce à un simple éditeur de texte comme nous le faisons déjà bien avec Notepad++. Il existe cependant plusieurs autres outils ou plates-formes proposant l'écriture de code JavaScript. Ce qu'il faut retenir, c'est que l'usage de ces outils vous faciliteront l'écriture de code en vous permettant : De Vérifier la syntaxe du code grâce à la coloration automatique. De disposer de l'auto-complétion. D'avoir un bon outil pour le débogage ; et souvent, De connaître la valeur d'une variable lors de l'exécution du script. Comme pour le CSS, le code JavaScript peut se placer à trois endroits différents : Dans un fichier externe à la page web avec l'extension obligatoire .js. Entre les balises <head> et </head> ou dans la balise <body>de la page web. Directement dans une balise de la page à l'aide des évènements. Dans le premier cas, on doit inclure le fichier (par référence) directement dans notre page web et .js toujours entre les balises <head> et </head> comme ceci : 1 ... 2 3 4 = 5 6 7 ... C'est très souvent la méthode recommandée dans le cas de gros projets car elle permet une meilleure maintenabilité du code grâce à la séparation des langages, et car on va pouvoir réutiliser un même code JavaScript dans plusieurs fichiers HTML. Dans ce cas, nous allons devoir lier nos fichiers HTML et JavaScript en utilisant à nouveau un élément et son attribut . script src En valeur de l'attribut , nous allons indiquer le chemin relatif du fichier par rapport au fichier src .js . Si nos deux fichiers sont dans le même dossier, par exemple, il suffira d'indiquer le nom du .html fichier JavaScript. Dans le deuxième cas, le code doit se tenir entre les balises <script> et </script> comme ceci : 1 ... 2 3 4 5 6 7 8 9 10 = 11 12 13 14 15 16 = 17 18 19 ... <head> = <script src "./dossier_javascript/fichier.js"></script> </head> ... ... <head> <script> // Votre script </script>  = <script language "javascript"> // Votre script </script>  = <script type "text/javascript"> // Votre script </script> Section 1 - Définition et fonctionnement de JavaScript 7 20 21 ... En effet, le premier endroit où l'on peut placer du code JavaScript est dans l'élément head d'un fichier HTML. Dans ce cas, il faudra placer le JavaScript à l'intérieur d'un élément . script On placera généralement l'élément à la fin de notre élément . script head On peut également écrire notre code JavaScript au sein de l'élément d'un fichier HTML. body Dans ce cas là également, nous utiliserons un élément script et préférerons le placer à la fin de notre page. Lorsqu'on écrit du JavaScript dans un fichier HTML, que ce soit dans l'élément , le ou les head body deux, on peut utiliser autant d'éléments que l'on veut. script Cependant, pour des raisons évidentes de performance et de clarté, on essaie souvent de placer tout notre code JavaScript dans un même élément script. Dans le dernier cas, nous verrons cela plus tard dans le cours mais voici un exemple très simple que vous avez déjà dû apercevoir un jour : 1 = = Il s'agit d'un événement. JavaScript gère très bien beaucoup d’événements : du simple clic sur un bouton (exemple ci-dessus) jusqu'à la fermeture de la fenêtre en cours. Comme premier script, voyons comment écrire un texte à l'écran une fois la page chargée : 1 2 = 3 4 = 5 Page modele en Javascript 6 7 8 9 10 11 12 13 Testez ce code dans votre navigateur et vous verrez le résultat ! Il faut savoir que tous les navigateurs internet n'autorisent pas ou ne supportent pas forcément le JavaScript. Certains navigateurs proposent même à l'utilisateur d'autoriser ou non le JavaScript. Si vous voulez quand même passer des informations aux visiteurs ayant un navigateur ne supportant pas JavaScript, il faudra utiliser la balise . <noscript> Exemple : 1 = 2 ( 3 4 votre navigateur ne peut pas lire le code JavaScript Dans cet exemple, le navigateur affichera Bonjour s'il est compatible ou le texte figurant entre les balises et s'il ne l'est pas. <noscript> </noscript> </head> ... = = <input type "button" onClick "..." /> <!DOCTYPE html> = <html lang "FR"> <head> = <meta charset "utf-8" /> Page modele en Javascript <title> </title> <script> document.write("Bonjour tout le monde, je suis du Javascript"); </script> </head> <body> </body> </html> = <script language "javascript"> ( document.write "bonjour"); </script> votre navigateur ne peut pas lire le code JavaScript <noscript> </noscript> Section 1 - Définition et fonctionnement de JavaScript 8 3. Exercice Exercice 1) Quelles sont les abréviations possible qu'on peut donner au langage JavaScript ? JS JSCript Java JSC Exercice 2) Avec lesquelles des bases de données suivantes peut-ont utiliser (ou interfacer) Javascript ? MySQL SQL PostgreSQL Aucune Exercice 3) Quelle est l'extension d'un fichier JavaScript ? Exercice 4) Où peut-on placer du code JavaScript dans une page HTML uploads/S4/ lecon-1-introduction-a-javascript-pdf.pdf