JavaScript - Stephane Gobron

JavaScript
Chapitre 1: fondamentaux
2016
MAS‐RAD –
Master of Advanced Studies, Rapid Application Development
Stéphane GOBRON
HE‐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


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.
Définition Wikipédia
http://fr.wikipedia.org/wiki/JavaScript
C’est quoi?
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 client
Avantages
• rend les sites Web dynamiques
• facilité au développement p/r à la POO classique
Introduction
Coté client
Différence entre coté client (JS) et coté serveur (PHP)
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
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

HTML et JS ne sont que du texte

On peut utiliser le Bloc‐notes de MS‐
Windows ou Notepad++
http://notepad‐plus‐plus.org/fr/
Edition
Notepad++, mais il y a aussi Sublime ou Atom
Introduction
JS vs. Java

Ne surtout pas confondre!!!

A noter : Java est compilé mais sous forme de bitcode, donc dédié à un processor software
JS
Java
Code liée à une page HTML Application Java appelée et qui est interprété lors de applet et dont le code source a l’exécution
préalablement été compilé avant l’exécution
Utilisation assez limitée, Un des langages les plus « petite applications »
avancés et donc complet
Sources visibles
Sources cachées
Utilisation du terme applet
« applet JavaScript » « applet Java » ou « applet » utilisation abusive…
utilisation correcte…
… mais c’est pourtant si … mais ce n’est que rarement souvent de « petites des « petites applications »!
applications »!
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
Pourquoi s’intéresser au JS?
“JavaScript skills are the key to HTML5…”
David Powers –php ‘master’
“… and basically HTML5 is the future of the web ”!
Premiers pas
HTML «Hello World !»

Tout de suite dans le vif du sujet : voila le minimum
<html>
<body>
Hello World !
</body>
</html>
Code HTLM

On ne peut juste pas moins! 

Mais ce n’est pas très… « propre »
Résultat du code HTLM sous ie
Code HTLM dans l’éditeur
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
html
DOM de cette WebPage
body
head
<!doctype html>
<html>
<head>
<title>Un exemple en HTML5</title>
title
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/eg02-01.css">
</head>
text
h1
p
p
text
img src,alt
text
<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>
p
ul
li
li
text
text
text
a href
text
Premiers pas
Encodage des caractères

Charset iso‐8859‐1, iso‐
8859‐15, ou utf‐8?
Encodage sous Notepad++
Premiers pas
Se connaître

Déterminer votre profil
A. Prise d’initiative
B. Intérêt pour les énigmes
C. 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
A.
B.
C.
6
5
4
3
2
6
5
4
3
2
6
5
4
3
2
1
1
1
Premiers pas
Définir un profil

Déterminer votre profil
A. Prise d’initiative
B. Intérêt pour les énigmes
C. Qualités relationnelles
Procédure
1. 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
A. B. C.
6 6 6
5
5
5
4 4 4
3
3
3
2 2 2
1
1
1
1. Définition
et initialisation
A. B. C.
6 6 6
5
5
5
4 4 4
3
3
3
2 2 2
1
1
1
2. Changement
d’état
A. B. C.
6 6 6
5
5
5
4 4 4
3
3
3
2 2 2
1
1
1
3.1 Réflexion 1
A. B. C.
6 6 6
5
5
5
4 4 4
3
3
3
2 2 2
1
1
1
3.2 Réflexion 2
A. B. C.
6 6 6
5
5
5
4 4 4
3
3
3
2
2
2
1
1
1
3.3 Réflexion 3
A. B. C.
6 6 6
5
5
5
4 4 4
3
3
3
2
2
2
1
1
1
4. Etat final
Premiers pas
Se connaître

Tour de table!

Brève présentation personnelle
Premiers pas
Se connaître

Votre profil technique
A. Implémentation
B. Art‐design, photoshop…
C. Software engineering
A.
B.
C.
6
5
4
3
2
6
5
4
3
2
6
5
4
3
2
1
1
1
Fondamentaux
Intégration



Squelette
Endroit
Externe
La bonne intégration
Intégration
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 */
• Définition du squelette
< script language=“javascript”>
...
Instructions javascript
...
</ script >
=> Ce squelette peut être ajouté à volonté

Attention en HTML :
 <!‐‐ bla bla bla ‐‐>

• Exemple : <script>
document.write ( "Hello world" ) ;
</ script >
Intégration
A quel endroit?
1ère solution
 Directement inclus
dans le code HTML

Placement d’une
section où on veut
dans le code

Généralement : définition de nouvelles
fonctions 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>
monSiteWeb.html
<head>
<script src=“mesScripts.js”></script >
</head>
<body>
<script >
maNouvelleFonction1();
maNouvelleFonction2();
</script>
</body >
</html >
mesScripts.js
function maNouvelleFonction1()
{…}
function maNouvelleFonction2()
{…}
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!
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
http://getfirebug.com/javascript
… un gros pb…
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 conseils
Prochain cours :
Instructions de base






Variables
Opérateurs
Fonction, principe
Evénements
Tableaux
Itérations
Les briques de base de JS