Vous êtes sur la page 1sur 70

ICT 218

Développement
d’applications
mobiles
Evaris Fomekong

http://www.uy1.uninet.cm/
Programme
01 Objectifs du cours
Agenda 02 Appareils mobiles et
apps
03 Environnements et
plateformes de
développement mobile
04 Analyse des besoins,
requis et
fonctionnalités
05 Conception UI/UX
06 Utilisation des ressources
Objectifs du cours

Ce cours introduit les étudiants au développement d’applications


pour les appareils mobiles. Au terme de ce cours, les étudiants
Descriptif seront en mesure de : concevoir, développer et déployer une
application mobile; appliquer les patrons de conception spécifiques à
la conception d’applications mobiles; maîtriser les outils de
développement d’une application mobile;

85 GIT 85
Concepts Logiciel
Application %
IDE
GIMP
%
Mobile
Github
HTML
CSS 65 VCS
Framework
65
JAVASCRIPT %
%
TypeScript
Angular
Ionic 40%
Algorithmique 90%
Appareils
mobiles et apps
une vue
d'ensemble
Chapitre II, III
01 Appariel Mobile
Agenda ❖ Materiel
❖ Systeme d’exploitation
❖ Android
❖ IOS
❖ Autres

02 Application Mobile
❖ Concept
❖ Native
❖ Hybride
❖ Web
❖ Language
❖ Java
❖ Swift
❖ Javascript
❖ Framework
❖ React Native
❖ Cordova
❖ Ionic
A- Appariel Mobile

Synopsis

Ces dernières années ont été passionnantes dans le développement des technologies
mobiles. Il semble que chaque jour, il y a quelque chose de nouveau qui se passe sur
nos téléphones et tablettes pour rendre l'expérience encore plus intense et cette
tendance ne montre aucun signe de ralentissement.

Alors, que pouvons-nous attendre dans un avenir proche? Voici cinq tendances mobiles
sur lesquelles nous devons garder un oeil.
Tendances mobiles
3. Outils de travail

1. Evolution des tailles Les appareils mobiles ont longtemps été considérés
comme outils de communication avec une utilité
Pendant un certain temps, il semblait que les limitée pour le travail. Cela change, grâce à
appareils mobiles devaient seulement continuer l'introduction de nouveaux appareils comme l'iPad Pro
à devenir plus petits. Ensuite, l'introduction de et Surface Pro. On commence à rechercher des
l'iPhone 6 Plus a incité les constructeurs a appareils qui offrent plus d'outils et de fonctionnalités,
proposer des nouveautés plus grandes jusqu'à telles que des applications multi-écrans, des
l'introduction de l'expression "Phablet" pour applications plus avancées, une autonomie et un
décrire ces appareils surdimensionnés. stockage accrus..

2. Performance Web
Le Web mobile poursuit son ascension régulière. En 4. Autonomie de la batterie
2015, un rapport de Morgan Stanley a montré que Les fabricants sont à l'écoute et à la
plus de gens utilisaient le Web mobile que les recherche de nouvelles solutions pour
applications et que la plupart des gens sont plus augmenter la vie de la batterie sans
susceptibles de consulter un site Web sur leur compromis sur la taille et le poids des
appareil avant de télécharger une application. En appareils. Déjà, la durée de vie d'une
outre, il y a une perte importante de l'engagement batterie standard a augmenté d'environ
parmi les utilisateurs qui téléchargent des 25% au cours des cinq dernières années.
applications; il semble qu'une majorité de personnes
qui télécharge et installe une application la supprime
après.
Evolution des Appariels Mobiles
le Siemens S10 a donné vie aux Les smartphones sont devenus de
En 1983, le monde a écrans de téléphones portables plus en plus au cœur de la vie
obtenu le tout premier pour la première fois en 1997. La moderne, offrant bien plus que de
téléphone mobile portable même année, Hagenuk a lancé le simples fonctionnalités de
sous la forme du Motorola GlobalHandy, le premier appareil communication. Le premier service
DynaTAC 8000X. Cela sans antenne externe. La 4G du Royaume-Uni a été lancé
coûtait 4000 $ USD et était personnalisation a également dans 11 villes par EE en 2012, avec
un énorme symbole de démarré de façon spectaculaire des vitesses de téléchargement
statut à l'époque. . avec Ericcson offrant des panneaux pouvant atteindre 12 Mbps.
de clavier avant de couleur
interchangeables.
1983 1998 2010

2020
Le Royaume-Uni et les
États-Unis
commencent à
déployer le réseau 5G,
1994 2003 les premières
Le GSM a été lancé pour la La mise en œuvre de la 3G a permis à indications indiquent
première fois en Europe en des vitesses de téléchargement allant des vitesses de
1991 avec l'Orbitel TPU jusqu'à 2MBS en mars 2003, "3" étant transfert de données
900 sur le marché, mais ce le premier à offrir le service au réelles 10 fois plus
n'est qu'en 1992 que les Royaume-Uni. RIM a apporté le rapides que la 4G.
téléphones portables n'ont courrier électronique mobile aux
plus été limités à une masses avec sa gamme de terminaux
utilisation professionnelle. BlackBerry populaires comme le 8100
Pearl. L'avènement des caméras
B- Application Mobile

Synopsis

Le marché du mobile connaît une extension folle ces dernières années. Depuis 2015, les
utilisateurs surfent plus sur un smartphone ou une tablette que sur leur ordinateur. Nous
n'utilisons plus notre smartphone uniquement pour téléphoner, et ça, les géants du
mobile l'ont bien compris.

Qui dit smartphone ou tablette dit bien sûr application mobile. Vous savez ces petites
pastilles qu'on retrouve chez tout le monde, qui permettent de jouer, consulter ses mails,
naviguer sur les réseaux sociaux, etc. Environ 170 milliards d’applications mobiles ont
été téléchargées dans le monde entier.

Il existe deux types principaux d'applications mobiles : les applications natives et les
applications cross-platforms.
Application
Mobile
Types d’applications mobiles
Application Native
ou Plateformes

Android.
IOS
Natives Apps Windows Phone
BlackBerry

Laganges

Java/Kotlin.
C-objective/Swift
C#
C++
Natives Apps
les applications natives ou « Natives Apps »
Celles-ci correspondent à des logiciels créés uniquement pour
une plateforme mobile spécifique. Le développement de ces
logiciels se fait au travers du SDK ou software développent kit de
la plateforme mobile en question. Le nom de ces applications
vient du fait qu’elles sont développées exclusivement avec le
langage « natifs », par exemple le langage JAVA ou le langage
Objective-C. Les natives App sont téléchargées à partir d’une
plateforme de téléchargement qui est souvent un Store applicatif.
C’est par exemple le cas pour l’Apple store ou encore Google
Play.

60% 50%
Natives Apps

Platform Language Structure Support IDE

Android Java/Kotlin Alphabet (Google) Android Studio

IOS C-Objective/Swift Apple X code

Windows Phones C# Microsoft Visual Studio

Black Berry C++ BlackBerry UEM Visual Studio


Avantages et inconvénients
Inconvénients Avantages

❖ Les applications natives prennent du ❖ Meilleure rapidité, fiabilité et dotée d’une


