Software">
[Go to site: main page, start]
Scribd
Importer
23 vues46 pages

Technologies Web : TypeScript et Ajax

Le document présente une introduction sur les technologies web et le choix des technologies à utiliser pour le développement web. Il décrit l'historique du web, les concepts de base de JavaScript ainsi que des frameworks comme Angular, React et Vue.

Transféré par

Moustafa Abdelaziz
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
23 vues46 pages

Technologies Web : TypeScript et Ajax

Le document présente une introduction sur les technologies web et le choix des technologies à utiliser pour le développement web. Il décrit l'historique du web, les concepts de base de JavaScript ainsi que des frameworks comme Angular, React et Vue.

Transféré par

Moustafa Abdelaziz
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Choix des technologies

Introduction sur javascript


TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Introduction à la programmation Web et mobile

Aboubecrine MOHAMED LAGHDAF


[Link]-laghdaf@[Link]
[Link]

Ecole Supérieure Polytechnique


Département IRT

18 Mars 2021

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 1 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Plan du cours

• Introduction à la programmation Web et mobile;


• Rappel sur javascript;
• Typescript;
• Framework Angular pour le développement web;
• Développement mobile Hybride.

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 2 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Plan

Choix des technologies

Introduction sur javascript

TypeScript

Mise en place d’environnement

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 3 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Contexte historique du Web


Contexte
Présentation : l’évolution du contexte historique du développement
en web peut être résumé comme suit :

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 4 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Contexte historique du Web


Contexte
Présentation : l’évolution du contexte historique du développement
en web peut être résumé comme suit :
• 1989 : HTML: World Wide Web /HyperText Markup
Language;
• 1995: Javascript;

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 4 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Contexte historique du Web


Contexte
Présentation : l’évolution du contexte historique du développement
en web peut être résumé comme suit :
• 1989 : HTML: World Wide Web /HyperText Markup
Language;
• 1995: Javascript;
• 1998: Ajax asynchronous JavaScript and XML;

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 4 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Contexte historique du Web


Contexte
Présentation : l’évolution du contexte historique du développement
en web peut être résumé comme suit :
• 1989 : HTML: World Wide Web /HyperText Markup
Language;
• 1995: Javascript;
• 1998: Ajax asynchronous JavaScript and XML;
• 2009: NodeJS (node) ;

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 4 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Contexte historique du Web


Contexte
Présentation : l’évolution du contexte historique du développement
en web peut être résumé comme suit :
• 1989 : HTML: World Wide Web /HyperText Markup
Language;
• 1995: Javascript;
• 1998: Ajax asynchronous JavaScript and XML;
• 2009: NodeJS (node) ;
• 2010 AngularJS;

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 4 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Contexte historique du Web


Contexte
Présentation : l’évolution du contexte historique du développement
en web peut être résumé comme suit :
• 1989 : HTML: World Wide Web /HyperText Markup
Language;
• 1995: Javascript;
• 1998: Ajax asynchronous JavaScript and XML;
• 2009: NodeJS (node) ;
• 2010 AngularJS;
• 2012 TypeScript;

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 4 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Contexte historique du Web


Contexte
Présentation : l’évolution du contexte historique du développement
en web peut être résumé comme suit :
• 1989 : HTML: World Wide Web /HyperText Markup
Language;
• 1995: Javascript;
• 1998: Ajax asynchronous JavaScript and XML;
• 2009: NodeJS (node) ;
• 2010 AngularJS;
• 2012 TypeScript;
• 2013 React;

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 4 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Contexte historique du Web


Contexte
Présentation : l’évolution du contexte historique du développement
en web peut être résumé comme suit :
• 1989 : HTML: World Wide Web /HyperText Markup
Language;
• 1995: Javascript;
• 1998: Ajax asynchronous JavaScript and XML;
• 2009: NodeJS (node) ;
• 2010 AngularJS;
• 2012 TypeScript;
• 2013 React;
• 2014 : Angular, Vue.
A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 4 / 35
Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Étude de StackOverflow de 2020

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 5 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

HTML et javascript

Figure: Insertion du javascript dans le code HTML

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 6 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Déclaration des variables

Pour la déclaration des variables en javascript, vous avez 4


manières présentées comme suit :

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 7 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Déclaration des variables

Pour la déclaration des variables en javascript, vous avez 4


manières présentées comme suit :
• let nom varibale= valeur portée par bloc si la déclaration dans
un bloc. Portée de fichier ou module sinon.

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 7 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Déclaration des variables

Pour la déclaration des variables en javascript, vous avez 4


