Remerciez-le!

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

Introduction au Javascript Noël Macé noelmace.com IT - Développement JavaScript

Introduction au Javascript Noël Macé noelmace.com IT - Développement JavaScript 101 - Livret de cours Version beta 20/05/2014 Paternité - Pas d'Utilisation Commerciale - Partage des Conditions Initiales à l'Identique : http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ Légende § Entrée du glossaire > Abréviation ¨ Référence Bibliographique ¤ Référence générale Table des matières Introduction 5 I - Pourquoi et comment ? 6 1. Vous avez dit langage de programmation ? ................................................................................. 6 1.1. Qu'est ce qu'un langage ? ........................................................................................................................ 6 1.2. Éléments de taxinomie des langages de programmation ............................................................................... 7 1.3. Principaux langages de programmation actuels ......................................................................................... 10 2. Architecture des applications web .............................................................................................. 11 2.1. Environnement client-serveur ................................................................................................................. 11 2.2. Architecture n-tiers ............................................................................................................................... 12 3. Qu'est ce que le Javascript ? ...................................................................................................... 14 3.1. Histoire du Javascript ............................................................................................................................ 14 3.2. Les usages du JavaScript ....................................................................................................................... 17 II - Premiers pas 18 1. Outils pour le développement ..................................................................................................... 18 1.1. Éditeurs de texte pour le développement .................................................................................................. 18 1.2. IDE pour JavaScript .............................................................................................................................. 19 2. Hello World JavaScript .............................................................................................................. 20 3. Syntaxe ....................................................................................................................................... 21 3.1. Comment intégrer du JavaScript à du HTML ? ....................................................................................... 21 3.2. Conventions .......................................................................................................................................... 23 3.3. Commentaires ....................................................................................................................................... 25 III - Fondamentaux 26 1. Variables .................................................................................................................................... 26 1.1. Déclaration de variables ......................................................................................................................... 26 1.2. Types de données .................................................................................................................................. 26 1.3. Exercice : Manipulation de variables et types primitifs ............................................................................... 27 2. Opérateurs .................................................................................................................................. 28 2.1. Opérateurs JavaScript ........................................................................................................................... 28 2.2. Exercice : Opérateurs JavaScript : mise en pratique .................................................................................. 29 3. Structures de contrôle ................................................................................................................ 30 3.1. Alternatives en JavaScript ..................................................................................................................... 30 3.2. Boucles JavaScript ................................................................................................................................ 31 3.3. Exercice : Calculs mathématiques simples ................................................................................................. 32 4. Fonctions .................................................................................................................................... 32 4.1. Fonctions ............................................................................................................................................. 32 4.2. Exercice : Fonctions JavaScript : tester si un nombre est premier .............................................................. 33 IV - Programmation Orientée Objet 34 1. Introduction à la programmation objet ...................................................................................... 34 1.1. Qu'est ce qu'un objet ? .......................................................................................................................... 34 2. Programmation orientée prototype ............................................................................................ 35 2.1. Introduction .......................................................................................................................................... 35 2.2. Principe ............................................................................................................................................... 35 3. La programmation orientée objet en JavaScript ........................................................................ 35 3.1. Constructeur ......................................................................................................................................... 35 3.2. Création d'un objet ............................................................................................................................... 36 3.3. Prototype ............................................................................................................................................. 36 4. Exercice : TODO List .................................................................................................................. 37 V - Manipulation de pages web 38 1. Document Object Model ............................................................................................................ 38 1.1. Qu'est ce que c'est ? .............................................................................................................................. 38 1.2. Principaux objets ................................................................................................................................... 39 2. l'objet document ......................................................................................................................... 39 2.1. Récupération d'éléments ........................................................................................................................ 39 2.2. Écriture dans le document ..................................................................................................................... 40 2.3. Propriétés ............................................................................................................................................. 41 3. Elements DOM ........................................................................................................................... 41 3.1. Node .................................................................................................................................................... 41 3.2. Element ................................................................................................................................................ 42 3.3. HTMLElement ...................................................................................................................................... 42 4. Événements ................................................................................................................................ 43 4.1. Les différents événements ....................................................................................................................... 43 4.2. Utiliser des événements sans DOM ......................................................................................................... 43 4.3. Gestion d'événements avec DOM2 .......................................................................................................... 44 VI - Conclusion 46 1. Exercice : TP : formulaire interactif ............................................................................................ 46 Solutions des exercices 47 Glossaire 52 Abréviations 53 Références 54 Crédits des ressources 55 5 Noël Macé (noelmace.com) JavaScript 101 : les fondamentaux du langage Pré-requis : faibles notions d'algorithmiques Durée prévue : entre 14 et 20 heures Ce cours n'est encore qu'en cours de rédaction et d'amélioration. Tout particulièrement, de nombreuses transitions, remarques et ajouts y sont manquant. Il ne peu donc suffire pour un apprentissage en autodidacte, et est pour l'instant destiné à l'enseignement en présentiel, dans lequel les différents éléments manquant sont présentés oralement, ou en tout cas en dehors de ce support. Introduction Pourquoi et comment ? 6 Noël Macé (noelmace.com) Vous avez dit langage de programmation ? 6 Architecture des applications web 11 Qu'est ce que le Javascript ? 14 1. Vous avez dit langage de programmation ? Bien entendu, vous aurez compris que Javascript est un langage de programmation ... mais savez vous exactement ce que cela signifie, et pourquoi, parmi tout les langages existant, utiliser le Javascript ? Pour vous aider à comprendre ces aspect, nous allons ici introduire quelques concepts essentiels, afin que vous puissiez savoir exactement ce qu'est un langage de programmation informatique, ses particularité, ce qui vous permettra de mieux comprendre par la suite les spécificités du Javascript. 1.1. Qu'est ce qu'un langage ? 1.1.1. Définitions Définition : Langage Faculté de mettre en œuvre un système de signes linguistiques, qui constituent la langue, « - permettant la et l'expression de la . communication pensée » Wikitionnaire Définition : Programme (Informatique) Ensemble d'instructions, souvent contenu dans un fichier, écrit dans un langage machine « - exécutable par un ordinateur. » Wikitionnaire 1.1.2. Langage de programmation Conclusion Un langage homme-machine Compréhensible par les deux Permettant donc de réaliser des programmes Exemple : HelloWorld Python print("Hello World !") demande à l'ordinateur d'afficher (méthode print) le message "Hello World !" Pourquoi et comment ? I Pourquoi et comment ? 7 Noël Macé (noelmace.com) 1.2. Éléments de taxinomie des langages de programmation Nous verrons ici les différents éléments permettant la des langages de taxinomietaxinomie * § programmation, afin de vous donner les bases essentielles vous permettant la compréhension des caractéristiques de chacun, et donc leur comparaison et classement. 1.2.1. Interprété ou compilé ? Définition : Langage compilé Langage devant nécessairement faire un appel à un afin d'être traduit dans un autre compilateur langage (machine / binaire) afin d'être exécuté sur une machine donnée. On parle alors de . compilation Définition : Langage interprété Langage directement analysé, traduit et exécuté par un programmer informatique dénommé interpréteur. Les opérations d'analyse et de traduction sont réalisées à . On chaque exécution parle alors d' . exécution dynamique Avantages et inconvénients La compilation étant faite pour une architecture particulièrement, l'usage d'un langage compilé permet d'optimiser l'usage du hardware (processeur, mémoire, etc ...), alors que l'appel à un interpréteur à chaque exécution d'un programme nécessite plus de ressources. Ainsi, l'usage d'un langage compilé permet d'obtenir de par rapport à un langage meilleurs performances interprété. Cependant, les performances des machines actuelles et la compilation sur une plateforme souvent légèrement différente de celle sur laquelle le programme sera exécuté limitent de plus en plus cette différence. En revanche, du fait de leur relative indépendance vis à vis de la machine sur laquelle le programme sera exécuté, les langages interprétés permettent une meilleur du code, et une relative du développement. portabilité * § portabilité portabilité * § simplification 1.2.2. Paradigmes Définition : Paradigme de programmation Modèle cohérent définissant une manière de réaliser un code informatique pour répondre à un problème. Un langage est dit multi-paradigme quand plusieurs paradigmes fondamentaux sont utilisables avec celui-ci. Programmation impérative Paradigme de programmation définissant un programme en terme de séquences d'instructions exécutées pour modifier l'état du programme. Il s'agit du modèle le plus ancien, puisque le plus proche du fonctionnement réel de la quasi totalité des processeurs du marché. Il est logiquement le plus courant, et donc le plus appris. La programmation impérative peu se décliner en programmation structurée et en programmation procédurale. Pourquoi et comment ? 8 Noël Macé (noelmace.com) Programmation déclarative Paradigme de programmation consistant à déclarer les données du problème, puis à demander au programme de les résoudre. Il existe plusieurs sous-ensembles de la programmation déclarative : la programmation descriptive, ne permettant que de décrire des structures de données (comme en HTML par exemple) et à ce titre, souvent considéré comme n'étant pas réllement de la programmation la programmation fonctionnelle, plus proche de la logique mathématique, puisque définissant un programme en terme de fonctions et rejetant le changement d'état et la mutation de données, contrairement à la programmation impérative. L'exemple le plus connus de langage à paradigme fonctionnel est Scheme, mais ce paradigme est sans doute le second plus courant derrière la programmation impérative, et est donc supporté par de nombreux langages multi-paradigmes. la programmation logique, où les problèmes sous présentés sous forme de prédicats, comme en Prolog par exemple. la programmation par contraintes, où les problèmes sont modélisés à l'aide de variables de décision et de contrainte, selon le principe de "Problème de satisfaction de contrainte" ou . Il s'agit d'un paradigme complexe, utilisé pour la résolution de problèmes CSPCSP * > combinatoires de grande taille. Il est généralement intégré à un langage via une bibliothèque, comme par exemple Cream pour Java ou python-constraint pour Python. Programmation orientée objet (POO) Paradigme dans lequel un programme est découpé en entités appelées "objets", représentant un concept ou une entité du monde physique, défini par une structure interne, un comportement et une interaction et hiérarchisation avec les autres objets. Ce paradigme est toujours associé à un autre, et ne définie pas en soit la méthode de résolution du problème, mais plutôt la structure du programme. C'est un modèle extrêmement courant. Par exemple, le C++ est, globalement, du C modifié pour s'orienter vers ce paradigme. 1.2.3. Typage Le typage concerne les éléments permettant de déterminer la valeur pouvant être prise par une donnée. Il existe de nombreux termes permettant de distinguer les formes de typages, et donc les langages. Voyons en quelques uns statique / dynamique Il existe deux méthodes pour déterminer le type pouvant être employé au sain d'un variable : dynamiquement : le type est déclaré implicitement, et donc automatiquement déterminé à l’exécution. On dit alors qu'il est déterminé Cela permet une uploads/Histoire/ 0481-pdf-introduction-au-javascript.pdf