temps à être développées et sont meilleure réactivité ainsi qu’une résolution
relativement coûteuses. supérieure ce qui assure une meilleure
expérience utilisateur.
❖ S’ajoutent d’éventuels problèmes de
rétrocompatibilité, en raison notamment ❖ Elle permet un accès plus facile à toutes les
de la création de nouvelles versions du fonctionnalités du téléphone, de
système d’exploitation. l’accéléromètre en passant par la caméra et
même le micro.
❖ Celles-ci peuvent aussi se voir refuser
l’accès au Store sur lesquelles elles ❖ Ne requiert pas forcément internet pour
souhaitent être mises à disposition. En fonctionner, ce qui est un réel avantage.
effet, elles doivent passer par une Même en 2017, il existe encore des zones
batterie de tests de validation de ces très peu couvertes par le réseau internet
Stores, qui peut les accepter ou les
refuser.
Application Web
ou Plateformes

Ionic.
Monaca
Web Apps Onsen UI
Framework7

Laganges

Javascript
CSS
Html
Types d’applications mobiles
les applications Web ou « Web Apps »
Elles correspondent à des sites Web qui sont conçus
spécialement pour un affichage optimisé pour mobile. Pour
accéder à ces sites Web, on utilise le navigateur Internet qui est
sur le mobile. Ces applications mobiles sont développées
principalement à partir de technologies Web comme le HTML5 ou
encore CSS3. Grâce au support HTML5, il est dès lors, possible
d’accéder à environ 80 % des fonctions présentes sur le mobile.

Par exemple, cela permet d’accéder à différentes fonctions,


comme la géolocalisation, à l’accéléromètre, gérer la fonction
multitouch ou encore permettre la synchronisation offline lorsque
le mobile perd et retrouve ensuite sa connexion.
Ces applications Web peuvent être de deux sortes : les
génériques, qui sont compatibles avec toutes les plateformes
mobiles et donc utilisables sur n’importe laquelle, ou alors celles
conçues spécifiquement pour un genre de support en particulier.
60% 10%
Web Apps

Platform Language Structure Support IDE

Ionic HTML Ionic Atom

Monaca CSS Monaca Webstorm

Onsen UI Javascript Onsen Visual Studio

Framework 7 TypeScript Sublime


Avantages et inconvénients
Inconvénients Avantages

❖ Un de taille, elles n’ont pas accès à ❖ Leur code unifié permet la comptabilité avec
toutes les fonctions présentes sur le tous les navigateurs, cela permet aux
mobile. Par exemple, il leur est applications Web d’être développées plus
impossible d’accéder au répertoire du rapidement et donc d’obtenir une réduction
mobile. conséquente des coûts du projet.

❖ Elles sont pas deployables sur les ❖ De plus, les Web App sont simples à
stores des differents platformes natives développer sur ces plateformes, puisque
reduisant les canaux d’acces à celles-ci ne les soumettent pas au test de
l’application validation..
Application Hybride
ou Plateformes

Ionic.

Hybrid Apps React Native


Flutter
PhoneGap

Langages

Javascript
CSS
Html
TypeScript

Frameworks

Angular
React
Vue
Types d’applications mobiles
les applications de type hybride ou « hybrid Apps »
Ces dernières sont considérées comme un mix, entre les Web
Apps et les Nativ Apps. En effet, elles sont compatibles avec
toutes les plateformes mobiles. Mais ces applications sont
principalement développées à l’aide d’HTML5, aujourd’hui, qui
est très performant mais qui utilisent aussi d’autres langages
Web comme le CSS et le JavaScript.

Ainsi, une application dite hybride, contrairement à une


application native, n’est pas dépendante d’une plateforme mobile
en particulier. De la même manière, et contrairement aux
applications Web, les applications hybrides peuvent accéder à
toutes les fonctions présentes sur le mobile. Cela est rendu
possible par des liens qui sont faits entre le langage natif et la
technologie Web présente dans l’application hybride..

60%
30%
Natives Apps

Platform Language Structure Support IDE

Flutter Dark Alphabet (Google) Android Studio

React Native Javascript(React) Facebook Visual Studio

Javascript(Angular,Re
Ionic Ionic Visual Studio
act, ES6, Vue)

Phonegap Javascript Apache Visual Studio


Avantages et inconvénients
Inconvénients Avantages

❖ Un de taille, elles n’ont pas accès à ❖ Réduction des coûts de développement,


toutes les fonctions avancées présentes embauche de développeurs natifs,
sur le mobile. maintenance de la base de code

❖ Temps de mise sur le marché plus rapide


❖ Les performances manquent comparé à sur les deux plateformes
des applications natives
❖ Facilité de maintenance via des instruments
❖ Dépendance aux plugins de navigateur intégrés et des outils de
débogage.
❖ Taille de l'application
❖ De plus, les Web App sont simples à
développer sur ces plateformes, puisque
celles-ci ne les soumettent pas au test de
validation..
Resumé
Au risque de décevoir certains il n'y a pas de mauvais ou de bon outil. Il existe
juste des outils adaptés pour résoudre des tâches spécifiques. Dans le cas
d’Ionic, sa valeur ajouté est le développement d’applications sur diverses
plateformes, en utilisant des technologies bien connues. Il aide les équipes à
économiser du budget, du temps et des efforts de développement.

Si vous possédez une solide expertise en matière de framework et une bonne


maîtrise du langage, il est possible de créer une application très performante.
Mais rien ne vaut l’application native en termes de performances et d’expérience
utilisateur. Donc, en fin de compte, ce sont vos priorités qui dictent votre choix.
Application
Cas Ionic UI

Html.
CSS
SCSS

Metier

Javascript
TypeScript
Angular

Ionic

Resources
Config
Build

Ionic Avance

Resource Native
Appels API
Deploiement
0%
Progression

Ionic est un framework open source qui permet de créer des applications mobiles grâce aux
technologie simple du web à savoir HTML / CSS / Javascript / Cordova. On appelle cela des
applications Hybride.

Theorie Pratique
Le fonctionnement théorique d’Ionic En pratique Ionic est très simple
n’est pas très compliqué. C’est une d’utilisation pour toutes personnes
jonction subtile entre Angular ayant déjà fait du développement web.
(Javascript) / HTML / CSS et D’autant plus si vous avez déjà
Cordova.. travaillé avec Angular.
Cordova/Capacitor UI/UX
Il permet de crée des applications En effet, pour tout ce qui va être le «
natives mobiles en agissant comme theming » donc faire une jolie
un container qui va permettre d’utiliser application Ionic embarque déjà dans
les fonctions natives des téléphones sa documentation énormément de
(par exemple le GPS, l’accéléromètre, composants.
les fonctions de partage intégré,
l’appareil photo …)
Road Map

RESOURCE NATIVE
APPELS API
HTML/CSS ANGULAR DEPLOIEMENT SUR STORE

UI FRAMEWORK IONIC AVANCE

1 3 5
2 4
METIER IONIC
JAVASCRIPT/TYPESCRIPT RESOURCE
CONFIG
UI COMPONENT
BUILD
HTML/CSS
HTML

Le HTML et le CSS sont des langages web de base ; on


Synopsis commence donc généralement par leur apprentissage car ils
sont assez simples à comprendre et car ils sont
incontournables..

Ce cours n’est pas qu’un simple empilage de connaissances :