manières présentées comme suit :
• let nom varibale= valeur portée par bloc si la déclaration dans
un bloc. Portée de fichier ou module sinon.
• [Link] variable = valeur;
• [Link] variable = valeur; création/modification d’une
variable globale.

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 7 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Déclaration des variables

Pour la déclaration des variables en javascript, vous avez 4


manières présentées comme suit :
• let nom varibale= valeur portée par bloc si la déclaration dans
un bloc. Portée de fichier ou module sinon.
• [Link] variable = valeur;
• [Link] variable = valeur; création/modification d’une
variable globale.
• nom varibale = valeur ; modification de la valeur d’une
variable si elle existe déjà, sinon la création d’une variable
globale

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 7 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Déclaration des variables

Pour la déclaration des variables en javascript, vous avez 4


manières présentées comme suit :
• let nom varibale= valeur portée par bloc si la déclaration dans
un bloc. Portée de fichier ou module sinon.
• [Link] variable = valeur;
• [Link] variable = valeur; création/modification d’une
variable globale.
• nom varibale = valeur ; modification de la valeur d’une
variable si elle existe déjà, sinon la création d’une variable
globale
• var nom varibale = valeur ; portée de fonction si déclaration
dans une fonction. variable globale si déclaration en dehors de
la fonction.

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 7 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Déclaration des variables

Figure: Déclaration des variables avec var dans une fonction

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 8 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Déclaration des variables

Figure: La bonne
A. MED LAGHDAF
manière de créer des variables
18 Mars 2021
en javascript
Téchnologies Web 9 / 35
Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Déclaration des variables

Figure: Différence entre var et let

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 10 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Types des variables

Types primitifs :
• String : let =’ESP, y=’IRT’+’SID’;
• Number : let x=30, y=1.5;
• Boolean let x= true;
• Undefined : let x, y = undefined;
• Null: let x =null;

Types primitifs =⇒ copie par valeur :


• let x =3; x −→ 3
• let y =x; y −→ 3

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 11 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Les objets

Figure: création et accès à des objets javascript

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 12 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Les tableaux

Il faut noter que les tableaux sont des objets.

Figure: création et accès à des tableaux

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 13 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Typage dynamique

Figure: Typage dynamique

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 14 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Les constantes

Figure: Exemples des constantes en javascript

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 15 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Création des objets

Il existe quatre manière pour créer des objets :


• création par assignation;
• création par factory;
• création par constructeur;
• création par classe.

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 16 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Création des objets par assignation

Figure: création d’objet par assignation

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 17 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Création des objets par factory

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 18 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Création des objets par constructeur

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 19 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Création des objets par classe

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 20 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Présentation
Définition
typeScript est un langage de programmation libre et open source
développé par Microsoft qui a pour but d’améliorer et de sécuriser
la production de code JavaScript. Il s’agit d’un sur-ensemble
syntaxique strict de JavaScript.

• Principe d’utilisation :
1 Écrire du code en Typescript (mon [Link]);
2 Le compiler (transpiler) en JavaScript tsc mon [Link] produit
mon [Link];
3 Exécuter le JavaScript produit(mon [Link])
• Ajout principaux par rapport à JavaScript :
1 Typage fort =⇒ facilité les débuggages;
2 Notion orienté objet : interface, classe, etc;
3 Erreur à la compilation.

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 21 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Les types en TypeScript

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 22 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Typage fort

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 23 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Le type any

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 24 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Imposer le type d’une variable

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 25 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Les tableaux et les tuples

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 26 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Les énumérations

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 27 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Les fonction

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 28 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Les arrow fonction

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 29 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Les interfaces

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 30 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Les constructeurs

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 31 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Installation des outils

Installation des outils


Pour faciliter le développement d’une application Angular, les
outils suivants doivent être installés

• Node Js : [Link]
• Node Js installe l’outil npm(Node Package Manager) qui
permet de télécharger et installer des bibliothèques Java Script;
• Installer ensuite Angular Cli (Command Line Interface) qui
vous permet de générer, compiler, tester et déployer des projet
Angular [Link]

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 32 / 35


Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Introduction
Démarrer avec Angular
Pour commencer le travail avec Angular, il faut installer nodejs via
le lien suivant : [Link]

Figure: NodeJs
A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 33 / 35
Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Introduction
Démarrer avec Angular
Ensuite, il faut installer le module @angular/cli via le ce lien
[Link]

Figure: Angular/cli
A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 34 / 35
Choix des technologies
Introduction sur javascript
TypeScript Ecole Supérieure Polytechnique
Mise en place d’environnement

Architecture

Figure: Full Stack

A. MED LAGHDAF 18 Mars 2021 Téchnologies Web 35 / 35

Vous aimerez peut-être aussi