Embed Size (px)
Citation preview
2016
JavaScriptChapitre 1: fondamentaux
MAS‐RAD –Master of Advanced Studies, Rapid Application DevelopmentStéphane GOBRONHE‐Arc – hes.so
JavaScript
6 chapitres
Description du cours Fondamentaux Instructions de base Structure objet Instructions avancées Encore plus loin
Une utilisation à présent relativement stable sur toutes les plateformes
JavaScript
Fondamentaux
Sections Introduction HTML5 et Premiers pas Intégration Développement
Ce qui doit avant tout être noté
Fondamentaux
Introduction
C’est quoi? Ça sert à quoi? D’où ça vient? Coté client Problème résolu Prérequis Edition JS vs. Java
C’est quoi JS?
Introduction
C’est quoi?
Définition JS créé en 1995
BUT: dynamiser les site Web
JavaScript ‐‐abrégé JS‐‐est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi côté serveur.
C'est un langage orienté objet à prototype, c'est‐à‐dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes.
Ces objets sont chacun équipés de constructeurs permettant de créer leurs propriétés, et notamment une propriété de prototypage qui permet d'en créer des objets héritiers personnalisés.
JavaScript ‐‐abrégé JS‐‐est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi côté serveur.
C'est un langage orienté objet à prototype, c'est‐à‐dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes.
Ces objets sont chacun équipés de constructeurs permettant de créer leurs propriétés, et notamment une propriété de prototypage qui permet d'en créer des objets héritiers personnalisés.
http://fr.w
ikiped
ia.org/w
iki/Jav
aScript
Définition Wikipédia
Introduction
Ça sert à quoi?
Permet de créer des pages dynamique :
modification de l’apparence d’une page
déplacement d’objets, de calques
vérification du contenu de formulaire
« roolovers » et d’autres fonct.
A ce jour relativement sous‐exploité
Introduction
D’où ça vient?
• JavaScript : ECMA script
• Initialement DHTML, fait parti intégrante de (x)HTML
• Un langage Objet issu de C++
• Beaucoup moins riche que les langages de haute niveau comme C++ et Java
Introduction
Coté client
Script essentiellement client
interprété sur le navigateur client
pas sur le serveur –même si théoriquement possible
/!\ Différent de PHP Coté serveur
Concurrent de VBScript
Script coté client
Contraintes• pas de droit d’écriture• le code est visible en clair par le clientAvantages• rend les sites Web dynamiques• facilité au développement p/r à la POO classique
Script coté client
Contraintes• pas de droit d’écriture• le code est visible en clair par le clientAvantages• rend les sites Web dynamiques• facilité au développement p/r à la POO classique
Introduction
Différence entre coté client (JS) et coté serveur (PHP)Différence entre coté client (JS) et coté serveur (PHP)Coté client
Introduction
Problème « résolu »
Historiquement, implémentations et effets variables selon navigateurs et non totalement portable
A présent théoriquement stable sur tous les navigateurs
/!\ vous devrez toujours tester les fonctionnalité sur « tous » les navigateurs
/!\ vous devrez toujours tester les fonctionnalité sur « tous » les navigateurs
Introduction
Prérequis
« Il est fondamental de connaître HTML, balises, tableau, et si possible CSS »
… vous ne maîtrisez pas tout à fait ces outils?
Introduction
Edition
HTML et JS ne sont que du texte
On peut utiliser le Bloc‐notes de MS‐Windows ou Notepad++
Notepad++, mais il y a aussi Sublime ou Atom
http://no
tepa
d‐plus‐plus.org/fr/
Introduction
JS JavaCode liée à une page HTML et qui est interprété lors de l’exécution
Application Java appelée applet et dont le code source a préalablement été compilé avant l’exécution
Utilisation assez limitée, « petite applications »
Un des langages les plus avancés et donc complet
Sources visibles Sources cachées
Utilisation du terme applet« applet JavaScript » utilisation abusive…
« applet Java » ou « applet » utilisation correcte…
… mais c’est pourtant si souvent de « petites applications »!
… mais ce n’est que rarement des « petites applications »!
JS vs. Java
Ne surtout pas confondre!!!
A noter : Java est compilé mais sous forme de bitcode, donc dédié à un processor software
Récapitulatif des différences
Fondamentaux
Premiers pas
HTML « Hello world » HTML5 « Hello world » 1er exemple « utile » Environnement et style Encodage des caractères JS « Hello world »
HTML5 : «The future is landing »
Premiers pas
HTML5 et JS
“… and basically HTML5 is the future of the web ”!
Pourquoi s’intéresser au JS?
“JavaScript skills are the key to HTML5…”David Powers –php ‘master’
Premiers pas
HTML «Hello World !»
Tout de suite dans le vif du sujet : voila le minimum
On ne peut juste pas moins!
Mais ce n’est pas très… « propre »
<html><body>
Hello World !</body>
</html>
Code HTLMCode HTLM dans l’éditeur
Résultat du code HTLM sous ie
Premiers pas
HTML5 «Hello World !»
La version minimum … « propre » !
<!doctype html>
<html><head>
<meta charset="utf-8"></head>
<body><p>Hello World !</p>
</body></html>
Premiers pas
JS «Hello World !»
Le code JS ne peut exister qu’au sein d’une page HTML
<!doctype html>
<html><head>
<meta charset="utf-8"></head>
<body><p id="myID"></p><script>
document.getElementById( "myID" ).innerHTML="Hello world!";</script>
</body></html>
Premiers pas
1er exemple « utile »
Dans ce cours nous utiliserons html 5
Différence avec la norme html 4.01
nouvelle nomenclature en gras –défini que vous travaillez réellement en html 5 !
<!doctype html><html>
<head><title>Un exemple simple en HTML5</title><meta charset="utf-8"><link rel="stylesheet" href="CSS/eg02-01.css">
</head>
<body><h1>Un exemple simple en HTML5</h1><p><img src="Figures/eg00.png" alt="Une image"></p><p>Ceci est un texte dans un paragraphe.</p><ul>
<li>Ceci est un texte dans un 1er point ;</li><li>Ceci est un texte dans un 2ème point.</li>
</ul><p>
Lien :<a href="http/www.stephane-gobron.net">
Stef’s site</a>
</p></body>
</html>
Premiers pas
DOM de cette WebPage
<!doctype html><html>
<head><title>Un exemple en HTML5</title><meta charset="utf-8"><link rel="stylesheet" href="CSS/eg02-01.css">
</head>
<body><h1>Un exemple simple en HTML5</h1><p><img src="Figures/eg00.png" alt="Une image"></p><p>Ceci est un texte dans un paragraphe.</p><ul>
<li>Ceci est un texte dans un 1er point;</li><li>Ceci est un texte dans un 2ème point.</li>
</ul><p>Lien : <a href="http/www.stephane-gobron.net">Stef’s site</a></p>
</body></html>
htmlhtml
headhead bodybody
titletitle
text
h1h1
text
pp
img src,altimg src,alt text
pp ulul
text
lili
text
lili
pp
text
a hrefa hreftext
Premiers pas
Encodage des caractères
Charset iso‐8859‐1, iso‐8859‐15, ou utf‐8?
Encodage sous Notepad++
Premiers pas
Se connaître
1 1 1
2 2 23 34 4
556
3456 6
B.A. C. Déterminer votre profil
A. Prise d’initiativeB. Intérêt pour les énigmesC. Qualités relationnelles
/!\ A,B et C abstraits Sans référentiel : exercice
difficile, voire impossible
Pour vous aider : proposition de méthode, de procédure
Premiers pas
Définir un profil
1 1 12 2 23 34 4
556
3456 6B.A. C.
1 1 12 2 23 34 4
556
3456 6B.A. C.
1 1 12 2 23 34 4
556
3456 6B.A. C.
1 1 12 2 23 34 4
556
3456 6B.A. C.
1 1 12 2 23 34 4
556
3456 6B.A. C.
1 1 12 2 23 34 4
556
3456 6B.A. C.
1 1 12 2 23 34 4
556
3456 6B.A. C.
1 1 12 2 233 34 4
556
3456 6B.A. C.
1 1 122 2 23 34 4
556
3456 6B.A. C.
1 1 12 2 23 34 4
556
34556 6B.A. C.
1 1 12 2 23 34 4
556
3456 6B.A. C.
4. Etat final
1. Définitionet initialisation
2. Changementd’état
3.1 Réflexion 1
3.2 Réflexion 2 3.3 Réflexion 3
Déterminer votre profil
A. Prise d’initiativeB. Intérêt pour les énigmesC. Qualités relationnelles
Procédure1. Partez de la valeur « 3 » pour chaque critère
2. Sans comparer ajoutez « 1 » au critère que vous aimez le plus
3. Comparez les 2 à 2, le meilleur gagne 1 point, l’autre perd 1 point
4. La somme finale est 10
Premiers pas
Se connaître
Tour de table!
Brève présentation personnelle
Premiers pas
Se connaître
1 1 1
2 2 23 34 4
556
3456 6
B.A. C. Votre profil technique
A. ImplémentationB. Art‐design, photoshop…C. Software engineering
Fondamentaux
Intégration
Squelette Endroit Externe
La bonne intégration
< script language=“javascript”>...Instructions javascript...
</ script >
Squelette d’un code
Inclusion de code JavaScript dans HTML
Il n’est pas obligatoire de finir par un « ; »
c’est juste une question de bon sens!
Les commentaires sont comme en C++:
// blablabla /* blablabla */
Attention en HTML : <!‐‐ bla bla bla ‐‐>
<script>document.write ( "Hello world" ) ;
</ script >
=> Ce squelette peut être ajouté à volonté
• Exemple :
• Définition du squelette
Intégration
Intégration
A quel endroit?
1ère solutionDirectement inclusdans le code HTML
Placement d’unesection où on veutdans le code
Généralement : définition de nouvellesfonctions dans <head>
<html><head>
<script>function maNouvelleFonction1(){ … }function maNouvelleFonction2(){ … }
</script ></head>
<body><script >
maNouvelleFonction1();maNouvelleFonction2();
</script></body >
</html >
Intégration
Fichier externe
2ième solution Dans un fichier externe
Permet d’ alléger, de désencombrer le fichier HTML
L’extention est « .js »
<html><head>
<script src=“mesScripts.js”></script ></head>
<body><script >
maNouvelleFonction1();maNouvelleFonction2();
</script></body >
</html >function maNouvelleFonction1(){ … }
function maNouvelleFonction2(){ … }
mesScripts.jsmesScripts.js
monSiteWeb.htmlmonSiteWeb.html
Développement
Invisible « Hello World » Console Web Résultat console web Débogueur
Hello world? « 42 » is the answer…
Développement
Invisible « Hello World »
De multiple solutions pour un simple « hello world! »
Passons en revu ces tous petits codes
Hello World !
Interaction!
Hello World !
Interaction!
Développement
Console Web
E.g. sur FireFox en FR Outils > Développeur
Web > Console web
ou
Ctrl+Maj+K
E.g. sur Chrome en EN Select Tools > Web
Developer > Web Console
Développement
Résultat console web
Développement
Débogueur
… un gros pb…
http://ge
tfire
bug.co
m/ja
vascrip
t
Sous Mozilla Firefox
Sept manières pour un simple « Hello world » Eg_01‐01.html : version directe « sale » Eg_01‐02.html : version directe « propre » Eg_01‐03.html : version console Eg_01‐04.html : avec la fonction « write » de l’objet « document » Eg_01‐05.html : en cherchant et en remplaçant dans le DOM Eg_01‐06.html : en définissant une nouvelle fonction Eg_01‐07.html : en définissant une fonction dans un fichier externe Eg_01‐08.html : avec l'utilisation de 'var' ! Eg_01‐09.html : avec l'utilisation de 'let' ! Option super top Eg_01‐10.html : avec une classe! ;‐)
Merci! Questions?Remerciement à Aïcha Rizzotti pour ses conseilsProchain cours :
Instructions de base Variables Opérateurs Fonction, principe Evénements Tableaux Itérations
Les briques de base de JS