l’idée est au contraire de vous accompagner un maximum afin
que vous compreniez à quoi correspond chaque notion,
quand utiliser tel élément de langage plutôt que tel autre,
comment s’imbriquent les différents éléments de langage et
les langages ensemble pour qu’à la fin du cours vous soyez
totalement autonomes et sachiez résoudre des
problématiques relativement complexes.
HTML
Role
Historique
Le rôle du HTML est donc crucial puisqu’il va être
Le HTML est un langage qui a été créé
notre langage privilégié pour indiquer aux
en 1991. Les sigles « HTML » sont
navigateurs ce quoi est constituée chaque page et
l’abréviation de « HyperText Markup
ce qu’ils doivent afficher. Grâce au HTML, on va
Language » ou « langage de balisage
par exemple pourvoir indiquer que tel contenu est
hypertexte » en français.
un texte qui n’est qu’un paragraphe, que tel autre
contenu est un texte qui est un titre de niveau 1
dans notre page, que tel autre contenu est une

concept liste, un lien, etc..

Language Exemple
Le HTML est donc un langage de
balisage, c’est-à-dire un langage qui va
nous permettre de définir les différents
contenus d’une page.
CSS
Role
Historique
Le CSS vient résoudre un problème bien différent
Le CSS a été créé en 1996, soit 5 ans
du HTML : en effet, le HTML sert à définir les
après le HTML. Les sigles « CSS » sont
différents éléments d’une page, à leur donner du
l’abréviation de « Cascading
sens. Le CSS, lui, va servir à mettre en forme les
StyleSheets » ou « feuilles de styles en
différents contenus définis par le HTML en leur
cascade » en français.
appliquant des styles.

concept
Language Exemple
Le HTML va donc créer la structure des pages
tandis que le CSS va nous permettre de
modifier l’apparence des contenus de la page.
On va ainsi par exemple pouvoir définir la
taille, la couleur ou l’alignement de certains
contenus HTML et notamment en l’occurrence
de certains textes dans notre page.
HTML
Les bases.

✓ Le langage HTML tout entier repose sur l’utilisation d’éléments. Si vous comprenez bien ce qu’est
un élément (balise), vous comprenez le HTML..

✓ Les éléments HTML vont nous permettre de créer la structure d’une page HTML, de définir chaque
contenu de notre page et également de passer certaines informations utiles au navigateur pour
afficher la page.

✓ Dans une page, nous allons utiliser les éléments en HTML pour marquer du contenu, c’est-à-dire
pour lui donner du sens aux yeux des navigateurs et des moteurs de recherche.

✓ Aujourd’hui, il existe plus de 120 éléments HTML différents aux rôles très variés et qui font la
richesse de ce langage.

.
HTML
Les balises.

✓ Un élément HTML peut être soit constitué d’une paire de balises (ouvrante et fermante) et d’un
contenu, soit d’une balise unique qu’on dit alors « orpheline ».

✓ L’élément p (qui sert à définir un paragraphe) est par exemple constitué d’une balise ouvrante,
d’une balise fermante et d’un contenu textuel entre les balises. L’idée ici est que le texte contenu
entre les deux balises va être le texte considéré par le navigateur comme étant un paragraphe.

✓ Comme vous pouvez le constater, la balise ouvrante de l’élément est constituée d’un chevron
ouvrant <, du nom de l’élément en question et d’un chevron fermant >.

✓ . Certains éléments en HTML ne vont être constitués que d’une balise qu’on appelle alors orpheline.
Cela va être le cas pour certains éléments qui ne possèdent pas de contenu textuel comme
l’élément br par exemple qui sert simplement à créer un retour à la ligne en HTML et qui va s’écrire
comme ceci

Exemple
HTML
Les attributs.

✓ les éléments vont également pouvoir contenir des attributs qu’on va alors placer au sein de la balise
ouvrante de ceux-ci.
✓ Pour certains éléments, les attributs vont être facultatifs tandis que pour d’autres ils vont être
obligatoires pour garantir le bon fonctionnement du code HTML.

✓ Les attributs vont en effet venir compléter les éléments en les définissant plus précisément ou en
apportant des informations supplémentaires sur le comportement d’un élément.

✓ . Un attribut contient toujours une valeur, qu’on peut cependant parfois omettre dans le cas des
attributs ne possédant qu’une seule valeur (car la valeur est alors considérée comme évidente).

Exemple
La structure minimale
d’une page HTML
✓ Le DOCTYPE: sert à indiquer le type du document.
Standards Structure
✓ L’élément HTML: L’élément html va représenter notre page en
Le W3C, en définissant des standards Le schéma de base d’une page HTML
soi. On va insérer tout le contenu de notre page (et donc les
de développement, a véritablement va donc toujours être le même. C’est
autres éléments) à l’intérieur de celui-ci.
simplifié la tâche aux développeurs.. ce que nous appellerons la « structure
minimale d’une page HTML valide ».
✓ Les éléments head et body: L’élément head est un élément
d’en-tête. Il va contenir des éléments qui vont servir à fournir
des informations sur la page au navigateur. L’élément body va Etat de l’art Variantes
lui contenir tous les éléments définissant les contenus « En effet aujourd’hui, tous les Cependant, cela n’est possible que
visibles » de la page, c’est-à-dire les contenus à destination de navigateurs sérieux suivent les parce que les développeurs eux-
l’utilisateur. standards proposés par le W3C, ce mêmes suivent certains schémas de
qui n’était pas forcément le cas dans construction de leur page qui sont
✓ L’élément meta : sert lui à transmettre des meta informations le passé. anticipables et attendus par les
sur la page au navigateur. Cet élément possède de nombreux navigateurs.
attributs différents.
HTML
Les entités.
✓ Le HTML possède des caractères réservés. Par exemple, vous ne pouvez pas écrire les signes «
< » et « > » tels quels dans vos pages web, tout simplement car le navigateur pensera que vous
venez d’ouvrir une balise d’élément.

✓ Pour remédier à ce problème, nous allons devoir « échapper » ces caractères réservés en utilisant
ce qu’on appelle des entités HTML. Les entités vont être des suites de caractères représentant un
caractère réservé en HTML.

✓ Voici quelques-unes des entités les plus courantes et leur signification :

Exemple
CSS
Les bases (les selecteurs).

✓ Le CSS est un langage qui a été inventé pour styliser les contenus de nos pages en leur appliquant
des styles.

✓ Pour pouvoir appliquer un style à un contenu, il va déjà falloir le cibler, c’est-à-dire trouver un moyen
d’indiquer qu’on souhaite appliquer tel style à un contenu en particulier.

✓ Pour cela, nous allons utiliser des sélecteurs. Les sélecteurs sont l’un des éléments fondamentaux
du CSS.
✓ De manière très schématique et très simplifiée, nous allons utiliser nos sélecteurs en CSS pour
cibler des contenus HTML et leur appliquer des styles.

✓ Il existe différents types de sélecteurs en CSS : certains sélecteurs vont s’appuyer sur le nom des
éléments, comme le sélecteur CSS p par exemple qui va servir à cibler tous les éléments p d’une
page. Ce type de sélecteurs est appelé « sélecteur d’éléments » tout simplement car ils vont être
identiques aux éléments HTML sélectionnés ou encore « sélecteurs simples ».

✓ D’autres sélecteurs, en revanche, vont être plus complexes et nous permettre de sélectionner un
élément HTML . en particulier ou un jeu d’éléments HTML en fonction de leurs attributs ou même de
leur état : on va ainsi pouvoir appliquer des styles à un élément uniquement lorsque la souris de
l’utilisateur passe dessus par exemple.
Les propriétés CSS

