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? 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
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 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 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 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 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 vs. Java Ne surtout pas confondre!!! A noter : Java est compilé mais sous forme de bitcode, donc dédié à un processor software JS Code liée à une page HTML et qui est interprété lors de l exécution Utilisation assez limitée, «petite applications» Sources visibles Java Application Java appelée applet et dont le code source a préalablement été compilé avant l exécution Un des langages les plus avancés et donc complet 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» 1 er 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 On ne peut juste pas moins! Mais ce n est pas très «propre» <html> <body> Hello World! </body> </html> Code HTLM 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 1 er 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 html <!doctype html> <html> <head> <title>un exemple en HTML5</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/eg02-01.css"> </head> head title text h1 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 img src,alt body p text li text ul li text text p 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 6 6 5 5 4 4 4 3 3 3 2 2 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 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.2 Réflexion 2 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 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 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 6 6 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 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 > Définition du squelette < script language= javascript >... Instructions javascript... </ script > => Ce squelette peut être ajouté à volonté 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 fonctionsdans<head> <html> <head> <script> function manouvellefonction1() { } function manouvellefonction2() { } </script > </head> <body> <script > manouvellefonction1(); manouvellefonction2(); </script> </body > </html >
Intégration Fichier externe 2 iè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!» 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
http://getfirebug.com/javascript Développement Débogueur 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