JavaScript Chapitre 1: fondamentaux - MAS RAD

La page est créée Françoise Chauvin

Divers

Français

Like
Partager
Intégrer
Plein écran
Diapositives
Télécharger HTML
Télécharger PDF
Abus

←

CONTINUER À LIRE

→

Transcription du contenu de la page

Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous

JavaScript Chapitre 1: fondamentaux - MAS RAD

JavaScript
Chapitre 1: fondamentaux
MAS‐RAD –
Master of Advanced Studies, Rapid Application Development
Stéphane GOBRON
HE‐Arc – hes.so

                                                            2016

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?
                         JavaScript ‐‐abrégé JS‐‐est un langage de
                         programmation de scripts principalement utilisé

                                                                            http://fr.wikipedia.org/wiki/JavaScript
   Définition           dans les pages web interactives mais aussi côté
   JS créé en 1995      serveur.
                             C'est un langage orienté objet à prototype,
   BUT: dynamiser les   c'est‐à‐dire que les bases du langage et ses
    site Web             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

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                     Script coté client
    navigateur client
                             Contraintes
   pas sur le serveur –     • pas de droit d’écriture
    même si                  • le code est visible en clair par le client
    théoriquement possible   Avantages
                             • rend les sites Web dynamiques
   /!\ Différent de PHP     • facilité au développement p/r à la POO classique
   Coté serveur

   Concurrent de VBScript

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           /!\ vous devrez toujours tester les
    totalement portable
                             fonctionnalité sur « tous » les navigateurs
   A présent
    théoriquement stable
    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++

                                                                         http://notepad‐plus‐plus.org/fr/
                          Notepad++, mais il y a aussi Sublime ou Atom

Introduction

                                            JS                             Java
JS vs. Java
                             Code liée à une page HTML       Application Java appelée
   Ne surtout pas           et qui est interprété lors de   applet et dont le code source a
    confondre!!!             l’exécution                     préalablement été compilé
                                                             avant l’exécution
   A noter : Java est       Utilisation assez limitée,      Un des langages les plus
    compilé mais sous        « petite applications »         avancés et donc complet
    forme de bitcode, donc
                             Sources visibles                Sources cachées
    dédié à un processor
    software
                                              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 !»
                                
                                  Hello World !
   Tout de suite dans le
                                
    vif du sujet : voila le
                              
    minimum
                              Code HTLM
   On ne peut juste pas                                      Code HTLM dans l’éditeur
                              Résultat du code HTLM sous ie
    moins! 

   Mais ce n’est pas très…
    « propre »

Premiers pas

HTML5 «Hello World !»
                           
   La version minimum …
                             
    « propre » !
                               
                               Hello World !

Premiers pas

JS «Hello World !»
                         
   Le code JS ne peut
                           
    exister qu’au sein
                             
    d’une page HTML
                           
                               document.getElementById( "myID" ).innerHTML="Hello world!";

Premiers pas
                           
1er exemple « utile »      
                             
                                Un exemple simple en HTML5
   Dans ce cours nous          
    utiliserons html 5          
                             
 Différence avec la          
  norme html 4.01                Un exemple simple en HTML5
 nouvelle nomenclature          
                                 Ceci est un texte dans un paragraphe.
  en gras –défini que            
  vous travaillez                      Ceci est un texte dans un 1er point ;
  réellement en html 5 !               Ceci est un texte dans un 2ème point.
                                 
                                       Lien :
                                       
                                          Stef’s site

Premiers pas

                                                                        html
DOM de cette WebPage

                                                  head                             body

      Un exemple en HTML5           title   h1                p     p            ul                 p
      
                                                   text    text     img src,alt   text    li          li    text       a href
   
      Un exemple simple en HTML5
                                      text        text               text
      Ceci est un texte dans un paragraphe.
      
            Ceci est un texte dans un 1er point;
            Ceci est un texte dans un 2ème point.
      
      Lien : Stef’s site

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.   B.   C.
A. Prise d’initiative              6    6    6
B. Intérêt pour les énigmes
C. Qualités relationnelles         5    5    5


     /!\ A,B et C abstraits
     Sans référentiel : exercice
                                   4    4    4
     difficile, voire impossible
                                   3    3    3
    Pour vous aider :
     proposition de méthode,       2    2    2
     de procédure
                                   1    1    1

Premiers pas
                                    A. B. C.            A. B. C.         A. B. C.
    Définir un profil              6 6 6                6 6 6            6 6 6
    Déterminer votre profil       5      5     5       5    5   5       5    5    5
                                   4 4 4                4 4 4            4 4 4
A. Prise d’initiative              3      3     3       3    3   3       3    3    3
B. Intérêt pour les énigmes        2 2 2                2 2 2            2 2 2
C. Qualités relationnelles         1      1     1       1    1   1       1    1    1
                                  1. Définition      2. Changement     3.1 Réflexion 1
Procédure                        et initialisation        d’état
1. Partez de la valeur « 3 »
   pour chaque critère             A. B. C.            A. B. C.         A. B. C.
2. Sans comparer ajoutez « 1       6 6 6               6 6 6            6 6 6
   » au critère que vous aimez     5    5    5         5    5    5      5    5     5
   le plus                         4 4 4               4 4 4            4 4 4
3. Comparez les 2 à 2, le          3    3    3         3    3    3      3    3     3
   meilleur gagne 1 point,         2 2 2               2    2    2      2    2     2
   l’autre perd 1 point            1    1    1         1    1    1      1    1     1
4. La somme finale est 10
                                 3.2 Réflexion 2     3.3 Réflexion 3    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.   B.   C.
A. Implémentation             6    6    6
B. Art‐design, photoshop…
C. Software engineering       5    5    5
                              4    4    4
                              3    3    3
                              2    2    2
                              1    1    1

Fondamentaux
Intégration

   Squelette
   Endroit
   Externe

                La bonne intégration

Intégration

Squelette d’un code          • Définition du squelette

   Inclusion de code          < script language=“javascript”>
    JavaScript dans HTML              ...
                                      Instructions javascript
 Il n’est pas obligatoire            ...
  de finir par un « ; »        
 c’est juste une
  question de bon sens!
                             => Ce squelette peut être ajouté à volonté
 Les commentaires
  sont comme en C++:         • Exemple :
 // blablabla
 /* blablabla */              
                                    document.write ( "Hello world" ) ;
 Attention en HTML :          


Intégration

A quel endroit?               
                                 
1ère solution                       
 Directement inclus                    function maNouvelleFonction1()
dans le code HTML                       {…}
                                        function maNouvelleFonction2()
                                        {…}
   Placement d’une                 
    section où on veut
                                 
    dans le code

   Généralement :               
    définition de nouvelles         
    fonctions dans               maNouvelleFonction1();
                                       maNouvelleFonction2();

Intégration

Fichier externe               
                                                                monSiteWeb.html
                                 
2ième solution                      
 Dans un fichier externe        

   Permet d’ alléger, de        
    désencombrer le                 
    fichier HTML                       maNouvelleFonction1();
                                       maNouvelleFonction2();
   L’extention est « .js »         
                                 
                                                              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    Hello World !
    pour un simple « hello
    world! »
                             Interaction!
   Passons en revu ces
    tous petits codes

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://getfirebug.com/javascript
                                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

Vous pouvez aussi lire