Définition
Les propriétés vont nous permettre de choisir quel(s)
aspect(s) (ou “styles”) d’un élément HTML on souhaite
modifier.
Par exemple, nous allons pouvoir modifier la couleur
d’un texte et lui appliquer la couleur que l’on souhaite
grâce à la propriété color (« couleur », en français).

Une propriété va être accompagnée d’une ou plusieurs


valeurs qui vont définir le comportement de cette
propriété.
Où écrire le code CSS
✓ Avant d’étudier les mécanismes du CSS en soi, il convient de comprendre où placer le code CSS
afin qu’il s’applique bien à un fichier HTML.

✓ Dans le cas présent, nous avons notre code HTML d’un côté et nous aimerions lui appliquer des
styles en CSS. Cependant, il va falloir d’une manière ou d’une autre « lier » notre code CSS à notre
code HTML afin que les éléments de nos pages HTML tiennent bien compte des styles qu’on a
voulu leur appliquer en CSS.

✓ Pour faire cela, nous allons pouvoir écrire le code CSS à trois endroits différents. Chaque méthode
va présenter des avantages et des inconvénients selon une situation donnée et c’est le sujet que
nous allons aborder dans cette leçon.

écrire le CSS au sein écrire le CSS dans Déclarer le CSS au sein du


du fichier HTML. un fichier séparé fichier HTML, dans des
attributs style
Sélecteurs CSS simples et combinateurs

Synopsis

Le CSS va nous permettre de mettre en forme nos contenus HTML en appliquant des
styles aux différents éléments. Cependant, pour appliquer un style particulier à un ou
plusieurs éléments HTML en CSS, il va avant tout falloir les cibler, c’est-à-dire indiquer
avec précision à quels éléments doivent s’appliquer les styles créés en CSS.

Le but de cette leçon est d’apprendre à se servir de quelques sélecteurs CSS « simples
» et de comprendre leur limitation. Nous allons également en profiter pour définir plus
précisément les différents types de sélecteurs CSS et directement voir comment
combiner différents sélecteurs simples pour en créer des plus complexes.
Sélecteurs éléments « simples »
Content Here
La manière la plus simple de cibler un
type d’éléments HTML en CSS est
néanmoins d’utiliser des sélecteurs
éléments ou sélecteurs « simples ».
Ces sélecteurs sont appelés «
sélecteurs éléments » tout simplement
car ils reprennent le nom des
éléments HTML qu’ils sélectionnent..
Limites
En effet, en utilisant uniquement les
sélecteurs éléments, nous allons être
obligés d’appliquer les mêmes styles à
tous les éléments d’un même type ce
qui n’est pas très flexible.
Exemple
Comment appliquer des styles à un
Par exemple, le sélecteur CSS p va élément en particulier ou à plusieurs
cibler tous les éléments p (c’est-à-dire éléments différents choisis ? Pour
tous les paragraphes) d’une page faire cela, nous allons devoir utiliser
HTML. des sélecteurs complexes.
.
Sélecteurs complexes et combinateurs
Synopsis
En effet, en plus des sélecteurs simples, le
CSS met à notre disposition une panoplie de
sélecteurs que l’on va pouvoir utiliser pour
cibler des contenus de manière très précise

Exemple
On va pouvoir utiliser des sélecteurs CSS
combinateurs qui vont être en fait la combinaison de
plusieurs sélecteurs simples à l’aide de caractères
spéciaux à la signification précise ;

On va pouvoir cibler des contenus HTML selon le fait


qu’ils possèdent un certain attribut ou même selon la
valeur d’un attribut ;

On va pouvoir utiliser les pseudo classes qui vont


nous permettre d’appliquer des styles à des éléments
en fonction de leur état, c’est-à-dire en fonction des
actions d’un utilisateur (contenu cliqué, coché, visité,
etc.), de la place de l’élément dans le document, etc. ;

On va pouvoir utiliser les pseudo éléments qui vont


nous permettre de n’appliquer des styles qu’à
certaines parties des éléments..
Attributs « class » et « id »
Synopsis Priorites
Ces deux attributs sont particuliers en HTML L’ordre de priorité d’application des
puisqu’ils n’ont pas été créés pour préciser le styles en CSS est le suivant (du plus
fonctionnement d’un élément HTML en particulier prioritaire ou moins prioritaire) :
(ce qui est normalement le rôle de tout attribut 1. Les styles liés à un sélecteur #id ;
HTML) mais vont être principalement utilisés
pour cibler certains éléments HTML et leur 2. Les styles liés à un sélecteur .class.
appliquer des styles en CSS.
3. Les styles liés à un sélecteur
Les attributs HTML class et id sont des attributs élément ;
dits globaux car on va pouvoir les ajouter dans la
balise ouvrante de n’importe quel élément HTML.

Caracterisques
Les valeurs indiquées pour les attributs ne doivent
contenir ni caractères spéciaux ni espaces et
commencer par une lettre. En pratique, on
essaiera d’attribuer des valeurs qui font sens à
nos différents attributs.
Notez déjà que chaque id doit avoir une valeur
propre ou unique dans une page. En revanche, on
va pouvoir attribuer la même valeur à plusieurs
attributs class différents.
SASS

Sass est un préprocesseur CSS. Un préprocesseur est un


Synopsis programme qui procède à des transformations sur un code
source avant l’étape de traduction proprement dite
(compilation dans le cas de Sass ou interprétation pour
d’autres types de préprocesseur).

Sass permet en quelques sortes “d’étendre” les possibilités du CSS


classique en nous permettant d’utiliser des variables, des règles imbriquées,
des mixins, des fonctions, etc. Nous allons voir dans la suite de ce cours en
quoi ces éléments vont nous aider à créer un meilleur CSS, plus intuitif et
mieux organisé.

La structure d’un fichier SCSS va ressembler à celle de nos fichiers CSS


classiques : nous allons utiliser des déclarations pour indiquer quels styles
doivent être appliqués à quels éléments. Cependant, nous allons également
pouvoir utiliser des fonctionnalités propres à SASS pour nous permettre
d’avoir un code plus clair et plus facilement maintenable, comme par
exemple l’imbrication de sélecteurs ou l’héritage de règles CSS.
Syntaxes SASS (sass/scss)

concept
Avant d’utiliser Sass à proprement parler, vous devez savoir
que SASS supporte deux syntaxes différentes. Ces deux
syntaxes sont représentées par deux extensions de fichiers
différentes : les extensions .scss et .sass:

✓ La syntaxe liée à l’extension .sass, qu’on appelle encore


“syntaxe indenté”, est la syntaxe originelle de Sass. Cette
syntaxe utilise notamment l’indentation à la place des
accolades pour spécifier la structure du document.

✓ La syntaxe liée à l’extension .scss est un sur-ensemble


du CSS, ce qui signifie que tout code CSS valide est
également reconnu et valide en SCSS. Cela rend cette
syntaxe plus simple d’utilisation que la précédente, et c’est
donc sur celle-ci que ce cours sera basé.
SASS
Les variables
✓ Une variable Sass est un conteneur pour une valeur. L’idée est de lier un nom à une valeur puis d’utiliser ensuite ce nom à la place de la
valeur dans le code. Le nom utilisé sera ensuite converti automatiquement en la valeur à laquelle il est lié.

✓ Les variables Sass sont très simple d’utilisation : il suffit d’utiliser un signe $ (dollar) suivi d’un nom pour déclarer (c’est-à-dire créer) une
variable et d’affecter une valeur à ce nom en séparant le nom de la valeur par le signe : (deux-points).

✓ Sass met à notre disposition le drapeau !default qui permet de réaliser cela. En effet, ce drapeau permet d’indiquer qu’une valeur doit
être affectée à une variable uniquement si cette variable n’est pas définie ou si sa valeur est null.

✓ La “portée” des variables définit l’espace dans lequel les variables vont être accessibles. Les variables SASS peuvent avoir une portée
soit globale, soit locale.

✓ Les variables déclarées en dehors des accolades (dans les fichiers .scss) sont appelées variables globales. Les variables globales sont
disponibles (utilisables) n’importe où après leur déclaration, même dans une autre feuille de style.

✓ Les variables déclarées dans des blocs (les accolades dans les fichiers .scss) sont généralement locales et ne sont accessibles que
dans le bloc où elles ont été déclarées.

✓ le drapeau SASS !global qui permet d’indiquer qu’une variable doit être considérée comme globale quelque soit l’endroit où elle a été
déclarée.

.
SASS
Les fontions
✓ Une fonction est un bloc de code contenant une suite d’instructions
cohérentes et dont le rôle est d’effectuer une tâche précise.

✓ L’idée de base d’une fonction est d’effectuer des calculs ou opérations


dans son corps et de renvoyer une valeur en résultat. Généralement,
les calculs vont être faits en fonction de certaines données qu’on va
devoir passer à la fonction pour qu’elle fonctionne. On appelle ces
données des arguments.

✓ Il existe deux grands moyens d’utiliser les fonctions avec Sass : on


peut soit utiliser des fonctions Sass prédéfinies ou “prêtes à l’emploi”,
soit créer nos propres fonctions.

✓ En programmation, les fonctions servent généralement deux objectifs :

✓ Gagner du temps de développement / simplifier nos scripts ;

✓ Masquer la complexité de certaines opérations.

✓ le drapeau SASS !global qui permet d’indiquer qu’une variable doit


être considérée comme globale quelque soit l’endroit où elle a été
déclarée. .
SASS
Les imbrications
✓ L’imbrication et donc la hiérarchisation de la structure d’une page est
l’un des principes fondamentaux du HTML.

✓ Le CSS, en contrepartie, n’offre toujours pas à ce jour de moyen


d’imbriquer les sélecteurs CSS de la même façon qu’on imbrique les
éléments HTML les uns dans les autres.

✓ Sass propose cette fonctionnalité. Cela permet une meilleure


organisation et lisibilité du code CSS dans son ensemble.

✓ Le sélecteur parent & est un sélecteur spécial inventé par Sass qui
est utilisé dans les sélecteurs imbriqués pour faire référence au
sélecteur extérieur.

✓ Ce sélecteur peut être utile si on souhaite réutiliser le sélecteur


externe de manière plus complexe, comme par exemple pour ajouter
une pseudo-classe ou pour ajouter un sélecteur avant le parent.

.
SASS
L’heritage
✓ Sass nous permet à travers une règle @extend de mettre en place
un système d’héritage des styles d’un sélecteur à un autre.

✓ Concrètement, nous allons pouvoir définir un ensemble de propriétés


CSS qu’on va lier à un sélecteur puis utiliser @extend pour partager
cet cet ensemble de propriétés avec d’autres sélecteurs.

✓ Sass propose cette fonctionnalité. Cela permet une meilleure


organisation et lisibilité du code CSS dans son ensemble.

✓ Le sélecteur % permet de créer un ensemble de règles qui


n’apparaitront dans la sortie CSS (dans le rendu final). Cela permet
donc de créer des ensembles de règles qu’on va ensuite pouvoir
utiliser ou pas et permet donc d’avoir un fichier de style beaucoup
plus clair et concis.

.
SASS
Mixins/boucles/conditions/import
✓ Les mixins Sass nous permettent de créer des groupes de déclarations CSS en vue de
les réutiliser plus tard dans notre code.

✓ On va créer un mixant Sass avec la règle @mixin. Il va falloir donner un nom à chacun
de nos mixins pour pouvoir s’ne resservir plus tard. Ensuite, on va inclure nos mixins
dans n’importe quelle déclaration CSS grâce à la règle @include.

✓ Sass met à notre disposition quatre règles @ nous permettant de générer des structures
de contrôle qui vont se manifester soit sous forme de conditions (le code ne sera exécuté
que si telle condition est remplie), soit sous forme de boucles (le code sera exécuté un
certain nombre de fois tant qu’une condition de sortie de boucle n’est pas vérifiée).
✓ @if et @else permettent d’exécuter un bloc de code SI (if) une condition est
remplie ou d’exécuter un autre code SINON (else) ;
✓ @each évalue un bloc pour chaque élément d’une liste ou chaque paire d’une
map (le mapping correspond au fait de lier certaines données entre elles) ;
✓ @for évalue un bloc un nombre de fois précisé lors de la création de la règle (le
nombre d’évaluation est connu à l’avance) ;
✓ @while évalue un bloc jusqu’à ce qu’une certaine condition de sortie soit remplie
(le nombre d’évaluation n’est pas connu à l’avance).

✓ Le CSS dispose d’une option d’importation du code à travers la règle @import qui nous
.
permet d’importer des règles dans une feuille de style à partir d’autres fichiers CSS.

✓ Sass s’appuie sur cette règle @import et nous offre une option d’importation
avec @import moins gourmande en termes de ressources puisqu’au lieu de créer une
nouvelle requête HTTP Sass va récupérer le fichier qu’on souhaite importer et le
combiner avec le fichier dans lequel on l’importe afin de n’envoyer au final qu’une seule
feuille de style au navigateur.
30%
Progression

Metier. (Javascript/Typescript/Angular)
Theorie Pratique
Le fonctionnement théorique d’Ionic En pratique Ionic est très simple
n’est pas très compliqué. C’est une d’utilisation pour toutes personnes
jonction subtile entre Angular ayant déjà fait du développement web.
(Javascript) / HTML / CSS et D’autant plus si vous avez déjà
Cordova.. travaillé avec Angular.
Cordova/Capacitor UI/UX
Il permet de crée des applications En effet, pour tout ce qui va être le «
natives mobiles en agissant comme theming » donc faire une jolie
un container qui va permettre d’utiliser application Ionic embarque déjà dans
les fonctions natives des téléphones sa documentation énormément de
(par exemple le GPS, l’accéléromètre, composants.
les fonctions de partage intégré,
l’appareil photo …)
JavaScript

Le JavaScript est un langage de programmation créé en 1995.


Synopsis Le JavaScript est aujourd’hui l’un des langages de
programmation les plus populaires et il fait partie des
langages web dits « standards » avec le HTML et le CSS. Son
évolution est gérée par le groupe ECMA International qui se
charge de publier les standards de ce langage.

Pour définir ce qu’est le JavaScript et le situer par rapport aux autres


langages, et donc pour comprendre les intérêts et usages du JavaScript il
faut savoir que :

Le JavaScript est un langage dynamique ;


Le JavaScript est un langage (principalement) côté client ;
Le JavaScript est un langage interprété ;
Le JavaScript est un langage orienté objet.
JAVASCRIPT
un langage dynamique
✓ Le JavaScript est un langage dynamique, c’est-à-dire un langage qui va nous permettre de générer
du contenu dynamique pour nos pages web.

✓ Un contenu « dynamique » est un contenu qui va se mettre à jour dynamiquement, c’est-à-dire


changer sans qu’on ait besoin de modifier le code manuellement mais plutôt en fonction de
différents facteurs externes.
✓ Le HTML et le CSS forment un premier couple très puissant. Cependant, nous allons être limités si
nous n’utilisons que ces deux langages tout simplement car ce sont des langages qui ne permettent
que de créer des pages « statiques ».

✓ le JavaScript entre en jeu : ce langage va nous permettre de manipuler des contenus HTML ou des
styles CSS et de les modifier en fonction de divers évènements ou variables. Un évènement peut
être par exemple un clic d’un utilisateur à un certain endroit de la page tandis qu’une variable peut
être l’heure de la journée.

.
JAVASCRIPT
Le JavaScript, un
Le JavaScript, un langage orienté JavaScript, API, librairies et framework
un langage (principalement)
langage interprété objet
côté client

Le JavaScript en tant que langage correspond à un ensemble de structures de


On peut encore séparer
codes ou un ensemble d’éléments qu’on va pouvoir utiliser pour implémenter des
Un langage « côté client » ou « les langages selon qu’ils
fonctionnalités sur nos pages web.
client side » est un langage qui puissent être exécutés
va être exécuté dans le directement (on parlera La programmation
Les API et les librairies JavaScript sont construites à partir de ces éléments de
navigateur des utilisateurs qui alors de langages orientée objet est
base du JavaScript et vont nous permettre d’utiliser des structures plus complexes
demandent la page. On peut interprétés) ou qu’il faille un paradigme de
déjà prêtes à l’emploi qui vont in-fine nous permettre de réaliser simplement des
également appeler ces langages les transformer en une programmation qui
opérations qu’il aurait été très difficile de réaliser si on avait dû les coder
des langages « web » puisqu’ils autre forme pour pouvoir se base sur une
entièrement à la main.
sont principalement utilisés dans les exécuter (on parlera abstraction du
un contexte web. le JavaScript alors le langages monde réel pour
une librairie est un ensemble de fichiers qu’on va télécharger et contient un
est un langage principalement compilés). créer des modèles.
ensemble de structures de codes prêtes à l’emploi.
utilisé côté client, mais qui va Plusieurs
également pouvoir s’utiliser côté Le JavaScript est un techniques sont
une API, de l’autre côté, va nous permettre d’utiliser une application qu’on n’a pas
serveur à condition qu’on mette langage interprété. Cela utilisées, provenant
le droit de manipuler directement.
en place un environnement signifie qu’il va pouvoir de paradigmes
favorable (en utilisant Node.js être exécuté directement précédents,
un framework ou « cadre de travail » est relativement similaire dans son but à une
par exemple). sous réserve qu’on comme la
« super librairie ». Les framework vont également nous fournir un ensemble de
possède le logiciel modularité, le
codes tout prêts pour nous faire gagner du temps en développement.
Dans ce cours, nous allons interpréteur. Pas de polymorphisme, ou
La grande différence entre un framework et une librairie réside dans l’inversion du
exclusivement nous concentrer panique ici : tous les l'encapsulation.
contrôle : lorsqu’on télécharge une librairie, on peut l’utiliser comme on le souhaite
sur un usage du JavaScript côté navigateurs connus
en intégrant ses éléments à nos scripts tandis que pour utiliser un framework il
client. possèdent leur
faut respecter son cadre (ses règles).
interpréteur JavaScript.
Les framework JavaScript les plus connus aujourd’hui sont Angular.js et React.js.
Comme Attribut
Directement dans la balise ouvrante d’un Où écrire le
élément HTML ;
code JavaScript ?
Comme Balise
Dans un élément script, au sein d’une
page HTML ;

Comme fichier séparé


Dans un fichier séparé contenant
exclusivement du JavaScript et portant
l’extension .js.

Workflow
En effet résumons ce qu’il se passe dans ce
cas :
Le navigateur commence à analyser (ou à traiter)
le code HTML ;
L’analyseur du navigateur rencontre un
élément script ;
Le contenu JavaScript est demandé et
téléchargé (dans le cas où il se situe dans un
fichier externe) puis exécuté. Durant tout ce
temps, l’analyseur bloque l’affichage du HTML,
ce qui peut dans le cas où le script est long
ralentir significativement le temps d’affichage de
la page ;
Dès que le JavaScript a été exécuté, le contenu
HTML finit d’être analysé et est affiché.
JAVASCRIPT
Variables
✓ Une variable est un conteneur servant à stocker des informations de
manière temporaire, comme une chaine de caractères (un texte) ou un
nombre par exemple.

✓ Le propre d’une variable est de pouvoir varier, c’est-à-dire de pouvoir


stocker différentes valeurs au fil du temps et c’est cette particularité qui
les rend si utiles.

✓ Une variable est donc un conteneur ou un espace de stockage temporaire


qui va pouvoir stocker une valeur. Lorsqu’on stocke une valeur dans une
variable, on dit également qu’on assigne une valeur à une variable.

✓ Pour déclarer une variable en JavaScript, nous allons devoir utiliser le mot
clef var.

✓ Le propre d’une variable et l’intérêt principal de celles-ci est de pouvoir


stocker différentes valeurs.

✓ Pour affecter une nouvelle valeur dans une variable déjà initialisée, on va
se contenter d’utiliser à nouveau l’opérateur d’affectation =.
.
JAVASCRIPT
Structures de controle
✓ On appelle « structure de contrôle » un ensemble d’instructions qui
permet de contrôler l’exécution du code.

✓ Il existe deux grands types de structure de contrôle de base qu’on


retrouve dans la plupart des langages informatiques et notamment en
JavaScript : les structures de contrôle conditionnelles (ou plus simplement
les « conditions ») et les structures de contrôle de boucles (ou plus
simplement les « boucles »).

✓ Les conditions vont nous permettre d’exécuter un certain nombre


d’instructions si et seulement si une certaine condition est vérifiée.
✓ Nous avons accès aux structures conditionnelles suivantes en
JavaScript :
✓ La condition if (si) ;
✓ La condition if… else (si… sinon) ;
✓ La condition if… elseif… else (si… sinon si… sinon)

.
JAVASCRIPT
Structures de controle

✓ Les boucles vont nous permettre d’exécuter un bloc de code en boucle


tant qu’une condition donnée est vérifiée.
✓ Pour rappel, nous pouvons utiliser les boucles suivantes en
JavaScript :
✓ La boucle while ;
✓ La boucle do… while ;
✓ La boucle for ;
✓ La boucle for… in ;
✓ La boucle for… of ;
✓ La boucle for await… of.

.
JAVASCRIPT
Fonction

✓ Une fonction correspond à un bloc de code nommé et réutilisable et dont le but est d’effectuer
une tâche précise.

✓ Le langage JavaScript dispose de nombreuses fonctions que nous pouvons utiliser pour
effectuer différentes tâches. Les fonctions définies dans le langage sont appelées fonctions
prédéfinies ou fonctions prêtes à l’emploi car il nous suffit de les appeler pour nous en servir.

✓ L’intérêt principal des fonction prédéfinies est de nous permettre de réaliser des opérations
complexes de manière très simple : en les appelant, tout simplement.

✓ En plus des nombreuses fonctions JavaScript prédéfinies et immédiatement utilisables, nous


allons pouvoir créer nos propres fonctions en JavaScript lorsque nous voudrons effectuer une
tâche très précise.

✓ Pour pouvoir utiliser une fonction personnalisée, en pratique, il faut déjà la définir. Pour définir
une fonction, on va utiliser le mot clef function suivi du nom que l’on souhaite donner à notre
fonction puis d’un couple de parenthèses.

✓ Les arguments d’une fonction sont des valeurs qu’on va passer à notre fonction afin qu’elle
fonctionne normalement ou pour préciser le comportement qu’elle doit adopter. Certaines
fonctions ne vont pas nécessiter d’arguments, d’autres vont avoir besoin
. d’un argument, d’autres
de deux, etc. De plus, certains arguments vont être obligatoires tandis que d’autres vont être
facultatifs.

✓ Une fonction récursive est une fonction qui va s’appeler elle-même au sein de son code.Tout
comme pour les boucles, les fonctions récursives vont nous permettre d’exécuter une action en
boucle et jusqu’à ce qu’une certaine condition de sortie soit vérifiée.
JAVASCRIPT
POO

✓ Un « paradigme » de programmation est une façon d’approcher la programmation informatique,


c’est-à-dire une façon de voir (ou de construire) son code et ses différents éléments.

✓ Il existe trois paradigmes de programmation particulièrement populaires, c’est-à-dire trois


grandes façons de penser son code :
✓ La programmation procédurale ;
✓ La programmation fonctionnelle ;
✓ La programmation orientée objet.

✓ La programmation orientée objet est une façon de concevoir un code autour du concept d’objets.
Un objet est une entité qui peut être vue comme indépendante et qui va contenir un ensemble
de variables (qu’on va appeler propriétés) et de fonctions (qu’on appellera méthodes). Ces
objets vont pouvoir interagir entre eux.

✓ La plupart des langages supportent aujourd’hui plusieurs paradigmes et le JavaScript, en


particulier, supporte chacun des trois paradigmes principaux cités ci-dessus ce qui signifie qu’on
va pouvoir coder en procédural, en fonctionnel et en orienté objet en JavaScript ;

✓ Les intérêts supposés principaux de développer en orienté objet plutôt qu’en procédural par
exemple sont de permettre une plus grande modularité ou flexibilité du code ainsi qu’une
meilleure lisibilité et une meilleure maintenabilité de celui-ci. .

✓ Nous pouvons créer des objets de 4 manières différentes en JavaScript. On va pouvoir :


✓ Créer un objet littéral ;
✓ Utiliser le constructeur Object() ;
✓ Utiliser une fonction constructeur personnalisée ;
✓ Utiliser la méthode create().
JAVASCRIPT
POO (Classe)
✓ Il existe deux grands types de langages orientés objet : ceux basés sur les classes,
et ceux basés sur les prototypes.Le JavaScript est un langage orienté objet basé sur
la notion de prototypes, mais la plupart des langages supportant l’orienté objet sont
basés sur les classesLa programmation orientée objet.

✓ Le JavaScript est un langage objet basé sur les prototypes. Cela signifie que le
JavaScript ne possède qu’un type d’élément : les objets et que tout objet va pouvoir
partager ses propriétés avec un autre, c’est-à-dire servir de prototype pour de
nouveaux objets. L’héritage en JavaScript se fait en remontant la chaine de
prototypage.

✓ Récemment, le JavaScript a introduit une syntaxe utilisant les classes pour son
modèle objet. Cette syntaxe est copiée sur les langages orientés objets basés sur les
classes et nous permet concrètement de mettre en place l’héritage en JavaScript
plus simplement.Attention:cependant, le JavaScript est toujours un langage orienté
objet à prototypes et, en tâche de fond, il va convertir nos « classes » selon son
modèle prototypes.

✓ En plus de la possibilité d’utiliser l’orienté objet pour créer nos propres objets et nos
propres chaines de prototypage, le JavaScript possède des objets (constructeurs)
.
prédéfinis ou natifs comme Object(), Array(), Function(), String(), Number(), etc.
JAVASCRIPT
Asynchrone (Callback) 1/2
✓ on dit que deux actions sont synchrones lorsqu’elles se déroulent en même temps ou
de manière synchronisée. Au contraire, deux opérations sont asynchrones si elles ne
se déroulent pas en même temps ou ne sont pas synchronisées. En informatique,
on dit que deux opérations sont synchrones lorsque la seconde attend que la
première ait fini son travail pour démarrer.

✓ Au contraire, deux opérations sont qualifiées d’asynchrones en informatique


lorsqu’elles sont indépendantes c’est-à-dire lorsque la deuxième opération n’a pas
besoin d’attendre que la première se termine pour démarrer.

✓ Par défaut, le JavaScript est un langage synchrone, bloquant et qui ne s’exécute que
sur un seul thread. Cela signifie que :

✓ Les différentes opérations vont s’exécuter les unes à la suite des autres (elles
sont synchrones) ;
✓ Chaque nouvelle opération doit attendre que la précédente ait terminé pour
démarrer (l’opération précédente est « bloquante ») ;
✓ Le JavaScript ne peut exécuter qu’une instruction à la fois (il s’exécute sur un
thread, c’est-à-dire un « fil » ou une « tache » ou un « processus » unique).
✓ Pour éviter de bloquer totalement le navigateur et le reste du script, on
aimerait que ce genre d’opérations se déroule de manière asynchrone, c’est-
à-dire en marge du reste du code et qu’ainsi le reste du code ne. soit pas
bloqué.

✓ Le premier outil utilisé en JavaScript pour générer du code asynchrone a été les
fonctions de rappel. En effet, une fonction de rappel ou « callback » en anglais est
une fonction qui va pouvoir être rappelée (« called back ») à un certain moment et /
ou si certaines conditions sont réunies.
JAVASCRIPT
Asynchrone (Promise) 2/2
✓ Utiliser des fonctions de rappel pour générer du code asynchrone fonctionne mais
possède certains défauts. Le principal défaut est qu’on ne peut pas prédire quand notre
fonction de rappel asynchrone aura terminé son exécution, ce qui fait qu’on ne peut pas
prévoir dans quel ordre les différentes fonctions vont s’exécuter.

✓ En 2015, cependant, le JavaScript a intégré un nouvel outil dont l’unique but est la
génération et la gestion du code asynchrone : les promesses avec l’objet
constructeur Promise. C’est à ce jour l’outil le plus récent et le plus puissant fourni par le
JavaScript nous permettant d’utiliser l’asynchrone dans nos scripts (avec la
syntaxe async et await basée sur les promesses et que nous verrons en fin de partie).

✓ Plutôt que d’attacher des fonctions de rappel à nos fonctions pour générer des
comportements asynchrones, nous allons créer ou utiliser des fonctions qui vont renvoyer
des promesses et allons attacher des fonctions de rappel aux promesses. Une opération
asynchrone peut être dans l’un des états suivants :
✓ Opération en cours (non terminée) ;
✓ Opération terminée avec succès (promesse résolue) ;
✓ Opération terminée ou plus exactement stoppée après un échec (promesse
rejetée).

✓ Pour obtenir et exploiter le résultat d’une promesse, on va généralement utiliser la


méthode then() pour le succes et catch() pour l’echec du constructeur. Promise.

✓ Les premières méthodes à connaitre sont les méthodes resolve() et reject() qui vont
nous permettre de créer manuellement des promesses déjà résolues ou rejetées et qui
vont donc être utiles pour démarrer manuellement une chaine de promesses.

✓ En plus de cela, nous allons pouvoir utiliser la méthode all() de Promise qui va prendre
en argument un tableau de promesses et retourner une nouvelle promesse.
JAVASCRIPT
Storage
✓ L’API Web Storage permet de stocker des données sous forme de paires
clefs/valeurs qui doivent obligatoirement être des chaines de caractères dans le
navigateur de vos visiteurs.

✓ Pour stocker des données avec Web Storage, on va pouvoir utiliser les propriétés
(qui sont avant tout des objets) localstorage et sessionstorage. On va utiliser ces
propriétés avec l’objet implicite Window.

✓ La principale différence entre localstorage et sessionstorage est la suivante : dans le


cas où on utilise sessionstorage, les données enregistrées ne vont subsister qu’après
un rechargement de la page courante tandis que si on utilise localstorage les
données vont subsister même après qu’un visiteur ait quitté son navigateur.

✓ Les objets localstorage et sessionstorage vont nous fournir les propriétés et


méthodes suivantes :
✓ setItem() : permet de stocker une paire clef/valeur. Prend une clef et une
valeur en arguments ;
✓ getItem() : permet d’obtenir une valeur liée à une clef. Prend une clef en
argument ;
✓ removeItem() : permet de supprimer une paire clef/valeur. Prend une clef en
argument ;
✓ clear() : permet de supprimer tous les objets de stockage.. Ne prend pas
d’argument ;
✓ key() : permet d’obtenir une clef située à une certaine position. Prend un index
en argument ;
✓ length : permet d’obtenir le nombre de données stockées.
JAVASCRIPT
Les modules JavaScript : import et export
✓ Un module en programmation correspond à un bloc cohérent de code, c’est-à-dire à un
bloc de code qui contient ses propres fonctionnalités fonctionnant ensemble et qui est
séparé du reste du code. Généralement, un module possède son propre fichier.
L’avantage principal des modules est une meilleure séparation qui résulte dans une
meilleure maintenabilité et lisibilité du code.

✓ un module est un fichier JavaScript qui va exporter certains de ses éléments : fonctions,
objets, variables, etc.

✓ Les éléments d’un module qui peuvent être exportés doivent être précédés de la
déclaration export. Pour importer ensuite ces éléments dans d’autres modules, nous
allons devoir utiliser la déclaration import suivi nom de l’élément à importer suivi du mot
clef from suivi du chemin relatif du fichier importé par rapport au fichier qui l’importe.

✓ Les modules permettent :

✓ Une meilleure maintenabilité du code : par définition un bon module doit être
autonome et on doit pouvoir le modifier sans avoir à modifier d’autres scripts ;
✓ D’éviter de polluer les autres scripts : les modules possèdent leur propre espace
de portée globale et les autres scripts n’y ont pas accès par défaut. Cela permet
donc de limiter le risque de pollution (le fait d’avoir de nombreuses variables
.
différentes dans l’espace global du script et de courir le risque que certaines
possèdent le même nom) ;
✓ Une meilleure réutilisation du code : comme les modules sont indépendants et
autonomes (s’ils sont créés correctement), on peut les réutiliser dans différents
projets, ce qui nous fait gagner beaucoup de temps.
JAVASCRIPT
JSON
✓ JSON (JavaScript Object Notation) est un format d’échange de données léger et donc
performant. C’est un format de texte indépendant de tout langage mais utilisant des
conventions familières aux programmeurs de la famille de langages C (incluant
JavaScript et Python notamment).
✓ JSON est une syntaxe pour sérialiser* des objets, tableaux, nombres, chaînes de
caractères, booléens et valeurs null. Elle est basée sur la syntaxe de JavaScript mais en
est distincte : du code JavaScript n’est pas nécessairement du JSON, et du JSON n’est
pas nécessairement du JavaScript.

✓ JSON peut représenter des nombres, des booléens, des chaînes, la valeur null, des
tableaux (séquences de valeurs ordonnées) et des objets constitués de ces valeurs (ou
d’autres tableaux et objets).

✓ En JSON, ces deux structures se retrouvent sous les formes suivantes :


✓ Un objet est un ensemble non ordonnées de paires nom : valeur. Un objet
commence avec { et se termine avec }. Les noms sont suivis de : et les
paires nom : valeur sont séparées par des ,
✓ Un tableau est une collection ordonnée de valeurs. Un tableau commence
avec [ et se termine avec ]. Les valeurs sont séparées par des ,

✓ En JavaScript, on possède ainsi un objet JSON. L’objet JavaScript global JSON possède
deux méthodes pour interpréter du JSON et convertir des valeurs. en JSON. : les
méthodes parse() et stringify().

✓ JSON.stringify() convertit des objets JavaScript en JSON tandis que JSON.parse() fait
l’opération inverse et convertit du JSON en objet JavaScript.
ECMAScript ES7

ECMAScript est une spécification des scripts. ECMAScript est


Synopsis un ensemble des normes qui concernent les langages des
script. Il y a plusieurs langages de scripting, notamment,
javascript. Ainsi Javascript et les autres langages de script
(comme TypeScript) doivent obéir à ces normes et
spécifications dans chaque version.

A chaque fois que les langages de scripting évoluent, on a une nouvelle


version de ECMAScript ou ES. Aujourd’hui, on parlera de ES7 et les versions
qui la suivent.

La première version est sortie en juin 1997. Et la version actuelle(ES7) est


présente dépuis Juin 2016.
ES7
Variables et paramètres dans ES7
✓ let : est un mot clé permettant de déclarer une variable dans ES6. Alors
c’est quoi la nouveauté ? On peut déclarer une variable en utilisant
simplement le mot clé “var”.

✓ Const: Permet de définir la valeur d’une variable ReadOnly. ReadOnly


signifie que la valeur de la variable ne change pas .

✓ Valeurs par défaut:Pour passer une valeur par défaut dans une fonction
JavaScript, il suffit d’initialiser sa valeur comme suivant:

✓ Paramètre Rest: ça permet de travailler avec les fonctions qui prennent


un nombre inconnu ou variable des arguments. Un exemple très connu
est la fonction Sum ou Sommation qui permet d’ajouter les valeurs des
paramètres et donner leur sommation comme résultat.

.
✓ Template: Template est un moyen de créer une template de string. ça
permet d’avoir une structure d’une chaîne de caractères réutilisable.
attention il faut utiliser la back tick ( ` ) et non pas la simple apostrophe ( ‘ ).
dans l’exemple suivant on passe le paramètre de la fonction à la template
TypeScript

TypeScript est un langage transcompilé en JavaScript. C.a.d


Synopsis après écrire un code en TypeScript un compilateur va
convertir le code en JavaScript ainsi tous les navigateurs
peuvent comprendre et interpréter ce code. Finalement, le
gain que nous apporte TypeScript est que nous sommes
entrain d'écrire du JavaScript avec un Syntaxe orienté objet.

A chaque fois que les langages de scripting évoluent, on a une nouvelle


version de ECMAScript ou ES. Aujourd’hui, on parlera de ES7 et les versions
qui la suivent.

La première version est sortie en juin 1997. Et la version actuelle(ES7) est


présente dépuis Juin 2016.
TP
Nodes IDE Android SDK Ionic

1 2 3 3

Node version Notepad++ Java JDK/JRE Ionic (cli)


manager(NVM)
Visual Studio Code Config Path Ionic tabs
Cmder
ou Android Studio Build Android APK
Yarn
Atom API latest Installer l’apk sur mobile
Nodejs

Installer Installer Installer/Configurer Installer/Build


Merci !!!
http://www.uy1.uninet.cm/